/* ============================ ОБЩЕЕ ============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --gold: #f2c14e;
  --gold-dark: #b8860b;
  --parch: #efe0b8;
  --panel: rgba(18, 13, 6, 0.86);
}
html, body {
  height: 100%;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--parch);
  background:
    radial-gradient(circle at 18% 12%, #26314d 0%, transparent 42%),
    radial-gradient(circle at 82% 88%, #37223f 0%, transparent 42%),
    linear-gradient(160deg, #13151d 0%, #0a0c12 100%);
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Georgia", serif; letter-spacing: 0.4px; }
button { font-family: inherit; cursor: pointer; border: none; transition: transform .12s, filter .12s, box-shadow .12s; }
button:active { transform: scale(0.97); }
button:disabled { opacity: .45; cursor: not-allowed; }
input {
  font-family: inherit; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18);
  color: var(--parch); padding: 12px 14px; border-radius: 10px; font-size: 16px; outline: none;
}
input:focus { border-color: var(--gold); }

.btn {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #2b1d0e; font-weight: bold; padding: 14px 26px; border-radius: 12px; font-size: 18px;
  box-shadow: 0 6px 0 #7a5a08, 0 10px 20px rgba(0,0,0,.4); text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #7a5a08; }
.btn.full { width: 100%; }
.btn-ghost {
  background: rgba(255,255,255,.08); color: var(--parch); border: 2px solid rgba(242,193,78,.4);
  padding: 10px 20px; border-radius: 10px; font-size: 16px;
}
.btn-ghost:hover:not(:disabled) { background: rgba(242,193,78,.18); }
.btn-ghost.tiny { padding: 6px 14px; font-size: 13px; }

.screen { display: none; min-height: 100vh; padding: 22px; }
.screen.active { display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }

/* ============================ ВХОД ============================ */
#screen-setup { justify-content: center; }
.title { text-align: center; margin-bottom: 6px; }
.title.small h1 { font-size: 34px; }
.title h1 { font-size: clamp(30px, 6vw, 58px); color: var(--gold); text-shadow: 0 3px 0 #6b4e05, 0 6px 14px rgba(0,0,0,.6); }
.title .sub { color: #c9b98f; font-size: clamp(13px, 2.4vw, 19px); margin-top: 6px; }
.crest { font-size: clamp(46px, 9vw, 84px); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }

.panel {
  background: var(--panel); border: 2px solid rgba(242,193,78,.35); border-radius: 18px;
  padding: 24px; max-width: 720px; width: 100%; margin-top: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.3);
}
.panel.narrow { max-width: 420px; }
.fld { display: block; font-size: 14px; color: #c9b98f; margin-bottom: 16px; }
.fld input { display: block; width: 100%; margin-top: 6px; }
.divider { text-align: center; color: #8c8064; margin: 18px 0; position: relative; font-size: 13px; }
.divider::before, .divider::after { content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: rgba(255,255,255,.15); }
.divider::before { left: 0; } .divider::after { right: 0; }
.join-row { display: flex; gap: 10px; margin-top: 10px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: 6px; font-size: 22px; text-align: center; font-weight: bold; }
.err { color: #e88; font-size: 14px; margin-top: 10px; min-height: 18px; text-align: center; }

/* ============================ ЛОББИ ============================ */
.room-code { text-align: center; margin-bottom: 20px; }
.code-label { font-size: 13px; color: #c9b98f; margin-bottom: 4px; }
.code-big {
  font-size: 52px; font-weight: bold; letter-spacing: 10px; color: var(--gold);
  text-shadow: 0 3px 0 #6b4e05; font-family: monospace;
}
.players-title { color: var(--gold); margin-bottom: 10px; }
.lobby-players { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.lp-row {
  display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05);
  border-radius: 12px; padding: 10px 14px; border-left: 6px solid var(--pc, #888);
}
.lp-row .lp-emoji { font-size: 26px; }
.lp-row .lp-name { flex: 1; font-size: 17px; }
.lp-row .lp-tag { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: rgba(242,193,78,.18); color: var(--gold); }
.lp-row.offline { opacity: .45; }

.my-profile { background: rgba(0,0,0,.28); border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.mp-title { font-size: 13px; color: #c9b98f; margin-bottom: 8px; }
.mp-emojis, .mp-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-colors { margin-top: 8px; }
.mp-emojis button { font-size: 24px; background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 8px; width: 40px; height: 40px; }
.mp-emojis button.on { border-color: var(--gold); background: rgba(242,193,78,.2); }
.mp-colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; }
.mp-colors button.on { border-color: #fff; transform: scale(1.15); }

.lobby-actions { text-align: center; }
.wait-host { color: #c9b98f; font-size: 15px; }

/* ============================ КАРТА ============================ */
#screen-game { justify-content: flex-start; }
.topbar { width: 100%; max-width: 1040px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.turn-banner {
  display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 14px;
  padding: 9px 18px; border: 2px solid var(--pc, var(--gold)); box-shadow: 0 0 22px var(--pcglow, rgba(242,193,78,.35));
}
.turn-banner .avatar { font-size: 30px; }
.turn-banner .who { font-size: 19px; font-weight: bold; }
.turn-banner .hint { font-size: 13px; color: #c9b98f; }
.scoreboard { display: flex; gap: 8px; flex-wrap: wrap; }
.score-chip { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.35); border-radius: 20px; padding: 5px 12px; border: 1px solid var(--pc, #888); font-size: 14px; }
.score-chip.dead { opacity: .4; text-decoration: line-through; }
.score-chip.turnnow { box-shadow: 0 0 12px var(--pc); }
.score-chip .n { font-weight: bold; color: var(--gold); }
.score-chip .off { font-size: 11px; color: #e88; }

.board-wrap { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#board {
  width: 100%; height: auto; max-height: 72vh; background: rgba(6,10,20,.5);
  border: 2px solid rgba(242,193,78,.22); border-radius: 16px; box-shadow: inset 0 0 60px rgba(0,0,0,.5);
  touch-action: manipulation;
}
.cell { stroke: rgba(0,0,0,.45); stroke-width: 1.5; transition: filter .15s, opacity .15s; }
.cell.neutral { fill: #6b6152; }
.cell.selectable { cursor: pointer; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 7 5; }
.cell.selectable:hover { filter: brightness(1.25); }
.cell-emoji { font-size: 22px; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }
.cell-crown { font-size: 20px; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
@keyframes cellFlash { 0%{ filter: brightness(3);} 100%{ filter: brightness(1);} }
.cell.flash { animation: cellFlash .7s; }

.board-foot { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.legend { font-size: 13px; color: #b6a878; text-align: center; }
.legend b { color: var(--gold); }

/* ============================ ИСПЫТАНИЕ ============================ */
.challenge-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(6,7,12,.9); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 20px; overflow-y: auto;
}
.ch-head { text-align: center; margin: 6px 0 10px; }
.ch-head h2 { font-size: 24px; color: var(--gold); }
.ch-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; font-size: 17px; flex-wrap: wrap; }
.ch-side { display: flex; align-items: center; gap: 7px; }
.ch-vs-mark { color: #e05a5a; font-weight: bold; font-size: 22px; }
.ch-side.answered { text-shadow: 0 0 10px #4ec97a; }
.ch-side .ans-dot { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.ch-side.answered .ans-dot { background: #4ec97a; }

.progress-dots { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.pdot { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.25); }
.pdot.a { background: var(--pa, var(--gold)); border-color: var(--pa, var(--gold)); }
.pdot.d { background: var(--pd, #6cc); border-color: var(--pd, #6cc); }
.pdot.tie { background: #888; }
.pdot.ok { background: #4ec97a; border-color: #4ec97a; }
.pdot.no { background: #e05a5a; border-color: #e05a5a; }

.timer-bar { width: 100%; max-width: 640px; height: 8px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; margin: 4px 0 14px; }
.timer-fill { height: 100%; background: linear-gradient(90deg, #4ec97a, var(--gold), #e05a5a); width: 100%; transition: width linear; }

.qcard {
  background: var(--panel); border: 2px solid rgba(242,193,78,.35); border-radius: 18px;
  padding: 22px; max-width: 640px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.5); text-align: center;
}
.qtype-badge { display: inline-block; background: rgba(242,193,78,.15); color: var(--gold); border: 1px solid rgba(242,193,78,.4); padding: 4px 14px; border-radius: 20px; font-size: 12px; margin-bottom: 12px; letter-spacing: 1px; }
.qtext { font-size: 21px; line-height: 1.4; margin-bottom: 6px; }
.qtext.emoji { font-size: 50px; letter-spacing: 6px; }
.qhint { font-size: 13px; color: #9c8f6a; margin-bottom: 16px; min-height: 15px; }
.watch-note { font-size: 14px; color: #c9b98f; margin-bottom: 12px; }

.options { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.opt { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.15); color: var(--parch); padding: 15px; border-radius: 12px; font-size: 16px; text-align: left; }
.opt:hover:not(:disabled) { background: rgba(242,193,78,.15); border-color: var(--gold); }
.opt.mine { border-color: var(--gold); background: rgba(242,193,78,.2); }
.opt.correct { background: rgba(80,200,120,.28); border-color: #4ec97a; }
.opt.wrong { background: rgba(224,90,90,.28); border-color: #e05a5a; }
.opt .picks { float: right; }

.year-value { font-size: 46px; font-weight: bold; color: var(--gold); text-shadow: 0 2px 0 #6b4e05; margin: 6px 0; }
.year-input input[type=range] { width: 100%; height: 10px; accent-color: var(--gold); cursor: pointer; }
.year-scale { display: flex; justify-content: space-between; font-size: 12px; color: #9c8f6a; margin-top: 4px; }
.big-confirm { margin-top: 16px; }
.status-line { margin-top: 14px; color: #c9b98f; font-size: 15px; min-height: 18px; }

/* Мишень */
.target-stage { text-align: center; width: 100%; max-width: 640px; }
.target-stage h2 { color: var(--gold); margin-bottom: 4px; }
.correct-year { font-size: 15px; color: #c9b98f; margin-bottom: 12px; }
.correct-year b { color: #4ec97a; font-size: 20px; }
#targetSvg { max-width: 100%; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.shot-results { display: flex; gap: 18px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.shot-card { background: rgba(0,0,0,.35); border-radius: 12px; padding: 12px 18px; min-width: 130px; border: 2px solid var(--pc, #888); }
.shot-card .name { font-weight: bold; font-size: 15px; }
.shot-card .guess { font-size: 24px; color: var(--gold); }
.shot-card .diff { font-size: 12px; color: #c9b98f; }
.shot-card.winner { border-color: #4ec97a; box-shadow: 0 0 20px rgba(78,201,122,.5); }
.shot-card.winner::before { content: "🎯 БЛИЖЕ"; display: block; color: #4ec97a; font-size: 11px; font-weight: bold; margin-bottom: 3px; }

.round-result { text-align: center; background: var(--panel); border-radius: 18px; padding: 26px; max-width: 520px; border: 2px solid rgba(242,193,78,.4); }
.round-result .big { font-size: 38px; margin: 8px 0; }
.round-result .who-won { font-size: 22px; color: var(--gold); font-weight: bold; }

/* ============================ ОВЕРЛЕИ АНИМАЦИЙ ============================ */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(0,0,0,.82); backdrop-filter: blur(3px); text-align: center; padding: 22px; }
.overlay h1 { font-size: clamp(28px, 6vw, 60px); color: var(--gold); text-shadow: 0 4px 20px rgba(0,0,0,.8); }
.overlay p { font-size: 19px; color: var(--parch); margin-top: 12px; max-width: 600px; }
.overlay .btn { margin-top: 24px; }

.king-scene { position: relative; width: 280px; height: 260px; margin: 8px auto; }
.castle-icon { font-size: 88px; }
.blade { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); font-size: 58px; }
.blade.drop { animation: bladeDrop .5s cubic-bezier(.6,0,.9,1) forwards; }
@keyframes bladeDrop { to { top: 58px; } }
.head { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); font-size: 42px; opacity: 0; }
.head.fall { animation: headFall 1s ease-in forwards; }
@keyframes headFall { 0%{ opacity:1; top:68px; transform: translateX(-50%) rotate(0);} 100%{ opacity:1; top:236px; left:30%; transform: translateX(-50%) rotate(540deg);} }
.mannequin-label { position: absolute; bottom: -8px; width: 100%; font-size: 21px; color: #e05a5a; font-weight: bold; opacity: 0; }
.mannequin-label.show { animation: fadeUp .6s ease forwards; }
@keyframes fadeUp { from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform: translateY(0);} }
.running-king { position: absolute; bottom: 20px; font-size: 44px; left: 40%; opacity: 0; }
.running-king.run { animation: kingRun 1.6s ease-in forwards; }
@keyframes kingRun { 0%{ left:40%; opacity:1; transform: scaleX(-1);} 100%{ left:108%; opacity:1; transform: scaleX(-1);} }

.confetti-piece { position: fixed; top: -20px; width: 12px; height: 18px; z-index: 200; animation: confFall linear forwards; }
@keyframes confFall { to { transform: translateY(110vh) rotate(720deg); } }
.victory-crown { font-size: 96px; animation: crownBounce 1s infinite; }
@keyframes crownBounce { 0%,100%{ transform: translateY(0) rotate(-5deg);} 50%{ transform: translateY(-16px) rotate(5deg);} }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.8); border: 1px solid rgba(242,193,78,.4); color: var(--parch); padding: 10px 20px; border-radius: 12px; z-index: 300; font-size: 15px; opacity: 0; transition: opacity .25s; }
.toast.show { opacity: 1; }

@media (max-width: 560px) {
  .options { grid-template-columns: 1fr; }
  .qtext.emoji { font-size: 38px; }
  .code-big { font-size: 40px; letter-spacing: 6px; }
}