/* Undead Island website: everything below the landing hero, plus the policy pages (/terms/, /privacy/, /odds/,
   /guidelines/, /policies/). Matches the game's menu art direction (game/css/theme.css): Lilita One display text with a
   dark outline, Nunito body, sky/navy panels with thick dark outlines and an inner highlight, orange/yellow glossy buttons.
   Loaded after site.css on the landing page; standalone on the other pages. Mobile-first. */
:root {
  --ol: #0b1a33; --ol2: #12284c;
  --pn1: #2a6fc0; --pn2: #1c4f95; --pn3: #153d77; --pnHi: rgba(140, 205, 255, .35);
  --bl1: #57b8ff; --bl2: #1e6fdc; --or1: #ffb43c; --or2: #ff6d1a; --or3: #ec3d1c; --yl1: #ffe467; --yl2: #ffbe1a; --yl3: #f39a0c;
  --gold: #ffd23f; --mut: #bcd6f5; --dim: #8fb2dc; --grn: #7ff05a; --red: #ff6a52;
  --fh: "Lilita One", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fb: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --so: 0 2px 0 var(--ol), 0 -1.5px 0 var(--ol), 1.5px 0 0 var(--ol), -1.5px 0 0 var(--ol), 1.5px 1.5px 0 var(--ol), -1.5px 1.5px 0 var(--ol), 1.5px -1.5px 0 var(--ol), -1.5px -1.5px 0 var(--ol), 0 3px 0 var(--ol);
  --so2: 0 1.5px 0 var(--ol), 0 -1px 0 var(--ol), 1px 0 0 var(--ol), -1px 0 0 var(--ol), 1px 1px 0 var(--ol), -1px 1px 0 var(--ol), 1px -1px 0 var(--ol), -1px -1px 0 var(--ol);
  --panelBg: linear-gradient(180deg, var(--pn1), var(--pn2) 60%, var(--pn3));
  --panelSh: inset 0 2px 0 var(--pnHi), inset 0 0 0 2px rgba(110, 180, 255, .22), 0 4px 0 rgba(4, 12, 30, .55);
  --g: 16px; --maxw: 1120px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --g: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.ui { margin: 0; color: #fff; font: 700 16px/1.6 var(--fb); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: #0d2c5a linear-gradient(180deg, #1a4f94 0, #123f7c 520px, #0d2c5a 1400px) no-repeat; }
body.ui img { display: block; max-width: 100%; height: auto; }
body.ui a { color: var(--yl1); text-underline-offset: 3px; }
body.ui a:hover { color: #fff; }
body.ui :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
body.ui ::selection { background: rgba(255, 190, 40, .6); color: #fff; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold); color: var(--ol) !important; padding: 10px 16px; border-radius: 10px; border: 3px solid var(--ol); font-weight: 900; text-decoration: none; }
.skip:focus { top: 12px; }
.w { width: 100%; max-width: calc(var(--maxw) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.ui h1, .ui h2, .ui h3 { font-family: var(--fh); font-weight: 400; letter-spacing: .3px; margin: 0; line-height: 1.08; text-shadow: var(--so); color: #fff; }
.ui h1 { font-size: clamp(34px, 8vw, 56px); }
.ui h2 { font-size: clamp(30px, 7vw, 48px); }
.ui h3 { font-size: clamp(21px, 4.6vw, 26px); text-shadow: var(--so2); }
.ui p { margin: 0; }
.kick { display: inline-block; font: 400 14px/1 var(--fh); letter-spacing: .08em; text-transform: uppercase; color: var(--ol); background: linear-gradient(180deg, var(--yl1), var(--yl2));
  border: 3px solid var(--ol); border-radius: 10px; padding: 6px 11px 7px; box-shadow: 0 3px 0 var(--ol); transform: rotate(-2deg); margin-bottom: 12px; }
.lede { color: #e6f1ff; font-size: clamp(16px, 2.2vw, 19px); max-width: 38em; margin-top: 12px; }
.mut { color: var(--mut); }

/* ---------- buttons ---------- */
.ub { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 22px 12px; border: 3px solid var(--ol); border-radius: 16px;
  background: linear-gradient(180deg, var(--bl1), var(--bl2)); color: #fff !important; font: 400 20px/1 var(--fh); letter-spacing: .4px; text-decoration: none; text-shadow: var(--so2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 4px 0 var(--ol); transition: transform .08s, box-shadow .08s, filter .15s; }
.ub::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 36%; border-radius: 12px 12px 20px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.ub:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ub:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 1px 0 var(--ol); }
.ub.pri { background: linear-gradient(180deg, var(--or1), var(--or2) 55%, var(--or3)); border-color: #5a1a05; box-shadow: inset 0 2px 0 rgba(255, 240, 200, .65), inset 0 -4px 0 rgba(140, 30, 0, .3), 0 4px 0 #5a1a05; }
.ub.disc { background: linear-gradient(180deg, #8b93ff, #5865f2 60%, #4450d8); }
.ub img { width: 30px; height: 30px; margin: -6px 0 -6px -6px; }
.ubs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 519px) { .ubs .ub { flex: 1 1 100%; } }

/* ---------- panels ---------- */
.panel { background: var(--panelBg); border: 3px solid var(--ol); border-radius: 20px; box-shadow: var(--panelSh); padding: 18px; }
.panel.dark { background: linear-gradient(180deg, #11335f, #0c264a); box-shadow: inset 0 2px 0 rgba(120, 190, 255, .18), 0 4px 0 rgba(4, 12, 30, .55); }
.uChips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.uChips span { display: inline-flex; align-items: center; gap: 6px; font: 800 13.5px/1.2 var(--fb); color: #fff; background: rgba(8, 26, 56, .7); border: 2px solid var(--ol); border-radius: 999px; padding: 6px 11px; }
.uChips span b { color: var(--gold); }

/* ---------- landing: sections ---------- */
.sec { position: relative; padding: 64px 0; }
@media (min-width: 900px) { .sec { padding: 92px 0; } }
.sec + .sec { border-top: 3px solid rgba(8, 20, 45, .55); }
.sec.alt { background: linear-gradient(180deg, rgba(8, 24, 52, .45), rgba(8, 24, 52, .15)); }
.secHead { max-width: 46em; margin-bottom: 26px; }
.grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .g4 { grid-template-columns: repeat(2, 1fr); } }

/* the loop */
.uStep { display: flex; gap: 14px; align-items: flex-start; }
.uStep img { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 4px 0 rgba(4, 12, 30, .5)); }
.uStep h3 { margin-bottom: 6px; }
.uStep p { color: #e6f1ff; font-size: 15.5px; }
.uStats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
@media (min-width: 720px) { .uStats { grid-template-columns: repeat(4, 1fr); } }
.uStat { text-align: center; padding: 14px 8px; }
.uStat b { display: block; font: 400 clamp(30px, 7vw, 42px)/1 var(--fh); color: var(--gold); text-shadow: var(--so); }
.uStat span { display: block; margin-top: 6px; font-size: 14px; color: #e6f1ff; line-height: 1.3; }

/* cars */
.cars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .cars { grid-template-columns: repeat(3, 1fr); } }
.car { padding: 10px 12px 14px; text-align: center; }
.car img { width: 100%; aspect-ratio: 542 / 422; object-fit: contain; margin: -4px auto 4px; filter: drop-shadow(0 6px 0 rgba(4, 12, 30, .45)); }
.car h3 { font-size: clamp(18px, 4vw, 23px); }
.car small { display: block; font: 800 12.5px/1.3 var(--fb); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.car p { font-size: 14px; color: #e6f1ff; margin-top: 6px; line-height: 1.4; }
.feat h3 { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.feat h3 img { width: 44px; height: 44px; flex: none; }
.feat p, .feat li { color: #e6f1ff; font-size: 15px; }
.feat ul { margin: 8px 0 0; padding-left: 20px; }
.feat li + li { margin-top: 4px; }
.skins { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; margin-top: 16px; scrollbar-width: thin; }
.skin { flex: 0 0 min(62vw, 230px); scroll-snap-align: start; margin: 0; padding: 0; overflow: hidden; }
.skin img { width: 100%; aspect-ratio: 300 / 260; object-fit: cover; border-bottom: 3px solid var(--ol); }
.skin figcaption { font: 400 18px/1 var(--fh); text-shadow: var(--so2); padding: 10px 12px 12px; }

/* island */
.places { columns: 2; column-gap: 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; }
@media (min-width: 720px) { .places { columns: 3; } }
.places li { break-inside: avoid; padding: 3px 0; color: #e6f1ff; }
.places li b { color: #fff; }
.events { display: grid; gap: 10px; margin-top: 8px; }
@media (min-width: 720px) { .events { grid-template-columns: repeat(2, 1fr); } }
.ev { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.ev .e { font-size: 26px; line-height: 1; flex: none; width: 34px; text-align: center; }
.ev b { font: 400 18px/1.15 var(--fh); text-shadow: var(--so2); display: block; }
.ev span { font-size: 14.5px; color: #e6f1ff; }
.vaults { margin-top: 12px; display: grid; gap: 10px; }
@media (min-width: 720px) { .vaults { grid-template-columns: repeat(2, 1fr); } }
.vault { display: flex; gap: 12px; align-items: center; padding: 10px 14px; }
.vault img { width: 52px; height: 52px; flex: none; }
.vault b { display: block; font: 400 18px/1.15 var(--fh); text-shadow: var(--so2); }
.vault span { font-size: 14px; color: #e6f1ff; }

/* traders */
.traders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .traders { grid-template-columns: repeat(3, 1fr); } }
.trader { padding: 0; overflow: hidden; }
.trader img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 3px solid var(--ol); }
.trader div { padding: 10px 12px 14px; }
.trader b { display: block; font: 400 20px/1.1 var(--fh); text-shadow: var(--so2); }
.trader span { display: block; font-size: 13.5px; color: var(--gold); font-weight: 900; }
.trader p { font-size: 14px; color: #e6f1ff; margin-top: 4px; line-height: 1.4; }

/* horde */
.clock { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; }
.clock img { width: 64px; height: 64px; flex: none; }
.clock b { font: 400 clamp(22px, 5vw, 30px)/1.1 var(--fh); color: var(--gold); text-shadow: var(--so); display: block; }
.clock span { color: #e6f1ff; font-size: 15px; }

/* join */
.join { position: relative; overflow: hidden; border-radius: 26px; border: 3px solid var(--ol); box-shadow: 0 5px 0 rgba(4, 12, 30, .6); isolation: isolate; padding: 28px 18px; }
.join .bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.join::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 30, 66, .88), rgba(10, 30, 66, .7) 60%, rgba(10, 30, 66, .5)); }
@media (min-width: 900px) { .join { padding: 48px 44px; } .join::after { background: linear-gradient(90deg, rgba(10, 30, 66, .92), rgba(10, 30, 66, .75) 55%, rgba(10, 30, 66, .2)); } .join > div { max-width: 36em; } }
.join ol { margin: 16px 0 0; padding-left: 22px; }
.join li { margin-top: 6px; color: #fff; }

/* faq */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative; font: 400 19px/1.25 var(--fh); text-shadow: var(--so2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid var(--ol); background: linear-gradient(180deg, var(--yl1), var(--yl2));
  color: var(--ol); font: 400 20px/20px var(--fh); text-align: center; text-shadow: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 16px 16px; color: #e6f1ff; font-size: 15.5px; }
.faq details > div p + p { margin-top: 8px; }

/* mini header (landing, after the hero) and the page header (policy pages) */
.miniBar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; transform: translateY(-110%); transition: transform .25s ease; background: linear-gradient(180deg, rgba(14, 44, 92, .96), rgba(10, 32, 70, .96));
  border-bottom: 3px solid var(--ol); box-shadow: 0 3px 0 rgba(0, 0, 0, .2); padding-top: env(safe-area-inset-top); }
.miniBar.on { transform: none; }
.miniBar .w, .top .w { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.miniBar .logo img, .top .logo img { height: 42px; width: auto; }
.miniBar nav, .top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.miniBar nav a:not(.ub), .top nav a:not(.ub) { display: none; color: #fff; text-decoration: none; font: 400 17px/1 var(--fh); text-shadow: var(--so2); padding: 8px 10px; border-radius: 10px; }
.miniBar nav a:not(.ub):hover, .top nav a:not(.ub):hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 900px) { .miniBar nav a:not(.ub), .top nav a:not(.ub) { display: inline-block; } }
.miniBar .ub, .top .ub { min-height: 42px; font-size: 17px; padding: 8px 16px 10px; border-radius: 13px; }
@media (prefers-reduced-motion: reduce) { .miniBar { transition: none; } }
.top { background: linear-gradient(180deg, rgba(14, 44, 92, .96), rgba(10, 32, 70, .9)); border-bottom: 3px solid var(--ol); padding-top: env(safe-area-inset-top); }

/* ---------- footer ---------- */
.foot { background: #0a2248; border-top: 3px solid var(--ol); padding: 40px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14.5px; }
.foot .fTop { display: grid; gap: 24px; }
@media (min-width: 820px) { .foot .fTop { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot .logo img { height: 64px; width: auto; }
.foot h2 { font-size: 18px; margin-bottom: 8px; text-shadow: var(--so2); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 3px 0; }
.foot a { color: #e6f1ff; text-decoration: none; }
.foot a:hover { color: var(--yl1); text-decoration: underline; }
.foot .fine { margin-top: 26px; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, .1); color: var(--dim); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- policy pages ---------- */
.doc { padding: 34px 0 60px; }
.doc .w { max-width: calc(820px + var(--g) * 2); }
.doc header.dh { margin-bottom: 22px; }
.doc .upd { margin-top: 10px; color: var(--mut); font-size: 14.5px; }
.doc .card { background: linear-gradient(180deg, #11335f, #0c264a); border: 3px solid var(--ol); border-radius: 20px; box-shadow: inset 0 2px 0 rgba(120, 190, 255, .18), 0 4px 0 rgba(4, 12, 30, .55); padding: 20px 18px 26px; }
@media (min-width: 720px) { .doc .card { padding: 30px 36px 38px; } }
@media (max-width: 519px) { .doc .card { padding: 16px 12px 22px; border-radius: 16px; } .crate { padding: 12px 8px; } .tWrap table.fit { font-size: 13px; } .tWrap table.fit thead th { font-size: 12px; } }
.doc .card h2 { font-size: clamp(22px, 5vw, 28px); margin: 30px 0 10px; text-shadow: var(--so2); scroll-margin-top: 16px; }
.doc .card h2:first-child { margin-top: 0; }
.doc .card h3 { font-size: 19px; margin: 18px 0 6px; }
.doc .card p, .doc .card li { font-weight: 600; color: #eaf3ff; font-size: 16px; line-height: 1.65; }
.doc .card p + p { margin-top: 10px; }
.doc .card ul, .doc .card ol { margin: 8px 0 0; padding-left: 22px; }
.doc .card li + li { margin-top: 5px; }
.doc .card strong, .doc .card b { color: #fff; font-weight: 900; }
.doc .tldr { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; border: 2.5px solid var(--ol); background: rgba(255, 210, 63, .12); }
.doc .tldr p, .doc .tldr li { font-size: 15.5px; }
.doc nav.toc { margin: 0 0 20px; padding: 12px 16px; border-radius: 14px; background: rgba(8, 26, 56, .6); border: 2px solid var(--ol); }
.doc nav.toc h2 { font-size: 17px; margin: 0 0 6px; }
.doc nav.toc ol { margin: 0; padding-left: 20px; columns: 1; }
@media (min-width: 720px) { .doc nav.toc ol { columns: 2; column-gap: 24px; } }
.doc nav.toc li { font-size: 14.5px; margin: 0 0 3px; break-inside: avoid; }
.hub { display: grid; gap: 12px; }
@media (min-width: 720px) { .hub { grid-template-columns: repeat(2, 1fr); } }
.hub a { display: block; text-decoration: none; color: #fff; padding: 18px; }
.hub a:hover { filter: brightness(1.08); color: #fff; }
.hub b { display: block; font: 400 22px/1.1 var(--fh); text-shadow: var(--so2); }
.hub span { display: block; margin-top: 6px; color: #e6f1ff; font-size: 15px; font-weight: 700; }

/* ---------- odds page ---------- */
.oSec { margin-top: 30px; }
.oSec h2 { font-size: clamp(24px, 5.4vw, 32px); margin-bottom: 10px; text-shadow: var(--so); }
.oSec > p, .oSec .small { color: #eaf3ff; font-size: 15.5px; margin-top: 8px; font-weight: 600; }
.oSec .small { font-size: 13.5px; color: var(--mut); }
.note { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border: 2.5px solid var(--ol); background: rgba(255, 210, 63, .14); font-size: 15px; font-weight: 700; }
.crate { margin-top: 16px; padding: 14px; border-radius: 18px; border: 3px solid var(--ol); background: linear-gradient(180deg, #11335f, #0c264a); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 40%, transparent), 0 4px 0 rgba(4, 12, 30, .55); }
.crate header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.crate header img { width: 72px; height: 72px; flex: none; }
.crate h3 { color: var(--rc); font-size: 24px; }
.crate header p { font-size: 14px; color: #e6f1ff; margin-top: 3px; font-weight: 700; }
.tWrap { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.tWrap table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0 3px; font-size: 14px; }
.tWrap caption { text-align: left; font-weight: 900; color: var(--mut); font-size: 13px; padding-bottom: 4px; }
.tWrap th, .tWrap td { padding: 7px 8px; text-align: right; white-space: nowrap; }
.tWrap thead th { font: 400 13.5px/1.1 var(--fh); color: #fff; text-shadow: var(--so2); vertical-align: bottom; }
.tWrap tbody th { text-align: left; font-weight: 800; white-space: normal; min-width: 150px; }
.tWrap tbody td, .tWrap tbody th { background: rgba(8, 26, 56, .7); }
.tWrap tbody tr > :first-child { border-radius: 10px 0 0 10px; }
.tWrap tbody tr > :last-child { border-radius: 0 10px 10px 0; }
.tWrap table.fit { min-width: 0; }
.tWrap table.fit th, .tWrap table.fit td { padding: 7px 5px; }
.tWrap table.fit tbody th { min-width: 0; white-space: nowrap; }
.tWrap table.fit thead th { white-space: normal; }
.tWrap .altc { color: #ffe9a8; }
.tWrap thead th.altc { color: #ffe9a8; }
.tWrap thead th:first-child { text-align: left; }
.rdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--rc); border: 1.5px solid var(--ol); margin-right: 5px; vertical-align: 0; }
.facts { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; }
.facts li { margin-top: 4px; color: #eaf3ff; font-weight: 600; }
.acc { margin-top: 10px; border-radius: 14px; border: 2.5px solid var(--ol); background: linear-gradient(180deg, #11335f, #0c264a); padding: 0 12px; }
.acc summary { cursor: pointer; padding: 12px 2px; font-size: 15.5px; }
.acc summary b { font: 400 19px/1.1 var(--fh); text-shadow: var(--so2); margin-right: 6px; }
.acc summary span { color: var(--mut); font-weight: 700; font-size: 14px; }
.acc[open] { padding-bottom: 12px; }
/* audit v2 decisions 31 + 35 (2026-10-05): "Request an invite" forms, real game screenshots, Discord "Coming soon" */
.invForm { margin-top: 16px; max-width: 460px; }
.invForm label { display: block; font: 800 14px var(--fb); color: #fff; margin-bottom: 6px; text-shadow: 0 1px 0 var(--ol), 0 2px 6px rgba(0, 0, 0, .5); }
.invRow { display: flex; gap: 8px; }
.invRow input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 8px 12px; border: 3px solid var(--ol); border-radius: 14px; background: #0c264a; color: #fff; font: 700 16px var(--fb); }
.invRow input::placeholder { color: var(--dim); }
.invRow input:focus-visible { outline: 3px solid var(--yl1); outline-offset: 1px; }
.invRow button { flex: none; min-height: 46px; padding: 8px 16px; border: 3px solid var(--ol); border-radius: 14px; background: linear-gradient(180deg, var(--yl1), var(--yl2)); color: var(--ol); font: 400 16px/1 var(--fh); cursor: pointer; box-shadow: 0 3px 0 var(--ol); }
.invRow button:disabled { opacity: .6; cursor: progress; }
.invMsg { min-height: 1.3em; margin-top: 6px; font: 700 14px var(--fb); color: #fff; text-shadow: 0 1px 0 var(--ol); }
.invMsg.good { color: var(--grn); } .invMsg.bad { color: #ffc27a; } .invMsg a { color: var(--yl1); }
.kaInv { animation: fadeUp .6s ease-out .8s both; }
.shots { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 900px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; padding: 0; overflow: hidden; }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 3px solid var(--ol); }
.shot figcaption { padding: 10px 12px 12px; color: #e6f1ff; font-size: 15px; }
.shot figcaption b { display: block; font: 400 19px/1.1 var(--fh); color: #fff; text-shadow: var(--so2); margin-bottom: 2px; }
a[data-discord][aria-disabled="true"] { cursor: default; filter: grayscale(.85) brightness(.85); pointer-events: none; }
a[data-discord][aria-disabled="true"]::after { content: " · Coming soon"; }
.ub[data-discord][aria-disabled="true"]:hover { transform: none; }
/* legal placeholders still to fill ([LEGAL ENTITY NAME], [STATE], ...): highlighted so they can't be missed (decisions 33/34) */
.ph { background: rgba(255, 228, 103, .18); outline: 1px dashed var(--yl1); border-radius: 4px; padding: 0 3px; color: var(--yl1); font-weight: 800; }
/* Heist Fall logo (L77, 2026-10-11) */
.hfLogo { display: block; height: 46px; width: auto; }
.hfLogo.big { height: 72px; }