:root {
  --bg: #1a1c2c;
  --panel: #29366f;
  --panel2: #333c57;
  --ink: #f4f4f4;
  --dim: #94b0c2;
  --gold: #ffcd75;
  --green: #38b764;
  --red: #b13e53;
  --u: 2px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; touch-action: none; }
body { display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', monospace; color: var(--ink); -webkit-user-select: none; user-select: none; }
#wrap { position: relative; width: 480px; height: 270px; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--bg); cursor: crosshair; }
.hidden { display: none !important; }

/* scoreboard */
#hud { position: absolute; top: calc(var(--u) * 3); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.sb { display: flex; align-items: stretch; background: #111; border: calc(var(--u)) solid #000; box-shadow: 0 calc(var(--u)*2) 0 rgba(0,0,0,.35); font-size: calc(var(--u) * 7); }
.sb-team { display: flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 3) calc(var(--u) * 5); }
.sb-team .pts { background: #000; color: var(--gold); padding: calc(var(--u)*2) calc(var(--u)*3); min-width: calc(var(--u) * 20); text-align: center; }
.sb-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(var(--u) * 6); gap: calc(var(--u) * 2); background: #222; font-size: calc(var(--u) * 6); }
#hudDown { color: var(--gold); font-size: calc(var(--u) * 5); }
.sb-team.poss .abbr::after { content: ' \25C0'; color: var(--gold); }
#hudO.poss .abbr::before { content: '\25B6 '; color: var(--gold); }
#hudO.poss .abbr::after { content: ''; }

#help { position: absolute; bottom: calc(var(--u) * 3); left: 0; right: 0; text-align: center; font-size: calc(var(--u) * 5); color: #fff; text-shadow: calc(var(--u)) calc(var(--u)) 0 #000; pointer-events: none; line-height: 1.6; }

/* in-game panel */
#panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 12, 24, .55); }
.card { background: var(--bg); border: calc(var(--u)*2) solid var(--ink); box-shadow: 0 0 0 calc(var(--u)*2) #000, calc(var(--u)*4) calc(var(--u)*4) 0 rgba(0,0,0,.5); padding: calc(var(--u) * 10); min-width: calc(var(--u) * 220); max-width: calc(var(--u) * 360); text-align: center; }
.card h2 { font-size: calc(var(--u) * 10); color: var(--gold); margin-bottom: calc(var(--u) * 8); line-height: 1.4; }
.card p { font-size: calc(var(--u) * 6); line-height: 1.8; color: var(--ink); margin-bottom: calc(var(--u) * 6); }
.card .row { display: flex; gap: calc(var(--u) * 6); justify-content: center; flex-wrap: wrap; }
.big-score { font-size: calc(var(--u) * 16) !important; color: var(--ink) !important; }

button { font-family: inherit; font-size: calc(var(--u) * 6); color: var(--ink); background: var(--panel); border: calc(var(--u)) solid var(--ink); padding: calc(var(--u) * 5) calc(var(--u) * 8); cursor: pointer; box-shadow: 0 calc(var(--u)*2) 0 #000; line-height: 1.4; }
button:hover:not(:disabled) { background: #3b5dc9; }
button:active:not(:disabled) { transform: translateY(calc(var(--u))); box-shadow: 0 calc(var(--u)) 0 #000; }
button.go { background: var(--green); color: #102010; }
button.go:hover:not(:disabled) { background: #a7f070; }
button.warn { background: var(--red); }
button:disabled { opacity: .4; cursor: default; }
button.sm { padding: calc(var(--u)*2) calc(var(--u)*4); font-size: calc(var(--u) * 5); }

/* full screens */
#screen { position: absolute; inset: 0; background: var(--bg); overflow-y: auto; overflow-x: hidden; padding: calc(var(--u) * 10) calc(var(--u) * 14); touch-action: pan-y; }
#screen:empty { display: none; }
.title { text-align: center; padding-top: calc(var(--u) * 30); }
.title h1 { font-size: calc(var(--u) * 28); color: var(--gold); text-shadow: calc(var(--u)*3) calc(var(--u)*3) 0 var(--red), calc(var(--u)*6) calc(var(--u)*6) 0 #000; letter-spacing: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 10); }
.title .sub { font-size: calc(var(--u) * 6); color: var(--dim); margin-bottom: calc(var(--u) * 26); line-height: 1.8; }
.title .row { display: flex; gap: calc(var(--u) * 8); justify-content: center; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 8); gap: calc(var(--u) * 6); }
.top h2 { font-size: calc(var(--u) * 9); color: var(--gold); white-space: nowrap; }
.chip { white-space: nowrap; font-size: calc(var(--u) * 6); background: var(--panel2); padding: calc(var(--u)*3) calc(var(--u)*5); border: calc(var(--u)) solid #000; }
.chip b { color: var(--gold); font-weight: normal; }
.teams { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(var(--u) * 4); }
.tm { font-size: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 2); text-align: center; border: calc(var(--u)) solid #000; cursor: pointer; line-height: 1.6; box-shadow: 0 calc(var(--u)*2) 0 #000; }
.tm:hover { outline: calc(var(--u)) solid var(--gold); }
.tm .ab { font-size: calc(var(--u) * 8); display: block; }
.conf-h { font-size: calc(var(--u) * 6); color: var(--dim); margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); }

.hub { display: grid; grid-template-columns: 1.1fr 1fr; gap: calc(var(--u) * 8); }
.box { background: var(--panel2); border: calc(var(--u)) solid #000; padding: calc(var(--u) * 7); }
.box h3 { font-size: calc(var(--u) * 6); color: var(--dim); margin-bottom: calc(var(--u) * 6); }
.next { text-align: center; }
.next .vs { font-size: calc(var(--u) * 9); margin: calc(var(--u) * 6) 0; line-height: 1.6; }
.next .stars { color: var(--gold); font-size: calc(var(--u) * 6); }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 8); }
.bar { height: calc(var(--u) * 6); background: #000; margin: calc(var(--u) * 3) 0 calc(var(--u) * 6); }
.bar i { display: block; height: 100%; background: var(--green); }
.lbl { font-size: calc(var(--u) * 5); display: flex; justify-content: space-between; }

table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 5); }
th { color: var(--dim); font-weight: normal; text-align: left; padding: calc(var(--u)*3); border-bottom: calc(var(--u)) solid #000; }
td { padding: calc(var(--u)*3); border-bottom: calc(var(--u)*.5) solid #333c57; vertical-align: middle; }
tr.me td { color: var(--gold); }
tr.cut td { border-bottom: calc(var(--u)) dashed var(--gold); }
td.stars { color: var(--gold); white-space: nowrap; }
.attr { display: inline-block; min-width: calc(var(--u) * 26); padding: calc(var(--u)*2); margin-right: calc(var(--u)*2); background: #000; text-align: center; cursor: pointer; border: calc(var(--u)*.5) solid transparent; }
.attr:hover { border-color: var(--gold); }
.attr.max { cursor: default; color: var(--gold); }
.attr small { color: var(--dim); font-size: calc(var(--u) * 4); }
.note { font-size: calc(var(--u) * 5); color: var(--dim); line-height: 1.8; margin: calc(var(--u) * 6) 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.dot { display: inline-block; width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin-right: calc(var(--u) * 3); vertical-align: middle; border: calc(var(--u)*.5) solid #000; }
.press q { display: block; font-size: calc(var(--u) * 7); line-height: 1.8; margin: calc(var(--u) * 10) 0; }
.press .row { flex-direction: column; align-items: stretch; }
.press button { text-align: left; line-height: 1.8; }

/* ---------------- roster (Retro Bowl cards, dark) */
#screen:has(.rs) { background: #0b0c16; }
.rs-head { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 8);
  background: linear-gradient(90deg, var(--tp), #0b0c16 85%); border: calc(var(--u)) solid #000; border-bottom: calc(var(--u) * 2) solid var(--ts);
  box-shadow: 0 calc(var(--u)*2) 0 #000; margin-bottom: calc(var(--u) * 6); }
.rs-title { display: flex; flex-direction: column; gap: calc(var(--u) * 3); flex: 1; min-width: 0; }
.rs-school { font-size: calc(var(--u) * 11); color: #fff; text-shadow: calc(var(--u)) calc(var(--u)) 0 #000, calc(var(--u)*2) calc(var(--u)*2) 0 rgba(0,0,0,.5); white-space: nowrap; }
.rs-mascot { font-size: calc(var(--u) * 5); color: var(--gold); letter-spacing: calc(var(--u) * .5); }
.rs-sum { display: flex; gap: calc(var(--u) * 6); align-items: center; font-size: calc(var(--u) * 5); color: var(--dim); white-space: nowrap; }
.rs-sum .stars { color: var(--gold); font-weight: normal; font-size: calc(var(--u) * 7); vertical-align: middle; }
.rs-tip { font-size: calc(var(--u) * 4.5); color: #6f7896; line-height: 1.8; margin-bottom: calc(var(--u) * 6); }
.rs-sec { font-size: calc(var(--u) * 6); color: var(--gold); margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); padding-bottom: calc(var(--u) * 3); border-bottom: calc(var(--u)) solid #23263d; }
.rs-sec small { font-size: calc(var(--u) * 4); color: #6f7896; margin-left: calc(var(--u) * 4); }
.rs-list { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
.pc { display: grid; grid-template-columns: calc(var(--u)*20) calc(var(--u)*36) minmax(0, 1fr) auto calc(var(--u)*30); align-items: center; gap: calc(var(--u) * 5);
  background: linear-gradient(180deg, #181b2e, #12142a); border: calc(var(--u)) solid #000; box-shadow: inset 0 calc(var(--u)) 0 #262a45, 0 calc(var(--u)) 0 #000;
  padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 2) 0; }
.pc:hover { box-shadow: inset 0 calc(var(--u)) 0 #262a45, 0 0 0 calc(var(--u)) var(--gold); }
.pc-pos { align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 6); background: var(--tp); color: #fff;
  text-shadow: calc(var(--u)*.5) calc(var(--u)*.5) 0 #000; border-right: calc(var(--u)) solid var(--ts); margin: calc(var(--u) * -2) 0; }
.pc-img { height: calc(var(--u) * 30); display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, #1f4d2a 0%, #14301d 45%, transparent 70%); }
.pc-img img { width: calc(var(--u) * 47 * 1.5); height: calc(var(--u) * 46 * 1.5); max-width: none; image-rendering: pixelated; margin-top: calc(var(--u) * -16); }
.pc-id { min-width: 0; }
.pc-name { font-size: calc(var(--u) * 6); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: calc(var(--u) * 3); }
.pc-num { color: var(--ts); margin-right: calc(var(--u) * 3); font-size: calc(var(--u) * 5); }
.pc-sub { font-size: calc(var(--u) * 4.5); color: #8a93b4; }
.pc-sub .stars { color: var(--gold); margin-left: calc(var(--u) * 3); font-size: calc(var(--u) * 7); vertical-align: middle; letter-spacing: calc(var(--u) * .5); }
.pc-attrs { display: flex; gap: calc(var(--u) * 4); }
.at { width: calc(var(--u) * 46); padding: calc(var(--u) * 2) calc(var(--u) * 3); background: #0a0b14; border: calc(var(--u) * .5) solid #23263d; cursor: pointer; }
.at:hover { border-color: var(--gold); background: #141626; }
.at.max { cursor: default; } .at.max:hover { border-color: #23263d; background: #0a0b14; }
.at.poor { opacity: .6; }
.at-top { display: flex; align-items: baseline; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 4.5); color: #8a93b4; margin-bottom: calc(var(--u) * 2); }
.at-top b { color: #fff; font-weight: normal; font-size: calc(var(--u) * 5.5); }
.at-top small { margin-left: auto; color: var(--gold); font-size: calc(var(--u) * 3.5); }
.at.max .at-top small { color: var(--green); }
.pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: calc(var(--u) * .5); height: calc(var(--u) * 3); }
.pips i { background: #23263d; }
.pips i.lo { background: #e05a4f; } .pips i.mid { background: #ffcd75; } .pips i.hi { background: #38b764; }
.pc-act { display: flex; justify-content: flex-end; }
/* drip */
.pc.drip { background: linear-gradient(100deg, #1d1433, #12142a 55%, #241c08); }
.pc.drip .pc-img { background: radial-gradient(ellipse at 50% 100%, #5a3fa8 0%, #2a1d55 45%, transparent 72%); }
.pc.drip .pc-name { color: #ffe9a8; }
.badge { display: inline-block; margin-left: calc(var(--u) * 4); padding: calc(var(--u)) calc(var(--u) * 2); font-size: calc(var(--u) * 3.5); vertical-align: middle; color: #1a0f00;
  background: linear-gradient(90deg, #ffd23f, #ff5cf0, #5cf6ff); box-shadow: 0 calc(var(--u)*.5) 0 #000; animation: drip 1.6s steps(4) infinite; }
@keyframes drip { 50% { filter: brightness(1.35); } }
.potl { font-size: calc(var(--u) * 3.5); color: #6f7896; margin-left: calc(var(--u) * 5); }
.stars.pot, td.stars.pot { color: #9aa3c7 !important; opacity: .75; }
.pc-sub .stars.pot { margin-left: calc(var(--u) * 2); }
.capd { margin-left: calc(var(--u) * 4); font-size: calc(var(--u) * 3.5); color: #0b0c16; background: #9aa3c7; padding: calc(var(--u) * .5) calc(var(--u) * 2); vertical-align: middle; }
.at.max .at-top small { color: #9aa3c7; }
/* injuries */
.badge.out { background: #b3202c; color: #fff; animation: none; }
.inj { text-align: left; }
.inj-head { background: repeating-linear-gradient(135deg, #b3202c 0 calc(var(--u)*6), #8a1420 calc(var(--u)*6) calc(var(--u)*12)); color: #fff; font-size: calc(var(--u) * 11);
  text-align: center; padding: calc(var(--u) * 5); margin: calc(var(--u) * -10) calc(var(--u) * -10) calc(var(--u) * 8); text-shadow: calc(var(--u)) calc(var(--u)) 0 #000; letter-spacing: calc(var(--u)); }
.inj-body { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 6); }
.inj-img { width: calc(var(--u) * 47 * 1.2); height: calc(var(--u) * 46 * 1.2); image-rendering: pixelated; background: radial-gradient(ellipse at 50% 90%, #4a0d14, transparent 70%); }
.inj-name { font-size: calc(var(--u) * 8); color: #fff; margin-bottom: calc(var(--u) * 3); }
.inj-team { font-size: calc(var(--u) * 5); color: var(--dim); }
.card p.inj-what { font-size: calc(var(--u) * 6.5); color: #ffb3b3; line-height: 1.7; }
.card p.inj-status { font-size: calc(var(--u) * 8); text-align: center; margin-bottom: calc(var(--u) * 3); }
.inj-status.bad { color: #ff4d4d; } .inj-status.ok { color: var(--green); }
.card p.inj-note { font-size: calc(var(--u) * 5); color: var(--dim); text-align: center; }
.pips i.x { background: #0a0b14; box-shadow: inset 0 0 0 calc(var(--u) * .5) #3a2030; position: relative; }
.pips i.x::before, .pips i.x::after { content: ''; position: absolute; left: 50%; top: -15%; width: calc(var(--u) * .5); height: 130%; background: #b3202c; }
.pips i.x::before { transform: translateX(-50%) rotate(45deg); } .pips i.x::after { transform: translateX(-50%) rotate(-45deg); }
.pips { height: calc(var(--u) * 3.5); }
/* hustle */
.hs { background: linear-gradient(180deg, #181b2e, #12142a); border: calc(var(--u)) solid #000; box-shadow: inset 0 calc(var(--u)) 0 #262a45; padding: calc(var(--u) * 5) calc(var(--u) * 6); margin-bottom: calc(var(--u) * 4);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: calc(var(--u) * 6); align-items: center; border-left: calc(var(--u) * 3) solid var(--gold); }
.hs.respect { border-left-color: #b13e53; }
.hs-name { font-size: calc(var(--u) * 6); color: #fff; }
.hs .note { margin: calc(var(--u) * 2) 0 0; grid-column: 1; }
.hs button { grid-row: 1 / 3; grid-column: 2; }
.risk { font-size: calc(var(--u) * 3.5); background: #b3202c; color: #fff; padding: calc(var(--u) * .5) calc(var(--u) * 2); vertical-align: middle; }
.hs-res { background: #0a0b14; border: calc(var(--u)) solid var(--gold); padding: calc(var(--u) * 5) calc(var(--u) * 7); margin-bottom: calc(var(--u) * 6); font-size: calc(var(--u) * 6); line-height: 1.8; }
.hs-res b { font-weight: normal; } .hs-res .up { color: var(--green); } .hs-res .down { color: #ff6b6b; }
.hs.legal { border-left-color: var(--green); } .hs.illegal { border-left-color: #b3202c; }
.hs-pay { color: var(--gold); }
.hs-res.busted { border-color: #ff4d4d; color: #ffb3b3; }
.mg-help { margin: 0 0 calc(var(--u) * 4); }
.mg-wrap { display: flex; justify-content: center; }
#mg { width: 100%; max-width: calc(var(--u) * 360); aspect-ratio: 16 / 9; image-rendering: pixelated; border: calc(var(--u)) solid #000; box-shadow: 0 0 0 calc(var(--u)) #333c57; cursor: crosshair; touch-action: none; background: #000; }
/* boosters / compliance */
.hs-btns { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; gap: calc(var(--u) * 3); }
td.offers { white-space: nowrap; }
td.offers button { margin: calc(var(--u)) 0 calc(var(--u)) calc(var(--u) * 2); line-height: 1.3; }
td.offers small { font-size: calc(var(--u) * 3.5); opacity: .85; }
.ev { padding-top: calc(var(--u) * 14); }
.ev.bad h1 { color: #ff4d4d; } .ev.good h1 { color: var(--green); } .ev.warn h1 { color: #ef7d57; }
.ev .sub { max-width: calc(var(--u) * 320); margin-left: auto; margin-right: auto; margin-bottom: calc(var(--u) * 8); }
.ev-lines { max-width: calc(var(--u) * 320); margin: 0 auto calc(var(--u) * 8); text-align: left; font-size: calc(var(--u) * 5.5); line-height: 1.9; color: #ffb3b3; }
.ev-risk { max-width: calc(var(--u) * 220); margin: 0 auto calc(var(--u) * 8); text-align: left; }
/* empire */
.emp-heat { margin-bottom: calc(var(--u) * 6); }
.emp-heat .note { margin: calc(var(--u) * 2) 0 0; }
.emp-row { display: flex; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 5); flex-wrap: wrap; }
td.street { color: #ef7d57; letter-spacing: calc(var(--u) * -.5); font-size: calc(var(--u) * 4); white-space: nowrap; } td.street span { color: #2a2d44; }
.emp-intro { max-width: calc(var(--u) * 340); margin: calc(var(--u) * 14) auto 0; }
.emp-story { font-size: calc(var(--u) * 6.5); line-height: 1.9; color: #e8e8f0; margin-bottom: calc(var(--u) * 12); border-left: calc(var(--u) * 3) solid #b3202c; padding-left: calc(var(--u) * 8); }
.emp-choices { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.emp-choices button { text-align: left; line-height: 1.6; } .emp-choices small { font-size: calc(var(--u) * 4.5); opacity: .85; }
.emp-missions { margin-bottom: calc(var(--u) * 6); }
#ms { width: 100%; max-width: calc(var(--u) * 380); aspect-ratio: 16 / 9; image-rendering: pixelated; border: calc(var(--u)) solid #000; box-shadow: 0 0 0 calc(var(--u)) #333c57; touch-action: none; background: #000; }
/* empire art */
#empBanner { width: 100%; image-rendering: pixelated; border: calc(var(--u)) solid #000; box-shadow: 0 calc(var(--u)*2) 0 #000; margin-bottom: calc(var(--u) * 6); display: block; }
.spots { display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 3); }
.spot { display: grid; grid-template-columns: calc(var(--u) * 60) 1fr auto; gap: calc(var(--u) * 5); align-items: center; background: #12142a; border: calc(var(--u)) solid #000; padding: calc(var(--u) * 2); }
.spot canvas { width: calc(var(--u) * 60); height: calc(var(--u) * 25); image-rendering: pixelated; border: calc(var(--u) * .5) solid #000; }
.spot-info { display: flex; flex-direction: column; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 4.5); }
.spot-info b { font-weight: normal; color: #fff; font-size: calc(var(--u) * 5.5); }
.heat-ic { color: #ef7d57; }
.spot.done { opacity: .55; }
.hs.mis { grid-template-columns: calc(var(--u) * 64) 1fr auto; }
.hs.mis .mis-art { grid-row: 1 / 3; width: calc(var(--u) * 64); height: calc(var(--u) * 36); image-rendering: pixelated; border: calc(var(--u) * .5) solid #000; }
.hs.mis .hs-name, .hs.mis .note { grid-column: 2; } .hs.mis button { grid-column: 3; }
.crew-img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); image-rendering: pixelated; object-fit: cover; object-position: 50% 30%; }
/* player stats */
.pc-link { cursor: pointer; border-bottom: calc(var(--u) * .5) dashed rgba(255,255,255,.35); }
.pc-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ps-head { display: flex; align-items: center; gap: calc(var(--u) * 8); background: linear-gradient(180deg, #181b2e, #12142a); border: calc(var(--u)) solid #000; padding: calc(var(--u) * 4) calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
.ps-head img { width: calc(var(--u) * 47 * 1.4); height: calc(var(--u) * 46 * 1.4); image-rendering: pixelated; background: radial-gradient(ellipse at 50% 90%, #1f4d2a, transparent 70%); }
.ps-name { font-size: calc(var(--u) * 10); color: #fff; margin-bottom: calc(var(--u) * 3); }
.ps-box table td { font-size: calc(var(--u) * 5.5); }
td.ps-v { text-align: right; color: var(--gold); }

/* playbook */
.card.pbcard { max-width: calc(var(--u) * 440); padding: calc(var(--u) * 8); }
.pbcard h2 { margin-bottom: calc(var(--u) * 4); }
.pbcard p { margin-bottom: calc(var(--u) * 4); }
.pbcard .note { margin: calc(var(--u) * 4) 0 0; }
.pb { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.pbnav { align-self: center; }
.pbtile { width: calc(var(--u) * 118); background: var(--panel2); border: calc(var(--u)) solid #000; padding: calc(var(--u) * 3); cursor: pointer; box-shadow: 0 calc(var(--u)*2) 0 #000; }
.pbtile:hover { background: #3b5dc9; }
.pbtile.sel { border-color: var(--gold); outline: calc(var(--u)) solid var(--gold); }
.pbtile svg { display: block; width: 100%; height: calc(var(--u) * 62); margin: calc(var(--u) * 2) 0; }
.pbform { font-size: calc(var(--u) * 4.5); color: var(--dim); }
.pbname { font-size: calc(var(--u) * 6); color: var(--gold); }
.pbtip { font-size: calc(var(--u) * 4); color: var(--dim); margin-top: calc(var(--u) * 2); line-height: 1.5; }

/* coin toss */
.card.coin canvas { display: block; margin: 0 auto calc(var(--u) * 4); width: calc(var(--u) * 120); height: calc(var(--u) * 105); image-rendering: pixelated; }
.card.coin .coinmsg { min-height: calc(var(--u) * 12); color: var(--gold); }
.card.coin .row { min-height: calc(var(--u) * 20); }

/* account / online forms */
input.field { display: block; width: 100%; margin: calc(var(--u) * 4) 0; padding: calc(var(--u) * 4) calc(var(--u) * 5); font-family: inherit; font-size: calc(var(--u) * 7); color: var(--ink); background: #10121e; border: calc(var(--u)) solid var(--dim); outline: none; }
input.field:focus { border-color: var(--gold); }