/* Zoomandos — mobile first. Colours are tokens; dark is the default, light follows the OS setting. */
:root {
  --bg: #1b2119;
  --panel: #262f23;
  --panel-2: #313c2d;
  --fg: #ecebdc;
  --muted: #a9b39f;
  --accent: #e0a03a;
  --good: #57c878;
  --bad: #e5574f;
  --team-1: #3b82f6;
  --team-2: #ef4444;
  --team-3: #f59e0b;
  --team-4: #a855f7;
  --radius: 12px;
  --gap: 12px;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); /* (--safe-area-inset-*: set by Capacitor's system bars handling in the Android app, where the WebView may not know env()) */
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)); /* (a phone held sideways: the camera island or the rounded corners at the left/right edge) */
  --safe-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f1eee2; --panel: #fffdf5; --panel-2: #e8e3d0; --fg: #23301f; --muted: #66705e;
  }
}
:root[data-theme="light"] { --bg: #f1eee2; --panel: #fffdf5; --panel-2: #e8e3d0; --fg: #23301f; --muted: #66705e; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } /* no page zoom: only the board canvas zooms (it handles its own pinch, touch-action: none) */
#app { height: 100%; }
.router-root { height: 100%; }
.boot { padding: 24px; color: var(--muted); }
h1, h2, h3 { margin: 0 0 var(--gap); line-height: 1.15; }
button, select, input { font: inherit; color: inherit; }

/* ---- buttons ---- */
.btn { min-height: 44px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent;
  background: var(--panel-2); cursor: pointer; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #241a05; font-weight: 700; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: .85rem; }
.btn.icon { min-width: 44px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* instant tooltips: one floating box positioned by assets/js/ui/tooltip.js (flips and clamps to the viewport) */
.tooltip { position: fixed; z-index: 1000; width: max-content; max-width: min(260px, 70vw); padding: 5px 9px; border-radius: 6px; background: #11160f; color: #f1eee2;
  font-size: .8rem; font-weight: 500; line-height: 1.25; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
/* E-54: a plain text toggle ("Filter", "Advanced game settings") — not a boxed button. */
.btn.link { min-height: 0; padding: 4px 0; background: none; border: none; color: var(--accent); text-decoration: underline;
  font-size: .9rem; justify-self: start; }

/* ---- home ---- */
.home { --home-pad: 16px; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; /* never drags sideways or bounces: nothing on a page is wider than the page */ padding: calc(var(--safe-top) + 20px) var(--home-pad) calc(var(--safe-bottom) + 20px); }
.home-inner { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* the launch lobby's Back / Play row stays at the bottom of the screen while the rest of the page scrolls */
.sticky-actions { position: sticky; bottom: calc(-1 * (var(--safe-bottom) + 20px)); /* sticks to the scroller's content edge, so cancel .home's bottom padding to reach the screen edge */ z-index: 5; margin: 0 calc(-1 * var(--home-pad)) calc(-1 * (var(--safe-bottom) + 20px)); /* (side margins = the page's padding, bottom = into the padding: at the end of the page the row sits exactly where it sticks while scrolling) */ padding: 10px var(--home-pad) calc(var(--safe-bottom) + 12px); background: var(--bg, var(--panel-2)); }
.sticky-actions.floating { box-shadow: 0 -8px 12px -6px rgba(0,0,0,.35); } /* only while more page is hidden below the row */
.hero { text-align: center; padding: 8px 0 4px; }
.hero h1 { font-size: 2rem; margin-top: 18px; }
.hero p { color: var(--muted); margin: 0 0 14px; }
.card { background: var(--panel); border-radius: var(--radius); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 auto; }
/* E-59: bottom-align a row's items on their own baseline instead of centring against a taller label+select block. */
.row.align-end { align-items: flex-end; }
label.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; color: var(--muted); font-size: .9rem; }
select, input[type=text], input[type=email], input[type=password] { max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid transparent; }
.game-list { display: grid; gap: 8px; }
.game-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; cursor: pointer; }
.game-item small { color: var(--muted); }
/* a mission of a campaign: map, briefing and the start button on one card */
.mission-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--panel-2); border-radius: 10px; }
.mission-card canvas { flex: none; border-radius: 8px; max-width: 120px; height: auto; }
.mission-body { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.mission-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; width: 100%; }
.mission-card.locked { opacity: .55; }
.mission-card.cleared { border-left: 4px solid var(--good); }
.mission-card.current { outline: 2px solid var(--accent); }
.mission-card .story-text { margin: 0; }
@media (max-width: 520px) { .mission-card { flex-direction: column; } }
.pill { padding: 2px 8px; border-radius: 999px; background: var(--panel); font-size: .8rem; color: var(--muted); }
.guest-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: .9rem; }
.guest-hint[hidden] { display: none; }
.guest-hint .grow { flex: 1 1 200px; }
.pill.ready { background: var(--accent); color: #241a05; font-weight: 700; white-space: nowrap; display: inline-block; } /* (the host sees at a glance who is ready) */
.pill.live { color: #1a2a13; background: var(--good); }
.lang { position: fixed; top: calc(var(--safe-top) + 8px); right: 8px; display: flex; gap: 4px; z-index: 5; }
.lang button { min-width: 44px; min-height: 36px; }
/* E-53: shared back/home control, top-right on every screen except the start page and the running game. */
.shell-bar { position: fixed; top: calc(var(--safe-top) + 8px); right: 8px; z-index: 5; }

/* ---- game screen ---- */
.game { height: 100%; background: var(--panel); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.stage { grid-column: 1; grid-row: 1 / -1; } /* the board fills the whole screen; the two bars lie on top of it as cards (task 1858, owner 2026-10-16) */
.topbar { position: relative; z-index: 40; grid-column: 1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; margin: calc(var(--safe-top) + 8px) calc(var(--safe-right) + 8px) 0 calc(var(--safe-left) + 8px); padding: 6px 8px; border-radius: 18px; }
.topbar, .game > .bottom { background: color-mix(in srgb, var(--panel) 30%, transparent); border: 1px solid color-mix(in srgb, var(--panel-2) 80%, transparent); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
/* what lies on a card must stand out from it: buttons and boxes a shade darker than the card, with a thin edge (the card itself stays the light panel colour) */
/* the bar itself is see-through, so the text on it sits on cards of its own (the buttons and the clock/score pills have theirs already) */
.topbar .banner, .topbar .hpbars { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.topbar .banner { flex: 0 1 auto; margin-right: auto; } /* (the card hugs the text; the free room stays to its right as before) */
.topbar .hpbars:empty, .topbar .banner:empty { display: none; }
.topbar .btn:not(.primary):not(.active), .game > .bottom .btn:not(.primary):not(.active) { background: color-mix(in srgb, var(--panel-2) 86%, var(--fg)); border-color: color-mix(in srgb, var(--fg) 18%, transparent); }
.game > .bottom .btn.primary.idle { background: color-mix(in srgb, var(--panel-2) 86%, var(--fg)); } /* (keeps its amber edge) */
.game > .bottom .cardbox { background: color-mix(in srgb, var(--panel-2) 55%, var(--panel)); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); } /* (light, so the text on it reads well) */
.game > .bottom .chip:not(.ability):not(.warn) { background: color-mix(in srgb, var(--panel-2) 86%, var(--fg)); border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); }
.game > .bottom .cardbox .stats, .game > .bottom .cardbox .info, .game > .bottom .cardbox .pill { color: color-mix(in srgb, var(--muted) 62%, var(--fg)); } /* the grey text of the animal card, darker */
/* the settings (sound, help, fit, speed, tilt-shift, pixel-tiles): one dropdown behind the "more" button on every screen size (owner 2026-10-01) */
.topbar-menu { display: none; flex-direction: column; gap: 4px; position: absolute; top: 100%; right: 8px; margin-top: 4px; width: max-content; max-width: min(380px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--panel-2); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.4); padding: 6px; z-index: 30; }
.topbar-menu.open { display: flex; }
.topbar-menu .volume-box { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px; min-width: 190px; }
.topbar-menu .volume-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.topbar-menu .volume-row[hidden] { display: none; }
.topbar-menu .volume-row input[type=range] { width: 100%; }
.topbar-menu .btn.icon { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; white-space: normal; }
.topbar-menu .btn.icon::after { content: attr(data-tip); font-size: 14px; font-weight: 400; } /* every entry says what it is, next to its icon (the text is the button's tooltip) */
.topbar-more-btn { display: inline-flex; }
.banner { flex: 1 1 40px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.banner .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.cp { padding: 4px 10px; border-radius: 999px; background: var(--panel-2); font-variant-numeric: tabular-nums; }
.stage { position: relative; min-height: 0; background: #0f140e; }
.hpbars { display: flex; gap: 10px; align-items: center; }
.hpgroup { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px 2px 6px; border: 2px solid var(--group); border-radius: 999px; }
.hpgroup .grp { font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 6px; background: var(--group); color: #fff; }
.alliance-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; font-size: 13px; }
.alliance-tag { padding: 2px 10px; border-radius: 999px; border: 2px solid var(--group); }
.alliance-tag b { color: #fff; background: var(--group); border-radius: 6px; padding: 0 5px; }
.pill.group-pill { background: var(--group); color: #fff; font-weight: 700; }
select.group-sel-colored { border: 2px solid var(--group); font-weight: 700; }
.hpteam { display: inline-flex; align-items: center; gap: 2px; }
.hpteam .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--team); margin-right: 3px; }
.hpteam .dot.done { width: 14px; height: 14px; line-height: 14px; text-align: center; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000; }
.hpbar { display: block; width: 6px; height: 14px; border-radius: 2px; background: rgba(0,0,0,.18); }
.hpbar.on { background: var(--team); }
.hpbar.blink { animation: hpblink .7s steps(2, jump-none) infinite; }
@keyframes hpblink { 50% { opacity: .15; } }
.stage.loading canvas, .stage.loading .tilt-shift, .stage.loading .rain-fx, .stage.loading .snow-fx, .stage.loading .tint-fx { visibility: hidden; }
/* snow (the weather): a pale wash and three layers of falling flakes (far = small and slow, near = big and faster). Each layer is a tall strip with a tiled picture that slides down by exactly one tile
   and starts over, so the fall never shows a seam; moved by the compositor like the rain. */
.snow-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: rgba(226, 236, 246, .14); }
.snow-fx i { position: absolute; left: 0; right: 0; top: -256px; bottom: 0; will-change: transform; animation: snow-fall linear infinite; }
.snow-fx .far { --tile: 128px; background-size: 128px 128px; animation-duration: 9s; opacity: .7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='10' cy='12' r='1.2' opacity='0.8'/%3E%3Ccircle cx='44' cy='40' r='1' opacity='0.7'/%3E%3Ccircle cx='90' cy='22' r='1.3' opacity='0.8'/%3E%3Ccircle cx='116' cy='70' r='1' opacity='0.7'/%3E%3Ccircle cx='30' cy='86' r='1.2' opacity='0.8'/%3E%3Ccircle cx='70' cy='100' r='1' opacity='0.7'/%3E%3Ccircle cx='104' cy='120' r='1.2' opacity='0.8'/%3E%3Ccircle cx='58' cy='60' r='1' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"); }
.snow-fx .mid { --tile: 192px; background-size: 192px 192px; animation-duration: 6.5s; opacity: .85; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='20' cy='14' r='1.8' opacity='0.85'/%3E%3Ccircle cx='84' cy='36' r='1.5' opacity='0.8'/%3E%3Ccircle cx='150' cy='20' r='1.9' opacity='0.85'/%3E%3Ccircle cx='120' cy='90' r='1.6' opacity='0.8'/%3E%3Ccircle cx='40' cy='110' r='1.8' opacity='0.85'/%3E%3Ccircle cx='170' cy='140' r='1.5' opacity='0.8'/%3E%3Ccircle cx='96' cy='160' r='1.9' opacity='0.85'/%3E%3Ccircle cx='14' cy='170' r='1.5' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E"); }
.snow-fx .near { --tile: 256px; background-size: 256px 256px; animation-duration: 4.5s; opacity: .9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='20' r='2.8' opacity='0.9'/%3E%3Ccircle cx='170' cy='50' r='2.4' opacity='0.85'/%3E%3Ccircle cx='100' cy='110' r='3' opacity='0.9'/%3E%3Ccircle cx='222' cy='140' r='2.5' opacity='0.85'/%3E%3Ccircle cx='60' cy='180' r='2.8' opacity='0.9'/%3E%3Ccircle cx='190' cy='220' r='2.4' opacity='0.85'/%3E%3Ccircle cx='130' cy='240' r='3' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes snow-fall { from { transform: translateY(0); } to { transform: translateY(var(--tile)); } }
@media (prefers-reduced-motion: reduce) { .snow-fx i { animation: none; } }
/* heatwave and flood: a colour wash over the board (the heat also shimmers slowly) */
.tint-fx { position: absolute; inset: 0; pointer-events: none; }
.tint-fx.heatwave { background: rgba(255, 170, 70, .13); animation: heat-shimmer 5s ease-in-out infinite; }
.tint-fx.flood { background: rgba(70, 110, 150, .16); }
.tint-fx.frost { background: rgba(170, 215, 255, .14); }
@keyframes heat-shimmer { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tint-fx.heatwave { animation: none; } }
/* lightning (thunderstorm): a white flash that fades out, played again for every strike (game.js #flash) */
.flash-fx { position: absolute; inset: 0; pointer-events: none; background: rgba(245, 248, 255, .75); opacity: 0; }
.flash-fx.on { animation: lightning-flash .7s ease-out; }
.bolt { position: absolute; width: 0; height: 0; pointer-events: none; animation: bolt-strike .8s ease-out forwards; }
.bolt svg { position: absolute; left: calc(-40px * var(--k)); top: calc(-600px * var(--k)); width: calc(80px * var(--k)); height: calc(600px * var(--k)); filter: drop-shadow(0 0 6px #bcd7ff) drop-shadow(0 0 14px #7fb0ff); }
.bolt i { position: absolute; left: calc(-45px * var(--k)); top: calc(-22px * var(--k)); width: calc(90px * var(--k)); height: calc(44px * var(--k)); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.95), rgba(160,200,255,.5) 45%, transparent 70%); }
@keyframes bolt-strike { 0% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: .35; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lightning-flash { 0% { opacity: .9; } 12% { opacity: .2; } 22% { opacity: .7; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash-fx.on { animation-duration: .3s; } }
/* rain (the game option): a grey-blue wash plus three layers of tiled streaks (far = small and faint, near = long and bright). Each layer is a tall
   tiled picture that a CSS transform slides down by exactly one tile per loop, so it repeats seamlessly and runs on the compositor: no script, no
   repaint, the board canvas stays idle. Above the tilt-shift on purpose (its backdrop blur would re-render under moving rain every frame). */
.rain-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: rgba(38, 52, 72, .2); }
.rain-fx i { position: absolute; left: 0; right: 0; top: -256px; bottom: 0; will-change: transform; animation: rain-fall linear infinite; }
.rain-fx .far  { --tile: 128px; background-size: 128px 128px; animation-duration: 1.1s; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cg stroke='%23dbe8f5' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M12 6l-2 9M46 22l-2 9M90 10l-2 9M120 40l-2 9M30 58l-2 9M70 66l-2 9M106 84l-2 9M14 100l-2 9M56 108l-2 9M88 118l-2 9M118 112l-2 9M38 84l-2 9'/%3E%3C/g%3E%3C/svg%3E"); }
.rain-fx .mid  { --tile: 192px; background-size: 192px 192px; animation-duration: .8s; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg stroke='%23e6f0fa' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M20 10l-4 16M80 30l-4 16M150 14l-4 16M120 76l-4 16M40 96l-4 16M174 110l-4 16M96 136l-4 16M14 150l-4 16M148 164l-4 16'/%3E%3C/g%3E%3C/svg%3E"); }
.rain-fx .near { --tile: 256px; background-size: 256px 256px; animation-duration: .6s; opacity: .42; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg stroke='%23f2f8ff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M30 14l-4 18M170 40l-4 18M100 100l-4 18M222 130l-4 18M60 170l-4 18M190 200l-4 18M130 220l-4 18M20 110l-4 18'/%3E%3C/g%3E%3C/svg%3E"); }
.rain-fx .splash { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
/* a splash: a flat ring (the isometric ground is a 2:1 diamond) that opens and fades, with two tiny drops that jump up from its middle */
.rain-fx .splash span { position: absolute; left: -14px; top: -7px; width: 28px; height: 14px; box-sizing: border-box; border: 1.5px solid rgba(235, 245, 255, .85); border-radius: 50%; opacity: 0; transform: scale(.15); animation: rain-splash ease-out infinite; }
.rain-fx .splash span::before, .rain-fx .splash span::after { content: ''; position: absolute; left: 12px; top: 3px; width: 2px; height: 3px; border-radius: 50%; background: rgba(240, 248, 255, .9); animation: rain-drop ease-out infinite; animation-duration: inherit; animation-delay: inherit; }
.rain-fx .splash span::after { left: 16px; --dx: 7px; }
.rain-fx .splash span::before { --dx: -7px; }
@keyframes rain-splash { 0% { opacity: .9; transform: scale(.15); } 70% { opacity: .25; } 100% { opacity: 0; transform: scale(1); } }
@keyframes rain-drop { 0% { opacity: 1; transform: translate(0, 0); } 45% { opacity: .9; transform: translate(calc(var(--dx, 5px) * .6), -9px); } 100% { opacity: 0; transform: translate(var(--dx, 5px), 0); } }
@keyframes rain-fall { from { transform: translateY(0); } to { transform: translateY(var(--tile)); } }
@media (prefers-reduced-motion: reduce) { .rain-fx i, .rain-fx .splash span, .rain-fx .splash span::before, .rain-fx .splash span::after { animation: none; } }
.game-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0f140e; color: #dfe8d6; z-index: 5; }
.game-loading-text { font-size: 1.05rem; letter-spacing: .02em; }
.loading-bar { width: min(260px, 60%); height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.loading-bar-fill { height: 100%; width: 0; background: #8fcf5e; transition: width .15s linear; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
/* miniature "tilt-shift" look: two bands at the top/bottom of the board blur and saturate what's behind them, fading
   out toward the middle - a fixed camera trick (not tied to the isometric depth of any one tile), so it reads as a
   diorama without ever obscuring the playable board itself. */
.tilt-shift { position: absolute; inset: 0; pointer-events: none; }
/* the background tint is baked in (not left to whatever backdrop-filter happens to sample past the element's edge,
   which came out white in some desktop browsers vs. black on mobile) so the fade is the same dark vignette everywhere.
   Top and bottom are sized independently (game.js's #updateTiltShift): on a small phone screen the clear middle strip
   is already narrow, and the top band eats into the part of the board a player is actively looking at more than the
   bottom does, so it shrinks further there - see #updateTiltShift's docblock. */
.tilt-shift .band { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .3); }
.tilt-shift .band.top { top: 0; height: var(--ts-height-top, 30%); backdrop-filter: blur(var(--ts-blur-top, 5px)) saturate(1.35) contrast(1.06); -webkit-backdrop-filter: blur(var(--ts-blur-top, 5px)) saturate(1.35) contrast(1.06); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); }
.tilt-shift .band.bottom { bottom: 0; height: var(--ts-height-bottom, 30%); backdrop-filter: blur(var(--ts-blur-bottom, 5px)) saturate(1.35) contrast(1.06); -webkit-backdrop-filter: blur(var(--ts-blur-bottom, 5px)) saturate(1.35) contrast(1.06); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, transparent 100%); }
.toast { z-index: 11; position: absolute; left: calc((100% - var(--inset-right, 0px)) / 2); top: calc(var(--inset-top, 0px) + 12px); transform: translateX(-50%); max-width: 90%; padding: 8px 14px;
  background: rgba(20, 24, 18, .92); color: #fff; border-radius: 999px; pointer-events: none; font-size: .95rem; text-align: center; }
.game > .bottom { position: relative; z-index: 20; grid-column: 1; grid-row: 3; align-self: end; max-height: calc(100vh - var(--inset-top, 70px) - 12px); max-height: calc(100dvh - var(--inset-top, 70px) - 12px); overflow: hidden; margin: 0 calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px); padding: 8px; border-radius: 20px; display: flex; flex-direction: column; gap: 8px; }
.game > .bottom > * { flex: 0 0 auto; min-width: 0; }
.game > .bottom > .cardbox { flex: 0 1 auto; overflow-y: auto; } /* when the card is taller than the screen, the animal card scrolls and the buttons stay in view */
/* the animal card and the buttons are two separate blocks (owner 2026-10-01) */
.cardbox { background: var(--panel-2); border-radius: 12px; padding: 8px; }
.cardbox .unitcard.empty { padding: 4px 2px; }
.controls { display: grid; gap: 8px; }
.unitcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 48px; }
.unitcard.empty { grid-template-columns: 1fr; color: var(--muted); align-items: center; }
.unitcard img { width: 44px; height: 44px; object-fit: contain; background: var(--panel-2); border-radius: 10px; padding: 4px; }
.unitcard h3 { margin: 0; font-size: 1.05rem; }
.unitcard .stats { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.unitcard .info { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.hearts { letter-spacing: 1px; color: var(--bad); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chip { padding: 1px 8px; border-radius: 999px; background: var(--panel-2); font-size: .78rem; }
.chip.warn { background: #6b2b26; color: #ffd9d4; }
/* E-58: a highlighted but non-alarming note (e.g. "trophies need an account") — accent border, not an error colour. */
.callout { border-left: 4px solid var(--accent); background: var(--panel-2); }
.actions { display: flex; gap: 8px; }
.actions .btn { flex: 1; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 7, .7); padding: 16px; }
/* a dialog over the board lies between the cards, not under them (game.js sets the insets), and never gets taller than that space */
.game .overlay:not(.fixed) { z-index: 10; /* (over the rotate and map buttons) */ grid-template-rows: minmax(0, 1fr); padding: calc(var(--inset-top, 0px) + 8px) calc(var(--inset-right, 0px) + 12px) calc(var(--inset-bottom, 0px) + 8px) 12px; }
.game .overlay:not(.fixed) .dialog { max-height: 100%; min-height: 0; overflow-y: auto; box-sizing: border-box; }
.game .overlay.chat-dialog .dialog { display: flex; flex-direction: column; overflow: hidden; }
.game .overlay.chat-dialog .chat-list { flex: 1 1 auto; min-height: 60px; max-height: none; }
.game .overlay.welcome .dialog h2 { font-size: 1.3rem; }
.dialog { background: var(--panel); border-radius: var(--radius); padding: 20px; max-width: 360px; width: 100%; text-align: center; display: grid; gap: 12px; }
.dialog { position: relative; }
.dialog .next-mission-slot { display: contents; } /* (its button is a grid item of the dialog like the other buttons: full width; an empty slot takes no gap) */
.dialog h2 { font-size: 1.6rem; }
/* texts the campaign author wrote (briefing, debrief, message cards): a linebreak in the text is a line break on screen */
.story-text { white-space: pre-line; }
.campaign-choice { display: grid; gap: 6px; text-align: left; padding: 10px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); }
.campaign-choice .row { justify-content: flex-start; }
.dialog .dialog-close { position: absolute; top: 6px; right: 6px; min-width: 32px; min-height: 32px; padding: 0; background: none; color: var(--muted); font-size: 1.1rem; }
/* wide screens, and phones held sideways: the map on the left, the animal card and buttons on the right */
@media (min-width: 900px), (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .game { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) calc(340px + var(--safe-right)); }
  /* the board fills the window; the top bar and the sidebar float over it as cards, like on a phone (task 1858, owner 2026-10-16) */
  .topbar { grid-column: 1 / -1; grid-row: 1; margin: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) 12px calc(var(--safe-left) + 12px); }
  .game > .bottom { grid-column: 2; grid-row: 2; align-content: start; margin: 0 calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) 0; padding: 12px; min-height: 0; max-height: calc(100% - 12px); }
  .stage { grid-column: 1 / -1; grid-row: 1 / -1; }
  .game > .bottom { display: flex; flex-direction: column; gap: 8px; } /* a column, so the chat can sit at the very bottom: the Send button stays put whatever the card above shows */
  .bottom > * { flex-shrink: 0; }
  .undo-text { display: none; } /* the buttons share a 340 px column: undo is just its arrow (its tooltip says what it does) */
  .actions .undo-btn { flex: 0 0 auto; min-width: 44px; padding: 6px 10px; font-size: 1.15rem; line-height: 1; }
  /* the chat is a card of its own right above the sidebar card (its height is --side-h, set by game.js), opened and closed with the chat button of the top bar (owner 2026-10-16) */
  .game > .chat-side.open:not([hidden]) { display: flex; grid-column: 2; grid-row: 2; align-self: end; z-index: 25; margin: 0 calc(var(--safe-right) + 12px) calc(var(--side-h, 0px) + 20px) 0; padding: 12px; max-height: min(55%, 420px); border-radius: 20px; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid color-mix(in srgb, var(--panel-2) 80%, transparent); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
  /* a low window (game.js sets chat-tabs): while the chat is open it takes the place of the animal card; the sidebar card shrinks to the button row (undo, arrows, End turn) below it */
  .game.chat-tabs:has(> .chat-side.open) > .bottom > :not(.controls), .game.chat-tabs:has(> .chat-side.open) > .bottom .controls > :not(.actions) { display: none; }
  .game.chat-tabs > .chat-side.open:not([hidden]) { max-height: calc(100% - var(--side-h, 0px) - 20px); }
  .game > .chat-side { overflow: hidden; }
  .game > .chat-side .chat-list { min-height: 40px; background: color-mix(in srgb, var(--panel-2) 86%, var(--fg)); }
  .game > .chat-side .btn:not(.primary) { background: color-mix(in srgb, var(--panel-2) 86%, var(--fg)); border-color: color-mix(in srgb, var(--fg) 18%, transparent); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .game { grid-template-columns: minmax(0, 1fr) calc(300px + var(--safe-right)); }
  .game > .bottom { padding: 8px; gap: 6px; }
  .actions { gap: 6px; }
  .actions .btn, .actions .btn.step-btn { padding: 6px 8px; }
  .actions .btn.step-btn, .actions .undo-btn { min-width: 40px; }
}
@media (min-width: 900px) and (min-height: 521px) {
  .unitcard { grid-template-columns: 72px 1fr; }
  .unitcard img { width: 72px; height: 72px; }
}

/* ---- lobby ---- */
.invite-code { font-size: 2.2rem; font-weight: 800; letter-spacing: .25em; text-align: center; padding: 8px; background: var(--panel-2); border-radius: 10px; color: var(--fg); user-select: all; }
.game-item.open { opacity: .75; border: 1px dashed var(--muted); cursor: default; }
/* ---- campaign (E-50) ---- */
.game-item.locked { opacity: .55; cursor: default; }
.game-item.cleared { border-left: 4px solid var(--good); }
.pill.cleared { color: #1a2a13; background: var(--good); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.info { color: var(--muted); font-size: .9rem; margin: 0; }
.toast.fixed { position: fixed; z-index: 10; }
.home .toast, .home ~ .toast { position: fixed; top: calc(var(--safe-top) + 10px); }
input[readonly] { width: 100%; }
.cp.clock.urgent { background: var(--bad); color: #fff; }
label.check { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--fg); }
label.check input { width: 20px; height: 20px; }
.help-body { max-height: 88%; overflow-y: auto; text-align: left; max-width: 520px; }
.help-body h3 { margin: 12px 0 4px; }
.help-body .dialog-close { position: sticky; top: 0; justify-self: end; margin: -8px -8px -44px 0; z-index: 1; background: var(--panel); }
.help-body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.unitcard .note { color: var(--fg); font-weight: 600; white-space: pre-line; }
.cp { cursor: pointer; }
.cp.score { cursor: default; font-weight: 600; }
.sbars { display: inline-flex; gap: 6px; align-items: center; }
.sbar { position: relative; display: inline-block; width: 66px; height: 18px; border-radius: 9px; background: rgba(0,0,0,.4); overflow: hidden; border: 2px solid transparent; box-sizing: border-box; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .6s; opacity: .9; }
.sbar b { position: relative; display: block; font-size: .7rem; line-height: 14px; text-align: center; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.sbar.you { border-color: #fff; }
.chip.ability { background: #2f5d7a; color: #e6f4ff; }
label.check.small { font-size: .9rem; color: var(--muted); min-height: 28px; justify-content: center; }
label.check.small input { width: 18px; height: 18px; }
.banner .dot { width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: .7rem; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000; vertical-align: middle; }
.bestiary { display: grid; gap: 12px; }
.bestiary .unitcard { padding-bottom: 10px; border-bottom: 1px solid var(--panel-2); }
/* E-57: a small tile picture next to each terrain entry in the Encyclopedia */
.terrain-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.terrain-card { display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); border-radius: 12px; padding: 10px; }
.terrain-card .terrain-pic-box { height: 230px; display: flex; align-items: flex-end; justify-content: center; } /* room for the tallest picture (a mountain); every tile stands on the same line */
.terrain-card .terrain-pic { width: 150px; height: auto; flex: 0 0 auto; } /* all tile pictures are 264 px wide: the same width gives them all the same scale, the taller ones simply reach higher */
.terrain-card canvas { width: 80px; height: 80px; margin-bottom: 20px; }
.terrain-card h3 { margin: 0 0 4px; }
.terrain-card p { margin: 0 0 8px; }
.terrain-card .facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.terrain-card .facts .chip { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--panel); }
.terrain-item { display: flex; gap: 10px; align-items: flex-start; }
.terrain-item canvas { flex: 0 0 auto; border-radius: 6px; }
.map-preview { image-rendering: pixelated; border-radius: 8px; border: 2px solid var(--panel-2); max-width: 100%; }
.map-box { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.map-box .info { flex: 1 1 150px; }
.entry-card { text-align: center; }
.entry-card .entry-icon { font-size: 2.4rem; line-height: 1; }
.entry-card h2 { margin: 2px 0 0; }
.entry-card p.info { margin: 0 0 4px; }
.entry-card.disabled { opacity: .55; }
/* the two cards side by side share their rows (icon, heading, text, two buttons): a heading that wraps in one of them no longer pushes its buttons lower than the other's */
.entry-pair > .entry-card { display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 5); row-gap: 6px; align-content: start; }
.slots { display: grid; gap: 8px; }
.slot-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: var(--panel-2); border-radius: 10px; }
.slot-row b { min-width: 28px; }
.slot-row select, .slot-row input { flex: 1 1 120px; min-width: 0; }
.slot-row select.group-sel { flex: 0 0 60px; }
.slot-fill { flex: 1 1 120px; min-width: 0; } /* the "you" label takes the place of a select so the group picker of every row lines up on the right */
/* the pickers inside a row sit on --panel-2 like the row itself: darker (dark theme) or brighter (light theme) so they read as controls */
.segmented { display: inline-flex; max-width: 100%; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 12px; background: var(--panel-2); }
.segmented .seg { border: 0; border-radius: 10px; padding: 8px 14px; min-height: 40px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.segmented.compact .seg { padding: 4px 8px; min-height: 32px; font-size: .85rem; }
.map-switches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } /* teams and kind switch side by side (wrap only on a very narrow screen) */
.segmented .seg.active { background: var(--accent); color: #241a05; font-weight: 700; }
.fixed-wrap { display: inline-flex; cursor: not-allowed; }
.fixed-wrap select:disabled { pointer-events: none; } /* the hover (and its tooltip) goes to the wrapper */
select:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.6); background-image: none; }
.slot-row select, .game-item select { background: color-mix(in srgb, var(--panel-2), var(--bg) 65%); border-color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: pointer; }
.chat-list { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding: 8px 10px; background: var(--panel-2); border-radius: 10px; }
.chat-list:empty { display: none; }
.chat-side { display: none; flex-direction: column; min-width: 0; gap: 6px; background: var(--panel-2); border-radius: 12px; padding: 8px; }
.chat-side h3 { margin: 0; font-size: 1rem; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-head .chat-close { min-width: 32px; min-height: 32px; padding: 0; }
.chat-side .chat-list { background: var(--panel); flex: 1 1 auto; min-height: 80px; max-height: 200px; align-content: start; } /* the lines sit in a darker well so the box reads as a chat even when empty */
.chat-side .chat-list:empty { display: grid; }
.chat-side > * { min-width: 0; } /* (a grid column sized by its content pushed the right edge out of the padding) */
.chat-side .row { flex-wrap: nowrap; }
.chat-side .row input { flex: 1 1 0; background: var(--panel); border: 1px solid var(--muted); }
.chat-side .row .btn { flex: 0 0 auto; }
.chat-side .segmented { margin: 0; }
.chat-msg { font-size: .92rem; word-break: break-word; }
.chat-msg b { color: var(--muted); font-weight: 600; }
.chat-msg.allies { border-left: 3px solid #2f9e6f; padding-left: 6px; }
.chat-dialog .segmented { margin: 8px 0; }
.btn.icon.active { outline: 2px solid #ffd640; }
.open-game-row { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--panel-2); border-radius: 10px; }
.open-game-row .thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--panel); }
.open-game-row .thumb canvas { width: 100%; height: 100%; object-fit: cover; }
.open-game-row .info { flex: 1 1 auto; min-width: 0; }
.open-game-row .info small { display: block; color: var(--muted); }
.open-game-row .teams { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.minimap-box { position: absolute; z-index: 3; max-width: 42%; background: rgba(15, 20, 14, .55); border-radius: 8px; padding: 3px; touch-action: none; }
.minimap-box.pos-tl { left: calc(var(--safe-left) + 8px); top: calc(var(--inset-top, 0px) + 8px); } .minimap-box.pos-tr { right: calc(var(--inset-right, 0px) + 8px); top: calc(var(--inset-top, 0px) + 8px); }
.turn-btns { position: absolute; z-index: 3; right: calc(var(--inset-right, 0px) + 8px); bottom: calc(var(--inset-bottom, 0px) + 8px); display: flex; gap: 6px; }
.turn-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(15, 20, 14, .45); color: #fff; padding: 0; display: grid; place-items: center; cursor: pointer; opacity: .75; }
.turn-btn svg { display: block; }
.turn-btn:hover, .turn-btn:focus-visible { opacity: 1; background: rgba(15, 20, 14, .7); }
.minimap-box.pos-bl { left: calc(var(--safe-left) + 8px); bottom: calc(var(--inset-bottom, 0px) + 8px); } .minimap-box.pos-br { right: calc(var(--inset-right, 0px) + 8px); bottom: calc(var(--inset-bottom, 0px) + 56px); } /* above the turn buttons */
.mini-bar { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 3px; }
.mini-handle { flex: 1; min-height: 26px; display: grid; place-items: center; color: rgba(255,255,255,.75); cursor: grab; touch-action: none; user-select: none; letter-spacing: 2px; }
.mini-btn { min-width: 30px; min-height: 26px; border: 0; border-radius: 6px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; padding: 0 6px; }
.stage .minimap-box.folded canvas.minimap { display: none; }
.minimap-box.folded { padding: 2px; }
.stage .minimap-box canvas.minimap { position: static; inset: auto; width: auto; height: auto; max-width: 100%; display: block; border: 2px solid rgba(255,255,255,.6); border-radius: 6px; opacity: .92; image-rendering: pixelated; touch-action: none; cursor: pointer; }
.steps { text-align: left; margin: 0; padding-left: 22px; display: grid; gap: 8px; }

/* ---- compact unit card: icons in one row, the written details fold away (open by default on wide screens) ---- */
.uc-title { display: flex; align-items: center; gap: 6px; }
.uc-title h3 { flex: 1; min-width: 0; }
.uc-toggle { min-width: 36px; min-height: 32px; border: 0; border-radius: 8px; background: var(--panel-2); cursor: pointer; transition: transform .15s; }
.unitcard.open .uc-toggle { transform: rotate(180deg); }
.unitcard .stats { gap: 4px; align-items: center; margin-top: 2px; }
.unitcard .stat { white-space: nowrap; color: var(--fg); font-size: .9rem; cursor: help; }
.unitcard .stats .stat.chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; font-size: .85rem; background: color-mix(in srgb, var(--panel-2) 80%, var(--fg) 8%); } /* every strength is a chip: icon and number */
.unitcard .stats .chip { font-size: .72rem; }
.uc-more { display: none; margin-top: 4px; }
.unitcard.open .uc-more { display: block; }
.unitcard:not(.open) .stats .stat { display: none; } /* folded card: name and statuses only; hit points, walking, attacks, armour and sight show when it is opened */
.btn.unavailable { opacity: .5; cursor: help; }
.guide-backdrop { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; background: rgba(8, 10, 7, .6); } /* covers (and so blocks) the board */
.guide-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.guide-card p { margin: 0; line-height: 1.4; white-space: pre-line; }
.guide-card.with-portrait { grid-template-columns: 96px 1fr; align-items: start; column-gap: 14px; }
.guide-card.with-portrait .btn { grid-column: 1 / -1; }
.story-portrait { margin: 0; display: grid; justify-items: center; gap: 2px; }
.story-portrait img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.story-portrait figcaption { font-size: .8rem; opacity: .8; }
/* the two kinds of card a campaign mission opens with: the story (warm, parchment-like) and the objectives overview (cool, map-room) */
.guide-title { margin: 0; grid-column: 1 / -1; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.guide-card.story { border-color: #c79a4a; background: linear-gradient(180deg, color-mix(in srgb, #c79a4a 14%, var(--panel)), var(--panel)); }
.guide-card.story .guide-title { color: #c79a4a; }
.guide-card.story p { font-style: normal; font-size: 1.02rem; line-height: 1.5; }
.guide-card.story strong { color: var(--accent); }
.guide-card.objectives { border-color: #4aa8ff; background: linear-gradient(180deg, color-mix(in srgb, #4aa8ff 12%, var(--panel)), var(--panel)); }
.guide-card.objectives .guide-title { color: #4aa8ff; }
.objectives-body { display: grid; gap: 10px; justify-items: center; }
.stage .objectives-body canvas { position: relative; inset: auto; display: block; width: auto; height: auto; max-width: 100%; border-radius: 8px; touch-action: auto; } /* (.stage canvas would stretch it over the whole board) */
.obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.obj-row { display: flex; gap: 8px; align-items: flex-start; line-height: 1.3; }
.obj-row.locked { opacity: .65; }
.obj-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #1b1b1b; background: #ffd23f; border: 2px solid #1b1b1b; }
.obj-num.start { background: #fff; }
.obj-num.fail { background: #ff5a4a; color: #fff; }
.obj-dot { flex: none; width: 14px; height: 14px; margin: 4px 4px 0; border-radius: 3px; border: 2px solid #1b1b1b; }
.story-row { display: flex; gap: 12px; align-items: flex-start; }
.story-row .story-portrait img { width: 72px; height: 72px; }
@media (max-width: 480px) { .guide-card.with-portrait { grid-template-columns: 64px 1fr; } .story-portrait img { width: 64px; height: 64px; } }
.goals-btn { position: absolute; z-index: 5; left: calc(var(--safe-left) + 8px); top: calc(var(--inset-top, 0px) + 8px); display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border-radius: 20px; border: 2px solid var(--accent); background: var(--panel); color: inherit; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.goals-btn[hidden], .goals-panel[hidden] { display: none; }
.goals-btn.news { animation: goals-news 1.1s ease-in-out infinite; }
@keyframes goals-news { 50% { box-shadow: 0 0 0 5px rgba(255,214,64,.55); } }
.goals-panel { position: absolute; z-index: 7; left: 8px; top: calc(var(--inset-top, 0px) + 56px); width: min(360px, calc(100% - 16px)); max-height: calc(100% - var(--inset-top, 0px) - 72px); overflow: auto; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.goals-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.goals-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.goal { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.goal .goal-mark { width: 1.2em; text-align: center; flex: none; }
.goal.solved .goal-text { text-decoration: line-through; opacity: .65; }
.goal.solved .goal-mark { color: #6fdc8c; }
.goal.locked { opacity: .55; }
.goal.fresh { animation: goal-fresh 1.6s ease-out; }
@keyframes goal-fresh { from { background: rgba(255,214,64,.4); } to { background: transparent; } }
.goal small { opacity: .75; }
.goal .goal-needs { display: block; }
.goals-fail { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: 8px; }
.goal.fail .goal-mark { color: #ff9a7a; }
.abilities { display: flex; gap: 8px; flex-wrap: wrap; }
.abilities:empty { display: none; }
.abilities .btn { flex: 1 1 auto; min-height: 40px; }
.abilities .btn.split img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; }
.btn.active { background: #2f5d7a; color: #e6f4ff; }
.actions { align-items: stretch; }
.actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.actions .btn:not(.undo-btn) { flex: 1 1 0; min-width: 0; } /* "next animal" and "end turn" are the same size; the number is a badge, so the labels do not wrap */
.actions .btn.step-btn { flex: 0 0 auto; min-width: 48px; padding: 6px 12px; font-size: 1.05rem; line-height: 1; }
.btn-count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: .85em; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .topbar .btn.icon { min-width: 38px; min-height: 38px; padding: 4px; }
  .topbar .cp { padding: 3px 8px; font-size: .9rem; }
  .banner small { margin-left: 4px; }
  .banner .dot { margin-right: 4px; }
  .game > .bottom { gap: 6px; margin: 0 calc(var(--safe-right) + 6px) calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 6px); padding: 6px; border-radius: 18px; }
  .actions .btn { min-height: 44px; padding: 6px 10px; }
  label.check.small { min-height: 22px; font-size: .8rem; justify-content: flex-start; }
  .home { --home-pad: 10px; }
  .hero { padding-top: 34px; }
  .card { padding: 12px; }
  .row > * { min-width: 0; }
}
.help-body ul.log { margin: 0; padding-left: 22px; max-height: 170px; overflow-y: auto; display: grid; gap: 2px; font-size: .88rem; color: var(--muted); }
.game-item.turn { border-left: 4px solid var(--accent); }
.pill.turn { background: var(--accent); color: #241a05; font-weight: 700; }
.card-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 8px; border-top: 1px solid var(--panel-2); }
.overlay .dialog { max-height: 100%; overflow-y: auto; }
.hero-animals { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 6px; margin-bottom: 6px; }
.hero-animals img { width: 55px; height: 55px; object-fit: contain; background: var(--panel-2); border-radius: 12px; padding: 4px; }
@media (max-width: 520px) { .hero-animals img { width: 34px; height: 34px; padding: 3px; } }

/* E-52 (2026-09-26): Quick game + Multiplayer side by side once there's room; still stacks on phones. */
.entry-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 480px) { .entry-pair { grid-template-columns: 1fr 1fr; } }
.top-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* End turn / Ready: calm while commands are left, pulsing when there are none */
.btn.primary.idle { background: var(--panel-2); color: var(--fg); font-weight: 600; border-color: var(--accent); }
.btn.primary.pulse { animation: end-pulse 1.3s ease-in-out infinite; }
@keyframes end-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 160, 58, .75); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px rgba(224, 160, 58, 0); transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .btn.primary.pulse { animation: none; box-shadow: 0 0 0 3px rgba(224, 160, 58, .6); } }
.coach { position: absolute; left: 8px; right: calc(var(--inset-right, 0px) + 8px); top: calc(var(--inset-top, 0px) + 8px); z-index: 4; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: rgba(255, 253, 245, .96); color: #23301f; box-shadow: 0 2px 10px rgba(0,0,0,.35); font-size: .92rem; }
.coach[hidden] { display: none; }
.coach-text { flex: 1; }
.coach-close { border: 0; background: transparent; color: #66705e; min-width: 32px; min-height: 32px; font-size: 1rem; cursor: pointer; }
.scoretable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.scoretable th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.scoretable td { padding: 6px; border-top: 1px solid var(--panel-2); vertical-align: top; }
.scoretable .pts { font-weight: 800; color: var(--accent); }
.scorebox { display: grid; gap: 4px; }
.scorebig { font-size: 1.8rem; font-weight: 800; color: var(--accent); }

.matrix-scroll { overflow-x: auto; margin: 6px 0 12px; border: 1px solid var(--panel-2); border-radius: 8px; }
.matrix { border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.matrix th, .matrix td { padding: 4px 8px; border-bottom: 1px solid var(--panel-2); text-align: center; }
.matrix thead th { position: sticky; top: 0; background: var(--panel); cursor: help; font-size: 1rem; }
.matrix .rowhead, .matrix thead th:first-child, .matrix tfoot th { position: sticky; left: 0; background: var(--panel); text-align: left; font-weight: 600; z-index: 1; }
.matrix tbody tr:nth-child(even) { background: rgba(0,0,0,.03); }
.matrix td.gap { color: var(--accent); font-weight: 700; }
.sym { display: inline-block; min-width: 1.6em; text-align: center; }

.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.trophy { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--panel-2); border-radius: 8px; opacity: .55; }
.trophy.earned { opacity: 1; background: rgba(255, 210, 63, .12); }
.trophy .sym { font-size: 1.5rem; }
.btn.active { outline: 2px solid var(--accent); }

.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tilecard { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--panel-2); border-radius: 8px; }
.tilecard canvas { width: 100%; height: auto; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.tilepreview-box { overflow-x: auto; }
.tilepreview { max-width: 100%; height: auto; background: var(--panel-2); border-radius: 8px; }
.tileslider { display: grid; grid-template-columns: 4.5em 1fr 3em; gap: 6px; align-items: center; font-size: .8rem; }
.tileslider input { width: 100%; min-height: 0; }
.tilelog { max-height: 180px; overflow: auto; font-size: .72rem; background: var(--panel-2); padding: 6px; border-radius: 6px; white-space: pre-wrap; }

.decorcanvas-wrap { overflow: auto; background: var(--panel-2); border-radius: 8px; padding: 8px; }
.decorcanvas { touch-action: none; cursor: crosshair; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.decorpalette { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.decorsprite { padding: 2px; min-height: 0; border-radius: 6px; }
.decorsprite canvas { display: block; background: repeating-conic-gradient(#0002 0 25%, transparent 0 50%) 0 0 / 8px 8px; border-radius: 4px; }
.decorsprite.armed { outline: 3px solid var(--accent, #e0a03a); }
.decorcontrols { margin: 8px 0; display: grid; gap: 4px; max-width: 320px; }

.editor-scroll { overflow: auto; max-width: 100%; background: var(--panel-2); border-radius: 8px; padding: 4px; }
.editor-canvas { touch-action: none; display: block; margin: 0 auto; cursor: crosshair; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.btn.tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 0; }
.btn.tool.active, .btn.active { outline: 3px solid var(--accent, #e0a03a); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.4); }
.army-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.chip.army { cursor: pointer; }
.gallery-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.gallery-card canvas { border-radius: 6px; max-width: 40vw; height: auto; }
/* E-59: the report button moved to the card's own top-right corner, smaller than the other actions. */
.gallery-card .report-btn { position: absolute; top: 8px; right: 8px; min-width: 0; padding: 4px 8px; }


/* the lobby's "cancel game": a quiet button, far less prominent than start / back */
.btn.quiet { background: none; border-color: color-mix(in srgb, var(--muted) 45%, transparent); color: var(--muted); }
.btn.quiet:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.overlay.fixed { position: fixed; z-index: 200; }
.slot-row.sub { margin-left: 22px; }
.btn.icon-only { min-width: 36px; padding: 4px 8px; }
.friend-list { display: grid; gap: 6px; }
.friend-row { display: flex; align-items: center; gap: 8px; }
.friend-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.friend-row .dot.on { background: #4caf50; }
.friend-row .dot.unknown { background: transparent; border: 1px solid var(--muted); }
.chat-report { background: none; border: 0; padding: 2px 6px; margin-left: 4px; font-size: .85em; opacity: .45; cursor: pointer; color: inherit; }
.chat-report:hover, .chat-report:focus-visible { opacity: 1; }
.friend-code { font-size: 1.1rem; letter-spacing: .12em; user-select: all; }
/* An app shell (appConfig.js IS_APP): a long press must not select text or open the system callout; fields and the codes a player copies stay selectable */
.app-shell { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.app-shell input, .app-shell textarea, .app-shell .invite-code { -webkit-user-select: text; user-select: text; }
.app-shell .friend-code { -webkit-user-select: all; user-select: all; }
/* My Area: menu and pages */
.area-menu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.area-menu .btn { flex: 1 1 auto; min-width: 0; }
.area-menu .btn.active { background: var(--accent, #e3a23a); color: #1b2119; font-weight: 700; }
.area-content { display: grid; gap: 12px; }
.pill.won { background: #cfe9b8; color: #25461a; }
.pill.lost { background: #f1c6c0; color: #5a1f19; }
.game-details { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; color: var(--muted); }
.game-details .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.trophy-row { display: grid; gap: 6px; }
.trophy.next { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); opacity: 1; }
/* My Area: lobbies stand out from running and finished games */
.game-item.lobby { border-left: 4px solid var(--muted); background: color-mix(in srgb, var(--panel-2), var(--accent) 10%); }
.game-item.lobby.ready { border-left-color: var(--good); }
.lobby-line { font-size: .85em; color: var(--muted); margin-top: 2px; }
.game-item.lobby.ready .lobby-line { color: var(--good); font-weight: 600; }
.news-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
select.faction-sel, .slot-row select.faction-sel { width: auto; min-width: 0; flex: 0 0 auto; padding-left: 6px; padding-right: 2px; } /* (it only holds an emblem) */

/* Faction call-in buttons: ready / building up, and the picking of the target tiles */
.callins { display: inline-flex; align-items: center; gap: 4px; }
.callins[hidden], .callins-row[hidden] { display: none; }
.callins-row { display: flex; justify-content: flex-end; padding: 2px; }
.prodslot { margin-left: auto; display: inline-flex; }
.callins .btn.callin { padding: 3px 7px; }
.callins .btn.callin small { margin-left: 3px; font-weight: 700; }
.callins .btn.callin .callin-name { display: none; margin-left: 4px; } /* (the name only where there is room: an upright phone shows just the icon, the tip says the rest) */
@media (min-width: 440px) { .callins .btn.callin .callin-name { display: inline; } }
.callins .btn.callin.ready { animation: callin-glow 1.8s ease-in-out infinite; }
@keyframes callin-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 160, 58, .8); }
  50% { box-shadow: 0 0 7px 3px rgba(224, 160, 58, .55); }
}
@media (prefers-reduced-motion: reduce) { .callins .btn.callin.ready { animation: none; box-shadow: 0 0 6px 2px rgba(224, 160, 58, .6); } }
.callins .btn.off { opacity: .55; cursor: default; }
.callin-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; background: var(--panel-2); }

/* Production games: food strip, produce sheet */
/* standing orders: the tick and the cross next to a proposed destination, and the rally row of the produce sheet */
.turns-left { display: inline-block; min-width: 1.4em; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--bad, #b3382c); font-weight: 700; text-align: center; }
.icon { display: inline-block; vertical-align: -0.2em; flex: none; }
.btn .icon, .chip .icon { margin-right: 2px; }
/* icon colours: the page's icons are no longer all black (the canvas icons stay white with a dark outline) */
.ic-coins { color: #d99a0b; } .ic-gem { color: #1f9fc9; } .ic-paw { color: #8a5a2b; } .ic-heart, .ic-heal, .ic-flame, .ic-swords, .ic-sword, .ic-skull, .ic-bomb, .ic-target, .ic-heart-crack { color: #d1453b; }
.ic-shield, .ic-users, .ic-handshake, .ic-eye, .ic-droplet, .ic-snowflake, .ic-search, .ic-globe, .ic-map { color: #2f7fc4; }
.ic-check, .ic-flag, .ic-trending-up, .ic-feather, .ic-bird, .ic-plus { color: #3a9a4a; }
.ic-x, .ic-ban, .ic-alert, .ic-trash { color: #c8472f; }
.ic-trophy, .ic-medal, .ic-star, .ic-crown, .ic-sparkles, .ic-zap, .ic-bell { color: #e0a416; }
.ic-book, .ic-cap, .ic-scroll, .ic-newspaper, .ic-image, .ic-film, .ic-dice, .ic-megaphone { color: #7b5fb5; }
.ic-hammer, .ic-construction, .ic-factory, .ic-home, .ic-tent, .ic-mountain, .ic-footprints, .ic-dumbbell, .ic-scale { color: #a2682c; }
.ic-hourglass, .ic-timer, .ic-moon, .ic-chat, .ic-lock, .ic-pin, .ic-user, .ic-save { color: #4d6b8a; }
.btn.primary .icon, .btn.danger .icon, .btn.active .icon, .walkpop .icon { color: inherit; } /* (on a filled button the icon keeps the text colour) */
/* the wiki: a picture or an icon in front of each entry (production, goals and game types), the combos with their parts */
.wiki-rich { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wiki-rich li { display: flex; gap: 12px; align-items: flex-start; }
.wiki-rich-pic { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--accent-dark, #8a5a10); }
.wiki-rich-pic canvas { max-width: 110px; height: auto; }
.wiki-mines { display: flex; }
.wiki-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.combo-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.combo-faces { display: flex; align-items: center; gap: 6px; }
.combo-face { width: 56px; height: 56px; object-fit: contain; }
.combo-face.none { display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; text-align: center; background: var(--panel-2); border-radius: 10px; padding: 4px; box-sizing: border-box; }
.combo-face.result { width: 64px; height: 64px; }
.combo-op { font-weight: 700; color: var(--muted); }
.walkpop { position: absolute; z-index: 12; display: flex; gap: 8px; transform: translate(0, -50%); }
.walkpop[hidden] { display: none; }
.walkpop button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; font-size: 1.4rem; line-height: 1; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); cursor: pointer; }
.walkpop .ok { background: #2e9b4a; }
.walkpop .no { background: #c64a3f; }
.walkpop .ok.off { opacity: .4; }
.rally-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.rally-row .grow { flex: 1 1 auto; }
.info.ok { color: var(--ok, #2e9b4a); font-weight: 600; }
.prodbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 2px; }
.prodbar[hidden], .sheet-backdrop[hidden] { display: none; }
.prodbar .chip, .sheet-head .chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); }
.prodbar .chip.warn, .sheet-head .chip.warn { background: #ffd9d4; color: #6b2b26; outline: 2px solid var(--accent); } /* light red with dark text so the dark emoji icon stays visible; the rule above would otherwise paint it with the panel colour */
.prodbar .chip.queue img { width: 24px; height: 24px; object-fit: contain; }
.prodbar .btn { margin-left: auto; }
.prodbar .prodslot + .btn, .prodbar .callins .btn { margin-left: 0; } /* (the slot with the call-in icons takes over the push to the right edge from the Produce button) */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; z-index: 50; }
.sheet { width: min(100%, 520px); max-height: 100%; background: var(--panel); border-radius: 16px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.sheet > p { margin: 0; }
.sheet-head { display: flex; align-items: center; gap: 10px; } .sheet-head b:first-child { flex: 1; font-size: 1.1em; }
.sheet-list { display: grid; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.sheet-row { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 0; background: var(--panel-2); color: inherit; font: inherit; cursor: pointer; }
.sheet-row img { width: 40px; height: 40px; object-fit: contain; }
.sheet-row .grow { flex: 1; } .sheet-row .cost { font-weight: 700; } .sheet-row .cost.poor { color: var(--danger, #e5574f); }
.sheet-row:disabled { opacity: .45; cursor: default; }
.sheet-item { display: grid; gap: 6px; }
.sheet-item-head { display: flex; gap: 6px; align-items: stretch; }
.sheet-item-head .sheet-row { flex: 1; min-width: 0; }
.sheet-add { flex: none; align-self: stretch; min-width: 48px; font-size: 1.5rem; font-weight: 700; }
.sheet-arrow { color: var(--muted); }
.sheet-details { text-align: left; }
.info.warn { color: var(--accent); }
.queue-list { display: grid; gap: 6px; border-bottom: 1px solid var(--panel-2); padding-bottom: 8px; max-height: 26%; overflow-y: auto; flex: 0 0 auto; }
.queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.queue-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 10px; background: var(--panel-2); }
.queue-row img { width: 28px; height: 28px; object-fit: contain; } .queue-row .grow { flex: 1; white-space: nowrap; }
.queue-row .btn.small { padding: 2px 8px; min-height: 0; }
/* the gold, diamond and army chips are no buttons: each has its own tint, so they do not look like the grey buttons next to them */
.prodbar .chip.gold, .sheet-head .chip.gold, .prodbar .chip.water, .prodbar .chip.army { color: #1f2a14; }
.prodbar .chip.gold, .sheet-head .chip.gold { background: color-mix(in srgb, #f2b93b 70%, var(--panel)); }
.prodbar .chip.water { background: color-mix(in srgb, #5bb0ea 60%, var(--panel)); }
.prodbar .chip.army { background: color-mix(in srgb, #86c066 60%, var(--panel)); }
.prodbar .chip.army.warn { background: color-mix(in srgb, #e5655f 70%, var(--panel)); }
/* (the bottom bar paints every chip grey with a more specific rule: these win over it) */
.game > .bottom .prodbar .chip.gold:not(.ability):not(.warn) { background: color-mix(in srgb, #f2b93b 70%, var(--panel)); border-color: color-mix(in srgb, #b9861a 45%, transparent); }
.game > .bottom .prodbar .chip.water:not(.ability):not(.warn) { background: color-mix(in srgb, #5bb0ea 60%, var(--panel)); border-color: color-mix(in srgb, #2f7db3 45%, transparent); }
.game > .bottom .prodbar .chip.army:not(.ability):not(.warn) { background: color-mix(in srgb, #86c066 60%, var(--panel)); border-color: color-mix(in srgb, #4f8a33 45%, transparent); }
.game > .bottom .prodbar .chip.army.warn { background: color-mix(in srgb, #e5655f 70%, var(--panel)); }
.prodbar button.chip { border: 0; color: inherit; font-family: inherit; cursor: pointer; }
/* gold, diamonds, army limit and the animals in production are chips of one size */
.prodbar .chip { box-sizing: border-box; min-height: 32px; padding: 3px 10px; font-size: .85rem; line-height: 1.2; font-weight: 400; }
.prodbar .chip.queue.more { font-weight: 700; }
.prodbar button.chip:disabled { cursor: default; opacity: .7; }

/* ---- build overlay (owner 2026-10-07): the builder's choice opens like the produce sheet ---- */
.sheet-row.unavailable { opacity: .55; cursor: help; }
.sheet-row small { color: var(--muted); font-weight: 400; }
.controls > label.check.small { display: none; } /* "end turn automatically": a switch in the settings menu (the ⋮ button) on every device (owner 2026-10-16) */

/* ---- phones (owner 2026-10-07): less chrome around the board ---- */
@media (max-width: 520px) {
  .topbar { gap: 4px; margin: calc(var(--safe-top) + 6px) calc(var(--safe-right) + 6px) 0 calc(var(--safe-left) + 6px); padding: 4px 6px; border-radius: 16px; }
  /* the first line always holds the back button, the turn banner, the clock and the chat and menu buttons (top right); the team strength display (it can be wide with alliances) takes a line of its own below (task 1879) */
  .topbar > * { order: 1; }
  .topbar > .hpbars { order: 2; flex: 1 1 100%; justify-content: center; flex-wrap: wrap; gap: 6px; }
  .topbar .btn.icon { min-width: 32px; min-height: 32px; padding: 2px; font-size: .95rem; }
  .topbar .topbar-menu .btn.icon { padding: 6px 12px; min-height: 40px; font-size: 1rem; } /* (the entries of the settings menu keep their room around icon and text) */
  .topbar .cp { padding: 2px 6px; font-size: .8rem; }
  .banner { font-size: .9rem; }
  .hpbar { width: 5px; height: 11px; }
  .sbar { width: 52px; height: 16px; }
  .turn-btn { width: 28px; height: 28px; }
  .turn-btn svg { width: 16px; height: 16px; }
  .turn-btns { right: calc(var(--inset-right, 0px) + 6px); bottom: calc(var(--inset-bottom, 0px) + 6px); gap: 4px; }
  .minimap-box.pos-br { bottom: calc(var(--inset-bottom, 0px) + 40px); }
  .cardbox:has(.unitcard.select-hint) { display: none; } /* "tap one of your units ..." takes room the board needs */
  .topbar-menu .btn.icon.auto-menu-btn.active { outline: 2px solid var(--accent); }
  .cardbox { padding: 6px; }
  .unitcard { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; min-height: 0; }
  .unitcard img { width: 32px; height: 32px; padding: 2px; }
  .unitcard h3 { font-size: .95rem; }
  .unitcard.mine:not(.open) h3 .pill { display: none; } /* the own animal needs no "name (you)" chip while collapsed */
  .unitcard .stats { margin-top: 0; gap: 4px; }
  .uc-title { gap: 4px; }
  .uc-toggle { min-height: 26px; min-width: 30px; }
  .abilities .btn { min-height: 38px; }
  .actions .undo-btn { flex: 0 0 auto; min-width: 44px; padding: 6px 10px; font-size: 1.15rem; line-height: 1; }
  .undo-text { display: none; } /* just the back arrow on phones */
  .sheet-backdrop { padding: 8px; }
  /* lobby rows: team, picker and alliance group stay on one line */
  .slot-row { flex-wrap: wrap; gap: 6px; padding: 6px; } /* a team with many pickers goes on a second line instead of running out of the screen */
  .slot-row b { min-width: 0; white-space: nowrap; }
  .slot-row select, .slot-row input { flex: 1 1 110px; min-width: 0; padding-left: 6px; padding-right: 6px; }
  .slot-row select.group-sel { flex: 0 0 52px; }
  .slot-row select.faction-sel { flex: 0 0 auto; }
  .slot-fill { flex: 1 1 110px; min-width: 0; }
  .slot-row.sub { margin-left: 12px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .turn-btn { width: 30px; height: 30px; }
  .topbar .btn.icon { min-height: 34px; }
}

/* task 1784: an open page that runs older files than the server has */
.update-bar { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000; display: flex; gap: 12px; align-items: center; padding: 8px 14px; border-radius: 10px; background: #2b3a28; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); font-size: 14px; }

/* task 1779: the tree of animals a map allows in production games */
.unit-tree-group > summary { cursor: pointer; padding: 4px 0; }
.unit-tree-leaves { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 2px 12px; padding: 2px 0 6px 22px; }
.unit-tree-box > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* task 1786: the notification bell, its list and the banner for something new */
.notif-bell { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; min-width: 44px; min-height: 44px; border-radius: 22px; font-size: 1.2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.notif-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #d9534f; color: #fff; font-size: .75rem; line-height: 20px; text-align: center; }
.notif-panel { position: fixed; right: 10px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 60; width: min(340px, calc(100vw - 20px)); max-height: 60vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--panel); border: 2px solid var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.notif-panel[hidden], .notif-banner[hidden], .notif-bell[hidden] { display: none; }
.notif-panel h3 { margin: 0 0 4px; }
.notif-item { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--accent); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.notif-item.read { opacity: .55; }
.notif-banner { position: fixed; left: 50%; top: calc(var(--safe-top, 0px) + 10px); transform: translateX(-50%); z-index: 70; max-width: calc(100vw - 20px); }
.notif-banner-btn { padding: 8px 14px; border-radius: 10px; border: 2px solid var(--accent); background: var(--panel); color: inherit; font: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.unit-tree-group > summary > label { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.fbadge-wrap { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-right: 6px; }
.fbadge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; font-size: 13px; line-height: 1; background: var(--trim); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px 3px 10px 10px; box-sizing: border-box; }
.slot-row .fbadge-wrap { margin-right: 0; }
.slot-row .fbadge, .slot-row select.faction-sel { width: 52px; height: 44px; min-height: 44px; font-size: 20px; }
.slot-row select.faction-sel { background-color: var(--trim); color: var(--ink); border: 2px solid var(--ink); border-radius: 3px 3px 14px 14px; padding: 0 0 0 8px; }
.wiki-faction { margin-top: 28px; }
.wiki-faction:first-of-type { margin-top: 12px; }
.wiki-faction > h3 { margin-bottom: 8px; }
.wiki-faction > p.info, .wiki-faction > ul.info { margin: 0 0 14px; }
.wiki-faction > .bestiary { margin-top: 18px; }
.effect-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }

/* start page header: screenshots crossfade behind the headline */
.hero-banner { position: relative; margin: 8px 0 0; height: clamp(170px, 42vw, 230px); border-radius: var(--radius); overflow: hidden; background: #0f140e; color: #fff; }
.hero-slide { position: absolute; inset: 0; background-size: 150% auto; background-position: 30% 50%; background-repeat: no-repeat; /* 150 % wide: more of the left side shows than of the right (owner 2026-10-15) */ opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.active { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .6)); pointer-events: none; }
.hero-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; pointer-events: none; }
.hero-banner h1 { margin: 0; font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .75); }
.hero-banner p { margin: 4px 0 0; color: #f6efd9; font-size: clamp(.95rem, 3.4vw, 1.1rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 2px; }
.hero-dot { width: 22px; height: 22px; min-width: 0; min-height: 0; padding: 7px; border: 0; background: rgba(255, 255, 255, .55) content-box; border-radius: 50%; cursor: pointer; }
.hero-dot.active { background-color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* start page: the cards below the campaign card */
.home-news .news-item { padding: 6px 0; border-top: 1px solid var(--panel-2); }
.home-news .news-item:first-of-type { border-top: 0; }
.home-news .news-item p { margin: 2px 0 0; }
.faction-card { border-top: 6px solid var(--trim); text-align: center; }
.faction-card h2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.faction-animals { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 10px; }
.faction-animals img { width: 38px; height: 38px; object-fit: contain; background: var(--panel-2); border-radius: 8px; padding: 2px; }
.day-card { display: flex; flex-direction: column; gap: 8px; }
.day-card h2 { margin: 0; }
.day-card .unitcard { padding-bottom: 0; }
.map-day-preview { display: grid; place-items: center; background: var(--panel-2); border-radius: 10px; padding: 8px; }
.top3 { margin: 0; padding-left: 22px; }
.top3 li { padding: 2px 0; }
.top3 .pts { float: right; color: var(--muted); }
.home-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 12px 0 4px; color: var(--muted); font-size: .85rem; }
.home-footer a { color: var(--muted); }
.entry-pair > :only-child { grid-column: 1 / -1; }

/* "Beta" sticker on the headline: a little skewed and hanging over the right side of the name */
.hero h1, .hero-banner h1 { position: relative; display: inline-block; }
.beta-badge { position: absolute; top: -.35em; right: -1.5em; padding: 1px 8px; font-size: .38em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: #2b1d05; background: #e0a03a; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transform: rotate(14deg) skewX(-10deg); text-shadow: none; pointer-events: none; }
.map-select { width: 100%; }

/* My Area: the banner for a player who has no account yet */
.guest-banner { padding: 18px 18px 16px; border-radius: var(--radius); background: linear-gradient(135deg, #fff1d1, #ffe0a8); border: 2px solid #e0a03a; box-shadow: 0 4px 14px rgba(224, 160, 58, .35); color: #3a2a07; }
.guest-banner h2 { margin: 0 0 6px; font-size: 1.5rem; }
.guest-banner p { margin: 0 0 8px; }
.guest-banner ul { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.guest-banner li { padding-left: 1.6em; position: relative; }
.guest-banner li::before { content: "✗"; position: absolute; left: 0; color: #b3261e; font-weight: 800; }
.guest-banner .btn { width: 100%; font-size: 1.05rem; min-height: 50px; }

/* result screen: the nudge to register for a player without an account */
.register-nudge { display: grid; gap: 8px; margin: 6px 0; padding: 12px; border-radius: var(--radius); background: #fff1d1; border: 2px solid #e0a03a; color: #3a2a07; }
.register-nudge p { margin: 0; font-weight: 600; }

/* start page: the "friends online" button next to My Area */
.friends-online { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.friends-online .fo-dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #9aa391; }
.friends-online .fo-dot.on { background: #3fae49; box-shadow: 0 0 0 2px rgba(63, 174, 73, .25); }
.friends-online .fo-dot.red { background: #d93025; box-shadow: 0 0 0 2px rgba(217, 48, 37, .25); }
@media (max-width: 520px) { .friends-online .fo-label { display: none; } } /* on a phone: the dot, the icon and the number */
.friends-online .fo-label { margin-left: 4px; }

/* ---- the apps (task 1857): own start screen and a tab bar (assets/js/screens/appHome.js, ui/appTabs.js); the website does not use these ---- */
.app-shell #app { display: flex; flex-direction: column; }
.app-shell .router-root { flex: 1 1 auto; height: auto; min-height: 0; position: relative; }
.app-tabs { flex: 0 0 auto; display: flex; background: var(--panel); border-top: 1px solid rgba(127,127,127,.25); padding-bottom: var(--safe-bottom); z-index: 6; }
.app-tabs .tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px 6px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.error-view { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 420px; margin: 0 auto; padding: calc(var(--safe-top) + 18vh) 24px 24px; }
.error-view .error-icon { font-size: 3rem; line-height: 1; }
.error-view h2 { margin: 0; }
.error-view p { margin: 0 0 6px; color: var(--muted); }
/* touch targets of at least 44 px in the apps (Apple 44 pt, Google 48 dp): the small controls of the website get more room */
.app-shell .ah-langs .btn { min-width: 52px; min-height: 44px; }
.app-shell .home-footer a { display: inline-block; padding: 13px 6px; }
.app-shell .segmented .seg, .app-shell .segmented.compact .seg { min-height: 44px; }
.app-shell .btn.link { min-height: 44px; min-width: 44px; }
.app-shell .btn.small.icon-only { min-width: 44px; min-height: 44px; }
/* a desktop window: the tabs sit together in the middle, above the column of the page, not spread over the whole width */
@media (min-width: 900px) { .app-tabs { justify-content: center; } .app-tabs .tab { flex: 0 0 120px; } }
.app-tabs .tab-icon { display: block; line-height: 0; opacity: .7; }
.app-tabs .tab-label { font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tabs .tab.active { color: var(--fg); }
.app-tabs .tab.active .tab-icon { opacity: 1; color: var(--accent); }
.app-tabs .tab.active .tab-label { color: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .app-tabs .tab.active .tab-label { color: #8a5a0b; } }

.ah-inner { gap: 14px; }
.ah-hero { position: relative; min-height: 190px; border-radius: 20px; overflow: hidden; background: #11160f center / cover no-repeat; display: flex; align-items: flex-end; }
.ah-hero.plain { background: linear-gradient(160deg, #31402c, #1b2119); min-height: 160px; }
.ah-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,12,7,.82) 0%, rgba(8,12,7,.25) 55%, rgba(8,12,7,0) 100%); }
.ah-title { position: relative; padding: 16px 18px; color: #fff; }
.ah-title h1 { margin: 0; font-size: 1.9rem; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ah-title p { margin: 2px 0 0; opacity: .9; font-size: .95rem; }
.ah-animals { position: absolute; right: 10px; top: 10px; display: flex; gap: 2px; }
.ah-animals img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; }
.ah-continue { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 2px solid var(--accent); border-radius: 16px; background: var(--panel); text-align: left; cursor: pointer; color: inherit; }
.ah-continue-text { flex: 1; display: grid; min-width: 0; }
.ah-continue-text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-chevron { font-size: 1.8rem; color: var(--accent); line-height: 1; }
.ah-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(224,160,58,.6); animation: ah-pulse 1.8s infinite; }
@keyframes ah-pulse { 70% { box-shadow: 0 0 0 10px rgba(224,160,58,0); } 100% { box-shadow: 0 0 0 0 rgba(224,160,58,0); } }
@media (prefers-reduced-motion: reduce) { .ah-dot { animation: none; } }
.ah-play { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 68px; border: 0; border-radius: 20px; background: var(--accent); color: #241a05; font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.ah-play:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.ah-play span { font-size: 1.6rem; }
.ah-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ah-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 10px 8px; border: 0; border-radius: 16px; background: var(--panel); color: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.ah-tile:active { filter: brightness(.92); }
.ah-tile-icon { font-size: 1.7rem; line-height: 1.1; }
.ah-section h2 { font-size: 1.05rem; margin: 4px 2px 8px; }
.ah-games { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ah-game { flex: 0 0 150px; scroll-snap-align: start; display: grid; gap: 4px; justify-items: start; padding: 12px; border: 0; border-radius: 14px; background: var(--panel); color: inherit; text-align: left; cursor: pointer; }
.ah-game.turn { outline: 2px solid var(--accent); }
.ah-game strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-game small { color: var(--muted); }
.ah-langs { display: flex; justify-content: center; gap: 6px; padding: 4px 0 2px; }
.ah-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 64px; }
/* a desktop window (the Steam app, a tablet in landscape): a wider page, a taller picture, the ways to play side by side */
@media (min-width: 900px) {
  .ah-inner { max-width: 960px; }
  .ah-hero { min-height: 340px; }
  .ah-title { padding: 28px 32px; }
  .ah-title h1 { font-size: 3.2rem; }
  .ah-title p { font-size: 1.2rem; }
  .ah-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ah-tiles > :last-child:nth-child(odd) { grid-column: auto; flex-direction: column; gap: 4px; min-height: 84px; }
  .ah-play { cursor: pointer; }
}
.app-shell .guest-banner.compact { padding: 14px 16px; }
.app-shell .guest-banner.compact h2 { font-size: 1.1rem; }
.app-shell .guest-banner.compact ul { margin: 6px 0 10px; }
.app-shell .guest-banner.compact li::before { content: "✓"; color: #2f7d32; }
/* the notification bell and its list sit above the tab bar, not over it */
.has-tabs .notif-bell { bottom: calc(76px + env(safe-area-inset-bottom)); }
.has-tabs .notif-panel { bottom: calc(130px + env(safe-area-inset-bottom)); }
/* page titles in the apps: smaller, closer to the content */
.app-shell .home:not(.ah) .hero { padding: 0; }
.app-shell .home:not(.ah) .hero h1 { font-size: 1.6rem; margin-bottom: 4px; }
/* the map cards of the launch screen (ui/mapCarousel.js) */
.map-carousel { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.map-card { flex: 0 0 124px; scroll-snap-align: center; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px; border: 2px solid transparent; border-radius: 14px; background: var(--panel-2); color: inherit; text-align: center; cursor: pointer; }
.map-card.active { border-color: var(--accent); background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.map-card canvas { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; border-radius: 6px; }
.map-card strong { font-size: .85rem; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.map-card small { color: var(--muted); font-size: .72rem; }
.map-card-dice { display: grid; place-items: center; width: 96px; height: 96px; font-size: 2.4rem; }
.app-shell .map-box canvas { display: none; } /* the cards above show the map; the box keeps the facts */
/* without a tab bar (lobby, game, editor) the bell goes above the screen's own bottom buttons */
.app-shell body:not(.has-tabs) .notif-bell { bottom: calc(150px + env(safe-area-inset-bottom)); }
.app-shell body:not(.has-tabs) .notif-panel { bottom: calc(204px + env(safe-area-inset-bottom)); }
/* buttons that only make sense on the website (the tab bar is the way back in the apps) */
.app-shell .web-only { display: none !important; }

/* ---- small devices (iPhone SE 375x667 is the smallest we play on; a phone held sideways is low): less padding in the cards (owner 2026-10-16) ---- */
@media (max-width: 400px), (max-height: 420px) {
  .topbar { margin: calc(var(--safe-top) + 4px) calc(var(--safe-right) + 4px) 4px calc(var(--safe-left) + 4px); padding: 3px 5px; border-radius: 14px; }
  .game > .bottom { margin: 0 calc(var(--safe-right) + 4px) calc(var(--safe-bottom) + 4px) calc(var(--safe-left) + 4px); padding: 5px; gap: 4px; border-radius: 16px; }
  .game > .chat-side.open:not([hidden]) { margin: 0 calc(var(--safe-right) + 4px) calc(var(--side-h, 0px) + 8px) 0; padding: 8px; border-radius: 16px; }
  .cardbox { padding: 4px; }
  .actions { gap: 5px; }
  .game .overlay:not(.fixed) { padding: calc(var(--inset-top, 0px) + 6px) calc(var(--inset-right, 0px) + 6px) calc(var(--inset-bottom, 0px) + 6px) calc(var(--safe-left) + 6px); }
}
@media (max-height: 420px) and (orientation: landscape) and (min-width: 560px) { /* (the sidebar sits in its own column at the right: no left margin, the column already includes the right safe area) */
  .game > .bottom { margin-left: 0; }
}
.guide-card .skip-story { grid-column: 1 / -1; font-size: .85rem; opacity: .85; display: flex; align-items: center; gap: 4px; cursor: pointer; }

/* the registration page (#/register) */
.register-card, .register-done { display: grid; gap: 12px; }
.register-form { display: grid; gap: 12px; }
.register-form .btn.primary { min-height: 50px; font-size: 1.05rem; }
.register-card .btn.link { justify-self: center; }
.register-done { text-align: center; justify-items: center; padding: 28px 18px; }
.register-done .register-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; background: #3fae49; color: #fff; box-shadow: 0 0 0 8px rgba(63, 174, 73, .22); }
.register-done .btn { width: 100%; min-height: 50px; }

/* the encyclopedia in the apps: the website in a frame (screens/encyclopedia.js) */
.wiki-frame-box { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wiki-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--bg, #14110d); }
.wiki-frame-fallback { margin: 0; padding: 8px 12px; text-align: center; font-size: .85rem; background: var(--panel); }