/* Знаменосци — средновековен стил: море, пергаментова карта, дърво и злато */
:root {
  --sea1: #0e2a4a; --sea2: #154a73; --parch: #f4e4bc; --parch2: #e6cf98; --ink: #3a2414; --muted: #7a5c3e;
  --wood1: #7a4a22; --wood2: #4e2c12; --gold1: #ffe08a; --gold2: #f2b632; --gold3: #b07a12;
  --red: #c8352c; --ok: #2e9d4b; --bad: #d0342c; --free: #efe2bf;
  --shadow: 0 10px 30px rgba(0, 10, 30, .45); --r: 18px;
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); }
body { background: var(--sea1); overflow-x: hidden; }
.bg { position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(80, 160, 210, .35), transparent 60%),
    repeating-radial-gradient(circle at 20% 80%, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--sea2), var(--sea1)); }
.bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-8deg, transparent 0 38px, rgba(255,255,255,.04) 38px 40px); animation: waves 12s linear infinite; }
@keyframes waves { to { background-position: 0 200px; } }
h1, h2, h3, .phase, .mode-title, .brand-name, .map-banner, .mini-brand { font-family: "Kurale", "Rubik", serif; }
.hidden { display: none !important; }
.screen { position: relative; min-height: 100vh; padding: 14px; }
.err { color: #ffb4ae; font-weight: 900; min-height: 1.2em; text-align: center; margin: 8px 0 0; text-shadow: 0 1px 2px #000; }
.panel .err, .modal .err { color: var(--bad); text-shadow: none; }
.sub { color: var(--muted); margin: 6px 0; font-weight: 700; }
.center { justify-content: center; }

/* ---------- бутони и полета ---------- */
button { font: inherit; font-weight: 900; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 16px; color: var(--ink); transition: transform .08s, filter .15s; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(2px); }
button:disabled { opacity: .45; cursor: default; }
.btn { padding: 13px 18px; font-size: 1.08rem; border: 2px solid rgba(0,0,0,.25); }
.btn.big { font-size: 1.2rem; }
.btn.gold { background: linear-gradient(180deg, var(--gold1), var(--gold2) 55%, #d99612); color: #4a2a00; box-shadow: 0 4px 0 var(--gold3), inset 0 1px 0 #fff6cf; }
.btn.wood { background: linear-gradient(180deg, #a0662f, var(--wood1)); color: #fff4dc; box-shadow: 0 4px 0 var(--wood2), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 1px #000; }
button.link { background: none; color: #ffe7a6; text-decoration: underline; padding: 8px 10px; font-weight: 800; }
.panel button.link { color: var(--muted); }
input, textarea { font: inherit; font-weight: 800; font-size: 1.1rem; padding: 12px 14px; border-radius: 12px; border: 2px solid #c9a865; width: 100%; background: #fffaf0; color: var(--ink); }
input:focus, textarea:focus { outline: none; border-color: var(--gold3); box-shadow: 0 0 0 4px rgba(242,182,50,.3); }
.lbl { display: block; font-weight: 900; margin: 14px 0 6px; color: var(--ink); }
.lbl small { color: var(--muted); font-weight: 700; }
.row { display: flex; gap: 10px; align-items: stretch; }
.row.two > * { flex: 1; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; padding: 11px 4px; background: #f0dfb4; border: 2px solid #caa760; }
.seg button.on { background: linear-gradient(180deg, #a0662f, var(--wood1)); color: #fff; border-color: var(--wood2); box-shadow: 0 3px 0 var(--wood2); }

/* пергаментов панел с дървена рамка */
.panel { background: radial-gradient(ellipse at 30% 20%, #fbf0d0, var(--parch) 50%, var(--parch2)); border-radius: var(--r); padding: 18px;
  border: 6px solid var(--wood1); box-shadow: var(--shadow), inset 0 0 0 2px var(--gold2), inset 0 0 30px rgba(120, 70, 20, .25); }

/* ---------- начален екран ---------- */
.hero { max-width: 760px; margin: 0 auto; text-align: center; padding-top: 2vh; }
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; animation: drop .8s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes drop { from { transform: translateY(-60px) scale(.8); opacity: 0; } }
.brand-logo { width: 96px; height: 96px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation: float 3.5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.brand-name { margin: 0; font-size: clamp(3.2rem, 13vw, 5.4rem); line-height: 1; letter-spacing: .01em;
  background: linear-gradient(180deg, #fff8d6 0%, var(--gold1) 30%, var(--gold2) 60%, #c9840f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a3008) drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.tagline { color: #f5e6c4; font-size: 1.15rem; font-weight: 800; margin: 10px 0 16px; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.setup { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.setup .lbl { margin-top: 0; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px 18px; border-radius: var(--r); color: #fff4dc;
  background: linear-gradient(180deg, #9a5f2b, var(--wood1) 60%, var(--wood2)); border: 3px solid var(--gold2);
  box-shadow: 0 6px 0 #2e1806, var(--shadow), inset 0 2px 0 rgba(255,255,255,.2); animation: rise .6s ease-out both; }
.mode:nth-child(2) { animation-delay: .08s; } .mode:nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.mode:hover { transform: translateY(-3px); }
.mode-icon { font-size: 2.6rem; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.mode-title { font-size: 1.45rem; color: var(--gold1); text-shadow: 0 2px 0 #3a1d05; }
.mode-sub { font-size: .9rem; font-weight: 700; opacity: .92; line-height: 1.3; }
.join { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.join .lbl { margin: 0; }
.join .row { flex: 1; max-width: 330px; }
.code-input { text-align: center; letter-spacing: .35em; font-weight: 900; }
.home-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* ---------- стая ---------- */
.mini-brand { display: flex; align-items: center; gap: 6px; color: var(--gold1); font-size: 1.6rem; text-shadow: 0 2px 0 #3a1d05; }
.mini-brand img { width: 40px; height: 40px; }
#lobby .mini-brand { margin: 1vh 0 12px; }
.lobby-card { max-width: 560px; margin: 0 auto; }
.room-head { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 900; color: var(--muted); }
.room-code { display: inline-block; font-family: "Rubik", sans-serif; font-size: 2.8rem; font-weight: 900; letter-spacing: .25em; padding: 4px 10px 4px 24px; margin: 4px 0; border-radius: 14px; background: #fffaf0; color: var(--wood2); border: 3px dashed var(--gold3); }
.searching { font-family: "Kurale", serif; font-size: 1.5rem; margin: 4px 0; }
.searching .count { display: inline-block; min-width: 2ch; color: var(--red); }
.members { list-style: none; padding: 0; margin: 14px 0 4px; }
.members li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.55); margin-bottom: 7px; font-weight: 900; border: 1px solid #d9bd7c; animation: rise .3s ease-out both; }
.members .tags { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.members .tag { font-size: .75rem; color: var(--muted); background: #fff; border-radius: 999px; padding: 3px 8px; }
.members button { padding: 4px 10px; font-size: .85rem; background: #fff; }
.members .empty { justify-content: center; color: var(--muted); background: none; border: 2px dashed #d0b276; }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.subj-grid button { display: flex; align-items: center; gap: 6px; text-align: left; font-size: .85rem; padding: 8px 10px; background: #f0dfb4; border: 2px solid #caa760; line-height: 1.15; }
.subj-grid button.on { background: #fffaf0; border-color: var(--wood1); box-shadow: inset 0 0 0 2px var(--gold2); }
.subj-grid button:not(.on) { opacity: .6; }
.subj-grid button.all { grid-column: 1 / -1; justify-content: center; }
.wait { text-align: center; font-weight: 900; margin-top: 14px; }

/* ---------- щит на играч ---------- */
.shield { width: 30px; height: 34px; flex: none; display: inline-block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }

/* ---------- игра: горна лента ---------- */
.hud { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.hud-players { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pcard { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.15)), var(--pc); border: 3px solid var(--gold2); box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .3s, opacity .3s; }
.pcard.turn { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 3px #fff, 0 0 22px var(--gold1); }
.pcard.out { opacity: .4; filter: grayscale(1); }
.pcard .pname { font-weight: 900; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .pname small { font-weight: 800; opacity: .85; }
.pcard .pinfo { min-width: 0; flex: 1; }
.pcard .towers { font-size: .8rem; letter-spacing: 1px; }
.pcard .towers .down { opacity: .3; filter: grayscale(1); }
.pcard .pts { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 1.3rem; background: rgba(0,0,0,.28); padding: 2px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.pcard .pts.bump { animation: bump .6s; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--gold1); } }
.hud-right { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.phase { background: linear-gradient(180deg, #a0662f, var(--wood2)); color: var(--gold1); padding: 8px 14px; border-radius: 12px; border: 2px solid var(--gold2); font-size: 1.05rem; text-align: center; white-space: nowrap; box-shadow: 0 4px 0 #2e1806; }
.icon-btn { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 6px; }

/* ---------- карта ---------- */
.board { display: grid; grid-template-columns: 1fr 250px; gap: 10px; }
.map-frame { position: relative; border-radius: 22px; padding: 12px; border: 8px solid var(--wood1);
  background: radial-gradient(ellipse at 50% 45%, #bfe0ee, #8fc3dc 70%, #6aa7c6); box-shadow: var(--shadow), inset 0 0 0 3px var(--gold2), inset 0 0 40px rgba(0,40,80,.35); overflow: hidden; }
#map { width: 100%; height: auto; display: block; }
#map .land path { stroke: #5b3a1a; stroke-width: 1.4; stroke-linejoin: round; fill-rule: evenodd; transition: fill .7s ease; }
#map .shadow path { fill: rgba(20, 40, 60, .35); stroke: none; fill-rule: evenodd; }
#map .land path.free { fill: var(--free); }
#map .land path.can { cursor: pointer; stroke: #fff; stroke-width: 3.5; animation: glow .8s ease-in-out infinite alternate; }
#map .land path.can:hover { filter: brightness(1.2); }
@keyframes glow { from { stroke-opacity: 1; } to { stroke-opacity: .25; } }
#map .land path.target { stroke: #fff; stroke-width: 4; animation: target .6s ease-in-out infinite alternate; }
@keyframes target { to { stroke: var(--red); } }
#map .land path.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { filter: brightness(2.2) saturate(.3); } 100% { filter: none; } }
#map text { pointer-events: none; font-weight: 900; paint-order: stroke; stroke: rgba(255,250,235,.9); stroke-width: 3px; stroke-linejoin: round; }
#map .rname { font-size: 12.5px; fill: #3a2414; }
#map .badge { pointer-events: none; }
#map .badge circle { stroke: #fff; stroke-width: 1.5; }
#map .badge text { font-size: 10px; fill: #fff; stroke: none; font-family: "Rubik", sans-serif; }
#map .castle { pointer-events: none; transition: transform .3s; }
#map .castle .tw.down { animation: crumble .9s ease-in forwards; }
#map .castle .tw.gone { opacity: .25; transform: translateY(8px) scaleY(.4); transform-box: fill-box; transform-origin: bottom; }
@keyframes crumble { 0% { transform: none; } 30% { transform: rotate(-12deg); } 100% { opacity: .25; transform: translateY(8px) scaleY(.4) rotate(8deg); } }
#map .castle .tw { transform-box: fill-box; transform-origin: bottom; }
#map .float { font-family: "Rubik", sans-serif; font-size: 22px; fill: var(--gold1); stroke: #3a1d05; stroke-width: 4px; animation: floatUp 1.6s ease-out forwards; transform-box: fill-box; }
#map .float.neg { fill: #ff8a80; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
#map .flag { animation: flagDrop .7s cubic-bezier(.3,1.6,.5,1) both; transform-box: fill-box; transform-origin: bottom; }
@keyframes flagDrop { from { transform: translateY(-40px); opacity: 0; } }
#map .arrow { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 10; animation: march .6s linear infinite; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
@keyframes march { to { stroke-dashoffset: -24; } }
#map .swords { font-size: 30px; stroke: none; animation: pulse .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { to { transform: scale(1.25); } }
#map .pop { font-size: 34px; stroke: none; animation: popIn 1.4s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.3); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.map-banner { position: absolute; z-index: 2; left: 50%; top: 22px; transform: translateX(-50%); background: linear-gradient(180deg, #a0662f, var(--wood2)); color: var(--gold1); border: 3px solid var(--gold2); padding: 8px 18px; border-radius: 12px; font-size: 1.15rem; white-space: nowrap; box-shadow: var(--shadow); animation: drop .4s ease-out; }
.map-banner.me { background: linear-gradient(180deg, var(--gold1), var(--gold2)); color: #4a2a00; border-color: #fff; }
.timer { position: absolute; z-index: 2; left: 20px; right: 20px; top: 8px; height: 8px; background: rgba(255,255,255,.6); border-radius: 6px; overflow: hidden; }
.timer > div { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold2)); width: 100%; transform-origin: left; }
.log { list-style: none; margin: 0; padding: 12px; font-size: .9rem; font-weight: 800; color: var(--muted); max-height: 520px; overflow: auto;
  background: radial-gradient(ellipse at 30% 20%, #fbf0d0, var(--parch)); border-radius: 16px; border: 5px solid var(--wood1); box-shadow: var(--shadow); }
.log li { padding: 5px 0; border-bottom: 1px dashed #d4b77a; }
.log li:first-child { color: var(--ink); animation: rise .4s ease-out; }
.log:empty { display: none; }

/* ---------- прозорец (свитък) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(5, 15, 30, .45); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 10; }
.modal { width: min(680px, 100%); max-height: 96vh; overflow: auto; border-radius: 20px; animation: unroll .35s cubic-bezier(.2,1.3,.4,1);
  background: radial-gradient(ellipse at 30% 10%, #fff7dd, var(--parch) 55%, var(--parch2)); border: 6px solid var(--wood1); box-shadow: 0 25px 60px rgba(0,0,0,.6), inset 0 0 0 2px var(--gold2), inset 0 0 40px rgba(120,70,20,.25); }
@keyframes unroll { from { transform: scaleY(.2) translateY(-30px); opacity: 0; } }
.mhead { padding: 12px 18px; color: #fff; background: linear-gradient(135deg, var(--sc, #7a4a22), color-mix(in srgb, var(--sc, #7a4a22) 70%, #000)); border-bottom: 3px solid var(--gold2); }
.mhead.red { --sc: #b3261e; }
.mhead h3 { margin: 0; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mhead .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.35); font-weight: 900; font-size: .85rem; border-radius: 999px; padding: 3px 10px; }
.duel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; font-weight: 900; font-size: 1.05rem; }
.duel .vs { font-size: 1.6rem; animation: pulse .6s infinite alternate; }
.mbody { padding: 16px 18px 18px; }
.qtop { display: flex; align-items: flex-start; gap: 14px; }
.qtext { flex: 1; font-size: 1.5rem; font-weight: 900; margin: 0 0 14px; line-height: 1.3; }
.clock { --p: 1; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: "Rubik", sans-serif; font-weight: 900; font-size: 1.3rem;
  background: radial-gradient(#fffaf0 58%, transparent 60%), conic-gradient(var(--gold2) calc(var(--p) * 360deg), #e3cf9f 0); border: 3px solid var(--wood1); }
.clock.low { color: var(--red); animation: pulse .5s infinite alternate; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opts button { position: relative; font-size: 1.15rem; padding: 16px 12px 16px 40px; min-height: 70px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  border: 3px solid rgba(0,0,0,.25); box-shadow: 0 5px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.3); animation: rise .35s ease-out both; }
.opts button:nth-child(2) { animation-delay: .05s; } .opts button:nth-child(3) { animation-delay: .1s; } .opts button:nth-child(4) { animation-delay: .15s; }
.opts button .letter { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.3); display: grid; place-items: center; font-size: .85rem; }
.opts button:nth-child(1) { background: linear-gradient(180deg, #e8604f, #b8342a); } .opts button:nth-child(2) { background: linear-gradient(180deg, #4b8fe0, #2a5fb0); }
.opts button:nth-child(3) { background: linear-gradient(180deg, #f2a93b, #c47812); } .opts button:nth-child(4) { background: linear-gradient(180deg, #41b36b, #237a44); }
.opts button.gone { visibility: hidden; }
.opts button.chosen { outline: 4px solid #2b1a0c; outline-offset: 2px; }
.opts.reveal button { opacity: .3; }
.opts.reveal button.right { opacity: 1; outline: 5px solid #fff; box-shadow: 0 0 0 9px var(--ok), 0 0 26px var(--ok); animation: win .6s ease-out; }
.opts.reveal button.chosen:not(.right) { opacity: .85; animation: no .45s; }
@keyframes win { 40% { transform: scale(1.06); } }
@keyframes no { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.who { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }
.numbox { font-family: "Rubik", sans-serif; font-size: 2.3rem; font-weight: 900; text-align: center; background: #fffaf0; border: 3px solid #c9a865; border-radius: 14px; padding: 8px; min-height: 64px; color: var(--wood2); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.numpad button { font-family: "Rubik", sans-serif; font-size: 1.5rem; padding: 12px 0; background: #fffaf0; border: 2px solid #c9a865; box-shadow: 0 4px 0 #c9a865; }
.numpad button.ok { background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 4px 0 var(--gold3); }
.hint { text-align: center; font-weight: 900; color: var(--wood2); background: #fff1c2; border: 2px dashed var(--gold3); border-radius: 12px; padding: 6px; margin-bottom: 10px; }
.jokers { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.joker { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(180deg, #6d3fb8, #45207e); color: #fff; border: 2px solid var(--gold2); box-shadow: 0 3px 0 #2a1150; font-size: .95rem; }
.joker b { color: var(--gold1); }
.results { list-style: none; padding: 0; margin: 12px 0 0; }
.results li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid #d9bd7c; margin-bottom: 6px; font-weight: 900; animation: rise .35s ease-out both; }
.results li:nth-child(2) { animation-delay: .12s; } .results li:nth-child(3) { animation-delay: .24s; } .results li:nth-child(4) { animation-delay: .36s; }
.results li .r { margin-left: auto; }
.status { text-align: center; color: var(--muted); font-weight: 900; margin: 12px 0 0; }
.qreport { display: block; margin: 8px auto 0; background: none; color: var(--muted); font-size: .8rem; text-decoration: underline; padding: 4px; font-weight: 800; }
.announce { text-align: center; padding: 26px 22px; }
.announce .big { font-size: 4rem; animation: popIn2 .6s cubic-bezier(.2,1.6,.4,1) both; display: inline-block; }
@keyframes popIn2 { from { transform: scale(0) rotate(-20deg); } }
.announce h2 { font-size: 2rem; margin: 6px 0; color: var(--wood2); }
.announce.war h2 { color: var(--red); }
.ribbon { display: inline-block; background: linear-gradient(180deg, #d94a3b, #9c241a); color: #fff; padding: 6px 26px; font-family: "Kurale", serif; font-size: 1.1rem; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); margin-bottom: 8px; }
.podium li:first-child { background: #fff1c2; font-size: 1.2rem; }
.rules ol { padding-left: 22px; line-height: 1.5; font-weight: 700; }
.rules li { margin-bottom: 8px; }

/* докладване, известия, конфети */
.report-layer { z-index: 20; }
.reasons { display: grid; gap: 7px; }
.reasons label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid #d9bd7c; cursor: pointer; font-weight: 900; }
.reasons input { width: 20px; height: 20px; margin: 0; accent-color: var(--wood1); flex: none; }
.reasons label:has(input:checked) { outline: 3px solid var(--wood1); background: #fff; }
textarea { margin-top: 10px; resize: vertical; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: 90vw; text-align: center; background: var(--wood2); color: var(--gold1); border: 2px solid var(--gold2); padding: 12px 18px; border-radius: 999px; font-weight: 900; z-index: 30; box-shadow: var(--shadow); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
  .log { max-height: 140px; }
  .hud { flex-direction: column-reverse; }
  .hud-right { flex-direction: row; }
  .hud-right .phase { flex: 1; }
  .hud-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pcard { min-width: 0; padding: 5px 7px; gap: 5px; }
  .pcard .shield { width: 22px; height: 26px; }
  .pcard .pts { font-size: 1rem; padding: 2px 5px; }
  .pcard .towers { font-size: .68rem; white-space: nowrap; overflow: hidden; }
  .pcard .pname { font-size: .85rem; }
  .modes { grid-template-columns: 1fr; }
  .mode { flex-direction: row; text-align: left; flex-wrap: wrap; column-gap: 12px; padding: 12px 14px; }
  .mode-icon { font-size: 2rem; }
  .mode-sub { flex-basis: 100%; }
  .setup { grid-template-columns: 1fr; }
  .join { flex-direction: column; align-items: stretch; }
  .join .row { max-width: none; }
  .qtext { font-size: 1.2rem; }
  .opts { gap: 8px; }
  .opts button { font-size: 1rem; padding: 12px 8px 12px 36px; min-height: 58px; }
  #map .rname { font-size: 15px; }
  .map-frame { padding: 6px; border-width: 5px; }
  .map-banner { font-size: .95rem; top: 16px; }
  .screen { padding: 10px; }
}

/* ---------- допълнения: звук, карта-съобщение, гледане, анализ ---------- */
.icon-row { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn.off, .link.off { opacity: .45; text-decoration: line-through; }
.map-card { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 240px; max-width: 86%; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, #fff7dd, var(--parch)); border: 5px solid var(--wood1); border-radius: 18px; padding: 14px 20px; box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px var(--gold2);
  animation: cardIn .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes cardIn { from { transform: translate(-50%, -50%) scale(.3) rotate(-6deg); opacity: 0; } }
.map-card .ic { font-size: 2.6rem; display: block; animation: popIn2 .5s cubic-bezier(.2,1.6,.4,1) both; }
.map-card b { font-family: "Kurale", serif; font-size: 1.35rem; display: block; color: var(--wood2); }
.map-card span { font-weight: 800; color: var(--muted); }
.map-card.war b, .map-card.fall b { color: var(--red); }
.overlay.dock { align-items: flex-end; background: transparent; pointer-events: none; }
.overlay.dock .modal { pointer-events: auto; width: min(520px, 100%); max-height: 46vh; }
.overlay.dock .qtext { font-size: 1.1rem; }
.overlay.dock .mhead { padding: 8px 14px; }
.overlay.dock .mhead .meta { display: none; }
.overlay.dock .mhead h3 { font-size: .95rem; }
.overlay.dock .duel { margin-top: 4px; font-size: .9rem; }
.overlay.dock .duel .shield { width: 22px; height: 26px; }
.overlay.dock .clock { width: 46px; height: 46px; font-size: 1.05rem; }
.overlay.dock .mbody { padding: 10px 14px; }
.overlay.dock .opts button { min-height: 46px; font-size: .95rem; padding: 8px 8px 8px 36px; }
.speak { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fffaf0; border: 3px solid var(--wood1); font-size: 1.3rem; padding: 0; }
.speak.on { animation: pulse .5s infinite alternate; background: var(--gold1); }
.an-head { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.stat { background: rgba(255,255,255,.6); border: 2px solid #d9bd7c; border-radius: 14px; padding: 8px 14px; text-align: center; min-width: 110px; }
.stat b { display: block; font-family: "Rubik", sans-serif; font-size: 1.6rem; color: var(--wood2); }
.stat small { font-weight: 800; color: var(--muted); }
.bars { display: grid; gap: 6px; margin: 8px 0; }
.bar { display: grid; grid-template-columns: 1fr 120px 52px; gap: 8px; align-items: center; font-weight: 800; font-size: .9rem; }
.bar .track { height: 12px; background: #e3cf9f; border-radius: 6px; overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ok), #7bd389); transform-origin: left; animation: grow .9s ease-out both; }
.bar .track i.mid { background: linear-gradient(90deg, var(--gold3), var(--gold2)); }
.bar .track i.low { background: linear-gradient(90deg, var(--red), #f08a7e); }
@keyframes grow { from { transform: scaleX(0); } }
.mistakes { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.mistakes li { background: rgba(255,255,255,.6); border-left: 5px solid var(--red); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: .92rem; }
.mistakes li .ans { display: block; margin-top: 3px; font-weight: 900; color: var(--ok); }
.mistakes li .ans s { color: var(--bad); font-weight: 800; margin-right: 6px; }
details.an { margin-top: 10px; }
details.an summary { cursor: pointer; font-weight: 900; color: var(--wood2); padding: 6px 0; }
.end-actions { display: grid; gap: 8px; margin-top: 14px; }
@media (max-width: 900px) { .overlay.dock .modal { max-height: 52vh; } .overlay.dock .speak { width: 38px; height: 38px; } .bar { grid-template-columns: 1fr 80px 44px; } }

/* ---------- играта се събира в прозореца, без скролване ---------- */
#game.screen { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#game .hud { flex: none; }
#game .board { flex: 1; min-height: 0; }
#game .map-frame { min-height: 0; display: flex; align-items: center; justify-content: center; }
#game #map { width: 100%; height: 100%; }
#game .log { max-height: none; height: 100%; min-height: 0; }
.icon-btn.exit { background: rgba(200, 53, 44, .55); }
.modal.small { width: min(420px, 100%); }
.center-text { text-align: center; }
@media (max-width: 900px) {
  #game .board { display: flex; flex-direction: column; }
  #game .map-frame { flex: 0 1 auto; width: 100%; aspect-ratio: 1012 / 666; max-height: 100%; }
  #game .log { display: block; flex: 1 1 0; min-height: 0; margin-top: 8px; padding: 8px 10px; font-size: .85rem; border-width: 4px; }
  #game .hud { gap: 6px; margin-bottom: 6px; }
  #game .hud-right .phase { padding: 6px 10px; font-size: .9rem; }
  #game .icon-btn { padding: 4px 6px; font-size: .9rem; }
  #game .hud-players { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  #game .pcard { flex-wrap: wrap; row-gap: 2px; }
  #game .pcard .pinfo { flex-basis: calc(100% - 30px); }
  #game .pcard .pts { margin-left: auto; }
  #game .pcard .towers small { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  #game .hud { flex-direction: row; }
  #game .hud-players { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  #game .pcard .shield { width: 20px; height: 24px; }
  #game .pcard .pts { font-size: .95rem; }
}
@media (max-height: 560px) and (orientation: landscape) { #game .log { display: none; } #game .map-frame { flex: 1; aspect-ratio: auto; } }

/* ---------- упражнение, предизвикателство на деня, картинки ---------- */
.modes.solo { grid-template-columns: 1fr 1fr; margin-top: -4px; }
.modes.solo .mode { background: linear-gradient(180deg, #3f6f2a, #2c5220 60%, #1d3a14); }
.qpic { text-align: center; font-size: 4.2rem; line-height: 1.15; margin: 0 0 10px; letter-spacing: .05em; word-break: break-all; animation: popIn2 .5s cubic-bezier(.2,1.6,.4,1) both; }
.practice-card { max-width: 640px; margin: 0 auto; }
.pr-head { display: flex; justify-content: space-between; align-items: center; }
.pr-score { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 1.3rem; color: var(--wood2); }
.pr-dots { display: flex; gap: 5px; margin: 8px 0 10px; }
.pr-dots i { flex: 1; height: 8px; border-radius: 4px; background: #e3cf9f; }
.pr-dots i.ok { background: var(--ok); } .pr-dots i.bad { background: var(--bad); } .pr-dots i.now { background: var(--gold2); }
.practice-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip.light { background: #fff6dc; color: var(--wood2); border-color: #d9bd7c; }
.feedback { text-align: center; font-weight: 900; font-size: 1.15rem; margin: 14px 0 10px; padding: 10px; border-radius: 12px; animation: rise .3s ease-out; }
.feedback.ok { background: #dff3e3; color: #1d6b33; } .feedback.bad { background: #fbe1de; color: #9c241a; }
.pr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pr-foot .qreport { margin: 0; }
.streak { font-family: "Kurale", serif; font-size: 1.5rem; color: var(--red); margin: 6px 0 0; }
.practice-subj button.on { opacity: 1; }
@media (max-width: 900px) {
  .modes.solo { grid-template-columns: 1fr; }
  .qpic { font-size: 3.2rem; }
}
.qpic.many { font-size: 2.4rem; letter-spacing: .12em; }
@media (max-width: 900px) { .qpic.many { font-size: 1.9rem; } }

/* ---------- реклами (само на началния екран и в стаята) ---------- */
.ad-slot { display: none; max-width: 728px; margin: 16px auto 0; text-align: center; }
.ad-slot.on { display: block; }
.ad-slot::before { content: "Реклама"; display: block; font-size: .72rem; font-weight: 800; color: #cfe3f5; opacity: .8; margin-bottom: 4px; }
.ad-slot img { max-width: 100%; max-height: 120px; height: auto; border-radius: 10px; display: block; margin: 0 auto; }

/* ---------- хоризонтално на телефони и таблети ---------- */
.rotate { display: none; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #1d4f80, var(--sea1) 70%); color: #f5e6c4; }
.rotate b { font-family: "Kurale", serif; font-size: 1.9rem; color: var(--gold1); text-shadow: 0 2px 0 #3a1d05; }
.rotate span { font-weight: 800; font-size: 1.05rem; max-width: 320px; line-height: 1.35; }
.rotate .btn { margin-top: 8px; }
.rot-device { width: 74px; height: 124px; border: 6px solid var(--gold1); border-radius: 16px; position: relative; margin-bottom: 18px; animation: rotDev 2.4s ease-in-out infinite; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.rot-device i { position: absolute; left: 50%; bottom: 6px; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background: var(--gold1); }
@keyframes rotDev { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rotate .rot-hint { font-size: .9rem; font-weight: 700; opacity: .85; }
.rotate a.btn { text-decoration: none; display: inline-block; }
@media (orientation: portrait) and (pointer: coarse) {
  body:not(.allow-portrait) .rotate { display: flex; }
  body.has-rotate:not(.allow-portrait) > :not(.rotate):not(.bg) { visibility: hidden; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .screen { padding: 8px 12px; }
  /* начален екран: две колони */
  .hero { max-width: 1100px; padding-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 14px; align-items: start; text-align: left; }
  .hero > * { grid-column: 1; }
  .hero > .home-modes { grid-column: 2; grid-row: 1 / span 3; }
  .hero > .home-links, .hero > #homeErr, .hero > .ad-slot { grid-column: 1 / -1; }
  .home-modes .modes { grid-template-columns: 1fr; gap: 6px; margin: 0; }
  .home-modes .modes.solo { margin-top: 6px; }
  .brand { justify-content: flex-start; gap: 4px; }
  .brand-logo { width: 54px; height: 54px; }
  .brand-name { font-size: 2.7rem; }
  .tagline { display: none; }
  .setup { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; margin-top: 6px; }
  .setup input { padding: 8px 12px; }
  .seg button { padding: 8px 4px; }
  .join { margin-top: 8px; padding: 8px 12px; gap: 8px; }
  .join .row input, .join .row button { padding-top: 8px; padding-bottom: 8px; }
  .home-links { justify-content: center; gap: 2px 10px; margin-top: 6px; }
  .home-links .link { font-size: .85rem; padding: 4px 6px; }
  .mode { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 8px 12px; }
  .mode-icon { grid-row: 1 / span 2; font-size: 1.8rem; }
  .mode-title { font-size: 1.1rem; }
  .mode-sub { display: none; }
  .mode-icon { grid-row: auto; font-size: 1.6rem; }
  .mode { min-height: 50px; padding: 6px 12px; }
  .hero .seg { gap: 4px; }
  .hero .seg button { white-space: nowrap; font-size: .82rem; padding: 7px 2px; min-width: 0; }
  .hero .join { flex-direction: row; align-items: center; }
  .hero .join .lbl { font-size: .85rem; flex: 1 1 0; min-width: 0; white-space: normal; }
  .hero .join .row { flex: 1.4 1 0; min-width: 0; max-width: none; gap: 6px; }
  .hero .join .row .btn { padding-left: 12px; padding-right: 12px; }
  .hero .join .code-input { flex: 1 1 0; min-width: 70px; width: 0; letter-spacing: .08em; padding-left: 4px; padding-right: 4px; }
  .hero .home-links .link { font-size: .8rem; padding: 3px 4px; }
  #homeErr { margin: 4px 0 0; } #homeErr:empty { display: none; }
  .setup .lbl { font-size: .9rem; }
  /* стая и упражнение: две колони, без голямото лого */
  #lobby .mini-brand, #practice .mini-brand { display: none; }
  .lobby-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-auto-flow: row dense; column-gap: 16px; align-items: start; }
  .lobby-card > * { grid-column: 1; }
  .lobby-card > #hostControls { grid-column: 2; grid-row: 1 / span 4; }
  .lobby-card .room-code { font-size: 2.4rem; padding: 2px 16px; }
  .lobby-card #hostControls .lbl { margin-top: 6px; }
  .lobby-card .subj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .lobby-card .subj-grid button { padding: 4px 6px; font-size: .74rem; }
  .lobby-card .seg button { padding: 6px 4px; }
  .lobby-card .lbl { font-size: .9rem; }
  .lobby-card .members { margin: 8px 0 4px; } .lobby-card .members li { padding: 6px 10px; margin-bottom: 5px; }
  .lobby-card .row.two { margin-top: 8px; }
  .practice-card:has(> .qtop) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 16px; align-items: start; }
  .practice-card:has(> .qtop) > * { grid-column: 2; }
  .practice-card:has(> .qtop) > :is(.pr-head, .pr-dots, .pr-foot) { grid-column: 1 / -1; }
  .practice-card:has(> .qtop) > :is(.meta, .qpic, .qtop) { grid-column: 1; }
  .practice-card .numpad { gap: 6px; } .practice-card .numpad button { padding: 2px; min-height: 36px; font-size: 1.15rem; }
  .practice-card .numbox { min-height: 44px; font-size: 1.7rem; padding: 2px; margin-bottom: 6px; }
  .lobby-card, .practice-card { max-width: 820px; padding: 12px 14px; }
  .qpic { font-size: 2.6rem; margin-bottom: 4px; }
  .practice-card .opts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .practice-card .opts button { min-height: 48px; padding: 9px 8px 9px 36px; font-size: 1rem; }
  .practice-card .qtext { font-size: 1.15rem; margin: 0 0 8px; }
  .feedback { margin: 8px 0 6px; padding: 6px; }
  /* играта: играчите в колона вляво, картата заема останалото */
  #game.screen { flex-direction: row; gap: 8px; padding: 6px 8px; }
  #game .hud { flex-direction: column; width: clamp(130px, 19vw, 180px); margin: 0; gap: 6px; }
  #game .hud-players { grid-template-columns: 1fr; gap: 5px; align-content: start; }
  #game .hud-right { flex-direction: column; gap: 5px; }
  #game .hud-right .phase { white-space: normal; font-size: .8rem; padding: 5px 6px; line-height: 1.2; }
  #game .icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  #game .icon-btn { padding: 4px 0; font-size: .85rem; }
  #game .pcard { padding: 4px 6px; gap: 2px 5px; }
  #game .pcard.turn { transform: translateX(3px) scale(1.02); }
  #game .pcard .pname { font-size: .8rem; }
  #game .pcard .towers { font-size: .62rem; }
  #game .pcard .pts { font-size: .9rem; padding: 1px 5px; }
  #game .board { flex: 1; min-width: 0; display: flex; }
  #game .map-frame { flex: 1; height: 100%; aspect-ratio: auto; padding: 4px; }
  .map-banner { font-size: .85rem; top: 10px; }
  #overlay:not(.dock) { padding: 6px; }
  #overlay:not(.dock) .modal { max-height: 100%; }
  #overlay:not(.dock) .mhead { padding: 8px 16px; }
  #overlay:not(.dock) .mhead h3 { font-size: 1.05rem; }
  #overlay:not(.dock) .duel { margin-top: 2px; font-size: .95rem; }
  #overlay:not(.dock) .duel .shield { width: 24px; height: 28px; }
  #overlay:not(.dock) .mbody { padding: 10px 16px; }
  #overlay:not(.dock) .qtext { font-size: 1.1rem; }
  #overlay:not(.dock) .clock { width: 48px; height: 48px; font-size: 1.1rem; }
  #overlay:not(.dock) .speak { width: 40px; height: 40px; }
  #overlay:not(.dock) .opts button { min-height: 48px; padding: 8px 8px 8px 36px; font-size: 1rem; }
  #overlay:not(.dock) .opts { gap: 8px; }
  .announce .big { font-size: 2.6rem; } .announce h2 { margin: 4px 0; }
  .overlay.dock { justify-content: flex-end; align-items: center; }
  .overlay.dock .modal { width: min(380px, 46vw); max-height: 96vh; }
}

/* ---------- коледна украса (season.js слага data-season="xmas" от 1 декември до 6 януари) ---------- */
html[data-season="xmas"] { --sea1: #0b1d3a; --sea2: #1d3f6e; --wood1: #9b1c1c; --wood2: #5f0f0f; }
html[data-season="xmas"] .bg { background:
    radial-gradient(ellipse at 50% 25%, rgba(160, 200, 255, .3), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 255, 255, .18), transparent 50%),
    linear-gradient(180deg, var(--sea2), var(--sea1)); }
.xmas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.xmas-snow { position: absolute; inset: -200px 0 0; background-image:
    radial-gradient(circle, #fff 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255,255,255,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.7) 0 3px, transparent 3.5px);
  background-size: 120px 120px, 80px 90px, 200px 170px; background-position: 0 0, 40px 30px, 90px 60px; animation: snow 14s linear infinite; }
.xmas-snow.far { opacity: .5; background-size: 60px 60px, 47px 53px, 95px 85px; animation-duration: 26s; }
@keyframes snow { to { background-position: 30px 600px, 0 540px, 120px 680px; } }
.xmas-lights { position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: radial-gradient(circle at 12px 14px, #ff4d4d 0 5px, transparent 6px) 0 0 / 96px 22px,
    radial-gradient(circle at 36px 14px, #ffd84d 0 5px, transparent 6px) 0 0 / 96px 22px,
    radial-gradient(circle at 60px 14px, #4dff88 0 5px, transparent 6px) 0 0 / 96px 22px,
    radial-gradient(circle at 84px 14px, #4db8ff 0 5px, transparent 6px) 0 0 / 96px 22px,
    linear-gradient(180deg, transparent 6px, rgba(20, 60, 30, .9) 6px 8px, transparent 8px);
  filter: drop-shadow(0 0 6px rgba(255, 240, 180, .8)); animation: twinkle 1.6s steps(2) infinite; }
@keyframes twinkle { 50% { filter: drop-shadow(0 0 2px rgba(255, 240, 180, .3)) brightness(.75); } }
html[data-season="xmas"] .panel { border-top-color: #f4f8ff; box-shadow: var(--shadow), inset 0 0 0 2px var(--gold2), inset 0 0 30px rgba(120, 70, 20, .25), 0 -3px 0 #fff; }
html[data-season="xmas"] .seg button.on { background: linear-gradient(180deg, #2f8f4e, #1d6b37); border-color: #134a25; box-shadow: 0 3px 0 #134a25; }
@media (prefers-reduced-motion: reduce) { .xmas-snow, .xmas-lights, html[data-season="xmas"] .qx-gate::before { animation: none; } }
/* началният екран с вход (extras.js) е над всичко, затова има собствен сняг и светлини */
html[data-season="xmas"] .qx-gate::before, html[data-season="xmas"] .qx-gate::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
html[data-season="xmas"] .qx-gate { isolation: isolate; }
html[data-season="xmas"] .qx-gate::before { inset: -200px 0 0; background-image: radial-gradient(circle, #fff 0 2px, transparent 2.5px), radial-gradient(circle, rgba(255,255,255,.85) 0 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,.7) 0 3px, transparent 3.5px);
  background-size: 120px 120px, 80px 90px, 200px 170px; background-position: 0 0, 40px 30px, 90px 60px; animation: snow 14s linear infinite; }

/* ---------- между избора на област и въпроса: избраната област пулсира, после карта „Въпрос“ с отброяване ---------- */
#map .land path.chosen { stroke: #fff; stroke-width: 5; animation: chosen .45s ease-in-out infinite alternate; }
@keyframes chosen { from { filter: brightness(1); } to { filter: brightness(1.35) drop-shadow(0 0 6px #fff); stroke: var(--gold1); } }
.map-banner.picked { font-size: 1.3rem; animation: bannerIn .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bannerIn { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.prep-card { position: absolute; z-index: 4; left: 50%; top: 14px; transform: translateX(-50%); width: min(440px, 92%); text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, #fff7dd, var(--parch)); border: 5px solid var(--wood1); border-radius: 18px; padding: 10px 16px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px var(--gold2); animation: prepIn .55s cubic-bezier(.2,1.4,.4,1) both; }
.prep-card.mine { border-color: var(--gold2); box-shadow: 0 0 0 4px #fff, 0 0 30px var(--gold1), 0 18px 40px rgba(0,0,0,.55); }
@keyframes prepIn { from { transform: translate(-50%, -140%) rotate(-4deg); opacity: 0; } }
.prep-title { font-family: "Kurale", serif; font-size: 1.15rem; color: var(--wood2); line-height: 1.2; }
.prep-card .duel { margin: 6px 0 0; color: var(--ink); }
.prep-card .duel .shield { width: 26px; height: 30px; }
.prep-subj { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #fff6dc; border: 2px solid #d9bd7c; font-weight: 900; color: var(--wood2); }
.prep-subj .ic { font-size: 1.4rem; }
.prep-count { margin: 6px auto 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold1), var(--gold2)); border: 4px solid var(--wood1); box-shadow: 0 4px 0 var(--wood2); }
.prep-count span { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 2.2rem; color: #4a2a00; animation: countPop .9s ease-out both; }
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(.8); opacity: .3; } }
.prep-note { margin-top: 6px; font-weight: 800; color: var(--muted); font-size: .9rem; }
@media (orientation: landscape) and (max-height: 560px) {
  .prep-card { top: 8px; padding: 6px 12px 8px; width: min(380px, 80%); }
  .prep-title { font-size: 1rem; }
  .prep-subj { margin-top: 4px; font-size: .85rem; }
  .prep-count { width: 46px; height: 46px; margin-top: 4px; } .prep-count span { font-size: 1.6rem; }
  .prep-note { display: none; }
  .map-banner.picked { font-size: 1rem; }
}

/* ---------- начален екран на телефон хоризонтално: горна лента (лого · парички и знаме · профил), без застъпване ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 14px; row-gap: 0; align-content: start; }
  #home > * { grid-column: 1 / -1; }
  #home > .hero { display: contents; }
  #home .hero > * { grid-column: 1; }
  #home .hero > .brand { grid-row: 1; align-self: center; margin-bottom: 4px; }
  #home > .zn-wallet, #home > .qx-account { position: static; grid-column: 2; grid-row: 1; align-self: center; margin-bottom: 6px; z-index: auto; }
  #home > .zn-wallet { justify-self: start; }
  #home > .qx-account { justify-self: end; }
  #home > .zn-wallet .zn-coin-chip { padding-top: 4px; padding-bottom: 4px; }
  #home .qx-chip { max-width: 190px; padding-top: 2px; padding-bottom: 2px; box-shadow: 0 3px 0 var(--wood2); }
  #home .qx-chip .qx-av { width: 30px !important; height: 30px !important; font-size: 18px !important; }
  #home .qx-chip-txt small { display: block; font-size: .65rem; }
  #home .qx-mini-bar { display: none; }
  #home .hero > .home-modes { grid-column: 2; grid-row: 2 / span 3; }
  #home .hero > .setup { grid-row: 2; margin-top: 0; }
  #home .hero > .join { grid-row: 3; }
  #home .hero > #homeErr, #home .hero > .home-links, #home .hero > .ad-slot { grid-column: 1 / -1; }
  #home .brand-logo { width: 42px; height: 42px; }
  #home .brand-name { font-size: 2.2rem; }
  /* долните връзки: малки бутони вместо подчертан текст */
  #home .home-links { gap: 5px; margin-top: 8px; }
  #home .home-links .link { text-decoration: none; font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255, 231, 166, .35); white-space: nowrap; }
  #home .home-links [data-flagl] { display: none; }
  #home .zn-mode { margin: 0 0 6px; padding: 3px; }
  #home .zn-mode button { padding: 5px 4px; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (orientation: landscape) and (max-height: 400px) {
  #home .mode { min-height: 44px; padding: 3px 12px; }
  #home .home-modes .modes { gap: 5px; } #home .home-modes .modes.solo { margin-top: 5px; }
}