/* Geotrap: passport control.
   Layout: navy passport cover band on top, then a data page of pale security paper.
   Picks are judged with inked rubber stamps: green ADMITTED, red DENIED. */
:root {
  --paper: #e5eee7;        /* security paper */
  --paper-2: #f3f7f1;      /* visa page / tile */
  --line: #a9bdb4;
  --ink: #17324a;          /* passport navy */
  --ink-2: #4b6275;
  --admit: #1f7a4d;
  --admit-soft: #dbece0;
  --deny: #c0392b;
  --deny-soft: #f6e1dc;
  --foil: #c9a24a;         /* gold foil on the cover */
  --foil-2: #e6c97f;
  --shield: #2f6fa8;
  --sea: #cddde2;
  --display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 6px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  color: var(--ink);
  font-family: var(--body);
  /* guilloche-style security pattern */
  background-color: var(--paper);
  background-image:
    repeating-radial-gradient(circle at 15% 20%, transparent 0 9px, rgba(23,50,74,.045) 9px 10px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 11px, rgba(31,122,77,.045) 11px 12px);
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--shield); outline-offset: 2px; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.14em; }

/* ---------- Cover ---------- */
.cover {
  background: var(--ink);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
  border-bottom: 3px solid var(--foil);
}
.cover-in {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
}
.crest {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--foil); color: var(--foil); font-size: 24px;
}
.cover-title { display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 0; font: inherit; }
.cover-title .cover-sub { order: -1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cover-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(230,201,127,.75); }
.brand { font-family: var(--display); font-size: 34px; line-height: .95; letter-spacing: .06em; color: var(--foil-2); text-decoration: none; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1.5px solid rgba(230,201,127,.55); background: transparent; color: var(--foil-2); font-size: 22px;
}
.icon-btn:hover { border-color: var(--foil-2); }

/* ---------- Data page ---------- */
.wrap {
  flex: 1; width: 100%; max-width: 720px; margin: 0 auto;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}
.meta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: end;
  padding: 0 2px 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field.right { text-align: right; align-items: flex-end; }
.field small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field b { font-family: var(--mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.total { display: inline-block; }
.rounds { display: flex; gap: 5px; height: 22px; align-items: center; }
.rounds i { width: 24px; height: 8px; border: 1.5px solid var(--line); border-radius: 2px; }
.rounds i.on { border-color: var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px); }
.rounds i.done { border-color: var(--admit); background: var(--admit); }
.rounds i.zero { border-color: var(--deny); background: var(--deny); }

/* Question as a visa application */
.q-card {
  position: relative; padding: 12px 16px 12px 22px;
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.q-card::before { /* perforated binding edge */
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 4px;
  background: radial-gradient(circle, var(--line) 1.6px, transparent 2px) 0 0 / 4px 9px repeat-y;
}
.q-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.q-ic { font-size: 16px; color: var(--ink); display: inline-flex; }
.q-cat { margin-left: auto; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 10px; }
.q-text { margin: 6px 0 4px; font-size: clamp(21px, 5.2vw, 27px); line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.q-sub { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Power-ups: visa stickers ---------- */
.powers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.pw {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; text-align: left;
  border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper-2);
  transition: transform .12s, border-color .2s, background .2s;
}
button.pw:not(:disabled):hover { border-color: var(--ink); transform: translateY(-1px); }
button.pw:not(:disabled):active { transform: scale(.96); }
.pw:disabled { opacity: .45; cursor: default; }
.pw-ic { font-size: 21px; display: inline-flex; color: var(--ink); }
.pw-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pw-tx b { font-size: 13.5px; font-weight: 600; }
.pw-tx small { font-family: var(--mono); font-size: 10px; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-n { margin-left: auto; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 3px; background: var(--ink); color: var(--paper-2); font-family: var(--mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.pw.passive.armed { border-color: var(--shield); background: #e3eef7; }
.pw.passive.armed .pw-ic { color: var(--shield); animation: hover 2.4s ease-in-out infinite; }
.pw.passive.empty { opacity: .45; }
.pw[data-p="flare"]:not(:disabled) .pw-ic { color: #b07a12; }
.pw[data-p="double"]:not(:disabled) .pw-ic { color: #c8571b; }
.pw.on { opacity: 1; border-color: #c8571b; background: #fbe9da; }
.pw.on .pw-ic { color: #c8571b; animation: flicker .9s ease-in-out infinite; }
.pw.gift { animation: gift .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes hover { 50% { transform: translateY(-2px); } }
@keyframes flicker { 50% { transform: scale(1.18) rotate(-6deg); } }
@keyframes gift { 0% { transform: scale(.9); } 50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(201,162,74,.4); } 100% { transform: scale(1); } }

/* ---------- Tiles ---------- */
.tiles { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.tile {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; overflow: hidden;
  padding: 8px 12px; text-align: left; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper-2);
  transition: transform .12s, background .25s, border-color .25s;
}
.tile:not(:disabled):hover { border-color: var(--ink); }
.tile:not(:disabled):active { transform: scale(.97); }
.tile:disabled { cursor: default; }
.tile img { width: 32px; height: 22px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23,50,74,.18); flex: none; }
.tile .txt { min-width: 0; position: relative; z-index: 1; }
.tile .nm { font-weight: 600; font-size: 15.5px; line-height: 1.15; }
.tile .fact { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink-2); margin-top: 2px; }
.tile.safe { background: var(--admit-soft); border-color: var(--admit); }
.tile.trap { background: var(--deny-soft); border-color: var(--deny); }
.tile.blocked { background: var(--deny-soft); border-color: var(--shield); }
.tile.flared { background: repeating-linear-gradient(-45deg, var(--deny-soft) 0 7px, var(--paper-2) 7px 14px); border-color: var(--deny); border-style: dashed; }
.tile.flared .nm { text-decoration: line-through; text-decoration-color: var(--deny); }
.tile.missed { border-color: var(--admit); border-style: dashed; }
.tile.dud { opacity: .6; }
.tile:has(.stamp) { padding-right: 86px; } /* room for the stamp so names stay readable */

/* Rubber stamps */
.stamp {
  position: absolute; right: 6px; top: 50%; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 6px 1px; border: 2.5px solid currentColor; border-radius: 5px;
  font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: .06em;
  transform: translateY(-50%) rotate(var(--rot, -9deg));
  opacity: .88; mix-blend-mode: multiply;
  -webkit-mask-image: var(--grain); mask-image: var(--grain);
}
.stamp small { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; }
.stamp .ic { font-size: 13px; stroke-width: 2.4; }
.stamp.admit { color: var(--admit); }
.stamp.deny { color: var(--deny); }
.stamp.block { color: var(--shield); }
.stamp.ghost { color: var(--admit); border-style: dashed; opacity: .55; }
.drop-tag { position: absolute; left: 4px; top: 3px; z-index: 2; display: inline-flex; font-size: 15px; color: #9a6b12; }
.drop-tag .ic { fill: #f3dfae; }
.tile.pop .stamp, .tile.shake .stamp, .tile.lit .stamp { animation: slam .38s cubic-bezier(.2,1.3,.4,1); }
.tile.pop { animation: thud .38s ease-out; }
.tile.shake { animation: shake .42s; }
.tile.lit { animation: lit .9s ease-out; }
.tile.enter { animation: deal .42s cubic-bezier(.2,1.2,.4,1) backwards; animation-delay: calc(var(--i) * 45ms); }
.q-card.enter { animation: slidein .4s cubic-bezier(.2,1,.4,1); }
.map-wrap.enter { animation: fadeup .5s ease-out; }
@keyframes slam {
  0% { opacity: 0; transform: translateY(-50%) rotate(calc(var(--rot, -9deg) - 14deg)) scale(2.6); }
  55% { opacity: .95; transform: translateY(-50%) rotate(var(--rot, -9deg)) scale(.9); }
  100% { opacity: .88; transform: translateY(-50%) rotate(var(--rot, -9deg)) scale(1); }
}
@keyframes thud { 0%, 30% { transform: scale(1); } 55% { transform: scale(.965); } 100% { transform: scale(1); } }
@keyframes shake { 15%, 55% { transform: translateX(-7px) rotate(-1deg); } 35%, 75% { transform: translateX(7px) rotate(1deg); } }
@keyframes lit { 0% { box-shadow: 0 0 0 0 rgba(222,160,40,.9); } 100% { box-shadow: 0 0 0 14px rgba(222,160,40,0); } }
@keyframes deal { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(.96); } }
@keyframes slidein { from { opacity: 0; transform: translateX(28px); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Action bar ---------- */
.actions {
  position: sticky; bottom: max(8px, env(safe-area-inset-bottom, 0px)); z-index: 600;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius); background: rgba(243,247,241,.96); backdrop-filter: blur(6px);
  border: 1.5px solid var(--ink); box-shadow: 0 6px 18px -10px rgba(23,50,74,.5);
}
.pot { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; flex: 1; min-width: 0; padding: 2px 6px; margin: -2px -6px; border-radius: 4px; transition: background .2s; }
.pot-lbl { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pot-num { font-family: var(--display); font-size: 40px; line-height: .9; font-variant-numeric: tabular-nums; }
.pot-next { font-size: 13px; color: var(--ink-2); }
.pot.hot { background: #fbe9da; box-shadow: inset 0 0 0 1.5px #c8571b; }
.pot.hot .pot-num { color: #c8571b; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius); padding: 13px 18px; font-weight: 600; font-size: 16px; }
.btn .ic { font-size: 19px; }
.btn.primary { background: var(--ink); color: var(--foil-2); }
.btn.primary:hover { background: #1f3f5c; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; border: 1.5px solid var(--ink); }
.btn.bank { background: var(--ink); color: var(--foil-2); min-width: 124px; font-family: var(--display); font-size: 22px; letter-spacing: .06em; font-weight: 400; padding: 10px 16px; }
.btn.bank:hover { background: #1f3f5c; }

/* ---------- Reveal ---------- */
.reveal { margin-top: 4px; }
.verdict { display: flex; align-items: center; gap: 14px; margin: 6px 2px 12px; }
.verdict .big {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 2px; border: 3px solid currentColor; border-radius: 6px;
  font-family: var(--display); font-size: 28px; letter-spacing: .06em; line-height: 1;
  transform: rotate(-4deg); mix-blend-mode: multiply; -webkit-mask-image: var(--grain); mask-image: var(--grain);
  animation: slam2 .45s cubic-bezier(.2,1.3,.4,1) backwards;
}
.verdict .big .ic { font-size: 22px; stroke-width: 2.4; }
.verdict.admit .big { color: var(--admit); }
.verdict.deny .big { color: var(--deny); }
.verdict.bank .big { color: var(--ink); }
.verdict .say { font-size: 15px; line-height: 1.35; min-width: 0; }
.verdict .say small { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--ink); }
#map { height: min(46vh, 380px); background: var(--sea); }
.leaflet-container { background: var(--sea); font-family: var(--body); }
.leaflet-tooltip.tip { font-weight: 600; font-size: 13px; border: 0; border-radius: 4px; color: var(--ink); box-shadow: 0 2px 8px rgba(23,50,74,.25); }
.map-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 2px 14px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 12px; height: 12px; border-radius: 2px; }
.k-safe { background: var(--admit); } .k-trap { background: var(--deny); } .k-focus { background: var(--ink); }

/* ---------- End: the travel record ---------- */
.end-card { overflow: hidden; border-radius: var(--radius); background: var(--paper-2); border: 1.5px solid var(--ink); }
.end-top { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--ink); color: var(--foil-2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.end-body { position: relative; padding: 18px 16px 6px; }
.end-score { display: flex; align-items: baseline; gap: 8px; }
.end-score b { font-family: var(--display); font-size: 92px; line-height: .85; font-weight: 400; font-variant-numeric: tabular-nums; }
.end-score small { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.end-word {
  position: absolute; right: 16px; top: 24px; padding: 6px 12px 3px; border: 3px solid var(--admit); border-radius: 8px; color: var(--admit);
  font-family: var(--display); font-size: 26px; letter-spacing: .06em; line-height: 1; transform: rotate(-8deg);
  mix-blend-mode: multiply; -webkit-mask-image: var(--grain); mask-image: var(--grain); animation: slam2 .5s .6s cubic-bezier(.2,1.3,.4,1) backwards;
}
.end-word.low { color: var(--deny); border-color: var(--deny); }
@keyframes slam2 { 0% { opacity: 0; scale: 2.6; } 60% { opacity: 1; scale: .92; } 100% { scale: 1; } }
.end-rows { display: grid; margin: 16px 0 12px; }
.end-row { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) 28px; align-items: start; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; animation: fadeup .4s ease-out backwards; animation-delay: calc(.35s + var(--i) * 90ms); }
.end-row .rq { font-size: 17px; color: var(--ink-2); display: inline-flex; }
.end-row .rt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.end-row .q { line-height: 1.3; }
.end-row .rq { margin-top: 1px; }
.end-row b { font-size: 16px; }
.end-row b { font-family: var(--mono); font-weight: 600; text-align: right; }
.marks { display: inline-flex; align-items: center; gap: 2px; }
.mk { width: 9px; height: 9px; border-radius: 1.5px; background: var(--admit); }
.mk-ic { display: inline-flex; font-size: 14px; }
.mk-ic .ic { stroke-width: 2.3; }
.mk-ic.deny { color: var(--deny); } .mk-ic.block { color: var(--shield); } .mk-ic.bank { color: var(--ink); } .mk-ic.star { color: #b07a12; } .mk-ic.hot { color: #c8571b; } .mk-ic.flare { color: #b07a12; }
.mrz { padding: 10px 14px 12px; background: #e9efe8; border-top: 1.5px solid var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.end-btns { display: grid; gap: 8px; padding: 14px 16px 16px; }
.share-box { width: 100%; padding: 10px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 14px/1.4 var(--mono); resize: none; }
.end-next { padding: 0 16px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); text-align: center; }

/* ---------- Scoreboard: arrivals today ---------- */
.board { margin-top: 14px; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); border: 1.5px solid var(--ink); }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; background: var(--ink); color: var(--foil-2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.board-top span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.board-top .ic { font-size: 15px; }
.board-body { padding: 14px 16px 14px; }
.board-big { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: .03em; margin: 2px 0 6px; }
.board-note { margin: 10px 16px 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.board-body .board-note { margin: 8px 0 0; }
.board-sub { margin: 4px 0 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.board-pct {
  display: inline-block; padding: 5px 12px 4px; border-radius: 999px; background: var(--deny); color: #fff;
  font-family: var(--display); font-size: 20px; letter-spacing: .05em; line-height: 1; font-weight: 400;
}

/* Score curve: everyone's scores as one smooth line, shaded up to yours */
.curve { position: relative; height: 150px; margin: 10px 4px 0; }
.curve svg { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.curve-area { fill: var(--ink); opacity: .07; }
.curve-area.below { opacity: .2; }
.curve-line { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.curve-me { position: absolute; bottom: 30px; width: 2.5px; margin-left: -1.25px; background: var(--deny); }
.curve-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--deny); box-shadow: 0 0 0 3px var(--paper-2); }
.curve-axis { position: absolute; left: 0; right: 0; top: 120px; height: 30px; border-top: 1.5px solid var(--ink); }
.curve-tick, .curve-you { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.curve-tick:first-child { transform: none; } .curve-tick:nth-last-child(2) { transform: translateX(-100%); }
.curve-tick.hide { visibility: hidden; }
.curve-you { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--deny); }
.curve.grow svg { animation: curveup .7s cubic-bezier(.2,.9,.3,1) backwards; transform-origin: 50% 120px; }
.curve.grow .curve-me, .curve.grow .curve-dot { animation: fadeup .4s .5s ease-out backwards; }
@keyframes curveup { from { transform: scaleY(0); } }
.curve.skeleton { height: 120px; border-bottom: 1.5px solid var(--line); background: radial-gradient(ellipse 45% 70% at 40% 100%, rgba(23,50,74,.09), transparent 70%); animation: pulsebar 1.2s ease-in-out infinite alternate; }
@keyframes pulsebar { to { opacity: .45; } }

/* ---------- Share sheet ---------- */
.share-preview { position: relative; margin: 10px 0 12px; aspect-ratio: 4 / 5; max-height: 46vh; border-radius: var(--radius); background: var(--paper); border: 1.5px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.share-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.share-preview.loading img { visibility: hidden; }
.share-preview.loading::after { content: "Printing your card…"; position: absolute; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.share-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-main .btn[hidden] { display: none; }
.share-main:has(#sh-native[hidden]) { grid-template-columns: 1fr; }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.net {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 500;
}
.net .ic { font-size: 24px; color: var(--brand, var(--ink)); }
.net:hover { border-color: var(--ink); background: #fff; }
.share-text { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.share-text pre { margin: 0; padding: 9px 10px; max-height: 92px; overflow: auto; border-radius: var(--radius); border: 1.5px dashed var(--line); background: var(--paper); font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.share-text .btn { padding: 10px 12px; font-size: 14px; }
.share-tip { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2); }

/* ---------- Guide (below the game, for new players and search engines) ---------- */
.guide { margin-top: 28px; padding: 20px 20px 22px; border-radius: var(--radius); background: var(--paper-2); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.guide h2 { margin: 14px 0 0; font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: .04em; line-height: 1; }
.guide h2:first-of-type { margin-top: 2px; }
.guide h3 { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; }
.guide p, .guide li { margin: 0; line-height: 1.5; max-width: 65ch; }
.guide ol, .guide ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.guide .guide-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; }
.guide a { color: var(--shield); text-underline-offset: 2px; }

.foot { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding: 10px 16px 18px; }

/* ---------- Modal + toast ---------- */
.modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(15,30,44,.55); }
.sheet { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; padding: 20px 20px 18px; border-radius: 8px; background: var(--paper-2); border-top: 6px solid var(--ink); }
.sheet-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sheet h2 { margin: 2px 0 8px; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: .04em; line-height: 1; }
.sheet p { line-height: 1.45; }
.help-steps { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.help-steps li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.help-steps p { margin: 0; font-size: 14.5px; }
.mini {
  justify-self: center; padding: 2px 6px 0; border: 2.5px solid currentColor; border-radius: 5px;
  font-family: var(--display); font-size: 17px; letter-spacing: .06em; line-height: 1.1; transform: rotate(-7deg);
  mix-blend-mode: multiply; -webkit-mask-image: var(--grain); mask-image: var(--grain);
}
.mini.admit { color: var(--admit); } .mini.deny { color: var(--deny); transform: rotate(6deg); }
.mini.bankit { color: var(--ink); font-size: 26px; border: 0; transform: none; -webkit-mask-image: none; mask-image: none; display: inline-flex; }
.help-sub { margin: 16px 0 2px; font-size: 16px; font-weight: 600; }
.help-note { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.help-powers { display: grid; gap: 8px; }
.help-powers div { display: flex; gap: 12px; align-items: flex-start; }
.hp { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--paper); font-size: 19px; }
.help-powers p { margin: 0; font-size: 14px; line-height: 1.4; }
.muted { color: var(--ink-2); font-size: 14px; }
.close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; font-size: 22px; color: var(--ink-2); }
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 3000; transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: var(--radius); background: var(--ink); color: var(--paper-2); font-weight: 500; font-size: 14px;
  opacity: 0; pointer-events: none; transition: .25s;
}
.toast .ic { font-size: 18px; color: var(--foil-2); }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---------- Effects ---------- */
.fx { position: fixed; z-index: 2500; pointer-events: none; transform: translate(-50%, -50%); }
.float { font-family: var(--display); font-size: 28px; letter-spacing: .03em; animation: floatup 1s ease-out forwards; text-shadow: 0 2px 0 var(--paper-2); }
.float.good { color: var(--admit); }
.float.hot { color: #c8571b; font-size: 32px; }
.ink { width: var(--s, 7px); height: var(--s, 7px); border-radius: 50%; animation: spark .7s cubic-bezier(.15,.7,.3,1) forwards; }
.shield-pop { font-size: 76px; color: var(--shield); animation: shieldpop .9s cubic-bezier(.2,1.4,.4,1) forwards; filter: drop-shadow(0 6px 10px rgba(23,50,74,.3)); }
.shield-pop .ic { fill: rgba(227,238,247,.92); stroke-width: 1.6; }
.crate { font-size: 46px; color: #9a6b12; }
.crate .ic { fill: #f3dfae; stroke-width: 1.6; }
.chip { padding: 3px 10px 1px; border-radius: 4px; background: var(--ink); color: var(--foil-2); font-family: var(--display); font-size: 24px; letter-spacing: .04em; box-shadow: 0 4px 12px rgba(23,50,74,.3); }
.stampfx { padding: 2px 12px 0; border: 3.5px solid #c8571b; border-radius: 8px; color: #c8571b; font-family: var(--display); font-size: 48px; line-height: 1; animation: stampfx .8s cubic-bezier(.2,1.4,.4,1) forwards; }
.redflash { inset: 0; left: 0 !important; top: 0 !important; transform: none; background: radial-gradient(ellipse at center, rgba(192,57,43,0) 30%, rgba(192,57,43,.4)); animation: fadeout .6s ease-out forwards; }
.confetti { width: 8px; height: 13px; border-radius: 1px; animation: confetti 1.6s cubic-bezier(.2,.6,.4,1) forwards; }
.scanbeam { position: absolute; inset: -6px; pointer-events: none; border-radius: 10px; background: linear-gradient(100deg, transparent 30%, rgba(240,190,70,.55) 50%, transparent 70%); background-size: 250% 100%; animation: scan .75s ease-in-out forwards; mix-blend-mode: multiply; }
.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
#play.quake { animation: quake .45s; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); } }
@keyframes shieldpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 60% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(.8) rotate(10deg); } }
@keyframes stampfx { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-14deg); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(1) rotate(-8deg); } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes confetti { 0% { transform: translate(-50%, -50%); } 30% { transform: translate(calc(-50% + var(--dx) * .4), calc(-50% + var(--up))) rotate(calc(var(--r) * .3)); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); } }
@keyframes scan { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes bump { 40% { transform: scale(1.22); } }
@keyframes quake { 15% { transform: translate(-6px, 2px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, 1px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-1px, -1px); } }

@media (max-width: 440px) {
  .brand { font-size: 30px; }
  .tile { padding: 8px 9px; gap: 8px; }
  .tile img { width: 26px; height: 18px; }
  .tile .nm { font-size: 14.5px; }
  .stamp { font-size: 13.5px; right: 5px; padding: 2px 4px 1px; border-width: 2px; }
  .stamp small { font-size: 8.5px; }
  .tile:has(.stamp) { padding-right: 72px; }
  .pw { flex-direction: column; align-items: flex-start; gap: 3px; }
  .pw-n { position: absolute; top: 6px; right: 6px; }
  .end-score b { font-size: 76px; }
  .end-word { font-size: 21px; }
  .board-big { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Links + info pages (geotrap.io) ---------- */
.foot a, .board-note a { color: inherit; text-underline-offset: 2px; }
.foot a:hover, .board-note a:hover { color: var(--ink); }
.policy { margin-top: 16px; padding: 20px 20px 22px; border-radius: var(--radius); background: var(--paper-2); border: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.policy h1 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 38px; letter-spacing: .04em; line-height: 1; }
.policy h2 { margin: 16px 0 0; font-size: 17px; font-weight: 600; }
.policy p, .policy li { margin: 0; line-height: 1.5; max-width: 65ch; }
.policy ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.policy a:not(.btn) { color: var(--shield); }
.policy code { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.policy .effective { color: var(--ink-2); font-size: 13px; }
.policy-back { align-self: flex-start; margin-top: 14px; text-decoration: none; }