* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #08090d; color: #e8e4da;
  font-family: "Russo One", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
input { font-family: inherit; user-select: text; -webkit-user-select: text; }

/* ---------- меню и итоги ---------- */
#menu, #end, #iosTip { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center, rgba(8,9,13,.2), rgba(8,9,13,.78)); overflow-y: auto; touch-action: pan-y; }
.card { width: min(450px, 100%); text-align: center; padding: 22px 20px 18px; border-radius: 18px; margin: auto;
  background: rgba(14,15,19,.86); border: 2px solid #2a2b30; box-shadow: 0 20px 60px rgba(0,0,0,.6); backdrop-filter: blur(3px); }
h1 { margin: 0; font-size: 54px; letter-spacing: 3px; color: #ffefe0;
  text-shadow: 0 0 12px #ff3b2f, 0 0 34px rgba(255,40,30,.6), 3px 3px 0 #000; animation: flick 5s infinite; }
@keyframes flick { 0%, 91%, 95%, 100% { opacity: 1 } 92%, 94% { opacity: .35 } 93% { opacity: .8 } }
.sub { margin-top: 2px; font-size: 13px; letter-spacing: 5px; color: #ff6a55; }
.lead { margin: 12px 0 14px; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.45; color: #cfcabf; }
.lead b { color: #ffd23f; }
#nick, #codeIn { width: 100%; padding: 12px 14px; font-size: 18px; border-radius: 12px; border: 2px solid #34363d; background: #101116; color: #fff; text-align: center; outline: none; }
#nick:focus, #codeIn:focus { border-color: #ffd23f; }
.prefs { display: flex; gap: 6px; margin: 10px 0; }
.prefs button { flex: 1; padding: 10px 4px; font-size: 14px; border-radius: 10px; background: #1d1e24; border: 2px solid #33353c; color: #b9b4aa; }
.prefs button.on { border-color: #ffd23f; color: #fff; background: #2a2614; }
.big { display: block; width: 100%; padding: 16px; font-size: 24px; letter-spacing: 2px; border-radius: 14px; color: #1a0d05;
  background: linear-gradient(#ffd85a, #f2a20c); box-shadow: 0 5px 0 #8a5400, 0 0 26px rgba(255,190,40,.35); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5400; }
.mid { padding: 12px 10px; font-size: 15px; border-radius: 12px; background: #2a2c33; border: 2px solid #3d4048; white-space: nowrap; }
.row2 { display: flex; gap: 8px; margin-top: 10px; }
.row2 > * { flex: 1; }
.join { display: flex; gap: 6px; }
#codeIn { padding: 10px 6px; font-size: 16px; text-transform: uppercase; letter-spacing: 3px; min-width: 0; }
.pulse { animation: pulseB 1s infinite alternate; border-color: #ffd23f; }
@keyframes pulseB { to { box-shadow: 0 0 18px rgba(255,210,63,.7); } }
.small { padding: 9px 13px; font-size: 14px; border-radius: 10px; background: #24262c; border: 1px solid #3a3c43; }
.small.go { background: linear-gradient(#ffd85a, #f2a20c); color: #1a0d05; font-size: 16px; padding: 10px 18px; }
.row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#online { margin-top: 10px; font-size: 13px; color: #9fd47a; min-height: 16px; }
.how { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; font-family: system-ui, sans-serif; font-size: 13px; color: #bdb8ad; }
.how li { padding: 3px 0; }
.note { font-family: system-ui, sans-serif; font-size: 12px; color: #8f8b83; margin: 10px 0 0; }
h2 { margin: 0 0 6px; font-size: 38px; letter-spacing: 2px; }
h2.win { color: #9dff7a; text-shadow: 0 0 20px rgba(120,255,90,.5), 3px 3px 0 #000; }
h2.lose { color: #ff5b4a; text-shadow: 0 0 20px rgba(255,60,40,.5), 3px 3px 0 #000; }
#endS { margin: 0 0 12px; font-family: system-ui, sans-serif; color: #cfcabf; font-size: 14px; }
#endTable { display: flex; flex-direction: column; gap: 5px; text-align: left; }
#endTable div { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; background: #1b1c21; border-radius: 10px; padding: 7px 10px; font-size: 15px; }
#endTable div.me { border: 2px solid #ffd23f; }
#endTable span { font-family: system-ui, sans-serif; font-size: 13px; text-align: right; }
#endTable small { grid-column: 1 / 3; font-family: system-ui, sans-serif; font-size: 12px; color: #8f8b83; }
#iosTip p { font-family: system-ui, sans-serif; line-height: 1.6; }

/* ---------- комната (ожидание) ---------- */
#lobbyUI { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(480px, calc(100% - 20px));
  background: rgba(14,15,19,.88); border: 2px solid #2a2b30; border-radius: 16px; padding: 12px 14px; text-align: center; }
.lhead { display: flex; gap: 8px; align-items: center; }
.lhead b { flex: 1; text-align: left; font-size: 20px; color: #ffd23f; }
#plist { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pp { padding: 5px 9px; border-radius: 8px; background: #1f2026; font-size: 14px; }
.pp.me { border: 1px solid #ffd23f; }
.ptitle { text-align: left; font-size: 13px; color: #cfcabf; margin: 8px 0 4px; }
.poll { display: flex; gap: 6px; }
.poll button { flex: 1; position: relative; overflow: hidden; padding: 7px 4px; border-radius: 10px; background: #1d1e24; border: 2px solid #33353c; font-size: 13px; line-height: 1.2; }
.poll button.on { border-color: #ffd23f; }
.poll button i { position: absolute; left: 0; bottom: 0; height: 4px; background: #ffd23f; transition: width .3s; }
.poll button small { display: block; font-family: system-ui, sans-serif; font-size: 11px; color: #9a958b; margin-top: 2px; }
.lfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#lobbyWait { font-size: 17px; color: #9fd47a; }

/* ---------- HUD ---------- */
#tl { position: fixed; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); pointer-events: none; max-width: 58vw; }
#timer { font-size: 30px; color: #ffd23f; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,200,40,.4); }
#timer.red { color: #ff4a3a; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
#counts { font-size: 15px; margin: 2px 0 6px; text-shadow: 1px 1px 0 #000; }
#quests { display: flex; flex-direction: column; gap: 3px; }
.q { position: relative; overflow: hidden; font-family: system-ui, sans-serif; font-size: 12.5px; padding: 4px 9px; border-radius: 7px;
  background: rgba(10,11,15,.72); border-left: 3px solid #ffd23f; color: #e8e4da; white-space: nowrap; text-overflow: ellipsis; }
.q i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,210,63,.18); }
.q.done { border-color: #6fd24a; color: #8a8a80; text-decoration: line-through; }
.q.lock { border-color: #555; color: #9a958b; white-space: normal; }
.q.done i { background: rgba(111,210,74,.15); }
body.guard .q { border-color: #5aa0ff; }
.q.bonus { border-left-color: #c77dff; }
.q span b { font-weight: normal; opacity: .45; margin-left: 1px; }
.q span b.ok { opacity: 1; }
#goal { margin-top: 5px; font-family: system-ui, sans-serif; font-size: 13px; color: #ffd23f; text-shadow: 1px 1px 0 #000, 0 0 6px #000; white-space: normal; max-width: 56vw; }
#actName { position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%); max-width: 90vw; text-align: center; pointer-events: none;
  font-family: system-ui, sans-serif; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 8px #000; }
#actBtn.wait { filter: grayscale(.8) brightness(.8); animation: none; }
#tr { position: fixed; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); pointer-events: none; }
#mini { width: 172px; height: auto; border-radius: 10px; border: 2px solid #2c2e34; background: #0b0c10; opacity: .92; display: block; }
#specNote { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(10,11,15,.8); padding: 8px 14px; border-radius: 10px; font-size: 14px; }
#runBtn, #actBtn, #alarmBtn { position: fixed; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; touch-action: none; }
#runBtn { right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); width: 88px; height: 88px; font-size: 18px;
  background: radial-gradient(#3a3d46 55%, transparent 56%), conic-gradient(#4fd1ff calc(var(--st, 1) * 360deg), #23252b 0);
  box-shadow: 0 0 0 3px #111, 0 6px 18px rgba(0,0,0,.5); }
#runBtn.on { filter: brightness(1.35); }
#actBtn { right: 124px; bottom: 40px; width: 100px; height: 100px; font-size: 13px;
  background: radial-gradient(#e0a20f 55%, transparent 56%), conic-gradient(#fff calc(var(--p, 0) * 360deg), #6d4d06 0);
  box-shadow: 0 0 0 3px #111, 0 0 24px rgba(255,190,40,.5); color: #1a0d05; animation: bob 1s infinite alternate; }
#actIco { font-size: 28px; line-height: 1; }
@keyframes bob { to { transform: translateY(-4px); } }
#alarmBtn { right: max(30px, env(safe-area-inset-right)); bottom: 132px; width: 72px; height: 72px; font-size: 11px; background: #8a1a14; box-shadow: 0 0 0 3px #111, 0 0 18px rgba(255,40,30,.5); }
#alarmBtn span { font-size: 22px; line-height: 1; }
#alarmBtn small { font-size: 10px; opacity: .8; }
#alarmBtn.off { filter: grayscale(1) brightness(.6); }
#emos { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 6px; }
#emos button { width: 38px; height: 38px; border-radius: 50%; background: rgba(20,21,26,.75); font-size: 19px; border: 1px solid #33353c; }
#hint { position: fixed; bottom: 54px; left: 50%; transform: translateX(-50%); font-family: system-ui, sans-serif; font-size: 13px;
  color: #8f8b83; background: rgba(0,0,0,.45); padding: 5px 12px; border-radius: 8px; pointer-events: none; white-space: nowrap; }
#hint b { color: #e8e4da; }
body.touch #hint { display: none; }
body:not(.touch) #runBtn { display: none; }
body:not(.touch) #actBtn { right: 50%; transform: translateX(50%); bottom: 96px; animation: none; }
body:not(.touch) #alarmBtn { right: 24px; bottom: 24px; }
body.touch #emos { left: auto; right: auto; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); }

#storyTop { position: fixed; left: 0; right: 0; top: 30%; text-align: center; font-family: "Courier New", monospace; font-size: 20px; color: #d9d4c8;
  text-shadow: 0 0 8px #000, 2px 2px 0 #000; opacity: 0; transition: opacity .6s; pointer-events: none; padding: 0 16px; }
#storyTop.show { opacity: 1; }
#announce { position: fixed; left: 0; right: 0; top: 22%; text-align: center; pointer-events: none; font-size: 40px; letter-spacing: 1px;
  color: #fff; text-shadow: 0 0 18px rgba(255,60,40,.8), 3px 3px 0 #000; opacity: 0; transition: opacity .25s, transform .25s; padding: 0 12px; }
#announce.show { opacity: 1; transform: scale(1.06); }
#announce.good { text-shadow: 0 0 18px rgba(120,255,90,.8), 3px 3px 0 #000; }
#announce.gold { color: #ffd23f; text-shadow: 0 0 18px rgba(255,190,40,.8), 3px 3px 0 #000; }
#toast { position: fixed; left: 50%; bottom: 160px; transform: translateX(-50%); max-width: 92vw; text-align: center;
  font-family: system-ui, sans-serif; font-size: 15px; padding: 9px 16px; border-radius: 10px; background: rgba(10,11,15,.9);
  border: 1px solid #3a3c43; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; }
#toast.show { opacity: 1; }
#feed { position: fixed; right: max(12px, env(safe-area-inset-right)); top: 165px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none; font-family: system-ui, sans-serif; font-size: 13px; }
#feed div { background: rgba(10,11,15,.75); padding: 4px 9px; border-radius: 7px; animation: fade 4.5s forwards; }
@keyframes fade { 0%, 80% { opacity: 1 } 100% { opacity: 0 } }

@media (max-width: 600px) {
  h1 { font-size: 44px; }
  #timer { font-size: 24px; }
  .q { font-size: 11px; padding: 3px 7px; max-width: 54vw; }
  #mini { width: 116px; }
  #announce { font-size: 28px; }
  #feed { top: 112px; font-size: 12px; }
  #counts { font-size: 13px; }
  #emos button { width: 34px; height: 34px; font-size: 17px; }
  #emos { left: 30%; }
}

#planVote { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); width: min(520px, calc(100% - 20px)); text-align: center; z-index: 6;
  background: rgba(14,15,19,.92); border: 2px solid #ffd23f; border-radius: 16px; padding: 12px; }
#pvTitle { display: block; font-size: 20px; color: #ffd23f; margin-bottom: 4px; }
#pvTime { display: block; font-size: 13px; color: #9a958b; margin-bottom: 8px; }
#pvOpts button { font-size: 14px; padding: 10px 4px; }
#net { position: fixed; left: 50%; top: max(4px, env(safe-area-inset-top)); transform: translateX(-50%); font-family: system-ui, sans-serif; font-size: 11px;
  color: #8f8b83; background: rgba(0,0,0,.4); padding: 2px 8px; border-radius: 6px; pointer-events: none; z-index: 7; }
#net.bad { color: #ff7a6a; }