/* The life sim's palette and layout, so the two games look like siblings. */
:root {
  --bg: #080c14;
  --panel: #121620;
  --panel-hi: #1c222e;
  --line: #2e3644;
  --text: #d6deea;
  --dim: #8c98aa;
  --accent: #78c8ff;
  --gold: #ffcd5a;
  --warn: #ff8c78;
  --good: #8cebA0;
  --bar: 76px;
  --side: 340px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 13px/1.45 Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  overflow: hidden;
}

button, select, input {
  font: inherit; color: var(--text);
  background: var(--panel-hi); border: 1px solid var(--line);
  border-radius: 4px; padding: 4px 8px; cursor: pointer;
}
button:hover:not(:disabled), select:hover { background: #29323f; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.on { background: #2b4a63; border-color: var(--accent); color: #eaf6ff; }
button.danger:hover { background: #55251f; border-color: var(--warn); }

/* --- layout: the side panel folds away (body.sheet opens it) ----------- */
#app { display: grid; grid-template-columns: minmax(0, 1fr) 0; grid-template-rows: 1fr var(--bar); height: 100%; }
body.sheet #app { grid-template-columns: minmax(0, 1fr) var(--side); }
#stage { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
        cursor: grab; touch-action: none; }
#view.dragging { cursor: grabbing; }

#side { grid-column: 2; grid-row: 1; background: var(--panel);
        border-left: 1px solid var(--line); display: none; flex-direction: column;
        min-height: 0; min-width: 0; }
body.sheet #side { display: flex; }
#sideTab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; padding: 14px 5px;
           border-radius: 8px 0 0 8px; border-right: none; background: rgba(18,22,30,.9); color: var(--accent); }
#sideTab span { writing-mode: vertical-rl; letter-spacing: 2px; }
#sideTab::before { content: '\25C2'; display: block; margin-bottom: 6px; text-align: center; }
body.sheet #sideTab::before { content: '\25B8'; }

/* --- the toolbar -------------------------------------------------------- */
#bar { grid-column: 1 / -1; grid-row: 2; min-width: 0; background: linear-gradient(#171c27, #10141c);
       border-top: 1px solid var(--line); position: relative;
       display: flex; align-items: center; gap: 14px; padding: 0 12px; }
#bar .grp { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#bar button.big { height: 48px; padding: 0 14px; font-size: 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#bar .ic { font-size: 18px; line-height: 1; opacity: .9; }
#bar .grp.small button { height: 34px; padding: 0 10px; border-radius: 6px; }
button.apoc { background: linear-gradient(#5a1a14, #3e100c); border-color: #a83a2e; color: #ffd6cc; font-weight: bold; }
button.apoc:hover:not(:disabled) { background: linear-gradient(#72241c, #50160f); }
button.cityb { background: linear-gradient(#1d3550, #142538); border-color: #3a6a98; color: #d8ecff; font-weight: bold; }
button.cityb:hover:not(:disabled) { background: linear-gradient(#25446a, #1a3048); }
#bar .vol { color: var(--dim); }
#bar .vol input { width: 80px; padding: 0; accent-color: var(--gold); }
/* three parts: the left, the speed dial dead in the middle, the right */
#bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.barL, .barR { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barR { justify-content: flex-end; }
#bar .grp.small { gap: 4px; }
#bar .grp.small button { padding: 0 8px; }

/* the speed: an old car radio -- a dial window with a needle over a row of chunky preset keys */
#dial { flex-direction: column; gap: 3px; background: linear-gradient(#2a2f38, #181c23); border: 1px solid #3a414d;
        border-radius: 8px; padding: 4px 6px 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.dialWin { position: relative; height: 15px; width: 100%; background: linear-gradient(#2b2212, #1a140a); border-radius: 3px;
           border: 1px solid #000; box-shadow: inset 0 0 6px rgba(255,170,40,.25); overflow: hidden; }
.dialScale { display: flex; height: 100%; }
.dialScale span { flex: 1; text-align: center; font-size: 10px; line-height: 13px; color: #d9a84a; text-shadow: 0 0 4px rgba(255,170,40,.6); }
#needle { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff3a1a; box-shadow: 0 0 6px #ff5a2a;
          left: calc(var(--k, 1) * 100% / 6 + 100% / 12 - 1px); transition: left .35s cubic-bezier(.4, 1.6, .5, 1); }
.keys { display: flex; gap: 3px; }
.keys #speeds { display: contents; }
.keys button { width: 40px; height: 32px; padding: 0; border-radius: 4px 4px 6px 6px; font-weight: bold; font-size: 12px;
               color: #2a2620; background: linear-gradient(#f1ead8, #cfc5ad); border: 1px solid #6a634f;
               box-shadow: 0 4px 0 #5e5643, 0 5px 3px rgba(0,0,0,.5); transform: translateY(-2px); transition: transform .08s, box-shadow .08s; }
.keys button:hover:not(:disabled) { background: linear-gradient(#fff8e8, #ddd3bb); }
.keys button.on { transform: translateY(2px); box-shadow: 0 0 0 #5e5643, inset 0 2px 4px rgba(0,0,0,.35);
                  background: linear-gradient(#ffcf6a, #e0a43a); color: #3a2208; border-color: #8a5a1a; }

/* More: the rest, in a menu that opens above its button */
#moreMenu { position: absolute; right: 10px; bottom: calc(100% + 8px); z-index: 20; width: 300px;
            background: rgba(18,22,30,.97); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px;
            display: flex; flex-wrap: wrap; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
#moreMenu button { flex: 1 1 40%; height: 36px; border-radius: 6px; }
#moreMenu .mmHead { flex-basis: 100%; color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 6px; }
#moreMenu .clockset { flex: 1 1 40%; }
.phoneOnly, #vspeed, #bar .pl, #bar .pi { display: none; }
#moreMenu .mmLink { flex-basis: 100%; color: var(--dim, #8a93a3); font-size: 12px; text-align: center; margin-top: 4px; }
#splash .spPriv { color: #7c889a; font-size: 12px; margin-top: 4px; }
#splash .spPriv:hover { color: #c8d0dc; }
.clockset { color: var(--dim); white-space: nowrap; }
.clockset input { width: 54px; padding: 3px 5px; cursor: text; }

/* --- the strip across the top, and the counts under it on the left ------ */
#topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: stretch;
          background: linear-gradient(rgba(10,13,19,.94), rgba(14,18,26,.86)); border-bottom: 1px solid var(--line);
          pointer-events: none; height: 38px; }
#topbar .tb { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px;
              border-right: 1px solid rgba(46,54,68,.7); white-space: nowrap; overflow: hidden; min-width: 0; }
#topbar .tb:last-child { border-right: none; flex: 0 0 auto; }
#topbar .tbTown { justify-content: flex-start; }
#topbar .tbTown b { color: var(--gold); font-size: 15px; }
#topbar .tbClock b { color: #eaf2ff; font-size: 15px; }
#topbar .tbSpeed { color: var(--gold); font-weight: bold; min-width: 80px; }
/* the panic meter: bigger, with a dot at each level where the town does something new -- point at one to read what */
#topbar .tbPanic { flex: 1.3 1 0; pointer-events: auto; }
#pmWrap { position: relative; display: inline-block; width: 280px; height: 16px; flex: 0 1 280px; min-width: 120px; }
#pmBar { position: absolute; left: 0; right: 0; top: 2px; height: 12px; background: #2a2f38; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
#pmFill { display: block; height: 100%; width: 0; border-radius: 6px; background: #e8c04a; transition: width .4s, background .4s; }
#pmDots { position: absolute; inset: 0; }
.pmDot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #171b23; border: 2px solid #9aa3b0; cursor: help; }
.pmDot.on { background: #fff; border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.pmDot::after { content: attr(data-tip); position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px;
                white-space: normal; text-align: left; font-size: 12px; line-height: 1.35; color: var(--text); background: rgba(14,18,26,.97);
                border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; box-shadow: 0 6px 18px rgba(0,0,0,.5); pointer-events: none;
                opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 30; }
.pmDot:hover::after { opacity: 1; visibility: visible; }
#topbar { overflow: visible; }
#topbar .tbPanic { overflow: visible; }
#pmText { color: var(--text); min-width: 9ch; }

#counts { position: absolute; left: 10px; top: 46px; z-index: 2; pointer-events: none; width: 336px;
          background: rgba(14,18,26,.88); border: 1px solid var(--line); border-radius: 10px; padding: 8px;
          box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#cntHead { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); margin: 0 2px 6px; display: flex; justify-content: space-between; }
#cntHead b { color: var(--warn); font-weight: normal; }
#cntGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.cnt { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); border-left: 3px solid var(--c, var(--accent));
       border-radius: 6px; padding: 4px 6px 3px; min-width: 0; }
.cnt b { display: block; font-size: 18px; line-height: 1.1; color: var(--c, var(--text)); font-variant-numeric: tabular-nums; }
.cnt span { display: block; font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- the pickers: tiles over the whole screen ---------------------------- */
#picker, #cityPicker { position: fixed; inset: 0; z-index: 30; background: radial-gradient(ellipse at 50% 30%, #161c28, #05070b);
                       display: flex; flex-direction: column; padding: 14px 18px 18px; gap: 12px; }
.pkHead { display: flex; align-items: baseline; gap: 16px; }
.pkHead h2 { margin: 0; font-size: 24px; color: #ffd6cc; letter-spacing: 1px; }
#cityPicker .pkHead h2 { color: #d8ecff; }
.pkClose { margin-left: auto; font-size: 22px; width: 42px; height: 42px; border-radius: 21px; padding: 0; }
.pkGrid { flex: 1; min-height: 0; display: grid; gap: 12px;
          grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pkGrid.cp { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
.tile { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; border: 2px solid #2a3240; background: #0b0e14;
        transition: transform .15s, border-color .15s, box-shadow .15s; min-height: 0; padding: 0; text-align: left; }
.tile:hover { transform: translateY(-3px) scale(1.01); border-color: var(--tc, #ff8c78); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 24px var(--tg, rgba(255,120,90,.3)); background: #0b0e14 !important; }
.tile.hero { grid-row: 1 / span 2; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile .tl { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.85) 55%); pointer-events: none; }
.tile .tl b { display: block; font-size: 19px; color: var(--tc, #fff); text-shadow: 0 2px 8px #000; letter-spacing: .5px; }
.tile.hero .tl b { font-size: 34px; }
.tile .tl span { display: block; font-size: 12px; color: #c8d0dc; margin-top: 2px; }
.tile.hero .tl span { font-size: 14px; }
/* the scenarios: just the name, till you point at one -- then its description rises up from the bottom */
#pkGrid .tile, #cpGrid .tile { cursor: default; }
/* the kinds of town: the name big, in the middle of the picture; the Select button at the foot */
#cpGrid .tile .tl { top: 50%; bottom: auto; transform: translateY(-50%); padding: 26px 16px; text-align: center;
                    background: radial-gradient(ellipse at center, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 80%); }
#cpGrid .tile .tl b { font-size: 46px; letter-spacing: 1px; text-shadow: 0 3px 14px #000, 0 0 2px #000; }
#cpGrid .tile .tl span { font-size: 15px; margin-top: 8px; text-shadow: 0 1px 6px #000; }
#cpGrid .tile .sel { left: 50%; right: auto; transform: translateX(-50%); bottom: 22px; }
#pkGrid .tile .tl { padding-top: 40px; transition: padding .25s; padding-right: 96px; }
#pkGrid .tile .sel, #cpGrid .tile .sel { position: absolute; right: 12px; bottom: 12px; z-index: 2; height: 38px; padding: 0 18px; border-radius: 19px; font-weight: bold; font-size: 14px;
                     color: #fff; background: color-mix(in srgb, var(--tc) 30%, #10141c); border: 2px solid var(--tc); cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
#pkGrid .tile .sel:hover, #cpGrid .tile .sel:hover { background: color-mix(in srgb, var(--tc) 65%, #10141c); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 60%, transparent); transform: scale(1.06); }
/* (the city tiles' button is centred by a translate: keep it, so the button doesn't jump sideways on hover) */
#cpGrid .tile .sel:hover { transform: translateX(-50%) scale(1.06); }
#pkGrid .tile.hero .sel, #cpGrid .tile .sel { height: 46px; font-size: 17px; padding: 0 26px; border-radius: 23px; }
#pkGrid .tile .tl span { max-height: 0; opacity: 0; transform: translateY(14px); overflow: hidden; line-height: 1.45;
                         transition: max-height .35s ease, opacity .3s ease, transform .35s ease, margin .35s; margin-top: 0; }
#pkGrid .tile:hover .tl, #pkGrid .tile:focus-visible .tl { background: linear-gradient(transparent, rgba(0,0,0,.9) 30%); padding-top: 60px; padding-bottom: 62px; padding-right: 14px; }
#pkGrid .tile:hover .tl span, #pkGrid .tile:focus-visible .tl span { max-height: 12em; opacity: 1; transform: none; margin-top: 6px; }

/* --- the setup forms: the whole play area, in columns -------------------- */
#apocSetup, #citySetup { position: absolute; inset: 0; background: #0a0d13; z-index: 25; display: flex; }
#apocForm, #cityForm { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.cfgHead { position: relative; display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--line);
           background: #05070b; flex: 0 0 auto; min-height: 170px; overflow: hidden; }
.cfgHead::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
                   background: linear-gradient(90deg, rgba(5,7,11,.7) 0%, rgba(5,7,11,.3) 50%, rgba(5,7,11,0) 70%, rgba(5,7,11,.55) 100%); }
.cfgArt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cfgTitle, .cfgBtns, .cfgGo { position: relative; z-index: 2; }
.cfgTitle { flex: 1; min-width: 0; max-width: 760px; }
.cfgTitle h3 { margin: 0 0 6px; font-size: 32px; color: var(--tc, #ff8c78); text-shadow: 0 2px 10px #000; }
.cfgTitle p { margin: 0 0 4px; font-size: 12px; color: #c8d0dc; text-shadow: 0 1px 4px #000; }
.cfgBtns { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: 0 0 auto; }
.cfgBtns button { min-width: 110px; height: 34px; border-radius: 8px; background: rgba(28,34,46,.85); }
/* the go button: on its own at the right, big, and glowing in the scenario's colour */
/* (over the play area, at the middle of its right-hand side; the settings keep clear of it) */
.cfgGo { position: absolute; right: 34px; top: calc(50% + 85px); transform: translateY(-50%); z-index: 5; }
#apocSetup .cfgBody, #citySetup .cfgBody { margin-right: 320px; }
.cfgGo .go { --gc: var(--tc, #ff6a4a); min-width: 270px; height: 96px; padding: 0 36px; border-radius: 18px; font-size: 30px; font-weight: bold; letter-spacing: 1px;
             color: #fff; background: linear-gradient(color-mix(in srgb, var(--gc) 75%, #000), color-mix(in srgb, var(--gc) 40%, #000));
             border: 2px solid var(--gc); text-shadow: 0 1px 6px rgba(0,0,0,.6); animation: goGlow 1.8s ease-in-out infinite; }
.cfgGo .go:hover:not(:disabled) { background: linear-gradient(color-mix(in srgb, var(--gc) 90%, #fff), color-mix(in srgb, var(--gc) 55%, #000)); transform: scale(1.04); }
@keyframes goGlow {
  0%, 100% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--gc) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--gc) 40%, transparent); }
  50% { box-shadow: 0 0 28px 6px color-mix(in srgb, var(--gc) 75%, transparent), 0 0 60px 10px color-mix(in srgb, var(--gc) 25%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .cfgGo .go { animation: none; box-shadow: 0 0 22px 4px color-mix(in srgb, var(--gc) 60%, transparent); } }
.cfgBody { flex: 1; min-height: 0; padding: 4px 18px 14px; column-width: 300px; column-gap: 28px; column-fill: auto; overflow-x: auto; overflow-y: hidden;
           column-rule: 1px solid rgba(46,54,68,.6); }
.cfgBody > div, .cfgBody fieldset { display: contents; }
.cfgBody fieldset > legend { display: block; break-after: avoid; color: var(--gold); text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; margin: 14px 0 0; padding: 0; }
.cfgBody .hidden { display: none !important; }
#apocForm label, #cityForm label { display: block; margin-top: 9px; break-inside: avoid; }
#apocForm label > span:not(.hint), #cityForm label > span:not(.hint) { float: right; color: var(--gold); }
#apocForm input[type=range], #apocForm select, #cityForm input[type=range], #cityForm select { width: 100%; margin-top: 3px; }
#apocForm input[type=range], #cityForm input[type=range] { accent-color: #e8a04a; padding: 0; }
#apocForm .hint, #cityForm .hint { color: var(--dim); font-size: 11px; margin: 2px 0 0; display: block; break-inside: avoid; }
#apocForm .cfgBody > div > p.dim, #cityForm .cfgBody > p.dim { margin: 8px 0 0; color: var(--gold); text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; }
#apocForm label.check, #cityForm label.check { margin-top: 8px; }
#apocForm label.check input, #cityForm label.check input { margin-right: 6px; }
#apocForm canvas#zPreview { break-inside: avoid; }
/* (a number to type, beside its slider) */
#cityForm .numBox { float: right; width: 74px; padding: 1px 6px; margin-top: -2px; text-align: right; color: var(--gold); cursor: text; }
#corner .zom { color: #b6d68a; }
#corner .dead { color: var(--warn); }

/* --- things floating over the world ------------------------------------ */
.dim { color: var(--dim); }

#notice { position: absolute; left: 12px; bottom: 10px; color: var(--accent);
          background: rgba(18,22,30,.85); border: 1px solid var(--line);
          border-radius: 4px; padding: 4px 10px; pointer-events: none; max-width: 70%; }
#notice:empty { display: none; }
#evlog { position: absolute; left: 50%; top: 48px; transform: translateX(-50%); display: flex; flex-direction: column;
         align-items: center; gap: 3px; max-width: calc(100% - 640px); min-width: 260px; }
#evlog div { background: rgba(18,22,30,.86); border: 1px solid var(--line); border-radius: 4px; padding: 3px 10px;
             cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#evlog div .when { color: var(--dim); margin-right: 6px; }
#evlog .breach, #evlog .fire { color: #ff8a6a; } #evlog .drop, #evlog .scav { color: #e8d08a; }
#evlog .evac { color: #8ad8ff; } #evlog .siren { color: #ff6a8a; } #evlog .group { color: #9ad8a8; } #evlog .power { color: #c8c8c8; }
#treeBox { position: absolute; right: 36px; top: 48px; max-width: calc(100% - 20px); box-sizing: border-box; background: rgba(18,22,30,.92); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; z-index: 3; }
#treeHead { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
#tree { display: block; width: 520px; max-width: 100%; height: auto; aspect-ratio: 520 / 300; cursor: pointer; }
@media (max-width: 760px) { #treeBox { left: 6px; right: 6px; top: calc(78px + env(safe-area-inset-top)); } #tree { width: 100%; height: 240px; } }
/* the graph: the whole of the play area, an x to close it */
#graphBox { position: absolute; inset: 0; z-index: 8; background: rgba(8,11,16,.96); display: flex; flex-direction: column; padding: 12px 18px 16px; gap: 8px; }
#graphBox .gbHead { display: flex; align-items: baseline; gap: 14px; }
#graphBox .gbHead b { font-size: 20px; color: var(--gold); }
#graph { flex: 1; min-height: 0; width: 100%; display: block; }
#godbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(18,22,30,.9);
          border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; display: flex; gap: 4px; align-items: center; z-index: 3; }
#godbar button.on { outline: 1px solid var(--gold); }
#godbar .nukeb { background: linear-gradient(#5a4a10, #3a2e08); border-color: #c8a020; color: #ffe680; font-weight: bold; }
#godbar .nukeb.on { box-shadow: 0 0 14px rgba(255,200,40,.7); }
/* where a rewarded ad plays (a placeholder till a portal's SDK is on the page: js/ads.js) */
#adPanel { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; }
#adPanel .adBox { width: min(420px, 90vw); background: #1a1f2a; border: 1px solid #3a4250; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
#adPanel .adTag { align-self: flex-start; background: #ffcd5a; color: #222; font-weight: bold; font-size: 11px; padding: 1px 6px; border-radius: 3px; }
#adPanel b { font-size: 18px; }
#adPanel .adBar { height: 6px; background: #2a3040; border-radius: 3px; overflow: hidden; }
#adPanel .adBar i { display: block; height: 100%; width: 0; background: #ffcd5a; }
#adPanel button { align-self: center; padding: 6px 18px; }
.hidden { display: none !important; }

/* --- the splash screen ----------------------------------------------------- */
#splash { position: fixed; inset: 0; z-index: 100; background: #05070b; display: flex; align-items: center; justify-content: center; transition: opacity .55s ease; }
#splash.gone { opacity: 0; pointer-events: none; }
#splashArt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(.85) brightness(.7); }
#splash::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(5,7,11,.35) 0%, rgba(5,7,11,.75) 60%, rgba(5,7,11,.95) 100%); }
#splash .spInner { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px; }
#splash .spTag { color: #c8d0dc; letter-spacing: 4px; text-transform: uppercase; font-size: 14px; text-shadow: 0 2px 8px #000; }
#splash h1 { margin: 0; line-height: .9; display: flex; flex-direction: column; align-items: center; font-family: Impact, 'Arial Black', system-ui, sans-serif; font-weight: 900; text-transform: uppercase; }
#splash .spTiny { font-size: clamp(40px, 8vw, 96px); color: #f0ead8; letter-spacing: 6px; text-shadow: 0 4px 0 #2a2418, 0 8px 30px rgba(0,0,0,.8); }
#splash .spTerror { font-size: clamp(72px, 16vw, 200px); color: #e8402e; letter-spacing: 8px; text-shadow: 0 5px 0 #4a0e08, 0 0 40px rgba(255,60,30,.55), 0 10px 40px rgba(0,0,0,.9); animation: spPulse 3s ease-in-out infinite; }
@keyframes spPulse { 0%, 100% { text-shadow: 0 5px 0 #4a0e08, 0 0 30px rgba(255,60,30,.45), 0 10px 40px rgba(0,0,0,.9); } 50% { text-shadow: 0 5px 0 #4a0e08, 0 0 60px rgba(255,70,30,.8), 0 10px 40px rgba(0,0,0,.9); } }
#splash .go { --gc: #e8402e; margin-top: 10px; min-width: 240px; height: 74px; padding: 0 34px; border-radius: 16px; font-size: 28px; font-weight: bold; letter-spacing: 2px; color: #fff; cursor: pointer;
              background: linear-gradient(#a8261a, #6a140c); border: 2px solid var(--gc); text-shadow: 0 1px 6px rgba(0,0,0,.6); animation: goGlow 1.8s ease-in-out infinite; }
#splash .go:hover { transform: scale(1.05); background: linear-gradient(#c8301f, #7a1a0e); }
#splash .spHint { color: #8c98aa; font-size: 13px; letter-spacing: 2px; text-shadow: 0 1px 4px #000; }
@media (prefers-reduced-motion: reduce) { #splash .spTerror { animation: none; } }

/* --- side panel --------------------------------------------------------- */
#tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); }
#tabs button { border-bottom: none; border-radius: 4px 4px 0 0; flex: 1; }
#tabs #sheetClose { flex: 0 0 auto; }
#panel { padding: 10px 12px; overflow-y: auto; flex: 1; min-height: 0; }
#panel h3 { margin: 4px 0 8px; color: var(--accent); font-size: 14px; }
#panel h4 { margin: 14px 0 6px; color: var(--gold); font-size: 13px; font-weight: normal; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.kv span:first-child { color: var(--dim); }
.kv span:last-child { text-align: right; }
.list { display: flex; flex-direction: column; gap: 1px; }
.list a { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 3px;
          color: var(--text); text-decoration: none; cursor: pointer; }
.list a:hover { background: var(--panel-hi); }
.list a .dim { font-size: 12px; text-align: right; }
.list a.sel { background: #22384a; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
          vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(0,0,0,.5); }
.note { color: var(--dim); font-size: 12px; margin-top: 12px; }

.mobileonly { display: none; }

/* --- touch: the tip a long press shows, and the hint that sound waits for a tap ------------- */
#tip { position: fixed; z-index: 40; max-width: min(320px, 90vw); background: rgba(18,22,30,.96); color: var(--text, #d8dde6);
       border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: 13px; line-height: 1.35;
       box-shadow: 0 6px 20px rgba(0,0,0,.6); pointer-events: none; }
#soundHint { position: absolute; left: 50%; transform: translateX(-50%); top: calc(80px + env(safe-area-inset-top)); z-index: 3; white-space: nowrap; background: rgba(18,22,30,.88); border: 1px solid var(--line);
             border-radius: 14px; padding: 5px 11px; font-size: 13px; color: var(--gold); pointer-events: none; }
body.phone button, body.phone #bar { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* --- narrower screens: the labels shorten, then the toolbar scrolls ------ */
@media (max-width: 1250px) {
  #bar { gap: 8px; padding: 0 8px; }
  .barL, .barR { gap: 6px; }
  #bar button.big { padding: 0 10px; }
  #bar .vol input { width: 70px; }
  #evlog { left: 358px; transform: none; align-items: flex-start; max-width: calc(100% - 400px); min-width: 0; }
}
/* (too narrow for both sides to fit round a centred dial -- see fitBar: one row, in order, scrolling if it must) */
#bar.flow { display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 8px; }
#bar.flow .ic { display: none; }
#bar.flow .barL, #bar.flow .barR { gap: 6px; }
#bar.flow button.big { padding: 0 10px; }
#bar.flow .barL, #bar.flow .barR { flex: 0 0 auto; }
@media (max-width: 1050px) {
  #bar .ic { display: none; }
  .keys button { width: 32px; }
  #topbar .tbSpeed { display: none; }
}

/* --- phones: the side panel becomes a bottom sheet ---------------------- */
/* a phone, upright -- or on its side (a touch screen, not very tall) */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  :root { --bar: 64px; }
  #app, body.sheet #app { grid-template-columns: 1fr; grid-template-rows: 1fr calc(var(--bar) + env(safe-area-inset-bottom)); }
  #side { display: none; position: fixed; left: 0; right: 0; bottom: 0; height: 55%;
          z-index: 5; border-left: none; border-top: 1px solid var(--line); }
  #bar { display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 6px env(safe-area-inset-bottom); }
  .barL, .barR { flex: 0 0 auto; }
  .barR { justify-content: flex-start; }
  #bar button.big { height: 42px; font-size: 13px; }
  #moreMenu { position: fixed; bottom: calc(var(--bar) + 8px + env(safe-area-inset-bottom)); right: 6px; left: 6px; width: auto; }
  #topbar { height: auto; flex-wrap: wrap; padding-top: env(safe-area-inset-top); }
  #topbar .tb { flex: 1 1 45%; padding: 3px 8px; }
  #topbar .tbTown, #topbar .tbSpeed { display: none; }
  #pmWrap { width: 120px; flex-basis: 120px; }
  #counts { top: calc(44px + env(safe-area-inset-top)); left: 6px; width: 220px; padding: 5px; }
  .cnt b { font-size: 14px; }
  #evlog { top: calc(150px + env(safe-area-inset-top)); left: 6px; right: 6px; transform: none; max-width: none; min-width: 0; align-items: stretch; }
  #evlog div { white-space: normal; font-size: 12px; line-height: 1.3; padding: 4px 8px; }
  #godbar { left: 6px; right: 6px; transform: none; display: flex; flex-wrap: wrap; gap: 4px; bottom: 6px; }
  #godbar.hidden { display: none; }
  .pkGrid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 118px; overflow-y: auto; gap: 10px; }
  /* (the zombie tile across the top, two rows tall -- it used to spill under the row below) */
  .tile.hero { grid-row: span 2; grid-column: 1 / span 2; min-height: 0; }
  /* the scenario tiles on a phone: the name across the top, the Select button the width of the tile at the bottom
   * (side by side, they ran over each other); no lifting or sliding descriptions on a tap */
  /* --- the game on a phone: everything on one screen ---------------------------------------------------- */
  /* the bottom bar: one row of six, icon over a short word, nothing off the edge */
  #bar, #bar.flow { display: flex; overflow: hidden; gap: 4px; padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); align-items: stretch; }
  #bar .barL, #bar .barR, #bar .grp, #bar .grp.small { display: contents; }
  #bar #dial, #bar .vol, #bar #follow, #bar #fit, #bar #tCtrl { display: none; }
  #bar button.big, #bar #tGod { flex: 1 1 0; min-width: 0; height: auto; padding: 4px 2px; border-radius: 9px; font-size: 11px; line-height: 1.1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #bar .ic, #bar.flow .ic, #bar .pi { display: block; font-size: 19px; opacity: .95; }
  #bar #apocTxt, #bar .dl { display: none; }
  #bar button.big, #bar #tGod { font-size: 10.5px; }
  #bar #apocBtn { flex-grow: 1.35; }
  #bar .pl { display: inline; }
  .phoneOnly { display: revert; }
  #moreMenu .mmHead.phoneOnly { display: block; }
  #moreMenu .mmVol { flex-basis: 100%; display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 13px; }
  #moreMenu .mmVol input { flex: 1; accent-color: var(--gold); }
  /* the top: the panic meter and the clock on one line */
  #topbar { flex-wrap: nowrap; gap: 0; }
  #topbar .tb { flex: 0 1 auto; padding: 3px 7px; }
  #topbar .tbPanic { flex: 1 1 auto; min-width: 0; }
  #topbar .tbPanic > .dim { display: none; }
  #pmWrap { width: auto; flex: 1 1 auto; min-width: 70px; }
  #cTime { display: none; }
  /* the counts: smaller, and out of the way of the speed slider */
  #counts { width: 200px; padding: 4px 5px; left: auto; right: 6px; }
  #cntGrid { gap: 3px; }
  .cnt { padding: 2px 5px; }
  .cnt b { font-size: 13px; }
  .cnt span { font-size: 9.5px; }
  #cntHead { font-size: 9.5px; margin-bottom: 2px; }
  /* the speed slider, up the left side of the map */
  #vspeed { display: flex; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 4; gap: 6px; padding: 10px 8px;
    background: rgba(12,16,24,.82); border: 1px solid #2e3644; border-radius: 22px; touch-action: none; user-select: none; -webkit-user-select: none; }
  #vspeed .vsTrack { position: relative; width: 6px; height: 196px; margin: 0 4px; border-radius: 3px; background: linear-gradient(#e8604a, #e8c04a 60%, #8c98aa); }
  #vspeed .vsThumb { position: absolute; left: 50%; bottom: calc(var(--k, 1) * 20% - 11px); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
    background: #f0ead8; border: 3px solid #e8c04a; box-shadow: 0 2px 8px rgba(0,0,0,.6); transition: bottom .12s; }
  #vspeed .vsStops { display: flex; flex-direction: column; justify-content: space-between; height: 218px; margin: -11px 0; }
  #vspeed .vsStops span { font: bold 12px Consolas, monospace; color: #8c98aa; line-height: 22px; height: 22px; }
  #vspeed .vsStops span.on { color: #f0ead8; }
  #side { height: 60%; z-index: 6; }
  #tabs { gap: 2px; padding: 6px 5px 0; overflow: hidden; }
  #tabs button { flex: 1 1 auto; min-width: 0; padding: 8px 3px; font-size: 10.5px; letter-spacing: -.2px; }
  #tabs #sheetClose { padding: 8px 9px; font-size: 14px; }
  #pkGrid .tile .tl, #pkGrid .tile:hover .tl, #pkGrid .tile:focus-visible .tl { top: 0; bottom: auto; padding: 9px 11px 26px;
    background: linear-gradient(rgba(0,0,0,.82) 45%, transparent); }
  #pkGrid .tile .tl b { font-size: 16px; line-height: 1.15; }
  #pkGrid .tile.hero .tl b { font-size: 26px; }
  #pkGrid .tile .tl span, #pkGrid .tile:hover .tl span { max-height: 0; opacity: 0; margin: 0; }
  #pkGrid .tile.hero .tl span, #pkGrid .tile.hero:hover .tl span { max-height: none; opacity: 1; transform: none; margin-top: 4px; font-size: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #pkGrid .tile .sel, #pkGrid .tile.hero .sel { left: 9px; right: 9px; bottom: 9px; height: 34px; font-size: 14px; padding: 0; border-radius: 17px; }
  #pkGrid .tile.hero .sel { left: auto; width: 46%; height: 40px; border-radius: 20px; font-size: 16px; }
  .tile:hover { transform: none; }
  /* (the three town tiles stacked, each a third of the screen; the name and words above, Select below) */
  .pkGrid.cp { grid-template-columns: 1fr; grid-template-rows: repeat(3, minmax(150px, 1fr)); grid-auto-rows: auto; }
  #cpGrid .tile .tl { top: 42%; padding: 10px 14px; }
  #cpGrid .tile .tl b { font-size: 32px; }
  #cpGrid .tile .tl span { font-size: 13px; margin-top: 4px; }
  #cpGrid .tile .sel { bottom: 12px; height: 38px; font-size: 15px; padding: 0 22px; border-radius: 19px; }
  .cfgHead { flex-wrap: wrap; }
  .cfgBtns { flex-direction: row; width: 100%; order: 3; }
  .cfgBtns button { min-width: 0; flex: 1; }
  /* (Start on a strip of its own along the bottom, fading up into the list, which scrolls clear above it) */
  .cfgGo { position: fixed; left: 0; right: 0; top: auto; bottom: calc(var(--bar) + env(safe-area-inset-bottom)); transform: none;
           padding: 22px 12px 10px; background: linear-gradient(rgba(8,12,20,0), #080c14 38%); }
  .cfgGo .go { width: 100%; height: 56px; font-size: 20px; }
  #apocSetup .cfgBody, #citySetup .cfgBody { margin-right: 0; padding-bottom: 110px; }
  .cfgBody { columns: auto; column-width: auto; overflow-y: auto; overflow-x: hidden; }
  /* (no keyboard to steer with on a phone) */
  body.phone #tCtrl { display: none !important; }
}

/* --- the end of an outbreak --------------------------------------------- */
#endScreen { position: absolute; inset: 0; background: rgba(4,6,10,.55); display: flex; align-items: center; justify-content: center; z-index: 11; }
#endBox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px; width: min(420px, 92%);
          box-shadow: 0 10px 40px rgba(0,0,0,.6); text-align: center; }
#endBox.won { border-color: #3a7a4a; } #endBox.lost { border-color: #7a2a22; }
#endBox h3 { margin: 0 0 6px; font-size: 24px; }
#endBox.won h3 { color: #7ae08a; } #endBox.lost h3 { color: #ff7a6a; }
#endBox > p { margin: 0 0 14px; }
#endStats { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; text-align: left; margin: 0 auto 16px; max-width: 300px; }
#endStats span:nth-child(even) { color: var(--gold); text-align: right; }
#endNotable { text-align: left; margin: 0 auto 14px; max-width: 340px; font-size: 13px; line-height: 1.5; }
#endNotable h4 { margin: 0 0 4px; color: var(--gold); font-size: 13px; }
#endNotable a, #panel .story a { color: var(--accent); cursor: pointer; }
#panel .story { font-size: 12px; line-height: 1.45; }
#endBox .row { display: flex; gap: 8px; } #endBox .row button { flex: 1; padding: 8px; }