/* TriviLite — "16th-century map" theme */

@font-face { font-family: "Cormorant"; src: url(fonts/cormorant.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url(fonts/cormorant-sc-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --leather: #2a1b10;
  --parch: #efe0bb;
  --parch-light: #f8efd8;
  --parch-dark: #d9c393;
  --ink: #3a2614;
  --ink-soft: #6e5235;
  --sea: #cdd5bf;
  --sea-ink: #5f7468;
  --land: #f3e7c6;
  --wax: #8e2f1d;
  --gold: #b0832a;
  --ok: #3f7a2e;
  --bad: #a3271b;
  --serif: "Cormorant", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --caps: "Cormorant SC", "Cormorant", Georgia, serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--ink);
  font: 500 19px/1.35 var(--serif);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120, 80, 40, .35), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 0, 0, .45), transparent 55%),
    var(--leather);
}
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }
.error { color: var(--bad); min-height: 1.2em; font-style: italic; }
a { color: var(--wax); }

/* parchment sheet */
.sheet, .card, .side {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(120, 80, 30, .22) 100%),
    linear-gradient(180deg, var(--parch-light), var(--parch));
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(90, 60, 30, .35);
}

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #3a2716, #24170d);
  border-bottom: 2px solid #6b4a23;
  color: var(--parch);
}
.logo { font: 700 26px var(--caps); color: var(--parch); text-decoration: none; letter-spacing: 1px; }
.logo span { color: #e0b65a; }
.phase { flex: 1; font-style: italic; color: #d9c49a; }
.conn { font-size: 15px; color: #d9c49a; }
.conn.bad { color: #ff9b8a; }

.view { flex: 1; min-height: 0; }
#view-home, #view-join { display: flex; gap: 24px; justify-content: center; align-items: flex-start; padding: 40px 16px; flex-wrap: wrap; overflow-y: auto; }
.card { border-radius: 4px; padding: 24px 26px; width: 400px; max-width: 100%; position: relative; }
.card::before, .side::before {
  content: ""; position: absolute; inset: 6px; border: 1px solid rgba(90, 60, 30, .45); outline: 3px double rgba(90, 60, 30, .3); outline-offset: 3px; pointer-events: none;
}
.card.narrow { width: 360px; }
h2, h3 { font-family: var(--caps); font-weight: 700; color: var(--wax); letter-spacing: .5px; }
.card h2 { margin: 0 0 8px; font-size: 28px; }
label { display: block; margin: 12px 0; color: var(--ink-soft); font-size: 16px; font-style: italic; }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  background: rgba(255, 252, 240, .7); border: 1px solid var(--ink-soft); border-radius: 2px;
  color: var(--ink); font: 600 19px var(--serif); font-style: normal;
}
input:focus, select:focus { outline: 2px solid var(--gold); }
button {
  font: 700 18px var(--serif); cursor: pointer; border-radius: 3px; border: 1px solid var(--ink-soft);
  background: rgba(255, 250, 235, .6); color: var(--ink); padding: 8px 14px;
}
button:hover:not(:disabled) { background: rgba(255, 245, 210, .95); border-color: var(--gold); }
button.primary {
  width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #5b1c10;
  background: radial-gradient(ellipse at 50% 30%, #b0432c, var(--wax) 70%);
  color: #fbe9c8; font: 700 21px var(--caps); letter-spacing: 1px;
  box-shadow: 0 2px 0 #4a160c, inset 0 1px 0 rgba(255, 255, 255, .25);
}
button.primary:hover:not(:disabled) { background: radial-gradient(ellipse at 50% 30%, #c4503a, #9c3522 70%); color: #fff3dc; }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.topics label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border: 1px solid rgba(90, 60, 30, .45); border-radius: 14px; color: var(--ink); cursor: pointer; font-style: normal; font-size: 16px; background: rgba(255, 250, 235, .4); }
.topics input { display: inline; width: auto; margin: 0; accent-color: var(--wax); }

/* game layout */
.game { display: grid; grid-template-columns: 1fr 420px; gap: 14px; padding: 14px; min-height: 0; }
.map-wrap { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
#map { width: 100%; height: 100%; max-height: calc(100vh - 90px); filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); }
.map-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--wax); color: #fbe9c8; font: 700 20px var(--caps); padding: 6px 20px; border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5); border: 1px solid #5b1c10; white-space: nowrap;
}
/* the frame (::before) stays on .side; only .side-inner scrolls, inside the frame */
.side { position: relative; border-radius: 4px; padding: 11px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.side-inner { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 8px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: rgba(90, 60, 30, .45) transparent; }
.side-inner::-webkit-scrollbar { width: 8px; }
.side-inner::-webkit-scrollbar-thumb { background: rgba(90, 60, 30, .4); border-radius: 4px; }

/* map */
.region path { stroke: var(--ink-soft); stroke-width: 1.3; stroke-dasharray: 6 2 1.5 2; stroke-linejoin: round; transition: fill .4s; cursor: default; }
.region.allowed path { cursor: pointer; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 10 5; animation: march 1s linear infinite; }
.region.allowed:hover path { fill: #f4d488; }
.region.dim path { opacity: .4; }
@keyframes march { to { stroke-dashoffset: -15; } }
.attack-fx path { fill: url(#hatch); stroke: var(--bad); stroke-width: 4; stroke-dasharray: none; animation: pulse 0.9s infinite alternate; pointer-events: none; }
@keyframes pulse { from { stroke-opacity: 1; } to { stroke-opacity: .25; } }
.labels text { text-anchor: middle; paint-order: stroke; stroke: rgba(248, 239, 216, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.labels .name { font-family: var(--caps); font-weight: 700; fill: var(--ink); letter-spacing: .6px; }
.labels .value { font: italic 600 14px var(--serif); fill: var(--ink-soft); }
.labels g { pointer-events: none; }
.sea-label { font: italic 600 22px var(--serif); fill: var(--sea-ink); text-anchor: middle; letter-spacing: 3px; opacity: .85; }
.sea-label.small { font-size: 15px; letter-spacing: 1.5px; }
.cartouche-title { font: 700 28px var(--caps); fill: var(--wax); text-anchor: middle; letter-spacing: 2px; }
.cartouche-sub { font: italic 600 15px var(--serif); fill: var(--ink); text-anchor: middle; }
.sea-link { stroke: var(--ink-soft); stroke-dasharray: 2 5; stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* players */
.players { display: flex; flex-direction: column; gap: 4px; }
.player { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 3px; border: 1px solid transparent; background: rgba(255, 250, 235, .35); }
.player.turn { border-color: var(--gold); background: rgba(240, 210, 130, .35); }
.player.me .pname::after { content: " · ти"; color: var(--ink-soft); font-weight: 400; font-style: italic; }
.player.out { opacity: .5; text-decoration: line-through; }
.shield { width: 18px; height: 21px; flex: none; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.pname { flex: 1; font-weight: 700; font-size: 19px; }
.pscore { font-variant-numeric: tabular-nums oldstyle-nums; font-weight: 700; font-size: 20px; }
.towers { color: var(--wax); letter-spacing: 1px; font-size: 13px; }
.offline { color: var(--bad); font-size: 14px; font-style: italic; }
.kick { padding: 0 8px; font-size: 14px; }

.timer { position: relative; height: 10px; background: rgba(90, 60, 30, .18); border-radius: 5px; overflow: hidden; border: 1px solid rgba(90, 60, 30, .35); }
.timer .fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a6a3a, #c49a4e); }
.timer.low .fill { background: linear-gradient(90deg, #7a1d12, var(--bad)); }
.timer.frozen .fill { background: repeating-linear-gradient(45deg, #7d8a6e, #7d8a6e 5px, #95a185 5px, #95a185 10px); }
.timer-note { font-size: 15px; font-style: italic; color: var(--ink-soft); min-height: 1.2em; margin-top: -8px; display: flex; justify-content: space-between; }

/* prompt */
.prompt h3 { margin: 0 0 6px; font-size: 21px; }
.prompt .qtext { font-size: 22px; font-weight: 700; margin: 6px 0 10px; line-height: 1.25; }
.prompt pre { background: rgba(255, 252, 240, .75); border: 1px solid rgba(90, 60, 30, .4); border-left: 4px solid var(--wax); border-radius: 2px; padding: 10px 12px; overflow-x: auto; font: 14px/1.5 var(--mono); margin: 0 0 10px; color: #2b1c0e; }
.options { display: grid; gap: 7px; }
.options button { text-align: left; padding: 9px 12px; font-size: 19px; font-weight: 600; position: relative; }
.options button.correct { background: rgba(110, 160, 80, .35); border-color: var(--ok); }
.options button.chosen { outline: 2px solid var(--gold); }
.options button:disabled { opacity: 1; color: var(--ink); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chip { font: 600 14px var(--serif); padding: 0 8px; border-radius: 9px; color: #fff; }
.answers { list-style: none; padding: 0; margin: 8px 0 0; }
.answers li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; flex-wrap: wrap; }
.answers .no { color: var(--bad); font-style: italic; }
.message { font-size: 21px; font-weight: 700; margin-top: 8px; }
.waiting { color: var(--ink-soft); margin-top: 8px; font-style: italic; }
.numeric { display: flex; gap: 8px; }
.numeric input { margin: 0; font-size: 22px; }
.numeric button { flex: none; width: auto; margin: 0; }

.host-panel { border-top: 1px solid rgba(90, 60, 30, .4); padding-top: 10px; }
.host-panel h3 { margin: 14px 0 4px; font-size: 19px; }
.host-panel h3:first-child { margin-top: 0; }
.join-link { font: 600 15px var(--mono); color: var(--wax); word-break: break-all; cursor: pointer; }
.join-link:hover { text-decoration: underline; }
.room-code { font: 700 46px var(--caps); letter-spacing: 8px; color: var(--wax); line-height: 1.1; }

.log-box summary { cursor: pointer; color: var(--ink-soft); font-style: italic; }
#log { list-style: none; padding: 0; margin: 6px 0 0; font-size: 16px; color: var(--ink-soft); display: flex; flex-direction: column-reverse; }
#log li { padding: 2px 0; border-bottom: 1px dotted rgba(90, 60, 30, .35); }

@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 8px; gap: 8px; }
  #map { max-height: 48vh; }
  .map-hint { font-size: 16px; top: 4px; }
}

/* pause */
.host-controls { display: flex; gap: 8px; }
.host-controls button { flex: 1; margin: 0; }
.pause-banner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg);
  font: 700 64px var(--caps); letter-spacing: 10px; color: var(--wax);
  padding: 10px 46px; border: 4px double var(--wax); border-radius: 6px;
  background: rgba(248, 239, 216, .88); box-shadow: 0 6px 30px rgba(0, 0, 0, .45);
  pointer-events: none;
}
@media (max-width: 900px) { .pause-banner { font-size: 38px; padding: 6px 24px; } }

/* map decorations */
.river { fill: none; stroke: #5d7f8f; stroke-linecap: round; stroke-linejoin: round; }
.river.c1 { stroke-width: 2.6; }
.river.c2 { stroke-width: 1.5; }
.river.c3 { stroke-width: .9; opacity: .85; }
.river-label { font: italic 600 13px var(--serif); fill: #3f6070; letter-spacing: 1px; paint-order: stroke; stroke: rgba(243, 231, 198, .8); stroke-width: 2.5px; }
.area-label { font: 700 26px var(--caps); fill: #6e5235; opacity: .38; text-anchor: middle; letter-spacing: 7px; }
.landmark-label { font: italic 700 12px var(--serif); fill: #4a3220; text-anchor: middle; paint-order: stroke; stroke: rgba(248, 239, 216, .85); stroke-width: 2.5px; }

.offline-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--wax); color: #fbe9c8; font: 700 18px var(--serif); padding: 8px 18px; border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5); border: 1px solid #5b1c10; animation: blink 1.4s infinite alternate;
}
@keyframes blink { from { opacity: 1; } to { opacity: .75; } }