@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Geist:wght@400;500;600;700;800&family=Pixelify+Sans:wght@400;600;700&family=Lilita+One&family=Share+Tech+Mono&family=Fredoka:wght@500;600;700&family=Oswald:wght@500;700&display=swap');
/* phone skins for the four extra games. Our own art: every skin is a genre, never a copy of one game's UI. */

/* ---------- toon: a chunky cartoon phone for battle-royale islands ---------- */
.bp-layer[data-skin='toon'] {
  --bp-font: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif; --bp-display: 'Lilita One', 'Arial Rounded MT Bold', sans-serif;
  --bp-bg: #1b1240; --bp-card: #2c1f63; --bp-card2: #3e2c8a; --bp-line: rgba(255,255,255,.1); --bp-text: #fff; --bp-dim: #b9abff; --bp-grid: rgba(255,255,255,.08); --bp-tabbg: #21164c;
  --bp-up: #46f08c; --bp-dn: #ff4d6d; --bp-gold: #ffd23f; --bp-accent: #ffd23f;
  --bp-r: 22px; --bp-r2: 16px; --bp-rad: 76px; --bp-srad: 58px;
  --bp-band: linear-gradient(160deg, #fff07a 0%, #ffc21c 38%, #ff8f1c 100%);
  --bp-side: #c7650c; --bp-side2: #1a1033;
  --bp-apptint: radial-gradient(120% 55% at 15% 0%, rgba(150,110,255,.38) 0%, rgba(150,110,255,0) 70%);
  --bp-wall:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M-20 640 Q60 560 150 590 T330 560 L380 780 L-20 780Z' fill='%2337c26b'/%3E%3Cpath d='M-20 690 Q90 640 190 660 T380 640 L380 780 L-20 780Z' fill='%2325a356'/%3E%3Cpath d='M-20 730 Q120 700 220 715 T380 705 L380 780 L-20 780Z' fill='%23f1d48a'/%3E%3Ccircle cx='280' cy='150' r='46' fill='%23fff7c2'/%3E%3C/svg%3E") bottom / 100% auto no-repeat,
    linear-gradient(180deg, #3b7bff 0%, #6fb6ff 45%, #b8e4ff 70%, #ffe2a8 100%);
}
.bp-layer[data-skin='toon'] .bp-phone { padding: 16px; box-shadow: 0 0 0 5px #1a1033, inset 0 3px 0 rgba(255,255,255,.65), inset 0 -5px 0 rgba(140,60,0,.35), 6px 5px 0 0 var(--bp-side), 6px 5px 0 5px #1a1033, -18px 28px 0 rgba(26,16,51,.35); }
.bp-layer[data-skin='toon'] .bp-screen { box-shadow: inset 0 0 0 4px #1a1033; }
.bp-layer[data-skin='toon'] .bp-glass { inset: 16px; background: linear-gradient(120deg, rgba(255,255,255,.22) 0 14%, transparent 14% 100%); box-shadow: inset 0 0 0 4px #1a1033; }
.bp-layer[data-skin='toon'] .bp-key { background: #ff8f1c; box-shadow: 0 0 0 3px #1a1033; width: 7px; right: -8px; }
.bp-layer[data-skin='toon'] .bp-k3 { left: -8px; }
.bp-layer[data-skin='toon'] .bp-hd h1 { font-size: 42px; letter-spacing: .5px; text-shadow: 0 3px 0 #1a1033; }
.bp-layer[data-skin='toon'] .bp-lk-time { font-weight: 400; text-shadow: 0 5px 0 #1a1033; -webkit-text-stroke: 2px #1a1033; }
.bp-layer[data-skin='toon'] .bp-row { border-radius: 16px; }
.bp-layer[data-skin='toon'] .bp-buy, .bp-layer[data-skin='toon'] .bp-size { border-radius: 14px; background: #46f08c; color: #10331e; box-shadow: 0 4px 0 #1e9a52, 0 0 0 2px #1a1033; }
.bp-layer[data-skin='toon'] .bp-buy.bp-done { background: #fff; }
.bp-layer[data-skin='toon'] .bp-btn1 { background: #ffd23f; color: #1a1033; box-shadow: 0 4px 0 #c98f00, 0 0 0 2px #1a1033; border-radius: 16px; }
.bp-layer[data-skin='toon'] .bp-btn2 { background: #5a44c7; box-shadow: 0 4px 0 #3a2a8c, 0 0 0 2px #1a1033; border-radius: 16px; }
.bp-layer[data-skin='toon'] .bp-bagcard { background: linear-gradient(150deg, #5a3cff, #2c1f63); box-shadow: 0 0 0 3px #1a1033, inset 0 2px 0 rgba(255,255,255,.25); border-radius: 22px; }
.bp-layer[data-skin='toon'] .bp-tab.bp-sel i { background: #ffd23f; color: #1a1033; box-shadow: 0 3px 0 #c98f00, 0 0 0 2px #1a1033; }
.bp-layer[data-skin='toon'] .bp-seg { box-shadow: inset 0 0 0 2px #1a1033; }
.bp-layer[data-skin='toon'] .bp-seg button.bp-sel { background: #ffd23f; color: #1a1033; }
.bp-layer[data-skin='toon'] .bp-act, .bp-layer[data-skin='toon'] .bp-note, .bp-layer[data-skin='toon'] .bp-wid { background: rgba(27,18,64,.78); box-shadow: 0 0 0 3px #1a1033; }
.bp-layer[data-skin='toon'] .bp-island { box-shadow: 0 0 0 3px #1a1033, 0 6px 22px rgba(0,0,0,.45); }

/* ---------- tactical: a rugged green-screen PDA for bomb sites ---------- */
.bp-layer[data-skin='tactical'] {
  --bp-font: 'Share Tech Mono', 'Consolas', monospace; --bp-display: 'Share Tech Mono', 'Consolas', monospace;
  --bp-bg: #06120b; --bp-card: #0c2215; --bp-card2: #12321f; --bp-line: rgba(109,255,158,.14); --bp-text: #bfffd3; --bp-dim: #5fae7c; --bp-grid: rgba(109,255,158,.1); --bp-tabbg: #071a0f;
  --bp-up: #6dff9e; --bp-dn: #ff6a4d; --bp-gold: #ffd36b; --bp-accent: #ffb23f;
  --bp-r: 3px; --bp-r2: 2px; --bp-rad: 26px; --bp-srad: 6px;
  --bp-band: linear-gradient(90deg, #1f241b 0 10px, #2e3527 10px calc(100% - 10px), #1a1e16 calc(100% - 10px));
  --bp-side: #151912; --bp-side2: #0b0d09;
  --bp-apptint: radial-gradient(120% 60% at 50% 0%, rgba(109,255,158,.1) 0%, rgba(0,0,0,0) 70%);
  --bp-wall: linear-gradient(rgba(109,255,158,.07) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(109,255,158,.07) 1px, transparent 1px) 0 0 / 24px 24px, radial-gradient(90% 60% at 50% 40%, #0e2a18 0%, #040b06 100%);
}
.bp-layer[data-skin='tactical'] .bp-phone { inset: -26px -14px -34px; padding: 40px 27px 50px;
  box-shadow: inset 0 0 0 3px #11140e, inset 0 2px 0 rgba(255,255,255,.12), 5px 4px 0 -1px var(--bp-side), -18px 26px 30px rgba(0,0,0,.45);
  background-image: radial-gradient(circle at 18px 18px, #4a5240 0 5px, #11140e 5.5px 6.5px, transparent 7px), radial-gradient(circle at calc(100% - 18px) 18px, #4a5240 0 5px, #11140e 5.5px 6.5px, transparent 7px), radial-gradient(circle at 18px calc(100% - 18px), #4a5240 0 5px, #11140e 5.5px 6.5px, transparent 7px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #4a5240 0 5px, #11140e 5.5px 6.5px, transparent 7px), var(--bp-band); }
.bp-layer[data-skin='tactical'] .bp-phone::after { content: 'BRN-7 FIELD UNIT'; position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 11px/1 'Share Tech Mono', monospace; letter-spacing: 3px; color: #7d8a6c; }
.bp-layer[data-skin='tactical'] .bp-glass { inset: 40px 27px 50px; border-radius: 6px; background: linear-gradient(135deg, rgba(255,255,255,.06) 0 22%, transparent 22% 100%); box-shadow: inset 0 0 0 2px #000, inset 0 0 40px rgba(0,0,0,.6); }
.bp-layer[data-skin='tactical'] .bp-screen { text-shadow: 0 0 6px rgba(109,255,158,.45); }
.bp-layer[data-skin='tactical'] .bp-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.bp-layer[data-skin='tactical'] .bp-key { background: #2e3527; width: 8px; right: -10px; border-radius: 2px; }
.bp-layer[data-skin='tactical'] .bp-k3 { left: -10px; }
.bp-layer[data-skin='tactical'] .bp-hd h1 { text-transform: uppercase; font-size: 30px; letter-spacing: 3px; }
.bp-layer[data-skin='tactical'] .bp-hd h1::before { content: '> '; color: var(--bp-accent); }
.bp-layer[data-skin='tactical'] .bp-lk-time { font-weight: 400; letter-spacing: 4px; }
/* no island on the PDA: notifications come up as a green terminal line (opacity/transform only) */
.bp-layer[data-skin='tactical'] .bp-island, .bp-layer[data-skin='tactical'] .bp-island.bp-isl-open { top: 44px; width: 334px; height: 62px; margin-left: -167px; border-radius: 2px;
  background: rgba(3,14,7,.96); box-shadow: inset 0 0 0 1px var(--bp-up), 0 0 18px rgba(109,255,158,.22); transition: opacity .16s, transform .22s ease-out; }
.bp-layer[data-skin='tactical'] .bp-island:not(.bp-isl-open) { opacity: 0; transform: translate3d(0,-10px,0); }
.bp-layer.bp-mobile[data-skin='tactical'] .bp-island { top: 8px; }
.bp-layer[data-skin='tactical'] .bp-isl-full b::before { content: '> '; color: var(--bp-accent); }
.bp-layer[data-skin='tactical'] .bp-row { border-radius: 2px; }
.bp-layer[data-skin='tactical'] .bp-row::after { background: rgba(109,255,158,.12); }
.bp-layer[data-skin='tactical'] .bp-buy, .bp-layer[data-skin='tactical'] .bp-size { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--bp-up); }
.bp-layer[data-skin='tactical'] .bp-btn1 { border-radius: 2px; background: var(--bp-accent); color: #140b00; text-transform: uppercase; }
.bp-layer[data-skin='tactical'] .bp-btn2 { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px var(--bp-dim); text-transform: uppercase; }
.bp-layer[data-skin='tactical'] .bp-bagcard { border-radius: 2px; background: #0c2215; box-shadow: inset 0 0 0 1px rgba(255,178,63,.6); }
.bp-layer[data-skin='tactical'] .bp-seg, .bp-layer[data-skin='tactical'] .bp-seg button { border-radius: 2px; }
.bp-layer[data-skin='tactical'] .bp-seg button.bp-sel { background: var(--bp-up); color: #04140a; text-shadow: none; }
.bp-layer[data-skin='tactical'] .bp-tab i { border-radius: 2px; }
.bp-layer[data-skin='tactical'] .bp-tab.bp-sel i { background: var(--bp-up); color: #04140a; box-shadow: 0 0 14px rgba(109,255,158,.5); }
.bp-layer[data-skin='tactical'] .bp-act, .bp-layer[data-skin='tactical'] .bp-note, .bp-layer[data-skin='tactical'] .bp-wid, .bp-layer[data-skin='tactical'] .bp-lk-btn { border-radius: 2px; background: rgba(6,18,11,.85); box-shadow: inset 0 0 0 1px rgba(109,255,158,.3); }
.bp-layer[data-skin='tactical'] .bp-status { color: var(--bp-up); }

/* ---------- obby: a glossy toy phone for plastic-block worlds ---------- */
.bp-layer[data-skin='obby'] {
  --bp-font: 'Fredoka', 'Nunito', system-ui, sans-serif; --bp-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --bp-bg: #f3f6ff; --bp-card: #ffffff; --bp-card2: #e3eaff; --bp-line: rgba(29,42,82,.08); --bp-text: #1d2a52; --bp-dim: #6b79a9; --bp-grid: rgba(29,42,82,.08); --bp-tabbg: #ffffff;
  --bp-up: #12b45a; --bp-dn: #ff3b4f; --bp-gold: #f7a600; --bp-accent: #2f7bff;
  --bp-r: 18px; --bp-r2: 14px; --bp-rad: 46px; --bp-srad: 30px;
  --bp-band: linear-gradient(160deg, #ff7a86 0%, #ff3b4f 40%, #d81f35 100%);
  --bp-side: #a8142a; --bp-side2: #5e0a17;
  --bp-apptint: radial-gradient(120% 55% at 15% 0%, rgba(47,123,255,.12) 0%, rgba(47,123,255,0) 70%);
  --bp-wall: radial-gradient(circle at 12px 12px, rgba(255,255,255,.55) 0 5px, rgba(0,0,0,.12) 5.5px 6.5px, transparent 7px) 0 0 / 24px 24px, linear-gradient(160deg, #2f7bff, #6ab0ff);
}
.bp-layer[data-skin='obby'] .bp-phone { padding: 15px; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(90,0,15,.35), 5px 4px 0 -1px var(--bp-side), -16px 24px 30px rgba(20,30,80,.35); }
.bp-layer[data-skin='obby'] .bp-phone::before { content: ''; position: absolute; left: 70px; right: 70px; top: -9px; height: 12px; border-radius: 6px 6px 0 0;
  background: radial-gradient(ellipse 13px 9px at 50% 100%, #ff5262 0 92%, transparent 100%) 0 0 / 40px 12px repeat-x; filter: drop-shadow(0 -1px 0 rgba(255,255,255,.4)); }
.bp-layer[data-skin='obby'] .bp-glass { inset: 15px; background: linear-gradient(125deg, rgba(255,255,255,.35) 0 10%, transparent 10% 100%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.bp-layer[data-skin='obby'] .bp-key { background: #ff3b4f; }
.bp-layer[data-skin='obby'] .bp-status, .bp-layer[data-skin='obby'] .bp-batt { color: #1d2a52; border-color: rgba(29,42,82,.5); }
.bp-layer[data-skin='obby'] .bp-batt::after { background: rgba(29,42,82,.5); }
.bp-layer[data-skin='obby'] .bp-screen[data-view='lock'] .bp-status, .bp-layer[data-skin='obby'] .bp-screen[data-view='home'] .bp-status { color: #fff; }
.bp-layer[data-skin='obby'] .bp-hd h1 { font-weight: 700; color: #1d2a52; }
.bp-layer[data-skin='obby'] .bp-lk-time { font-weight: 700; text-shadow: 0 4px 0 rgba(20,40,120,.35); }
.bp-layer[data-skin='obby'] .bp-row { background: #fff; box-shadow: 0 2px 0 rgba(29,42,82,.08); border-radius: 16px; height: 54px; }
.bp-layer[data-skin='obby'] .bp-row::after { display: none; }
.bp-layer[data-skin='obby'] .bp-buy, .bp-layer[data-skin='obby'] .bp-size { border-radius: 12px; background: #12b45a; color: #fff; box-shadow: 0 3px 0 #0a7d3d; }
.bp-layer[data-skin='obby'] .bp-btn1 { background: #ff3b4f; color: #fff; box-shadow: 0 3px 0 #b81c2e; border-radius: 14px; }
.bp-layer[data-skin='obby'] .bp-btn2 { background: #2f7bff; color: #fff; box-shadow: 0 3px 0 #1a52b8; border-radius: 14px; }
.bp-layer[data-skin='obby'] .bp-bagcard { background: linear-gradient(150deg, #2f7bff, #6ab0ff); color: #fff; box-shadow: 0 4px 0 #1a52b8; border-radius: 20px; }
.bp-layer[data-skin='obby'] .bp-bagcard .bp-bc-nm small, .bp-layer[data-skin='obby'] .bp-bagcard .bp-bc-r small { color: #e3eeff; }
.bp-layer[data-skin='obby'] .bp-bagcard [data-dir='up'] { color: #fff; }
.bp-layer[data-skin='obby'] .bp-tab { color: #9aa6cc; }
.bp-layer[data-skin='obby'] .bp-tab.bp-sel { color: #1d2a52; }
.bp-layer[data-skin='obby'] .bp-tab.bp-sel i { background: #2f7bff; color: #fff; box-shadow: 0 3px 0 #1a52b8; }
.bp-layer[data-skin='obby'] .bp-tabs { border-top-color: rgba(29,42,82,.08); }
.bp-layer[data-skin='obby'] .bp-homebar { background: rgba(29,42,82,.35); }
.bp-layer[data-skin='obby'] .bp-seg button.bp-sel { background: #2f7bff; color: #fff; }
.bp-layer[data-skin='obby'] .bp-act, .bp-layer[data-skin='obby'] .bp-note, .bp-layer[data-skin='obby'] .bp-wid, .bp-layer[data-skin='obby'] .bp-lk-btn { background: rgba(255,255,255,.88); color: #1d2a52; box-shadow: 0 4px 0 rgba(20,40,120,.25); }
.bp-layer[data-skin='obby'] .bp-act-nm small, .bp-layer[data-skin='obby'] .bp-note-tx small, .bp-layer[data-skin='obby'] .bp-wid small { color: #6b79a9; }
.bp-layer[data-skin='obby'] .bp-island { background: #1d2a52; }
.bp-layer[data-skin='obby'] .bp-ch-box { background: #fff; }

/* ---------- survival: a battered metal walkie-phone for rusty islands ---------- */
.bp-layer[data-skin='survival'] {
  --bp-font: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --bp-display: 'Oswald', 'Arial Narrow', sans-serif;
  --bp-bg: #14100c; --bp-card: #221a13; --bp-card2: #30251b; --bp-line: rgba(241,227,207,.08); --bp-text: #f1e3cf; --bp-dim: #a58d72; --bp-grid: rgba(241,227,207,.07); --bp-tabbg: #1a140f;
  --bp-up: #a4d96e; --bp-dn: #e4583b; --bp-gold: #eaa43c; --bp-accent: #d8752b;
  --bp-r: 6px; --bp-r2: 4px; --bp-rad: 28px; --bp-srad: 14px;
  --bp-band: radial-gradient(circle at 30% 20%, rgba(255,170,90,.25), transparent 40%), linear-gradient(115deg, #6e5a4a 0%, #4a3a2e 25%, #8a5a3a 46%, #3b2f26 70%, #6b4c36 100%);
  --bp-side: #3a2a1e; --bp-side2: #1a120c;
  --bp-apptint: radial-gradient(120% 55% at 15% 0%, rgba(216,117,43,.18) 0%, rgba(0,0,0,0) 70%);
  --bp-wall:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23140d08'%3E%3Cpath d='M0 640 L40 600 L90 612 L120 586 L170 600 L230 570 L300 592 L360 580 L360 780 L0 780Z'/%3E%3Crect x='70' y='560' width='70' height='44'/%3E%3Cpath d='M64 562 L105 536 L146 562Z'/%3E%3Crect x='240' y='548' width='56' height='50'/%3E%3C/g%3E%3Ccircle cx='190' cy='610' r='6' fill='%23ffb35a'/%3E%3C/svg%3E") bottom / 100% auto no-repeat,
    linear-gradient(180deg, #2b2233 0%, #6a3b3a 40%, #c4643a 72%, #e89a4f 100%);
}
.bp-layer[data-skin='survival'] .bp-phone { padding: 18px;
  background-image: radial-gradient(circle at 14px 14px, #2a2018 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 14px) 14px, #2a2018 0 3px, transparent 3.5px), radial-gradient(circle at 14px calc(100% - 14px), #2a2018 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #2a2018 0 3px, transparent 3.5px), var(--bp-band);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,220,180,.25), 5px 4px 0 -1px var(--bp-side), -18px 26px 34px rgba(20,8,0,.5); }
.bp-layer[data-skin='survival'] .bp-phone::before { content: ''; position: absolute; right: 54px; top: -46px; width: 14px; height: 54px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #2a2018, #4a3a2e, #2a2018); }
.bp-layer[data-skin='survival'] .bp-glass { inset: 18px; border-radius: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780'%3E%3Cg stroke='rgba(255,255,255,0.32)' stroke-width='1.2' fill='none'%3E%3Cpath d='M300 40 L262 120 L282 180 L236 260'/%3E%3Cpath d='M262 120 L210 140 L170 128'/%3E%3Cpath d='M282 180 L330 210'/%3E%3Cpath d='M236 260 L246 330'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, linear-gradient(128deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 30%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.45); }
.bp-layer[data-skin='survival'] .bp-key { background: linear-gradient(90deg, #3b2f26, #6b4c36); }
.bp-layer[data-skin='survival'] .bp-hd h1 { text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 36px; }
.bp-layer[data-skin='survival'] .bp-lk-time { font-weight: 700; }
.bp-layer[data-skin='survival'] .bp-row { border-radius: 6px; }
.bp-layer[data-skin='survival'] .bp-buy, .bp-layer[data-skin='survival'] .bp-size { border-radius: 4px; background: rgba(164,217,110,.14); }
.bp-layer[data-skin='survival'] .bp-btn1 { border-radius: 4px; background: var(--bp-accent); color: #1a0d03; text-transform: uppercase; font-weight: 700; }
.bp-layer[data-skin='survival'] .bp-btn2 { border-radius: 4px; text-transform: uppercase; }
.bp-layer[data-skin='survival'] .bp-bagcard { border-radius: 8px; background: linear-gradient(140deg, #3a2414, #1c140e); box-shadow: inset 0 0 0 1px rgba(216,117,43,.45); }
.bp-layer[data-skin='survival'] .bp-tab.bp-sel i { background: var(--bp-accent); color: #1a0d03; box-shadow: 0 0 14px rgba(216,117,43,.5); }
.bp-layer[data-skin='survival'] .bp-seg button.bp-sel { background: #3b2d20; }
.bp-layer[data-skin='survival'] .bp-act, .bp-layer[data-skin='survival'] .bp-note, .bp-layer[data-skin='survival'] .bp-wid { border-radius: 8px; background: rgba(20,14,10,.78); }

/* rug call text stays light on the red call screen in skins with dark text */
.bp-layer[data-skin='blocky'] .bp-call, .bp-layer[data-skin='obby'] .bp-call { color: #fff; }
.bp-layer[data-skin='blocky'] .bp-call p, .bp-layer[data-skin='obby'] .bp-call p { color: #ffc9cf; }
.bp-layer[data-skin='blocky'] .bp-call-lt, .bp-layer[data-skin='obby'] .bp-call-lt { color: #f3b3ba; }
.bp-layer[data-skin='blocky'] .bp-call-loss { color: #ff6a5e; text-shadow: 4px 4px 0 #3a0806; }
/* burner phone. every class is bp- (phone) or bn- (banners). */
.bp-layer {
  --bp-up: #2BE07A; --bp-dn: #E8233A; --bp-gold: #FFC23D; --bp-accent: #FF5A1F;
  --bp-bg: #0d0b10; --bp-card: #1b1821; --bp-card2: #27232f; --bp-line: rgba(255,255,255,.07);
  --bp-text: #fff; --bp-dim: #8f8b99; --bp-grid: rgba(255,255,255,.07); --bp-tabbg: rgba(13,11,16,.95);
  --bp-font: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bp-display: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --bp-r: 20px; --bp-r2: 12px; --bp-rad: 60px; --bp-srad: 48px;
  --bp-band: linear-gradient(115deg, #fbe7d4 0%, #b9a294 18%, #6f625c 42%, #d8c3b2 64%, #8d7a70 82%, #f0dccb 100%);
  --bp-env: 255, 170, 120;
  --bp-wall:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 780' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23170d1f'%3E%3Cpath d='M0 640h22v-70h18v-30h16v50h20v-96h26v40h12v-62h30v80h14v-40h22v120h18v-150h34v70h16v-34h24v74h14v-58h26v96h20v-44h28V780H0z' opacity='.92'/%3E%3Cpath d='M44 780V520c0-30 3-60 6-90M48 432c-14-10-30-8-40 2M48 432c10-16 28-20 40-14M48 432c-2-14-12-24-24-26M48 432c6 4 22 6 30 18' stroke='%23170d1f' stroke-width='5' fill='none'/%3E%3Cpath d='M312 780V560c0-26-2-50-6-76M306 486c12-12 30-12 40-2M306 486c-10-14-28-18-40-10M306 486c4-14 14-22 26-22M306 486c-8 4-22 8-28 20' stroke='%23170d1f' stroke-width='5' fill='none'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% auto no-repeat,
    radial-gradient(70% 34% at 50% 74%, rgba(255,214,140,.95) 0%, rgba(255,158,94,.6) 30%, rgba(255,158,94,0) 70%),
    linear-gradient(180deg, #2a1846 0%, #6b3fa0 26%, #e2566d 56%, #ff9e5e 76%, #ffc58a 100%);
  position: absolute; inset: 0; pointer-events: none; perspective: 1900px; perspective-origin: 80% 85%;
  font-family: var(--bp-font); -webkit-font-smoothing: antialiased; z-index: 10;
}
.bp-layer *, .bp-layer *::before, .bp-layer *::after { box-sizing: border-box; }
.bp-layer button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bp-layer [hidden] { display: none !important; }

/* ---------- the rig: hand + phone ---------- */
.bp-rig { position: absolute; right: var(--bp-right, 80px); bottom: -14px; width: 386px; height: 806px; transform-origin: 72% 96%; pointer-events: auto; will-change: transform; transform: translate3d(0, 760px, 0); }
.bp-hand-wrap { position: absolute; left: -86px; top: 0; width: 643px; height: 1060px; pointer-events: none; }
.bp-hand-wrap svg { width: 100%; height: 100%; display: block; }
.bp-front { z-index: 3; }
.bp-phone { position: absolute; inset: 0; border-radius: var(--bp-rad); padding: 13px; background: var(--bp-band); z-index: 2;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 0 0 4px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4),
    4px 2px 0 -1px var(--bp-side, #9c877a), 7px 4px 0 -2px var(--bp-side2, #5f5048), -22px 34px 46px rgba(30,8,0,.42), -6px 10px 14px rgba(30,8,0,.3); }
.bp-key { position: absolute; right: -4px; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #8f7c70, #d9c4b3); }
.bp-k1 { top: 190px; height: 70px; } .bp-k2 { top: 280px; height: 110px; } .bp-k3 { left: -4px; right: auto; top: 220px; height: 52px; background: linear-gradient(90deg, #d9c4b3, #8f7c70); }
.bp-glass { position: absolute; inset: 13px; border-radius: var(--bp-srad); pointer-events: none; z-index: 30;
  background: linear-gradient(128deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 24%, rgba(255,255,255,0) 40%, rgba(var(--bp-env),.07) 72%, rgba(255,255,255,.1) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.bp-edge { position: absolute; inset: 0; border-radius: var(--bp-rad); pointer-events: none; opacity: 0; z-index: 31; box-shadow: 0 0 0 2px var(--bp-accent), 0 0 34px 4px rgba(255,90,31,.75); }
.bp-edge-go { animation: bp-edge 700ms ease-out 1; }
.bp-edge-red { box-shadow: 0 0 0 2px var(--bp-dn), 0 0 44px 8px rgba(232,35,58,.85); animation: bp-edge-r 2600ms ease-in-out 1; }
@keyframes bp-edge { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bp-edge-r { 0%, 100% { opacity: 0; } 10%, 30%, 50%, 70% { opacity: 1; } 20%, 40%, 60% { opacity: .35; } }

/* ---------- screen ---------- */
.bp-screen { position: relative; width: 360px; height: 780px; border-radius: var(--bp-srad); overflow: hidden; background: var(--bp-bg); color: var(--bp-text); isolation: isolate; user-select: none; -webkit-user-select: none; }
.bp-screen::before { content: ''; position: absolute; inset: 0; background: var(--bp-apptint, radial-gradient(120% 55% at 15% 0%, rgba(255,158,94,.22) 0%, rgba(226,86,109,.1) 38%, rgba(107,63,160,0) 72%)); pointer-events: none; }
.bp-wall { position: absolute; inset: 0; background: var(--bp-wall); opacity: 0; transition: opacity .4s ease; }
.bp-screen[data-view='lock'] .bp-wall, .bp-screen[data-view='home'] .bp-wall { opacity: 1; }
.bp-screen[data-view='camera'] .bp-wall { opacity: 0; }
.bp-views { position: absolute; inset: 0; }
.bp-view { position: absolute; inset: 0; padding: 54px 16px 92px; opacity: 0; pointer-events: none; visibility: hidden; display: flex; flex-direction: column; }
.bp-view.bp-on { opacity: 1; pointer-events: auto; visibility: visible; }
.bp-view.bp-on.bp-enter { animation: bp-in 300ms cubic-bezier(.2,.9,.3,1.1) 1; }
@keyframes bp-in { from { opacity: 0; transform: scale(.93) translateY(10px); } to { opacity: 1; transform: none; } }
.bp-lock.bp-on.bp-enter { animation: bp-fade 380ms ease 1; }
.bp-view.bp-on { z-index: 2; }
.bp-view.bp-on.bp-enter.bp-zoom { transform-origin: var(--ox, 50%) var(--oy, 60%); animation: bp-zoom 400ms cubic-bezier(.2,.9,.25,1) 1; }
@keyframes bp-zoom { from { opacity: 0; transform: scale(.16); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
.bp-view.bp-leave { visibility: visible; z-index: 1; pointer-events: none; animation: bp-out 240ms ease 1 forwards; }
@keyframes bp-out { from { opacity: 1; transform: none; filter: brightness(1); } to { opacity: 0; transform: scale(.93); filter: brightness(.6); } }
.bp-wall { transform: scale(1.06); will-change: transform; }
.bp-spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; pointer-events: none; z-index: 5; background: radial-gradient(circle at 35% 35%, #fff6b0, var(--bp-gold)); box-shadow: 0 0 8px var(--bp-gold); }
@keyframes bp-fade { from { opacity: 0; } to { opacity: 1; } }

.bp-status { position: absolute; top: 0; left: 0; right: 0; height: 52px; padding: 16px 30px 0 34px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; z-index: 40; pointer-events: none; font-variant-numeric: tabular-nums; }
.bp-right { display: flex; align-items: center; gap: 6px; }
.bp-sig { width: 18px; height: 12px; fill: currentColor; display: block; }
.bp-batt { position: relative; width: 26px; height: 12.5px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 4px; padding: 1.5px; }
.bp-batt::after { content: ''; position: absolute; right: -4px; top: 3px; width: 2px; height: 4.5px; border-radius: 0 2px 2px 0; background: rgba(255,255,255,.55); }
.bp-batt-fill { display: block; height: 100%; background: currentColor; border-radius: 2px; transform-origin: left; }
.bp-batt.bp-low .bp-batt-fill { background: var(--bp-dn); }
.bp-batt.bp-charging .bp-batt-fill { background: var(--bp-up); }
.bp-batt-bolt { position: absolute; inset: -1px 0 0; display: none; place-items: center; color: #0b0a09; }
.bp-batt-bolt svg { width: 9px; height: 9px; fill: #0b0a09; stroke: none; }
.bp-batt.bp-charging .bp-batt-bolt { display: grid; }

/* dynamic island */
.bp-island { position: absolute; top: 11px; left: 50%; width: 114px; height: 34px; margin-left: -57px; border-radius: 20px; background: #000; z-index: 50; overflow: hidden;
  transition: width .38s cubic-bezier(.3,1.3,.5,1), height .38s cubic-bezier(.3,1.3,.5,1), margin-left .38s cubic-bezier(.3,1.3,.5,1), border-radius .38s; box-shadow: 0 6px 22px rgba(0,0,0,.45); pointer-events: none; }
.bp-island.bp-isl-live { width: 176px; margin-left: -88px; }
.bp-island.bp-isl-open { width: 334px; height: 66px; margin-left: -167px; border-radius: 33px; }
.bp-island.bp-isl-tap { pointer-events: auto; cursor: pointer; }
.bp-isl-compact, .bp-isl-full { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .2s; }
.bp-isl-compact { padding: 0 12px 0 6px; justify-content: space-between; opacity: 0; }
.bp-isl-live .bp-isl-compact { opacity: 1; }
.bp-isl-open .bp-isl-compact { opacity: 0; }
.bp-isl-pct { font: 900 17px var(--bp-display); letter-spacing: .3px; }
.bp-isl-full { padding: 0 16px 0 14px; gap: 10px; opacity: 0; }
.bp-isl-open .bp-isl-full { opacity: 1; transition-delay: .12s; }
.bp-isl-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #1d1b22; color: var(--bp-accent); overflow: hidden; }
.bp-isl-icon svg { width: 20px; height: 20px; }
.bp-isl-icon .bp-pfp { border-radius: 50%; }
.bp-isl-txt { min-width: 0; flex: 1; }
.bp-isl-txt b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-isl-txt small { display: block; font-size: 12px; color: #a3a0ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-isl-side { font: 900 22px var(--bp-display); letter-spacing: .3px; white-space: nowrap; }
.bp-island[data-tone='gold'] .bp-isl-icon { color: var(--bp-gold); }
.bp-island[data-tone='dn'] .bp-isl-icon { color: var(--bp-dn); }
.bp-layer [data-dir='up'] { color: var(--bp-up); }
.bp-layer [data-dir='dn'] { color: var(--bp-dn); }
.bp-isl-side[data-dir='gold'] { color: var(--bp-gold); }

/* coin picture */
.bp-pfp { position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 11px; overflow: hidden; color: rgba(255,255,255,.92); }
.bp-pfp em { font-style: normal; font-weight: 800; font-size: 45%; }
.bp-pfp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.bp-pfp.bp-pfp-ok img { opacity: 1; }

/* tab bar + home bar */
.bp-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; padding: 9px 12px 0; display: flex; background: var(--bp-tabbg); border-top: 1px solid var(--bp-line); z-index: 20; transition: transform .3s cubic-bezier(.3,.9,.3,1), opacity .25s; }
.bp-tabs.bp-hide { transform: translateY(100%); opacity: 0; pointer-events: none; }
.bp-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 550; color: #77737f; }
.bp-tab i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.bp-tab svg { width: 22px; height: 22px; }
.bp-tab.bp-sel { color: #fff; }
.bp-tab.bp-sel i { background: var(--bp-accent); color: #170700; box-shadow: 0 0 16px rgba(255,90,31,.55); }
.bp-homebar { position: absolute; left: 50%; bottom: 8px; width: 124px; height: 5px; margin-left: -62px; border-radius: 3px; background: rgba(255,255,255,.6); z-index: 45; cursor: pointer; }
.bp-homebar::before { content: ''; position: absolute; inset: -12px -10px; }

/* shared bits */
.bp-hd { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 4px 10px; }
.bp-hd h1 { margin: 0; font: 900 40px/1 var(--bp-display); letter-spacing: .4px; }
.bp-hd-r { text-align: right; }
.bp-hd-r b { display: block; font: 900 24px/1 var(--bp-display); }
.bp-hd-r small { font-size: 12px; }
.bp-live { font-size: 12px; color: var(--bp-dim); display: flex; align-items: center; gap: 6px; }
.bp-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bp-up); box-shadow: 0 0 8px var(--bp-up); }
.bp-live.bp-off::before { background: #777; box-shadow: none; }
.bp-sub { margin: 16px 4px 6px; font-size: 12px; font-weight: 600; color: var(--bp-dim); text-transform: lowercase; letter-spacing: .3px; }
.bp-segrow { display: flex; gap: 8px; margin-bottom: 12px; }
.bp-seg { flex: 1; display: flex; background: var(--bp-card); border-radius: 12px; padding: 3px; }
.bp-seg button { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 8px 0; color: var(--bp-dim); border-radius: 9px; transition: background .2s, color .2s; }
.bp-seg button.bp-sel { background: var(--bp-card2); color: var(--bp-text); }
.bp-seg-sm button { padding: 5px 0; font-size: 12px; }
.bp-size { display: flex; align-items: center; gap: 3px; padding: 0 11px; border-radius: 12px; background: rgba(43,224,122,.12); color: var(--bp-up); font-weight: 700; font-size: 14px; }
.bp-size svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.bp-btn1, .bp-btn2 { padding: 10px 0; border-radius: 12px; font-weight: 700; font-size: 14px; text-align: center; transition: transform .12s; }
.bp-btn1 { background: var(--bp-accent); color: #170700; }
.bp-btn2 { background: var(--bp-card2); }
.bp-btn1:active, .bp-btn2:active, .bp-buy:active, .bp-ch-btns button:active { transform: scale(.95); }
.bp-prog { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; }
.bp-prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--bp-accent), var(--bp-gold)); transform-origin: left; transform: scaleX(0); transition: transform .6s ease; }
.bp-spark { display: block; width: 100%; height: 100%; overflow: visible; }
.bp-spark-l { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke: var(--bp-up); }
.bp-spark-a { fill: rgba(43,224,122,.16); stroke: none; }
.bp-spark-b { stroke: rgba(255,255,255,.28); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
[data-dir='dn'] > .bp-spark .bp-spark-l { stroke: var(--bp-dn); }
[data-dir='dn'] > .bp-spark .bp-spark-a { fill: rgba(232,35,58,.14); }

/* ---------- lock ---------- */
.bp-lock { padding: 70px 16px 30px; align-items: stretch; text-align: center; cursor: pointer; }
.bp-lock.bp-unlocking { animation: bp-unlock 400ms cubic-bezier(.5,0,.7,.4) 1 forwards; visibility: visible; opacity: 1; }
@keyframes bp-unlock { to { transform: translateY(-110%); opacity: .2; } }
.bp-lk-date { font-size: 16px; font-weight: 600; opacity: .9; text-shadow: 0 1px 8px rgba(40,10,40,.4); }
.bp-lk-time { font: 900 104px/1 var(--bp-display); letter-spacing: 1px; margin: 2px 0 18px; text-shadow: 0 2px 22px rgba(60,10,50,.35); font-variant-numeric: tabular-nums; }
.bp-lk-acts { display: flex; flex-direction: column; gap: 9px; }
.bp-act { text-align: left; padding: 11px 13px 6px; border-radius: 22px; background: rgba(16,10,22,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.bp-act-top { display: flex; align-items: center; gap: 10px; }
.bp-act-top .bp-pfp { border-radius: 10px; }
.bp-act-nm { min-width: 0; flex: 1; }
.bp-act-nm b { display: block; font-size: 15px; font-weight: 700; }
.bp-act-nm small { display: block; font-size: 11.5px; color: #c9c1cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-act-big { font: 900 30px/1 var(--bp-display); letter-spacing: .3px; }
.bp-act-spark { height: 30px; margin-top: 4px; }
.bp-act-hot .bp-act-nm small { color: var(--bp-gold); }
.bp-lk-notes { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.bp-note { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 18px; background: rgba(16,10,22,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.bp-note-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #1d1b22; color: var(--bp-accent); overflow: hidden; }
.bp-note-ic svg { width: 17px; height: 17px; }
.bp-note-tx { flex: 1; min-width: 0; }
.bp-note-tx b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-note-tx small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; line-height: 1.3; color: #b9b2bf; overflow: hidden; }
.bp-note time { font-size: 11px; color: #9a93a0; }
.bp-lk-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 8px; }
.bp-lk-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,10,22,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.bp-lk-btn svg { width: 22px; height: 22px; }
.bp-lk-hint { font-size: 13px; font-weight: 600; opacity: .8; text-align: center; line-height: 1.25; padding: 0 6px; }

/* ---------- home ---------- */
.bp-home { padding: 64px 22px 30px; }
.bp-home-wids { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bp-wid { height: 150px; border-radius: 26px; padding: 14px; text-align: left; display: flex; flex-direction: column; background: rgba(16,10,22,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); cursor: pointer; }
.bp-wid > span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #ffb27a; }
.bp-wid-worth b { margin-top: auto; font: 900 32px/1 var(--bp-display); }
.bp-wid small { font-size: 11.5px; margin-top: 4px; color: #d6cfd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-wid-new .bp-wid-pf { margin: 10px 0 6px; }
.bp-wid-new b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.bp-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 550; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.bp-icon i { width: 62px; height: 62px; border-radius: 17px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(30,6,30,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.bp-icon svg { width: 30px; height: 30px; }
.bp-icon-pump i { background: linear-gradient(160deg, #ff8a4c, #ff3d1f); }
.bp-icon-chart i { background: linear-gradient(160deg, #3fe58f, #11a35a); }
.bp-icon-bags i { background: linear-gradient(160deg, #ffd25e, #f08a0c); }
.bp-icon-wallet i { background: linear-gradient(160deg, #8a7bff, #4b34d6); }
.bp-icon-camera i { background: linear-gradient(160deg, #5a5966, #2b2a31); }
.bp-dock { margin-top: auto; display: flex; justify-content: space-around; padding: 14px 10px; border-radius: 30px; background: rgba(255,255,255,.16); }

/* ---------- pump ---------- */
.bp-bagcard { border-radius: var(--bp-r); padding: 13px 14px 12px; margin-bottom: 10px; background: linear-gradient(140deg, #2b1a14, #1a1118); box-shadow: inset 0 0 0 1px rgba(255,90,31,.35); cursor: pointer; flex: none; }
.bp-bagcard.bp-none { display: none; }
.bp-bc-row { display: flex; align-items: center; gap: 10px; }
.bp-bc-nm { min-width: 0; flex: 1; }
.bp-bc-nm b { display: block; font-size: 15px; font-weight: 700; }
.bp-bc-nm small { display: block; font-size: 12px; color: #a59c97; }
.bp-bc-r { text-align: right; }
.bp-bc-big { display: block; font: 900 30px/1 var(--bp-display); letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.bp-bc-r small { font-size: 12px; color: #d9cfc8; }
.bp-bc-spark { height: 40px; margin-top: 8px; }
.bp-bc-act { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 8px; margin-top: 9px; }
.bp-list { position: relative; flex: 1; min-height: 0; overflow: hidden; contain: strict; margin: 0 -6px; }
.bp-empty { padding: 30px 10px; text-align: center; color: var(--bp-dim); font-size: 13px; }
.bp-row { position: absolute; left: 0; right: 0; top: 0; height: 58px; padding: 0 6px; display: flex; align-items: center; gap: 10px; border-radius: 14px; cursor: pointer;
  transition: transform .42s cubic-bezier(.25,1,.35,1), opacity .3s; will-change: transform; }
.bp-row::after { content: ''; position: absolute; left: 54px; right: 6px; bottom: 0; height: 1px; background: var(--bp-line); }
.bp-row.bp-out { opacity: 0; }
.bp-row-nm { min-width: 0; flex: 1; }
.bp-row-nm b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-row-nm small { display: block; font-size: 12px; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bp-row-m { text-align: right; font-variant-numeric: tabular-nums; min-width: 62px; }
.bp-row-m b { display: block; font-size: 13.5px; font-weight: 650; }
.bp-row-m small { display: block; font-size: 11px; color: var(--bp-up); font-weight: 550; }
.bp-row-m .bp-prog { display: none; width: 62px; margin: 3px 0 0 auto; }
.bp-tab-bonding .bp-row-m .bp-prog { display: block; }
.bp-tab-bonding .bp-row-m small { color: var(--bp-gold); }
.bp-row.bp-held .bp-row-nm b::after { content: ' · held'; color: var(--bp-accent); font-weight: 600; font-size: 11px; }
.bp-row.bp-copy .bp-row-nm small::before { content: 'copy · '; color: var(--bp-gold); font-weight: 650; }
.bp-row-nm small[data-n]::before { content: '×' attr(data-n) ' · '; color: var(--bp-gold); font-weight: 650; }
.bp-row.bp-rugged > :not(.bp-stamp) { opacity: .45; }
.bp-stamp { position: absolute; right: 64px; top: 50%; margin-top: -13px; height: 26px; padding: 0 8px; display: grid; place-items: center; font: 900 17px/1 var(--bp-display); letter-spacing: 1.5px;
  border: 2.5px solid currentColor; border-radius: 5px; transform: rotate(-9deg); pointer-events: none; animation: bp-stamp 220ms cubic-bezier(.2,.9,.3,1.2) 1 both; }
.bp-stamp-rug { color: var(--bp-dn); background: rgba(40,4,8,.82); }
.bp-stamp-grad { color: var(--bp-gold); background: rgba(40,28,4,.82); }
@keyframes bp-stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.8); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
.bp-row.bp-rugged .bp-row-m small { color: var(--bp-dn); }
.bp-buy { position: relative; width: 54px; height: 34px; border-radius: 11px; background: rgba(43,224,122,.14); color: var(--bp-up); font-weight: 700; font-size: 13.5px; display: grid; place-items: center; transition: transform .12s, background .2s; }
.bp-buy i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.bp-buy i svg { width: 20px; height: 20px; }
.bp-buy.bp-done { background: var(--bp-up); color: #052a14; }
.bp-buy.bp-done i { opacity: 1; transform: none; }
.bp-buy.bp-done span { opacity: 0; }

/* ---------- chart ---------- */
.bp-chart { padding-top: 56px; }
.bp-ch-hd { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.bp-backbtn { width: 32px; height: 40px; margin-left: -6px; display: grid; place-items: center; color: var(--bp-dim); }
.bp-backbtn svg { width: 22px; height: 22px; }
.bp-ch-nm { min-width: 0; flex: 1; }
.bp-ch-nm b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-ch-nm small { display: block; font-size: 12px; color: var(--bp-dim); white-space: nowrap; }
.bp-ch-r { text-align: right; }
.bp-ch-mc { display: block; font: 900 30px/1 var(--bp-display); letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.bp-ch-chg { font-size: 11.5px; font-weight: 600; }
.bp-ch-tfrow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bp-ch-tfrow .bp-seg { flex: none; width: 150px; }
.bp-ch-note { font-size: 11px; color: var(--bp-dim); }
.bp-ch-box { height: 196px; margin: 0 -4px; border-radius: 14px; background: rgba(255,255,255,.025); }
.bp-ch-cv { display: block; width: 328px; height: 196px; touch-action: none; }
.bp-ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.bp-ch-stat { padding: 7px 6px; border-radius: 11px; background: var(--bp-card); text-align: center; }
.bp-ch-stat b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-ch-stat small { display: block; font-size: 10px; color: var(--bp-dim); margin-top: 1px; }
.bp-ch-prog { margin: 8px 2px 4px; }
.bp-tape { display: flex; flex-direction: column; margin-top: 4px; min-height: 0; }
.bp-tr { display: grid; grid-template-columns: 34px 1fr 54px 40px 30px; align-items: center; gap: 6px; height: 21px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bp-tr span { font-weight: 700; }
.bp-tr-b span, .bp-tr-b b { color: var(--bp-up); } .bp-tr-s span, .bp-tr-s b { color: var(--bp-dn); }
.bp-tr b { font-weight: 600; }
.bp-tr em { font-style: normal; color: var(--bp-dim); text-align: right; }
.bp-tr small, .bp-tr time { color: var(--bp-dim); text-align: right; font-size: 10.5px; }
.bp-tr-none { font-size: 12px; color: var(--bp-dim); padding: 6px 2px; }
.bp-ch-act { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.bp-ch-pos { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--bp-dim); padding: 0 2px; }
.bp-ch-pos b { color: var(--bp-text); font-size: 13px; }
.bp-ch-pos em { font-style: normal; margin-left: auto; font: 900 18px var(--bp-display); }
.bp-ch-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bp-ch-btns button { padding: 6px 0 7px; border-radius: 12px; text-align: center; transition: transform .12s; }
.bp-ch-btns small { display: block; font-size: 10px; font-weight: 600; opacity: .75; }
.bp-ch-btns b { display: block; font-size: 14px; font-weight: 750; }
.bp-ch-buys button { background: rgba(43,224,122,.15); color: var(--bp-up); }
.bp-ch-sells { display: none; }
.bp-holding .bp-ch-sells { display: grid; }
.bp-ch-sells button { background: rgba(255,90,31,.16); color: #ff8a5c; }
.bp-ch-sells button:last-child { background: var(--bp-accent); color: #170700; }
.bp-chart.bp-rugged .bp-ch-mc { color: var(--bp-dn); }
/* a rugged coin's chart carries the stamp too, top-right where a dead chart is empty */
.bp-chart.bp-rugged .bp-ch-box { position: relative; }
.bp-chart.bp-rugged .bp-ch-box::after { content: 'RUGGED'; position: absolute; right: 64px; top: 34px; height: 26px; padding: 0 8px; display: grid; place-items: center; font: 900 17px/1 var(--bp-display); letter-spacing: 1.5px;
  color: var(--bp-dn); background: rgba(40,4,8,.82); border: 2.5px solid currentColor; border-radius: 5px; transform: rotate(-9deg); pointer-events: none; animation: bp-stamp 220ms cubic-bezier(.2,.9,.3,1.2) 1 both; }

/* ---------- bags ---------- */
.bp-bags { display: flex; flex-direction: column; gap: 8px; }
.bp-bg { position: relative; border-radius: 16px; overflow: hidden; background: var(--bp-dn); flex: none; }
.bp-bg-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; font-weight: 800; color: #fff; opacity: 0; }
.bp-bg-front { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--bp-card); transition: transform .3s cubic-bezier(.3,1,.4,1); touch-action: pan-y; cursor: grab; }
.bp-bg-nm { min-width: 0; flex: 1; }
.bp-bg-nm b { display: block; font-size: 15px; font-weight: 700; }
.bp-bg-nm small { display: block; font-size: 11.5px; color: var(--bp-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-bg-r { text-align: right; }
.bp-bg-big { display: block; font: 900 24px/1 var(--bp-display); font-variant-numeric: tabular-nums; }
.bp-bg-r small { font-size: 11px; color: var(--bp-dim); white-space: nowrap; }
.bp-bg.bp-rugged .bp-bg-front { background: linear-gradient(90deg, rgba(232,35,58,.18), var(--bp-card) 60%); }
.bp-bags-empty { text-align: center; padding: 34px 18px 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.bp-bags-empty b { font: 900 28px var(--bp-display); }
.bp-bags-empty small { font-size: 13px; color: var(--bp-dim); line-height: 1.4; }
.bp-bags-empty .bp-btn1 { padding: 10px 26px; margin-top: 6px; }
.bp-hist { display: flex; flex-direction: column; overflow: hidden; }
.bp-hrow { display: grid; grid-template-columns: 1fr auto 46px 30px; gap: 8px; align-items: center; height: 30px; font-size: 12.5px; border-bottom: 1px solid var(--bp-line); font-variant-numeric: tabular-nums; }
.bp-hrow b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-hrow em { font-style: normal; font-weight: 700; }
.bp-hrow span, .bp-hrow time { color: var(--bp-dim); text-align: right; font-size: 11.5px; }
.bp-hnone { display: block; color: var(--bp-dim); border: 0; }

/* ---------- wallet ---------- */
.bp-card { position: relative; height: 196px; border-radius: 22px; padding: 18px 20px; overflow: hidden; color: #fff4e6; flex: none;
  background: radial-gradient(120% 90% at 100% 0%, #ffc23d 0%, rgba(255,194,61,0) 45%), linear-gradient(135deg, #ff5a1f 0%, #c42a3a 55%, #3a1446 100%); box-shadow: 0 10px 30px rgba(255,90,31,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.bp-card::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px); }
.bp-card-top { display: flex; justify-content: space-between; align-items: center; }
.bp-card-top span { font: 900 24px var(--bp-display); letter-spacing: 1px; text-transform: uppercase; }
.bp-card-top em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.25); }
.bp-card-l { display: block; margin-top: 14px; font-size: 12px; opacity: .85; }
.bp-card-bal { display: block; font: 900 54px/1 var(--bp-display); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.bp-card-usd { font-size: 12px; opacity: .8; }
.bp-card-num { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; letter-spacing: 1.5px; opacity: .85; }
.bp-card-chip { width: 34px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, #ffe6a6, #c9973a); }
.bp-wl-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.bp-wl-sum > div { padding: 10px 12px; border-radius: 14px; background: var(--bp-card); }
.bp-wl-sum small { display: block; font-size: 11px; color: var(--bp-dim); }
.bp-wl-sum b { font: 900 22px var(--bp-display); }
.bp-wl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.bp-wl-c { padding: 8px 6px; border-radius: 12px; background: var(--bp-card); text-align: center; min-width: 0; }
.bp-wl-c b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-wl-c small { font-size: 10px; color: var(--bp-dim); }
.bp-achs { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-ach { font-size: 11.5px; font-weight: 650; padding: 5px 9px; border-radius: 9px; background: rgba(255,194,61,.14); color: var(--bp-gold); }
.bp-ach-none { background: var(--bp-card); color: var(--bp-dim); }
.bp-reset { margin-top: auto; padding: 11px 0; border-radius: 12px; background: var(--bp-card); color: var(--bp-dim); font-weight: 650; font-size: 13.5px; }

/* ---------- camera ---------- */
.bp-camera { padding: 0; background: #000; }
.bp-cam-vf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bp-cam-top { position: absolute; top: 54px; left: 0; right: 0; display: flex; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--bp-gold); }
.bp-cam-close { position: absolute; left: 18px; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; color: #fff; }
.bp-cam-close svg { width: 16px; height: 16px; }
.bp-cam-reticle { position: absolute; inset: 110px 26px 200px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; pointer-events: none; }
.bp-cam-reticle::before, .bp-cam-reticle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 1.5px solid rgba(255,194,61,.8); border-radius: 50%; }
.bp-cam-reticle::after { width: 4px; height: 4px; margin: -2px; background: var(--bp-gold); border: 0; }
.bp-cam-stamp { position: absolute; left: 22px; right: 22px; bottom: 150px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.5); pointer-events: none; }
.bp-cam-stamp b { display: block; font: 900 30px/1 var(--bp-display); color: var(--bp-gold); -webkit-text-stroke: 1px #0b0a09; letter-spacing: .5px; }
.bp-cam-stamp[data-tone='dn'] b { color: var(--bp-dn); }
.bp-cam-stamp strong { display: block; font-size: 18px; margin-top: 4px; }
.bp-cam-stamp span { display: block; font-size: 14px; font-weight: 700; color: var(--bp-gold); }
.bp-cam-stamp[data-tone='dn'] span { color: var(--bp-dn); }
.bp-cam-stamp small { display: block; font-size: 11.5px; color: #ddd; margin-top: 2px; }
.bp-cam-bar { position: absolute; left: 0; right: 0; bottom: 34px; height: 92px; display: flex; align-items: center; justify-content: space-around; }
.bp-cam-shutter { width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0,0,0,.4), 0 0 0 7px #fff; transition: transform .1s; }
.bp-cam-shutter:active { transform: scale(.9); }
.bp-cam-side { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.14) center / cover no-repeat; display: grid; place-items: center; color: #fff; }
.bp-cam-side svg { width: 22px; height: 22px; }
.bp-camera.bp-cam-flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: bp-flash 300ms ease-out 1 forwards; pointer-events: none; }
@keyframes bp-flash { from { opacity: 1; } to { opacity: 0; } }
.bp-cam-result { position: absolute; inset: 0; z-index: 5; background: rgba(8,6,10,.94); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 18px 40px; }
.bp-cam-result.bp-on { display: flex; }
.bp-cam-result img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.bp-cam-result span { font-size: 13px; font-weight: 650; color: var(--bp-up); }
.bp-cam-result button { padding: 10px 20px; border-radius: 12px; background: var(--bp-card2); font-weight: 650; font-size: 13px; }

/* ---------- rug call ---------- */
.bp-call { position: absolute; inset: 0; z-index: 35; background: linear-gradient(180deg, #5a0a14, #1a0306 70%); text-align: center; padding-top: 130px; opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity .25s, transform .35s cubic-bezier(.3,1.3,.5,1); }
.bp-call.bp-call-on { opacity: 1; pointer-events: auto; transform: none; }
.bp-call-who { width: 116px; height: 116px; margin: 0 auto 18px; border-radius: 50%; background: #2a0a0f; border: 3px solid var(--bp-dn); display: grid; place-items: center; overflow: hidden; font: 900 54px var(--bp-display); color: var(--bp-dn);
  box-shadow: 0 0 0 14px rgba(232,35,58,.12), 0 0 0 30px rgba(232,35,58,.06); }
.bp-call-who em { font-style: normal; }
.bp-call-who .bp-pfp { border-radius: 50%; filter: grayscale(.85) contrast(1.1); }
.bp-call h2 { margin: 0; font: 900 46px var(--bp-display); letter-spacing: 1px; }
.bp-call p { margin: 6px 0 0; color: #f2b6be; font-size: 15px; }
.bp-call-loss { margin-top: 34px; font: 900 70px/1 var(--bp-display); color: var(--bp-dn); }
.bp-call-lt { margin-top: 6px; font-size: 13px; color: #c99aa0; }
.bp-call-btns { position: absolute; bottom: 64px; left: 44px; right: 44px; display: flex; justify-content: space-between; }
.bp-call-btns button { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; }
.bp-call-btns i { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; }
.bp-call-btns svg { width: 30px; height: 30px; }
.bp-call-sell i { background: var(--bp-dn); }
.bp-call-hold i { background: #3a3340; }

/* ---------- peek (phone down) ---------- */
.bp-is-down .bp-screen .bp-views, .bp-is-down .bp-tabs { visibility: hidden; }
.bp-is-down .bp-phone { cursor: pointer; }

/* ---------- mobile: the visitor's phone is the burner ---------- */
.bp-mobile { pointer-events: auto; perspective: none; overflow: hidden; }
.bp-mobile .bp-rig { position: absolute; inset: 0; right: 0; bottom: 0; width: auto; height: auto; transform: none !important; will-change: auto; }
.bp-mobile .bp-phone, .bp-layer.bp-mobile[data-skin] .bp-phone { position: absolute; inset: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; }
.bp-layer.bp-mobile[data-skin] .bp-phone::before, .bp-layer.bp-mobile[data-skin] .bp-phone::after { display: none; }
.bp-layer.bp-mobile[data-skin] .bp-screen { border-radius: 0 !important; }
.bp-mobile .bp-screen { position: absolute; left: 0; top: 0; border-radius: 0; transform-origin: 0 0; }
.bp-mobile .bp-glass, .bp-mobile .bp-key, .bp-mobile .bp-edge, .bp-mobile .bp-hand-wrap { display: none; }
.bp-mobile .bp-status { display: none; }
.bp-mobile .bp-island { top: 6px; }
.bp-mobile .bp-view { padding-top: 44px; }
.bp-mobile .bp-lock { padding-top: 40px; }
.bp-mobile .bp-chart { padding-top: 44px; }

/* ---------- skin: graphite (default) ---------- */
.bp-layer[data-skin='default'] {
  --bp-band: linear-gradient(115deg, #6a6a72 0%, #2c2c31 20%, #18181b 45%, #4a4a52 66%, #202024 84%, #5d5d65 100%);
  --bp-accent: #FF5A1F; --bp-side: #3a3a40; --bp-side2: #19191c;
  --bp-wall: radial-gradient(90% 50% at 30% 10%, #3a3f55 0%, rgba(58,63,85,0) 70%), linear-gradient(180deg, #1c1f2b 0%, #0f1016 100%);
  --bp-apptint: radial-gradient(120% 55% at 15% 0%, rgba(90,100,140,.2) 0%, rgba(0,0,0,0) 70%);
}
.bp-layer[data-skin='default'] .bp-key { background: linear-gradient(90deg, #2a2a2e, #6a6a72); }

/* ---------- skin: blocky (a pixel phone held by a blocky hand) ---------- */
.bp-layer[data-skin='blocky'] {
  --bp-font: 'Pixelify Sans', 'Courier New', monospace; --bp-display: 'Pixelify Sans', 'Courier New', monospace;
  --bp-bg: #c6c6c6; --bp-card: #8b8b8b; --bp-card2: #a4a4a4; --bp-line: rgba(0,0,0,.18); --bp-text: #2d2d2d; --bp-dim: #4f4f4f; --bp-grid: rgba(0,0,0,.12); --bp-tabbg: #8b8b8b;
  --bp-up: #2f8a2a; --bp-dn: #b3261e; --bp-gold: #c98a00; --bp-accent: #d9650f;
  --bp-r: 0px; --bp-r2: 0px; --bp-rad: 4px; --bp-srad: 0px;
  --bp-band: #3a3a3a;
  --bp-wall: repeating-conic-gradient(#7d6a55 0 25%, #725f4b 0 50%) 0 0 / 24px 24px;
  --bp-apptint: none;
}
.bp-layer[data-skin='blocky'] .bp-phone { inset: -34px -6px -40px; padding: 46px 19px 52px; border-radius: 0;
  background: linear-gradient(90deg, #4a4a4a 0 6px, #333 6px calc(100% - 6px), #222 calc(100% - 6px));
  box-shadow: inset 0 0 0 4px #1c1c1c, inset 6px 6px 0 #555, inset -6px -6px 0 #222, -18px 26px 0 rgba(0,0,0,.35); image-rendering: pixelated; }
.bp-layer[data-skin='blocky'] .bp-phone::before { content: ''; position: absolute; left: 50%; top: 18px; width: 46px; height: 8px; margin-left: -23px; background: #151515; box-shadow: inset 0 2px 0 #000; }
.bp-layer[data-skin='blocky'] .bp-phone::after { content: ''; position: absolute; left: 50%; bottom: 12px; width: 34px; height: 28px; margin-left: -17px; background: #2a2a2a; box-shadow: inset 3px 3px 0 #444, inset -3px -3px 0 #161616; }
.bp-layer[data-skin='blocky'] .bp-key { display: none; }
.bp-layer[data-skin='blocky'] .bp-glass { inset: 46px 19px 52px; border-radius: 0; background: linear-gradient(135deg, rgba(255,255,255,.12) 0 18%, transparent 18% 100%); box-shadow: inset 0 0 0 3px #1a1a1a; }
.bp-layer[data-skin='blocky'] .bp-edge { border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-screen { border-radius: 0; color: var(--bp-text); }
.bp-layer[data-skin='blocky'] .bp-wall { opacity: 0; }
.bp-layer[data-skin='blocky'] .bp-screen[data-view='lock'] .bp-wall, .bp-layer[data-skin='blocky'] .bp-screen[data-view='home'] .bp-wall { opacity: 1; }
/* no island on a pixel phone: the same notifications drop in as a stone toast under the status bar (opacity/transform only) */
.bp-layer[data-skin='blocky'] .bp-island, .bp-layer[data-skin='blocky'] .bp-island.bp-isl-open { top: 48px; width: 334px; height: 66px; margin-left: -167px; border-radius: 0;
  background: #3b3b3b; box-shadow: inset 3px 3px 0 #5c5c5c, inset -3px -3px 0 #1c1c1c, 0 4px 0 rgba(0,0,0,.35); transition: opacity .16s, transform .28s cubic-bezier(.3,1.4,.5,1); }
.bp-layer[data-skin='blocky'] .bp-island:not(.bp-isl-open) { opacity: 0; transform: translate3d(0,-14px,0); }
.bp-layer.bp-mobile[data-skin='blocky'] .bp-island { top: 8px; }
.bp-layer[data-skin='blocky'] .bp-status { color: #2d2d2d; background: #a4a4a4; height: 40px; padding-top: 6px; box-shadow: inset 0 -3px 0 #6f6f6f; }
.bp-layer[data-skin='blocky'] .bp-batt { border-color: #2d2d2d; border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-batt::after { background: #2d2d2d; border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-batt-fill { border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-view { padding-top: 48px; }
.bp-layer[data-skin='blocky'] .bp-hd h1 { font-size: 34px; text-transform: uppercase; letter-spacing: 1px; }
.bp-layer[data-skin='blocky'] .bp-seg, .bp-layer[data-skin='blocky'] .bp-seg button { border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-seg { background: #6f6f6f; box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a; }
.bp-layer[data-skin='blocky'] .bp-seg button { color: #e8e8e8; }
.bp-layer[data-skin='blocky'] .bp-seg button.bp-sel { background: #c6c6c6; color: #2d2d2d; box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #555; }
.bp-layer[data-skin='blocky'] .bp-size, .bp-layer[data-skin='blocky'] .bp-buy { border-radius: 0; background: #5d9b3a; color: #fff; box-shadow: inset 2px 2px 0 #8ccf5e, inset -2px -2px 0 #2f5c19; }
.bp-layer[data-skin='blocky'] .bp-row { border-radius: 0; background: #8b8b8b; box-shadow: inset 2px 2px 0 #b5b5b5, inset -2px -2px 0 #565656; height: 54px; color: #fff; }
.bp-layer[data-skin='blocky'] .bp-row::after { display: none; }
.bp-layer[data-skin='blocky'] .bp-row-nm small, .bp-layer[data-skin='blocky'] .bp-row-m small { color: #e3e3e3; }
.bp-layer[data-skin='blocky'] .bp-row-m small { color: #b8f59a; }
.bp-layer[data-skin='blocky'] .bp-pfp { border-radius: 0; image-rendering: pixelated; box-shadow: 0 0 0 2px #2d2d2d; }
.bp-layer[data-skin='blocky'] .bp-bagcard { border-radius: 0; background: #6aa84f; box-shadow: inset 3px 3px 0 #9ad27a, inset -3px -3px 0 #3d6e2a; color: #fff; }
.bp-layer[data-skin='blocky'] .bp-bc-nm small, .bp-layer[data-skin='blocky'] .bp-bc-r small { color: #eaffdf; }
.bp-layer[data-skin='blocky'] .bp-bc-big[data-dir='up'], .bp-layer[data-skin='blocky'] .bp-bagcard [data-dir='up'] { color: #fff; }
.bp-layer[data-skin='blocky'] .bp-btn1, .bp-layer[data-skin='blocky'] .bp-btn2 { border-radius: 0; text-transform: uppercase; }
.bp-layer[data-skin='blocky'] .bp-btn1 { background: #b3261e; color: #fff; box-shadow: inset 2px 2px 0 #e05a52, inset -2px -2px 0 #6e130e; }
.bp-layer[data-skin='blocky'] .bp-btn2 { background: #5d9b3a; color: #fff; box-shadow: inset 2px 2px 0 #8ccf5e, inset -2px -2px 0 #2f5c19; }
.bp-layer[data-skin='blocky'] .bp-tabs { border-top: 0; box-shadow: inset 0 3px 0 #b5b5b5; }
.bp-layer[data-skin='blocky'] .bp-tab { color: #e3e3e3; }
.bp-layer[data-skin='blocky'] .bp-tab i { border-radius: 0; background: #6f6f6f; box-shadow: inset 2px 2px 0 #4a4a4a, inset -2px -2px 0 #9a9a9a; }
.bp-layer[data-skin='blocky'] .bp-tab.bp-sel i { background: #d9650f; color: #fff; box-shadow: inset 2px 2px 0 #ff9a4a, inset -2px -2px 0 #7a3405; }
.bp-layer[data-skin='blocky'] .bp-homebar { display: none; }
.bp-layer[data-skin='blocky'] .bp-act, .bp-layer[data-skin='blocky'] .bp-note, .bp-layer[data-skin='blocky'] .bp-wid, .bp-layer[data-skin='blocky'] .bp-lk-btn { border-radius: 0; background: rgba(40,40,40,.82); box-shadow: inset 2px 2px 0 #5a5a5a, inset -2px -2px 0 #111; color: #fff; }
.bp-layer[data-skin='blocky'] .bp-lk-time { font-weight: 700; }
.bp-layer[data-skin='blocky'] .bp-lock, .bp-layer[data-skin='blocky'] .bp-home { color: #fff; }
.bp-layer[data-skin='blocky'] .bp-icon i { border-radius: 0; box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.35); }
.bp-layer[data-skin='blocky'] .bp-dock { border-radius: 0; background: rgba(0,0,0,.35); }
.bp-layer[data-skin='blocky'] .bp-ch-stat, .bp-layer[data-skin='blocky'] .bp-wl-c, .bp-layer[data-skin='blocky'] .bp-wl-sum > div, .bp-layer[data-skin='blocky'] .bp-ch-box, .bp-layer[data-skin='blocky'] .bp-bg, .bp-layer[data-skin='blocky'] .bp-reset { border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-ch-stat, .bp-layer[data-skin='blocky'] .bp-wl-c, .bp-layer[data-skin='blocky'] .bp-wl-sum > div { color: #fff; box-shadow: inset 2px 2px 0 #b5b5b5, inset -2px -2px 0 #565656; }
.bp-layer[data-skin='blocky'] .bp-ch-stat small, .bp-layer[data-skin='blocky'] .bp-wl-c small, .bp-layer[data-skin='blocky'] .bp-wl-sum small { color: #e3e3e3; }
.bp-layer[data-skin='blocky'] .bp-ch-box { background: #3a3a3a; }
.bp-layer[data-skin='blocky'] .bp-bg-front { background: #8b8b8b; color: #fff; box-shadow: inset 2px 2px 0 #b5b5b5, inset -2px -2px 0 #565656; }
.bp-layer[data-skin='blocky'] .bp-bg-nm small, .bp-layer[data-skin='blocky'] .bp-bg-r small { color: #e3e3e3; }
.bp-layer[data-skin='blocky'] .bp-ch-btns button, .bp-layer[data-skin='blocky'] .bp-ch-btns button:last-child { border-radius: 0; color: #fff; }
.bp-layer[data-skin='blocky'] .bp-ch-buys button { background: #5d9b3a; box-shadow: inset 2px 2px 0 #8ccf5e, inset -2px -2px 0 #2f5c19; }
.bp-layer[data-skin='blocky'] .bp-ch-sells button { background: #b3261e; box-shadow: inset 2px 2px 0 #e05a52, inset -2px -2px 0 #6e130e; }
.bp-layer[data-skin='blocky'] .bp-card { border-radius: 0; background: #4a7a35; box-shadow: inset 4px 4px 0 #7cb35f, inset -4px -4px 0 #2a4a1c; }
.bp-layer[data-skin='blocky'] .bp-card::after { display: none; }
.bp-layer[data-skin='blocky'] .bp-call { background: #6e130e; }
.bp-layer[data-skin='blocky'] .bp-call-who, .bp-layer[data-skin='blocky'] .bp-call-btns i { border-radius: 0; }
.bp-layer[data-skin='blocky'] .bp-prog { border-radius: 0; background: #555; }
.bp-layer[data-skin='blocky'] .bp-prog > i { background: #5d9b3a; }
.bp-layer[data-skin='blocky'] .bp-ach { border-radius: 0; background: #2d2d2d; color: #ffd43b; }
.bp-layer[data-skin='blocky'] .bp-spark-a { fill: rgba(47,138,42,.18); }

/* ---------- banners ---------- */
.bn-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; font-family: Geist, system-ui, sans-serif; }
.bn-vig { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 38%, rgba(0,0,0,.6) 100%), rgba(90,0,10,.12); }
.bn-vig.bn-in { opacity: 1; }
.bn-wasted { position: absolute; left: 0; right: 0; top: 37%; text-align: center; transform: translateY(-50%); }
.bn-wasted b { display: block; font: 900 clamp(84px, 11vw, 168px)/1 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 5px; color: #E8233A; -webkit-text-stroke: 3px #120204;
  text-shadow: 0 7px 0 #3a0008, 0 0 46px rgba(232,35,58,.4); opacity: 0; transform: scale(1.45); }
.bn-wasted small { display: inline-block; margin-top: 12px; font-weight: 650; font-size: clamp(15px, 1.6vw, 22px); color: #fff; background: rgba(0,0,0,.62); padding: 8px 18px; border-radius: 6px; opacity: 0; transition: opacity .4s .25s; }
.bn-wasted.bn-slam b { animation: bn-slam 160ms cubic-bezier(.2,.8,.3,1) 1 forwards; }
.bn-wasted.bn-slam small { opacity: 1; }
.bn-wasted.bn-out, .bn-passed.bn-out { opacity: 0; transition: opacity .55s ease; }
@keyframes bn-slam { from { opacity: 0; transform: scale(1.45); } 70% { opacity: 1; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.bn-passed { position: absolute; left: 0; right: 0; top: 33%; text-align: center; }
.bn-passed b { display: block; font: 900 clamp(60px, 8vw, 124px)/1 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 3px; color: #FFC23D; -webkit-text-stroke: 3px #1a1000;
  text-shadow: 0 6px 0 #4a2f00, 0 0 40px rgba(255,194,61,.35); clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.3,.8,.3,1); }
.bn-passed.bn-in b { clip-path: inset(0 0 0 0); }
.bn-passed strong { display: block; margin-top: 8px; font: 900 clamp(40px, 4.6vw, 70px)/1 'Big Shoulders Display', Impact, sans-serif; color: #fff4e6; -webkit-text-stroke: 2px #1a1000; text-shadow: 0 4px 0 #4a2f00; font-variant-numeric: tabular-nums; }
.bn-passed small { display: inline-block; margin-top: 10px; font-weight: 650; font-size: clamp(14px, 1.4vw, 19px); color: #fff; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: 6px; }
.bn-toasts { position: absolute; top: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.bn-ach { display: flex; align-items: center; gap: 14px; width: 380px; max-width: calc(100vw - 44px); padding: 12px 16px; background: #212121; border: 4px solid #5a5a5a; box-shadow: inset 0 0 0 2px #111, 0 6px 0 rgba(0,0,0,.35);
  font-family: 'Pixelify Sans', 'Courier New', monospace; transform: translateY(-160%); transition: transform .4s cubic-bezier(.3,1.2,.5,1); }
.bn-ach.bn-in { transform: none; }
.bn-ach-ic { flex: none; width: 44px; height: 44px; background: #ffd43b; box-shadow: inset 4px 4px 0 #fff3a8, inset -4px -4px 0 #c99a00; }
.bn-ach b { display: block; color: #ffd43b; font-size: 20px; font-weight: 600; }
.bn-ach span { display: block; color: #fff; font-size: 16px; line-height: 1.25; }
.bn-flash { position: absolute; inset: 0; background: #fff; }
/* centre the big words in the space left of the phone; on phones the phone is the whole screen */
.bn-wasted, .bn-passed { right: 27%; }
.bp-mobile ~ .bn-layer .bn-wasted, .bp-mobile ~ .bn-layer .bn-passed { right: 0; }
.bn-layer[data-skin='blocky'] .bn-wasted b, .bn-layer[data-skin='blocky'] .bn-passed b, .bn-layer[data-skin='blocky'] .bn-passed strong { font-family: 'Pixelify Sans', 'Courier New', monospace; letter-spacing: 2px; -webkit-text-stroke: 0; text-shadow: 6px 6px 0 #3a0008; }
.bn-layer[data-skin='blocky'] .bn-passed b, .bn-layer[data-skin='blocky'] .bn-passed strong { text-shadow: 6px 6px 0 #4a2f00; }

/* ---------- trade states + the real-money confirm sheet ---------- */
.bp-pending { position: relative; color: transparent !important; pointer-events: none; }
.bp-pending > * { visibility: hidden; }
.bp-pending::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; border: 2.5px solid var(--bp-text); border-right-color: transparent; animation: bp-spin .7s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }
.bp-sheet { position: absolute; inset: 0; z-index: 70; display: flex; align-items: flex-end; padding: 0 12px 28px; background: rgba(0,0,0,0); transition: background .25s; }
.bp-sheet.bp-on { background: rgba(0,0,0,.55); }
.bp-sheet-card { width: 100%; padding: 20px 18px 16px; border-radius: 26px; background: var(--bp-card2); color: var(--bp-text); transform: translateY(110%); transition: transform .32s cubic-bezier(.2,.9,.3,1.1); box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.bp-sheet.bp-on .bp-sheet-card { transform: none; }
.bp-sheet-card b { display: block; font: 900 26px var(--bp-display); color: var(--bp-gold); }
.bp-sheet-card p { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--bp-text); }
.bp-sheet-keep { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bp-dim); margin-bottom: 14px; }
.bp-sheet-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.bp-layer[data-skin='blocky'] .bp-sheet-card, .bp-layer[data-skin='tactical'] .bp-sheet-card { border-radius: 2px; }

/* the amount sheet: any SOL to buy, any % to sell (amount.js) */
.bp-sheet-card.bp-amt { padding: 14px 14px 12px; }
.bp-amt-hd { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 650; color: var(--bp-dim); }
.bp-amt-x { font-size: 13px; font-weight: 650; color: var(--bp-dim); padding: 4px 2px; }
.bp-amt-show { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 4px; }
.bp-sheet-card .bp-amt-v { display: inline; font: 900 54px/1.05 var(--bp-display); color: var(--bp-text); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.bp-sheet-card .bp-amt-v.bp-amt-empty { opacity: .3; }
.bp-sheet-card .bp-amt-v.bp-amt-sel { padding: 0 6px; border-radius: 8px; background: rgba(255,90,31,.22); }
.bp-amt-u { font-size: 18px; font-weight: 750; color: var(--bp-dim); }
.bp-amt-note { display: block; min-height: 16px; text-align: center; font-size: 12px; color: var(--bp-dim); font-variant-numeric: tabular-nums; }
.bp-amt-picks { display: flex; gap: 6px; margin: 12px 0 9px; }
.bp-amt-picks button { flex: 1; padding: 7px 0; border-radius: 10px; background: var(--bp-card); font-size: 13px; font-weight: 700; transition: transform .12s, background .15s; }
.bp-amt-picks button.bp-on { background: var(--bp-accent); color: #170700; }
.bp-amt-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bp-amt-pad button { padding: 10px 0; border-radius: 12px; background: var(--bp-card); font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; transition: transform .1s; }
.bp-amt-pad button:active, .bp-amt-picks button:active { transform: scale(.94); }
.bp-amt-go { display: block; width: 100%; margin-top: 10px; padding: 13px 0; font-size: 15px; }
.bp-amt-go:disabled { opacity: .5; }
.bp-amt-go.bp-amt-buy { background: var(--bp-up); color: #05200e; }
.bp-layer[data-skin='blocky'] .bp-amt-go.bp-amt-buy { background: #5d9b3a; color: #fff; box-shadow: inset 2px 2px 0 #8ccf5e, inset -2px -2px 0 #2f5c19; }
.bp-layer[data-skin='tactical'] .bp-amt-go.bp-amt-buy { background: rgba(109,255,158,.2); color: var(--bp-up); box-shadow: inset 0 0 0 1px var(--bp-up); }
.bp-ch-btns .bp-ch-any b { letter-spacing: .3px; }
.bp-layer[data-skin='blocky'] .bp-amt-pad button, .bp-layer[data-skin='blocky'] .bp-amt-picks button { border-radius: 0; background: #8b8b8b; color: #fff; box-shadow: inset 2px 2px 0 #b5b5b5, inset -2px -2px 0 #555; }
.bp-layer[data-skin='blocky'] .bp-amt-picks button.bp-on { background: #5d9b3a; box-shadow: inset 2px 2px 0 #8ccf5e, inset -2px -2px 0 #2f5c19; }
.bp-layer[data-skin='tactical'] .bp-amt-pad button, .bp-layer[data-skin='tactical'] .bp-amt-picks button { border-radius: 2px; background: transparent; color: var(--bp-up); box-shadow: inset 0 0 0 1px rgba(109,255,158,.45); }
.bp-layer[data-skin='tactical'] .bp-amt-picks button.bp-on { background: rgba(109,255,158,.18); }

/* ---------- wallet app: paper / real ---------- */
.bp-mode { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: var(--bp-card2); color: var(--bp-dim); }
.bp-mode-real { background: var(--bp-gold); color: #1a1000; }
.bp-card-real { background: radial-gradient(120% 90% at 100% 0%, rgba(43,224,122,.5) 0%, rgba(43,224,122,0) 45%), linear-gradient(135deg, #0f3a24 0%, #0b1f16 55%, #050a07 100%); box-shadow: 0 10px 30px rgba(43,224,122,.18), inset 0 1px 0 rgba(255,255,255,.2); }
.bp-card-real .bp-card-top em { background: var(--bp-gold); color: #1a1000; }
.bp-wl-acts, .bp-wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bp-txs { display: flex; flex-direction: column; }
.bp-tx { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; height: 30px; font-size: 12.5px; text-decoration: none; color: var(--bp-text); border-bottom: 1px solid var(--bp-line); }
.bp-tx span { color: var(--bp-dim); text-transform: lowercase; } .bp-tx b { font-weight: 650; } .bp-tx em { font-style: normal; font-weight: 700; font-size: 11.5px; }
.bp-golive { display: block; margin-top: 12px; padding: 14px; border-radius: var(--bp-r); background: var(--bp-card); box-shadow: inset 0 0 0 1px rgba(255,194,61,.35); text-decoration: none; color: var(--bp-text); }
.bp-golive b { display: block; font: 900 20px var(--bp-display); color: var(--bp-gold); }
.bp-golive small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--bp-dim); }
.bp-golive-link b::after { content: ' →'; }
.bp-qr { margin: 6px auto 12px; width: 220px; height: 220px; padding: 10px; border-radius: 16px; background: #fff; display: grid; place-items: center; }
.bp-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.bp-qr em { color: #333; font-style: normal; font-size: 12px; }
.bp-addr { display: grid; gap: 8px; }
.bp-addr code { display: block; padding: 10px; border-radius: 10px; background: var(--bp-card); font: 600 11.5px/1.4 'Share Tech Mono', Consolas, monospace; word-break: break-all; color: var(--bp-text); }
.bp-lbl { display: block; margin: 10px 2px 4px; font-size: 11px; font-weight: 700; color: var(--bp-dim); text-transform: uppercase; letter-spacing: 1px; }
.bp-in { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 0; background: var(--bp-card); color: var(--bp-text); font: 600 13px var(--bp-font); outline: none; box-shadow: inset 0 0 0 1px var(--bp-line); }
.bp-in:focus { box-shadow: inset 0 0 0 2px var(--bp-accent); }
.bp-wl-row .bp-in { grid-column: 1; }
.bp-wd { width: 100%; margin-top: 14px; }
.bp-fine { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--bp-dim); }
.bp-wl-back { width: 28px; font-size: 30px; line-height: 1; color: var(--bp-dim); }
.bp-forget { color: var(--bp-dn) !important; }
.bp-modechip { margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; padding: 2px 6px; border-radius: 5px; background: var(--bp-gold); color: #1a1000; }
.bp-modechip:empty { display: none; }

/* the island is always a dark pill: its text is always light, whatever the skin */
.bp-island { color: #fff; }

/* banner type per game */
.bn-layer[data-skin='toon'] .bn-wasted b, .bn-layer[data-skin='toon'] .bn-passed b, .bn-layer[data-skin='toon'] .bn-passed strong { font-family: 'Lilita One', sans-serif; font-weight: 400; letter-spacing: 1px; -webkit-text-stroke: 4px #1a1033; paint-order: stroke fill; text-shadow: 0 8px 0 #1a1033; }
.bn-layer[data-skin='toon'] .bn-wasted b { color: #ff4d6d; } .bn-layer[data-skin='toon'] .bn-passed b { color: #ffd23f; }
.bn-layer[data-skin='tactical'] .bn-wasted b, .bn-layer[data-skin='tactical'] .bn-passed b { font-family: 'Share Tech Mono', monospace; font-weight: 400; letter-spacing: 8px; -webkit-text-stroke: 0; text-shadow: 0 0 30px currentColor; font-size: clamp(64px, 8vw, 130px); }
.bn-layer[data-skin='tactical'] .bn-wasted b { color: #ff6a4d; } .bn-layer[data-skin='tactical'] .bn-passed b { color: #6dff9e; }
.bn-layer[data-skin='obby'] .bn-wasted b, .bn-layer[data-skin='obby'] .bn-passed b, .bn-layer[data-skin='obby'] .bn-passed strong { font-family: 'Fredoka', sans-serif; font-weight: 700; -webkit-text-stroke: 0; text-shadow: 0 7px 0 rgba(20,40,120,.55); }
.bn-layer[data-skin='obby'] .bn-wasted b { color: #ff3b4f; } .bn-layer[data-skin='obby'] .bn-passed b { color: #fff; }
.bn-layer[data-skin='survival'] .bn-wasted b, .bn-layer[data-skin='survival'] .bn-passed b { font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 6px; -webkit-text-stroke: 0; text-shadow: 0 4px 24px rgba(0,0,0,.7); }
.bn-layer[data-skin='survival'] .bn-wasted b { color: #c8402a; } .bn-layer[data-skin='survival'] .bn-passed b { color: #eaa43c; }

/* long per-game words stay clear of the phone */
.bn-layer[data-skin='obby'] .bn-passed b { font-size: clamp(52px, 6.2vw, 98px); }
.bn-layer[data-skin='tactical'] .bn-wasted b, .bn-layer[data-skin='tactical'] .bn-passed b { font-size: clamp(52px, 6.6vw, 106px); letter-spacing: 6px; }
/* burner site v2. classes: st- (site), hud- (the fake game HUDs). The whole page takes the look of the game you pick. */
:root { --ink: #0B0A09; --paper: #FFF4E6; --burn: #FF5A1F; --gold: #FFC23D; --blood: #E8233A; --up: #2BE07A; color-scheme: dark; }
body { --acc: #ffd84a; --acc-ink: #1a1400; --display: 'Pixelify Sans', 'Courier New', monospace; --h1-shadow: 5px 5px 0 #2a2a2a; --btn: #5d9b3a; --btn-ink: #fff; --btn-edge: inset 3px 3px 0 #8ccf5e, inset -3px -3px 0 #2f5c19; --btn-rad: 0px; --card-rad: 4px; --sky: #0d1430; }
body[data-world='toon'] { --acc: #ffd23f; --acc-ink: #1a1033; --display: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; --h1-shadow: 0 5px 0 #1a1033; --btn: #7b3cff; --btn-ink: #fff; --btn-edge: 0 5px 0 #4a1fb0, 0 0 0 3px #1a1033; --btn-rad: 18px; --card-rad: 22px; --sky: #3b7bff; }
body[data-world='tactical'] { --acc: #ffb23f; --acc-ink: #140b00; --display: 'Share Tech Mono', 'Consolas', monospace; --h1-shadow: 0 0 18px rgba(255,178,63,.35); --btn: #16301e; --btn-ink: #9dffbc; --btn-edge: inset 0 0 0 1px #6dff9e, 0 0 18px rgba(109,255,158,.25); --btn-rad: 2px; --card-rad: 2px; --sky: #c9b48a; }
body[data-world='obby'] { --acc: #2f7bff; --acc-ink: #fff; --display: 'Fredoka', 'Nunito', system-ui, sans-serif; --h1-shadow: 0 5px 0 rgba(20,40,120,.4); --btn: #ff3b4f; --btn-ink: #fff; --btn-edge: 0 5px 0 #b81c2e, inset 0 2px 0 rgba(255,255,255,.4); --btn-rad: 16px; --card-rad: 20px; --sky: #6ab0ff; }
body[data-world='survival'] { --acc: #d8752b; --acc-ink: #1a0d03; --display: 'Oswald', 'Arial Narrow', sans-serif; --h1-shadow: 0 3px 0 rgba(0,0,0,.55); --btn: #d8752b; --btn-ink: #1a0d03; --btn-edge: inset 0 2px 0 rgba(255,220,180,.35), 0 3px 0 #7a3a10; --btn-rad: 4px; --card-rad: 6px; --sky: #6a3b3a; }
body[data-world='city'] { --acc: #FF5A1F; --acc-ink: #170700; --display: 'Big Shoulders Display', Impact, sans-serif; --h1-shadow: 0 4px 0 rgba(40,8,30,.35); --btn: #FF5A1F; --btn-ink: #170700; --btn-edge: 0 8px 30px rgba(255,90,31,.45), inset 0 1px 0 rgba(255,255,255,.35); --btn-rad: 14px; --card-rad: 20px; --sky: #e2566d; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- hero ---------- */
.st-hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; overflow: clip; background: var(--sky) center / cover no-repeat; }
body[data-world='blocky'] .st-hero { background-image: url(/poster-blocky.jpg); }
body[data-world='toon'] .st-hero { background-image: url(/poster-toon.jpg); }
body[data-world='tactical'] .st-hero { background-image: url(/poster-tactical.jpg); }
body[data-world='obby'] .st-hero { background-image: url(/poster-obby.jpg); }
body[data-world='survival'] .st-hero { background-image: url(/poster-survival.jpg); }
body[data-world='city'] .st-hero { background-image: url(/poster-city.jpg); }
.st-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.st-world-ready .st-world { opacity: 1; }
.st-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(6,4,14,.62) 0%, rgba(6,4,14,.22) 38%, rgba(6,4,14,0) 58%), linear-gradient(0deg, rgba(6,4,14,.45) 0%, rgba(6,4,14,0) 28%); }
body[data-world='obby'] .st-shade, body[data-world='toon'] .st-shade { background: linear-gradient(100deg, rgba(10,20,70,.55) 0%, rgba(10,20,70,.15) 40%, rgba(0,0,0,0) 60%), linear-gradient(0deg, rgba(10,20,70,.35) 0%, rgba(0,0,0,0) 26%); }
/* the world reacts to the market: a red hit for a rug in the list, a gold sweep for a bond (one-shot) */
.st-react { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.st-react-rug { background: radial-gradient(ellipse at 60% 50%, rgba(232,35,58,0) 30%, rgba(232,35,58,.45) 100%); animation: st-rug 900ms ease-out 1; }
@keyframes st-rug { 0% { opacity: 0; } 8% { opacity: 1; background-color: rgba(255,255,255,.18); } 30% { opacity: .9; background-color: rgba(255,255,255,0); } 100% { opacity: 0; } }
.st-react-grad { background: linear-gradient(100deg, rgba(255,194,61,0) 35%, rgba(255,194,61,.32) 50%, rgba(255,194,61,0) 65%) 0 0 / 300% 100% no-repeat; animation: st-grad 1100ms ease-in-out 1; }
@keyframes st-grad { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0% 0; } }
.st-fx-gray .st-world { filter: saturate(.15); transition: filter 1.2s; }

.st-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px 44px; z-index: 20; }
.st-logo { font: 900 30px/1 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 2px; text-decoration: none; color: var(--paper); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.st-logo span { color: var(--burn); }
/* the mark from the X profile picture, sized to the caps */
.st-logo { display: inline-flex; align-items: center; }
.st-logo-mark { width: 1.18em; height: 1.18em; margin: -.12em .22em -.12em -.12em; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.st-top nav { display: flex; gap: 26px; margin-right: 0; padding: 8px 18px; border-radius: 12px; background: rgba(8,6,16,.45); }
.st-top nav a { text-decoration: none; font-weight: 600; font-size: 15px; opacity: .88; transition: opacity .2s, color .2s; }
.st-top nav a:hover { opacity: 1; color: var(--acc); }
.st-top nav { align-items: center; }
.st-nav-icon { display: grid; place-items: center; width: 30px; height: 30px; margin: -4px 0; }
.st-nav-icon svg { width: 26px; height: 26px; }
.st-mob-pitch { display: none; }

.st-pitch { position: absolute; left: 44px; top: 104px; width: min(600px, 46vw); z-index: 20; }
.st-pitch h1 { margin: 0; font: 400 clamp(52px, 6.1vw, 92px)/.95 var(--display); text-transform: uppercase; letter-spacing: .5px; text-shadow: var(--h1-shadow); }
body[data-world='city'] .st-pitch h1 { font-weight: 900; }
body[data-world='blocky'] .st-pitch h1, body[data-world='obby'] .st-pitch h1, body[data-world='survival'] .st-pitch h1 { font-weight: 700; }
body[data-world='tactical'] .st-pitch h1 { font-size: clamp(42px, 4.9vw, 74px); letter-spacing: 2px; }
body[data-world='toon'] .st-pitch h1 { -webkit-text-stroke: 3px #1a1033; paint-order: stroke fill; }
.st-pitch h1 span { display: inline-block; }
.st-pitch p { margin: 18px 0 0; font-size: 18px; line-height: 1.5; max-width: 470px; text-shadow: 0 1px 10px rgba(6,4,14,.6); }
.st-splash { position: absolute; left: 330px; top: -14px; z-index: 2; font: 600 22px 'Pixelify Sans', monospace; color: #ffff55; text-shadow: 3px 3px 0 #3f3f00; white-space: nowrap; pointer-events: none;
  transform: rotate(-14deg); transform-origin: 0 50%; opacity: 0; transition: opacity .3s; }
body[data-world='blocky'] .st-splash { opacity: 1; }
.st-splash.st-pop { animation: st-pop .55s cubic-bezier(.3,1.6,.5,1) 1; }
@keyframes st-pop { 0% { transform: rotate(-14deg) scale(.6); } 60% { transform: rotate(-14deg) scale(1.18); } 100% { transform: rotate(-14deg) scale(1); } }
.st-cta { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: var(--btn-rad); font-weight: 700; font-size: 16px; text-decoration: none; background: var(--btn); color: var(--btn-ink); box-shadow: var(--btn-edge); transition: transform .15s, filter .2s; }
.st-btn svg { width: 20px; height: 20px; }
.st-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.st-btn:active { transform: translateY(1px); }
body[data-world='blocky'] .st-btn { font-family: 'Pixelify Sans', monospace; font-size: 18px; text-shadow: 2px 2px 0 #2f5c19; }
body[data-world='toon'] .st-btn { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 18px; }
body[data-world='tactical'] .st-btn { font-family: 'Share Tech Mono', monospace; text-transform: uppercase; letter-spacing: 1px; }
body[data-world='obby'] .st-btn { font-family: 'Fredoka', sans-serif; font-size: 18px; }
body[data-world='survival'] .st-btn { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
.st-cta-note { font-size: 13px; font-weight: 600; opacity: .85; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
/* the github logo next to the download button: square, the same height, quieter */
.st-btn.st-btn-icon { width: 54px; padding: 0; background: rgba(8,6,16,.55); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255,244,230,.22); }
.st-btn.st-btn-icon svg { width: 24px; height: 24px; }
.st-cta { gap: 12px; }
.st-cta-sub { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255,244,230,.78); text-shadow: 0 1px 6px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }

/* game picker: thumbnails of every world, the active one lifted */
.st-picker { position: relative; z-index: 22; display: flex; gap: 10px; margin-top: 30px; }
.st-pick { position: relative; width: 92px; height: 64px; padding: 0; border: 0; border-radius: var(--card-rad); overflow: hidden; background: #222 center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.4); transform: translateY(0); transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, filter .25s; filter: saturate(.75) brightness(.85); }
.st-pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
.st-pick b { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 1; font-size: 11.5px; font-weight: 700; text-align: left; line-height: 1.1; color: #fff; }
.st-pick kbd { position: absolute; right: 6px; top: 5px; z-index: 1; font: 700 10px Geist, sans-serif; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.55); color: #fff; }
.st-pick:hover { transform: translateY(-4px); filter: none; }
.st-pick.st-on { transform: translateY(-8px); filter: none; box-shadow: 0 0 0 3px var(--acc), 0 14px 28px rgba(0,0,0,.5); }

/* today's biggest WASTED: a real rug replayed to every visitor, a game cut-in at the bottom */
.st-wst { position: absolute; left: 50%; bottom: 26px; z-index: 30; width: 440px; margin-left: -220px; padding: 14px 18px 12px; border: 0; border-radius: var(--card-rad); text-align: left; cursor: pointer;
  background: linear-gradient(160deg, rgba(58,8,14,.97), rgba(18,4,6,.98)); color: #fff; box-shadow: 0 0 0 2px rgba(232,35,58,.6), 0 20px 40px rgba(0,0,0,.5);
  transform: translateY(160%); opacity: 0; transition: transform .55s cubic-bezier(.3,1.3,.5,1), opacity .3s; }
.st-wst.st-on { transform: none; opacity: 1; }
.st-wst small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #ff9aa6; }
.st-wst > b { display: block; font: 400 44px/1 var(--display); color: #E8233A; letter-spacing: 2px; -webkit-text-stroke: 2px #120204; paint-order: stroke fill; transform: scale(1.5); opacity: 0; }
body[data-world='city'] .st-wst > b { font-weight: 900; }
.st-wst.st-on > b { animation: st-slam .45s cubic-bezier(.2,.8,.3,1) .25s forwards; }
.st-wst-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.st-wst-pf { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #2a0a0f center / cover no-repeat; filter: grayscale(.8) contrast(1.1); }
.st-wst strong { display: block; font-size: 16px; font-weight: 800; }
.st-wst em { display: block; font-style: normal; font-size: 13.5px; font-weight: 600; color: #ffb3bd; font-variant-numeric: tabular-nums; }
.st-wst u { display: block; margin-top: 8px; font-size: 11.5px; text-decoration: none; color: rgba(255,255,255,.55); }
.st-wst:hover { box-shadow: 0 0 0 3px #E8233A, 0 20px 40px rgba(0,0,0,.5); }

/* the block wipe between worlds */
.st-wipe { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(10, 1fr); }
.st-wipe i { background: var(--wipe, #111); transform: scale(0); }

.st-keys { position: relative; margin-top: 14px; z-index: 25; font-size: 12px; font-weight: 600; color: rgba(255,244,230,.8); text-shadow: 0 1px 3px #000; pointer-events: none; }
.st-keys kbd { font: 700 11px Geist, sans-serif; padding: 2px 7px; border-radius: 5px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.3); margin: 0 4px 0 10px; }
.st-pitch, .st-top nav, .hud, .st-keys, .st-picker { transition: opacity .45s ease; }
.bn-any .st-pitch, .bn-any .st-top nav, .bn-any .hud, .bn-any .st-keys, .bn-any .st-picker { opacity: 0; }

/* ---------- game HUDs (ours, generic, one per genre) ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none; }
body[data-world='city'] .hud-city, body[data-world='blocky'] .hud-blocky, body[data-world='toon'] .hud-toon, body[data-world='tactical'] .hud-tactical, body[data-world='obby'] .hud-obby, body[data-world='survival'] .hud-survival { display: block; }
.hud-money { position: absolute; top: 74px; right: 46px; font: 800 44px/1 'Big Shoulders Display', Impact, sans-serif; color: #7cf09a; letter-spacing: 1px; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #0a3a1a, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.hud-stars { position: absolute; top: 126px; right: 46px; display: flex; gap: 6px; }
.hud-stars i { width: 28px; height: 28px; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); background: rgba(255,255,255,.2); transition: background .3s; }
.hud-stars i.on { background: #fff; }
.hud-map { position: absolute; right: 46px; top: 170px; width: 160px; height: 110px; border-radius: 6px; overflow: hidden; background: #6f8d6a; border: 3px solid rgba(0,0,0,.55); box-shadow: 0 4px 18px rgba(0,0,0,.35); display: none; }
.hud-map-rot { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; transition: transform .12s linear; will-change: transform; }
.hud-map-rot svg { width: 100%; height: 100%; display: block; }
.hud-map-me { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.hud-bars { display: none; }
.hud-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat; opacity: .8; }
.hud-hearts { position: absolute; left: 50%; bottom: 84px; margin-left: -60px; display: flex; gap: 3px; }
.hud-hearts i { width: 18px; height: 16px; background: #3a1010; clip-path: polygon(0 25%, 25% 0, 50% 18%, 75% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%); }
.hud-hearts i.full { background: #e8233a; } .hud-hearts i.half { background: linear-gradient(90deg, #e8233a 50%, #3a1010 50%); }
.hud-xp { display: none; }
.hud-hotbar { position: absolute; left: 50%; bottom: 18px; margin-left: -60px; display: flex; background: rgba(0,0,0,.5); border: 3px solid #2a2a2a; }
.hud-hotbar { transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
.hud-hotbar.st-empty { opacity: 0; transform: translateY(24px); }
.hud-hotbar.st-pick-up span.sel { animation: st-item 600ms cubic-bezier(.3,1.6,.5,1) 1; }
@keyframes st-item { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
.hud-hotbar span { position: relative; width: 58px; height: 58px; border: 3px solid #8b8b8b; background: rgba(60,60,60,.55); box-shadow: inset 2px 2px 0 #555; display: grid; place-items: center; }
.hud-hotbar span.sel { border-color: #fff; }
.hud-hotbar img { width: 38px; height: 38px; image-rendering: pixelated; object-fit: cover; }
.hud-hotbar em { position: absolute; right: 2px; bottom: 0; font: 600 11px 'Pixelify Sans', monospace; font-style: normal; color: #fff; text-shadow: 1px 1px 0 #000; }
.hud-storm { position: absolute; top: 74px; right: 46px; padding: 8px 14px; border-radius: 12px; background: rgba(60,20,120,.75); box-shadow: 0 0 0 3px #1a1033; font: 400 18px 'Lilita One', sans-serif; color: #fff; }
.hud-storm b { color: #d6b3ff; font-weight: 400; }
.hud-alive { position: absolute; top: 122px; right: 46px; font: 400 20px 'Lilita One', sans-serif; color: #fff; text-shadow: 0 2px 0 #1a1033; }
.hud-toon-bars { position: absolute; left: 50%; bottom: 28px; margin-left: -150px; width: 300px; display: grid; gap: 6px; }
.hud-toon-bars > div { position: relative; height: 18px; border-radius: 9px; background: rgba(26,16,51,.75); box-shadow: 0 0 0 3px #1a1033; overflow: hidden; }
.hud-toon-bars i { position: absolute; inset: 0; transform-origin: left; transition: transform .6s ease; }
.hud-sh i { background: linear-gradient(90deg, #3fa8ff, #7ad0ff); } .hud-hp2 i { background: linear-gradient(90deg, #36d672, #8cf0a8); }
.hud-toon-bars b { position: absolute; right: 8px; top: 0; font: 400 14px/18px 'Lilita One', sans-serif; color: #fff; text-shadow: 0 1px 0 #1a1033; }
.hud-round { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); display: flex; align-items: center; font: 400 20px 'Share Tech Mono', monospace; color: #fff; }
.hud-round b { padding: 6px 14px; background: rgba(40,90,170,.75); font-weight: 400; } .hud-round b:last-child { background: rgba(190,120,30,.75); }
.hud-round span { padding: 6px 16px; background: rgba(0,0,0,.6); }
.hud-tac-l, .hud-tac-r { position: absolute; top: 74px; font: 400 34px/1 'Share Tech Mono', monospace; color: #e8ffe9; text-shadow: 0 0 10px rgba(0,0,0,.6); }
.hud-tac-l { right: 220px; } .hud-tac-r { right: 46px; text-align: right; }
.hud-tac-l small, .hud-tac-r small { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
.hud-stage { position: absolute; top: 74px; right: 46px; padding: 8px 16px; border-radius: 14px; background: #fff; color: #1d2a52; font: 600 18px 'Fredoka', sans-serif; box-shadow: 0 4px 0 rgba(20,40,120,.35); }
.hud-coins { position: absolute; top: 122px; right: 46px; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 14px; background: rgba(255,255,255,.9); color: #1d2a52; font: 700 18px 'Fredoka', sans-serif; box-shadow: 0 4px 0 rgba(20,40,120,.3); }
.hud-coins i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe680, #f7a600); box-shadow: inset 0 -2px 0 #b87800; }
.hud-vitals { position: absolute; right: 46px; top: 74px; display: grid; gap: 5px; width: 180px; }
.hud-vitals > div { position: relative; height: 22px; background: rgba(20,14,10,.7); border: 1px solid rgba(241,227,207,.15); overflow: hidden; }
.hud-vitals i { position: absolute; inset: 0; transform-origin: left; background: #7aa64a; transition: transform .6s ease; }
.hud-vitals > div:nth-child(2) i { background: #c9852f; } .hud-vitals .hud-w { background: #3f86b8; transform: scaleX(.78); }
.hud-vitals b { position: absolute; left: 8px; top: 0; font: 500 12px/22px 'Oswald', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #f1e3cf; }

/* ---------- live ticker ---------- */
.st-ticker { position: relative; z-index: 2; height: 56px; overflow: hidden; background: #0f0d0b; border-top: 1px solid rgba(255,244,230,.08); border-bottom: 1px solid rgba(255,244,230,.08); }
.st-ticker::before, .st-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.st-ticker::before { left: 0; background: linear-gradient(90deg, #0f0d0b, rgba(15,13,11,0)); } .st-ticker::after { right: 0; background: linear-gradient(-90deg, #0f0d0b, rgba(15,13,11,0)); }
.st-ticker-track { display: flex; width: max-content; height: 100%; animation: st-tick 60s linear infinite; will-change: transform; }
.st-ticker:hover .st-ticker-track { animation-play-state: paused; }
@keyframes st-tick { to { transform: translateX(-50%); } }
.st-tk { display: flex; align-items: center; gap: 10px; padding: 0 22px; height: 100%; font-size: 14px; font-weight: 600; white-space: nowrap; border-right: 1px solid rgba(255,244,230,.06); }
.st-tk img, .st-tk .st-tk-pf { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #2a2420; }
.st-tk em { font-style: normal; font: 900 14px 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 1px; padding: 2px 7px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-5deg); }
.st-tk-rug em { color: var(--blood); } .st-tk-grad em { color: var(--gold); } .st-tk-new em { color: var(--up); } .st-tk-pump em { color: #7ad0ff; }
.st-tk small { color: rgba(255,244,230,.55); font-weight: 500; }

/* ---------- sections ---------- */
.st-main { position: relative; z-index: 2; }
.st-main h2 { margin: 0 0 18px; font: 900 clamp(40px, 5vw, 70px)/.95 'Big Shoulders Display', Impact, sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.st-main h2 span { display: inline-block; }
.st-lead { max-width: 720px; font-size: 18px; line-height: 1.55; color: rgba(255,244,230,.82); margin: 0 0 30px; }
.st-games, .st-how, .st-moments, .st-watch, .st-real, .st-get { max-width: 1180px; margin: 0 auto; padding: 100px 44px 0; }
/* reveal on scroll: children rise in with a stagger, once */
.st-rv > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.st-rv.st-in > * { opacity: 1; transform: none; }

.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; perspective: 1200px; }
.st-card { position: relative; height: 330px; border: 0; padding: 0; border-radius: 22px; overflow: hidden; text-align: left; background: #16120f center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,244,230,.08), 0 24px 40px rgba(0,0,0,.35); transform-style: preserve-3d; opacity: 0; transform: translateY(40px) rotateX(8deg); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.st-in .st-card { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.st-in .st-card.st-tilting { transition: transform .12s linear, box-shadow .3s; transition-delay: 0s; }
.st-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,4,10,.92) 0%, rgba(6,4,10,.35) 46%, rgba(6,4,10,0) 70%); }
.st-card img.st-card-phone { position: absolute; right: -18px; bottom: -60px; width: 52%; transform: rotate(-6deg) translateZ(40px); filter: drop-shadow(-10px 16px 18px rgba(0,0,0,.5)); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.st-card:hover img.st-card-phone { transform: rotate(-3deg) translateY(-26px) translateZ(60px); }
.st-card-txt { position: absolute; left: 22px; right: 46%; bottom: 20px; z-index: 1; transform: translateZ(30px); }
.st-card-txt b { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; color: #fff; }
.st-card-txt small { display: block; font-size: 14px; line-height: 1.4; color: rgba(255,244,230,.82); }
.st-card-txt em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; }
.st-card.st-on { box-shadow: 0 0 0 3px var(--acc), 0 24px 40px rgba(0,0,0,.35); }
.st-card[data-world='blocky'] .st-card-txt b { font: 700 32px 'Pixelify Sans', monospace; text-shadow: 3px 3px 0 #2a2a2a; }
.st-card[data-world='toon'] .st-card-txt b { font: 400 32px 'Lilita One', sans-serif; -webkit-text-stroke: 2px #1a1033; paint-order: stroke fill; }
.st-card[data-world='tactical'] .st-card-txt b { font: 400 28px 'Share Tech Mono', monospace; color: #9dffbc; text-transform: uppercase; }
.st-card[data-world='obby'] .st-card-txt b { font: 700 32px 'Fredoka', sans-serif; }
.st-card[data-world='survival'] .st-card-txt b { font: 700 32px 'Oswald', sans-serif; text-transform: uppercase; color: #f0c48a; }
.st-card[data-world='city'] .st-card-txt b { font: 900 34px 'Big Shoulders Display', sans-serif; text-transform: uppercase; color: #ffb27a; }

.st-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.st-how li { position: relative; padding: 26px; border-radius: 20px; background: #16120f; border: 1px solid rgba(255,244,230,.08); font-size: 15.5px; line-height: 1.55; color: rgba(255,244,230,.8); overflow: hidden; }
.st-how li i { display: block; font: 900 64px/1 'Big Shoulders Display', Impact, sans-serif; font-style: normal; color: var(--acc); margin-bottom: 8px; }
.st-how li b { display: block; color: var(--paper); font-size: 17px; margin-bottom: 6px; }

.st-moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.st-m { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 24px; min-height: 236px; background: #16120f; border: 1px solid rgba(255,244,230,.08); }
.st-m > b { display: block; font: 900 58px/1 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 2px; -webkit-text-stroke: 2px #120204; }
.st-m p { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255,244,230,.8); }
.st-m-wasted { background: radial-gradient(120% 80% at 50% 0%, #3a0d12, #120708 70%); } .st-m-wasted > b { color: var(--blood); transform: scale(1.4); opacity: 0; }
.st-m-wasted.st-go > b { animation: st-slam .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes st-slam { 0% { opacity: 0; transform: scale(1.5); } 40% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
.st-m-passed { background: radial-gradient(120% 80% at 50% 0%, #3a2a08, #110c04 70%); } .st-m-passed > b { color: var(--gold); clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.3,.8,.3,1); }
.st-m-passed.st-go > b { clip-path: inset(0 0 0 0); }
.st-m-count { display: block; margin-top: 6px; font: 900 34px 'Big Shoulders Display', Impact, sans-serif; color: #fff4e6; font-variant-numeric: tabular-nums; }
.st-m-stamp > b { display: flex; gap: 12px; -webkit-text-stroke: 0; }
.st-m-stamp em { font-style: normal; font: 900 34px 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 2px; padding: 4px 12px; border: 4px solid currentColor; border-radius: 8px; opacity: 0; transform: rotate(-9deg) scale(1.8); }
.st-m-stamp em:first-child { color: var(--blood); } .st-m-stamp em:last-child { color: var(--gold); transform: rotate(6deg) scale(1.8); }
.st-m-stamp.st-go em:first-child { animation: st-stamp-a .3s cubic-bezier(.2,.9,.3,1.2) .1s forwards; }
.st-m-stamp.st-go em:last-child { animation: st-stamp-b .3s cubic-bezier(.2,.9,.3,1.2) .55s forwards; }
@keyframes st-stamp-a { to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes st-stamp-b { to { opacity: 1; transform: rotate(6deg) scale(1); } }

.st-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.st-vid-hero { margin-bottom: 22px; }
.st-vid { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: #16120f; border: 1px solid rgba(255,244,230,.08); }
.st-vid video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; cursor: pointer; }
.st-vid figcaption { padding: 14px 18px; font-size: 14px; color: rgba(255,244,230,.75); }
.st-vid figcaption b { display: block; font: 900 24px 'Big Shoulders Display', Impact, sans-serif; text-transform: uppercase; color: var(--paper); }
.st-snd { position: absolute; right: 14px; top: 14px; height: 30px; padding: 0 12px; border-radius: 9px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 650; }
.st-snd.on { background: var(--burn); color: #170700; }

.st-real { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
.st-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.st-checks li { position: relative; padding-left: 38px; font-size: 15.5px; line-height: 1.5; color: rgba(255,244,230,.8); }
.st-checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 7px; background: rgba(43,224,122,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BE07A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.st-checks b { color: var(--paper); }
.st-fine { margin-top: 22px; font-size: 13px; color: rgba(255,244,230,.55); line-height: 1.5; }
.st-real-art { display: grid; place-items: center; min-height: 360px; }
.st-vault { position: relative; width: 220px; height: 250px; margin-top: 70px; border-radius: 26px; background: linear-gradient(160deg, #2b2620, #15120f); box-shadow: inset 0 0 0 2px rgba(255,244,230,.12), 0 30px 60px rgba(0,0,0,.5); display: grid; place-content: center; text-align: center; }
.st-vault::before { content: ''; position: absolute; left: 50%; top: -96px; width: 130px; height: 130px; margin-left: -65px; border: 22px solid #6b645b; border-bottom: 0; border-radius: 70px 70px 0 0; transform: translateY(-40px); transition: transform .9s cubic-bezier(.3,1.5,.5,1) .3s; }
.st-in .st-vault::before { transform: none; }
.st-vault b { font: 900 46px 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 3px; color: var(--up); }
.st-vault small { font-size: 13px; color: rgba(255,244,230,.6); }
.st-vault i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #4a443d; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.st-vault i:nth-child(1) { left: 18px; top: 18px; } .st-vault i:nth-child(2) { right: 18px; top: 18px; } .st-vault i:nth-child(3) { left: 18px; bottom: 18px; }

.st-get { text-align: center; padding-bottom: 50px; }
/* the download: one big button, the other ways to get it underneath, then why it's safe */
.st-dl { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }
.st-dl-main { display: inline-flex; align-items: center; gap: 18px; padding: 20px 30px 20px 24px; border-radius: 20px; text-decoration: none; text-align: left; color: var(--btn-ink); background: var(--btn); box-shadow: var(--btn-edge), 0 18px 40px rgba(0,0,0,.35); transition: transform .15s, filter .2s; }
.st-dl-main:hover { transform: translateY(-3px); filter: brightness(1.08); }
.st-dl-main svg { width: 40px; height: 40px; flex: none; }
.st-dl-main b { display: block; font: 900 30px/1 'Big Shoulders Display', Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.st-dl-main small { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.st-dl-alt { display: flex; gap: 22px; font-size: 13.5px; font-weight: 600; }
.st-dl-alt a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,244,230,.7); text-decoration: none; }
.st-dl-alt a:hover { color: var(--acc); }
.st-dl-alt svg { width: 15px; height: 15px; }
.st-trust { margin: 40px auto 0; max-width: 1000px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; }
.st-trust div { padding: 18px 18px 16px; border-radius: 16px; background: #16120f; border: 1px solid rgba(255,244,230,.08); }
.st-trust svg { width: 26px; height: 26px; color: var(--acc); }
.st-trust b { display: block; margin-top: 10px; font-size: 15px; color: var(--paper); }
.st-trust small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255,244,230,.72); }
.st-faq code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgba(255,244,230,.08); color: var(--paper); word-break: break-word; }
.st-steps { list-style: none; counter-reset: s; margin: 40px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.st-steps li { counter-increment: s; padding: 20px; border-radius: 16px; background: #16120f; border: 1px solid rgba(255,244,230,.08); font-size: 14.5px; line-height: 1.5; color: rgba(255,244,230,.78); }
.st-steps li::before { content: counter(s); display: block; font: 900 34px/1 'Big Shoulders Display', Impact, sans-serif; color: var(--acc); margin-bottom: 6px; }
.st-steps b { color: var(--paper); }
.st-get-mobile { display: none; font-size: 15px; color: rgba(255,244,230,.8); line-height: 1.5; max-width: 420px; margin: 18px auto 0; }
.st-faq { list-style: none; margin: 46px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.st-faq li { padding: 18px 20px; border-radius: 16px; background: #16120f; border: 1px solid rgba(255,244,230,.08); font-size: 14.5px; line-height: 1.5; color: rgba(255,244,230,.8); }
.st-faq b { display: block; color: var(--paper); margin-bottom: 4px; }
.st-foot { max-width: 1180px; margin: 60px auto 0; padding: 26px 44px 40px; display: flex; gap: 24px; align-items: center; border-top: 1px solid rgba(255,244,230,.08); font-size: 13px; color: rgba(255,244,230,.55); }
.st-foot .st-logo { font-size: 22px; flex: none; }
.st-foot-links { display: flex; gap: 18px; margin-left: auto; flex: none; }
.st-foot-links a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: rgba(255,244,230,.8); text-decoration: none; }
.st-foot-links a:hover { color: var(--burn); }
.st-foot-links svg { width: 15px; height: 15px; }

/* ---------- smaller desktops ---------- */
@media (max-width: 1180px) { .st-pitch { width: min(520px, 42vw); } .st-top nav { margin-right: 0; } .st-pick { width: 86px; height: 62px; } .st-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 760px) and (min-width: 761px) { .st-pitch { top: 84px; } .st-pitch p { font-size: 16px; margin-top: 12px; } .st-pick { width: 84px; height: 58px; } .hud-hotbar, .hud-hearts { display: none; } }

/* ---------- phones: the visitor's phone is the burner ---------- */
@media (max-width: 760px) {
  .st-hero { height: 100svh; min-height: 560px; }
  .st-top { padding: 0 16px; height: 46px; background: rgba(11,10,9,.92); }
  .st-top nav { display: none; }
  .st-mob-pitch { display: block; font-size: 12px; line-height: 1.3; font-weight: 600; color: rgba(255,244,230,.75); text-align: right; max-width: 210px; }
  .st-logo { font-size: 24px; }
  .st-pitch, .st-keys, .hud, .st-shade { display: none !important; }
  .st-wst { left: 12px; right: 12px; bottom: 12px; width: auto; margin: 0; padding: 10px 14px; }
  .st-wst > b { font-size: 32px; } .st-wst-pf { width: 36px; height: 36px; } .st-wst strong { font-size: 14.5px; } .st-wst em { font-size: 12.5px; } .st-wst u { display: none; }
  .st-picker { position: absolute; margin: 0; left: 0; right: 0; top: 46px; bottom: auto; height: 46px; padding: 6px 10px; gap: 6px; overflow-x: auto; background: rgba(11,10,9,.92); scrollbar-width: none; }
  .st-picker::-webkit-scrollbar { display: none; }
  .st-pick { flex: none; width: auto; height: 34px; padding: 0 12px 0 40px; border-radius: 10px; background-size: 34px 34px; background-position: left center; transform: none !important; }
  .st-pick::after { display: none; }
  .st-pick b { position: static; font-size: 12.5px; line-height: 34px; white-space: nowrap; }
  .st-pick kbd { display: none; }
  .st-pick.st-on { box-shadow: 0 0 0 2px var(--acc); }
  .st-phone-mobile { position: absolute; left: 0; right: 0; top: 92px; bottom: 0; z-index: 10; }
  .st-games, .st-how, .st-moments, .st-watch, .st-real, .st-get { padding: 64px 16px 0; }
  .st-how ol, .st-moments, .st-cards, .st-faq, .st-vids, .st-steps, .st-real { grid-template-columns: 1fr; }
  .st-card { height: 280px; }
  .st-real-art { display: none; }
  .st-m > b { font-size: 46px; }
  .st-dl { display: none; } .st-trust { grid-template-columns: 1fr 1fr; }
  .st-get-mobile { display: block; }
  .st-foot { flex-direction: column; align-items: flex-start; padding: 24px 16px 40px; gap: 10px; }
  .st-foot-links { margin-left: 0; }
}