/* Big Beautiful Ballroom Builder - WH-OS retro desktop.
   Fixed 1120x680 stage, scaled to fit the window by Desktop.fit(). */
:root {
  --navy: #0b1530; --blue: #162a52; --blue2: #22407a; --blue3: #35589e;
  --gold: #ffd34a; --gold2: #d4a017; --gold3: #8a6a10;
  --red: #c4121f; --red2: #ff4a55; --cream: #f2eee0; --cream2: #d9d3bd; --cream3: #b9b29a;
  --ink: #14193a; --green: #3fbf5a; --orange: #e8742a;
  --px: 'Press Start 2P', monospace;
  --vt: 'VT323', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #04070f; overflow: hidden; color: var(--cream); font-family: var(--vt); font-size: 19px; line-height: 1.12; }
button { font-family: inherit; }
.hidden { display: none !important; }

#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1120px; height: 680px; flex: none; transform-origin: center center; background: var(--navy); overflow: hidden; box-shadow: 0 0 0 4px var(--gold3), 0 0 60px rgba(255, 211, 74, .18); }
canvas, .portrait, .icon img, .mb-logo img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ───────── Desktop grid ───────── */
#desktop { position: absolute; inset: 0; display: grid; grid-template-columns: 104px 660px 1fr; grid-template-rows: 30px 36px 1fr;
  background: radial-gradient(ellipse at 50% 30%, #1a2f64 0%, #0b1530 70%); }
#menubar { grid-column: 1 / 4; display: flex; align-items: center; gap: 4px; padding: 0 8px; background: linear-gradient(#2a4a8a, #162a52); border-bottom: 3px solid var(--gold2); font-family: var(--px); font-size: 9px; z-index: 60; }
.mb-logo { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: var(--navy); border: 2px solid var(--gold3); font-size: 8px; overflow: hidden; }
.mb-logo img { width: 100%; height: 100%; }
.mb-title { color: var(--gold); margin: 0 10px 0 4px; font-size: 10px; text-shadow: 2px 2px #000; }
.mb-item { padding: 7px 8px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .15); white-space: nowrap; }
.mb-item.gold { color: var(--gold); }
.mb-item.neg, .neg { color: var(--red2) !important; }
.mb-item.status { color: var(--cream3); min-width: 150px; text-align: center; }
.mb-item.status.run { color: var(--green); }
.mb-spacer { flex: 1; }
.mb-controls { display: flex; gap: 3px; }
.mb-controls button { font-family: var(--px); font-size: 8px; padding: 6px 7px; background: #3a5a9a; color: var(--cream); border: 2px solid; border-color: #6b8fd8 #1a2f5a #1a2f5a #6b8fd8; cursor: pointer; }
.mb-controls button:hover { background: #4a6ab0; }
.mb-controls button.on { background: var(--gold2); color: var(--navy); border-color: #ffe27a #8a6a10 #8a6a10 #ffe27a; }

/* Icons */
#icons { padding: 8px 6px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.icon { position: relative; width: 92px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(255, 255, 255, .05); border: 2px solid transparent; color: var(--cream); cursor: pointer; padding: 2px; }
.icon:hover { background: rgba(255, 211, 74, .15); border-color: var(--gold2); }
.icon:active { transform: translate(1px, 1px); }
.icon img { width: 34px; height: 34px; }
.icon .emoji { font-size: 26px; line-height: 34px; height: 34px; font-family: sans-serif; }
.icon .icon-svg { display: block; width: 34px; height: 34px; } .icon .icon-svg svg { display: block; width: 100%; height: 100%; }
.icon-label { font-family: var(--vt); font-size: 15px; letter-spacing: .5px; text-shadow: 1px 1px #000; text-align: center; line-height: 1; }
.badge { position: absolute; top: -3px; right: 1px; min-width: 18px; height: 18px; padding: 0 3px; background: var(--red); color: #fff; font-family: var(--px); font-size: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* Center column */
#center { padding: 8px 6px 6px 4px; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
#camframe { border: 4px solid var(--gold2); border-color: #ffe27a #8a6a10 #8a6a10 #ffe27a; background: #000; flex: none; }
#camhead { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 6px; background: #111a38; font-family: var(--px); font-size: 8px; color: var(--gold); }
#camhead .camtabs { margin-left: auto; display: flex; gap: 3px; }
#camhead button { font-family: var(--px); font-size: 7px; padding: 3px 6px; background: #22407a; color: var(--cream); border: 1px solid #6b8fd8; cursor: pointer; }
#camhead button.on { background: var(--gold2); color: var(--navy); }
#camhead button:disabled { opacity: .35; cursor: not-allowed; }
.rec { color: var(--red2); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
#camwrap { position: relative; width: 640px; height: 360px; }
#cam { display: block; width: 640px; height: 360px; }
#campause { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 5px; background: rgba(0, 0, 0, .65); color: var(--gold); font-family: var(--px); font-size: 9px; letter-spacing: 1px; }

#phasebar { flex: none; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .12); padding: 5px 6px; }
.pchips { display: flex; gap: 4px; }
.pchip { flex: 1; padding: 3px 4px; background: rgba(255, 255, 255, .06); border: 2px solid transparent; font-family: var(--vt); font-size: 14px; line-height: 1; min-width: 0; }
.pchip .pn { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; color: var(--cream3); }
.pchip.cur { border-color: var(--gold); } .pchip.cur .pn { color: var(--gold); }
.pchip.done .pn { color: var(--green); } .pchip.done .fill { background: var(--green); }
.pline { margin-top: 4px; font-size: 17px; color: var(--cream); }
#sitelog { flex: 1; min-height: 0; overflow-y: auto; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .12); padding: 4px 8px; }
.loghead { font-family: var(--px); font-size: 8px; color: var(--gold); margin-bottom: 4px; position: sticky; top: -4px; background: #0b1128; padding: 3px 0; }
.logline { font-size: 17px; color: var(--cream2); padding: 1px 0; border-bottom: 1px dotted rgba(255, 255, 255, .08); }
.logline .wk, .feedline .wk { color: var(--gold2); font-size: 15px; margin-right: 4px; }

/* Bars */
.bar { height: 12px; background: #0a1024; border: 2px solid #000; position: relative; overflow: hidden; }
.bar.thin { height: 7px; border-width: 1px; }
.bar.big { height: 20px; }
.bar .fill { height: 100%; width: 0; background: var(--gold); transition: width .35s steps(8); }
/* Gradient meters: the full scale is always visible, dimmed past the value, with a marker at the value */
.bar.grad, .win .bar.grad { overflow: visible; background: linear-gradient(90deg, #3fbf5a, #ffd34a 50%, #e8742a 75%, #c4121f); }
.bar.grad.goodhigh, .win .bar.grad.goodhigh { background: linear-gradient(90deg, #c4121f, #e8742a 25%, #ffd34a 50%, #3fbf5a); }
.bar.grad .rest { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(8, 12, 30, .8); transition: width .35s steps(8); }
.bar.grad .mark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #000; transition: left .35s steps(8); }
.win .bar.grad .rest { background: rgba(70, 64, 44, .75); }
.kv strong { font-weight: normal; }

/* Widgets */
#widgets { padding: 8px 8px 6px 4px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.panel { background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .14); padding: 7px 9px; }
.panel h3 { margin: 0 0 6px; font-family: var(--px); font-size: 8px; color: var(--gold); letter-spacing: 1px; }
.meter { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 6px; margin: 3px 0; font-size: 17px; }
.m-label { color: var(--cream2); } .m-val { text-align: right; color: var(--cream); }
/* STOP-WORK countdown over the Legal bar (same grid cell, so the column keeps its height) */
.meter .bar { grid-column: 2; grid-row: 1; }
.meter .m-tag { grid-column: 2; grid-row: 1; justify-self: stretch; z-index: 1; pointer-events: none; text-align: center; padding: 2px 0 1px;
  background: rgba(140, 6, 18, .82); border: 1px solid #ff9a9a; color: #fff; font-family: var(--px); font-size: 6px; line-height: 1; white-space: nowrap; }
.meter .m-label { grid-column: 1; grid-row: 1; } .meter .m-val { grid-column: 3; grid-row: 1; }
.bigrow { display: flex; gap: 8px; margin: 4px 0; }
.bigrow > div { flex: 1; display: flex; flex-direction: column; }
.bigrow .k { font-size: 14px; color: var(--cream3); white-space: nowrap; }
.big { font-family: var(--px); font-size: 14px; color: var(--cream); margin-top: 3px; }
.big.small { font-size: 11px; } .big.gold, .gold { color: var(--gold); }
.adv { display: flex; gap: 8px; margin: 5px 0; }
/* Side panel: the column must fit even with both alerts and four buff chips, so advisors get one line per
   perk / liability (full text in the tooltip and on the picker) and alerts are compact */
#widgets .adv { margin: 3px 0; align-items: flex-start; }
#widgets .adv .portrait.md { width: 44px; height: 44px; }
#widgets .adv-text { flex: 1; min-width: 0; font-size: 15px; line-height: 1; }
#widgets .adv-text i { font-size: 14px; }
#widgets .adv-text b { white-space: nowrap; }
#widgets .adv { cursor: help; }
#widgets .adv-text .says { margin-top: 3px; padding-left: 5px; border-left: 2px solid var(--gold2); color: #fff3b0; font-size: 15px; line-height: 1.05; }
#widgets .alert { font-size: 15px; padding: 2px 6px; margin: 4px 0 2px; }
#widgets .kv { margin: 1px 0; }
#widgets .chips { margin-top: 3px; }
.adv-text { font-size: 16px; line-height: 1.05; } .adv-text i { color: var(--cream3); font-size: 15px; }
.perk, .goodtxt { color: #7be28f; } .liab, .badtxt { color: #ff8a8a; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; margin: 2px 0; align-items: center; }
.kv span { color: var(--cream3); } .kv b { font-weight: normal; }
.alert { margin: 5px 0; padding: 4px 6px; background: var(--red); color: #fff; font-size: 16px; border: 2px solid #ff9a9a; }
.alert.reserved { visibility: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chip { display: inline-block; padding: 1px 6px; font-size: 15px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: var(--cream); line-height: 1.1; }
.chip.good { background: #174d27; border-color: #3fbf5a; color: #aaf5b8; }
.chip.bad { background: #55181e; border-color: #ff4a55; color: #ffb0b4; }

/* Portraits */
.portrait { width: 64px; height: 64px; border: 2px solid var(--gold2); background: #0b1530; flex: none; }
.portrait.sm { width: 36px; height: 36px; border-width: 1px; }
.portrait.md { width: 56px; height: 56px; }
.portrait.lg { width: 84px; height: 84px; border-width: 3px; }

/* Ticker */
#ticker { grid-column: 1 / 4; display: flex; align-items: stretch; background: #000; border-bottom: 3px solid var(--gold2); z-index: 60; }
#ticker-label { background: var(--red); color: #fff; font-family: var(--px); font-size: 9px; padding: 0 12px; display: flex; align-items: center; letter-spacing: 1px; }
#ticker-track { position: relative; flex: 1; overflow: hidden; cursor: default; }
#ticker-text { position: absolute; left: 0; top: 0; line-height: 28px; white-space: nowrap; font-size: 22px; color: #fff3b0; will-change: transform; }

/* Windows */
#windows { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.win { position: absolute; pointer-events: auto; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); border: 3px solid; border-color: #fff8e0 #5a5238 #5a5238 #fff8e0; box-shadow: 6px 6px 0 rgba(0, 0, 0, .55); }
.win.active .win-title { background: linear-gradient(#35589e, #162a52); }
.win-title { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; background: linear-gradient(#4a5a7a, #2a3350); color: var(--gold); font-family: var(--px); font-size: 9px; cursor: move; user-select: none; border-bottom: 3px solid var(--gold2); }
.wt-close { width: 22px; height: 20px; font-family: var(--px); font-size: 9px; background: var(--red); color: #fff; border: 2px solid; border-color: #ff9a9a #6a0a12 #6a0a12 #ff9a9a; cursor: pointer; }
.wt-close:hover { background: var(--red2); }
.win-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 12px; font-size: 19px; }
.win .gold { color: #9a6a00; font-weight: bold; }
.win .chip { background: #e8e2cc; border-color: #b9b29a; color: var(--ink); }
.win .chip.good { background: #cdeed4; border-color: #3fbf5a; color: #0c4a1c; }
.win .chip.bad { background: #f6d2d4; border-color: #c4121f; color: #7a0a14; }
.win .kv span { color: #5a5640; } .win .fine { color: #5a5640; font-size: 16px; line-height: 1.05; margin-top: 2px; }
.win .perk, .win .goodtxt { color: #14702a; } .win .liab, .win .badtxt { color: #b01020; }
.win .alert { color: #fff; }
.win .panel, .sect { margin-bottom: 10px; }
.sect h3 { margin: 4px 0 6px; font-family: var(--px); font-size: 9px; color: var(--blue2); border-bottom: 2px solid var(--cream3); padding-bottom: 4px; letter-spacing: 1px; }
.sect.center { text-align: center; }
.win .bar { background: #bfb8a0; border-color: #5a5238; }
.empty { color: #7a765e; font-style: italic; padding: 10px 4px; }

/* Buttons */
.btn { font-family: var(--px); font-size: 8px; padding: 8px 10px; color: var(--ink); background: var(--cream2); border: 3px solid; border-color: #fff #6a644a #6a644a #fff; cursor: pointer; line-height: 1.3; }
.btn:hover:not(:disabled) { background: #fff8e0; }
.btn:active:not(:disabled) { border-color: #6a644a #fff #fff #6a644a; transform: translate(1px, 1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold, .win .btn.gold { background: var(--gold); color: var(--ink); font-weight: normal; border-color: #fff3b0 #8a6a10 #8a6a10 #fff3b0; }
.btn.green { background: #7be28f; border-color: #d4ffdc #2a7a3c #2a7a3c #d4ffdc; }
.btn.red { background: #ff7a84; border-color: #ffd0d4 #8a0a14 #8a0a14 #ffd0d4; }
.btn.blue { background: #8ab4ff; border-color: #dbe8ff #2a4a9a #2a4a9a #dbe8ff; }
.btn.sq { padding: 4px 9px; margin-left: 4px; }
.btn.big { font-size: 11px; padding: 12px 18px; }

/* Cards and lists in windows */
.card { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 5px 0; background: #e8e2cc; border: 2px solid var(--cream3); }
.card.contractor { flex-wrap: wrap; }
.card.col { flex-direction: column; align-items: stretch; text-align: center; margin: 0; }
.card.hired { background: #d2ecd8; border-color: #3fbf5a; }
.card-main { flex: 1; min-width: 0; } .card-btns { display: flex; flex-direction: column; gap: 4px; flex: none; min-width: 128px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ask { color: #7a4a00; font-size: 17px; margin-top: 2px; }
.ladder { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tier { padding: 1px 6px; font-size: 15px; background: #cfc9b1; color: #6a644a; border: 1px solid #b9b29a; }
.tier.got { background: #cdeed4; color: #0c4a1c; border-color: #3fbf5a; } .tier.next { border-color: var(--gold2); background: #fff0b0; color: #5a4000; }
.split { display: flex; gap: 8px; height: 100%; min-height: 330px; }
.split .list { width: 250px; flex: none; border: 2px solid var(--cream3); overflow-y: auto; background: #efe9d4; }
.split .pane { flex: 1; border: 2px solid var(--cream3); overflow-y: auto; padding: 8px; background: #fffdf4; }
.mail { display: flex; gap: 6px; align-items: center; padding: 4px 5px; border-bottom: 1px solid var(--cream3); cursor: pointer;
  width: 100%; margin: 0; background: none; border-width: 0 0 1px; border-radius: 0; color: inherit; font: inherit; text-align: left; }
.mail:focus-visible { outline: 2px solid var(--blue3); outline-offset: -2px; }
.mail-subj, .mail-from { display: block; }
.mail:hover { background: #fff3c0; } .mail.sel { background: #bfd6ff; } .mail.unread .mail-subj { font-weight: bold; color: #000; }
.mail::before { content: ''; width: 7px; height: 7px; flex: none; }
.mail.unread::before { background: var(--red); }
.mail.k-idea { border-left: 4px solid var(--green); }
.mail-act { padding: 0 4px; font-family: var(--px); font-size: 7px; vertical-align: 2px; background: var(--green); color: #fff; }
.idea-ask { margin-top: 4px; padding: 8px 10px; background: #e8f5ea; border: 2px solid var(--green); }
.idea-q { font-size: 19px; margin-bottom: 6px; } .idea-q .odds { font-size: 15px; padding: 1px 6px; background: #2a1a4a; color: #ffe27a; border: 1px solid #8a6aff; }
.idea-exp { display: block; font-size: 15px; color: #6a644a; }
.idea-done { margin-top: 4px; padding: 6px 10px; font-size: 18px; line-height: 1.15; border: 2px solid; }
.idea-done b { font-family: var(--px); font-size: 8px; font-weight: normal; margin-right: 4px; }
.idea-done.yes { background: #e8f5ea; border-color: var(--green); } .idea-done.no { background: #ece8dc; border-color: var(--cream3); color: #4a4636; }
.mail.k-urgent { border-left: 4px solid var(--red); } .mail.k-donor { border-left: 4px solid var(--gold2); } .mail.k-detractor { border-left: 4px solid #7a4aa0; } .mail.k-advisor { border-left: 4px solid var(--green); }
.mail-meta { min-width: 0; } .mail-subj { font-size: 17px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-from { font-size: 14px; color: #6a644a; line-height: 1.1; }
/* CREW: the SWAP FOR question inside a contractor card */
.swap-ask { flex: 1 1 100%; order: 3; margin-top: 4px; padding: 4px 6px; background: #fff3c0; border: 2px dashed var(--gold2); font-size: 16px; }
.swap-ask b { display: block; margin-bottom: 4px; font-family: var(--px); font-size: 8px; }
.swap-ask .btn { margin: 2px 2px 0 0; }
.mail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--cream3); }
.mail-head h3 { margin: 0 0 3px; font-size: 20px; } .mail-body { font-size: 19px; line-height: 1.2; margin-bottom: 10px; }
.feed { max-height: 230px; overflow-y: auto; border: 2px solid var(--cream3); background: #fffdf4; padding: 3px 6px; }
.feedline { padding: 2px 0; border-bottom: 1px dotted var(--cream3); font-size: 17px; }
.win .wk { color: #8a6a10; }
.posttext { font-size: 20px; margin: 4px 0; line-height: 1.12; }
.card.post { border-left: 5px solid var(--blue3); }
.posts-left { float: right; font-size: 8px; color: #14702a; } .posts-left.none { color: #b01020; } .tone-attack { border-left-color: var(--red) !important; } .tone-sincere { border-left-color: var(--green) !important; } .tone-chaos { border-left-color: var(--orange) !important; } .tone-brag { border-left-color: var(--gold2) !important; }

/* Action buttons (fixed and rotating CONTENT.ACTIONS) */
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.card.act .chips { justify-content: center; margin-top: 3px; }
.card.act.rot { border-style: dashed; }
.card.act .odds, .card.post .odds { padding: 1px 6px; font-size: 15px; background: #2a1a4a; color: #ffe27a; border: 1px solid #8a6aff; }
.rot-note { float: right; font-size: 7px; color: #8a6a10; letter-spacing: 0; }

/* Truths: outrage meter */
.outrage { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 4px; font-family: var(--px); font-size: 7px; color: #b01020; }
.outrage .om { display: inline-block; width: 9px; height: 9px; border: 1px solid #b01020; background: #fff8e0; }
.outrage .om.on { background: var(--orange); }
.outrage .chips { margin: 0 0 0 6px; } .outrage .chip { font-family: var(--vt); }

/* ENERGY window */
.card.energy { align-items: center; gap: 6px; text-align: center; }
.en-pic { width: 48px; height: 48px; } .en-pic.emoji { font-size: 40px; line-height: 48px; font-family: sans-serif; }
.cdbar { width: 100%; height: 6px; background: #bfb8a0; border: 1px solid #5a5238; }
.cdbar .fill { height: 100%; width: 100%; background: var(--green); }

/* RED PHONE window and icon */
.phone-head { display: flex; gap: 14px; align-items: center; }
.rp-box { width: 120px; height: 120px; flex: none; container-type: size; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 74, 85, .18), transparent 65%); }
.card.call { border-left: 5px solid var(--red); align-items: flex-start; }
.transcript { margin: 3px 0; font-size: 17px; font-style: italic; color: #4a4636; line-height: 1.1; }
.icon.ringing { border-color: var(--red2); background: rgba(255, 74, 85, .2); animation: iconring 1.6s linear infinite; }
@keyframes iconring { 0%, 55%, 100% { transform: none; } 60%, 70%, 80% { transform: rotate(-7deg); } 65%, 75%, 85% { transform: rotate(7deg); } }

/* Press conference (over News) */
.win[data-win=press] .win-body { padding: 0; background: #0b1530; color: var(--cream); }
.press-tv { position: relative; width: 352px; max-width: 100%; aspect-ratio: 16 / 9; margin: 8px auto 0; border: 3px solid var(--gold2); background: #000; }
.press-cam { display: block; width: 100%; height: 100%; }
.press-tv .fnn-bug .fnn-logo { width: 46px; height: 24px; padding: 2px 3px; }
.press-tv .fnn-live { font-size: 7px; }
.press-loc { position: absolute; left: 2.5%; bottom: 5%; padding: 2px 8px; background: #fff; color: #111; font-family: Arial, sans-serif; font-weight: 900; font-size: 14px; border-bottom: 3px solid #cc0000; }
.press-q { padding: 6px 14px 0; }
.press-meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--px); font-size: 8px; color: var(--gold); }
.press-text { margin: 4px 0 2px; min-height: 44px; font-size: 21px; line-height: 1.05; color: #fff; }
.press-answers { display: flex; flex-direction: column; gap: 5px; padding: 0 14px 10px; }
.press-answers .choice { padding: 4px 10px; font-size: 18px; line-height: 1.05; }
.press-intro { font-size: 16px; line-height: 1.05; font-style: italic; color: var(--cream3); }

/* FNN LIVE panel (right column): the FNN broadcast, small */
#p-fnn { padding: 4px; }
/* The whole 16:9 studio, with the captions low over the desk (the anchors' chins are at about 49% from the top) */
.fnn-tv.mini { aspect-ratio: 16 / 9; border: 2px solid #000; }
.fnn-tv.mini .fnn-cc { left: 3%; right: 3%; bottom: 19%; transform: none; max-width: none; padding: 1px 5px; font-size: 14px; }
.fnn-tv.mini .fnn-lower { left: 2%; right: 2%; bottom: 2%; }
.fnn-tv.mini .fnn-tag { padding: 1px 5px; font-size: 8px; }
.fnn-tv.mini .fnn-head { padding: 2px 6px; font-size: 12px; border-bottom-width: 2px; }
.fnn-tv.mini .fnn-bug { gap: 3px; }
.fnn-tv.mini .fnn-bug .fnn-logo { width: 32px; height: 17px; padding: 1px 2px; }
.fnn-tv.mini .fnn-live { padding: 1px 3px; font-size: 6px; }
#p-adv .adv .portrait.md { width: 34px; height: 34px; }
#p-adv .adv-text .says { font-size: 14px; }
.end-legal { margin: -4px 0 6px; font-family: var(--px); font-size: 8px; color: var(--red); }

/* News lands in the site log (there are no toasts): new lines glow gold for about as long as a toast used to stay,
   warnings and refusals are red. Each window repeats the newest line in its status strip. */
.logline.bad { color: #ff9a9a; }
.logline.new { animation: lognew 9s ease-out; }
.logline .chip, .win-status .chip { padding: 0 4px; font-size: 13px; vertical-align: 1px; }
@keyframes lognew { from { background: rgba(255, 211, 74, .38); } 70% { background: rgba(255, 211, 74, .16); } to { background: transparent; } }
.win-status { flex: none; padding: 3px 8px 4px; background: #e8e2cc; border-top: 2px solid #b9b29a; color: #3a3626; font-size: 16px; line-height: 1.05;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.win-status:empty { display: none; }
.win-status.bad { background: #f6d2d4; color: #7a0a14; }
.win-status.new { animation: statusnew 9s ease-out; }
@keyframes statusnew { from { background: #ffd34a; } to { background: #e8e2cc; } }
.win-status.bad.new { animation-name: statusbad; }
@keyframes statusbad { from { background: #ff9a9a; } to { background: #f6d2d4; } }
@keyframes pop { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modals */
#modal-layer { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 15, .74); }
.dialog { width: 720px; max-width: 94%; background: var(--cream); color: var(--ink); border: 4px solid; border-color: #fff8e0 #5a5238 #5a5238 #fff8e0; box-shadow: 10px 10px 0 rgba(0, 0, 0, .6); animation: pop .25s steps(4); }
.d-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; font-family: var(--px); font-size: 9px; color: #fff; background: linear-gradient(#35589e, #162a52); border-bottom: 3px solid var(--gold2); }
.d-flag { color: var(--gold); letter-spacing: 1px; flex: none; } .d-from { text-align: right; }
.dialog.urgent .d-head { background: linear-gradient(#e03a46, #8a0a14); } .dialog.urgent .d-flag { color: #fff; animation: blink 1s steps(2) infinite; }
.dialog.banner .d-head { background: linear-gradient(#d4a017, #8a6a10); } .dialog.banner .d-flag { color: #fff; }
.d-body { padding: 14px 16px 16px; font-size: 21px; line-height: 1.15; }
.d-body h2 { margin: 0 0 6px; font-family: var(--px); font-size: 13px; line-height: 1.4; color: var(--blue2); }
.dialog.urgent .d-body h2 { color: #8a0a14; } .dialog.banner h2 { font-size: 14px; color: #8a6a10; }
.d-body p { margin: 4px 0 10px; } .d-row { display: flex; gap: 14px; align-items: flex-start; }
.d-hint, .sub { color: #5a5640; font-size: 16px; } .sub { margin-top: -2px; }
.choices { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 8px; }
.choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; font-size: 20px; color: var(--ink); background: #fff8e0; border: 3px solid; border-color: #fff #6a644a #6a644a #fff; cursor: pointer; line-height: 1.1; }
.choice:hover { background: #ffe9a0; border-color: var(--gold2); }
.choice .ctext { flex: 1; }
.choice .odds { flex: none; margin-left: 8px; padding: 2px 6px; font-size: 15px; background: #2a1a4a; color: #ffe27a; border: 1px solid #8a6aff; white-space: nowrap; }
.gamble { margin: 0 0 8px; padding: 5px 8px; font-family: var(--px); font-size: 10px; letter-spacing: 1px; color: #fff; }
.gamble.g-win { background: #1e7a3c; } .gamble.g-lose { background: var(--red); }
.choice .num { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--blue2); color: #fff; font-family: var(--px); font-size: 10px; }
.youchose { font-size: 17px; color: #5a5640; margin-bottom: 6px; border-bottom: 1px dotted var(--cream3); padding-bottom: 4px; }
.otext { font-size: 22px; line-height: 1.15; }
.dialog .chips { margin: 8px 0 14px; } .dialog .chip { font-size: 17px; padding: 2px 8px; }

/* Title screen */
#title-screen, #picker-screen, #funding-screen, #end-screen { position: absolute; inset: 0; z-index: 200; }
#title-screen { background: #0a1228 center / cover no-repeat; }
#title-cam { position: absolute; left: 0; top: 0; width: 1120px; height: 630px; opacity: .9; }
#title-screen.has-art #title-cam { display: none; }
.title-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 24, .92) 0%, rgba(5, 9, 24, .7) 38%, rgba(5, 9, 24, 0) 70%), linear-gradient(0deg, rgba(5, 9, 24, .9) 0%, rgba(5, 9, 24, 0) 30%); }
.title-box { position: absolute; left: 44px; top: 36px; width: 520px; }
.title-eyebrow { font-family: var(--px); font-size: 8px; color: var(--gold2); letter-spacing: 1px; line-height: 1.6; margin-bottom: 10px; }
h1 { margin: 0 0 14px; font-family: var(--px); font-size: 44px; line-height: 1.12; color: var(--gold); text-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 211, 74, .5); letter-spacing: 1px; }
.title-sub { font-size: 24px; line-height: 1.1; color: var(--cream); margin: 0 0 12px; max-width: 480px; }
.title-how { font-size: 21px; line-height: 1.2; color: var(--cream2); margin-bottom: 18px; } .title-how .mission { font-family: var(--px); font-size: 11px; color: var(--gold); letter-spacing: 1px; margin-bottom: 6px; }
.title-hi:empty { display: none; }
.title-hi { margin-top: 12px; font-family: var(--px); font-size: 9px; color: var(--gold); }
#title-screen .btn.big, #picker-screen .btn.big, #funding-screen .btn.big { font-size: 14px; padding: 16px 26px; }

/* Picker */
#picker-screen { background: radial-gradient(ellipse at 50% 20%, #1f3a78, #0b1530 75%); display: flex; align-items: center; justify-content: center; }
.picker-box { width: 1020px; text-align: center; }
.picker-box h2 { font-family: var(--px); font-size: 20px; color: var(--gold); text-shadow: 3px 3px #000; margin: 0 0 8px; }
.picker-box .title-sub { max-width: none; margin: 0 0 10px; }
#picker-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.advcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: rgba(0, 0, 0, .35); border: 3px solid rgba(255, 255, 255, .18); color: var(--cream); cursor: pointer; text-align: center; }
.advcard:hover { border-color: var(--gold2); } .advcard.sel { border-color: var(--gold); background: rgba(255, 211, 74, .16); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255, 211, 74, .4); }
.advcard b { font-family: var(--px); font-size: 10px; color: var(--gold); margin-top: 4px; } .advcard i { font-size: 17px; color: var(--cream3); }
.advcard .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 0 1px; } .advcard .chip { font-size: 15px; }
.advcard .portrait.lg { width: 72px; height: 72px; }
.advcard .perk, .advcard .liab { font-size: 17px; line-height: 1.05; } .advcard .perk { color: #7be28f; } .advcard .liab { color: #ff8a8a; }
.picker-foot { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 24px; font-family: var(--px); font-size: 10px; color: var(--cream); }

/* End screen */
#end-screen { background: rgba(4, 7, 15, .86); display: flex; align-items: center; justify-content: center; }
#end-screen.hidden { display: none; }
.end-card { width: 860px; max-height: 660px; overflow-y: auto; background: var(--cream); color: var(--ink); border: 5px solid; border-color: #fff8e0 #5a5238 #5a5238 #fff8e0; box-shadow: 10px 10px 0 rgba(0, 0, 0, .6); padding: 0 0 16px; text-align: center; }
.end-img { height: 150px; background: center 78% / cover no-repeat; border-bottom: 4px solid var(--gold2); image-rendering: pixelated; }
.end-flag { padding: 8px; font-family: var(--px); font-size: 10px; letter-spacing: 2px; color: #fff; background: var(--red); }
.end.end-good .end-flag { background: #1e7a3c; }
.end-card h1 { font-size: 22px; color: var(--blue2); text-shadow: none; margin: 14px 18px 6px; line-height: 1.3; }
.end-card p { font-size: 21px; line-height: 1.12; margin: 6px 30px 10px; }
.end-rating { font-size: 22px; } .end-rating b { color: #9a6a00; }
.end-score { font-family: var(--px); font-size: 14px; margin: 8px 0; } .end-score b { color: var(--blue2); font-size: 20px; } .newhi { color: var(--red); } .hi { color: #5a5640; font-size: 9px; }
/* The score breakdown: one cell per scoring term */
.end-breakdown { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 2px 18px 6px; }
.end-breakdown div { flex: 1 1 0; min-width: 96px; padding: 3px 4px; background: #fff8e0; border: 2px solid #cdeed4; line-height: 1; }
.end-breakdown div.neg { border-color: #f6d2d4; }
.end-breakdown span { display: block; font-family: var(--px); font-size: 6px; color: #5a5640; margin-bottom: 3px; }
.end-breakdown i { display: block; font-style: normal; font-size: 14px; color: #6a644a; }
.end-breakdown b { display: block; font-weight: normal; font-size: 20px; color: #1e7a3c; } .end-breakdown .neg b { color: var(--red); }
body.mp .end-breakdown div { min-width: 30%; }
/* The cheater easter egg's FNN segment on the end card */
.end-fnn { margin: 8px 30px 4px; padding: 6px 10px 8px; background: #0b1a3a; color: #fff; text-align: left; font-size: 18px; line-height: 1.15; border-left: 6px solid #cc0000; }
.end-fnn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--px); font-size: 9px; color: var(--gold); }
.end-fnn-head .fnn-logo { width: 46px; height: 20px; }
.end-fnn b { color: #ffd34a; font-weight: normal; }
.end-cheat .end-rating b { color: var(--red); font-size: 18px; }
.end-cheat .end-img { height: 100px; }
body.m .end-fnn { margin: 6px 10px 4px; font-size: 16px; }
.end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 18px 14px; }
.end-stats div { background: #e8e2cc; border: 2px solid var(--cream3); padding: 4px; } .end-stats span { display: block; font-size: 14px; color: #5a5640; } .end-stats b { font-weight: normal; font-size: 22px; }

/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #0a1024; } ::-webkit-scrollbar-thumb { background: #4a5a8a; border: 2px solid #0a1024; }
.win ::-webkit-scrollbar-track { background: #d9d3bd; } .win ::-webkit-scrollbar-thumb { background: #8a8468; border-color: #d9d3bd; }

/* Title screen with generated art (title_screen.png has an empty banner at the top: the title goes inside it) */
#title-screen.has-art .title-shade { display: none; }
.title-ver { position: absolute; left: 10px; bottom: 8px; padding: 4px 6px; font-family: var(--px); font-size: 9px; color: var(--gold); background: rgba(5, 9, 24, .75); border: 2px solid var(--gold2); z-index: 2; pointer-events: none; }
#title-screen.has-art .title-eyebrow { display: none; }
#title-screen.has-art h1 { position: absolute; left: -318px; top: -134px; width: 470px; margin: 0; text-align: center; font-size: 24px; line-height: 1.55; color: #14193a; text-shadow: 2px 2px 0 #ffd34a, 3px 3px 0 #8a6a10; letter-spacing: 0; }
#title-screen.has-art h1 br { display: none; }
#title-screen.has-art .title-box { left: 640px; top: 196px; width: 440px; padding: 12px 18px 14px; background: rgba(5, 9, 24, .8); border: 3px solid var(--gold2); box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); }
#title-screen.has-art .title-sub { font-size: 21px; }
#title-screen.has-art .title-how { font-size: 18px; line-height: 1.12; margin-bottom: 10px; }
#title-screen.has-art .title-sub { margin-bottom: 8px; }
#title-screen.has-art .title-hi { margin-top: 8px; }
#title-screen.has-art .title-box .btn.big { width: 100%; }
.dialog.act .d-head { background: linear-gradient(#6a3ab0, #2a1050); } .dialog.act .d-flag { color: #ffe27a; } .dialog.act h2 { color: #4a1a8a; }
/* Window summary row: a few big numbers side by side */
.statrow { display: flex; gap: 8px; }
.statrow > div { flex: 1; background: #e8e2cc; border: 2px solid var(--cream3); padding: 4px 8px; }
.statrow span { display: block; font-size: 14px; color: #5a5640; }
.statrow b { font-weight: normal; font-size: 22px; display: flex; align-items: center; gap: 2px; }
.win .fine .stat { color: #2a4a9a; }
.win .chips { margin-top: 3px; }
#screen-music { position: absolute; right: 12px; top: 10px; z-index: 250; font-family: var(--px); font-size: 8px; padding: 7px 9px; background: #3a5a9a; color: var(--cream); border: 2px solid; border-color: #6b8fd8 #1a2f5a #1a2f5a #6b8fd8; cursor: pointer; }
#screen-music:hover { background: #4a6ab0; }

/* ───────── Funding screen: pick a scheme, then its mini-game (wheel, coin chart, red phone) ───────── */
#funding-screen { background: radial-gradient(ellipse at 50% 15%, #3a2a08, #120c02 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fund-box { width: 1060px; text-align: center; position: relative; }
.fund-box h2 { font-family: var(--px); font-size: 22px; color: var(--gold); text-shadow: 3px 3px #000; margin: 0 0 8px; }
.fund-box .title-sub { max-width: none; margin: 0 0 16px; }
#fund-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fund-warn { margin: -8px 0 10px; font-size: 17px; color: var(--cream3); }
.fund-warn::before { content: '! '; color: var(--gold); }
.fundcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; background: rgba(0, 0, 0, .4); border: 3px solid rgba(255, 211, 74, .3); color: var(--cream); cursor: pointer; text-align: center; transition: transform .12s steps(2); }
.fundcard:hover { border-color: var(--gold); background: rgba(255, 211, 74, .12); transform: translateY(-4px); box-shadow: 0 0 18px rgba(255, 211, 74, .35); }
.fundcard b { font-family: var(--px); font-size: 12px; color: var(--gold); margin-top: 2px; }
.fundcard i { font-style: normal; font-size: 20px; line-height: 1.1; color: var(--cream2); min-height: 66px; }
.fkey { position: absolute; left: 8px; top: 8px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--blue2); font-family: var(--px); font-size: 9px; }
.frange { font-family: var(--px); font-size: 18px; color: #7be28f; text-shadow: 3px 3px #000; line-height: 1.4; margin: 2px 0; }
.fprice { font-size: 18px; color: #ff9a9a; } .fundcard .chips .chip, .fprice .chip { font-size: 15px; padding: 1px 6px; }

/* Animated icons (DOM + emoji; 120px boxes) */
.ficon { position: relative; width: 140px; height: 110px; margin: 2px auto 4px; }
.ficon span { position: absolute; display: block; line-height: 1; }
.ficon.coin .coin3d { left: 38px; top: 18px; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd34a 45%, #c48a10); border: 4px solid #8a6a10; box-shadow: inset 0 0 0 4px #e8b830; font-family: var(--px); font-size: 26px; color: #8a6a10; display: flex; align-items: center; justify-content: center; animation: coinspin 1.4s linear infinite; }
@keyframes coinspin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.08); } 50% { transform: scaleX(-1); filter: brightness(.8); } 75% { transform: scaleX(-.08); } 100% { transform: scaleX(1); } }
.ficon.coin .spark { color: #fff3b0; font-size: 18px; animation: twinkle 1.2s steps(3) infinite; }
.ficon.coin .s1 { left: 22px; top: 8px; } .ficon.coin .s2 { left: 108px; top: 26px; animation-delay: .4s; } .ficon.coin .s3 { left: 30px; top: 78px; animation-delay: .8s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
.ficon.coin .moon { left: 100px; top: 60px; font-size: 28px; animation: rocket 2.2s ease-in infinite; }
@keyframes rocket { 0% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(26px, -70px); opacity: 1; } 71%, 100% { transform: translate(26px, -70px); opacity: 0; } }
.ficon.call .phone { left: 40px; top: 30px; font-size: 56px; animation: ringshake 1.2s steps(1) infinite; }
@keyframes ringshake { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25%, 35% { transform: rotate(-14deg) translateY(-3px); } 10%, 20%, 30%, 40% { transform: rotate(14deg) translateY(-3px); } }
.ficon.call .ring { left: 52px; top: 34px; width: 44px; height: 44px; border: 3px solid #ffd34a; border-radius: 50%; opacity: 0; animation: ringwave 1.2s ease-out infinite; }
.ficon.call .r2 { animation-delay: .3s; }
@keyframes ringwave { 0% { transform: scale(.6); opacity: .9; } 45% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } }
.ficon.call .bubble { left: 84px; top: 0; padding: 4px 5px; background: #fff; color: var(--red); font-family: var(--px); font-size: 7px; border: 2px solid #14193a; animation: bubble 2.4s steps(1) infinite; }
@keyframes bubble { 0%, 35% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } }
.ficon.call .globe { left: 4px; top: 4px; font-size: 26px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-10deg); } }
.ficon.snap .cart { left: 6px; top: 50px; font-size: 44px; animation: cartroll 2.4s ease-in-out infinite; }
@keyframes cartroll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.ficon.snap .bag { left: 92px; top: 46px; font-size: 44px; animation: bagpulse 1.2s steps(2) infinite; }
@keyframes bagpulse { 50% { transform: scale(1.12); } }
.ficon.snap .food { left: 30px; top: 50px; font-size: 22px; opacity: 0; animation: foodfly 2.4s ease-in-out infinite; }
.ficon.snap .f2 { animation-delay: .8s; } .ficon.snap .f3 { animation-delay: 1.6s; }
@keyframes foodfly { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(34px, -46px) rotate(200deg); opacity: 1; } 85% { transform: translate(70px, 0) rotate(380deg); opacity: 1; } 90%, 100% { transform: translate(70px, 4px) scale(.3); opacity: 0; } }

/* The wheel */
#fund-spin { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 6px; }
.wheel-wrap { position: relative; width: 400px; height: 400px; flex: none; }
#fund-wheel { width: 400px; height: 400px; border-radius: 50%; box-shadow: 0 0 0 6px #14193a, 0 0 40px rgba(255, 211, 74, .45); image-rendering: auto; }
.wheel-pointer { position: absolute; left: 50%; top: -18px; margin-left: -18px; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 40px solid var(--red2); filter: drop-shadow(3px 3px 0 #000); transform-origin: 50% 0; z-index: 2; }
.wheel-pointer.flick { animation: flick .12s ease-out; }
@keyframes flick { 40% { transform: rotate(-16deg); } }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd34a 50%, #8a6a10); border: 4px solid #14193a; font-family: var(--px); font-size: 24px; color: #8a6a10; display: flex; align-items: center; justify-content: center; }
.fund-side { position: relative; z-index: 1; width: 470px; text-align: left; }
#fund-scheme { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#fund-scheme .ficon { margin: 0; transform: scale(.8); transform-origin: left center; width: 120px; }
#fund-scheme p { flex: 1; margin: 0; font-size: 21px; color: var(--cream2); min-width: 200px; }
#fund-scheme .fprice { width: 100%; }
#fund-result { min-height: 190px; margin: 14px 0; padding: 12px 14px; background: rgba(0, 0, 0, .45); border: 3px solid rgba(255, 211, 74, .35); display: flex; flex-direction: column; justify-content: center; }
.fr-wait { font-size: 22px; color: var(--cream3); text-align: center; } .fr-wait.spinning { color: var(--gold); animation: blink .6s steps(2) infinite; }
.fr-amount { display: flex; align-items: baseline; gap: 14px; animation: pop .3s steps(4); }
.fr-amount b { font-family: var(--px); font-size: 40px; font-weight: normal; color: #7be28f; text-shadow: 4px 4px #000; }
.fr-amount.big b { color: var(--gold); animation: glow 0.8s steps(2) infinite; } .fr-amount.low b { color: var(--red2); }
@keyframes glow { 50% { text-shadow: 4px 4px #000, 0 0 18px #ffd34a; } }
.fr-tag { font-family: var(--px); font-size: 10px; padding: 4px 6px; background: var(--gold); color: var(--ink); }
.fr-start { font-family: var(--px); font-size: 10px; color: var(--cream2); }
.fr-amount.low .fr-tag { background: var(--red); color: #fff; }
.fr-quip { margin: 10px 0 0; font-size: 22px; line-height: 1.15; color: var(--cream); }
.fund-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fund-btns .btn.big { margin-left: auto; }
/* Which mini-game panel shows (main.js sets data-kind on #fund-spin) */
#fund-spin:not([data-kind="wheel"]) .wheel-wrap, #fund-spin:not([data-kind="coin"]) .coin-wrap, #fund-spin:not([data-kind="call"]) .phone-wrap { display: none; }

/* $TRUMP coin: live chart, then DUMP */
.coin-wrap { position: relative; width: 400px; height: 400px; flex: none; }
#fund-chart { width: 400px; height: 400px; box-shadow: 0 0 0 4px #14193a, 0 0 0 7px var(--gold2), 0 0 40px rgba(255, 211, 74, .3); image-rendering: auto; }
.fr-live { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fr-live span { font-family: var(--px); font-size: 10px; color: var(--cream3); }
.fr-live b { font-family: var(--px); font-size: 36px; font-weight: normal; text-shadow: 4px 4px #000; }
.fr-live b.up { color: #3fe07a; } .fr-live b.down { color: var(--red2); }
.fr-news { margin: 14px 0 0; min-height: 52px; font-size: 22px; line-height: 1.15; color: var(--cream); }
.fr-news.up::before { content: 'GOOD NEWS: '; color: #3fe07a; } .fr-news.down::before { content: 'BAD NEWS: '; color: var(--red2); }
.fund-btns .btn.dump { background: var(--red2); color: #fff; border-color: #ffb0b6 #8a0a14 #8a0a14 #ffb0b6; animation: dumppulse .8s steps(2) infinite; }
.fund-btns .btn.dump:hover:not(:disabled) { background: #ff6a74; }
.fund-btns .btn.dump:disabled { animation: none; }
@keyframes dumppulse { 50% { box-shadow: 0 0 0 4px rgba(255, 74, 85, .45), 0 0 22px rgba(255, 74, 85, .6); } }

/* A perfect call: the red phone (sized in container units so it scales with the panel) */
.phone-wrap { position: relative; width: 400px; height: 400px; flex: none; container-type: size; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, rgba(255, 74, 85, .22), transparent 65%); }
.redphone { position: relative; width: 84cqw; height: 84cqw; }
.rp-base { position: absolute; left: 10%; right: 10%; top: 40%; height: 40%; background: linear-gradient(#ff4a55, #c4121f 60%, #8a0a14); border: 1cqw solid #14193a; border-radius: 30% 30% 8% 8% / 40% 40% 10% 10%; box-shadow: inset 0 2cqw 0 rgba(255, 255, 255, .25), 0 2cqw 0 #000; }
.rp-dial { position: absolute; left: 50%; top: 55%; width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, #fff3b0 0 30%, var(--cream) 31%); border: 1cqw solid #14193a; outline: 2.2cqw dotted rgba(20, 25, 58, .75); outline-offset: -6.5cqw; font-family: var(--px); font-size: 6cqw; color: var(--red); }
.rp-handset { position: absolute; left: 6%; right: 6%; top: 24%; height: 11%; background: linear-gradient(#ff4a55, #c4121f); border: 1cqw solid #14193a; border-radius: 6cqw; box-shadow: inset 0 1.2cqw 0 rgba(255, 255, 255, .3); z-index: 2; transition: transform .35s ease-out; }
.rp-ear, .rp-mouth { position: absolute; top: 55%; width: 24%; height: 120%; background: linear-gradient(#e8323e, #a80f1a); border: 1cqw solid #14193a; border-radius: 10% 10% 50% 50% / 10% 10% 60% 60%; }
.rp-ear { left: -2%; } .rp-mouth { right: -2%; }
.rp-cord { position: absolute; left: 4%; top: 33%; width: 3cqw; height: 32%; background: repeating-linear-gradient(#14193a 0 1cqw, #c4121f 1cqw 2.2cqw); }
.rp-plate { position: absolute; left: 14%; right: 14%; top: 87%; padding: 1.2cqw; background: var(--gold); color: var(--ink); border: .6cqw solid var(--gold3); font-family: var(--px); font-size: 2.1cqw; text-align: center; white-space: nowrap; }
.rp-rings span { position: absolute; left: 50%; top: 30%; width: 34cqw; height: 34cqw; margin: -17cqw 0 0 -17cqw; border: 1cqw solid var(--gold); border-radius: 50%; opacity: 0; }
.redphone.ringing { animation: rpshake .14s steps(2) infinite; }
.redphone.ringing .rp-handset { animation: rphop .14s steps(2) infinite; }
.redphone.ringing .rp-rings span { animation: ringwave 1.2s ease-out infinite; }
.redphone.ringing .rp-rings span + span { animation-delay: .3s; }
.redphone.live .rp-handset { transform: translate(8cqw, -18cqw) rotate(-14deg); }
@keyframes rpshake { 50% { transform: rotate(-1.5deg); } }
@keyframes rphop { 50% { transform: translateY(-1.5cqw) rotate(2deg); } }
.fr-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.callbtn { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 8px 36px; text-align: left; background: rgba(0, 0, 0, .35); border: 3px solid rgba(255, 211, 74, .3); color: var(--cream); cursor: pointer; }
.callbtn:hover { border-color: var(--gold); background: rgba(255, 211, 74, .1); }
.callbtn.on { border-color: var(--red2); background: rgba(255, 74, 85, .2); box-shadow: 0 0 14px rgba(255, 74, 85, .45); }
.callbtn b { font-family: var(--px); font-size: 9px; font-weight: normal; color: var(--gold); line-height: 1.4; }
.callbtn i { font-style: normal; font-size: 17px; line-height: 1.05; color: var(--cream2); }
.callbtn .crisk { font-size: 16px; color: #ff9a9a; }
.fr-call > b { font-family: var(--px); font-size: 10px; font-weight: normal; color: var(--gold); }
.fr-line { margin: 12px 0 0; font-size: 22px; line-height: 1.15; color: var(--cream); animation: pop .3s steps(4); }
.fr-line.dim { color: var(--cream3); animation: blink .6s steps(2) infinite; }

/* SNAP: who paid for it */
.fr-hungry { margin-top: 12px; padding: 8px 10px; border: 3px solid var(--red); background: rgba(196, 18, 31, .18); animation: pop .3s steps(4); }
.fr-hungry b { display: block; font-family: var(--px); font-size: 12px; font-weight: normal; color: var(--red2); line-height: 1.5; }
.fr-hungry p { margin: 4px 0 0; font-size: 19px; line-height: 1.1; color: var(--cream2); }
#fund-rain { position: absolute; inset: -120px -60px; pointer-events: none; overflow: hidden; }
#fund-rain span { position: absolute; top: -40px; font-size: 26px; animation: rain 2s linear forwards; }
@keyframes rain { from { transform: translateY(0) rotate(0); } to { transform: translateY(900px) rotate(540deg); } }

/* ───────── FNN: the Fake News Network window (a TV: studio canvas + broadcast graphics on top) ───────── */
.fnn-logo { display: inline-flex; align-items: center; justify-content: center; padding: 3px 4px; background: #fff; border-radius: 3px; }
.fnn-logo svg { display: block; width: 100%; height: 100%; }
.icon .fnn-logo { width: 54px; height: 30px; box-shadow: 0 0 0 1px #000; }
.fnn-tv { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; color: #fff; }
.fnn-cam { display: block; width: 100%; height: 100%; }
.fnn-bug { position: absolute; left: 2.5%; top: 4%; display: flex; align-items: center; gap: 6px; }
.fnn-bug .fnn-logo { width: 66px; height: 34px; opacity: .95; }
.fnn-live { padding: 2px 6px; background: #cc0000; font-family: var(--px); font-size: 9px; animation: blink 1s steps(2) infinite; }
.fnn-cc { position: absolute; left: 50%; bottom: 27%; transform: translateX(-50%); max-width: 92%; padding: 3px 8px; background: #000; font-family: var(--vt); font-size: 21px; line-height: 1.1; text-transform: uppercase; letter-spacing: .5px; }
.fnn-lower { position: absolute; left: 2.5%; right: 2.5%; bottom: 8.5%; display: flex; flex-direction: column; align-items: flex-start; }
.fnn-tag { padding: 2px 8px; background: #cc0000; font-family: Arial, sans-serif; font-weight: 900; font-size: 13px; letter-spacing: 1px; }
.fnn-head { width: 100%; padding: 4px 10px; background: #fff; color: #111; font-family: Arial, sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 3px solid #cc0000; }

/* ───────── Gamble: the Trump coin flip (heads = it pays off) ───────── */
.dialog.roll .d-head { background: linear-gradient(#6a3ab0, #2a1050); } .dialog.roll .d-flag { color: #ffe27a; animation: blink .8s steps(2) infinite; }
.roll-need { font-family: var(--px); font-size: 10px; color: var(--ink); text-align: center; margin: 6px 0 2px; line-height: 1.8; }
.roll-need .odds { font-family: var(--vt); font-size: 15px; padding: 2px 6px; background: #2a1a4a; color: #ffe27a; border: 1px solid #8a6aff; margin-left: 6px; }
.roll-need .weighted { font-family: var(--vt); font-size: 16px; color: #6a644a; line-height: 1; }
.coin-area { position: relative; height: 216px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px; perspective: 700px; }
.tcoin { position: relative; width: 130px; height: 130px; transform-style: preserve-3d; z-index: 1; }
.tc-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffd34a 45%, #c48a10); transition: box-shadow .3s; }
.tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-reed { fill: none; stroke: #8a6a10; stroke-width: 5; stroke-dasharray: 2 1.6; }
.tc-band { fill: rgba(196, 138, 16, .3); stroke: #8a6a10; stroke-width: 1.5; }
.tc-inner { fill: #ffd34a; stroke: #8a6a10; stroke-width: 1.5; }
.tc-ring { font-family: 'Press Start 2P', monospace; font-size: 6.5px; fill: #5a3a04; }
.tc-mid { font-family: 'Press Start 2P', monospace; font-size: 10px; fill: #8a6a10; text-anchor: middle; paint-order: stroke; stroke: #fff3b0; stroke-width: 1.5px; }
.tc-face .tc-pic { position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #8a6a10; filter: sepia(.5) saturate(1.5); }
.tc-tails { transform: rotateX(180deg); }
/* Tossed up and back down while spinning; heads lands face up after 6 turns, tails after 6.5 */
.tcoin.toss-heads { animation: tossHeads 2.1s forwards; } .tcoin.toss-tails { animation: tossTails 2.1s forwards; }
@keyframes tossHeads { 0% { transform: translateY(0) rotateX(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 50% { transform: translateY(-62px) rotateX(1080deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 100% { transform: translateY(0) rotateX(2160deg); } }
@keyframes tossTails { 0% { transform: translateY(0) rotateX(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); } 50% { transform: translateY(-62px) rotateX(1170deg); animation-timing-function: cubic-bezier(.6, 0, .8, .4); } 100% { transform: translateY(0) rotateX(2340deg); } }
.tcoin.landed.g-win .tc-face { box-shadow: 0 0 0 4px #3fbf5a, 0 0 24px #7be28f; }
.tcoin.landed.g-lose .tc-face { box-shadow: 0 0 0 4px var(--red), 0 0 24px #ff6a72; }
.coin-shadow { position: absolute; bottom: 10px; left: 50%; width: 116px; height: 12px; margin-left: -58px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.tcoin.toss-heads + .coin-shadow, .tcoin.toss-tails + .coin-shadow { animation: coinshadow 2.1s forwards; }
@keyframes coinshadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.45); opacity: .4; } }
.roll-verdict { text-align: center; font-family: var(--px); font-size: 18px; min-height: 30px; opacity: 0; }
.roll-verdict.show { opacity: 1; animation: stamp .35s steps(4); } .roll-verdict.g-win { color: #1e7a3c; } .roll-verdict.g-lose { color: var(--red); }
@keyframes stamp { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }

/* ═════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT. Desktop.fit() adds body.m on narrow or short screens (and .mp for portrait, .ml for
   landscape) and sizes #stage to the screen, with --sw / --sh holding its size. Everything above this
   block is the desktop design, scaled; this block rearranges it for fingers.
   ═════════════════════════════════════════════════════════════════════════ */
.mb-extra { display: contents; }
body:not(.m) #btn-more { display: none; }
body.m .kbd { display: none; }
body.m { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.m #stage { box-shadow: none; }
body.m ::-webkit-scrollbar { width: 6px; height: 6px; }
body.mp { --hudh: 38px; --tickh: 26px; --navh: 58px; --ctlh: 40px; }
body.ml { --hudh: 34px; --tickh: 24px; --navw: 64px; }
body.mp #stage { --wheel: min(300px, calc(var(--sw) - 56px)); }
body.ml #stage { --wheel: min(260px, calc(var(--sh) - 130px)); --camw: min(calc((var(--sh) - 196px) * 16 / 9), calc(var(--sw) - 294px)); }

/* Menu bar: stats on top with the clock buttons in a strip just above the app bar, at the thumb (portrait); one
   row (landscape). MORE opens the rest (upward from the bottom strip in portrait). */
body.m #menubar { position: relative; flex: none; height: var(--hudh); flex-wrap: wrap; align-content: center; padding: 0 4px; gap: 3px; }
body.m .mb-logo, body.m .mb-title, body.m #mb-status, body.m .mb-spacer { display: none; }
body.m .mb-item { flex: 1 1 auto; text-align: center; padding: 6px 4px; font-size: 9px; }
body.m .mb-controls { gap: 3px; }
body.m .mb-controls button { flex: 1; min-height: 28px; padding: 6px 8px; font-size: 9px; }
body.m .mb-extra { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70; gap: 4px; padding: 6px; background: #162a52; border-bottom: 3px solid var(--gold2); box-shadow: 0 6px 0 rgba(0, 0, 0, .5); }
body.m #menubar.more .mb-extra { display: flex; }
body.m #menubar.more #btn-more { background: var(--gold2); color: var(--navy); }
body.m .mb-extra button { min-height: 40px; }
body.mp #menubar { position: static; }
body.mp .mb-controls { position: absolute; left: 0; right: 0; bottom: var(--navh); height: var(--ctlh); padding: 4px; background: #0a1228; border-top: 2px solid rgba(255, 211, 74, .35); }
body.mp .mb-extra { top: auto; bottom: 100%; border-top: 3px solid var(--gold2); border-bottom: 0; box-shadow: 0 -6px 0 rgba(0, 0, 0, .5); }
body.ml .mb-controls { margin-left: auto; }
body.ml .mb-controls button { flex: none; }

/* Site cam, phases */
body.m #camframe { border-width: 2px; }
body.m #camhead { height: 26px; gap: 6px; padding: 0 4px; }
body.m #camtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m #camhead .camtabs { margin-left: 0; }
body.m #camhead button { font-size: 8px; padding: 5px 8px; }
body.m #camwrap, body.m #cam { width: 100%; height: auto; }
body.m #cam { aspect-ratio: 16 / 9; }
body.m #phasebar { padding: 4px; }
body.m .pchips { gap: 3px; }
body.m .pchip { padding: 2px 3px; font-size: 12px; }
body.m .pline { font-size: 15px; margin-top: 3px; line-height: 1.05; }
body.ml .pline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m #sitelog { padding: 2px 6px; }
body.m .logline { font-size: 15px; line-height: 1.05; }
body.m .loghead { top: -2px; padding: 2px 0; }
body.m #widgets { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-width: 0; }
body.m #ticker-label { font-size: 8px; padding: 0 8px; }
body.m #ticker-text { font-size: 18px; line-height: calc(var(--tickh) - 3px); }

/* Portrait: one column. The cam stays put, the meters scroll under it, the app bar is at the thumb. */
body.mp #desktop { display: flex; flex-direction: column; background: #0b1530; }
body.mp #center { display: contents; }
body.mp #camframe { order: 1; margin: 4px 4px 0; }
body.mp #phasebar { order: 2; margin: 4px 4px 0; }
body.mp #sitelog { order: 2; flex: none; height: 62px; margin: 4px 4px 0; }
body.mp #widgets { order: 3; flex: 1 1 0; padding: 4px; margin-bottom: var(--ctlh); }
body.mp #ticker { order: -1; flex: none; height: var(--tickh); }
body.mp #icons { order: 5; flex: none; height: var(--navh); flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px; gap: 4px; background: #0a1228; border-top: 3px solid var(--gold2); scrollbar-width: none; }
body.mp #icons::-webkit-scrollbar { display: none; }
/* App bar overflow cues (Desktop.updateDockCue): a fade with a gold arrow at whichever end has more icons */
.dock-cue { display: none; }
body.m .dock-cue { display: block; position: absolute; z-index: 5; padding: 0; border: 0; cursor: pointer; }
body.m .dock-cue::after { content: ''; position: absolute; left: 50%; top: 50%; border: 7px solid transparent; }
body.mp .dock-cue { bottom: 0; height: calc(var(--navh) - 3px); width: 34px; }
body.mp .dock-cue.start { left: 0; background: linear-gradient(90deg, #0a1228 30%, rgba(10, 18, 40, 0)); }
body.mp .dock-cue.end { right: 0; background: linear-gradient(270deg, #0a1228 30%, rgba(10, 18, 40, 0)); }
body.mp .dock-cue.start::after { margin: -7px 0 0 -12px; border-right-color: var(--gold); }
body.mp .dock-cue.end::after { margin: -7px 0 0 -2px; border-left-color: var(--gold); }
body.ml .dock-cue { left: 0; width: var(--navw); height: 30px; }
body.ml .dock-cue.start { top: calc(var(--tickh) + var(--hudh)); background: linear-gradient(180deg, #0a1228 30%, rgba(10, 18, 40, 0)); }
body.ml .dock-cue.end { bottom: 0; background: linear-gradient(0deg, #0a1228 30%, rgba(10, 18, 40, 0)); }
body.ml .dock-cue.start::after { margin: -12px 0 0 -7px; border-bottom-color: var(--gold); }
body.ml .dock-cue.end::after { margin: -2px 0 0 -7px; border-top-color: var(--gold); }
body.mp #windows { top: calc(var(--tickh) + var(--hudh)); bottom: calc(var(--navh) + var(--ctlh)); }

/* Landscape: app strip | cam sized to the screen height | meters */
body.ml #desktop { grid-template-columns: var(--navw) calc(var(--camw) + 12px) 1fr; grid-template-rows: var(--tickh) var(--hudh) 1fr; }
body.ml #menubar { grid-column: 1 / 4; grid-row: 2; }
body.ml #icons { grid-column: 1; grid-row: 3; overflow: hidden auto; padding: 4px; gap: 4px; background: #0a1228; scrollbar-width: none; }
body.ml #icons::-webkit-scrollbar { display: none; }
body.ml #center { grid-column: 2; grid-row: 3; padding: 4px 6px; gap: 4px; min-width: 0; }
body.ml #widgets { grid-column: 3; grid-row: 3; padding: 4px 6px 4px 0; }
body.ml #sitelog { flex: 1 1 0; min-height: 40px; }
body.ml #ticker { grid-column: 1 / 4; grid-row: 1; height: var(--tickh); }
body.ml #windows { top: calc(var(--tickh) + var(--hudh)); left: var(--navw); bottom: 0; }

/* App icons */
body.m .icon { flex: none; width: 62px; min-height: 44px; padding: 2px; gap: 0; }
body.mp .icon { height: 100%; }
body.ml .icon { width: 100%; height: 50px; }
body.m .icon img { width: 26px; height: 26px; }
body.m .icon .emoji { font-size: 20px; line-height: 26px; height: 26px; }
body.m .icon .icon-svg { width: 26px; height: 26px; }
body.m .icon .fnn-logo { width: 44px; height: 24px; padding: 2px 3px; }
body.m .fnn-bug .fnn-logo { width: 46px; height: 25px; padding: 2px 3px; }
body.m .icon-label { font-size: 13px; }
body.m .icon:hover { background: rgba(255, 255, 255, .05); border-color: transparent; }
.icon.open { background: rgba(255, 211, 74, .22) !important; border-color: var(--gold) !important; }

/* App windows: one full-screen sheet between the menu bar and the app bar */
body.m .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; box-shadow: none; border-width: 2px; }
body.m .win-title { cursor: default; min-height: 34px; padding: 4px 6px 4px 10px; font-size: 10px; }
body.m .wt-close { width: 44px; height: 28px; font-size: 11px; }
body.m .win-body { padding: 8px 8px 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.m .btn { font-size: 9px; padding: 10px 12px; min-height: 38px; }
body.m .btn.sq { padding: 8px 14px; margin-left: 6px; }
body.m .btn.big { font-size: 11px; padding: 14px 18px; }
body.m .card { flex-wrap: wrap; }
body.m .card-btns { flex: 1 1 100%; flex-direction: row; min-width: 0; }
body.m .card-btns > * { flex: 1; }
body.m .card.col .btn { width: 100%; }
body.mp .grid3 { grid-template-columns: 1fr; }
body.m .statrow { flex-wrap: wrap; }
body.m .statrow > div { min-width: 96px; }
body.m .feed { max-height: none; }
body.m .split { min-height: 0; }
body.mp .split { flex-direction: column; }
body.mp .split .list { width: auto; height: 36%; flex: none; }
body.ml .split .list { width: 38%; }

/* Dialogs: URGENT emails, coin flips, results, banners */
body.m #modal-layer { padding: 6px; }
body.m .dialog { width: 100%; max-width: 100%; max-height: 100%; overflow-y: auto; box-shadow: 5px 5px 0 rgba(0, 0, 0, .6); border-width: 3px; }
body.m .d-head { position: sticky; top: 0; z-index: 1; }
body.m .d-body { padding: 10px 12px 12px; font-size: 19px; }
body.m .d-body h2 { font-size: 11px; }
body.m .dialog.banner h2 { font-size: 12px; }
body.m .d-row { gap: 10px; }
body.m .d-row .portrait.lg { width: 56px; height: 56px; }
body.m .choices { margin: 8px 0 6px; gap: 6px; }
body.m .choice { font-size: 19px; padding: 9px 10px; min-height: 44px; }
body.m .otext { font-size: 20px; }
body.m .coin-area { height: 186px; }
body.m .tcoin { width: 104px; height: 104px; }
body.m .roll-verdict { font-size: 14px; }
body.ml .d-hint { display: none; }

/* Title */
body.m #screen-music { right: 6px; top: 6px; padding: 8px 10px; }
body.m #title-screen { overflow: hidden; background-repeat: no-repeat; }
body.m #title-screen .title-box { left: 4px; right: 4px; top: auto; bottom: 4px; width: auto; overflow-y: auto; padding: 12px 14px; background: rgba(5, 9, 24, .88); border: 3px solid var(--gold2); box-shadow: 4px 4px 0 rgba(0, 0, 0, .5); }
body.m #title-screen .title-eyebrow { display: block; font-size: 7px; margin-bottom: 6px; }
body.m #title-screen h1 { position: static; width: auto; margin: 0 0 8px; text-align: left; font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--gold); text-shadow: 3px 3px 0 #000; }
body.m #title-screen h1 br { display: none; }
body.m #title-screen .title-sub { font-size: 19px; max-width: none; margin-bottom: 8px; }
body.m #title-screen .title-how { font-size: 17px; line-height: 1.1; margin-bottom: 12px; }
body.m #title-screen .title-how .mission { font-size: 9px; }
body.m #title-screen .btn.big { width: 100%; font-size: 12px; padding: 14px 16px; }
body.m #title-screen .title-hi { margin-top: 8px; }
body.mp #title-screen { background-size: 100% auto; background-position: top center; }
body.mp #title-cam { width: 100%; height: calc(var(--sw) * .5625); }
body.mp #title-screen .title-box { top: calc(var(--sw) * .625 + 4px); }
body.ml #title-screen { background-size: auto 100%; background-position: left center; }
body.ml #title-cam { width: 62%; height: 100%; object-fit: cover; }
body.ml #title-screen .title-box { left: auto; width: min(46%, 400px); top: 40px; }

/* Advisor picker and funding: scroll, with the action button pinned to the bottom of the picker */
body.m #picker-screen, body.m #funding-screen { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.m .picker-box, body.m .fund-box { width: 100%; padding: 8px; margin: 0 auto; }
body.m .picker-box h2, body.m .fund-box h2 { font-size: 14px; margin-bottom: 6px; line-height: 1.4; }
body.m .picker-box .title-sub, body.m .fund-box .title-sub { font-size: 18px; margin-bottom: 10px; }
body.m #picker-cards { gap: 6px; }
body.mp #picker-cards { grid-template-columns: repeat(2, 1fr); }
body.m .advcard { padding: 8px 6px; }
body.m .advcard .portrait.lg { width: 56px; height: 56px; }
body.m .advcard .perk, body.m .advcard .liab { font-size: 15px; }
body.m .advcard .chip { font-size: 13px; padding: 0 4px; }
body.m .picker-foot { position: sticky; bottom: 0; margin: 8px -8px 0; padding: 8px; gap: 12px; flex-wrap: wrap; background: linear-gradient(rgba(11, 21, 48, 0), #0b1530 35%); }
body.m #picker-screen .btn.big, body.m #funding-screen .btn.big { font-size: 10px; padding: 12px 14px; }
body.mp #fund-cards { grid-template-columns: 1fr; }
body.m #fund-cards { gap: 8px; }
body.m .fund-warn { margin: -4px 0 8px; font-size: 16px; line-height: 1.1; }
body.m .fundcard { padding: 8px 8px 10px; gap: 3px; }
body.m .fundcard:hover { transform: none; }
body.m .fundcard b { font-size: 11px; }
body.m .fundcard i { min-height: 0; font-size: 18px; }
body.m .frange { font-size: 14px; }
body.m .fundcard .ficon { transform: scale(.7); margin: -14px auto -10px; }
body.m .wheel-wrap, body.m #fund-wheel, body.m .coin-wrap, body.m #fund-chart, body.m .phone-wrap { width: var(--wheel); height: var(--wheel); }
body.m .wheel-wrap { margin-top: 18px; }
body.m .fund-side { min-width: 0; }
body.m #fund-scheme p { font-size: 18px; min-width: 0; }
body.m .fr-quip { font-size: 18px; }
body.m .fr-amount b { font-size: 28px; }
body.mp #fund-spin { flex-direction: column; gap: 12px; }
body.mp .fund-side { width: 100%; }
body.mp #fund-result { min-height: 130px; }
body.ml #fund-spin { gap: 16px; }
body.ml .fund-side { width: auto; flex: 1; }
body.ml #fund-result { min-height: 100px; margin: 8px 0; padding: 8px 10px; }
body.ml #fund-scheme .ficon { display: none; }
body.mp .fr-calls { grid-template-columns: 1fr; }
body.m .callbtn i { font-size: 16px; }
body.m .fr-live b { font-size: 26px; }
body.m .fr-news, body.m .fr-line { font-size: 18px; }
body.m .fr-hungry b { font-size: 10px; }
body.m .fr-hungry p { font-size: 16px; }

/* End card */
body.m #end-screen { padding: 6px; }
body.m .end-card { width: 100%; max-height: 100%; border-width: 3px; box-shadow: 5px 5px 0 rgba(0, 0, 0, .6); }
body.m .end-img { height: 100px; }
body.ml .end-img { display: none; }
body.m .end-card h1 { font-size: 15px; margin: 10px 12px 4px; }
body.m .end-card p { font-size: 19px; margin: 4px 14px 8px; }
body.m .end-stats { margin: 8px 10px 12px; }
body.mp .end-stats { grid-template-columns: repeat(2, 1fr); }
body.m .picker-box, body.m .fund-box { padding-top: 40px; }
body.mp .statrow > div { min-width: 130px; }
body.m .statrow .btn.sq { padding: 6px 12px; min-height: 30px; margin-left: 3px; }
body.m .roll-need { font-size: 9px; }
body.ml #fund-spin { padding-left: 10px; }
body.mp .fund-btns { position: sticky; bottom: 0; padding: 8px 0; background: linear-gradient(rgba(18, 12, 2, 0), #120c02 30%); }
body.m .win[data-win=spin] .btn.big { width: 100%; padding: 26px 0; font-size: 16px; margin-top: 8px; }

/* v2.3 phone additions: no room for FNN LIVE in landscape; the new windows are sheets like the others */
body.ml #p-fnn { display: none; }
body.m .grid2 { grid-template-columns: 1fr; }
body.m .phone-head .rp-box { width: 84px; height: 84px; }
body.m .press-tv { width: 100%; margin-top: 0; border-width: 0 0 3px; }
body.m .press-text { font-size: 20px; min-height: 0; }