/* ============================================================
   AURORA HUNTING PRO — style
   Dark-first (night use). Red mode preserves night vision.
   ============================================================ */

:root {
  --bg: #060913;
  --bg2: #0a1122;
  --panel: rgba(15, 23, 44, .82);
  --panel-solid: #0e1628;
  --line: #1d2c49;
  --text: #e9f1fc;
  --dim: #8fa3c2;
  --faint: #5a6c8c;
  --acc: #3dffb5;
  --acc-soft: rgba(61, 255, 181, .14);
  --acc2: #8a6bff;
  --chart-bt: #c4a5ff;
  --chart-bt-soft: rgba(196, 165, 255, .10);
  --warn: #ffc857;
  --bad: #ff5878;
  --go: #2bea9c;
  --maybe: #ffc857;
  --low: #ff5878;
  --radius: 16px;
  --nav-h: 62px;
  --header-h: 58px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --lvl0: #4a9c83;   /* weak/quiet factor; missing data uses a grey dashed line */
  --lvl1: #4d7bbd;   /* something stirring */
  --lvl2: #ffc857;   /* decent - worth watching */
  --lvl3: #ff3d71;   /* drop everything */
  --font: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
}

/* Red mode — astronomer's night-vision palette */
html[data-red] {
  --bg: #0c0304;
  --bg2: #150506;
  --panel: rgba(34, 8, 10, .85);
  --panel-solid: #1d0709;
  --line: #47121a;
  --text: #ffb4a8;
  --dim: #c26f66;
  --faint: #8c463f;
  --acc: #ff6a5a;
  --acc-soft: rgba(255, 106, 90, .14);
  --acc2: #ff8f7a;
  --chart-bt: #d9a29b;
  --chart-bt-soft: rgba(217, 162, 155, .10);
  --warn: #ff9a6a;
  --bad: #ff4d4d;
  --go: #ff7a5a;
  --maybe: #e0705a;
  --low: #a84438;
  --lvl0: #3d1417;
  --lvl1: #7a2a24;
  --lvl2: #c2543f;
  --lvl3: #ff6a5a;
}
html[data-red] img, html[data-red] iframe { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(-25deg) brightness(.75); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(138, 107, 255, .12), transparent 60%),
    radial-gradient(1000px 600px at 10% -20%, rgba(61, 255, 181, .10), transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
  overscroll-behavior-y: contain;
}
html[data-red] body { background: var(--bg); }

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; width: 100%; }
input:focus, textarea:focus { border-color: var(--acc); }
a { color: var(--acc); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(6, 9, 19, .96), rgba(6, 9, 19, .82));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
html[data-red] header { background: linear-gradient(180deg, rgba(12,3,4,.96), rgba(12,3,4,.85)); }
.logo { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
/* Short wordmark: it fits beside the pin chip even on a 375 px phone, so the
   app finally keeps its name on mobile instead of hiding it. */
.brand { line-height: 1; margin-right: auto; min-width: 0; }
.brand b { font-size: 18px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; display: block; }
.brand b i { font-style: normal; color: var(--acc); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--panel);
  padding: 7px 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--text); white-space: nowrap;
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.chip:active { transform: scale(.97); }
.iconbtn {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 17px;
  border: 1px solid var(--line); background: var(--panel);
}
.iconbtn.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
/* phones: the app name is decoration, the pin chip is a control - drop the
   decoration first so nothing ever overlaps */
@media (max-width: 560px) {
  header { gap: 6px; padding: 0 8px; }
  .brand b { font-size: 15px; }
  /* every px here goes to the pin chip so the base name is not truncated */
  .chip { max-width: 42vw; padding: 7px 8px; font-size: 12px; gap: 4px; }
  .iconbtn { width: 33px; height: 33px; font-size: 15.5px; }
}
@media (max-width: 360px) { .brand { display: none; } }
#locName { overflow: hidden; text-overflow: ellipsis; }
.iconbtn:active { transform: scale(.94); }
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; display: inline-block; }

/* ---------- layout ---------- */
main { max-width: 860px; margin: 0 auto; padding: 14px 12px 30px; }
.page { display: none; animation: fadein .25s ease; }
.page.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.section-title {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin: 22px 2px 10px; display: flex; align-items: center; gap: 8px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 10px; }
.grid.metrics { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }

/* ---------- night selector ---------- */
.nightsel { gap: 7px; margin-bottom: 4px; }
.nightchip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 13px; line-height: 1.15; }
.nightchip b { font-size: 11.5px; letter-spacing: .07em; }
.nightchip span { font-size: 9.5px; color: var(--faint); }
.nightchip.on span { color: var(--acc); }
.nightnote { font-size: 11.5px; color: var(--dim); margin: 0 2px 10px; }
.nightnote b { color: var(--text); }

/* ---------- verdict ---------- */
.verdict { display: flex; gap: 16px; align-items: center; padding: 16px; }
.ring-wrap { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-score { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring-score b { font-size: 30px; line-height: 1; }
.ring-score span { font-size: 9.5px; color: var(--dim); letter-spacing: .1em; }
.verdict-info { min-width: 0; flex: 1; }
.verdict-label { font-size: 21px; font-weight: 800; letter-spacing: .03em; margin-bottom: 3px; }
.verdict-label.go { color: var(--go); } .verdict-label.maybe { color: var(--maybe); } .verdict-label.low { color: var(--low); }
.verdict-why { color: var(--dim); font-size: 13px; line-height: 1.45; }
.verdict-best { margin-top: 9px; font-size: 13px; }
.verdict-best button { color: var(--acc); font-weight: 700; font-size: 13px; padding: 0; }

/* ---------- metric cards ---------- */
/* Each line rates its own factor, green through red; unknown is grey/dashed.
   In red night-vision mode the four levels are shown as brightness. */
.metric { position: relative; overflow: hidden; }
.metric[data-lvl]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--lvl0); transition: background .4s ease;
}
.metric[data-lvl="1"]::before { background: var(--lvl1); }
.metric[data-lvl="2"]::before { background: var(--lvl2); }
.metric[data-lvl="3"]::before {
  background: var(--lvl3);
  box-shadow: 0 0 10px var(--lvl3);
  animation: lvlpulse 2.4s ease-in-out infinite;
}
.metric[data-lvl=""]::before { background: repeating-linear-gradient(90deg,var(--dim) 0 9px,transparent 9px 15px); opacity:.5; }
.metric[data-lvl="0"] .val > span { color:var(--lvl0); }
.metric[data-lvl="1"] .val > span { color:var(--lvl1); }
.metric[data-lvl="2"] .val > span { color:var(--lvl2); }
.metric[data-lvl="3"] .val > span { color:var(--lvl3); }
@keyframes lvlpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .metric[data-lvl="3"]::before { animation: none; } }
.card.metric, .card.verdict, .tonight-card { cursor: pointer; }
.card.metric:active { transform: scale(.985); }
/* metric popup content */
.bigchart { width: 100%; height: 190px; display: block; margin: 8px 0 2px; }
.chart-time-legend{display:grid;gap:8px;margin:16px 0 8px;font-size:14px;font-weight:600;line-height:1.4}
.chart-time-legend>div{display:flex;align-items:center;gap:10px;min-width:0}
.chart-time-legend i{width:26px;flex:0 0 26px;border-top:3px dashed currentColor}
.chart-time-earth{color:var(--acc2)}.chart-time-now{color:var(--warn)}
.chart-series-key{flex-wrap:wrap;column-gap:18px!important;font-size:12px}
.chart-series-primary{color:var(--acc)}.chart-series-secondary{color:var(--acc2)}
.mnote { font-size: 12px; color: var(--dim); line-height: 1.5; margin-top: 8px; }
.mrow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13px; }
.mrow:last-child { border-bottom: none; }
.mrow b { font-variant-numeric: tabular-nums; }
.mrow .dim { color: var(--dim); }
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.mcal .wd { text-align: center; font-size: 10px; color: var(--faint); letter-spacing: .08em; }
.mcal .day {
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 2px 5px;
  text-align: center; background: var(--bg2);
}
.mcal .day .dnum { font-size: 10px; color: var(--faint); }
.mcal .day .em { font-size: 17px; line-height: 1.25; }
.mcal .day .ill { font-size: 9px; color: var(--dim); }
.mcal .day.today { border-color: var(--acc); box-shadow: 0 0 8px var(--acc-soft); }
.mcal .day.off { opacity: .28; }
.mcalnav { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mcalnav b { font-size: 14px; }
.evrow { display: flex; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed var(--line); font-size: 13px; align-items: baseline; }
.evrow:last-child { border-bottom: none; }
.evrow .on { color: var(--acc); font-weight: 700; }
.evrow small { color: var(--faint); }
.colab { display: block; font-size: 11px; color: var(--dim); letter-spacing: .06em;
  text-transform: uppercase; margin: 9px 2px 4px; }
/* ---------- aurora explainer video ---------- */
.videocard {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 12px 0 2px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--acc); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(61,255,181,.14), rgba(138,107,255,.16)), var(--panel);
  box-shadow: var(--shadow);
}
.videocard:active { transform: scale(.985); }
.videocard .vplay {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; padding-left: 3px;
  background: var(--acc); color: #04140d;
}
.videocard .vtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.videocard .vtxt b { font-size: 15.5px; }
.videocard .vtxt span { font-size: 11.5px; color: var(--dim); }

.modal.video { background: rgba(2, 4, 10, .96); }
.vwrap { position: relative; width: min(100%, 960px); margin: auto; }
.vwrap video { width: 100%; display: block; border-radius: 12px; background: #000; }
.vcap {
  position: absolute; left: 4%; right: 4%; bottom: 8%;
  text-align: center; font-size: clamp(16px, 3.4vw, 27px); font-weight: 700; line-height: 1.35;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.8);
  pointer-events: none;
}
.vclose { position: absolute; top: 10px; right: 10px; z-index: 3; }
.vmodes { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.vmodes button {
  padding: 7px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); background: rgba(10, 16, 30, .82); color: var(--dim);
}
.vmodes button.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.vbig {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px;
  border-radius: 50%; background: rgba(61,255,181,.92); color: #04140d;
  font-size: 34px; padding-left: 7px; display: grid; place-items: center; z-index: 2;
}
.vbig[hidden] { display: none; }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.14); border-radius: 0 0 12px 12px; overflow: hidden; }
.vbar i { display: block; height: 100%; width: 0%; background: var(--acc); }
.vmiss { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; font-size: 14px; }
html[data-red] .vcap { color: var(--text); }

/* ---------- poker v2: chat, variants, tournaments, sprites ---------- */
.pbubble {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #eaf2ff; color: #16233a; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px; white-space: nowrap; z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.pbubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: #eaf2ff;
}
.pchat { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.pchat.hiddenrow { display: none; }
.pchip {
  border: 1px solid var(--line); background: var(--panel); color: #dfe8f5;
  font-size: 11.5px; padding: 5px 9px; border-radius: 99px; cursor: pointer;
}
.pvarrow { display: flex; gap: 6px; justify-content: center; }
.pout { font-size: 9.5px; color: var(--warn); font-weight: 800; letter-spacing: .05em; }
.pseat .ptb { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: #22304e; border-radius: 99px; overflow: hidden; }
.pseat .ptb i { display: block; height: 100%; background: linear-gradient(90deg, #ffd166, #ff5c74); transition: width 1s linear; }
.abtn.big { padding: 12px 22px; font-size: 15px; }
.gcbadge {
  display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 99px; background: var(--bad); color: #fff; font-size: 9.5px; font-style: normal; font-weight: 800;
  margin-left: 3px; vertical-align: middle;
}
.gcwrap { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.gcinvs { border-bottom: 1px solid var(--line); }
.gcinv {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 7px 10px; font-size: 12.5px; border-bottom: 1px solid rgba(120,150,200,.1);
}
.gcinv:last-child { border-bottom: none; }
.gcnone { padding: 8px 10px; font-size: 11.5px; }
.gclist { max-height: 190px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.gcwrap.compact .gclist { max-height: 120px; }
/* the remove button on a games-room message: quiet until the row is hovered or
   tapped, because it sits next to every message you wrote */
.gcmsg { position: relative; }
.gcmsg .gcdel { position: absolute; right: 4px; top: 4px; background: transparent; border: 0;
                color: var(--faint); font-size: 12px; cursor: pointer; padding: 2px 6px; opacity: .55; }
.gcmsg:hover .gcdel, .gcmsg:focus-within .gcdel { opacity: 1; color: var(--bad); }
.gcmsg { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.35; }
.gcmsg.mine .gcbody { color: var(--acc); }
.gcav { font-size: 17px; flex: 0 0 auto; }
.gcbody i { font-style: normal; font-size: 10px; color: var(--faint); }
.gcsend { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.gcsend input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: #0d1526; color: #eaf2ff; font-size: 13px;
}
.pchatpanel { margin: 8px 0; }
.pchatpanel .pchat { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.pslide { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 10px auto 0; max-width: 340px; }
.pslide input[type="range"] { flex: 1; accent-color: var(--acc); height: 26px; }
.pslide b { min-width: 54px; text-align: right; color: var(--acc); font-size: 15px; }
.pvar {
  flex: 1; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--dim); font-size: 13px; font-weight: 700; cursor: pointer;
}
.pvar.on { border-color: var(--acc); color: var(--acc); background: rgba(64, 224, 200, .1); }
.ptlbl { display: flex; align-items: center; gap: 8px; font-size: 13px; justify-content: space-between; }
.ptin {
  width: 90px; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: #0d1526; color: #eaf2ff; font-size: 14px;
}
.ptplayer {
  display: inline-block; border: 1px solid var(--line); border-radius: 99px;
  padding: 3px 10px; font-size: 12px; margin: 2px;
}
/* board art: one PNG per beast/prop/item, sized to the tile like the heroes */
.cvart {
  display: block; width: 100%; height: 100%; margin: auto;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  image-rendering: pixelated;
}
.cvhero {
  display: block; width: 94%; height: 94%; margin: auto;
  background-size: 300% 100%; background-repeat: no-repeat;
  image-rendering: pixelated;
}
.cvhero.flip { transform: scaleX(-1); }

/* ---------- poker + avatars + leaderboards ---------- */
.avrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 12px; }
.avbig { font-size: 30px; }
.scgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.scblock { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.scblock > .mut { font-size: 10px; margin-bottom: 5px; }
.scline { display: flex; justify-content: space-between; padding: 2px 0; }
.ptable { border: 1px solid var(--line); border-radius: 18px; padding: 10px;
  background: radial-gradient(ellipse at center, rgba(10, 61, 40, .30), rgba(8, 12, 22, .72)), url("../media/table.webp") center / cover, var(--panel); }
.prow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcenter { text-align: center; padding: 14px 4px; min-height: 90px; }
.pboard { display: flex; gap: 5px; justify-content: center; margin-bottom: 6px; }
.pcard {
  display: inline-grid; place-items: center; width: 42px; height: 58px; border-radius: 6px;
  background: #e9edf5; color: #16233a; font-weight: 800; font-size: 14px; border: 1px solid #8fa3c2;
}
.pcard.sm { width: 30px; height: 42px; font-size: 11px; }
.pcard.r { color: #c62842; }
.pcard.back { background: linear-gradient(135deg, #1d2c49, #3b1355); color: #8fa3c2; }
.ppot { font-size: 13px; color: var(--warn); font-weight: 700; }
.pres { margin-top: 6px; font-size: 13px; color: var(--acc); font-weight: 700; line-height: 1.5; }
.pseat { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 7px 6px; text-align: center; background: rgba(10, 16, 30, .5); min-height: 96px; }
.pseat.empty { display: grid; place-items: center; }
.pseat.turn { border-color: var(--acc); box-shadow: 0 0 12px var(--acc-soft); }
.pseat.folded { opacity: .38; }
.pav { font-size: 24px; position: relative; }
.pdlr { position: absolute; top: -4px; right: 8px; font-style: normal; font-size: 9px; font-weight: 800; background: var(--warn); color: #221; border-radius: 50%; padding: 2px 5px; }
.pnm { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pch { font-size: 11px; color: var(--dim); }
.pcards { margin-top: 3px; display: flex; gap: 3px; justify-content: center; }

/* leaderboards: boards vs career stats */
.sctabs { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.sctab { font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; cursor: pointer; color: var(--dim);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.sctab.on { color: var(--acc); border-color: var(--acc); background: rgba(61,255,181,.10); }
.scgrid.stats { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.sctable { width: 100%; border-collapse: collapse; margin-top: 7px; font-size: 11.5px; }
.sctable th + th, .sctable td + td { padding-left: 10px; }
.sctable th { white-space: nowrap; }
.sctable th { font-weight: 600; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); text-align: right; padding: 2px 0 4px; }
.sctable th:first-child { text-align: left; }
.sctable td { text-align: right; padding: 3px 0; color: var(--txt);
  border-top: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.sctable td.scwho { text-align: left; color: var(--dim); max-width: 118px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* explainer video: transport, chapter ticks, and the redrawn solar-wind shot */
.vshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2; pointer-events: none; background: #03050c; }
.vcap { z-index: 4; }
.vbig, .vmodes, .vclose { z-index: 5; }
.vctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px;
  background: linear-gradient(transparent, rgba(2,5,12,.82) 45%); }
.vnav { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
  color: #eaf2ff; border-radius: 9px; width: 34px; height: 30px; cursor: pointer;
  font-size: 13px; line-height: 1; flex: 0 0 auto; }
.vnav:hover { background: rgba(255,255,255,.2); }
.vctl .vbar { position: relative; flex: 1; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.18); cursor: pointer; overflow: visible; }
.vctl .vbar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.vticks { position: absolute; inset: 0; pointer-events: none; }
.vticks b { position: absolute; top: -2px; width: 2px; height: 10px;
  background: rgba(255,255,255,.42); border-radius: 1px; }
.vtime { font-size: 11px; color: #cfe0f5; min-width: 34px; text-align: right; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
.vwrap:fullscreen { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.vwrap:fullscreen video, .vwrap:fullscreen .vshot { width: 100%; height: 100%; object-fit: contain; }

/* the in-app camera popup: stay in the app, just look at the sky */
.campop { position: relative; background: #05080f; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.campop-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.campop-frame { width: 100%; height: 100%; border: 0; display: block; }
.campop-fail { display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: 12.5px; color: var(--dim); }
.campop.failed .campop-img { display: none; }
.campop.failed .campop-fail { display: flex; }
/* Several views of the same place, stacked in one box and switched in place —
   the same idea as the ↻ button on the grid cards. */
.campop .camview { position: absolute; inset: 0; display: none; }
.campop .camview.on { display: block; }
.campop .camview.broke { opacity: .12; }
.campop-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 2; }
.camtool { background: rgba(6, 10, 18, .74); color: var(--text); border: 1px solid var(--line);
           border-radius: 9px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
           backdrop-filter: blur(3px); }
.camtool:hover { border-color: var(--acc); }
.camtool b { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.camviewlbl { font-size: 11.5px; color: var(--dim); margin-top: 7px; text-align: center; }
/* Full-screen the PICTURE, not the app: the browser paints its own black behind
   it, so the image just needs to fill what it is given. */
.campop:fullscreen { width: 100vw; height: 100vh; border-radius: 0; aspect-ratio: auto; background: #000; }
.campop:fullscreen .campop-img { object-fit: contain; }
.campop:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; background: #000; }
.campop-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.campop-foot .mut { flex: 1; font-size: 11.5px; }
@media (max-width: 560px) { .campop { aspect-ratio: 4 / 3; } }

/* a camera for the spot, right beside its name */
.camchip { flex: 0 0 auto; margin-left: 5px; font-size: 13px; line-height: 1; text-decoration: none;
  background: none; border: 0; padding: 0 2px; cursor: pointer; font-family: inherit;
  opacity: .62; transition: opacity .15s ease, transform .15s ease; }
.camchip:hover { opacity: 1; transform: scale(1.18); }
/* a camera whose site serves no still image — say so instead of a broken tile */
.cam-link { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 100%; min-height: 116px; color: var(--dim);
  background: linear-gradient(150deg, rgba(61,255,181,.06), rgba(138,107,255,.07)); }
.cam-link span { font-size: 25px; opacity: .85; }
.cam-link b { font-size: 11px; font-weight: 600; letter-spacing: .06em; }

/* ---------- povaus (fortune telling) ---------- */
.fogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin: 14px auto; max-width: 520px; }
.fobtn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 13px;
  border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--txt); cursor: pointer; font-family: inherit; }
.fobtn:hover { border-color: var(--acc); background: rgba(61,255,181,.07); }
.fobtn b { font-size: 13.5px; }
.fobtn i { font-style: normal; font-size: 10.5px; color: var(--dim); line-height: 1.35; }
.foask { display: flex; gap: 8px; max-width: 480px; margin: 10px auto 0; }
.foask .inp { flex: 1; }
.foq { text-align: center; font-size: 14px; color: var(--dim); font-style: italic; margin: 10px 0 2px; }
.focards { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 16px auto; max-width: 660px; }
.forow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.forowwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forowlabel { font: 600 10px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); text-align: center; min-height: 12px; }
.focards.pyr .fopos { display: none; }
/* the pyramid reads base-up, so the rows narrow as they rise */
.focards.pyr .focard { width: 108px; }
.focards.pyr .fomean { font-size: 10.5px; line-height: 1.42; }
.focut { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px auto; }
.focutdeck { font-size: 78px; line-height: 1; color: var(--acc); text-shadow: 0 6px 18px rgba(0,0,0,.6); }
.focutdeck.cut { animation: focut .5s ease; }
.focutrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.fowho { display: flex; gap: 7px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.fowho .mut { font-size: 11.5px; }
.fogen { padding: 5px 12px; border-radius: 999px; cursor: pointer; font: 600 12px/1 system-ui, sans-serif;
  color: var(--dim); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.fogen.on { color: var(--acc); border-color: var(--acc); background: rgba(61,255,181,.10); }
.foshuf { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.foshuf .mut { font-size: 11px; }
@keyframes focut { 30% { transform: translateX(-5px) rotate(-2deg) } 65% { transform: translateX(5px) rotate(2deg) } }
.focard { width: 132px; text-align: center; }
.focard.back { opacity: .35; }
.focard.in { animation: fofade .45s ease both; }
@keyframes fofade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.fopos { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; min-height: 13px; }
.fokey { font-size: 13px; font-weight: 700; margin-top: 7px; color: var(--acc); }
.fomean { font-size: 11.5px; line-height: 1.5; color: var(--dim); margin-top: 4px; }
.fotone { text-align: center; font-size: 13px; line-height: 1.55; color: var(--txt);
  max-width: 460px; margin: 6px auto 0; padding: 10px 14px;
  border-left: 2px solid var(--acc); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }
.foverdict { text-align: center; font-size: 19px; font-weight: 700; margin-top: 10px; }
.foverdict.yes { color: var(--acc); }
.foverdict.no { color: var(--warn); }
@media (max-width: 520px) { .focard { width: 104px; } .fomean { font-size: 11px; } }

/* ---------- card games (ristiseiska / mustamaija) ---------- */
/* ---------- the ❓ rules sheet ---------- */
.rulesbtn { font-size: 15px; padding: 6px 11px; line-height: 1; }
.rulesmodal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 18px; background: rgba(3, 6, 13, .72); backdrop-filter: blur(3px);
  animation: rulesIn .16s ease;
}
@keyframes rulesIn { from { opacity: 0 } }
.rulescard {
  width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.ruleshead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ruleshead b { font-size: 16px; }
.ruleshead .abtn { margin-left: auto; }
.ruleslead { margin: 0 0 12px; color: var(--txt); font-size: 14px; line-height: 1.5; }
.ruleslist { margin: 0; padding-left: 20px; color: var(--dim); font-size: 13px; line-height: 1.62; }
.ruleslist li + li { margin-top: 7px; }
.rulesgo { display: block; width: 100%; margin-top: 16px; padding: 11px; }
@media (max-width: 430px) { .rulescard { padding: 15px 15px 16px; } .ruleslist { font-size: 12.5px; } }

/* ---------- the card table: one seat to a side ---------- */
.cdtablewrap {
  display: grid; gap: 6px; max-width: 560px; margin: 10px auto 12px;
  grid-template-columns: minmax(64px, 88px) 1fr minmax(64px, 88px);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: ".  top  ." "left felt right" ".  bot  .";
  align-items: center;
}
.cdfelt {
  grid-area: felt; min-height: 96px; padding: 10px 12px; display: grid; place-items: center;
  border-radius: 90px / 60px; border: 1px solid rgba(61,255,181,.18);
  background: radial-gradient(ellipse at 50% 42%, #14503a 0%, #0d3527 62%, #0a2a1f 100%);
  box-shadow: inset 0 2px 22px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
}
.cdseat-top { grid-area: top; } .cdseat-bot { grid-area: bot; }
.cdseat-left { grid-area: left; } .cdseat-right { grid-area: right; }
.cdseat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border-radius: 12px; border: 1px solid transparent;
  color: var(--dim); font-size: 11px; transition: border-color .18s, box-shadow .18s;
}
.cdav { font-size: 26px; line-height: 1.05; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.cdnm { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdcount { color: var(--txt); font-weight: 700; font-size: 12.5px; }
.cdseat.on { border-color: var(--acc); box-shadow: 0 0 14px rgba(61,255,181,.20); color: var(--acc); }
.cdseat.on .cdav { animation: cdturn 1.4s ease-in-out infinite; }
@keyframes cdturn { 50% { transform: translateY(-3px) scale(1.06) } }
.cdseat.you .cdnm { color: var(--acc); }
.cdseat.safe, .cdseat.out { opacity: .45; }
.cdseat.lost { border-color: var(--warn); color: var(--warn); }
.cdseat.target { border-color: var(--warn); box-shadow: 0 0 14px rgba(255,180,80,.22); }
.cdpile { font-size: 40px; color: #cfe9dd; text-shadow: 0 4px 10px rgba(0,0,0,.5); }
/* two-handers have no flanks, so the felt takes the width back */
.cdtablewrap.cdseats-2 { grid-template-columns: 0 1fr 0; }
@media (max-width: 430px) {
  .cdtablewrap { grid-template-columns: minmax(54px, 70px) 1fr minmax(54px, 70px); }
  .cdav { font-size: 22px; }
}
.cdtable { max-width: 420px; margin: 0 auto; padding: 6px 10px; width: 100%;
  border-radius: 10px; background: rgba(0,0,0,.20); }
.cdrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; letter-spacing: .06em; }
.cdrow + .cdrow { border-top: 1px solid rgba(255,255,255,.05); }
.cdrow b { width: 20px; font-size: 17px; color: var(--txt); }
.cdrow.r b { color: #ff6b83; }
.cdrow span { color: var(--dim); }
.cdmsg { text-align: center; font-size: 12px; color: var(--dim); margin: 8px 0 2px; min-height: 16px; }
.cdhand, .cddraw { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.cdc { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.cdc[disabled] { cursor: default; }
.cdc.ok .pcard { outline: 2px solid var(--acc); outline-offset: 1px; }
.cdc.no .pcard { opacity: .38; }
.cdc.maija .pcard { outline: 2px solid var(--warn); outline-offset: 1px; }
.cdc:not([disabled]):hover .pcard { transform: translateY(-4px); }
.cdc .pcard { transition: transform .12s ease; }
.cdorder { text-align: center; font-size: 12px; color: var(--dim); margin-top: 4px; }
@media (orientation: landscape) and (max-height: 560px) {
  .cdtable { padding: 6px 10px; }
  .cdrow { padding: 2px 0; font-size: 12.5px; }
  .cdhand, .cddraw { margin-top: 7px; }
  .cdseats { margin: 5px 0 6px; }
}
.pbet { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: var(--warn); color: #221; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.pallin { font-size: 9.5px; color: var(--bad); font-weight: 800; letter-spacing: .06em; }
.pactions { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* a phone held sideways is only ~390px tall: shrink the felt so the fold
   never lands between you and the Fold/Call/Raise buttons */
@media (orientation: landscape) and (max-height: 560px) {
  .pseat { min-height: 62px; padding: 4px; }
  .pav { font-size: 17px; }
  .pnm { font-size: 10px; }
  .pch { font-size: 9.5px; }
  .pcard { width: 30px; height: 42px; font-size: 11px; }
  .pcard.sm { width: 21px; height: 29px; font-size: 8.5px; }
  .pcenter { padding: 5px 2px; min-height: 52px; }
  .ppot { font-size: 11.5px; }
  .pres { font-size: 11px; }
  .ptable { padding: 5px; border-radius: 12px; }
  .prow { gap: 5px; }
  .pactions { margin-top: 7px; gap: 5px; }
  .pactions .abtn { padding: 7px 11px; font-size: 12.5px; }
  .pslide { margin-top: 5px; }
  .gclist { max-height: 90px; }
}

/* ---------- pub quiz ---------- */
.qzcats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; margin: 14px auto 0; }
.qzcat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: #dfe8f5; font-size: 20px; cursor: pointer; text-align: left;
}
.qzcat.wide { grid-column: 1 / -1; }
.qzcat.hard { border-color: rgba(255, 209, 102, .55); background: linear-gradient(90deg, rgba(255, 209, 102, .12), transparent 60%); }
.qzcat b { font-size: 13.5px; font-weight: 700; }
.qzcat i { font-size: 10.5px; font-style: normal; color: var(--dim); }
.qzcat:active { border-color: var(--acc); }
.qzhud { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.qzscore { font-size: 19px; font-weight: 800; color: var(--acc); }
.qzstreak { font-size: 12.5px; color: var(--warn); font-weight: 700; }
.qzclock { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--dim); min-width: 26px; text-align: right; }
.qzbarwrap { height: 5px; background: #22304e; border-radius: 99px; overflow: hidden; }
.qzbarwrap i { display: block; height: 100%; background: linear-gradient(90deg, #3fd8a8, #ffd166, #ff5c74); transition: width .12s linear; }
.qzq {
  font-size: clamp(15px, 4.4vw, 19px); line-height: 1.45; font-weight: 700;
  text-align: center; padding: 18px 10px 14px; min-height: 74px;
}
.qzopts { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.qzopt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: #eaf2ff; font-size: 14px; line-height: 1.35; cursor: pointer;
}
.qzopt:active { background: rgba(64, 224, 200, .12); }
.qzl {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: #1b2c49; color: var(--acc); font-weight: 800; font-size: 12.5px;
}
.qzopt.right { border-color: #3fd8a8; background: rgba(63, 216, 168, .18); }
.qzopt.right .qzl { background: #3fd8a8; color: #05231a; }
.qzopt.wrong { border-color: #ff5c74; background: rgba(255, 92, 116, .16); }
.qzopt.wrong .qzl { background: #ff5c74; color: #2a0710; }
.qzopt.dim { opacity: .45; }
.qzfeed { text-align: center; font-size: 16px; font-weight: 800; margin-top: 12px; min-height: 22px; }
.qzfeed.good { color: #3fd8a8; }
.qzfeed.bad { color: #ff5c74; }
.qzend { text-align: center; padding: 18px 10px; }
.qzbig { font-size: 46px; font-weight: 800; color: var(--acc); line-height: 1; }
.qzsum { display: flex; gap: 16px; justify-content: center; margin-top: 12px; font-size: 14px; font-weight: 700; }
@media (orientation: landscape) and (max-height: 560px) {
  /* four answers, a question and the clock all have to clear the nav bar */
  .qzq { font-size: 14px; padding: 5px 10px 4px; min-height: 0; }
  .qzopt { padding: 6px 11px; font-size: 12.5px; border-radius: 10px; }
  .qzl { width: 21px; height: 21px; font-size: 11px; }
  .qzopts { gap: 5px; }
  .qzhud { margin: 2px 0 3px; }
  .qzscore { font-size: 15px; }
  .qzfeed { font-size: 13px; margin-top: 5px; min-height: 16px; }
  .qzcats { margin-top: 4px; gap: 6px; }
  .qzcat { padding: 7px 11px; font-size: 16px; }
  .qzbig { font-size: 34px; }
  .qzend { padding: 6px; }
}

/* ---------- space explorer ---------- */
.spwrap { position: relative; width: 100%; }
.spframe {
  display: block; width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: #05070e; height: min(62vh, 560px);
}
.spback { display: none; }
/* a phone held sideways has no room to spare: the cockpit takes the screen,
   with just a floating way back out */
@media (orientation: landscape) and (max-height: 560px) {
  .spwrap {
    position: fixed; inset: 0; z-index: 90; background: #05070e;
  }
  .spframe { height: 100%; border: none; border-radius: 0; }
  .spback {
    position: fixed; left: 8px; top: 8px; z-index: 92; display: block;
    padding: 6px 10px; font-size: 12px; border-radius: 9px;
    border: 1px solid var(--line); background: rgba(8, 14, 28, .72); color: #cfe8ff;
  }
}

/* ---------- frost hell ---------- */
.fpscv {
  display: block; margin: 0 auto;
  width: min(100%, calc(52vh * 16 / 9)); height: auto; aspect-ratio: 16/9;
  image-rendering: pixelated;
  border: 1px solid var(--line); border-radius: 12px; background: #000;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.fpspad {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 560px; margin: 10px auto 0; gap: 16px; user-select: none; -webkit-user-select: none;
}
/* the left thumb stick: a fixed ring with a nub that follows the thumb */
.fpstick {
  width: 116px; height: 116px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line); background:
    radial-gradient(circle at 50% 50%, rgba(64,224,200,.07), rgba(255,255,255,.02) 62%, transparent 70%);
  display: grid; place-items: center; touch-action: none; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.fpstick.on { border-color: var(--acc); box-shadow: 0 0 16px rgba(64,224,200,.22); }
.fpnub {
  width: 46px; height: 46px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #4a6b8c, #1d2c40);
  border: 1px solid #6c93bd; transition: transform .05s linear;
}
.fpstick.on .fpnub { border-color: var(--acc); }
.fpkgrid {
  display: grid; grid-template-areas: ". u ." "l d r"; gap: 6px;
}
.fpk {
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: #cfe3ff; font-size: 20px; cursor: pointer;
  touch-action: none; display: grid; place-items: center;
}
.fpk-u { grid-area: u; } .fpk-l { grid-area: l; } .fpk-d { grid-area: d; } .fpk-r { grid-area: r; }
.fpk.on { background: rgba(64, 224, 200, .25); border-color: var(--acc); }
/* the right hand holds the verbs: swap, heal, jump, fire */
.fpkright { display: grid; grid-template-columns: auto auto; gap: 8px; align-items: center; justify-items: center; }
.fpk.act { width: 46px; height: 46px; border-radius: 50%; font-size: 19px; }
.fpk.act:active { background: rgba(64, 224, 200, .22); border-color: var(--acc); }
#fpTilt.on { color: var(--acc); border-color: var(--acc); }
.fpk.turn { border-radius: 50%; }
.fpk.fire {
  width: 66px; height: 66px; border-radius: 50%; font-size: 26px;
  background: radial-gradient(circle at 35% 30%, #5a1a2a, #2a0f18);
  border-color: #a0405c; color: #ff8ca0;
}
.fpk.fire.on { background: radial-gradient(circle at 35% 30%, #a03050, #5a1a2a); }
.fpk.heal { width: 46px; height: 46px; border-radius: 50%; font-size: 20px; border-color: #3fd8a8; }
.fpk.heal:active { background: rgba(63, 216, 168, .25); }
@media (orientation: landscape) and (max-height: 540px) {
  .fpscv { width: min(100%, calc(72vh * 16 / 9)); }
  .fpspad {
    position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 40;
    max-width: none; margin: 0; pointer-events: none;
  }
  .fpspad .fpk { pointer-events: auto; opacity: .8; }
}

/* ---------- solitaire variants ---------- */
.solcols { display: grid; gap: 4px; }
.solcols.sp10 { grid-template-columns: repeat(10, 1fr); }
.solcols.fc8 { grid-template-columns: repeat(8, 1fr); }
.solcols.gf7 { grid-template-columns: repeat(7, 1fr); }
.solcols .scard { width: 100%; min-width: 0; padding: 0; font-size: clamp(9px, 2.9vw, 13px); }
.sp10 .solcol .scard, .fc8 .solcol .scard, .gf7 .solcol .scard { margin-bottom: -22px; }
.sp10 .solcol .scard:last-child, .fc8 .solcol .scard:last-child, .gf7 .solcol .scard:last-child { margin-bottom: 0; }
.scard.dimc { opacity: .7; }
.scard.big { width: 54px !important; font-size: 17px !important; }
.scard i { font-style: normal; font-size: 9px; display: block; line-height: 1; color: var(--dim); }

/* ---------- sudoku ---------- */
.sdgrid {
  display: grid; grid-template-columns: repeat(9, 1fr);
  background: #0a1220; border: 2px solid var(--line); border-radius: 10px;
  overflow: hidden; user-select: none; max-width: 420px; margin: 0 auto;
}
.sdcell {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  font-size: clamp(14px, 4.5vw, 22px); font-weight: 700; color: var(--acc);
  border: 1px solid rgba(120, 150, 200, .12); cursor: pointer;
}
.sdcell.gv { color: #dfe8f5; background: rgba(255, 255, 255, .04); }
.sdcell:nth-child(9n+3), .sdcell:nth-child(9n+6) { border-right: 2px solid rgba(120, 150, 200, .5); }
.sdcell:nth-child(n+19):nth-child(-n+27), .sdcell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid rgba(120, 150, 200, .5); }
.sdcell.sdsel { background: rgba(64, 224, 200, .28); }
.sdcell.sdsame { background: rgba(64, 224, 200, .1); }
.sdcell.sdbad { color: #ff5c74; }
.sdnotes { font-size: 8px; line-height: 1.2; color: var(--dim); width: 82%; text-align: center; word-break: break-all; letter-spacing: .5px; }
.sdpad { display: flex; gap: 5px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.sdkey {
  min-width: 34px; height: 46px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: #dfe8f5; font-size: 17px; font-weight: 700;
  cursor: pointer; position: relative;
}
.sdkey i { position: absolute; bottom: 2px; right: 4px; font-size: 8px; font-style: normal; color: var(--dim); }
.sdkey.dim { opacity: .35; }
.sdkey.on { border-color: var(--acc); color: var(--acc); }
.sdpick { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* ---------- crossword ---------- */
.cwgrid {
  display: grid; grid-template-columns: repeat(11, 1fr); gap: 1px;
  background: #04070f; border: 1px solid var(--line); border-radius: 10px;
  padding: 3px; user-select: none; max-width: 460px; margin: 0 auto;
}
.cwblk { aspect-ratio: 1; }
.cwcell {
  aspect-ratio: 1; background: #16233c; border-radius: 2px; position: relative;
  display: grid; place-items: center; cursor: pointer;
  font-size: clamp(11px, 3.6vw, 16px); font-weight: 800; color: #eaf2ff;
}
.cwcell u { position: absolute; top: 0; left: 2px; font-size: 7px; text-decoration: none; color: var(--dim); }
.cwcell.cwact { background: #1d3a55; }
.cwcell.cwcur { background: rgba(64, 224, 200, .42); }
.cwcell.cwbad { color: #ff5c74; }
.cwclue { min-height: 42px; padding: 8px 10px; font-size: 13.5px; line-height: 1.4; text-align: center; }
.cwkb { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.cwkrow { display: flex; gap: 4px; justify-content: center; }
.cwkey {
  min-width: 26px; height: 40px; padding: 0 2px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: #dfe8f5; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cwkey.wide { min-width: 46px; }
.cwlists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; margin-top: 6px; }
.cwli { padding: 3px 4px; border-radius: 6px; color: var(--dim); cursor: pointer; line-height: 1.35; }
.cwli.on { background: rgba(64, 224, 200, .12); color: #dfe8f5; }
.cwli b { color: var(--acc); }
.cwli i { opacity: .6; font-style: normal; }

/* ---------- backgammon ---------- */
.bgboard {
  background: linear-gradient(170deg, #14213a, #0d1526);
  border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px; user-select: none;
}
.bgrow { display: grid; grid-template-columns: repeat(6, 1fr) 16px repeat(6, 1fr); gap: 3px; }
.bgpt {
  position: relative; min-height: 92px; display: flex; flex-direction: column;
  align-items: center; gap: 1px; padding: 2px 0; cursor: pointer; border-radius: 4px;
}
.bgpt.tp { justify-content: flex-start; }
.bgpt.bt { justify-content: flex-end; }
.bgpt::before { content: ""; position: absolute; inset: 0; z-index: 0; }
.bgpt.tp::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bgpt.bt::before { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.bgpt.tp.e::before { background: linear-gradient(rgba(90, 140, 210, .28), rgba(90, 140, 210, .05)); }
.bgpt.tp.o::before { background: linear-gradient(rgba(40, 70, 120, .38), rgba(40, 70, 120, .08)); }
.bgpt.bt.e::before { background: linear-gradient(rgba(90, 140, 210, .05), rgba(90, 140, 210, .28)); }
.bgpt.bt.o::before { background: linear-gradient(rgba(40, 70, 120, .08), rgba(40, 70, 120, .38)); }
.bgpt .bgc { position: relative; z-index: 1; }
.bgpt.can { outline: 2px solid rgba(64, 224, 200, .45); outline-offset: -2px; }
.bgpt.sel { background: rgba(64, 224, 200, .3); }
.bgpt.bghint { background: rgba(255, 200, 80, .3); }
.bgc {
  width: 72%; max-width: 26px; aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal;
}
.bgc.a { background: radial-gradient(circle at 35% 30%, #6ff0d8, #1d9c84); color: #06251e; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bgc.b { background: radial-gradient(circle at 35% 30%, #ffffff, #9fb2cc); color: #1c2940; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bgbar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(0,0,0,.35); border-radius: 4px; }
.bgbar .bgc { width: 14px; }
.bgbar b { font-size: 10px; }
.bgmid {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; font-size: 13px; padding: 4px; flex-wrap: wrap; text-align: center;
}
.bgdie { font-size: 30px; line-height: 1; color: var(--acc); }
.bgdie.used { opacity: .28; }
.bgact { display: flex; gap: 8px; justify-content: center; margin-top: 10px; min-height: 38px; }

/* ---------- sampo ---------- */
.cvboard.spforest .cvw { background: linear-gradient(160deg, #14351f, #0d2415); }
.cvboard.spforest .cvf { background: #12241a; }
.cvboard.sphouse .cvw { background: linear-gradient(160deg, #4a3420, #33220f); }
.cvboard.sphouse .cvf { background: #2a1e12; }
.cvtile.spboss { box-shadow: inset 0 0 10px rgba(255, 80, 80, .7); border-radius: 6px; }
.spbosshp i { background: linear-gradient(90deg, #b03060, #ff5c74) !important; }
.spriddle {
  font-size: 13.5px; line-height: 1.6; font-style: italic; color: #cfe3ff;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); margin: 10px 0;
}
.sprunes { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.sprune {
  width: 58px; height: 58px; border-radius: 14px; font-size: 26px; cursor: pointer;
  border: 1px solid var(--line); background: #101b30;
}
.sprune.lit { border-color: var(--acc); background: rgba(64, 224, 200, .2); box-shadow: 0 0 10px rgba(64, 224, 200, .35); }
.cvbelt.spready { border-color: var(--acc); }
.cvbelt .spcd, .cvbelt i { position: absolute; bottom: 1px; right: 4px; font-size: 9px; font-style: normal; color: var(--dim); }
.cvbelt { position: relative; }

/* ---------- ice caves ---------- */
.cvwrap { position: relative; }
/* the arrow overlay sits above the board and never eats a tap */
.cvwrap { position: relative; }
.cvarrows { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.cvarrow {
  position: absolute; left: 0; top: 0; line-height: 1; font-style: normal;
  color: #ffe9a8; text-shadow: 0 0 6px rgba(255,200,90,.9);
  transform: translate(calc(var(--ax) - 50%), calc(var(--ay) - 50%)) rotate(var(--rot));
  animation: cvfly .3s linear forwards;
}
@keyframes cvfly {
  to { transform: translate(calc(var(--bx) - 50%), calc(var(--by) - 50%)) rotate(var(--rot)); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { .cvarrow { animation-duration: .01s; } }
.cvboard {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 1px;
  background: #04070f; border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; user-select: none;
}
.cvtile {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: clamp(11px, 4vw, 17px); line-height: 1; border-radius: 3px;
  overflow: hidden; cursor: pointer;
}
.cvf { background: #101b30; }
.cvw { background: linear-gradient(160deg, #22344f, #16233a); box-shadow: inset 0 1px 0 rgba(160, 210, 255, .12); }
.cvu { background: #04070f; }
.cvfog { filter: brightness(.42) saturate(.4); }
.cvp { background: radial-gradient(circle, rgba(64, 224, 200, .28), #101b30 75%); }
.cvfz { filter: saturate(.3) brightness(1.2); }
.cvbar {
  display: flex; align-items: center; gap: 8px; margin: 8px 0;
  font-size: 13px; font-weight: 700; flex-wrap: wrap;
}
.cvhp { flex: 1; min-width: 60px; height: 8px; background: #22101a; border-radius: 99px; overflow: hidden; }
.cvhp i { display: block; height: 100%; background: linear-gradient(90deg, #e0455c, #ff7a5c); border-radius: 99px; transition: width .2s; }
.cvbelt {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); font-size: 17px; cursor: pointer;
}
.cvbelt:disabled { opacity: .35; cursor: default; }
.cvlog { min-height: 34px; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.cvdeath {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 14, 28, .82); backdrop-filter: blur(3px); border-radius: 12px;
}
.cvdcard {
  text-align: center; padding: 18px 26px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel); font-size: 14px; line-height: 1.7;
}

/* ---------- games ---------- */
.hidden { display: none !important; }
.gamegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gamecard { text-align: center; padding: 14px 10px; }
/* the app's own icons stand in for emoji, sized to the text they sit in */
/* img.emo, not .emo: the card rules in this file size any <img> inside them,
   and an icon caught by one of those rendered at card width — which is what
   put a giant aurora sticker under every camera. Those rules now exclude
   .emo as well, and this selector outranks a bare img rule added later. */
img.emo { display: inline-block; width: 1.18em; height: 1.18em; min-height: 0; max-height: none;
  vertical-align: -.24em; object-fit: contain; border-radius: 0; background: none; }
.gamecard .gic { font-size: 34px; line-height: 1.2; }
.gamecard .gic img.gthumb { display: block; width: 100%; max-width: 168px; aspect-ratio: 1; object-fit: cover; margin: 0 auto 6px;
  border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.gamecard b { display: block; margin: 4px 0 9px; font-size: 14px; }
.gamecard .gbtns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
/* The key legend under a game's header: only a keyboard can use it */
.gkeys { font-size: 11px; text-align: center; margin: -4px 0 8px; line-height: 1.5; }
@media (pointer: coarse) { .gkeys { display: none; } }
@media (hover: none) { .gkeys { display: none; } }
.gamerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px; margin-bottom: 8px; font-size: 13px; }
/* A game in full screen: the browser gives us the whole glass, so the game view
   has to paint its own background (a transparent one shows the desktop) and the
   canvas has to be allowed to grow into the height rather than stay boxed at its
   CSS width. Canvases here all carry an aspect-ratio, so capping the HEIGHT is
   what makes them fill a landscape phone. */
#gameView:fullscreen, #gameView:-webkit-full-screen {
  background: var(--bg); padding: 10px 12px; overflow: auto;
  width: 100vw; height: 100vh;
}
#gameView:fullscreen canvas {
  max-height: calc(100vh - 150px); max-width: 100%; margin-left: auto; margin-right: auto;
}
/* Framed games size themselves to their viewport. Never apply the canvas
   height caps to the iframe: that leaves a black strip after phone rotation. */
#gameView:fullscreen:has(> .spwrap), #gameView:-webkit-full-screen:has(> .spwrap) {
  padding: 0; border: 0; border-radius: 0; overflow: hidden;
}
#gameView:fullscreen > .spwrap, #gameView:-webkit-full-screen > .spwrap {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#gameView:fullscreen .spframe, #gameView:-webkit-full-screen .spframe {
  width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0;
}
#gameView:fullscreen:has(> .spwrap) > .ghead, #gameView:-webkit-full-screen:has(> .spwrap) > .ghead { display: none; }
#gameView:fullscreen .spback, #gameView:-webkit-full-screen .spback {
  position: absolute; display: block; left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top));
  z-index: 92; padding: 6px 10px; font-size: 12px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(8, 14, 28, .72); color: #cfe8ff;
}
/* landscape on a phone: the header is a waste of a scarce sixty pixels */
@media (orientation: landscape) and (max-height: 520px) {
  #gameView:fullscreen .ghead { margin-bottom: 5px; font-size: 12px; }
  #gameView:fullscreen .ghead .mut { display: none; }
  #gameView:fullscreen canvas { max-height: calc(100vh - 96px); }
}
.ghead .gfull { margin-left: auto; }

.ghead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ghead b { font-size: 16px; }
.gstatus { text-align: center; font-size: 13.5px; margin: 10px 0 4px; color: var(--dim); }
.gstatus b { color: var(--text); }

.chboard {
  display: grid; grid-template-columns: repeat(8, 1fr);
  max-width: 440px; margin: 0 auto; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 1;
}
.chsq { aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(22px, 5.4vw, 34px); background: #24344f; padding: 0; }
.chsq.d { background: #16233a; }
.chsq.sel { outline: 2px solid var(--acc); outline-offset: -2px; }
.chsq.mvhint { box-shadow: inset 0 0 0 100px rgba(61, 255, 181, .18); }
.chsq.last { box-shadow: inset 0 0 0 100px rgba(255, 200, 87, .12); }
.chsq span { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", serif; font-variant-emoji: text; line-height: 1; }
.chsq .wp { color: #f5f7ff; text-shadow: 0 0 1px #0b1020, 0 0 2px #0b1020, 1px 1px 0 #0b1020, -1px -1px 0 #0b1020, 1px -1px 0 #0b1020, -1px 1px 0 #0b1020; }
/* The dark side is a dark piece on a dark board, so the ring around it is
   what you actually see: bright and two pixels wide, or the back rank is a
   row of smudges at phone size. */
.chsq .bp { color: #10182b; text-shadow: 0 0 2px #e6edfa, 0 0 5px rgba(200,215,240,.75), 1px 1px 0 #b8c7e0, -1px -1px 0 #b8c7e0, 1px -1px 0 #b8c7e0, -1px 1px 0 #b8c7e0; }

.shboards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.shwrap { flex: 1 1 300px; max-width: 380px; }
.shgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.shc { aspect-ratio: 1; border-radius: 3px; background: var(--bg2); border: 1px solid var(--line); font-size: 12px; color: var(--dim); display: grid; place-items: center; padding: 0; }
.shc.own { background: rgba(61, 255, 181, .22); border-color: var(--acc); }
.shc.hit { background: rgba(255, 88, 120, .45); border-color: var(--bad); color: #fff; }
.shc.miss { color: var(--faint); }
.shc:disabled { opacity: .85; }

.ydice { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.ydie { font-size: 44px; line-height: 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px; color: var(--text); }
.ydie.held { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.ytable { width: 100%; max-width: 440px; margin: 8px auto 0; border-collapse: collapse; font-size: 12.5px; }
.ytable td, .ytable th { padding: 4px 8px; border-bottom: 1px dashed var(--line); text-align: right; }
.ytable td:first-child, .ytable th:first-child { text-align: left; color: var(--dim); }
.ytable .meCol { background: rgba(61, 255, 181, .06); }
.ypick { color: var(--acc); font-weight: 700; border: 1px dashed var(--acc); border-radius: 6px; padding: 1px 8px; }
.ybonus td { color: var(--faint); font-size: 11px; }
.ytotal td { font-weight: 800; color: var(--text); border-bottom: none; }

.solrow { display: flex; gap: 6px; margin-bottom: 12px; }
.soltab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.solcol { display: flex; flex-direction: column; gap: 2px; min-height: 90px; }
.solcol .scard { margin-bottom: -34px; }
.solcol .scard:last-child { margin-bottom: 0; }
.scard {
  width: 100%; max-width: 52px; aspect-ratio: 5/7; border-radius: 6px;
  background: #e9edf5; color: #16233a; font-weight: 800; font-size: clamp(11px, 3vw, 15px);
  display: grid; place-items: center; border: 1px solid #8fa3c2; padding: 0;
}
.solrow .scard { width: 52px; }
.scard.r { color: #c62842; }
.scard.facedown, .scard.back { background: linear-gradient(135deg, #1d2c49, #3b1355); color: #8fa3c2; border-color: var(--line); }
.scard.empty { background: transparent; border: 1px dashed var(--line); color: var(--faint); }
.scard.up { cursor: pointer; }

.lvlkey {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 9px 2px 0; font-size: 10.5px; color: var(--faint); letter-spacing: .04em;
}
.lvlkey i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-left: 5px; }
.lvlkey .k0 { background: var(--lvl0); } .lvlkey .k1 { background: var(--lvl1); }
.lvlkey .k2 { background: var(--lvl2); } .lvlkey .k3 { background: var(--lvl3); }
.lvlkey .ku { background:repeating-linear-gradient(90deg,var(--dim) 0 3px,transparent 3px 5px); }
.metric-status-note { color:var(--dim); font-size:12px; line-height:1.6; margin:8px 2px 22px; max-width:78ch; }
.metric-reading { padding:14px 16px; margin:12px 0; border:1px solid var(--line); border-left:4px dashed var(--dim); border-radius:10px; line-height:1.6; overflow-wrap:anywhere; }
.metric-reading[data-lvl="0"] {border-left:4px solid var(--lvl0);}
.metric-reading[data-lvl="1"] {border-left:4px solid var(--lvl1);}
.metric-reading[data-lvl="2"] {border-left:4px solid var(--lvl2);}
.metric-reading[data-lvl="3"] {border-left:4px solid var(--lvl3);}
.metric-reading p {margin:5px 0;}
.metric-reading small {display:block;color:var(--dim);}
.metric-reading .metric-origin{font-weight:600;margin-bottom:3px}
.metric-earth{border-left:3px dashed var(--acc2);padding:7px 12px;margin:12px 0;color:var(--acc2)}
.metric h3 { font-size: 11px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.metric h3 .tag { font-size: 9.5px; border: 1px solid var(--line); padding: 1.5px 7px; border-radius: 99px; letter-spacing: .05em; }
.metric .val { font-size: 27px; font-weight: 800; margin: 6px 0 1px; display: flex; align-items: baseline; gap: 6px; }
.metric .val small { font-size: 12px; color: var(--dim); font-weight: 600; }
.metric .sub { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.metric canvas { width: 100%; height: 34px; margin-top: 7px; display: block; }
.kp-official { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); color: var(--faint) !important; }
.c-good { color: var(--go); } .c-warn { color: var(--warn); } .c-bad { color: var(--bad); } .c-dim { color: var(--dim); }

.kp-forecast-bars { display: flex; gap: 3px; align-items: flex-end; height: 40px; margin-top: 8px; }
.kp-forecast-bars i { flex: 1; border-radius: 3px 3px 0 0; min-height: 3px; opacity: .9; }
.kp-forecast-lbls { display: flex; gap: 3px; margin-top: 3px; }
.kp-forecast-lbls span { flex: 1; text-align: center; font-size: 8.5px; color: var(--faint); }

.ovalimg { width: 100%; border-radius: 10px; display: block; background: #000; min-height: 120px; }
.imgnote { font-size: 10.5px; color: var(--faint); margin-top: 6px; }

/* FMI's written space-weather report — reads like the bulletin it is */
.fmiwhen { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 5px; }
.fmistatus { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.fmistatus.calm { color: var(--dim); }
.fmistatus.active { color: var(--good); }
.fmistatus.storm { color: var(--warn); }
.fmibody { font-size: 12.5px; line-height: 1.62; color: var(--txt); }
.fmibody p { margin: 0 0 8px; }
.fmibody p:last-child { margin-bottom: 0; }
.fmiskel { height: 11px; border-radius: 4px; margin: 7px 0;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 200% 100%; animation: fmish 1.3s ease-in-out infinite; }
@keyframes fmish { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.updatebar { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); margin: 12px 2px 4px; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--go); display: inline-block; }
.dot.stale { background: var(--warn); }
.dot.err { background: var(--bad); }

/* ---------- alert banner ---------- */
.alertbar {
  display: none; margin-bottom: 12px; border-radius: var(--radius);
  padding: 13px 15px; font-weight: 700; font-size: 14px;
  background: linear-gradient(90deg, rgba(61,255,181,.2), rgba(138,107,255,.18));
  border: 1px solid var(--acc); color: var(--text);
  animation: pulse 1.6s ease-in-out infinite;
}
.alertbar.show { display: flex; align-items: center; gap: 10px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(61,255,181,.28);} 50% { box-shadow: 0 0 22px 2px rgba(61,255,181,.32);} }

/* ---------- SKY tab ---------- */
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.fchip {
  border: 1px solid var(--line); background: var(--panel);
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: var(--dim);
}
.fchip.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); font-weight: 700; }

.spot { padding: 13px 14px; margin-bottom: 10px; }
.spot-top { display: flex; align-items: center; gap: 9px; }
.rank { font-size: 12px; font-weight: 800; color: var(--faint); width: 22px; text-align: center; flex: 0 0 auto; }
.spot-name { font-weight: 700; font-size: 15.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-name small { color: var(--faint); font-weight: 600; font-size: 10.5px; margin-left: 5px; letter-spacing: .06em; }
/* The drive time used to sit on the name row and ate the name on a phone:
   "Savu…" with the whole width left over under it. It lives with the rest of
   the facts now, under the strip, and the name gets the row. */
.spot-drive { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.spot-top .scorepill { margin-left: auto; }
/* The course, at the top of the guide, with a picture: a text row was being
   scrolled past. */
.videocard.course { padding: 0; overflow: hidden; align-items: stretch; }
.videocard.course .vthumb { width: 104px; min-height: 74px; object-fit: cover; flex: 0 0 auto; }
.videocard.course .vtxt { padding: 12px 14px; }
.videocard.course .vtxt b { font-size: 15px; }
.spot-meta .camchip { margin-left: 0; opacity: .85; }
.scorepill { font-size: 13px; font-weight: 800; border-radius: 99px; padding: 4px 11px; flex: 0 0 auto; }
.scorepill.go { background: rgba(43, 234, 156, .16); color: var(--go); }
.scorepill.maybe { background: rgba(255, 200, 87, .14); color: var(--maybe); }
.scorepill.low { background: rgba(255, 88, 120, .12); color: var(--low); }

.cloudstrip { display: flex; gap: 2px; margin-top: 10px; }
.sky-strip-caption { margin-top: 10px; color: var(--dim); font-size: 11px; }
.sky-strip-wrap { position: relative; }
.sky-strip-wrap .cloudstrip { margin-top: 8px; }
.sky-arrival-line { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #ffd166; box-shadow: 0 0 0 1px #071216; pointer-events: none; }
.sky-arrival-line::before { content: ''; position: absolute; top: -2px; left: -4px; border-top: 6px solid #ffd166; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.sky-arrival-note { margin: 7px 0; color: #ffd166; font-size: 12px; }
@media(max-width:600px){
 .spot-top { flex-wrap: wrap; }
 .spot-top .scorepill { margin-left: 31px; font-size: 11px; }
 .spot-top .spot-name { flex: 1; }
}
.cloudstrip i { flex: 1; height: 22px; border-radius: 4px; position: relative; opacity: .55; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; }
.cloudstrip i b { font: 800 9px/1 ui-monospace, monospace; color: #fff; letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6); }
.cloudstrip i.darkhr { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.striplbl { display: flex; gap: 2px; margin-top: 3px; }
.striplbl span { flex: 1; text-align: center; font-size: 8.5px; color: var(--faint); }
.spot-meta { display: flex; gap: 14px; margin-top: 9px; font-size: 11.5px; color: var(--dim); flex-wrap: wrap; }
.spot-meta b { color: var(--text); font-weight: 700; }
.spot-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.abtn {
  border: 1px solid var(--line); background: var(--bg2);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
}
.abtn:active { transform: scale(.96); }
.abtn.primary { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.spot-detail { display: none; margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.spot-detail.open { display: block; }
/* Hour by hour in the night report: the same pills the SKY list uses, in a row
   narrow enough for a phone held in a mitten. */
/* OSM has no opening_hours for a lot of Lapland: say so rather than leave a gap
   that reads as "open". */
.placerow .nohrs { font-style: normal; color: var(--warn); opacity: .8; }

.nrhr { display: grid; grid-template-columns: 42px minmax(0, 1fr) 50px 44px 34px 58px 22px; gap: 7px; align-items: center;
        padding: 3.5px 2px; font-size: 12px; color: var(--dim); border-bottom: 1px dashed var(--line); }
.nrhr:last-child { border-bottom: none; }
.nrhr.nrhrhead { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border-bottom: none; }
.nrhr .scorepill { font-size: 11px; padding: 2px 0; text-align: center; }
.nrhr .effpill { text-align: center; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 2.5px 0; color: #06210f; }
.nrhr .nrmark { font-size: 10px; color: var(--faint); text-align: right; }
.nrhr.twi { opacity: .55; }
.nrhr .nrspot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nrhr .nrspot i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.nrhr .nrspot b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrhr .nrspot small { color: var(--faint); font-size: 10px; white-space: nowrap; }
.nrhr .nrnav { text-decoration: none; font-size: 14px; text-align: center; }
.nrhr.top { box-shadow: inset 3px 0 0 var(--acc); padding-left: 4px; }
@media (max-width: 520px) {
  .nrhr { grid-template-columns: 38px minmax(0, 1fr) 46px 40px 30px 22px; gap: 5px; }
  .nrhr .nrmark { display: none; }
  .nrhr .nrspot small { display: none; }
  .cloudstrip i b { font-size: 8px; }
}

.hr-legend { font-size: 11px; color: var(--dim); line-height: 1.55; margin-bottom: 9px; background: var(--bg2); border-radius: 9px; padding: 8px 10px; }
.hr-legend b { color: var(--text); }
.lg-low { color: var(--bad); font-weight: 800; }
.lg-mid { color: var(--warn); font-weight: 800; }
.lg-high { color: #7aa7e8; font-weight: 800; }
.hrrow2 { display: grid; grid-template-columns: 42px 50px 1fr 1fr 1fr 40px; gap: 6px; align-items: center; padding: 2.5px 0; font-size: 11.5px; color: var(--dim); }
.hrrow2.hrhead { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.hrrow2 .effpill { text-align: center; font-weight: 800; font-size: 11px; border-radius: 6px; padding: 2.5px 0; color: #06210f; }
.hrrow2 .lay { position: relative; height: 16px; background: var(--bg2); border-radius: 5px; overflow: hidden; }
.hrrow2 .lay i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; opacity: .5; }
.hrrow2 .lay.low i { background: var(--bad); }
.hrrow2 .lay.mid i { background: var(--warn); }
.hrrow2 .lay.high i { background: #7aa7e8; }
.hrrow2 .lay b { position: relative; font-size: 10px; line-height: 16px; padding-left: 5px; color: var(--text); font-weight: 700; }
.bestwin { font-size: 12.5px; margin-top: 8px; color: var(--acc); font-weight: 600; }

/* ---------- numbers (guide) ---------- */
.numgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
.numchip {
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
  padding: 9px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.numchip:active { transform: scale(.94); }
.numchip.speaking { border-color: var(--acc); background: var(--acc-soft); }
.numchip .nn { font-size: 17px; font-weight: 800; color: var(--acc); }
.numchip .nw { font-size: 12.5px; line-height: 1.25; }
.numchip .nr { font-size: 10.5px; color: var(--dim); font-style: italic; }
.speakrow { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }

/* ---------- learn mode: beginner explainer bubbles ---------- */
.hint {
  display: none; margin: 9px 0 10px; font-size: 12px; line-height: 1.55; color: var(--text);
  background: var(--acc-soft); border: 1px dashed var(--acc); border-radius: 11px;
  padding: 8px 11px 8px 32px; position: relative;
}
html[data-learn] .hint { display: block; }
.hint:empty { display: none !important; }
.hint::before { content: "🎓"; position: absolute; left: 10px; top: 7px; font-size: 14px; }
.metric .hint, .verdict-info .hint, .tonight-card .hint { margin-bottom: 0; }
.learntopic {
  width: 100%; text-align: left; display: flex; gap: 12px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; margin-bottom: 7px;
}
.learntopic:active { transform: scale(.985); }
.learntopic .em { font-size: 21px; }
.learntopic b { font-size: 14px; flex: 1; }
.learntopic .arrow { color: var(--faint); }
.learnbody { font-size: 15px; line-height: 1.6; white-space: pre-line; margin: 10px 0 4px; }

/* ---------- tonight-at-base card ---------- */
/* The night summary and the weather at the pin, side by side: the card raises
   the question ("clearest window 01-03, 35% cloud") and the panel beside it
   answers what it is doing outside at this minute. Narrow screens stack them,
   which puts them in the same reading order anyway. */
.tn-pair { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 10px; align-items: stretch; margin-top: 10px; }
.tn-pair > .card { margin: 0; }
.card.metric.wx-side { display: flex; flex-direction: column; }
.card.metric.wx-side .sub { margin-top: auto; }
/* Tomorrow and the day after, under today's reading: date, sky, temperatures,
   and the night's cloud in the colour the strip uses. */
.wxdays { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; display: grid; gap: 4px; }
.wxday { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--dim); flex-wrap: wrap; }
.wxday .d { min-width: 58px; color: var(--faint); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.wxday b { color: var(--text); margin-left: auto; font-variant-numeric: tabular-nums; }
.wxday i { font-style: normal; font-weight: 700; font-size: 11px; }
@media (max-width: 620px) { .tn-pair { grid-template-columns: 1fr; } }
.tonight-card { padding: 13px 15px; }
.tn-head { font-size: 11px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; margin-bottom: 8px; }
.tn-main { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.tn-main .tn-item b { font-size: 21px; }
.tn-main .tn-item span { display: block; font-size: 10px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin-top: 1px; }
.tn-rows { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; display: grid; gap: 5px; }
.tn-row { font-size: 12.5px; color: var(--dim); display: flex; gap: 8px; align-items: baseline; }
.tn-row b { color: var(--text); }
.tn-row .lbl { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); min-width: 128px; }

/* ---------- road cams ---------- */
.cam .cam-img-wrap { position: relative; }
.cam .cam-km { position: absolute; right: 7px; bottom: 7px; background: rgba(4,7,15,.72); border-radius: 7px; padding: 2px 8px; font-size: 10px; color: var(--text); }
.cam .cam-cycle {
  position: absolute; right: 7px; top: 7px;
  background: rgba(4,7,15,.78); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 9px; font-size: 11px; color: var(--text); font-weight: 700;
}
.cam .cam-cycle:active { transform: scale(.92); }

/* ---------- parking flags ---------- */
.pflags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.pflags span { font-size: 9.5px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; color: var(--dim); }
.pflags .warn { border-color: var(--warn); color: var(--warn); }
.pflags .bad { border-color: var(--bad); color: var(--bad); }

/* ---------- parking finder ---------- */
.parkrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.parkrow:last-child { border-bottom: none; }
.parkrow .pic { font-size: 19px; flex: 0 0 26px; text-align: center; }
.parkrow .pt { flex: 1; min-width: 0; }
.parkrow .pt b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parkrow .pt span { font-size: 10.5px; color: var(--dim); }
.parkrow .pd { font-size: 11.5px; color: var(--dim); white-space: nowrap; text-align: right; }
.parkrow .pd b { color: var(--text); }
.parkrow .abtn { padding: 6px 9px; font-size: 11.5px; }
.parkrow.mypin { background: rgba(255, 200, 87, .06); border-radius: 8px; }
.parkcats { font-size: 11px; color: var(--dim); line-height: 1.6; margin: 8px 0 2px; }

/* ---------- cams ---------- */
.camgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cam { overflow: hidden; padding: 0; }
.cam img:not(.emo) { width: 100%; height: 140px; object-fit: cover; display: block; background: #000; }
.cam img.keo { object-fit: contain; background: #05070d; }
.cam img.wide { object-fit: contain; background: #05070d; }
.cam .cam-body { padding: 11px 13px; }
.cam .cam-name { font-weight: 700; font-size: 14px; }
.cam .cam-sub { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.linkgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.linkcard { display: flex; gap: 10px; align-items: center; padding: 11px 13px; }
.linkcard .ic { font-size: 21px; flex: 0 0 auto; }
.linkcard .t { min-width: 0; }
.linkcard .t b { font-size: 13.5px; display: block; }
.linkcard .t span { font-size: 11px; color: var(--dim); }

/* ---------- guide / FAQ ---------- */
.langgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.langbtn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 13px;
  padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.langbtn svg { width: 44px; height: 30px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.langbtn b { font-size: 12px; }
.langbtn span { font-size: 9.5px; color: var(--dim); line-height: 1.2; text-align: center; }
.langbtn.on { border-color: var(--acc); background: var(--acc-soft); }
.langbtn:active { transform: scale(.95); }

.tonight-banner {
  margin-top: 12px; border-radius: var(--radius); padding: 14px 16px;
  font-size: 15.5px; font-weight: 700; line-height: 1.45; border: 1px solid var(--line);
}
.tonight-banner.good { background: rgba(43,234,156,.13); border-color: rgba(43,234,156,.45); }
.tonight-banner.fair { background: rgba(255,200,87,.11); border-color: rgba(255,200,87,.4); }
.tonight-banner.poor { background: rgba(255,88,120,.10); border-color: rgba(255,88,120,.4); }
.tonight-banner small { display: block; font-weight: 500; font-size: 11.5px; color: var(--dim); margin-top: 4px; }

.faqlist { margin-top: 6px; }
.faqitem {
  width: 100%; text-align: left; display: flex; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; margin-bottom: 8px;
}
.faqitem:active { transform: scale(.985); }
.faqitem .em { font-size: 22px; flex: 0 0 auto; }
.faqitem .qt { min-width: 0; flex: 1; }
.faqitem .qt b { font-size: 14.5px; display: block; line-height: 1.35; }
.faqitem .qt span { font-size: 11.5px; color: var(--dim); display: block; margin-top: 2px; }
.faqitem .arrow { color: var(--faint); font-size: 18px; }

.phrasegrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.phrase {
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
  padding: 11px 12px; text-align: left;
}
.phrase b { display: block; font-size: 13.5px; line-height: 1.35; }
.phrase span { display: block; font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.phrasegrid.ann { grid-template-columns: 1fr; }
.phrasegrid.ann .phrase b { font-size: 13px; font-weight: 600; }
.showmode.sm { font-size: 19px; line-height: 1.55; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(3, 5, 12, .78); backdrop-filter: blur(8px);
  align-items: flex-end; justify-content: center;
}
.modal.open { display: flex; }
.sheet {
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: 22px 22px 0 0; width: 100%; max-width: 860px;
  max-height: 92vh; overflow-y: auto; padding: 18px 18px 26px;
  animation: sheetup .25s ease;
}
@keyframes sheetup { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .modal { align-items: center; padding: 24px; }
  .sheet { border-radius: 22px; }
}
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-head .em { font-size: 26px; }
.sheet-head .x { margin-left: auto; }
.bigq { font-size: 21px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.bigq-en { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.biga { font-size: 19px; line-height: 1.55; margin-bottom: 14px; white-space: pre-line; }
.biga-en { font-size: 13px; color: var(--dim); line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 12px; white-space: pre-line; }
.showmode { font-size: 26px; line-height: 1.5; }
.diagram { margin: 8px 0 16px; }
.diagram svg { width: 100%; height: auto; display: block; }
.diag-caps { display: grid; gap: 5px; margin-top: 8px; }
.diag-caps span { font-size: 13px; color: var(--dim); }
.diag-caps b { color: var(--acc); margin-right: 5px; }
.sheet-nav { display: flex; gap: 10px; margin-top: 16px; }
.sheet-nav .abtn { flex: 1; justify-content: center; padding: 12px; }
.editarea { margin-top: 10px; }
.editarea textarea { min-height: 110px; margin-top: 6px; }
.editarea label { font-size: 11px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- settings ---------- */
.setrow { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.setrow:last-child { border-bottom: none; }
.setrow .st { flex: 1; min-width: 0; }
.setrow .st b { font-size: 14px; display: block; }
.setrow .st span { font-size: 11.5px; color: var(--dim); display: block; margin-top: 2px; line-height: 1.4; }
.switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { display: none; }
.switch i {
  position: absolute; inset: 0; border-radius: 99px; background: var(--bg2);
  border: 1px solid var(--line); transition: .2s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--dim); transition: .2s;
}
.switch input:checked + i { background: var(--acc-soft); border-color: var(--acc); }
.switch input:checked + i::after { left: 23px; background: var(--acc); }
.numin { width: 74px !important; text-align: center; }

/* ---------- hunt log & team ---------- */
.loggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.logbtn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 14px;
  padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.logbtn span { font-size: 26px; }
.logbtn b { font-size: 11.5px; letter-spacing: .04em; }
.logbtn:active { transform: scale(.94); }
.logbtn.big { border-color: var(--acc); background: var(--acc-soft); }
.logbtn.big b { color: var(--acc); }
.logrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.logrow:last-child { border-bottom: none; }
.logrow .lic { font-size: 19px; flex: 0 0 26px; text-align: center; }
.logrow .lt { flex: 1; min-width: 0; }
.logrow .lt b { font-size: 13px; display: block; }
.logrow .lt span { font-size: 11px; color: var(--dim); display: block; }
.logrow .abtn { padding: 5px 9px; font-size: 11px; }

/* ---------- work hours ---------- */
.openshift { font-size: 15px; font-weight: 700; color: var(--acc); margin-bottom: 10px; }
.abtn.big { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
.hrtable { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 8px; }
.hrhead, .hrline { display: grid; grid-template-columns: 78px 1fr 58px 34px; gap: 8px; align-items: center; }
.hrhead { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding-bottom: 5px; }
.hrline { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.hrline:last-child { border-bottom: none; }
.hrline b { color: var(--text); font-size: 13px; }
.hrline i { font-style: normal; }
.hrline input[type="time"] {
  width: 78px; padding: 4px 6px; font-size: 12px; display: inline-block; margin-right: 4px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
}
.hrline .abtn { padding: 4px 7px; font-size: 11px; }

/* ---------- team photos ---------- */
.teamphoto { padding: 8px 0; border-bottom: 1px solid var(--line); }
.teamphoto:last-child { border-bottom: none; }
.teamphoto img:not(.emo) { width: 100%; height: auto; max-height: 75vh; object-fit: contain; border-radius: 11px; display: block; background: #000; }
.teamphoto .cap { font-size: 11.5px; color: var(--dim); margin-top: 5px; }
.teamphoto .cap b { color: var(--text); }
.teamphoto video { width: 100%; max-height: 320px; border-radius: 11px; display: block; background: #000; }
.filecard { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg2); }
.filecard .fic { font-size: 26px; }
.filecard b { display: block; font-size: 13.5px; }
.filecard span span { font-size: 11px; color: var(--dim); }
.askbox { padding: 13px; border-color: var(--acc); background: linear-gradient(180deg, var(--acc-soft), var(--panel)); }
.askhead { font-size: 14.5px; font-weight: 800; color: var(--acc); letter-spacing: .02em; }
.asksub { font-size: 11.5px; color: var(--dim); line-height: 1.45; margin-top: 3px; }
.placescard { padding: 10px 0; }
.placehead { font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.placelist { display: grid; gap: 6px; }
.placerow {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.placerow:active { transform: scale(.99); }
.placerow .pn { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placerow .pd { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.placerow .pgo { font-size: 11.5px; font-weight: 700; color: var(--acc); white-space: nowrap; }
.opennow { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--good);
  border: 1px solid var(--good); border-radius: 5px; padding: 1px 4px; margin-left: 4px; }
.shutnow { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; margin-left: 4px; }
.placemore { background: transparent; border-style: dashed; }
.pflags .good { color: var(--good); }
.placemore .pn { color: var(--dim); font-weight: 600; }
.aithinking { background: var(--acc-soft); border-radius: 9px; padding: 8px 10px; animation: pulse 1.6s ease-in-out infinite; }
.tdel { padding: 3px 8px !important; font-size: 11px !important; color: var(--faint); border-color: transparent !important; }
.tdel:hover { color: var(--bad); border-color: var(--bad) !important; }
.qsep { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 11px 0 6px; }
.abtn.warnb { border-color: rgba(255, 200, 87, .35); }

/* ---------- local tips ---------- */
.tip { padding: 13px 14px; margin-bottom: 9px; }
.tip-top { display: flex; align-items: center; gap: 10px; }
.tip-top .em { font-size: 22px; flex: 0 0 auto; }
.tip-name { flex: 1; min-width: 0; }
.tip-name b { font-size: 15px; display: block; }
.tip-name span { font-size: 11px; color: var(--dim); }
.tip-d { font-size: 14.5px; line-height: 1.5; margin: 9px 0 3px; }
.tip-d-en { font-size: 12px; color: var(--dim); line-height: 1.45; margin-bottom: 3px; }
.tipcat { border-color: var(--acc) !important; color: var(--acc) !important; font-weight: 800; letter-spacing: .07em; }
.tipcat.sight { border-color: var(--acc2) !important; color: var(--acc2) !important; }

/* ---------- voice coverage ---------- */
.covgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.covitem {
  border: 1px solid var(--line); background: var(--bg2); border-radius: 10px;
  padding: 8px 10px; text-align: left; display: flex; flex-direction: column; gap: 2px;
}
.covitem b { font-size: 12px; }
.covitem span { font-size: 10.5px; color: var(--dim); }
.covitem.none { border-color: rgba(255, 88, 120, .55); }
.covitem.none b, .covitem.none span { color: var(--bad); }
.covitem.nomale span { color: var(--warn); }
.covitem.cur { border-color: var(--acc); background: var(--acc-soft); }
.covitem:active { transform: scale(.96); }
.novoice { font-size: 11.5px; color: var(--warn); margin: -4px 0 12px; line-height: 1.5; }

/* ---------- voice list ---------- */
.voicerow { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.voicerow:last-child { border-bottom: none; }
.voicerow.act { background: var(--acc-soft); border-radius: 9px; border-bottom-color: transparent; }
.voicerow .vn { flex: 1; min-width: 0; }
.voicerow .vn b { font-size: 13px; }
.voicerow .vn span { display: block; font-size: 10.5px; color: var(--dim); }
.voicerow .abtn { padding: 6px 10px; }

/* ---------- bottom nav ---------- */
nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  background: linear-gradient(0deg, rgba(6, 9, 19, .98), rgba(6, 9, 19, .88));
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
html[data-red] nav { background: linear-gradient(0deg, rgba(12,3,4,.98), rgba(12,3,4,.9)); }
nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; color: var(--faint); letter-spacing: .06em; font-weight: 600;
}
nav button .em { font-size: 20px; filter: grayscale(1) opacity(.6); transition: .15s; }
nav button.on { color: var(--acc); }
nav button.on .em { filter: none; transform: translateY(-1px); }

/* ---------- location modal bits ---------- */
.locbtns { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin: 10px 0; }
.locbtns .abtn { justify-content: center; padding: 12px; }
.locresults { margin-top: 8px; }
.locresult {
  width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); margin-bottom: 6px; font-size: 14px;
}
.locresult span { color: var(--dim); font-size: 11.5px; display: block; }
.presetwrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.mut { color: var(--dim); font-size: 12px; line-height: 1.5; }
.footer-note { margin: 26px 4px 8px; font-size: 10.5px; color: var(--faint); text-align: center; line-height: 1.6; }
.hidden { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px); transform: translateX(-50%);
  background: var(--panel-solid); border: 1px solid var(--acc); color: var(--text);
  border-radius: 12px; padding: 11px 17px; font-size: 13.5px; z-index: 200;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s; white-space: nowrap;
}
.toast.show { opacity: 1; }

@media (max-width: 420px) {
  .verdict { gap: 12px; padding: 13px; }
  .ring-wrap { width: 92px; height: 92px; }
  .ring-score b { font-size: 25px; }
  .verdict-label { font-size: 18px; }
}

/* ---- povaus: the numerology chart ---- */
.numform { display: grid; gap: 6px; max-width: 380px; margin: 10px auto 0; }
.numlab { font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; }
.numform .inp { width: 100%; }
.numhead { text-align: center; margin: 10px 0 14px; display: grid; gap: 3px; }
.numhead b { font-size: 17px; letter-spacing: .03em; }
.numrow { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start;
  padding: 11px 0; border-top: 1px solid var(--line); }
.numrow:first-of-type { border-top: 0; }
.numnum { font: 700 26px/1 ui-monospace, monospace; color: var(--acc, #7dffc4);
  text-align: center; padding-top: 2px; }
.numnum.master { color: #ffd166; }
.numbody b { font-size: 13px; }
.numcore { color: var(--dim); font-size: 12px; font-style: italic; }
.numsub { display: block; font-size: 10px; color: var(--dim); letter-spacing: .04em;
  text-transform: uppercase; margin-top: 2px; }
.nummean { margin-top: 5px; font-size: 13px; line-height: 1.5; }
.nummaster, .numdebt { margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; border: 1px solid rgba(255,209,102,.35);
  background: rgba(255,209,102,.07); }
.numbtns { display: flex; gap: 8px; margin-top: 16px; }
.numbtns .abtn { flex: 1; }

/* ---- povaus: two people ---- */
.pairbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  display: grid; gap: 5px; margin-bottom: 4px; }
.pairwho { font: 700 11px/1 system-ui, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; color: var(--acc, #7dffc4); margin-bottom: 2px; }
.pairscore { text-align: center; margin: 6px 0 16px; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); }
.pairscore.high { border-color: rgba(125,255,196,.5); background: rgba(125,255,196,.07); }
.pairscore.mid { border-color: rgba(255,209,102,.45); background: rgba(255,209,102,.06); }
.pairscore.low { border-color: rgba(255,154,138,.45); background: rgba(255,154,138,.06); }
.pairpct { font: 700 34px/1 ui-monospace, monospace; }
.pairscore.high .pairpct { color: #7dffc4; }
.pairscore.mid .pairpct { color: #ffd166; }
.pairscore.low .pairpct { color: #ff9a8a; }
.pairband { font-size: 12.5px; color: var(--dim); margin-top: 5px; }
.pairrow { padding: 11px 0; border-top: 1px solid var(--line); }
.pairhead { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pairhead b { font-size: 13px; }
.pairn { font: 700 20px/1 ui-monospace, monospace; color: var(--acc, #7dffc4); min-width: 34px;
  text-align: center; }
.pairfit { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.pairfit.hard { color: #ffc9c0; }
.pairsame { margin-top: 5px; font-size: 12px; color: var(--dim); font-style: italic; }
.pairunion { font-size: 13.5px; line-height: 1.55; }

/* ---- KOROUOMA: the day tour ---- */
.korowrap { display: grid; gap: 8px; justify-items: center; }
.korocv { width: 100%; max-width: 720px; aspect-ratio: 720/400; display: block;
  border-radius: 10px; border: 1px solid var(--line); background: #0a1020;
  image-rendering: auto; touch-action: none; }
.korobar { display: flex; gap: 8px; width: 100%; max-width: 720px; }
.korobar .abtn { flex: 1; padding: 13px 8px; font-size: 14px; touch-action: none; }
/* a guest's question under the picture, with three answers a thumb can hit */
.koroq { width: 100%; max-width: 720px; background: rgba(10,16,28,.72); border: 1px solid rgba(255,229,150,.45);
  border-radius: 10px; padding: 8px 10px; display: grid; gap: 6px; }
.koroq-q { font-size: 13px; line-height: 1.35; }
.koroq-a { display: grid; gap: 6px; }
.koroq-a .abtn { text-align: left; padding: 9px 10px; font-size: 13px; white-space: normal; }
@media (min-width: 560px) { .koroq-a { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- THE DRIVE ---- */
.drwrap { display: grid; gap: 8px; justify-items: center; }
.drcv { width: 100%; max-width: 760px; aspect-ratio: 760/430; display: block;
  border-radius: 10px; border: 1px solid var(--line); background: #05070c; touch-action: none; }
.drbar { display: flex; gap: 8px; width: 100%; max-width: 760px; }
.drbar .abtn { flex: 1; padding: 14px 8px; font-size: 14px; touch-action: none; }
.drbar #drGas { flex: 1.4; }

/* the heading that separates the cameras you might drive to from the ones that
   only matter when the aurora has come a very long way south */
.cam-group {
  grid-column: 1 / -1; margin: 14px 2px 2px; font: 700 10.5px/1.4 system-ui, sans-serif;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border-top: 1px solid var(--line); padding-top: 10px;
}
.camchip span { font: 700 10px/1 system-ui, sans-serif; letter-spacing: .02em; margin-left: 3px; }
/* The distance rides with the word: "nearest camera" means something different
   at 8 km and at 90, and dimming the far ones says which without a sentence. */
.camchip i { font: 600 10px/1 system-ui, sans-serif; font-style: normal; margin-left: 4px;
  opacity: .72; letter-spacing: .01em; }
/* Far away, the WORD dims and the camera stays bright: the icon is the thing
   people scan for, the dim word is the caveat. */
.camchip.far span { opacity: .45; }
.camchip.far i { color: var(--warn); opacity: .85; }
/* A camera that answered with a "no image" card. Saying so beats a grey tile
   that looks like a dark, quiet sky. */
.cam-off { position: absolute; inset: auto 0 0 0; text-align: center; padding: 5px 4px;
  font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--warn); background: rgba(0,0,0,.55); pointer-events: none; }
.cam-sub i { font-style: normal; color: var(--warn); opacity: .85; }
.cam-preview-play{position:absolute;right:12px;bottom:12px;pointer-events:none;background:#07131dcc;color:#a2ecd2;border-radius:50%;padding:12px;line-height:1}
.cam-newest{display:block;margin:12px auto;min-height:44px;font-weight:750}
.cam-newest[hidden]{display:none}
.cam-cadence{font-size:12px;text-align:center;line-height:1.5;padding:0 8px}
.campop .cam-age[data-state="historical"]{color:#ffe5a6;background:#352607f2;border:1px solid #ffd15b;font-weight:750;white-space:normal;max-width:calc(100% - 20px);font-size:12px;line-height:1.4}
.park-search-status{display:flex;align-items:center;gap:12px;padding:16px 12px;margin:10px 0;background:#07131d;border:1px solid #66818c;border-radius:12px;color:#fff;font-size:15px;line-height:1.5}
.park-search-status strong{color:#fff;font-weight:800}
.park-spinner{flex:0 0 22px;width:22px;height:22px;border:3px solid #48636e;border-top-color:#fff;border-radius:50%;animation:park-spin 1s linear infinite}
.park-cache-note{margin:8px 0;font-size:12px}
@keyframes park-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.park-spinner{animation:none}}