/* Игровой экран: HUD, свиток-пергамент, поле ответа, итог и «столы» каждого вида головоломок. */
.play { display: grid; gap: 12px; }
.hud { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 4px 0; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--cream); text-decoration: none; font-weight: 800; transition: transform .25s var(--spring), background .2s; }
.back:hover { background: var(--glass-2); transform: translateX(-3px); color: var(--cream); }
.hud-title { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; }
.hud-emoji { font-size: 2rem; } .hud-title h1 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--amber-300); }
.hud-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; } .hud-sub .stars { color: var(--amber); letter-spacing: 2px; font-size: .95rem; }
.chip.dim { opacity: .75; }
.hud-stats { display: flex; align-items: center; gap: 10px; }
.stat.big { font: 700 1.5rem var(--font-num); color: var(--amber-300); } .stat { padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-weight: 800; }
.stat.dim { background: none; border: 0; opacity: .7; font-weight: 600; font-size: .85rem; } .stat.timer.low { color: var(--bad); animation: pulse-t .6s ease-in-out infinite; } .stat.score b { font-family: var(--font-num); color: var(--amber-300); font-size: 1.3rem; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: end; }
.coach { position: relative; display: grid; place-items: end center; padding-top: 70px; min-height: 280px; }
.coach .owl-bubble { bottom: 88%; }
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; }
  .play { position: relative; }
  .stage { position: static; }
  .coach { position: absolute; right: 8px; top: 62px; width: 96px; height: 96px; min-height: 0; padding: 0; z-index: 30; pointer-events: none; }
  .coach .owl { --s: 92px !important; } .coach .owl-bubble { right: 0; left: auto; bottom: 96%; transform: translate(0, 10px) scale(.85); max-width: min(230px, 70vw); font-size: .84rem; } .coach .owl-bubble.show { transform: translate(0, -2px) scale(1); }
  .hud { padding-right: 100px; }
  .hud-stats { margin-left: auto; }
}

/* ---------- свиток ---------- */
.scroll-host { min-width: 0; }
.scroll { --paper: #f6e7c7; position: relative; margin: 14px 0 6px; display: grid; grid-template-rows: auto 0fr auto; transition: grid-template-rows .95s var(--ease); color: var(--ink); filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .5)); }
.scroll.open { grid-template-rows: auto 1fr auto; }
.scroll-rod { position: relative; z-index: 2; height: 30px; margin: 0 -16px; border-radius: 16px; background: linear-gradient(180deg, #6b4421, #c98b4b 30%, #e0aa63 55%, #8a5a2b 85%); box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .35); }
.scroll-rod::before, .scroll-rod::after { content: ''; position: absolute; top: -4px; bottom: -4px; width: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd58a, #b9760b 70%, #6b4421); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.scroll-rod::before { left: -10px; } .scroll-rod::after { right: -10px; }
.scroll-body { position: relative; min-height: 0; overflow: hidden; padding: 0 clamp(18px, 4vw, 46px); background: radial-gradient(130% 90% at 50% 0%, #fff8e4, var(--paper) 55%, #e8d09a); box-shadow: inset 0 0 70px rgba(150, 100, 30, .28); margin: 0 4px; }
.scroll.settled .scroll-body { overflow: visible; }
.scroll.open .scroll-body { padding-top: 26px; padding-bottom: 24px; transition: padding .95s var(--ease); }
.scroll:not(.open) .scroll-body { padding-top: 0; padding-bottom: 0; }
.scroll-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scroll-body > * { position: relative; }
.scroll-body.center { text-align: center; display: grid; gap: 10px; justify-items: center; }
.scroll .chip { background: rgba(42, 27, 61, .08); border-color: rgba(42, 27, 61, .22); color: var(--ink-soft); }
.scroll .dim { color: var(--ink-soft); opacity: .85; } .scroll a { color: #8a4a0b; }
.scroll h2 { color: #4a2f77; font-size: 2rem; }
.scroll .btn-ghost { color: var(--ink); background: rgba(42, 27, 61, .06); box-shadow: inset 0 0 0 1.5px rgba(42, 27, 61, .3); } .scroll .btn-ghost:hover { background: rgba(42, 27, 61, .12); color: var(--ink); }
.riddle-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
.riddle-text { font-family: var(--font-script); font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.3; text-align: center; margin: 14px auto 22px; color: #3a2352; max-width: 30ch; text-wrap: balance; }
.riddle-text.plain { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.scroll.loading .scroll-body { padding: 26px; } .scroll .sk { background: linear-gradient(90deg, rgba(42, 27, 61, .07), rgba(42, 27, 61, .17), rgba(42, 27, 61, .07)) 0 0 / 220% 100%; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes hint-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes pulse-t { 50% { transform: scale(1.12); } }

/* ---------- поле ответа ---------- */
.answer { display: grid; gap: 10px; margin: 6px auto 0; max-width: 560px; }
.answer-row { display: flex; gap: 10px; }
.scroll .ans-input { flex: 1; min-width: 0; height: 58px; padding: 0 18px; border-radius: 16px; border: 2.5px solid #c9a76a; background: #fffaf0; color: var(--ink); font: 800 1.3rem var(--font-body); box-shadow: inset 0 2px 6px rgba(120, 80, 20, .15); transition: border-color .2s, box-shadow .2s; }
.scroll .ans-input:focus { outline: none; border-color: #e09a1f; box-shadow: 0 0 0 5px rgba(240, 154, 31, .25), inset 0 2px 6px rgba(120, 80, 20, .1); }
.scroll .ans-input::placeholder { color: rgba(90, 70, 112, .5); font-weight: 600; }
.ans-btn { height: 58px; } .ans-note { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--ink-soft); } .ans-note[data-tone="bad"] { color: var(--bad-d); } .ans-note[data-tone="warm"] { color: #b86a00; } .ans-note[data-tone="ok"] { color: var(--good-d); }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 52px; }
.tile { min-width: 42px; height: 48px; padding: 0 9px; border-radius: 11px; display: inline-grid; place-items: center; border: 2px solid #c98b4b; background: linear-gradient(180deg, #fff3d4, #ffd58a); box-shadow: 0 3px 0 #a8641a, 0 6px 10px rgba(80, 40, 0, .2); font: 700 1.4rem var(--font-num); color: #3a2352; }
.tile.gap { width: 16px; min-width: 16px; background: none; border: 0; box-shadow: none; }
.tile.fly { animation: tile-fly .55s var(--spring); }
.tile.win { animation: tile-win .7s var(--spring) both; background: linear-gradient(180deg, #d5f7df, #7ee0a2); border-color: #2f9d62; box-shadow: 0 3px 0 #1f7646; }
.tile.lose { background: linear-gradient(180deg, #ffe3e0, #ffa9a0); border-color: #c9473f; box-shadow: 0 3px 0 #8e2e28; }
.tile.big { min-width: 54px; height: 62px; font-size: 1.9rem; animation: tile-fly .6s var(--spring) both; }
.wiggle { animation: wiggle .5s; } @keyframes wiggle { 25% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(-1.5deg); } }
@keyframes tile-fly { from { opacity: 0; transform: translateY(-70px) rotate(-22deg) scale(.4); } 60% { transform: translateY(6px) rotate(4deg) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes tile-win { 0% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.12); } 100% { transform: none; } }

/* ---------- подсказки и итог ---------- */
.hints { display: grid; gap: 8px; max-width: 640px; margin: 14px auto 0; }
.hint-line { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: rgba(255, 184, 77, .22); border: 1.5px dashed #c98b4b; font-weight: 700; color: #4a2f10; } .h-ic { flex: none; }
.result-slot { max-width: 640px; margin: 0 auto; }
.result { margin-top: 18px; padding: 16px 20px; border-radius: 18px; border: 2.5px solid; animation: result-in .55s var(--spring); }
.result.good { background: linear-gradient(180deg, #ecfbef, #d4f3dd); border-color: #4cb97a; color: #12402a; } .result.bad { background: linear-gradient(180deg, #fff0ee, #fbdcd8); border-color: #e58a80; color: #5a1c18; }
.result-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .result-head strong { font: 400 1.9rem var(--font-display); } .r-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 900; background: #2f9d62; } .result.bad .r-ic { background: #c9473f; }
.rewards { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } .chip.gold { background: linear-gradient(180deg, #fff1cf, #ffd58a); color: #5a3708; border-color: #c98b4b; font-weight: 900; }
.r-answer { font-size: 1.35rem; margin-top: 10px; } .r-answer b { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; } .r-why { margin-top: 6px; line-height: 1.5; } .r-duel { margin-top: 8px; font-style: italic; }
@keyframes result-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.play-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 14px 0 4px; }
.play-actions .btn-ghost { background: rgba(255, 244, 222, .08); }
.summary .rewards { margin: 0; } .summary h2 { font-size: 2.4rem; }

/* ---------- эмодзи, ребус, шарада, силуэт, шифр, описание ---------- */
.emoji-strip { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: clamp(3rem, 10vw, 5.2rem); line-height: 1.1; margin: 10px 0 8px; padding: 14px; border-radius: 24px; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.eg { display: inline-block; animation: tile-fly .6s var(--spring) both; }
.charade { max-width: 56ch; margin: 10px auto 18px; font-size: 1.2rem; line-height: 1.5; text-align: center; } .charade p { margin: 6px 0; } .charade .lead { font-family: var(--font-display); font-size: 1.5rem; color: #8a4a0b; font-weight: 400; }
.meta-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
.rebus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 8px; margin: 14px 0 6px; }
.rb-part { display: grid; gap: 4px; justify-items: center; padding: 12px 16px 8px; border-radius: 20px; background: #fffaf0; border: 2.5px solid #c9a76a; box-shadow: 0 5px 0 #a8803f; min-width: 98px; animation: tile-fly .6s var(--spring) both; }
.rb-pic { display: flex; align-items: flex-end; gap: 2px; } .rb-e { font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1.1; } .rb-comma { font: 700 3rem/1 var(--font-num); color: #b4540b; align-self: flex-start; }
.rb-dots { display: flex; gap: 4px; } .rb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c98b4b; }
.rb-op { font-weight: 800; color: #8a2e9b; font-size: .92rem; } .rb-plus { font: 700 2rem var(--font-num); color: #8a4a0b; }
.rb-part.lit { background: linear-gradient(180deg, #fff3d4, #ffd58a); } .rb-lit { font: 700 2.6rem var(--font-num); }
.rb-tip { max-width: 54ch; margin: 6px auto 12px; font-size: .86rem; }
.clues { list-style: none; margin: 10px auto 12px; padding: 0; display: grid; gap: 8px; max-width: 600px; }
.clues li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 16px; background: #fffaf0; border: 2px solid #e1c68f; font-weight: 700; font-size: 1.08rem; line-height: 1.4; }
.cn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: var(--ink); font: 700 .95rem var(--font-num); }
.meter { display: flex; gap: 6px; justify-content: center; margin: 6px 0; } .meter i { width: 34px; height: 8px; border-radius: 4px; background: rgba(42, 27, 61, .18); } .meter i.on { background: var(--amber-600); }
.more-clue { margin: 6px auto 14px; display: flex; }
.silh { display: grid; place-items: center; margin: 10px 0 8px; padding: 16px; border-radius: 28px; background: radial-gradient(closest-side, #fff7e0, #ead29a); box-shadow: inset 0 0 40px rgba(150, 100, 30, .3); }
.silh-e { font-size: clamp(6rem, 22vw, 9rem); line-height: 1.1; }
.cipher-msg { text-align: center; font: 700 clamp(1.6rem, 5vw, 2.6rem) var(--font-num); letter-spacing: .12em; padding: 16px; margin: 8px 0; border-radius: 18px; background: #2a1b3d; color: var(--amber-300); box-shadow: inset 0 0 24px rgba(0, 0, 0, .6); word-break: break-word; }
.cipher-msg.mono { font-size: clamp(1.1rem, 3.4vw, 1.7rem); letter-spacing: .2em; } .cipher-msg.sym { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; letter-spacing: 0; } .cs { font: 400 2.2rem/1 var(--font-body); min-width: 1.1em; } .csp { width: 1.4rem; }
.cipher-tip { text-align: center; font-weight: 700; margin: 6px 0 10px; }
.cheat { max-width: 640px; margin: 0 auto 12px; padding: 8px 12px; border-radius: 14px; background: rgba(42, 27, 61, .07); } .cheat summary { cursor: pointer; font-weight: 800; min-height: 32px; display: flex; align-items: center; }
.cheat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; } .cheat-grid.mot { grid-template-columns: repeat(6, 1fr); }
.cc { display: grid; place-items: center; padding: 6px 2px; border-radius: 10px; background: #fffaf0; border: 1px solid #e1c68f; font-size: .82rem; } .cc b { font: 700 1.05rem var(--font-num); } .cc.wide { grid-column: span 1; } .cc i { font-style: normal; color: #8a4a0b; font-weight: 800; } .cc .sym { font: 400 1.3rem var(--font-body); }

/* ---------- верю / не верю ---------- */
.tf-card { position: relative; max-width: 520px; margin: 14px auto 18px; padding: 34px 28px; min-height: 190px; display: grid; place-items: center; text-align: center; border-radius: 24px; background: #fffaf0; border: 3px solid #c9a76a; box-shadow: 0 8px 0 #a8803f, 0 22px 30px rgba(60, 30, 0, .25); touch-action: pan-y; cursor: grab; transition: transform .4s var(--spring), box-shadow .3s; user-select: none; }
.tf-card.drag { transition: none; cursor: grabbing; }
.tf-text { font: 800 clamp(1.25rem, 3.2vw, 1.7rem)/1.4 var(--font-body); text-wrap: balance; }
.tf-stamp { position: absolute; top: 14px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font: 700 1.2rem var(--font-num); opacity: 0; transform: rotate(-12deg); transition: opacity .15s; }
.tf-stamp.yes { right: 16px; color: #1f8a4f; } .tf-stamp.no { left: 16px; color: #c9473f; transform: rotate(12deg); }
.tf-card[data-lean="yes"] .tf-stamp.yes, .tf-card[data-lean="no"] .tf-stamp.no { opacity: 1; }
.tf-card.fly-right { transform: translateX(120%) rotate(18deg); opacity: .0; transition: transform .6s var(--ease), opacity .6s; } .tf-card.fly-left { transform: translateX(-120%) rotate(-18deg); opacity: 0; transition: transform .6s var(--ease), opacity .6s; }
.tf-card.ok { border-color: #4cb97a; background: #ecfbef; box-shadow: 0 8px 0 #2f9d62; } .tf-card.bad { border-color: #e58a80; background: #fff0ee; box-shadow: 0 8px 0 #c9473f; }
.tf-btns { display: flex; gap: 14px; justify-content: center; }
.tf-btn { min-width: 160px; min-height: 60px; font-size: 1.15rem; color: #fff; } .tf-btn.yes { background: linear-gradient(180deg, #62d98e, #2f9d62); box-shadow: 0 5px 0 #1f7646; } .tf-btn.no { background: linear-gradient(180deg, #ff9a8a, #e5574a); box-shadow: 0 5px 0 #a23a31; } .tf-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.tf-tip { margin-top: 12px; font-size: .85rem; }

/* ---------- кто лишний ---------- */
.odd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.odd-card { position: relative; min-height: 112px; padding: 14px 10px 10px; display: grid; place-items: center; gap: 2px; border-radius: 20px; border: 2.5px solid #c9a76a; background: #fffaf0; box-shadow: 0 5px 0 #a8803f; color: var(--ink); transition: transform .3s var(--spring), box-shadow .2s, opacity .3s, background .2s; }
.odd-card:hover:not(:disabled) { transform: translateY(-4px) rotate(-1deg); } .odd-card:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #a8803f; }
.oc-e { font-size: 2.6rem; line-height: 1.1; } .oc-w { font: 800 1.2rem var(--font-body); text-transform: capitalize; text-align: center; } .oc-n { position: absolute; left: 10px; top: 8px; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 900; display: grid; place-items: center; background: rgba(42, 27, 61, .1); color: var(--ink-soft); }
.odd-card.num .oc-w { font: 700 2.4rem var(--font-num); }
.odd-card.out { opacity: .28; filter: grayscale(1); transform: scale(.94); } .odd-card.picked { border-color: #e09a1f; box-shadow: 0 0 0 4px rgba(240, 154, 31, .35), 0 5px 0 #a8803f; }
.odd-card.right { background: linear-gradient(180deg, #ecfbef, #bff0cf); border-color: #2f9d62; box-shadow: 0 5px 0 #1f7646, 0 0 0 5px rgba(76, 185, 122, .3); animation: tile-win .7s var(--spring); } .odd-card.dim:not(.picked) { opacity: .55; } .odd-card.dim.picked { background: #fdeaea; border-color: #c9473f; opacity: 1; }

/* ---------- числа ---------- */
.seq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 6px; margin: 16px 0 8px; }
.seq-n, .seq-q { min-width: 62px; height: 68px; padding: 0 12px; display: grid; place-items: center; border-radius: 16px; font: 700 clamp(1.5rem, 5vw, 2.2rem) var(--font-num); border: 2.5px solid #c98b4b; background: linear-gradient(180deg, #fff3d4, #ffd58a); box-shadow: 0 4px 0 #a8641a; animation: tile-fly .55s var(--spring) both; }
.seq-c { color: #8a4a0b; font-size: 1.4rem; font-weight: 900; }
.seq-q { background: #2a1b3d; border-color: #5443b3; box-shadow: 0 4px 0 #120d36, 0 0 22px rgba(124, 100, 255, .5); color: var(--amber-300); min-width: 96px; } .q-mark { animation: pulse-q 1.3s ease-in-out infinite; } .seq-q.win { background: linear-gradient(180deg, #d5f7df, #7ee0a2); color: #14432a; border-color: #2f9d62; box-shadow: 0 4px 0 #1f7646; } .seq-q.lose { background: #ffd8d4; color: #5a1c18; border-color: #c9473f; }
@keyframes pulse-q { 50% { transform: scale(1.2); opacity: .7; } }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 330px; margin: 10px auto 0; }
.np { height: 58px; border-radius: 16px; border: 2px solid #c9a76a; background: #fffaf0; font: 700 1.5rem var(--font-num); color: var(--ink); box-shadow: 0 4px 0 #a8803f; transition: transform .15s, box-shadow .15s; } .np:active { transform: translateY(3px); box-shadow: 0 1px 0 #a8803f; } .np.go { grid-column: 1 / -1; background: linear-gradient(180deg, var(--amber-300), var(--amber)); border-color: #c97a0b; box-shadow: 0 4px 0 #a8641a; font: 900 1.15rem var(--font-body); }
.mg-board { position: relative; width: min(340px, 90%); margin: 12px auto; padding-right: 36px; padding-bottom: 34px; }
.mg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mg-cell { aspect-ratio: 1; border-radius: 16px; border: 2.5px dashed #b99358; background: rgba(255, 250, 240, .6); font: 700 clamp(1.5rem, 6vw, 2.2rem) var(--font-num); color: var(--ink); transition: transform .25s var(--spring), background .2s; }
.mg-cell.given { border-style: solid; background: linear-gradient(180deg, #fff3d4, #ffd58a); border-color: #c98b4b; box-shadow: 0 4px 0 #a8641a; } .mg-cell.filled { border-style: solid; background: #e6ddff; border-color: #7b6cf0; } .mg-cell:hover:not(:disabled):not(.given) { transform: scale(1.05); } .mg-cell.win { background: #bff0cf; border-color: #2f9d62; } .mg-cell.lose { background: #ffd8d4; border-color: #c9473f; }
.mg-rsum { position: absolute; right: 0; top: 0; bottom: 34px; display: grid; grid-template-rows: repeat(3, 1fr); } .mg-csum { position: absolute; left: 0; right: 36px; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ms { display: grid; place-items: center; font: 700 .95rem var(--font-num); color: var(--ink-soft); } .ms[data-ok="true"] { color: var(--good-d); } .ms[data-ok="false"] { color: var(--bad-d); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0; } .scroll .chip-n { min-width: 54px; min-height: 52px; font: 700 1.3rem var(--font-num); border-color: #c98b4b; background: #fffaf0; color: var(--ink); box-shadow: 0 3px 0 #a8803f; } .scroll .chip-n.sel { background: var(--amber); } .scroll .chip-n.used { opacity: .25; }

/* ---------- анаграмма / слоги / слова из слова ---------- */
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 10px; min-height: 64px; }
.slot { min-width: 50px; height: 60px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 14px; font: 700 1.7rem var(--font-num); color: var(--ink); }
.slot.empty { border: 2.5px dashed #b99358; background: rgba(255, 250, 240, .55); } .slot.full { border: 2.5px solid #c98b4b; background: linear-gradient(180deg, #fff3d4, #ffd58a); box-shadow: 0 4px 0 #a8641a; } .slot.land { animation: tile-fly .4s var(--spring); } .slot.win { animation: tile-win .7s var(--spring) both; background: linear-gradient(180deg, #d5f7df, #7ee0a2); border-color: #2f9d62; } .slot.lose { background: #ffd8d4; border-color: #c9473f; }
.pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 12px; }
.tile.pick { min-width: 54px; height: 58px; font-size: 1.6rem; cursor: pointer; transition: transform .25s var(--spring), opacity .2s; } .tile.pick:hover:not(:disabled) { transform: translateY(-4px) rotate(-3deg); } .tile.pick:active { transform: translateY(2px); } .tile.pick.gone { opacity: .18; transform: scale(.85); box-shadow: none; }
.wiw-base { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0; } .tile.letter { cursor: pointer; min-width: 48px; height: 56px; font-size: 1.6rem; }
.progress { height: 14px; border-radius: 999px; background: rgba(42, 27, 61, .14); overflow: hidden; max-width: 520px; margin: 6px auto; } .progress i { width: 0; }
.wiw-status { text-align: center; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.wiw-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; padding: 0; } .wiw-list li { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 14px; border-radius: 999px; background: #e6ddff; border: 2px solid #7b6cf0; font-weight: 800; } .wiw-list li i { font-style: normal; color: #5a3fd0; font-family: var(--font-num); } .pop { animation: tile-fly .5s var(--spring); }

/* ---------- виселица: свечи и клавиатура ---------- */
.candles { display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px); margin: 12px 0 6px; }
.candle { position: relative; width: 26px; height: 78px; } .wax { position: absolute; bottom: 0; left: 0; right: 0; height: 52px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #f3e2bc, #fff7e2 40%, #e3c88e); box-shadow: 0 4px 6px rgba(80, 40, 0, .3); } .wick { position: absolute; bottom: 52px; left: 12px; width: 2px; height: 8px; background: #3b2a1a; }
.flame { position: absolute; bottom: 58px; left: 4px; width: 18px; height: 26px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 75%, #fff8c8, #ffc44d 55%, #ff7a2a); box-shadow: 0 0 22px 8px rgba(255, 170, 60, .55); transform-origin: 50% 100%; animation: flicker 1.1s ease-in-out infinite alternate; transition: opacity .4s, transform .4s; }
.candle:nth-child(2n) .flame { animation-delay: -.4s; } .candle.out .flame { opacity: 0; transform: scale(.2); animation: none; box-shadow: none; } .candle.out .wick::after { content: ''; position: absolute; left: -3px; top: -16px; width: 8px; height: 18px; border-radius: 50%; background: rgba(90, 70, 112, .35); filter: blur(3px); animation: smoke 1.6s ease-out forwards; }
@keyframes flicker { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(.92, 1.08) rotate(3deg); } } @keyframes smoke { from { opacity: .8; transform: translateY(0); } to { opacity: 0; transform: translateY(-28px) scale(2); } }
.hang-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; } .hl { width: 44px; height: 56px; display: grid; place-items: center; border-bottom: 4px solid #8a5a2b; font: 700 2rem var(--font-num); color: var(--ink); } .hl.pop { animation: tile-fly .45s var(--spring); } .hl.shown { color: #c9473f; } .hang-word.win .hl { color: #1f7646; }
.kb { display: grid; gap: 6px; margin: 8px auto 10px; max-width: 640px; } .kb-row { display: flex; justify-content: center; gap: 5px; }
.key { flex: 1 1 0; max-width: 52px; height: 52px; border-radius: 11px; border: 2px solid #c9a76a; background: #fffaf0; font: 700 1.15rem var(--font-num); color: var(--ink); box-shadow: 0 3px 0 #a8803f; transition: transform .15s; padding: 0; min-width: 0; } .key:active:not(:disabled) { transform: translateY(2px); } .key.hit { background: #bff0cf; border-color: #2f9d62; box-shadow: 0 3px 0 #1f7646; } .key.miss { background: #ffd8d4; border-color: #c9473f; box-shadow: none; opacity: .55; } .key:disabled:not(.hit):not(.miss) { opacity: .4; }
@media (max-width: 480px) { .key { height: 46px; } .hl { width: 34px; height: 48px; font-size: 1.6rem; } }

/* ---------- цепочка ---------- */
.chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 14px 0; }
.cl { width: 40px; height: 46px; padding: 0; border-radius: 10px; border: 2px solid #c9a76a; background: #fffaf0; font: 700 1.3rem var(--font-num); color: var(--ink); box-shadow: 0 3px 0 #a8803f; text-transform: uppercase; transition: transform .2s var(--spring), background .2s; }
.cl:hover:not(:disabled) { transform: translateY(-3px); } .cl.sel { background: var(--amber); border-color: #c97a0b; transform: translateY(-3px); } .cl.found { background: #bff0cf; border-color: #2f9d62; box-shadow: 0 3px 0 #1f7646; } .cl.pulse { animation: pulse-cl .7s ease-in-out 3; }
@keyframes pulse-cl { 50% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(240, 154, 31, .5); } }
@media (max-width: 480px) { .cl { width: 33px; height: 40px; font-size: 1.1rem; } }

/* ---------- кроссворд ---------- */
.cw-wrap { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; justify-content: center; margin: 10px 0; }
.cw-left { position: relative; }
.cw-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; width: min(330px, 78vw); padding: 6px; border-radius: 12px; background: #3a2352; }
.cw-cell, .cw-block { aspect-ratio: 1; border-radius: 6px; } .cw-block { background: #2a1b3d; }
.cw-cell { position: relative; padding: 0; border: 0; background: #fffaf0; font: 700 1.5rem var(--font-num); color: var(--ink); display: grid; place-items: center; } .cw-cell.cur { background: #ffe8b0; } .cw-cell.sel { background: var(--amber); box-shadow: inset 0 0 0 3px #c97a0b; } .cw-cell.given { color: #5a3fd0; }
.cw-n { position: absolute; left: 3px; top: 1px; font-size: .6rem; font-style: normal; font-weight: 800; color: #8a4a0b; }
.cw-input { position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; }
.cw-clues { font-size: .95rem; min-width: 190px; } .cw-clues h3 { font-size: 1.15rem; margin: 6px 0 4px; color: #8a4a0b; } .cw-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .cw-clues li { padding: 5px 8px; border-radius: 8px; line-height: 1.3; } .cw-clues li.on { background: #ffe8b0; } .cw-clues li i { opacity: .65; }
.cw-grid.win .cw-cell { background: #bff0cf; } .cw-grid.lose .cw-cell { background: #ffd8d4; }
@media (max-width: 640px) { .cw-wrap { grid-template-columns: 1fr; justify-items: center; } .cw-clues { width: 100%; } }

/* ---------- память: огоньки ---------- */
.mem-round { text-align: center; font: 400 1.6rem var(--font-display); color: #8a4a0b; }
.mem-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: min(340px, 86%); margin: 14px auto; transition: opacity .3s; } .mem-board.locked { pointer-events: none; }
.mem-pad { position: relative; aspect-ratio: 1; border-radius: 26px; border: 3px solid color-mix(in srgb, var(--c) 70%, #000); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff) 0, color-mix(in srgb, var(--c) 55%, #2a1b3d) 100%); opacity: .55; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 45%, #000); transition: opacity .12s, transform .12s, box-shadow .12s; }
.mem-pad.lit { opacity: 1; transform: scale(1.06); box-shadow: 0 0 34px 10px color-mix(in srgb, var(--c) 70%, transparent), 0 6px 0 color-mix(in srgb, var(--c) 45%, #000); filter: brightness(1.25); } .mem-pad:active { transform: scale(.97); opacity: .9; }
.mem-glow { position: absolute; inset: 22%; border-radius: 50%; background: rgba(255, 255, 255, .45); filter: blur(10px); }
.mem-status { text-align: center; font-weight: 800; min-height: 1.5em; color: var(--ink-soft); }

/* ---------- отличия ---------- */
.scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; } @media (max-width: 640px) { .scenes { grid-template-columns: 1fr; } }
.scene { position: relative; container-type: inline-size; border-radius: 16px; border: 3px solid #8a5a2b; background: radial-gradient(ellipse at 50% 40%, #fff7e0, #f0dca8); overflow: hidden; cursor: crosshair; touch-action: manipulation; box-shadow: inset 0 0 30px rgba(150, 100, 30, .3); }
.scene .it { position: absolute; transform: translate(-50%, -50%); font-size: calc(var(--s) * .95cqw); line-height: 1; pointer-events: none; user-select: none; }
.marks { position: absolute; inset: 0; pointer-events: none; } .mk { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid; animation: mark-in .4s var(--spring); } .mk.ok, .mk.show { border-color: #2f9d62; background: rgba(76, 185, 122, .22); } .mk.show { border-style: dashed; border-color: #e09a1f; } .mk.bad { border-color: #c9473f; background: rgba(229, 87, 74, .25); } .mk.hint { border-color: #7b6cf0; background: rgba(123, 108, 240, .2); animation: pulse-cl .8s ease-in-out 3; }
@keyframes mark-in { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.df-count { text-align: center; font-weight: 800; color: var(--ink-soft); }

@media (max-width: 560px) { .answer-row { flex-direction: column; } .ans-btn { width: 100%; } .tf-btns { flex-direction: column; } .tf-btn { width: 100%; } .rewards { margin-left: 0; } }