:root {
  --bg: #0b0e17;
  --bg2: #121726;
  --card: #161c2e;
  --card2: #1c2438;
  --line: #2a3350;
  --text: #e6e9f2;
  --muted: #8d97b5;
  --gold: #e8b84a;
  --gold2: #f6dc8f;
  --good: #4ade80;
  --bad: #f87171;
  --blue: #60a5fa;
  --mono: Consolas, 'Cascadia Mono', 'Courier New', monospace;
  --serif: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 14px/1.45 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  background:
    linear-gradient(#0b0e17bf, #0b0e17e6) fixed,
    url('ranked-crown.svg') center top / cover no-repeat fixed,
    radial-gradient(1200px 600px at 50% -200px, #1d2747 0%, var(--bg) 60%) fixed;
}
.hidden { display: none !important; }
h2, h3 { margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- header ---- */
#top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(#10152433, #0b0e1700);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 12px; cursor: default; }
.brand svg { width: 42px; height: 30px; filter: drop-shadow(0 0 6px #e8b84a66); }
.wordmark {
  font: 700 26px var(--serif); letter-spacing: .32em; margin-right: -.32em;
  background: linear-gradient(#fff3c4, #e8b84a 60%, #b8862a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-size: 11px; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; margin-top: -2px; }
.userchip { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; color: #0b0e17; border: 2px solid #ffffff55; flex: none;
}
main { padding: 18px 22px 40px; max-width: 1700px; margin: 0 auto; }
.input-games { margin-bottom: 18px; padding: 12px 14px; border: 1px solid #e8b84a66; border-radius: 10px; background: var(--bg2); }
.input-games-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.input-games-heading h2 { margin: 0; font-size: 14px; color: var(--gold2); }
.input-games-heading .muted { font-size: 12px; }
.input-game-cards { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.input-game-card { flex: 0 0 210px; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); text-decoration: none; }
.input-game-card:hover, .input-game-card.current { border-color: var(--gold); background: var(--card2); }
.input-game-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.input-game-card strong { overflow-wrap: anywhere; }
.input-game-kind { color: var(--muted); font-size: 11px; }
.input-game-status { color: var(--gold2); font-size: 12px; }

/* ---- common ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 6px 24px #0006; }
.card + .card { margin-top: 14px; }
.btn {
  background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: linear-gradient(#f2c862, #c99a2e); color: #1b1405; border-color: #f6dc8f; font-weight: 700; }
.btn.gold:hover:not(:disabled) { color: #000; filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.small { padding: 2px 9px; font-size: 12px; }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  background: #0d1220; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.muted { color: var(--muted); }
.err { color: var(--bad); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--line); font-size: 12px; margin: 2px 3px 2px 0;
}
.chip.click { cursor: pointer; }
.chip.click:hover { border-color: var(--gold); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; }
.pill.lobby { background: #3a4570; } .pill.setup { background: #7a5b1c; } .pill.play { background: #1d6b3d; } .pill.over { background: #6b1d1d; }
.bar { height: 8px; border-radius: 99px; background: #0d1220; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3a8f5d, #7be0a0); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.kv div { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; text-align: center; }
.kv b { display: block; font-size: 18px; color: var(--gold2); }
.kv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---- auth / lobby ---- */
.authcard { max-width: 420px; margin: 60px auto; text-align: center; }
.authcard .bigmark { font: 700 54px var(--serif); letter-spacing: .3em; margin-right: -.3em; background: linear-gradient(#fff3c4, #e8b84a 60%, #b8862a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.authcard form { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.authcard .row { display: flex; gap: 10px; }
.photosensitivity-warning { margin: 24px 0; padding: 20px; border: 2px solid #f87171; border-radius: 8px; background: #2c151e; color: #fff0f0; text-align: left; }
.photosensitivity-warning h2 { font: 700 clamp(20px, 3vw, 25px)/1.3 'Segoe UI', system-ui, sans-serif; color: #ffb4b4; overflow-wrap: anywhere; }
.photosensitivity-warning p { font: 14px/1.6 'Segoe UI', system-ui, sans-serif; margin: 12px 0 0; }
.lobbygrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.gamecard { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); margin-bottom: 10px; }
.gamecard b { font-size: 15px; }
.turn-status { margin-top: 8px; }

/* ---- game ---- */
.gamebar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.gtitle { font: 700 20px var(--serif); letter-spacing: .06em; }
.phase { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.players-strip { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: center; }
.pcard { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 4px 6px; }
.pcard.me { border-color: var(--gold); box-shadow: 0 0 0 1px #e8b84a44 inset; }
.pcard.dead { opacity: .4; text-decoration: line-through; }
.pcard small { color: var(--muted); display: block; line-height: 1.1; }
.ready { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.ready.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 350px; grid-template-areas: 'left mid right'; gap: 14px; align-items: start; }
.col-left { grid-area: left; min-width: 0; } .col-mid { grid-area: mid; min-width: 0; } .col-right { grid-area: right; min-width: 0; }
@media (max-width: 1300px) { .layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: 'mid right' 'left right'; } }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mid' 'right' 'left'; } .lobbygrid { grid-template-columns: 1fr; } }
.layout .card + .card { margin-top: 14px; }
.mapwrap {
  position: relative; overflow: hidden; background: #070a12; border: 1px solid var(--line); border-radius: 10px;
  cursor: grab; user-select: none; height: 62vh; min-height: 430px;
}
.mapwrap.dragging { cursor: grabbing; }
.mapwrap .ascii { margin: 0; font: 700 13px/13px var(--mono); white-space: pre; letter-spacing: 0; }
.mapwrap .map-measure { visibility: hidden; pointer-events: none; }
.mapwrap .terrain { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.mapwrap .overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.maptools { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.maptools .spacer { flex: 1; }
.mapopts > label, .maptools > label, .cine-top > label { display: inline-block; }
.cine-top { flex-wrap: wrap; gap: 8px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend i { font-style: normal; font-family: var(--mono); color: var(--gold2); font-weight: 700; }
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.tab { background: none; border: none; padding: 8px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.on { color: var(--gold2); border-color: var(--gold); }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th { text-align: left; color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
table.t td, table.t th { padding: 4px 8px; border-bottom: 1px solid #222a42; }
table.t tr.row { cursor: pointer; }
table.t tr.row:hover { background: #ffffff0a; }
.scroll { max-height: 320px; overflow: auto; }
.logturn { margin-bottom: 12px; }
.logturn pre { margin: 4px 0 0; font: 12px/1.5 var(--mono); color: #b9c1db; white-space: pre-wrap; }

/* info card */
.infohead { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.bigletter { font: 700 44px/1 var(--serif); width: 56px; text-align: center; text-shadow: 0 0 18px currentColor; }
.badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg2); margin: 2px 4px 2px 0; }

/* orders */
.hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.draft { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; background: var(--bg2); min-height: 92px; }
.seq { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-family: var(--mono); font-weight: 700; }
.seq .node { padding: 0 7px; border-radius: 6px; border: 1px solid currentColor; }
.country-link { background: transparent; border: 0; padding: 0 3px; font: inherit; cursor: pointer; }
.country-link:hover { background-color: #ffffff15; text-decoration: underline; }
.country-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.seq .arr { color: var(--muted); padding: 0 2px; }
.kindtag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 8px; border-radius: 6px; color: #0b0e17; }
.k-move { background: #4ade80; } .k-attack { background: #f87171; } .k-defend { background: #60a5fa; } .k-dev { background: #fbbf24; } .k-draft { background: #cbd5e1; }
.btnrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.order { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 6px 10px; margin-top: 8px; background: var(--bg2); }
.order:hover { background: var(--card2); }
.order .num { font: 700 12px var(--mono); color: var(--muted); }
.order .desc { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.order.k-move { border-left-color: #4ade80; background: var(--bg2); } .order.k-attack { border-left-color: #f87171; background: var(--bg2); }
.order.k-defend { border-left-color: #60a5fa; background: var(--bg2); } .order.k-dev { border-left-color: #fbbf24; background: var(--bg2); }
.order.sel { background: #e8b84a18 !important; box-shadow: inset 0 0 0 1px #e8b84a88; }
.order.sel .num { color: var(--gold2); }
.order:hover { background: var(--card2) !important; }
.submitbar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.locked { color: var(--good); font-weight: 600; margin-bottom: 8px; }
.pl-odds { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #0d1220; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 40px; gap: 2px 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.pl-label { grid-column: 1 / -1; color: #cfd5ea; }
.pl-bar { height: 7px; border-radius: 99px; background: #1c2438; overflow: hidden; }
.pl-bar i { display: block; height: 100%; }
.pl-loss { grid-column: 1 / -1; font-size: 11px; margin-top: -3px; }

/* toast */
#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 100; }
.toast { background: #1d2540; border: 1px solid var(--gold); border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 30px #000a; display: flex; gap: 12px; align-items: center; animation: slidein .25s; max-width: 380px; }
.toast.bad { border-color: var(--bad); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* svg overlay animation */
.hq-flag-cloth {
  transform-box: fill-box;
  transform-origin: left center;
  animation: hq-flag-wave 3.6s ease-in-out infinite;
}
@keyframes hq-flag-wave {
  0%, 100% { transform: skewY(-3deg) scaleX(1); }
  50% { transform: skewY(4deg) scaleX(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hq-flag-cloth { animation: none; }
}
.dashflow { stroke-dasharray: 9 7; animation: flow .9s linear infinite; }
.dashflow.slow { animation-duration: 1.8s; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.pulse { animation: pulse 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(1.7); opacity: 0; } }
.fadein { animation: fadein .5s; }
@keyframes fadein { from { opacity: 0; } }

/* ---- cinema ---- */
.cinema { position: fixed; inset: 0; z-index: 200; background: #05070d; display: flex; flex-direction: column; animation: fadein .3s; }
.cine-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; }
.cine-top .wordmark { font-size: 20px; }
.cine-title { font: 600 15px var(--serif); letter-spacing: .2em; color: var(--gold2); text-transform: uppercase; }
.cine-stage { position: relative; flex: 1; margin: 0 24px; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 0 80px #000; }
.cine-stage .mapwrap { height: 100%; min-height: 0; border: none; border-radius: 0; cursor: default; }
.cine-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px 40px #000c; }
.cine-card {
  position: absolute; left: 22px; bottom: 22px; width: min(560px, 62%); z-index: 3;
  background: #0d1220e6; border: 1px solid var(--gold); border-radius: 14px; padding: 16px 20px; backdrop-filter: blur(6px);
  animation: slidein .35s;
}
.kicker { font-size: 11px; letter-spacing: .35em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.headline { font: 700 26px/1.15 var(--serif); margin: 4px 0 8px; }
.caption { color: #cfd5ea; min-height: 3.4em; white-space: pre-wrap; }
.cine-score { position: absolute; right: 18px; top: 16px; z-index: 3; display: grid; gap: 6px; }
.cine-score .pcard { background: #0d1220cc; }
.cine-bottom { display: flex; align-items: center; gap: 14px; padding: 12px 24px 18px; }
.cine-bottom .progress { flex: 1; display: flex; gap: 4px; }
.cine-bottom .seg { flex: 1; height: 8px; border-radius: 4px; background: #2a3350; cursor: pointer; transition: .2s; }
.cine-bottom .seg.done { background: #7a6a3a; } .cine-bottom .seg.on { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.odds { position: relative; display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 12px 0 18px; border: 1px solid var(--line); }
.odds .seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #0b0e17; overflow: hidden; white-space: nowrap; }
.odds .marker { position: absolute; top: -7px; bottom: -7px; width: 3px; background: #fff; box-shadow: 0 0 10px #fff; left: 0; transition: left 1.3s cubic-bezier(.2, .8, .2, 1); }
.odds .marker::after { content: attr(data-v); position: absolute; top: 100%; left: -16px; width: 36px; text-align: center; font-size: 10px; color: #fff; }
.stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.stat { background: #1c2438; border: 1px solid var(--line); border-radius: 8px; padding: 2px 10px; font-size: 12px; }
.stat b { color: var(--gold2); }
.stamp { display: inline-block; font: 700 22px var(--serif); letter-spacing: .2em; padding: 2px 14px; border: 3px solid; border-radius: 8px; transform: rotate(-4deg); animation: stamp .35s cubic-bezier(.2, 2, .4, 1); }
@keyframes stamp { from { transform: rotate(-4deg) scale(2.4); opacity: 0; } }
.stamp.win { color: var(--good); } .stamp.lose { color: var(--bad); }

/* ---- hover tooltip, city rows ---- */
.tip { position: fixed; z-index: 150; width: 270px; pointer-events: none; background: #0d1220f5; border: 1px solid var(--gold); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 40px #000c; font-size: 13px; }
.cityrow { padding: 2px 8px; border-left: 3px solid var(--line); margin: 2px 0; font-size: 13px; }
.cityrow.hi { border-left-color: var(--gold); background: #e8b84a18; }
.citynote { margin-top: 6px; padding: 6px 8px; border: 1px solid var(--gold); border-radius: 8px; font-size: 12px; background: #e8b84a10; }
.mapwrap { touch-action: none; }

/* hover card: heraldic frame */
.tip {
  width: 280px; padding: 14px 18px 12px; border-radius: 4px; border: 1px solid var(--gold);
  background: radial-gradient(120% 90% at 50% 0%, #1d2540f8 0%, #0b0e19f8 70%);
  box-shadow: inset 0 0 0 3px #0b0e19, inset 0 0 0 4px #e8b84a66, 0 12px 40px #000d, 0 0 24px #e8b84a22;
}
.tip::before, .tip::after { content: ''; position: absolute; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); top: -5px; box-shadow: 0 0 8px #e8b84a99; }
.tip::before { left: 14px; } .tip::after { right: 14px; }
.tip .infohead { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.tip .bigletter { font-size: 40px; width: 52px; text-shadow: 0 0 14px currentColor, 0 2px 0 #000; }
.tip .infohead > div:last-child > div:first-child { font: 700 17px var(--serif); letter-spacing: .08em; }
.tip .infohead .muted { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.tip .bar { height: 6px; border-color: #e8b84a55; }
.tip .cityrow { border-left-color: #e8b84a66; font-variant: small-caps; letter-spacing: .03em; }
.tip .cityrow b { font-family: var(--serif); color: var(--gold2); font-weight: 600; }
.tip .cityrow.hi { border-left-color: var(--gold); }
.tip .citynote { border-radius: 3px; }
.tip.order-warning { border-color: var(--bad); max-width: calc(100vw - 16px); }
.lobby-section + .lobby-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.game-description { white-space: pre-wrap; overflow-wrap: anywhere; }
textarea { resize: vertical; }
.player-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; align-items: start; }
.player-account { position: relative; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; }
.player-account.me { border-color: var(--gold); }
.player-account:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.player-account-name { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.player-badges:has(.pill) { margin-top: 6px; }
.pill.event-winner { color: var(--gold2); border: 1px solid var(--gold); }
.pill.season-winner { display: inline-flex; align-items: center; gap: 4px; color: #b8f4ff; border: 1px solid #72cce0; background: linear-gradient(120deg, #12354b, #30214e); font-size: 10px; white-space: nowrap; vertical-align: middle; }
#lbAddPlayer { margin: 12px 0; }
#lbPlayerAdd { margin-top: 8px; }
.lobby-player-cards { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.lobby-player-card { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); font: 12px/1.4 'Segoe UI', system-ui, sans-serif; }
.lobby-player-card.me { border-color: var(--gold); }
.lobby-player-card > span:last-child { overflow-wrap: anywhere; min-width: 0; }
.ranked-queue, .duel-rating-results { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg2); }
.events-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .25em; color: #cfb883; }
.ranked-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--rank-edge); border-radius: 8px; margin-bottom: 14px; }
.ranked-crest { font-size: 32px; line-height: 1; color: var(--rank-ink); text-shadow: 0 0 20px var(--rank-glow); }
.ranked-identity > div { flex: 1; min-width: 0; }
.ranked-identity .rank-badge { font: 700 18px var(--serif); }
.ranked-identity-label { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.ranked-identity .muted { font-size: 12px; }
.queue-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.queue-mode { min-width: 0; }
.queue-mode-heading { display: grid; gap: 3px; margin-bottom: 10px; }
.queue-mode-heading strong { color: #f6eddb; font-size: 17px; }
.queue-mode-heading span, .queue-note { color: var(--muted); font-size: 11px; }
.queue-controls .btn { width: 100%; padding: 13px 8px; white-space: normal; border-radius: 6px; font-weight: 700; font-size: 13px; }
.queue-controls .btn.trios { background: linear-gradient(120deg, #56377f, #352746); border-color: #ac80d9; color: #f1e0ff; }
.queue-search { font-size: 12px; color: var(--gold2); }
.queue-search .muted { display: block; font-size: 10px; }
.queue-count { margin: 0 0 8px; color: var(--gold2); font-size: 12px; font-weight: 700; }
.queue-roster { margin-bottom: 10px; font-size: 11px; overflow-wrap: anywhere; }
.queue-roster ol { margin: 4px 0; padding-left: 22px; max-height: 140px; overflow-y: auto; }
.queue-waiting { display: block; margin-top: 5px; color: var(--muted); }
.queue-remaining { display: block; margin-top: 3px; font-weight: 700; }
.queue-games { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.queue-games label { display: grid; gap: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.queue-games input { width: 58px; padding: 6px; }
.queue-controls .queue-games .btn.small { padding: 7px 6px; font-size: 11px; }
.challenge-list { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 6px; font-size: 12px; }
.challenge-list ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.challenge-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.challenge-list li .muted { display: block; font-size: 10px; }
.challenge-list li.incoming b { color: var(--gold2); }
.challenge-actions { display: flex; gap: 6px; }
.queue-controls .challenge-actions .btn { width: auto; padding: 5px 10px; font-size: 11px; }
.profile-challenge { margin: 8px 0; }
.tab-badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--gold); color: #1a1408; font-size: 10px; font-weight: 700; text-align: center; }
.queue-note { margin: 12px 0 0; }
.queue-note b { color: #d8bf8a; }
.has-quick-play main { padding-right: 252px; }
.lobby-quick-play { position: fixed; z-index: 15; top: 100px; right: 18px; width: 216px; padding: 16px; border: 1px solid #c5a16755; border-radius: 10px; background: linear-gradient(120deg, #161b2b, #141022); box-shadow: 0 12px 30px #0004; max-height: calc(100svh - 180px); overflow-y: auto; }
.lobby-quick-play h2 { font: 600 18px var(--serif); margin: 0 0 14px; color: #f6eddb; }
.lobby-quick-play .queue-mode-grid { grid-template-columns: minmax(0, 1fr); }
.lobby-quick-play .queue-controls .btn { padding: 9px 6px; font-size: 12px; }
.lobby-quick-play .queue-mode-heading strong { font-size: 14px; }
.lobby-quick-play p { color: var(--muted); }
@media (max-width: 860px) {
  .has-quick-play main { padding-right: 22px; padding-bottom: 210px; }
  .lobby-quick-play { top: auto; bottom: 64px; right: 12px; width: min(300px, calc(100vw - 24px)); max-height: 40svh; padding: 12px; }
  .lobby-quick-play .queue-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lobby-quick-play h2 { font-size: 14px; margin-bottom: 8px; }
  .lobby-quick-play .queue-mode-heading { display: none; }
  .lobby-quick-play .queue-note { margin-top: 8px; }
}
.ranked-section-heading { margin: 54px 0 22px; scroll-margin-top: 100px; }
.ranked-section-heading h2 { font: 600 clamp(24px, 3vw, 36px) var(--serif); margin: 8px 0; }
.ranked-section-heading p { margin: 0; }
.ranked-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ranked-home { padding: clamp(20px, 3vw, 36px); border-color: #c5a16755; background: linear-gradient(120deg, #1b2031, #141022); }
.ranked-home-heading h2 { font: 600 32px var(--serif); color: var(--gold2); margin: 0 0 8px; }
.ranked-home-heading { margin-bottom: 24px; }
.ranked-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ranked-home .ranked-identity { margin: 0; padding: 20px; }
.ranked-home-games { margin-top: 18px; }
@media (max-width: 650px) { .ranked-home-grid { grid-template-columns: minmax(0, 1fr); } }
.ranked-guide { margin: 32px 0 18px; padding: clamp(18px, 3vw, 36px); border-radius: 16px; background: linear-gradient(145deg, #1a2035, #111627); }
#rankedGuideTitle { font: 600 clamp(23px, 3vw, 34px) var(--serif); margin-top: 10px; scroll-margin-top: 100px; }
.ranked-guide > summary { cursor: pointer; color: var(--gold2); }
.ranked-guide > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.rank-guide-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 18px 0; }
.rank-guide-tiers article { padding: 14px; border: 1px solid var(--rank-edge); border-radius: 8px; min-width: 0; }
.rank-guide-tiers h3 { color: var(--rank-ink); margin-bottom: 6px; }
.rank-guide-tiers p { margin: 0; font-size: 12px; }
.rank-guide-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.rank-guide-rules section { min-width: 0; }
.rank-guide-rules p { color: var(--muted); font-size: 13px; }
.rank-guide-rules b { color: var(--text); }
.ranked-grid > div > .card + .card { margin-top: 18px; }
.ranked-table-wrap { overflow-x: auto; max-height: 720px; }
.ranked-table td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranked-table td { padding-top: 10px; padding-bottom: 10px; }
.ranked-me { background: #d9a93f12; box-shadow: inset 3px 0 var(--gold); }
.ranked-result { border-bottom: 1px solid var(--line); padding: 14px 12px; }
.ranked-result-heading { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ranked-result-heading > .muted { font-size: 11px; }
.ranked-result-players { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ranked-result-players > div { display: grid; gap: 4px; }
.rating-gain { color: var(--good); }
.rating-loss { color: var(--bad); }
.event-example { margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); min-width: 0; }
.event-example h4 { margin: 0 0 10px; }
.event-example input { width: 80px; display: inline-block; }
.event-example p { font-size: 12px; }
.event-example-scroll { overflow-x: auto; max-height: 360px; }
.event-example table { font-variant-numeric: tabular-nums; white-space: nowrap; }
.event-example caption { text-align: left; margin-bottom: 6px; }
[data-profile] { cursor: pointer; }
[data-profile]:hover { border-color: var(--gold); }
[data-profile]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.profile-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
#offlinePage { z-index: 1000; background: var(--bg); overflow-y: auto; }
.offline-card { text-align: center; max-height: calc(100dvh - 32px); overflow-y: auto; }
.offline-card .bigmark { color: var(--gold2); font: 700 28px var(--serif); letter-spacing: .15em; margin-bottom: 24px; }
.profile-heading, .profile-identity, .profile-colours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-heading { justify-content: space-between; margin-bottom: 18px; }
.profile-heading h2 { margin: 0; }
.profile-identity { margin-bottom: 12px; }
.profile-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.rank-wood { --rank-glow: #66503966; --rank-ink: #dfc5a0; --rank-edge: #806447; --rank-texture: repeating-linear-gradient(6deg, #b58b5520 0 2px, transparent 2px 9px, #110e0c44 10px 12px); --rank-base: #211c18; }
.rank-bronze { --rank-glow: #d46b3266; --rank-ink: #ffb38a; --rank-edge: #c67a4e; --rank-texture: repeating-linear-gradient(135deg, #ffab7010 0 1px, transparent 1px 6px); --rank-base: #301b18; }
.rank-silver { --rank-glow: #c1d6ef66; --rank-ink: #f1f7ff; --rank-edge: #c1d6ef; --rank-base: #263245; }
.rank-gold { --rank-glow: #ffd32688; --rank-ink: #fff0a0; --rank-edge: #ffd84d; --rank-base: #352b0c; }
.rank-diamond { --rank-glow: #20d9ed66; --rank-ink: #c5ffff; --rank-edge: #65edff; --rank-texture: repeating-conic-gradient(from 30deg at 80% 50%, #b6ffff18 0deg 30deg, transparent 30deg 60deg); --rank-base: #10303b; }
.rank-ruby { --rank-glow: #a80e426e; --rank-ink: #ffd1dc; --rank-edge: #e3547a; --rank-texture: linear-gradient(145deg, #ff73951a, transparent 45%, #620a3233 70%); --rank-base: #310d22cc; }
.rank-champion { --rank-glow: #a030ff99; --rank-ink: #f2d6ff; --rank-edge: #c78aff; --rank-base: #2b1049; }
.rank-unranked { --rank-glow: #77849b18; --rank-ink: #b8c2d6; --rank-edge: var(--line); --rank-base: var(--card); }
.rank-card { position: relative; isolation: isolate; background: var(--rank-texture, linear-gradient(transparent, transparent)), linear-gradient(120deg, var(--rank-glow), transparent 85%), var(--rank-base); border-color: var(--rank-edge); }
.rank-card::before, .rank-champion::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
.rank-silver::before, .rank-gold::before, .rank-ruby::before, .rank-champion::before {
  background: linear-gradient(115deg, transparent 35%, #ffffff08 43%, #ffffff55 49%, #ffffff0a 55%, transparent 63%);
  background-size: 300% 100%; background-position: 100% 0; animation: rank-shine 6s ease-in-out infinite;
}
.rank-gold::before { animation-delay: -2s; }
.rank-ruby::before { background-image: linear-gradient(115deg, transparent 30%, #ff537a18 40%, #ffb4d066 49%, #d6215c22 58%, transparent 68%); animation-duration: 7s; }
.rank-card.rank-champion { border: 3px double #efbfff; box-shadow: inset 0 0 12px #c45dff44, 0 0 10px #a038f54d; animation: champion-aura 5s ease-in-out infinite; }
.rank-card.rank-champion.me { border-color: #ffe5a2; }
.rank-champion::before { background-image: linear-gradient(115deg, transparent 30%, #a944ff44 40%, #f3bdff99 49%, #8433ff44 58%, transparent 68%); animation-duration: 4.5s; }
.rank-champion::after {
  background-image: radial-gradient(circle, #fff0ff 0 1px, transparent 2px), radial-gradient(circle, #c693ff 0 1.5px, transparent 2.5px), radial-gradient(circle, #f3bdff 0 1px, transparent 2px);
  background-size: 47px 41px, 79px 59px, 113px 67px; background-position: 0 0, 20px 10px, 40px 30px;
  opacity: .65; animation: champion-particles 8s linear infinite;
}
@keyframes rank-shine { 0%, 20% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@keyframes champion-particles { to { background-position: 47px -41px, -59px -49px, 153px -37px; } }
@keyframes champion-aura { 0%, 100% { box-shadow: inset 0 0 12px #c45dff44, 0 0 10px #a038f54d; } 50% { box-shadow: inset 0 0 18px #e394ff55, 0 0 16px #ae52ff77; } }
.event-winner { position: relative; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: #fff0ad; border: 1px solid #ffda70; background: linear-gradient(120deg, #683306, #3c1d50, #683306); font-size: 10px; white-space: nowrap; vertical-align: middle; animation: event-aura 4s ease-in-out infinite; }
.event-winner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #fff7c766 50%, transparent 65%); background-size: 300% 100%; animation: rank-shine 5s ease-in-out infinite; }
.event-crown { font-size: 15px; line-height: 1; color: #ffe58e; text-shadow: 0 0 6px #ffd23f; }
@keyframes event-aura { 0%, 100% { box-shadow: 0 0 4px #ffca3644; } 50% { box-shadow: 0 0 12px #ffc83d88, inset 0 0 8px #c879ff33; } }
.lobby-player-card { flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .rank-card.rank-champion, .rank-card::before, .rank-card::after, .event-winner, .event-winner::after { animation: none; }
}
.rank-badge { display: inline-block; color: var(--rank-ink, var(--gold2)); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.player-badges .rank-badge { margin-right: 8px; }
.profile-rank { padding: 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.profile-email { display: inline-block; text-decoration: none; }
#profileForm { display: grid; gap: 8px; }
#profileForm p { font-size: 12px; margin: 4px 0; }
@media (max-width: 860px) {
  #top { flex-wrap: wrap; gap: 8px; }
  .userchip { flex-wrap: wrap; max-width: 100%; }
  #meName { overflow-wrap: anywhere; }
  .ranked-grid { grid-template-columns: minmax(0, 1fr); }
  #lobbyTabs { overflow-x: auto; }
  #lobbyTabs .tab { flex-shrink: 0; }
}
.major-events > h3 { color: var(--gold2); font: 600 24px var(--serif); letter-spacing: .12em; }
.events-showcase { min-height: 65vh; padding: clamp(20px, 4vw, 64px) 0; }
.events-heading { position: relative; padding: 10px 0 44px; max-width: 650px; }
.events-heading h2 { font: 600 clamp(34px, 5vw, 66px)/1.1 var(--serif); color: #f3e5c3; margin: 18px 0; }
.events-heading p { color: #b3b9cf; max-width: 430px; line-height: 1.7; }
#eventGames .featured-event { background: linear-gradient(120deg, #2b2634ed, #141b2aed); border-radius: 12px; border-top-width: 2px; gap: 24px; padding: clamp(18px, 3vw, 36px); margin-bottom: 20px; box-shadow: 0 16px 45px #0004; }
#eventGames .featured-event > div:first-child { min-width: 0; flex: 1; }
#eventGames .featured-event > div:last-child { display: grid; gap: 8px; min-width: 120px; }
#eventGames .featured-event > div:last-child .btn { padding: 10px 14px; }
#eventGames .featured-event .game-description { max-width: 700px; color: #c1c6d8; }
#eventGames .featured-event .event-eyebrow { font-size: 10px; }
.gamecard.featured-event, #lbMetadata.featured-event {
  padding: 28px; border: 1px solid var(--gold); border-top: 3px solid var(--gold2);
  background: radial-gradient(ellipse at top left, #ad7e2633, transparent 70%), linear-gradient(135deg, #252039, #121726);
  box-shadow: inset 0 0 0 4px #e8b84a0d, 0 8px 30px #0005; border-radius: 4px;
}
.gamecard.featured-event b { font: 600 clamp(26px, 3vw, 40px)/1.2 var(--serif); color: var(--gold2); letter-spacing: .06em; }
.event-eyebrow { color: var(--gold); font: 600 12px var(--serif); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 12px; }
.featured-event .game-description { font-size: 16px; }
.major-event-title { color: var(--gold2); text-shadow: 0 0 18px #e8b84a33; }
.major-event-label { display: block; color: var(--gold); font: 600 10px var(--serif); text-transform: uppercase; letter-spacing: .18em; }
@media (max-width: 640px) {
  .gamecard.featured-event { flex-direction: column; align-items: stretch; padding: 20px; }
}
.overlay text.realm { fill-opacity: .24; stroke-opacity: .3; transition: fill-opacity .2s, stroke-opacity .2s; }
.overlay text.realm.hot { fill-opacity: .95; stroke-opacity: .9; }
#mobnav { display: none; }
[data-pane].hidden { display: none; }

/* ---- small screens ---- */
@media (max-width: 900px) {
  #top { padding: 6px 12px; } .wordmark { font-size: 20px; } .tagline { display: none; } .brand svg { width: 32px; height: 24px; }
  main { padding: 10px 10px 74px; }
  .gamebar { gap: 8px; } .gtitle { font-size: 16px; }
  .players-strip { order: 5; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .pcard { flex: none; } .pcard small { font-size: 11px; }
  .layout { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .col-left, .col-mid, .col-right { display: contents; }
  .layout .card + .card { margin-top: 0; }
  .mapcard { order: -1; position: sticky; top: 44px; z-index: 12; padding: 8px; }
  .mapcard .mapwrap { height: 40vh; min-height: 230px; }
  .mapcard .legend, .mapcard .maptools .muted:last-child { display: none; }
  .card { padding: 12px; }
  body:not([data-pane='orders']) [data-pane='orders'], body:not([data-pane='empire']) [data-pane='empire'],
  body:not([data-pane='country']) [data-pane='country'], body:not([data-pane='log']) [data-pane='log'] { display: none; }
  #mobnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #0d1220f5; border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  #mobnav button { flex: 1; padding: 13px 0 15px; background: none; border: none; border-top: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 13px; }
  #mobnav button.on { color: var(--gold2); border-top-color: var(--gold); }
  .authcard { margin: 24px auto; }
  .cine-top { padding: 8px 12px; } .cine-title { display: none; }
  .cine-stage { margin: 0 8px; }
  .cine-card { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 10px 12px; max-height: 58%; overflow: auto; }
  .headline { font-size: 19px; } .kicker { font-size: 10px; }
  .cine-score { display: none; }
  .cine-bottom { flex-wrap: wrap; padding: 8px 8px 12px; gap: 8px; } .cine-bottom .progress { flex-basis: 100%; order: 5; }
}

.mapwrap .ascii { position: absolute; left: 0; top: 0; }
.layout > *, .layout .card, .col-mid, .col-left, .col-right { min-width: 0; }
body { overflow-x: hidden; }

.userrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #222a42; flex-wrap: wrap; }
.userrow .btn { margin-left: 4px; }
#meBadge { margin-left: -4px; }

.chip.sea { border-style: dotted; border-color: #7fb7ff; }

/* colour picker */
.modal { position: fixed; inset: 0; z-index: 300; background: #05070dcc; display: grid; place-items: center; padding: 16px; }
.modalcard { width: min(460px, 100%); }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin: 6px 0 12px; }
.sw {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.1s, border-color 0.1s, opacity 0.15s;
}
.sw:hover:not(:disabled) { border-color: #fff9; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.sw.taken, .sw:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  filter: grayscale(20%);
}
.sw.taken:hover, .sw:disabled:hover {
  border-color: transparent;
}
.sw-x {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 4px #000, 1px 1px 2px #000, -1px -1px 2px #000;
  pointer-events: none;
  user-select: none;
}
.cmrow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.preview { width: 64px; height: 40px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.pct { display: grid; grid-template-columns: 28px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; margin-top: 4px; }
.pct input[type=range] { padding: 0; accent-color: var(--gold); }
.dot { border-radius: 4px; }

/* compact attack preview */
.pl-odds { margin-top: 6px; padding: 5px 8px; }
.pl-head { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.pl-row { grid-template-columns: minmax(0, 1fr) 48px 34px 52px 56px; gap: 6px; padding: 1px 0; line-height: 1.25; font-size: 11.5px; }
.pl-cols { color: var(--muted); font-size: 10.5px; border-bottom: 1px solid var(--line); padding-bottom: 2px; margin-bottom: 2px; }
.pl-cols span:nth-child(n+3) { text-align: right; }
.pl-loss.you { color: #f0a0a0; }
.pl-loss.them { color: #8fc8ff; }
.pl-label { grid-column: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar { height: 6px; }
.pl-loss { grid-column: auto; font-size: 11px; margin-top: 0; text-align: right; }

/* ---- tutorial ---- */
.tutorial-banner { display: none; }
body.practicing .tutorial-banner { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 210; justify-content: center; flex-wrap: wrap; gap: 4px 16px; padding: 6px 12px; background: #302313; border-bottom: 1px solid var(--gold); color: var(--gold2); font-size: 12px; pointer-events: none; }
.tutorial { position: fixed; left: 12px; bottom: 70px; z-index: 150; display: flex; flex-direction: column; width: min(400px, calc(100vw - 24px)); max-height: 46vh; padding: 16px; border: 2px solid var(--gold); border-radius: 10px; background: #101726fa; box-shadow: 0 8px 30px #0008; }
.tutorial > :not(#tutBody) { flex-shrink: 0; }
#tutBody { overflow-y: auto; min-height: 0; }
body.practicing #cinema { padding-top: 54px; }
.tutorial h2 { font: 600 20px var(--serif); color: var(--gold2); margin: 6px 0; }
.tutorial p { margin: 8px 0; }
body.practicing #delGame, body.practicing #strip, body.practicing #gameTutorial,
body.practicing #oSurrender, body.practicing #oUnlock { display: none !important; }
@media (max-width: 900px) {
  .tutorial { bottom: 54px; max-height: 36vh; padding: 10px; }
}

.lobbywrap { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 16px; }
.lobbyside, .lobbymap { min-width: 0; }
.lobby-panel, .lobby-settings-section { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.lobby-panel { margin-bottom: 14px; }
.lobby-panel h4, .lobby-settings h4 { margin: 0 0 10px; }
.lobby-settings { display: grid; gap: 10px; margin: 20px 0; }
.lobby-settings-note { margin: -4px 0 2px; font-size: 12px; }
.lobby-settings-section summary { cursor: pointer; font-weight: 600; color: var(--gold2); }
.lobby-settings-section summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.lobby-settings-fields { display: grid; gap: 12px; padding-top: 14px; }
.lobby-settings-fields label { display: grid; gap: 5px; min-width: 0; }
.lobby-settings-fields input, .lobby-settings-fields select, .lobby-settings-fields textarea { width: 100%; min-width: 0; }
.lobby-settings-fields p { margin: 0; font-size: 12px; }
.lobby-settings-fields .lobby-checkbox { display: flex; align-items: center; gap: 8px; }
.lobby-checkbox input { width: auto; }
.lobby-timer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lobby-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lobby-start { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lobby-start p { font-size: 12px; }
#lbErr { margin-top: 6px; white-space: pre-wrap; }
#lbEventExample { scroll-margin-top: 24px; }
.lbmap .mapwrap { height: 60vh; min-height: 320px; }
@media (max-width: 800px) { .lobbywrap { grid-template-columns: minmax(0, 1fr); } }