:root {
  color-scheme: dark;
  --bg1: #08142b; --bg2: #11294f;
  --ink: #f4f7ff; --muted: #9db0d6; --line: rgba(255, 255, 255, .12);
  --land: #f4ecd9; --land-edge: #c9b994; --land-dim: #d6cdb8;
  --panel: rgba(255, 255, 255, .06);
  --stripw: clamp(240px, 19vw, 330px);
  --ok: #5ee59a; --warn: #ffb84d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  color: var(--ink); font-family: Nunito, system-ui, sans-serif; font-weight: 600;
  background: radial-gradient(ellipse at 50% 30%, var(--bg2), var(--bg1) 75%) fixed;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
h1, h2, p { margin: 0; }

.screen { height: 100dvh; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 22px; backdrop-filter: blur(6px); }

.primary, .ghost, .icon-btn {
  border-radius: 14px; padding: 11px 20px; font-weight: 800; transition: transform .12s, background .2s, opacity .2s;
}
.primary { background: linear-gradient(180deg, #4fb0ff, #2481e6); box-shadow: 0 6px 20px rgba(36, 129, 230, .4); font-size: 18px; }
.ghost, .icon-btn { background: rgba(255, 255, 255, .1); }
.primary:hover, .ghost:hover, .icon-btn:hover { transform: translateY(-1px); }
.primary:active, .ghost:active, .icon-btn:active { transform: translateY(1px); }

/* ---------- lobby ---------- */
#lobby { display: grid; place-items: center; padding: 20px; overflow: auto; }
.lobby-card { width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.lobby-card h1 { font-size: 40px; font-weight: 900; }
.lobby-card h2 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.sub { color: var(--muted); font-size: 17px; line-height: 1.4; }
.hint { color: var(--muted); font-size: 14px; }
.logo { width: 112px; height: 112px; display: block; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 44px rgba(79, 176, 255, .5); }
.lobby-players { display: flex; flex-direction: column; gap: 10px; }
.lp { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border-radius: 14px; padding: 8px 10px; }
.lp .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); flex: none; }
.lp input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 20px; font-weight: 800; padding: 6px 4px; }
.lp input::placeholder { color: rgba(255, 255, 255, .35); }
.seg { display: flex; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 3px; }
.seg button { background: transparent; border-radius: 8px; padding: 5px 12px; font-weight: 800; color: var(--muted); }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .18); color: var(--ink); }
.lp .rm { background: transparent; color: var(--muted); font-size: 20px; padding: 4px 8px; }

/* ---------- game ---------- */
#game { display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; }
.stage { display: grid; min-height: 0;
  grid-template-columns: minmax(0, 1fr) var(--stripw); }
.mapwrap { position: relative; min-width: 0; min-height: 0; }
.map { position: absolute; inset: 0; }
svg.worldmap { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
svg.worldmap:active { cursor: grabbing; }
.view { position: absolute; inset: 0; }
canvas.globe { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
canvas.globe.grabbing { cursor: grabbing; }
.viewswitch { position: absolute; top: 12px; left: 12px; z-index: 6; display: flex; gap: 2px; padding: 3px; border-radius: 12px;
  background: rgba(12, 24, 52, .85); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.viewswitch button { background: transparent; border-radius: 9px; padding: 6px 13px; font-weight: 800; font-size: 14px; color: var(--muted); }
.viewswitch button[aria-pressed="true"] { background: rgba(255, 255, 255, .18); color: var(--ink); }
.viewswitch button:not([aria-pressed="true"]):hover { color: var(--ink); }

/* the strip: scoreboard on top, the whole game below (newest first) */
.strip { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 12px 10px 4px; }
.tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: none; }
.tool { height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-weight: 800; font-size: 13px; white-space: nowrap; }
.tool:hover { background: rgba(255, 255, 255, .18); }
/* language switch (a native <select> rendered in the page's style; old .langswitch button rules are gone) */
.langswitch { position: relative; display: inline-flex; align-items: center; }
.langswitch select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 32px; padding: 0 32px 0 12px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .1); color: var(--ink); font: inherit;
  font-weight: 800; font-size: 13px; line-height: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%239db0d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
}
.langswitch select:hover { background-color: rgba(255, 255, 255, .18); }
.langswitch select:focus-visible { outline: 2px solid #4fb0ff; outline-offset: 2px; }
.langswitch option { background: #11294f; color: var(--ink); }
.langswitch.corner { position: absolute; top: 14px; right: 14px; z-index: 6; padding: 3px; border-radius: 12px; background: rgba(12, 24, 52, .7); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.langswitch.corner select { background-color: transparent; }
@media (max-width: 420px) {
  /* on a 390 px phone the lobby/right tool stays inside: cap the switch width and let long labels shrink */
  .langswitch select { max-width: 140px; }
  /* the language switch sits in the lobby's corner: a tall lobby card starts below it instead of under it */
  #lobby { padding-top: 64px; }
}
#lobby, #summary { position: relative; }
.board { display: flex; flex-direction: column; gap: 8px; flex: none; }
.brow { --c: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 8px 12px;
  border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.brow.turn { background: color-mix(in srgb, var(--c) 20%, transparent); border-color: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 28%, transparent); }
.brow .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.brow .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.brow .name { font-size: clamp(17px, 1.5vw, 22px); font-weight: 900; overflow-wrap: anywhere; }
.brow .cap { display: none; font-size: 12px; font-weight: 900; letter-spacing: .05em; color: var(--c); }
.brow.turn .cap { display: block; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.brow .num { font-size: 34px; font-weight: 900; line-height: 1; color: var(--c); text-shadow: 0 0 20px color-mix(in srgb, var(--c) 50%, transparent); }

.log { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.ent { --c: #fff; display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 3px 0 0 var(--c); flex: none; }
.ent .fi { width: 28px; height: 21px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.ent .t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.ent .c { font-weight: 800; font-size: 16px; }
.ent .by { font-size: 12px; font-weight: 700; color: var(--c); }
.ent .n { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, .3); }
.ent.new { background: rgba(255, 255, 255, .17); animation: chipin .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes chipin { from { transform: translateY(-14px) scale(.92); opacity: 0; } }
.empty { color: var(--muted); font-size: 14px; padding: 6px 4px; }

/* map details */
.worldmap .ocean { fill: url(#ocean); }
.worldmap .graticule { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: .7; vector-effect: non-scaling-stroke; }
.worldmap .c { fill: var(--land); stroke: var(--land-edge); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transition: fill .5s ease, stroke .3s; }
.worldmap .c.other { fill: var(--land-dim); }
.worldmap .c.owned { fill: var(--fill); stroke: rgba(255, 255, 255, .95); stroke-width: 1.3; cursor: pointer; }
.worldmap .dot { fill: var(--land); stroke: rgba(8, 20, 43, .6); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .4s; }
.worldmap .dot.owned { fill: var(--fill); stroke: #fff; stroke-width: 1.6; cursor: pointer; }
.worldmap .ripple { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; pointer-events: none; }
/* the newly named country blinks three times in one second */
.worldmap .c.fresh, .worldmap .dot.fresh { animation: blink3 1s linear 1; }
@keyframes blink3 {
  0%, 16.6% { filter: brightness(2.5) drop-shadow(0 0 7px #fff); }
  16.7%, 33.3% { filter: none; }
  33.4%, 50% { filter: brightness(2.5) drop-shadow(0 0 7px #fff); }
  50.1%, 66.6% { filter: none; }
  66.7%, 83.3% { filter: brightness(2.5) drop-shadow(0 0 7px #fff); }
  83.4%, 100% { filter: none; }
}
.worldmap .labels { pointer-events: none; }
.worldmap .labels text { text-anchor: middle; dominant-baseline: central; font-family: Nunito, sans-serif; font-weight: 900; fill: #10182f;
  paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: 3px; stroke-linejoin: round; }
.worldmap .dot:not(.owned) { display: none; }
.worldmap .c.target { fill: #ffd45e; stroke: #fff; stroke-width: 1.8; }
.worldmap .dot.target { display: block; fill: #ffd45e; stroke: #fff; stroke-width: 1.8; }

.dock { display: flex; flex-direction: column; gap: 4px; padding: 6px 16px 12px; background: rgba(0, 0, 0, .3); border-top: 1px solid var(--line); }
/* the strip under the map: what was heard, and what came of it. The only place for messages, so nothing covers the map */
.status { display: flex; align-items: center; gap: 8px; height: 46px; padding-left: 58px; }
.st-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.st-heard { font-size: 13px; line-height: 16px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-msg { font-size: 17px; line-height: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-msg.ok { color: var(--ok); } .st-msg.warn { color: var(--warn); }
/* every window and message has a × */
.x { width: 32px; height: 32px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--ink); font-size: 20px; line-height: 1; padding: 0; }
.x:hover { background: rgba(255, 255, 255, .26); }
.notice { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px;
  max-width: min(560px, 94vw); padding: 8px 8px 8px 16px; border-radius: 14px; background: rgba(12, 24, 52, .96); border: 1px solid var(--line);
  font-weight: 800; font-size: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.notice.warn { border-color: var(--warn); } .notice.ok { border-color: var(--ok); }
.controls { display: flex; align-items: center; gap: 10px; }
.cost { margin: 0; font-size: 11px; line-height: 14px; color: var(--muted); opacity: .6; text-align: center; font-weight: 600; user-select: none; }
.cost:empty { display: none; }
.sum .cost { margin-top: 10px; }
.mic, .icon-btn, .send, #finishBtn, #sayInput { height: 48px; }
.mic, .icon-btn { width: 48px; padding: 0; position: relative; display: grid; place-items: center; flex: none; }
.mic { --ring: rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px var(--ring); transition: .25s; }
.icon-btn { border-radius: 14px; background: rgba(255, 255, 255, .1); }
.ico { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-mic { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a4 4 0 0 0 4-4V6a4 4 0 0 0-8 0v5a4 4 0 0 0 4 4zm6-4a6 6 0 0 1-12 0H4a8 8 0 0 0 7 7.9V22h2v-3.1A8 8 0 0 0 20 11z'/%3E%3C/svg%3E"); }
.ico-sound { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E"); }
.ico-undo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E"); }
/* off means crossed out: the microphone when it is not listening, the speaker when the host is muted */
.mic:not(.on):not(.connecting)::after, .icon-btn[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 3px; margin: -1.5px 0 0 -15px; border-radius: 2px;
  background: #ff7b7b; transform: rotate(-45deg); box-shadow: 0 0 0 2px rgba(10, 20, 44, .9); pointer-events: none; }
.mic:not(.on):not(.connecting) .ico, .icon-btn[aria-pressed="false"] .ico { opacity: .55; }
.mic.on { --ring: var(--ok); background: rgba(94, 229, 154, .2); color: var(--ok); animation: listen 2s ease-in-out infinite; }
.mic.connecting { --ring: var(--warn); color: var(--warn); }
.mic.busy { --ring: var(--warn); color: var(--warn); }
@keyframes listen { 50% { box-shadow: 0 0 0 7px rgba(94, 229, 154, .25); } }
#sayForm { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; }
#sayInput { flex: 1; min-width: 0; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; font-size: 18px; outline: 0; }
#sayInput:focus { border-color: #4fb0ff; }
#sayInput.nudge { animation: nudge 1.2s ease-out 2; }
@keyframes nudge { 0%, 100% { box-shadow: none; border-color: var(--line); } 30% { box-shadow: 0 0 0 4px rgba(255, 184, 77, .45); border-color: var(--warn); } }
#sayInput::placeholder { color: rgba(255, 255, 255, .35); }
.send { background: rgba(255, 255, 255, .14); border-radius: 14px; padding: 0 20px; font-weight: 800; }
#finishBtn { padding: 0 20px; white-space: nowrap; }
/* how many countries are left: a pill at the bottom of the map */
.explore-back, .explore-name { display: none; }
#game.exploring { grid-template-rows: minmax(0, 1fr); }
#game.exploring .strip, #game.exploring .dock, #game.exploring .counter, #game.exploring .viewswitch { display: none; }
#game.exploring .stage { display: block; position: relative; }
#game.exploring .mapwrap { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
#game.exploring .explore-back { display: block; position: absolute; top: 12px; right: 12px; z-index: 8; height: 48px; padding: 0 22px; border-radius: 14px;
  background: rgba(12, 24, 52, .92); border: 1px solid var(--line); font-weight: 900; font-size: 18px; }
#game.exploring .explore-back:hover { background: rgba(30, 50, 96, .95); }
#game.exploring .explore-name { display: flex; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8;
  padding: 9px 20px; border-radius: 99px; background: rgba(12, 24, 52, .92); border: 2px solid #ffd45e; font-weight: 900; font-size: 22px; white-space: nowrap; pointer-events: none; }
.explore-name .fi { width: 30px; height: 22px; border-radius: 4px; }
.counter { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; border-radius: 99px; background: rgba(12, 24, 52, .82); border: 1px solid var(--line); backdrop-filter: blur(4px);
  font-weight: 800; font-size: 16px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.counter i { display: block; width: 90px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.counter b { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #4fb0ff, #5ee59a); transition: width .6s cubic-bezier(.2, .8, .2, 1); }

.modal { position: absolute; inset: 0; background: rgba(4, 10, 24, .7); display: grid; place-items: center; z-index: 10; }
.modal .card { position: relative; background: #12234a; text-align: center; display: flex; flex-direction: column; gap: 18px; font-size: 22px; font-weight: 800; }
.modal .row { display: flex; gap: 12px; justify-content: center; }
.corner-x { position: absolute; top: 10px; right: 10px; }
.modal .jcard { width: min(760px, 94vw); max-height: min(86dvh, 760px); gap: 10px; text-align: left; font-size: 16px; font-weight: 700; }
.jhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jhead h2 { font-size: 22px; font-weight: 900; letter-spacing: 0; text-transform: none; color: var(--ink); }
.jnote { color: var(--muted); font-size: 14px; line-height: 1.35; }
.jtools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jcheck { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.jcheck input { width: 18px; height: 18px; accent-color: #4fb0ff; }
.jtools .ghost { padding: 8px 16px; font-size: 15px; }
.jlist { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 120px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.jrow { display: grid; grid-template-columns: 64px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); font-size: 15px; line-height: 1.3; }
.jrow time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.jrow.warn { background: rgba(255, 184, 77, .16); box-shadow: inset 3px 0 0 var(--warn); }
.jrow.error { background: rgba(255, 107, 107, .18); box-shadow: inset 3px 0 0 #ff6b6b; }
.jt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.jt small { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* ---------- summary ---------- */
#summary { overflow: auto; }
.sum { width: min(1180px, 100%); margin: 0 auto; padding: 28px 20px 48px; display: flex; flex-direction: column; gap: 18px; }
.sum header { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.sum h1 { font-size: 40px; font-weight: 900; }
.winner { font-size: 34px; font-weight: 900; color: #ffd45e; text-shadow: 0 0 30px rgba(255, 212, 94, .45); }
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pcard { --c: #fff; border-radius: 20px; padding: 18px 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 28%, transparent), var(--panel) 60%);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); display: flex; flex-direction: column; gap: 8px; position: relative; }
.pcard.win::after { content: "🏆"; position: absolute; right: 16px; top: 12px; font-size: 32px; }
.pcard .who { font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 9px; }
.pcard .who .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.pcard .big { font-size: 64px; font-weight: 900; color: var(--c); line-height: 1; }
.pcard .big small { font-size: 18px; color: var(--muted); font-weight: 800; margin-left: 6px; }
.pcard dl { margin: 0; display: grid; gap: 6px; font-size: 15px; }
.pcard dt { color: var(--muted); font-weight: 700; }
.pcard dd { margin: 0; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.pcard dd .fi { width: 22px; height: 16px; border-radius: 3px; }
.sum-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.sum-map { padding: 8px; aspect-ratio: 2 / 1; position: relative; }
.sum-map[data-view="globe"] { aspect-ratio: 1.5 / 1; }
.sum-map .map { position: absolute; inset: 8px; }
.sum-continents { display: flex; flex-direction: column; gap: 10px; }
.sum h2, .sum summary { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.bar-row { white-space: nowrap; display: grid; grid-template-columns: 150px 1fr 52px; gap: 10px; align-items: center; font-weight: 800; font-size: 15px; }
.bar { display: flex; height: 14px; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.bar i { display: block; height: 100%; background: var(--c); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.bar-row span:last-child { color: var(--muted); text-align: right; }
.missing summary { cursor: pointer; }
.missing .grp { margin-top: 14px; }
.missing .grp h3 { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: var(--muted); }
.missing .list { display: flex; flex-wrap: wrap; gap: 6px; }
.missing .hint { margin-top: 10px; }
.missing .list .miss { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--ink);
  font-size: 14px; font-weight: 700; transition: background .15s, transform .1s, opacity .2s; }
.missing .list .miss:hover { background: rgba(255, 255, 255, .2); transform: translateY(-1px); }
.missing .list .miss.seen { opacity: .55; }
.missing .list .miss.seen::after { content: "✓"; color: var(--ok); font-weight: 900; }
.missing .fi { width: 20px; height: 15px; border-radius: 3px; }
.sum-actions { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- other screens: portrait tablet / phone, small landscape ---------- */
@media (max-aspect-ratio: 1/1) {
  /* scoreboard on top as a row of chips, the map across the full width, the whole game as a list below it */
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .strip { display: contents; }
  .tools { grid-row: 1; padding: 6px 10px 0; }
  .board { grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px 10px 4px; }
  .mapwrap { grid-row: 3; aspect-ratio: 2.2 / 1; width: 100%; min-height: 0; }
  .mapwrap[data-view="globe"] { aspect-ratio: 1.3 / 1; }
  .brow { flex: 1 1 auto; grid-template-columns: auto auto auto; justify-content: space-between; padding: 6px 12px; border-radius: 99px; }
  .brow .num { font-size: 22px; }
  .brow .cap { display: none !important; }
  .log { grid-row: 4; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: min-content; gap: 6px;
    overflow-y: auto; flex: none; padding: 8px 10px 10px; }
  .log .empty { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .sum-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dock { padding: 4px 10px 10px; }
  .status { height: 62px; padding-left: 0; }
  .st-msg { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; line-height: 20px; }
  .controls { flex-wrap: wrap; gap: 8px; }
  #sayForm { flex: 1 1 120px; }
  #finishBtn { flex: 1 1 100%; order: 9; height: 44px; }
  .viewswitch { top: 8px; left: 8px; }
  .viewswitch button { padding: 5px 11px; font-size: 13px; }
  .counter { font-size: 14px; padding: 5px 12px; bottom: 8px; }
  #game.exploring .explore-name { bottom: 58px; }
  .counter i { width: 60px; }
  .zoom-reset { bottom: 8px; right: 8px; padding: 6px 10px; font-size: 13px; }
  .lobby-card h1 { font-size: 32px; }
  .lp { flex-wrap: wrap; }
  .lp input { flex: 1 1 140px; }
  .sum { padding: 18px 12px 36px; }
  .sum h1 { font-size: 30px; }
  .winner { font-size: 26px; }
  .bar-row { grid-template-columns: 112px 1fr 46px; font-size: 13px; }
  .pcard .big { font-size: 48px; }
}
@media (max-width: 520px) {
  .send { font-size: 0; width: 48px; padding: 0; }
  .send::before { content: "➤"; font-size: 18px; }
}
/* landscape phones and short windows: a narrower, tighter strip */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
  :root { --stripw: 210px; }
  .strip { gap: 8px; padding: 8px 8px 6px 2px; }
  .board { gap: 5px; }
  .brow { padding: 4px 10px; border-radius: 12px; }
  .brow .name { font-size: 15px; }
  .brow .num { font-size: 22px; }
  .brow .cap { display: none !important; }
  .ent { padding: 4px 8px 4px 10px; }
  .ent .c { font-size: 14px; }
  .dock { padding: 4px 10px 6px; gap: 2px; }
  .mic, .icon-btn, .send, #finishBtn, #sayInput { height: 40px; }
  .mic, .icon-btn { width: 40px; }
  .status { height: 40px; padding-left: 50px; }
  .st-heard { font-size: 12px; line-height: 14px; }
  .st-msg { font-size: 15px; line-height: 18px; }
}

/* ---------- voice: confirm, enrollment, mic states ---------- */
.mic.on.hear { animation: hear .9s ease-in-out infinite; }
@keyframes hear { 50% { box-shadow: 0 0 0 10px rgba(94, 229, 154, .35); } }
.mic.error { --ring: #ff6b6b; }

.modal.fixed { position: fixed; }

.zoom-reset { position: absolute; right: 12px; bottom: 12px; z-index: 4; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 15px;
  background: rgba(12, 24, 52, .85); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.zoom-reset:hover { background: rgba(30, 50, 96, .9); }

/* ---------- speech: the game's server or the visitor's agent wallet (BYOA); in the lobby and in the «🎙» window ---------- */
.tool-ico { display: inline-grid; place-items: center; padding: 0 10px; }
.tool-ico .ico { width: 17px; height: 17px; }
.speechset { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lobby-card .speechset { padding-top: 14px; border-top: 1px solid var(--line); }
.sp-head { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.sp-seg { width: min(460px, 100%); }
.sp-seg button { flex: 1 1 0; min-height: 40px; padding: 6px 10px; font-size: 15px; line-height: 1.2; }
.sp-wallet { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 460px; }
.sp-connect { padding: 9px 20px; font-size: 16px; }
.sp-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
a.sp-connect { color: var(--ink); text-decoration: none; display: inline-block; }
.sp-connect[disabled] { opacity: .55; cursor: default; transform: none; }
.sp-note { font-size: 14px; line-height: 1.35; color: var(--muted); font-weight: 700; }
.sp-note.ok { color: var(--ok); } .sp-note.warn { color: var(--warn); }
.sp-note a { color: #8fd0ff; }
.sp-get { margin-top: 2px; } .sp-get a { font-weight: 800; text-decoration: none; } .sp-get a:hover { text-decoration: underline; }
.modal .spcard { width: min(520px, 94vw); padding: 26px 20px 22px; font-size: 16px; font-weight: 700; gap: 10px; }

/* «Agent wallet» in the header: connected / not connected, and one click to disconnect (the same on every BYOA site) */
.corner-bar { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; }
.corner-bar .langswitch.corner { position: static; }
.walletchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 0 11px; border-radius: 12px; font-size: 13px; font-weight: 800; white-space: nowrap;
  background: rgba(12, 24, 52, .7); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.walletchip[hidden] { display: none; }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; background: #7d8aa6; flex: none; }
.walletchip[data-state="on"] .wc-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(80, 220, 140, .18); }
.walletchip[data-state="wait"] .wc-dot { background: var(--warn); }
.wc-name { color: var(--ink); }
.wc-state { color: var(--muted); font-weight: 700; }
.walletchip[data-state="on"] .wc-state { color: var(--ok); }
.wc-btn { height: 24px; margin-left: 2px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .12); font-weight: 800; font-size: 12px; color: var(--ink); }
.wc-btn:hover { background: rgba(255, 255, 255, .22); }
.wc-btn:focus-visible { outline: 2px solid #4fb0ff; outline-offset: 2px; }
.tools .walletchip { background: rgba(255, 255, 255, .08); }
@media (max-width: 560px) { .wc-name { display: none; } .walletchip { padding-left: 9px; } }