/* «Не своя игра» — телефон игрока. Стиль из утвержденного прототипа. */
:root{
  color-scheme: dark;
  --plum:#452352; --plum-deep:#2A1334; --ink:#1E0F24;
  --teal:#20B5A7; --orange:#FF842E; --cream:#FFF4DB; --yellow:#FFD452; --sky:#A9E1F6;
  --red:#E8412F; --red-deep:#B32A1E; --green:#2DB24B; --green-deep:#1C7F33;
  --amber:#FFB020; --muted:#B9A6C4; --paper:#e9dcc4;
  --display:"Rubik","Arial Black",system-ui,sans-serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --line:3px solid var(--ink);
  --pop:0 4px 0 var(--ink);
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;height:100%;background:var(--plum-deep);color:var(--cream);font:500 16px/1.35 var(--body);
  overscroll-behavior:none;overflow:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#2a1334 url(/img/bg.webp) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#1e0f2477 0%,#1e0f2433 30%,#1e0f24cc 100%)}
[hidden]{display:none!important}
button{font:inherit;color:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0}
input,textarea{font:inherit;margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
h1,h2,h3,p{margin:0}

#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.bar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 16px 0;min-height:56px}
.bar .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.bar .who b{font:800 15px/1.15 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000}
.bar .who small{font-size:13px;color:var(--cream);opacity:.85;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbtn{flex:none;margin-left:auto;width:48px;height:48px;border-radius:50%;border:var(--line);background:var(--cream);color:var(--ink);
  font:900 24px/1 var(--display);box-shadow:0 3px 0 var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.qbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

.screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.screen.fixed{overflow:hidden}
.screen > *{flex-shrink:0}
.grow{flex:1 1 auto!important;min-height:0}
.spacer{flex:1 1 auto!important}

/* ---------- заголовки и часы ---------- */
.top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;min-height:120px}
.top.m{grid-template-columns:auto minmax(0,1fr) auto}
.top.m > .clock{grid-column:3}
.shout{font:italic 900 clamp(30px,9.5vw,44px)/.92 var(--display);text-transform:uppercase;color:var(--yellow);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);transform:rotate(-4deg);letter-spacing:-.01em;
  overflow-wrap:anywhere;position:relative;z-index:1;padding:4px 2px}
.shout.orange{color:var(--orange)} .shout.sky{color:var(--sky)} .shout.green{color:#7BE08F} .shout.red{color:#FF8A7A}
.shout.mud{color:#D9A066} .shout.web{color:var(--cream);font-size:clamp(25px,7.4vw,34px)} .shout.small{font-size:clamp(26px,8vw,36px)} .shout.scr{font-size:clamp(22px,6.6vw,30px)}
.clock{position:relative;width:clamp(120px,36vw,150px);flex:none;aspect-ratio:1;background:url(/img/clock.webp) center/contain no-repeat;
  container-type:inline-size;margin-right:-6px;z-index:1}
.clock b{position:absolute;left:29.7%;top:35.5%;width:39.3%;height:38.1%;display:grid;place-items:center;font:900 26cqw/1 var(--display);
  letter-spacing:-.04em;color:var(--red);font-variant-numeric:tabular-nums;text-box:trim-both cap alphabetic}
.clock.hurry b{color:#C4161C}
.clock.shake{animation:shake .5s infinite}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.clock.mini{width:74px;margin:-14px -8px -10px 0}
.clock.mid{width:92px;margin:-10px -6px -8px 0}
.mascot{position:relative;z-index:0;width:clamp(90px,28vw,112px);max-width:none;margin:0 -16px -14px;justify-self:center;align-self:end;pointer-events:none;
  filter:drop-shadow(0 4px 0 #0006);transform-origin:bottom center;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 56%,transparent 71%);mask-image:radial-gradient(circle at 50% 45%,#000 56%,transparent 71%)}
.mascot.punch{animation:punch .25s}
@keyframes punch{50%{transform:rotate(-8deg) scale(1.08)}}
.sbar{height:10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden;flex:none}
.sbar i{display:block;height:100%;background:var(--red);transform-origin:left;border-radius:inherit}
.sbar.dark{background:#2a1334;border-color:var(--ink)}

.plate{align-self:center;max-width:100%;background:var(--cream);color:var(--ink);border:var(--line);border-radius:12px;padding:6px 14px;font-weight:700;
  box-shadow:var(--pop);font-size:15px;text-align:center;overflow-wrap:anywhere}
.lead{text-align:center;font-weight:700;text-shadow:0 1px 3px #000;font-size:17px}
.muted{color:var(--muted)}
.hint{text-align:center;font-size:14px;color:var(--cream);min-height:1.3em;text-shadow:0 1px 2px #000}
.status{min-height:24px;text-align:center;font-weight:700;text-shadow:0 1px 2px #000}
.err{color:#FFB4A8;font-weight:700;font-size:15px;min-height:1.3em;text-shadow:0 1px 2px #000}

/* ---------- кнопки ---------- */
.big{width:100%;min-height:56px;border:var(--line);border-radius:16px;background:var(--yellow);color:var(--ink);font:900 22px/1.05 var(--display);text-transform:uppercase;
  padding:14px 10px;box-shadow:0 5px 0 var(--ink);cursor:pointer;letter-spacing:.02em}
.big:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.big:disabled{background:#8d8198!important;color:#2d2233!important;cursor:not-allowed;box-shadow:0 3px 0 var(--ink)}
.big.red{background:var(--red);color:var(--cream)} .big.green{background:var(--green);color:var(--cream)}
.big.cream{background:var(--cream)}
.big small{display:block;font:700 13px/1.2 var(--body);text-transform:none;margin-top:4px;letter-spacing:0}
.link{background:none;border:0;color:var(--cream);text-decoration:underline;cursor:pointer;font-size:15px;align-self:center;padding:12px;min-height:48px;text-shadow:0 1px 2px #000}
.sheet-body .link{color:var(--ink);text-shadow:none}
.btnrow{display:flex;gap:8px}
.btnrow > *{flex:1;min-width:0}
.btnrow .big{font-size:16px;padding:12px 4px;letter-spacing:0}
.dock{position:sticky;bottom:0;display:flex;flex-direction:column;gap:6px;padding-top:6px;margin-top:auto}

/* ---------- карточки ---------- */
.card{background:var(--cream);color:var(--ink);border:var(--line);border-radius:16px;padding:14px;box-shadow:var(--pop)}
.card h3{font:900 20px/1.15 var(--display);text-transform:uppercase;margin-bottom:6px}
.card p + p{margin-top:6px}
.card.sky{background:var(--sky)} .card.yellow{background:var(--yellow)} .card.green{background:#9BE7A9} .card.red{background:#FFB4A8} .card.orange{background:#FFC08F}
.card.lilac{background:#E3D2F5}
.card.row2{display:flex;gap:12px;align-items:center}
.card.row2 img{width:52px;height:52px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 0 #0005)}
.card.row2 .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.card.row2 .tx b{display:block;font:800 17px/1.2 var(--display)}
.card.row2 .tx span{display:block;font-size:14px;margin-top:2px}
.card.center{text-align:center}
.q-card{background:var(--cream);color:var(--ink);border:var(--line);border-radius:16px;padding:14px 12px;text-align:center;box-shadow:var(--pop);
  font:800 20px/1.22 var(--display);text-wrap:balance;overflow-wrap:anywhere}
.q-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.chip{background:var(--cream);color:var(--ink);border:var(--line);border-radius:10px;padding:4px 10px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip.x2{background:var(--yellow);font:900 16px var(--display)}
.from{background:var(--sky);color:var(--ink);border:var(--line);border-radius:10px;padding:4px 10px;font-weight:700;font-size:13px;min-width:0;overflow-wrap:anywhere}
.from.f-mud{background:#D9A066} .from.f-web{background:#E3D2F5} .from.f-scramble{background:var(--yellow)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{background:var(--cream);color:var(--ink);border:var(--line);border-radius:14px;padding:10px;box-shadow:0 3px 0 var(--ink);text-align:center;min-width:0}
.tile small{display:block;font-size:13px;font-weight:700;color:#5b4a63}
.tile b{display:block;font:900 28px/1.1 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tile.wide{grid-column:1/-1}
.tile.hl{background:var(--yellow)}

/* ---------- вход / команды ---------- */
.logo{text-align:center;margin:18px 0 6px}
.logo .shout{display:inline-block;font-size:clamp(38px,12vw,54px)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;text-shadow:0 1px 2px #000}
.inp{width:100%;min-height:52px;border:var(--line);border-radius:12px;padding:10px 12px;font:500 18px var(--body);background:#fff;color:var(--ink)}
.inp::placeholder{color:#8a7a92}
.search{width:100%;min-height:48px;border:var(--line);border-radius:12px;padding:10px 12px;font:500 16px var(--body);background:#fff;color:var(--ink)}
.list > *{flex-shrink:0}
.list{overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;overscroll-behavior:contain;padding:3px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;border:2px solid var(--ink);border-radius:10px;padding:9px 10px;
  background:#fff;color:var(--ink);cursor:pointer;text-align:left;min-height:52px;width:100%}
.row b{font-weight:700;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row b.open{-webkit-line-clamp:unset;display:block}
.row em{font-style:normal;font-size:14px;color:#5b4a63;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .tag{grid-column:1/-1;justify-self:start;background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:2px 6px}
.row .tag.pend{background:var(--amber);color:var(--ink)}
.row .tag.full{background:#6f6378}
.row[aria-pressed="true"]{background:var(--orange);outline:3px solid var(--ink)}
.row[aria-pressed="true"] b::before{content:"✓ ";}
.row:disabled{background:#d8cfdc;cursor:not-allowed}
.row.me{background:var(--yellow)}
.list.onpaper{background:#ffffff22;border-radius:12px}
.empty{color:var(--cream);text-align:center;padding:14px;text-shadow:0 1px 2px #000}
.sheet-body .empty{color:#5b4a63;text-shadow:none}
.players{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.players li{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;min-height:48px}
.players li .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sky);border:2px solid var(--ink);display:grid;place-items:center;font:900 14px var(--display)}
.players li .nm{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.players li .st{font-size:13px;color:#5b4a63;display:flex;align-items:center;gap:5px;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:#9a8fa0;border:1.5px solid var(--ink);display:inline-block}
.dot.on{background:var(--green)}
.banner{background:var(--amber);color:var(--ink);border:var(--line);border-radius:12px;padding:10px 12px;font-weight:700;box-shadow:0 3px 0 var(--ink)}
.banner.red{background:#FFB4A8}

/* ---------- голосование ---------- */
.topics{display:flex;flex-direction:column;gap:12px}
.topic{position:relative;min-height:84px;border:var(--line);border-radius:16px;background:var(--cream);color:var(--ink);box-shadow:var(--pop);
  font:900 24px/1.1 var(--display);padding:14px 48px 14px 14px;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.topic:nth-child(1){background:#FFC08F} .topic:nth-child(2){background:#9FE3DA} .topic:nth-child(3){background:#D8C2F2}
.topic:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.topic:disabled{cursor:default}
.topic.dim{opacity:.5}
.topic[aria-pressed="true"]{outline:5px solid var(--yellow);outline-offset:2px}
.topic[aria-pressed="true"]::after{content:"✓";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  background:var(--yellow);border:var(--line);font:900 18px/26px var(--body);text-align:center}
.topic.win{font-size:30px;min-height:120px;display:grid;place-items:center;text-align:center;padding:16px}

/* ---------- элементы (Твой ход) ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;flex:1 1 auto;min-height:280px}
.col{border:var(--line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--pop);min-width:0}
.col.bad{background:var(--red)} .col.good{background:var(--green)}
.col.fin{background:var(--red)}
.col h2{text-align:center;font:900 16px/1.2 var(--display);letter-spacing:.04em;color:var(--ink);text-transform:uppercase}
.el{position:relative;flex:1;min-height:58px;display:flex;align-items:center;gap:6px;border:var(--line);border-radius:12px;padding:4px 6px;cursor:pointer;text-align:left;
  transition:transform .12s;min-width:0;width:100%}
.bad .el,.fin .el{background:#F2604F} .good .el{background:#45C764}
.el:active{transform:scale(.97)}
.el img{width:44px;height:44px;flex:none;object-fit:contain;filter:drop-shadow(0 2px 0 #0005)}
.el .ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--cream);border:2px solid var(--ink);color:var(--ink);font:900 15px/1 var(--display)}
.el span{font:800 12px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);text-transform:uppercase;overflow-wrap:break-word;hyphens:auto;min-width:0}
.el small{position:absolute;right:5px;top:3px;font:800 11px var(--body);color:var(--ink);opacity:.8}
.el[aria-pressed="true"]{outline:4px solid var(--yellow);outline-offset:1px;transform:scale(1.02);z-index:1}
.el[aria-pressed="true"]::after{content:"✓";position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--yellow);border:var(--line);
  color:var(--ink);font:900 13px/18px var(--body);text-align:center}
.el.used{filter:saturate(.15) brightness(.85);cursor:not-allowed}
.el.used > span:not(.ic)::after{content:"Использовано";display:block;font:700 10px var(--body);text-transform:none;margin-top:2px}
.fin .el{min-height:72px}

/* ---------- нижний лист ---------- */
.layer{position:fixed;inset:0;z-index:20;pointer-events:none}
.layer > *{pointer-events:auto}
.sheet{position:fixed;inset:0;background:#1e0f24cc;display:flex;flex-direction:column;justify-content:flex-end;z-index:30;animation:fade .2s}
.sheet-body{width:100%;max-width:480px;margin:0 auto;background:var(--cream);color:var(--ink);border-top:var(--line);border-radius:22px 22px 0 0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;max-height:88%;max-height:88dvh;animation:up .25s cubic-bezier(.3,1.2,.5,1)}
.sheet-body.tall{height:88%;height:88dvh}
.sheet-body.scroll{overflow-y:auto}
.sheet-body h3{font:900 22px/1.1 var(--display);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sheet-body h3 img{width:36px;height:36px;flex:none}
.sheet-body h3 span{flex:1;min-width:0;overflow-wrap:anywhere}
.sheet-body h3 .chip{flex:none}
.sheet-body .big{flex:none}
.help h4{font:900 17px/1.2 var(--display);text-transform:uppercase;margin:6px 0 2px}
.help p{font-size:15px}
.help .els{display:flex;flex-direction:column;gap:6px}
.help .els div{display:flex;gap:10px;align-items:center;font-size:14px}
.help .els img{width:40px;height:40px;flex:none}
.help .els .ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:#F2604F;border:2px solid var(--ink);font:900 14px var(--display)}
.help .els b{font-family:var(--display)}
.help .bad b{color:var(--red-deep)} .help .good b{color:var(--green-deep)}
@keyframes up{from{transform:translateY(40px);opacity:.3}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}}

/* ---------- всплывающие ---------- */
.toast{position:fixed;left:16px;right:16px;top:34%;z-index:40;max-width:448px;margin:0 auto;background:var(--cream);color:var(--ink);border:var(--line);border-radius:18px;padding:16px;
  text-align:center;box-shadow:0 6px 0 var(--ink);animation:pop .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.toast strong{display:block;font:italic 900 30px/1 var(--display);text-transform:uppercase;color:var(--green);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;margin-bottom:6px}
.toast.wait strong{color:var(--orange)}
.toast.parchment{pointer-events:auto;background:none;border:0;box-shadow:none;padding:0;top:22%;left:8px;right:8px;animation:unfurl .6s cubic-bezier(.2,1.4,.4,1);cursor:pointer}
.toast.parchment img{display:block;width:100%;height:auto;border-radius:6px;filter:drop-shadow(0 8px 14px #000a)}
.toast.parchment p{position:absolute;left:14%;right:10%;bottom:4.5%;margin:0;font:italic 700 clamp(14px,4vw,17px)/1.2 "Old Standard TT",Georgia,serif;color:#3b2412;text-align:center}
@keyframes unfurl{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
#net{position:fixed;left:0;right:0;top:0;z-index:60;background:var(--red);color:#fff;border-bottom:var(--line);text-align:center;font-weight:800;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px}

/* ---------- вопрос ---------- */
.answers{position:relative;display:flex;flex-direction:column;gap:9px;flex:1 1 auto;min-height:0;justify-content:center}
.ans{position:relative;min-height:54px;border:var(--line);border-radius:14px;padding:13px 10px;font:800 18px/1.15 var(--body);color:var(--ink);box-shadow:0 3px 0 var(--ink);
  cursor:pointer;text-align:center;overflow-wrap:anywhere;width:100%}
.ans:nth-child(1){background:var(--orange)} .ans:nth-child(2){background:var(--teal)} .ans:nth-child(3){background:#A77BE0} .ans:nth-child(4){background:#E6E45A}
.ans:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ans[aria-pressed="true"]{outline:5px solid var(--yellow);outline-offset:2px}
.ans .tag{display:inline-block;margin-left:6px;vertical-align:middle;background:var(--ink);color:var(--yellow);font:800 12px/1 var(--body);border-radius:6px;padding:4px 6px;white-space:nowrap}
.ans:disabled{cursor:default}
.answers.locked .ans:not([aria-pressed="true"]){opacity:.55}
.ans.removed{background:#9b93a0!important;color:#4a4050;box-shadow:none;border-style:dashed;opacity:1!important}
.ans.removed .t{text-decoration:line-through;text-decoration-thickness:2px}
.ans.removed .tag{background:#4a4050;color:#fff}
.ans.right{background:#7BE08F!important;opacity:1!important}
.ans.right .tag.ok{background:var(--green-deep);color:#fff}
.ice{position:absolute;inset:-8px;border-radius:18px;z-index:2;cursor:pointer;touch-action:none;
  background:linear-gradient(160deg,#e9fbffee 0%,#a9e1f6d9 35%,#7cc8ecd0 70%,#bdeeffe6 100%);
  border:3px solid #fff;box-shadow:inset 0 0 0 3px #7cc8ec,inset 0 10px 30px #ffffffaa,0 4px 0 var(--ink);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ice::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,#ffffff00 0 22px,#ffffff55 22px 26px,#ffffff00 26px 60px);opacity:.6}
.ice svg{position:absolute;inset:0;width:100%;height:100%}
.ice .tapme{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--ink);color:var(--sky);font:800 13px var(--body);border-radius:999px;padding:6px 12px;white-space:nowrap}
.ice.hit{animation:hit .12s}
@keyframes hit{50%{transform:translate(2px,-2px) scale(.995)}}
.shard{position:absolute;z-index:3;width:28px;height:22px;background:linear-gradient(135deg,#fff,#a9e1f6);clip-path:polygon(0 0,100% 30%,60% 100%);border-radius:2px;pointer-events:none;animation:fly .7s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.mudc{position:absolute;left:-8px;top:-8px;z-index:2;border-radius:18px;touch-action:none;cursor:crosshair;width:calc(100% + 16px);height:calc(100% + 16px);transition:opacity .4s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mudc.gone{opacity:0;pointer-events:none}
.webs{position:absolute;left:-8px;top:-8px;z-index:2;touch-action:none;width:calc(100% + 16px);height:calc(100% + 16px);cursor:crosshair;-webkit-user-select:none;user-select:none}
.webs line{stroke-linecap:round;transition:opacity .5s,transform .6s}
.webs line.cut{opacity:0;transform:translateY(12px)}
.overlay-hint{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:3;background:var(--ink);color:var(--cream);font:800 13px var(--body);border-radius:999px;padding:6px 12px;white-space:nowrap;pointer-events:none}

/* ---------- спецзадания ---------- */
.sp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.sp-head p{font:800 20px/1.2 var(--display);text-shadow:0 2px 0 var(--ink);overflow-wrap:anywhere}
.pairs{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:0;position:relative;flex:1 1 auto;min-height:0}
.pairs .pcol{display:flex;flex-direction:column;gap:8px}
.pairs .gap{position:relative}
.pairs svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pi{position:relative;flex:1;min-height:56px;border:var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font:700 18px/1.15 var(--body);padding:8px 10px;
  text-align:left;cursor:pointer;overflow-wrap:anywhere;hyphens:auto;box-shadow:0 3px 0 var(--ink);width:100%}
.pcol.r .pi{text-align:right}
.pi .num{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);font:900 14px/22px var(--display);text-align:center;color:var(--ink)}
.pcol.l .pi .num{right:-15px} .pcol.r .pi .num{left:-15px}
.pcol.l .pi{padding-right:18px} .pcol.r .pi{padding-left:18px}
.pi.sel{outline:5px solid var(--yellow);outline-offset:1px;background:#fff}
.pi.sel::before{content:"Выбрано";position:absolute;top:-10px;left:8px;background:var(--ink);color:var(--yellow);font:800 11px/1 var(--body);padding:3px 5px;border-radius:5px}
.pi.linked{background:#FFE9C2}
.pi.faded{opacity:.55}
.pairs.done .pi{cursor:default}
.basket{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0}
.bk-card{position:relative;min-height:110px;border:var(--line);border-radius:18px;background:var(--cream);color:var(--ink);box-shadow:var(--pop);display:grid;place-items:center;
  padding:14px;text-align:center;font:900 clamp(24px,7.5vw,30px)/1.15 var(--display);overflow-wrap:anywhere;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bk-card.drag{cursor:grabbing;box-shadow:0 10px 20px #0008;z-index:5;transition:none}
.bk-card.back{transition:transform .25s}
.bk-card .where{position:absolute;left:10px;top:8px;font:700 13px var(--body);color:#5b4a63}
.bk-nav{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bk-nav .chip{font-size:15px}
.navb{min-width:48px;min-height:48px;border:var(--line);border-radius:12px;background:var(--cream);color:var(--ink);font:800 15px var(--body);padding:6px 10px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.navb:disabled{opacity:.4;cursor:default}
.cats{display:flex;flex-direction:column;gap:10px}
.cat{min-height:68px;border:var(--line);border-radius:16px;font:800 20px/1.15 var(--body);color:var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:10px 14px;text-align:left;overflow-wrap:anywhere;width:100%}
.cat:nth-child(1){background:#FFC08F} .cat:nth-child(2){background:#9FE3DA} .cat:nth-child(3){background:#D8C2F2}
.cat em{font-style:normal;font:700 13px var(--body);background:#fff9;border:2px solid var(--ink);border-radius:8px;padding:2px 6px;white-space:nowrap}
.cat.over{outline:5px solid var(--yellow);outline-offset:1px;transform:scale(1.02)}
.cat.cur{outline:4px dashed var(--ink);outline-offset:-8px}
.chain{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0;flex:1 1 auto;position:relative}
.ch{display:grid;grid-template-columns:40px minmax(0,1fr) 48px 48px 48px;align-items:center;gap:4px;border:var(--line);border-radius:14px;background:var(--cream);color:var(--ink);
  box-shadow:0 3px 0 var(--ink);padding:4px;min-height:60px;position:relative;touch-action:pan-y}
.ch .pos{width:34px;height:34px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center;font:900 17px var(--display)}
.ch .tx{font:700 18px/1.15 var(--body);overflow-wrap:anywhere;padding:4px}
.ch button{width:48px;height:48px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);font:900 18px var(--body);cursor:pointer;padding:0}
.ch button:disabled{opacity:.3}
.ch .hd{touch-action:none;cursor:grab;background:var(--sky);font-size:22px}
.ch.drag{z-index:5;box-shadow:0 10px 20px #0008;background:#fff;transition:none}
.ch.moving{transition:transform .15s}
.chain.done .ch button{visibility:hidden}
.sol{display:flex;flex-direction:column;gap:6px}
.sol div{display:flex;gap:8px;align-items:flex-start;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:8px 10px;font-weight:700;overflow-wrap:anywhere}
.sol div i{font-style:normal;flex:none;min-width:26px;font-weight:900}
.sol .ok i{color:var(--green-deep)} .sol .bad i{color:var(--red-deep)}
.sol h4{font:900 16px var(--display);margin-top:4px;text-shadow:0 1px 2px #000}

/* ---------- финал ---------- */
.fin-ans{display:flex;flex-direction:column;gap:10px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:60px;border:var(--line);border-radius:14px;background:var(--cream);color:var(--ink);
  padding:8px 12px;box-shadow:0 3px 0 var(--ink);cursor:pointer;text-align:left;font:800 18px var(--body)}
.switch .knob{flex:none;width:64px;height:34px;border-radius:999px;border:var(--line);background:#cfc6d4;position:relative}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:left .15s}
.switch[aria-checked="true"]{background:var(--yellow)}
.switch[aria-checked="true"] .knob{background:var(--green)}
.switch[aria-checked="true"] .knob::after{left:31px}
.switch .st{font:800 13px var(--body);display:block;color:#5b4a63}
.switch:disabled{background:#d8cfdc;cursor:not-allowed}
.switch:disabled .knob{opacity:.5}
.window{background:var(--red);color:var(--ink);border:var(--line);border-radius:16px;padding:10px;box-shadow:var(--pop);display:flex;flex-direction:column;gap:8px}
.window h3{font:italic 900 24px/1 var(--display);text-transform:uppercase;color:var(--yellow);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;display:flex;align-items:center;gap:6px}
.window h3 span{flex:1}
.window .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.window p{font-weight:700;color:var(--cream);text-shadow:0 1px 2px #000}

/* ---------- итоги ---------- */
.board{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;background:#ffffffe6;color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:6px 10px;min-height:40px}
.board li.me{background:var(--yellow);font-weight:800}
.board li i{font-style:normal;font:900 16px var(--display);text-align:center}
.board li span{overflow-wrap:anywhere}
.board li b{font-variant-numeric:tabular-nums}
.nom{background:var(--yellow);color:var(--ink);border:var(--line);border-radius:18px;padding:16px;text-align:center;box-shadow:var(--pop)}
.nom h3{font:italic 900 28px/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.nom .w{font:800 20px/1.2 var(--display);margin-top:8px;overflow-wrap:anywhere}
.mygame{background:var(--cream);color:var(--ink);border:var(--line);border-radius:18px;padding:14px;box-shadow:var(--pop);display:flex;flex-direction:column;gap:6px}
.mygame h3{font:italic 900 26px/1 var(--display);text-transform:uppercase;color:var(--orange);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.mygame .ln{display:flex;justify-content:space-between;gap:8px;border-bottom:2px dashed #0002;padding:4px 0}
.mygame .ln b{text-align:right;overflow-wrap:anywhere}
.imgview{position:fixed;inset:0;z-index:50;background:#1e0f24ee;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:16px}
.imgview img{max-width:100%;max-height:70vh;border:var(--line);border-radius:12px;-webkit-touch-callout:default}
.imgview p{text-align:center;font-weight:700}
.imgview a{color:var(--yellow);font-weight:800}

.try{display:flex;flex-direction:column;gap:10px}
.try .answers{min-height:250px;flex:none}

@media (max-height:700px){
  .top{min-height:96px}
  .clock{width:clamp(96px,28vw,120px)}
  .mascot{width:84px}
  .q-card{font-size:18px;padding:10px}
  .ans{min-height:48px;padding:10px 8px;font-size:17px}
  .shout{font-size:clamp(26px,8.4vw,38px)}
}
@media (max-width:370px){
  .el img{width:36px;height:36px}
  .el{gap:4px;padding:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}