/* $SUNK — print language: paper, ink, flat water bands, one safety-orange ink. No glow, no glass, no gradient text. */
:root {
  --paper: #0B1A2E; --paper2: #0E2340; --ink: #F3EEE3; --ink2: #C9CFDA; --mute: #7F8DA6; --line: #23395A; --panel: #102A4A;
  --orange: #FF5A1F; --yellow: #F5D90A; --mint: #2BD48A; --red: #E23D28;
  --w0: #CFE3F0; --w1: #8FBBD9; --w2: #4E8EBB; --w3: #255F8F; --w4: #143C63; --w5: #0B2340;
  --serif: 'Fraunces', Georgia, serif; --sans: 'Archivo', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 3px 3px; }
a { color: inherit }
b { font-weight: 700 }
.mono { font-family: var(--mono) }
.wrap { max-width: 1240px; margin: 0 auto; padding: 96px 24px }
.eyebrow { font: 400 10px/1 "Press Start 2P", var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 18px }
.h2 { font: 400 clamp(32px, 4.6vw, 60px)/1.02 var(--serif); letter-spacing: -.02em; margin: 0 0 22px; font-variation-settings: 'opsz' 144 }
.h2 em, .h1 em { font-style: italic; font-weight: 300; color: var(--orange) }
.p { font-size: 18px; max-width: 62ch; color: var(--ink2) }
.small { font-size: 13px; color: var(--ink2); margin: 6px 0 }
.faint { color: var(--mute) }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 4px; font: 700 14px/1 var(--sans); text-decoration: none; cursor: pointer; background: var(--paper2); color: var(--ink); box-shadow: 3px 3px 0 #000; transition: transform .08s, box-shadow .08s }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000 }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }
.btn-ink { background: var(--orange); color: #15161A; border-color: var(--orange) }
.btn-lg { padding: 15px 22px; font-size: 16px }
.arr { font-family: var(--mono) }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #05142A; border-bottom: 2px solid var(--line) }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none }
.mark { width: 30px; height: 30px; border-radius: 6px; background: var(--ink) url('assets/favicon.svg') center/cover }
.wordmark { font: 900 20px/1 var(--sans); letter-spacing: -.02em; font-variation-settings: 'wdth' 110 }
.nav { display: flex; gap: 16px; font: 600 13px/1 var(--sans) }
.nav a { text-decoration: none; color: var(--ink2) } .nav a:hover { color: var(--ink); text-decoration: underline }
.hstats { margin-left: auto; display: flex; gap: 14px; align-items: center }
.stat, .ca { display: inline-flex; align-items: baseline; gap: 6px; font: 600 12px/1 var(--mono) }
.stat .k, .ca .k { color: var(--mute); font-size: 8px; letter-spacing: .05em; font-family: "Press Start 2P", var(--mono) }
.stat .v { font-size: 14px }
.stat .d { font-size: 11px; color: var(--mute) } .stat .d.up { color: #178A58 } .stat .d.dn { color: var(--red) }
.stat.pot .v { color: var(--orange) }
.ca { border: 1.5px solid var(--ink); border-radius: 4px; padding: 5px 8px; background: var(--paper); cursor: pointer; color: var(--ink) }
.ca .cp { font-size: 10px; color: var(--orange) }
.xbtn { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 4px; background: transparent }
.xbtn svg { width: 15px; height: 15px; fill: var(--ink) }

/* THE WATER */
.water { position: relative; height: min(94vh, 1000px); min-height: 680px; border-bottom: 2px solid var(--line); overflow: hidden; background: #071B36 }
#sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges }
.hero { position: absolute; left: 24px; top: 22px; max-width: 760px; z-index: 3 }
.kicker { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin: 0 0 14px }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: blink 1.4s infinite }
@keyframes blink { 50% { opacity: .25 } }
.h1 { font: 400 clamp(40px, 5.4vw, 78px)/.96 var(--serif); letter-spacing: -.03em; margin: 0 0 18px; font-variation-settings: 'opsz' 144 }
.lede { font-size: 18px; color: #2A2416; max-width: 54ch; margin: 0 0 22px; padding: 2px 0 }
.hero .h1 { color: #15161A } .hero .kicker { color: #4A3A1E }
.ctas { display: flex; gap: 12px; flex-wrap: wrap }

.depthScale { position: absolute; right: 18px; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2 }
.depthScale .tick { position: absolute; right: 0; width: 100%; border-top: 1.5px dashed rgba(21,22,26,.55); padding-top: 4px; font: 700 11px/1.3 var(--mono); text-align: right; color: var(--paper) }
.depthScale .tick span { display: block; letter-spacing: .1em }
.depthScale .tick b { display: block; font-weight: 500; font-size: 11px }
.depthScale .tick i { display: block; font-style: normal; font-weight: 500; opacity: .75 }
.depthScale .t0 { color: #15161A }

.legend { position: absolute; right: 150px; top: 22px; z-index: 3; color: #15161A; background: #F3EEE3; border-color: #15161A !important; box-shadow: 4px 4px 0 #15161A !important; border: 2px solid var(--ink); box-shadow: 4px 4px 0 #000; padding: 10px 12px; font: 600 12px/1.7 var(--sans) }
.legend .row { display: flex; align-items: center; gap: 8px }
.legend .hint { color: var(--mute); font-weight: 500; margin-top: 4px }
.sw { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block }
.sw.surface { background: var(--mint) } .sw.under { background: var(--w2) } .sw.earn { background: var(--orange) } .sw.left { background: var(--paper); border-style: dashed }

.census { position: absolute; right: 150px; bottom: 22px; z-index: 3; display: flex; gap: 0; background: #05142A; border: 2px solid var(--ink); box-shadow: 4px 4px 0 #000 }
.census .c { padding: 10px 16px; border-right: 2px solid var(--ink); text-align: center; min-width: 96px }
.census .c:last-child { border-right: 0 }
.census b { display: block; font: 400 18px/1 "Press Start 2P", var(--mono); color: var(--yellow) } .census span { font: 400 7px/1 "Press Start 2P", var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute) }

.tip { position: absolute; z-index: 5; background: #05142A; border: 2px solid var(--ink); box-shadow: 4px 4px 0 #000; padding: 10px 12px; font: 500 12px/1.5 var(--mono); min-width: 230px; pointer-events: none }
.tip .a { font-weight: 700; font-size: 13px } .tip .r { display: flex; justify-content: space-between; gap: 14px } .tip .r b { font-weight: 700 }
.tip .tag { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--ink); color: var(--paper); font-size: 10px; letter-spacing: .1em }
.tip .tag.earn { background: var(--orange) } .tip .tag.surf { background: var(--mint); color: var(--ink) } .tip .tag.left { background: var(--paper); color: var(--ink); border: 1px dashed var(--ink) }

.feed { position: absolute; left: 24px; bottom: 22px; z-index: 3; width: 330px; margin: 0; padding: 0; list-style: none; font: 500 12px/1.4 var(--mono) }
.feed li { background: #05142A; border: 1.5px solid var(--ink); padding: 6px 9px; margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; animation: drop .4s ease-out }
.feed li .t { color: var(--mute); font-size: 10px } .feed li .w { font-weight: 700 }
.feed li.buy { border-left: 6px solid var(--mint) } .feed li.sell { border-left: 6px solid var(--ink2) } .feed li.forfeit { border-left: 6px solid var(--red) } .feed li.payday { border-left: 6px solid var(--orange); background: var(--yellow); color: #15161A }
@keyframes drop { from { transform: translateY(-8px); opacity: 0 } }

/* strip */
.strip { border-bottom: 2px solid var(--line); background: #05142A; color: #F3EEE3; overflow: hidden; height: 36px; display: flex; align-items: center }
.run { display: flex; gap: 48px; white-space: nowrap; font: 400 9px/1 "Press Start 2P", var(--mono); letter-spacing: .12em; text-transform: uppercase; animation: run 60s linear infinite; padding-left: 100% }
@keyframes run { to { transform: translateX(-100%) } }
.run span i { color: var(--yellow); font-style: normal }

/* payday */
.payday { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start }
.formula { display: flex; align-items: center; gap: 14px; margin-top: 26px; font: 500 18px/1.2 var(--serif); font-style: italic }
.formula .frac { display: inline-grid; text-align: center } .formula .frac span:first-child { border-bottom: 2px solid var(--ink); padding: 0 8px 3px } .formula .frac span:last-child { padding-top: 3px }
.formula .cap { font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--orange); color: var(--paper); padding: 5px 8px; border-radius: 3px; font-style: normal }
.potCard { background: #15161A; color: #F3EEE3; border-radius: 6px; padding: 22px 24px; box-shadow: 6px 6px 0 var(--orange) }
.potTop { display: flex; justify-content: space-between; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: #B8BCC9 }
.live { display: inline-flex; gap: 6px; align-items: center; color: var(--yellow) } .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: blink 1.2s infinite }
.potBig { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 12px } .potBig b { font: 700 64px/1 var(--mono); letter-spacing: -.03em } .potBig span { font: 700 14px/1 var(--mono); color: #B8BCC9 }
.potRow { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid #33363F; font: 500 13px/1 var(--sans) } .potRow b { font-family: var(--mono) }
.bar { height: 8px; background: #33363F; border-radius: 2px; margin-top: 12px; overflow: hidden } .bar i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 1s linear }
.receipt { margin-top: 26px; background: #F3EEE3; color: #15161A; border: 1.5px solid #CFC8B8; padding: 18px 20px 14px; font: 500 13px/1.6 var(--mono); position: relative; box-shadow: 0 10px 0 -6px var(--paper2) }
.receipt::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(135deg, transparent 50%, #F3EEE3 50%) 0 0/8px 8px, linear-gradient(225deg, transparent 50%, #F3EEE3 50%) 0 0/8px 8px; background-position: 0 0, 4px 0 }
.rc-head { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: .12em; border-bottom: 1.5px dashed #15161A; padding-bottom: 8px; margin-bottom: 8px }
.rc-line { display: flex; justify-content: space-between; gap: 10px } .rc-line a { color: var(--orange) }
.rc-foot { text-align: center; margin-top: 10px; border-top: 1.5px dashed #15161A; padding-top: 8px; font-size: 11px; letter-spacing: .12em }

/* net */
.net { background: #15161A; color: #F3EEE3; max-width: none; padding-left: 0; padding-right: 0 }
.net > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px }
.net .eyebrow { color: var(--yellow) } .net .h2 em { color: var(--yellow) }
.netGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.netIn label { display: block; font: 500 20px/1.3 var(--serif); margin: 18px 0 8px } .netIn label b { color: var(--yellow); font-family: var(--mono); font-size: 18px }
.netIn input[type=range] { width: 100%; accent-color: var(--yellow) }
.netOut .big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 8px 0 } .netOut .big b { font: 700 72px/1 var(--mono); color: var(--yellow); letter-spacing: -.03em } .netOut .big span { font: 600 14px/1.3 var(--mono); max-width: 120px }
.net .small { color: #B8BCC9 } .net .faint { color: #80848F }

/* roster */
.rosterHead { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 20px }
.rosterTools { display: flex; flex-direction: column; gap: 10px; align-items: end }
.search { font: 500 13px/1 var(--mono); padding: 10px 12px; border: 2px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); width: 360px; max-width: 100% }
.search.big { width: 100%; font-size: 15px }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip { font: 400 8px/1 "Press Start 2P", var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer }
.chip.on { background: var(--yellow); color: #15161A; border-color: var(--yellow) }
.tableWrap { overflow-x: auto; border: 2px solid var(--line); background: var(--panel) }
.tbl { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--mono) }
.tbl th { text-align: left; font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 12px 10px; border-bottom: 2px solid var(--ink); background: var(--paper) }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
.tbl .num, .tbl td.num { text-align: right }
.tbl tr.hl td { background: var(--yellow); color: #15161A }
.tbl tr.earn td:first-child { border-left: 5px solid var(--orange) } .tbl tr.left td { color: var(--mute) } .tbl tr.left td:first-child { border-left: 5px dashed var(--line) } .tbl tr.surface td:first-child { border-left: 5px solid var(--mint) } .tbl tr.under td:first-child { border-left: 5px solid var(--w2) }
.addr { display: inline-flex; gap: 6px; align-items: center } .addr a { text-decoration: none; border-bottom: 1px dotted var(--mute) } .addr button { border: 0; background: none; cursor: pointer; font: 700 10px var(--mono); color: var(--orange); padding: 0 }
.depthCol { min-width: 160px }
.dbar { display: inline-flex; align-items: center; gap: 8px; min-width: 150px } .dbar i { display: block; height: 10px; width: 90px; background: var(--paper2); position: relative; border: 1px solid var(--line) } .dbar i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--c, var(--w2)) }
.dbar b { min-width: 48px; text-align: right }
.pill { font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; border: 1.5px solid var(--ink) }
.pill.earn { background: var(--orange); color: var(--paper); border-color: var(--orange) } .pill.surface { background: var(--mint) } .pill.left { border-style: dashed; color: var(--mute) } .pill.dev { background: var(--ink); color: #15161A }
.more { display: flex; gap: 14px; align-items: center; margin-top: 16px } .count { font: 500 12px/1 var(--mono); color: var(--mute) }

/* blasters */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px }
.card { background: var(--panel); border: 2px solid var(--ink); box-shadow: 5px 5px 0 #000; padding: 18px; position: relative }
.card.today { background: var(--yellow); color: #15161A } .card.today .pct { color: #E23D28 } .card.today .who a { color: #15161A }
.card .day { font: 700 11px/1 var(--mono); letter-spacing: .12em; color: var(--mute) } .card.today .day { color: var(--ink) }
.card .pct { font: 300 64px/1 var(--serif); font-style: italic; margin: 10px 0 6px; letter-spacing: -.03em; color: var(--orange) }
.card .who { font: 500 12px/1.4 var(--mono) } .card .paid { font: 600 12px/1.4 var(--mono); margin-top: 6px }
.card .crown { position: absolute; right: 14px; top: 12px; font: 700 10px/1 var(--mono); letter-spacing: .12em; background: var(--ink); color: var(--paper); padding: 5px 7px }

/* rules */
.ruleGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px }
.rule { border: 2px solid var(--line); padding: 18px; background: var(--panel) } .rule b { font: 700 12px/1 var(--mono); color: var(--orange) } .rule h3 { font: 500 22px/1.15 var(--serif); margin: 10px 0 8px } .rule p { margin: 0; color: var(--ink2); font-size: 14px } .rule .mono { font-size: 11px; word-break: break-all }

/* ledger */
.totals { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; font: 500 13px/1 var(--mono); color: var(--ink2) } .totals b { color: var(--ink) }
.tbl.small td { padding: 7px 10px; font-size: 12px } .tbl a { color: var(--orange) }

/* footer */
.foot { border-top: 2px solid var(--line); background: #05142A } .foot .wrap { padding: 28px 24px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font: 500 13px/1.5 var(--sans) } .foot .faint { flex-basis: 100%; font-size: 12px }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(21,22,26,.6); display: grid; place-items: center; padding: 20px }
.modal .box { background: var(--paper2); border: 2px solid var(--ink); box-shadow: 6px 6px 0 #000; padding: 24px; width: 520px; max-width: 100%; display: grid; gap: 12px; position: relative }
.modal .x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font: 400 26px/1 var(--sans); cursor: pointer }

@media (max-width: 1100px) { .nav { display: none } .feed { display: none } .census { right: 24px } }
@media (max-width: 860px) {
  .hstats .stat:not(.pot):not(.next) { display: none } .hstats .stat { white-space: nowrap } .hstats { gap: 8px } .top { gap: 10px; padding: 8px 12px } #findTop { display: none }
  .water { height: auto; min-height: 0 } #sea { position: relative; height: 70vh; min-height: 520px; order: 2 } .water { display: flex; flex-direction: column }
  .hero { position: static; padding: 26px 16px 18px; order: 1; max-width: none; background: linear-gradient(#F6E7C9, #F3C98F) } .lede { font-size: 16px }
  .depthScale { top: auto; height: 70vh; min-height: 520px; bottom: 0; width: 86px; right: 10px } .depthScale .tick { font-size: 9px }
  .legend { position: static; order: 3; display: none; margin: 12px 16px 0; box-shadow: none } .census { position: static; order: 4; margin: 12px 16px 20px; box-shadow: none; flex-wrap: wrap } .census .c { min-width: 50%; border-bottom: 2px solid var(--ink) }
  .wrap { padding: 64px 16px } .payday, .netGrid { grid-template-columns: 1fr; gap: 28px } .net > * { padding-left: 16px; padding-right: 16px }
  .netOut .big b { font-size: 56px } .search { width: 100% } .rosterTools { align-items: start; width: 100% }
  .potBig b { font-size: 48px }
}

/* the hero sits on the sky, so its buttons are ink on paper */
.hero .btn-line { background: #F3EEE3; color: #15161A; border-color: #15161A; box-shadow: 3px 3px 0 #15161A }
.hero .btn-ink { border-color: #15161A; box-shadow: 3px 3px 0 #15161A }
.potBig b { color: var(--yellow) }
.tbl th { background: #05142A }
.dbar i { background: #05142A; border-color: var(--line) }
.pill { border-color: var(--mute) }
.pill.surface { color: #15161A }
.rule b { font-family: "Press Start 2P", var(--mono); font-size: 9px }
.totals, .count { color: var(--ink2) }
.hstats .stat .v { color: var(--ink) }

/* --- page sprites --- */
.ric { display: block; width: 40px; height: 40px; background: center/contain no-repeat; image-rendering: pixelated; margin-bottom: 6px }
.reef { height: 54px; background: var(--floor) left bottom/160px 80px repeat-x, #05142A; position: relative; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); overflow: hidden }
.reef::before, .reef::after { content: ''; position: absolute; bottom: 6px; height: 45px; width: 100%; background: var(--kelp) 40px 0/35px 45px repeat-x; image-rendering: pixelated; opacity: .95 }
.reef::after { background: var(--coral) 120px 10px/35px 35px repeat-x; background-size: 35px 35px; background-repeat: space; opacity: .9 }
.reef { image-rendering: pixelated }
.miniSea { width: 100%; height: 300px; display: block; image-rendering: pixelated; border: 2px solid var(--line); margin-bottom: 14px; background: #071B36 }
.potCoins { position: relative; height: 34px; margin-top: 10px } .potCoins i { position: absolute; width: 22px; height: 22px; background: center/contain no-repeat; image-rendering: pixelated; animation: bob 2.4s ease-in-out infinite } .potCoins i:nth-child(odd) { animation-delay: -1.2s }
@keyframes bob { 50% { transform: translateY(-4px) } }
.card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px } .portrait { width: 96px; height: 96px; image-rendering: pixelated; border: 2px solid var(--line); background: #071B36 } .card .pct { font-size: 44px; margin: 6px 0 4px }
.footDiver { width: 48px; height: 48px; background: center/contain no-repeat; image-rendering: pixelated; animation: bob 2s ease-in-out infinite }
.pill.earn::before, .pill.left::before, .pill.surface::before, .pill.under::before { content: ''; display: inline-block; width: 14px; height: 14px; margin: -3px 5px -3px -2px; vertical-align: middle; image-rendering: pixelated; background: center/contain no-repeat }
.pill.earn::before { background-image: url(assets/sprites/coin_1.png) } .pill.left::before { background-image: url(assets/sprites/mine.png) } .pill.surface::before { background: #2BD48A; border-radius: 50% } .pill.under::before { background: #49C9F0; border-radius: 50% }
.rule { position: relative } .rule .ric { position: absolute; right: 14px; top: 14px }
.h2 { text-shadow: 0 2px 0 #000 }
section.wrap { position: relative }
.payday::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(46,143,200,.18), transparent 50%); pointer-events: none }

/* ---------- v4: boot, pixel wordmark, key art, trophy wall, signposts, chart, kraken ---------- */
#boot { position: fixed; inset: 0; z-index: 100; background: #05142A; display: grid; place-items: center; transition: transform .9s cubic-bezier(.7,0,.3,1), opacity .9s }
#boot.off { transform: translateY(100%); opacity: .6 }
#boot::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.03) 6px 7px) }
.bootBox { text-align: center; color: #F3EEE3 } .bootBox img { width: 96px; height: 96px; image-rendering: pixelated; animation: bob 1.6s ease-in-out infinite }
.bootTxt { font: 400 16px/1 "Press Start 2P", monospace; letter-spacing: .1em; margin: 18px 0 14px; color: #F5D90A }
.bootBar { width: 220px; height: 10px; border: 2px solid #F3EEE3; margin: 0 auto; padding: 1px } .bootBar i { display: block; height: 100%; width: 0; background: #F5D90A; animation: fill 2.2s linear forwards }
@keyframes fill { to { width: 100% } }
.bootSub { font: 400 7px/1 "Press Start 2P", monospace; color: #7F8DA6; margin-top: 12px; letter-spacing: .08em }
.logo .mark { width: 34px; height: 34px; border-radius: 0; background: none; image-rendering: pixelated }
.wordmark { font: 400 16px/1 "Press Start 2P", monospace; letter-spacing: 0; color: #F5D90A; text-shadow: 1px 1px 0 #B8420E, 2px 2px 0 #B8420E, 3px 3px 0 #15161A }
.foot .wordmark { font-size: 14px }
.payday { position: relative; overflow: hidden } .payday .keyart { position: absolute; inset: 0; background: url(assets/art/keyart.jpg) center/cover no-repeat; image-rendering: pixelated; opacity: .32; mask-image: linear-gradient(90deg, #000 0, #000 45%, transparent 75%); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 45%, transparent 75%); pointer-events: none }
.payday .keyart::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--paper) 0, transparent 30%, transparent 70%, var(--paper) 100%) }
.payday > * { position: relative }
.payday::before { display: none }
.chartCard { margin-top: 18px; background: #15161A; border-radius: 6px; padding: 14px 16px 10px; box-shadow: 6px 6px 0 var(--orange) } .chartCard .k { font: 400 8px/1 "Press Start 2P", monospace; color: #B8BCC9; letter-spacing: .08em; margin-bottom: 8px } #payChart { width: 100%; height: 120px; display: block; image-rendering: pixelated }
.card { border: 4px solid #F5D90A; box-shadow: 0 0 0 2px #15161A, 6px 6px 0 #15161A; background: #0E2340; position: relative } .card::before { content: ''; position: absolute; inset: 4px; border: 1px dashed rgba(245,217,10,.5); pointer-events: none }
.card .crown { background: #F5D90A; color: #15161A } .card.today { background: #F5D90A; border-color: #FF5A1F } .card.today::before { border-color: rgba(21,22,26,.4) }
.rule { background: #6B3F1D; border: 3px solid #2A1708; box-shadow: inset 0 0 0 2px #8C5A2B, 5px 5px 0 #15161A; color: #F3EEE3; padding: 18px 18px 16px } .rule::after { content: ''; position: absolute; left: 10px; top: 10px; width: 5px; height: 5px; background: #15161A; box-shadow: calc(100% + 16px) 0 0 #15161A, 0 calc(100% + 16px) 0 #15161A, calc(100% + 16px) calc(100% + 16px) 0 #15161A; opacity: .9 }
.rule h3 { color: #F5D90A } .rule p { color: #F3EEE3 } .rule b { color: #F5D90A }
.rule .ric { position: absolute; right: 14px; top: 14px; filter: drop-shadow(1px 1px 0 #15161A) }
th.s { cursor: pointer; user-select: none } th.s:hover { color: var(--yellow) }
.foot { position: relative; overflow: hidden; padding-bottom: 40px } .footKraken { position: absolute; right: 24px; bottom: -40px; width: 180px; image-rendering: pixelated; opacity: .25; pointer-events: none; animation: bob 4s ease-in-out infinite }
.hero .h1 { text-shadow: 0 2px 0 rgba(255,255,255,.35) }
.census b { text-shadow: 2px 2px 0 #000 }
.depthScale .tick span { font-family: "Press Start 2P", monospace; font-size: 7px }

/* night: the sky goes dark, the hero text goes light */
html.night .hero .h1 { color: #F3EEE3; text-shadow: 0 2px 0 #000 } html.night .hero .h1 em { color: #FFB070 } html.night .lede { color: #E6E1D6 } html.night .hero .kicker { color: #BFC7D6 } html.night .depthScale .t0 { color: #F3EEE3 }
html.night .hero .btn-line { background: #F3EEE3 } html.night .legend { background: #05142A; color: #F3EEE3; border-color: #F3EEE3 !important; box-shadow: 4px 4px 0 #000 !important }

/* ---------- v5: the whole page is the dive ---------- */
body { background: #071B36 }
#sea.world { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; image-rendering: pixelated }
.top { z-index: 40 }
main, .strip, .foot { position: relative; z-index: 1 }
.water { height: 100vh; min-height: 640px; background: transparent; border-bottom: 0; overflow: visible }
.strip { border-top: 2px solid var(--line) }
/* the payday cutscene dives to the chest, which sits under the last panel: fade the panels while it plays */
section.wrap, .strip { transition: opacity .7s } html.payday section.wrap, html.payday .strip { opacity: .06 }
section.wrap { background: rgba(5,20,42,.9); border: 2px solid var(--line); box-shadow: 8px 8px 0 #000; max-width: 1180px; margin: 56px auto; padding: 72px 48px; border-radius: 4px }
.net { max-width: 1180px; background: rgba(21,22,26,.94) } .net > * { padding-left: 0; padding-right: 0; max-width: none }
.reef { display: none }
.foot { background: #05142A }
.minimap { position: fixed; right: 14px; top: 84px; width: 54px; height: calc(100vh - 110px); z-index: 20; border: 2px solid var(--line); background: #05142A; cursor: pointer; image-rendering: pixelated; box-shadow: 3px 3px 0 #000 }
.tip { position: fixed; z-index: 45 } .tipChart { display: block; margin-top: 8px; width: 220px; height: 56px; border: 1px solid var(--line) }
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 46; background: var(--yellow); color: #15161A; font: 400 9px/1.6 "Press Start 2P", monospace; padding: 10px 16px; border: 2px solid #15161A; box-shadow: 4px 4px 0 #15161A; max-width: 90vw; text-align: center; animation: drop .4s ease-out }
.scrollHint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; text-align: center; font: 400 8px/1 "Press Start 2P", monospace; color: #F3EEE3; letter-spacing: .1em; text-shadow: 1px 1px 0 #000 }
.scrollHint i { display: block; width: 10px; height: 10px; border-right: 3px solid #F5D90A; border-bottom: 3px solid #F5D90A; transform: rotate(45deg); margin: 10px auto 0; animation: nudge 1.2s ease-in-out infinite }
@keyframes nudge { 50% { transform: rotate(45deg) translate(4px, 4px) } }
.census { right: 90px } .legend { right: 90px }
.modal .box.wide { width: 860px } .flexCard { width: 100%; aspect-ratio: 16/9; display: block; border: 2px solid var(--line); image-rendering: pixelated; background: #071B36 }
@media (max-width: 860px) {
  .water { height: 100vh } #sea.world { position: fixed } .hero { background: none } .census { position: absolute; right: 70px; bottom: 60px; margin: 0; display: grid; grid-template-columns: 1fr 1fr } .census .c { min-width: 0; padding: 8px 10px } .legend { display: none }
  .minimap { width: 36px; right: 8px; top: 70px; height: calc(100vh - 90px) } section.wrap { margin: 24px 10px; padding: 48px 16px } .scrollHint { bottom: 10px }
  html.night .hero .h1, .hero .h1 { color: #F3EEE3; text-shadow: 0 2px 0 #000 } .lede { color: #E6E1D6; text-shadow: 0 1px 0 #000 } .hero .kicker { color: #BFC7D6 }
}

@media (max-width: 860px) { .top { overflow: hidden } .top .xbtn { display: none } .wordmark { font-size: 13px } .hstats { gap: 6px } .stat .v { font-size: 12px } .stat .k { font-size: 7px } }

/* ---------- v6 ---------- */
section.wrap { max-width: 980px; padding: 64px 40px } .net { max-width: 980px }
.sw.you { background: #FFFFFF }
.spect { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 46; background: #15161A; color: #F5D90A; border: 2px solid #F5D90A; box-shadow: 4px 4px 0 #000; padding: 10px 14px; font: 400 8px/1.6 "Press Start 2P", monospace; display: flex; gap: 14px; align-items: center }
.spect button { font: inherit; background: #F5D90A; color: #15161A; border: 0; padding: 6px 8px; cursor: pointer }
#boss { position: fixed; inset: 0; z-index: 60; background: rgba(5,20,42,.72); display: grid; place-items: center; animation: drop .4s ease-out }
.bossBox { background: #15161A; border: 4px solid #F5D90A; box-shadow: 0 0 0 3px #15161A, 10px 10px 0 #000; padding: 34px 40px; width: 640px; max-width: 92vw; color: #F3EEE3; text-align: center }
.bossK { font: 400 14px/1 "Press Start 2P", monospace; color: #FF5A1F; letter-spacing: .2em; margin-bottom: 18px }
.bossN { font: 400 54px/1 "Press Start 2P", monospace; color: #F5D90A; text-shadow: 3px 3px 0 #B8420E; margin-bottom: 14px }
.bossL { font: 500 13px/1.5 var(--mono); color: #BFC7D6; margin-bottom: 22px }
.bossRows div { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 10px; font: 500 12px/1.2 var(--mono); padding: 8px 0; border-top: 1px solid #33363F; text-align: left } .bossRows div span:last-child { color: #2BD48A; text-align: right } .bossRows div:first-child { color: #F5D90A }
.bossBox .btn { margin-top: 22px }
@media (max-width: 860px) { section.wrap { padding: 44px 16px } .bossBox { padding: 24px 18px } .bossN { font-size: 34px } .bossRows div { font-size: 10px } }

.h1 { font-size: clamp(38px, 4.8vw, 68px) } .lede { font-size: 17px; max-width: 50ch }

.tipChart { height: 70px }

/* in plain words */
.plain { margin-top: 26px; border: 2px solid var(--line); background: rgba(5,20,42,.6); padding: 16px 18px; font-size: 15px; color: var(--ink2); display: grid; gap: 8px; max-width: 62ch }
.plain > b { font: 400 9px/1 "Press Start 2P", monospace; color: var(--yellow); letter-spacing: .08em; margin-bottom: 4px }
.plain i { font-style: normal; color: var(--ink); font-weight: 700 }

/* header with a CA: everything on one line */
.top { flex-wrap: nowrap; white-space: nowrap } .nav a { white-space: nowrap } .hstats .stat { white-space: nowrap } .stat .v, .stat .k, .stat .d { white-space: nowrap } #findTop { white-space: nowrap }
@media (max-width: 1280px) { .nav { display: none } }
@media (max-width: 1100px) { .hstats .stat:not(.pot):not(.next) { display: none } }

.potEst { font: 500 11px/1.4 var(--sans); color: #B8BCC9; margin: -6px 0 10px }
/* header with the CA chip on a 1440 screen */
@media (max-width: 1520px) { .hstats .stat:nth-of-type(2) { display: none } .hstats { gap: 10px } .nav { gap: 12px } }
@media (max-width: 1380px) { .nav { display: none } }