/* ==========================================================================
BLIPNIK — UI KIT (game-level HUD, panels, modals, nameplates)
Stardew/Eastward spirit: dark wood + brass frames, parchment interiors,
teal CRT screens. Every frame is a real 9-slice PNG (assets/ui/frame-*.png,
generated by tools/ui-kit/build.mjs) drawn at --px CSS px per art pixel.
Fonts (load in the page ):
https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=VT323&family=Atkinson+Hyperlegible+Next:ital,wght@0,400..700;1,400..700&display=swap
Pixelify Sans ........ titles, buttons, nameplates, tags (pixel, rounded, has bold)
VT323 ................ CRT readouts: clock, balance, numbers (monospaced = no jitter)
Atkinson Hyperlegible Next ... long text: chat, diary, rules, risk copy
Scope: everything lives under .bn so it never leaks into the host page.
========================================================================== */
.bn {
--px: 2px; /* one UI art pixel */
--f-title: "Pixelify Sans", "Silkscreen", ui-monospace, monospace;
--f-crt: "VT323", ui-monospace, monospace;
--f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
/* line + ink (plum-brown, never flat black) */
--ol: #24141f;
--ink: #3b2432;
--ink-soft: #6e4f4a;
--cream: #fff7e6;
/* parchment */
--paper: #f3e2bd; --paper-hi: #fbf1d8; --paper-lo: #dcc193; --paper-deep: #c4a06d;
/* wood */
--wood-hi: #d08a52; --wood: #9a5638; --wood-lo: #6b3530; --wood-deep: #46222a; --wood-night: #2b1a26;
/* brass */
--brass-hi: #ffe7a3; --brass: #e8b04f; --brass-lo: #b0762f; --brass-deep: #6e4520;
/* CRT */
--crt: #5ff2d5; --crt-mid: #26b3a0; --crt-dim: #1d6b63; --crt-bg: #0f3433; --crt-deep: #08201f;
/* hive */
--hive: #8a4fd6; --hive-hi: #c9a0ff; --hive-text: #dcc4ff; --hive-lo: #4b2585; --hive-deep: #1e0f33;
/* house */
--house: #ffc94a; --house-hi: #fff1a8; --house-lo: #c98a22;
/* signals */
--go: #7be07a; --go-lo: #2f9a58; --warn: #ffb13b; --warn-lo: #b86a14; --stop: #ff5b5b; --stop-lo: #b0324a;
--night: #16111f;
font-family: var(--f-body);
color: var(--ink);
-webkit-font-smoothing: antialiased;
cursor: url("assets/ui/cursor.png") 2 2, auto;
}
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }
.bn button, .bn [role="button"], .bn a, .bn label[for], .bn .is-click, .bn summary {
cursor: url("assets/ui/hand.png") 10 2, pointer;
}
.bn [hidden] { display: none !important; }
.bn :focus-visible { outline: calc(var(--px)) solid var(--crt); outline-offset: calc(2 * var(--px)); }
.bn ::selection { background: var(--crt); color: var(--crt-deep); }
/* ---------- pixel scrollbars ---------- */
.bn ::-webkit-scrollbar { width: calc(6 * var(--px)); height: calc(6 * var(--px)); }
.bn ::-webkit-scrollbar-track { background: rgba(59, 36, 50, .12); }
.bn ::-webkit-scrollbar-thumb { background: var(--brass-lo); box-shadow: inset var(--px) var(--px) 0 var(--brass), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--brass-deep); }
.bn * { scrollbar-color: var(--brass-lo) rgba(59, 36, 50, .12); }
/* ==========================================================================
9-SLICE FRAMES
========================================================================== */
.fr-wood, .fr-wood-dark, .fr-crt, .fr-inset, .fr-card, .fr-brass, .fr-hive, .fr-house, .fr-teal,
.balloon, .fr-bubble {
border-style: solid;
image-rendering: pixelated;
background-clip: padding-box;
}
.fr-wood {
border-width: calc(7 * var(--px));
border-image: url("assets/ui/frame-wood.png") 7 / calc(7 * var(--px)) stretch;
background-color: var(--paper);
background-image: url("assets/ui/tex-paper.png");
background-size: calc(32 * var(--px));
}
.fr-wood-dark {
border-width: calc(6 * var(--px));
border-image: url("assets/ui/frame-wood-dark.png") 6 fill / calc(6 * var(--px)) stretch;
color: var(--paper-hi);
}
.fr-crt {
border-width: calc(5 * var(--px));
border-image: url("assets/ui/frame-crt.png") 5 / calc(5 * var(--px)) stretch;
color: var(--crt);
background:
repeating-linear-gradient(to bottom, rgba(95, 242, 213, .06) 0 var(--px), transparent var(--px) calc(3 * var(--px))),
radial-gradient(120% 100% at 50% 35%, #17524c 0%, #0f3433 55%, #0a2524 100%);
background-clip: padding-box;
}
.fr-inset {
border-width: calc(2 * var(--px));
border-image: url("assets/ui/frame-inset.png") 2 fill / calc(2 * var(--px)) stretch;
}
.fr-card {
border-width: calc(3 * var(--px));
border-image: url("assets/ui/frame-card.png") 3 / calc(3 * var(--px)) stretch;
background-color: var(--paper);
background-image: url("assets/ui/tex-paper.png");
background-size: calc(32 * var(--px));
}
.fr-brass {
border-width: calc(4 * var(--px));
border-image: url("assets/ui/frame-brass.png") 4 fill / calc(4 * var(--px)) stretch;
color: #3a1f10;
}
.fr-hive {
border-width: calc(5 * var(--px));
border-image: url("assets/ui/frame-hive.png") 5 fill / calc(5 * var(--px)) stretch;
color: var(--hive-text);
}
.fr-house {
border-width: calc(4 * var(--px));
border-image: url("assets/ui/frame-house.png") 4 fill / calc(4 * var(--px)) stretch;
color: var(--house-hi);
}
.fr-teal {
border-width: calc(4 * var(--px));
border-image: url("assets/ui/frame-teal.png") 4 fill / calc(4 * var(--px)) stretch;
color: #d9fff6;
}
/* ==========================================================================
TYPE
========================================================================== */
.t-title { font-family: var(--f-title); font-weight: 600; letter-spacing: .02em; line-height: 1.1; }
.t-crt { font-family: var(--f-crt); font-weight: 400; line-height: 1; letter-spacing: .02em; }
.t-body { font-family: var(--f-body); }
.t-label {
font: 600 12px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase;
}
.t-glow { color: var(--crt); text-shadow: 0 0 6px rgba(95, 242, 213, .55), 0 0 1px rgba(95, 242, 213, .9); }
.t-engrave { text-shadow: 0 var(--px) 0 rgba(255, 241, 184, .75); }
.t-drop { text-shadow: 0 var(--px) 0 var(--ol); }
.t-soft { color: var(--ink-soft); }
.t-up { color: #2f9a58; } .t-down { color: #c0344a; }
/* ==========================================================================
ICONS
default = 2x (32px); --1x for dense text, --3x/--4x for showcase slots
========================================================================== */
.ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; display: inline-block; vertical-align: middle; shape-rendering: crispEdges; }
.ico--1x { width: 16px; height: 16px; }
.ico--3x { width: 48px; height: 48px; }
.ico--4x { width: 64px; height: 64px; }
.ico--5x { width: 80px; height: 80px; }
/* ==========================================================================
BUTTONS — pixel outline with notched corners + 3px lip that sinks on press
========================================================================== */
.btn {
--face: var(--paper); --face-hi: var(--paper-hi); --face-lo: var(--paper-lo); --line: var(--ol); --txt: var(--ink);
appearance: none; border: 0; position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: calc(3 * var(--px));
min-height: calc(20 * var(--px));
margin: var(--px);
padding: calc(3 * var(--px)) calc(7 * var(--px)) calc(6 * var(--px));
font: 600 16px/1 var(--f-title); letter-spacing: .02em; color: var(--txt); white-space: nowrap;
background: var(--face);
box-shadow:
inset 0 var(--px) 0 var(--face-hi),
inset var(--px) 0 0 var(--face-hi),
inset 0 calc(-3 * var(--px)) 0 var(--face-lo),
0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
0 calc(3 * var(--px)) 0 0 rgba(20, 10, 20, .35);
transition: transform 60ms steps(1), filter 60ms steps(1);
user-select: none;
}
.btn .ico { width: calc(8 * var(--px) + 8px); height: calc(8 * var(--px) + 8px); margin: calc(-1 * var(--px)) 0; }
.btn:hover { filter: brightness(1.08) saturate(1.05); }
.btn:active, .btn.is-pressed {
transform: translateY(calc(2 * var(--px)));
padding-bottom: calc(4 * var(--px)); padding-top: calc(3 * var(--px));
margin-bottom: calc(3 * var(--px));
box-shadow:
inset 0 var(--px) 0 var(--face-lo),
inset 0 calc(-1 * var(--px)) 0 var(--face-lo),
0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line),
calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
}
.btn:disabled, .btn.is-disabled { filter: grayscale(.8) brightness(.9); opacity: .7; pointer-events: none; }
.btn--primary { --face: #43d6b6; --face-hi: #b8fff0; --face-lo: #1f8f80; --line: #0b3336; --txt: #06282a; }
.btn--brass { --face: #f0bd57; --face-hi: #ffeab0; --face-lo: #b0762f; --line: #4a2a12; --txt: #3a1f10; }
.btn--wood { --face: #9a5638; --face-hi: #d08a52; --face-lo: #5e2f2c; --line: #1a0e16; --txt: var(--paper-hi); }
.btn--wood { text-shadow: 0 var(--px) 0 #3a1c22; }
.btn--danger { --face: #ff6b6b; --face-hi: #ffc2b8; --face-lo: #b0324a; --line: #3f0e1c; --txt: #2a0710; }
.btn--hive { --face: #6d3cb8; --face-hi: #b58cf5; --face-lo: #3a1a6a; --line: #12071f; --txt: #f1e6ff; }
.btn--sm { font-size: 14px; min-height: calc(16 * var(--px)); padding: calc(2 * var(--px)) calc(5 * var(--px)) calc(5 * var(--px)); }
.btn--lg { font-size: 20px; min-height: calc(24 * var(--px)); padding: calc(4 * var(--px)) calc(10 * var(--px)) calc(7 * var(--px)); }
.btn--icon { padding: calc(2 * var(--px)) calc(2 * var(--px)) calc(5 * var(--px)); min-width: calc(20 * var(--px)); }
.btn--icon .ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); margin: 0; }
.btn--block { display: flex; width: calc(100% - 2 * var(--px)); }
.btn kbd { font: 400 16px/1 var(--f-crt); padding: 0 calc(2 * var(--px)); background: rgba(0, 0, 0, .15); }
/* hold-to-confirm fill (used by Sign) */
.btn--hold { overflow: hidden; }
.btn--hold::before {
content: ""; position: absolute; inset: 0 auto calc(3 * var(--px)) 0; width: calc(var(--hold, 0) * 100%);
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 calc(2 * var(--px)), rgba(255, 255, 255, .18) calc(2 * var(--px)) calc(4 * var(--px)));
pointer-events: none;
}
.btn--hold > * { position: relative; }
/* ==========================================================================
TAGS / CHIPS
========================================================================== */
.tag {
--bg: var(--wood-night); --fg: var(--paper-hi); --line: var(--ol);
display: inline-flex; align-items: center; gap: 3px;
font: 700 11px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase;
padding: 2px 4px 3px; margin: 0 var(--px);
color: var(--fg); background: var(--bg);
box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
vertical-align: middle; white-space: nowrap;
}
.tag--ai { --bg: #0f3433; --fg: var(--crt); --line: #06201f; }
.tag--ai::before, .tag--house::before { content: "["; opacity: .7; margin-right: -2px; }
.tag--ai::after, .tag--house::after { content: "]"; opacity: .7; margin-left: -2px; }
.tag--house { --bg: var(--house); --fg: #3a1f10; --line: #4a2a12; }
.tag--hive { --bg: #2a1545; --fg: var(--hive-hi); --line: #0c0414; }
.tag--live { --bg: #d9304a; --fg: #fff1ea; --line: #3f0e1c; }
.tag--live::before { content: ""; width: 5px; height: 5px; background: #fff1ea; animation: bn-blink 1s steps(1) infinite; }
.tag--sim { --bg: var(--paper-lo); --fg: var(--ink); --line: #5a3a30; }
.tag--away { --bg: #4a4658; --fg: #cfd0e0; --line: #1c1a26; }
.tag--ok { --bg: var(--go); --fg: #0f2e18; --line: #1c4a2c; }
.tag--warn { --bg: var(--warn); --fg: #3a1c06; --line: #5a3418; }
.tag--stop { --bg: var(--stop); --fg: #2a0710; --line: #5c1628; }
.tag--new { --bg: var(--crt); --fg: #06282a; --line: #0b3336; }
.badge-count {
position: absolute; top: calc(-3 * var(--px)); right: calc(-3 * var(--px));
min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
font: 700 12px/1 var(--f-title); color: #fff; background: #e0354f;
box-shadow: 0 -2px 0 0 #3f0e1c, 0 2px 0 0 #3f0e1c, -2px 0 0 0 #3f0e1c, 2px 0 0 0 #3f0e1c;
animation: bn-bob 1.6s steps(2) infinite;
}
/* ==========================================================================
METERS
========================================================================== */
.meter {
--v: .5; --c: var(--crt); --c-hi: #b8fff0; --c-lo: var(--crt-mid);
position: relative; height: calc(6 * var(--px)); background: #1c1018;
box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ol), 0 var(--px) 0 0 var(--ol), calc(-1 * var(--px)) 0 0 0 var(--ol), var(--px) 0 0 0 var(--ol);
margin: var(--px);
}
.meter::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%);
background: linear-gradient(to bottom, var(--c-hi) 0 var(--px), var(--c) var(--px) calc(100% - 2 * var(--px)), var(--c-lo) calc(100% - 2 * var(--px)));
}
.meter::after { /* segment ticks */
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(90deg, transparent 0 calc(10% - var(--px)), rgba(28, 16, 24, .55) calc(10% - var(--px)) 10%);
}
.meter--xp { --c: var(--brass); --c-hi: var(--brass-hi); --c-lo: var(--brass-lo); height: calc(4 * var(--px)); }
.meter--hp { --c: var(--go); --c-hi: #d4ffc8; --c-lo: var(--go-lo); }
/* risk pips: */
.pips { display: inline-flex; gap: calc(1 * var(--px)); vertical-align: middle; }
.pips i { width: calc(4 * var(--px)); height: calc(5 * var(--px)); background: #d6c3a0; box-shadow: inset 0 calc(-1 * var(--px)) 0 rgba(0, 0, 0, .15); }
.pips[data-risk="0"] i { background: #d6c3a0; }
.pips[data-risk="1"] i:nth-child(-n+1) { background: var(--go); }
.pips[data-risk="2"] i:nth-child(-n+2) { background: var(--warn); }
.pips[data-risk="3"] i:nth-child(-n+3) { background: #ff8a4a; }
.pips[data-risk="4"] i:nth-child(-n+4) { background: var(--stop); }
.pips--conf { --on: var(--brass); }
.fr-house .pips--conf { --on: var(--house); } .fr-teal .pips--conf { --on: var(--crt); }
.fr-house .pips i, .fr-teal .pips i { background: rgba(255, 255, 255, .16); }
.pips--conf[data-n="1"] i:nth-child(-n+1), .pips--conf[data-n="2"] i:nth-child(-n+2), .pips--conf[data-n="3"] i:nth-child(-n+3), .pips--conf[data-n="4"] i { background: var(--on); }
/* semaphore: */
.lamp {
display: inline-flex; flex-direction: column; gap: var(--px); padding: calc(2 * var(--px));
background: #241a22; box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--ol), 0 var(--px) 0 0 var(--ol), calc(-1 * var(--px)) 0 0 0 var(--ol), var(--px) 0 0 0 var(--ol);
}
.lamp i { width: calc(4 * var(--px)); height: calc(4 * var(--px)); background: #3d2f39; }
.lamp i:nth-child(1) { --on: var(--stop); } .lamp i:nth-child(2) { --on: var(--warn); } .lamp i:nth-child(3) { --on: var(--go); }
.lamp[data-s="stop"] i:nth-child(1), .lamp[data-s="warn"] i:nth-child(2), .lamp[data-s="go"] i:nth-child(3) {
background: var(--on); box-shadow: 0 0 6px var(--on), inset var(--px) var(--px) 0 rgba(255, 255, 255, .55);
}
/* LED */
.led { width: calc(4 * var(--px)); height: calc(4 * var(--px)); background: var(--stop); box-shadow: 0 0 6px var(--stop), inset var(--px) var(--px) 0 #ffd0d0; display: inline-block; }
.led--live { animation: bn-blink 1.2s steps(1) infinite; }
.led--go { background: var(--go); box-shadow: 0 0 6px var(--go), inset var(--px) var(--px) 0 #e8ffe0; }
/* ==========================================================================
FORM FIELDS
========================================================================== */
.field {
width: 100%; min-width: 0; appearance: none; border-style: solid;
border-width: calc(2 * var(--px));
border-image: url("assets/ui/frame-inset.png") 2 fill / calc(2 * var(--px)) stretch;
image-rendering: pixelated;
padding: calc(3 * var(--px)) calc(4 * var(--px));
font: 500 16px/1.2 var(--f-title); color: var(--ink); background: transparent;
cursor: text;
}
.field::placeholder { color: #a3876a; }
.field:focus { outline: none; box-shadow: 0 0 0 var(--px) var(--crt-mid), 0 0 0 calc(2 * var(--px)) var(--crt-deep); }
/* ==========================================================================
NAMEPLATES (world) .plate--human | --ai | --house | --hive | --away
========================================================================== */
.plate {
--bg: rgba(251, 241, 216, .94); --fg: var(--ink); --line: #3a1f26;
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px 3px; margin: var(--px);
font: 600 13px/1 var(--f-title); letter-spacing: .02em; white-space: nowrap;
color: var(--fg); background: var(--bg);
box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line), 0 calc(3 * var(--px)) 0 0 rgba(10, 6, 16, .35);
}
.plate .tag { font-size: 10px; padding: 1px 3px 2px; box-shadow: none; margin: 0 1px 0 -2px; }
.plate .ico { width: 16px; height: 16px; }
.plate--human { }
.plate--you { --bg: #fff7e6; --line: var(--brass-lo); }
.plate--you::after { content: "you"; font: 700 9px/1 var(--f-title); text-transform: uppercase; color: var(--brass-lo); margin-left: 1px; }
.plate--ai { --bg: rgba(10, 36, 36, .92); --fg: #d9fff6; --line: #051816; }
.plate--ai .tag { --bg: var(--crt); --fg: #06282a; }
.plate--house { --bg: rgba(46, 32, 25, .94); --fg: var(--house-hi); --line: #120a06; }
.plate--house .tag { --bg: var(--house); --fg: #3a1f10; }
.plate--hive { --bg: rgba(30, 15, 51, .92); --fg: var(--hive-hi); --line: #0c0414; letter-spacing: .14em; }
.plate--hive .name { animation: hive-glitch 5s steps(1) infinite; }
.plate--away { --bg: rgba(74, 70, 88, .88); --fg: #cfd0e0; --line: #1c1a26; opacity: .8; filter: saturate(.4); }
/* ==========================================================================
SPEECH BALLOONS .balloon (+ --ai --hive --house), tail bottom-left
========================================================================== */
.balloon {
position: relative; display: inline-block; max-width: 250px;
border-width: calc(3 * var(--px));
border-image: url("assets/ui/frame-bubble.png") 3 fill / calc(3 * var(--px)) stretch;
padding: 2px 5px 3px;
font: 500 15px/1.25 var(--f-title); color: var(--ink);
}
.balloon::after {
content: ""; position: absolute; left: calc(6 * var(--px));
bottom: calc(-7 * var(--px)); width: calc(7 * var(--px)); height: calc(6 * var(--px));
background: url("assets/ui/tail.png") 0 0 / 100% 100%; image-rendering: pixelated;
}
.balloon--right::after { left: auto; right: calc(6 * var(--px)); transform: scaleX(-1); }
.balloon--up::after { bottom: auto; top: calc(-7 * var(--px)); transform: scaleY(-1); }
.balloon--up.balloon--right::after { transform: scale(-1, -1); }
.balloon .who { font: 700 11px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.balloon--ai { border-image-source: url("assets/ui/frame-bubble-ai.png"); color: #0b2b2a; }
.balloon--ai::after { background-image: url("assets/ui/tail-ai.png"); }
.balloon--ai .who { color: #1f6b63; }
.balloon--hive { border-image-source: url("assets/ui/frame-bubble-hive.png"); color: var(--hive-text); font-style: italic; }
.balloon--hive::after { background-image: url("assets/ui/tail-hive.png"); }
.balloon--hive .who { color: var(--hive-hi); }
.balloon--house { border-image-source: url("assets/ui/frame-bubble-house.png"); color: #3a1f10; }
.balloon--house::after { background-image: url("assets/ui/tail-house.png"); }
.balloon--house .who { color: #8a5a1a; }
.balloon .caret { display: inline-block; width: calc(3 * var(--px)); height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: bn-blink .8s steps(1) infinite; }
/* ==========================================================================
HIVE voice — purple, italic, lightly glitched
========================================================================== */
.hive-voice { color: var(--hive-text); font-style: italic; text-shadow: 0 0 8px rgba(160, 90, 255, .45); }
/* on parchment the Hive keeps its violet + italic, minus the glow */
.fr-wood .hive-voice, .fr-card .hive-voice, .fr-inset .hive-voice, .fr-brass .hive-voice { color: #5b2d9e; text-shadow: none; }
.hive-glitch { display: inline-block; animation: hive-glitch 6s steps(1) infinite; }
@keyframes hive-glitch {
0%, 88%, 100% { transform: none; text-shadow: 0 0 8px rgba(160, 90, 255, .45); clip-path: none; }
89% { transform: translateX(2px); text-shadow: -2px 0 #ff3d8b, 2px 0 #3dfcff; }
90% { transform: translateX(-2px); text-shadow: 2px 0 #ff3d8b, -2px 0 #3dfcff; clip-path: inset(10% 0 45% 0); }
91% { transform: none; text-shadow: -1px 0 #ff3d8b, 1px 0 #3dfcff; clip-path: inset(55% 0 5% 0); }
92% { transform: translateX(1px); text-shadow: 0 0 8px rgba(160, 90, 255, .45); clip-path: none; }
}
.bn.is-hive-blink .hive-voice, .bn.is-hive-blink .plate--hive { filter: brightness(1.6) saturate(1.4); }
.bn.is-hive-blink .blip-canvas { filter: drop-shadow(0 0 3px rgba(201, 160, 255, .9)); }
/* ==========================================================================
HUD (top bar)
========================================================================== */
.hud {
position: absolute; z-index: 20; top: 10px; left: 12px; right: 12px;
display: flex; align-items: flex-start; gap: 12px; pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__spacer { flex: 1; }
.hud-clock {
display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center;
padding: 3px 12px 5px 8px; min-width: 212px; text-align: left; font: inherit;
}
.hud-clock > .ico { grid-row: 1 / 3; }
.hud-clock__label { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-title); letter-spacing: .1em; color: var(--brass-hi); text-transform: uppercase; }
.hud-clock__time { font: 400 38px/.8 var(--f-crt); color: var(--crt); text-shadow: 0 0 8px rgba(95, 242, 213, .6); letter-spacing: .02em; }
.hud-clock.is-soon .hud-clock__time { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 200, 80, .7); animation: bn-blink 1s steps(1) infinite; }
.hud-zone {
margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
font: 600 13px/1 var(--f-title); color: var(--paper-hi); padding: 4px 8px 5px;
background: rgba(36, 20, 31, .78);
box-shadow: 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol);
}
.hud-zone .ico { width: 16px; height: 16px; }
.loyalty { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 2px 8px 4px; width: 330px; }
.loyalty__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font: 600 11px/1 var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-lo); padding: 0 2px; }
.loyalty__head b { color: var(--brass-hi); font-weight: 700; }
.loyalty__head .you { color: #ffb3a6; } .loyalty__head .them { color: var(--hive-hi); }
.tug {
--v: .62; position: relative; height: calc(8 * var(--px));
background: linear-gradient(to bottom, #c9a0ff 0 var(--px), #7d45cc var(--px) calc(100% - 2 * var(--px)), #4b2585 calc(100% - 2 * var(--px)));
box-shadow: 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol);
margin: 0 2px;
}
.tug::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%);
background: linear-gradient(to bottom, #ffd0c2 0 var(--px), #ff7a6b var(--px) calc(100% - 2 * var(--px)), #c0344a calc(100% - 2 * var(--px)));
transition: width .6s steps(12);
}
.tug::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(20, 8, 20, .45) calc(10% - 2px) 10%); }
.tug__knot {
position: absolute; z-index: 2; top: 50%; left: calc(var(--v) * 100%);
width: 20px; height: 24px; transform: translate(-50%, -50%);
background: var(--brass); box-shadow: inset 2px 2px 0 var(--brass-hi), inset -2px -2px 0 var(--brass-lo), 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol);
transition: left .6s steps(12);
}
.tug__knot::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 12px; transform: translateX(-50%); background: var(--brass-deep); }
.hud-money { display: flex; align-items: center; gap: 8px; padding: 2px 12px 4px 6px; }
.hud-money__amt { font: 400 34px/.85 var(--f-crt); color: var(--crt); text-shadow: 0 0 8px rgba(95, 242, 213, .55); }
.hud-money__unit { font: 600 11px/1 var(--f-title); letter-spacing: .1em; color: var(--brass-hi); text-transform: uppercase; align-self: flex-end; margin-bottom: 4px; }
.hud-money__delta { font: 400 18px/1 var(--f-crt); color: var(--go); align-self: flex-start; margin-top: 2px; }
.hud-bell { position: relative; }
.hud-bell.is-ringing .ico { animation: bn-ring 1.2s steps(1) infinite; transform-origin: 50% 10%; }
.notif-pop { position: absolute; z-index: 40; right: 12px; top: 74px; width: 320px; padding: 6px 8px 8px; }
.notif-pop h4 { margin: 0 0 6px; font: 700 14px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.notif { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 6px 4px; font-size: 14px; line-height: 1.3; }
.notif + .notif { border-top: 2px dotted var(--paper-deep); }
.notif small { display: block; color: var(--ink-soft); font: 500 11px/1.4 var(--f-title); letter-spacing: .04em; }
/* ==========================================================================
BLIPNIK PANEL (right side; bottom drawer on phones)
========================================================================== */
.blip-panel {
position: absolute; z-index: 15; right: 12px; top: 84px; bottom: 12px; width: 352px;
display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 4px;
}
.blip-panel__tab { /* folder tab on top of the frame */
position: absolute; top: calc(-19 * var(--px)); left: 10px; padding: 4px 10px 6px;
font: 700 13px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-hi);
background: var(--wood); box-shadow: inset 0 2px 0 var(--wood-hi), 0 -2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol);
text-shadow: 0 2px 0 #3a1c22;
}
.bp-peek { display: none; }
.bp-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.portrait { position: relative; width: calc(144px + 10 * var(--px)); height: calc(144px + 10 * var(--px)); padding: 0; flex: none; }
.portrait .blip-canvas { display: block; width: 144px; height: 144px; image-rendering: pixelated; }
.portrait__lvl {
position: absolute; left: -6px; bottom: -8px; z-index: 2;
font: 700 12px/1 var(--f-title); letter-spacing: .06em; padding: 3px 5px 4px; color: #3a1f10; background: var(--brass);
box-shadow: inset 2px 2px 0 var(--brass-hi), inset -2px -2px 0 var(--brass-lo), 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol);
}
.portrait__rec { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; gap: 4px; font: 400 16px/1 var(--f-crt); color: var(--crt); opacity: .8; }
.bp-id { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.bp-name { font: 700 22px/1 var(--f-title); color: var(--ink); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.bp-name .tag { font-size: 11px; }
.bp-line { display: flex; align-items: center; gap: 6px; font: 600 13px/1.1 var(--f-title); color: var(--ink-soft); }
.bp-line b { color: var(--ink); font-weight: 700; }
.bp-line .ico { width: 16px; height: 16px; }
.bp-xp { display: grid; gap: 3px; }
.bp-xp span { display: flex; justify-content: space-between; font: 600 11px/1 var(--f-title); color: var(--ink-soft); letter-spacing: .06em; }
.bp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 4px; align-items: center; padding: 3px 4px 3px; min-width: 0; }
.stat .ico { grid-row: 1 / 3; width: 16px; height: 16px; }
.stat b { font: 400 22px/.8 var(--f-crt); color: var(--ink); }
.stat small { font: 600 9px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.tabs { display: flex; gap: 2px; padding: 0 2px; margin-bottom: -8px; position: relative; z-index: 1; }
.tabs button {
appearance: none; border: 0; display: inline-flex; align-items: center; gap: 4px;
font: 700 13px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase;
padding: 5px 9px 9px; color: var(--ink-soft); background: var(--paper-lo);
box-shadow: inset 0 2px 0 #ead3a4, 0 -2px 0 0 #7a4a3a, -2px 0 0 0 #7a4a3a, 2px 0 0 0 #7a4a3a;
margin: 2px 2px 0; transform: translateY(2px);
}
.tabs button .ico { width: 16px; height: 16px; }
.tabs button[aria-selected="true"] { color: var(--ink); background: #f8ebcd; transform: none; box-shadow: inset 0 2px 0 #fff8e6, 0 -2px 0 0 #7a4a3a, -2px 0 0 0 #7a4a3a, 2px 0 0 0 #7a4a3a; }
.tabs .dot { width: 6px; height: 6px; background: #e0354f; box-shadow: 0 0 0 1px #3f0e1c; }
.tab-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 6px 6px; }
/* chat */
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { font: 400 14px/1.35 var(--f-body); max-width: 92%; }
.msg__who { display: flex; align-items: center; gap: 4px; font: 700 11px/1 var(--f-title); letter-spacing: .05em; margin-bottom: 3px; color: var(--ink-soft); }
.msg__who time { font-weight: 500; opacity: .7; margin-left: auto; padding-left: 8px; }
.msg__body { padding: 5px 8px 6px; background: #fffaf0; box-shadow: 0 -2px 0 0 #b8915f, 0 2px 0 0 #b8915f, -2px 0 0 0 #b8915f, 2px 0 0 0 #b8915f, inset 0 -2px 0 #ead9b6; }
.msg--me { align-self: flex-end; }
.msg--me .msg__who { justify-content: flex-end; }
.msg--me .msg__body { background: #fbe6c0; box-shadow: 0 -2px 0 0 #b0762f, 0 2px 0 0 #b0762f, -2px 0 0 0 #b0762f, 2px 0 0 0 #b0762f, inset 0 -2px 0 #efcf98; }
.msg--ai .msg__who { color: #1f6b63; }
.msg--ai .msg__body { background: #e6fbf5; box-shadow: 0 -2px 0 0 #1f8f80, 0 2px 0 0 #1f8f80, -2px 0 0 0 #1f8f80, 2px 0 0 0 #1f8f80, inset 0 -2px 0 #bfeee2; color: #0b2b2a; }
.msg--hive { max-width: 100%; }
.msg--hive .msg__who { color: #6b3fb0; }
.msg--hive .msg__body { background: #2a1545; color: var(--hive-text); font-style: italic; box-shadow: 0 -2px 0 0 #0c0414, 0 2px 0 0 #0c0414, -2px 0 0 0 #0c0414, 2px 0 0 0 #0c0414, inset 0 2px 0 #3d2166; text-shadow: 0 0 6px rgba(160, 90, 255, .5); }
.msg--sys { align-self: center; max-width: 100%; font: 600 12px/1.2 var(--f-title); color: var(--ink-soft); display: flex; align-items: center; gap: 6px; letter-spacing: .03em; }
.msg--sys::before, .msg--sys::after { content: ""; width: 18px; height: 2px; background: var(--paper-deep); }
.chat-input { display: flex; gap: 6px; align-items: center; }
.chat-input .field { font-family: var(--f-body); font-size: 14px; }
/* diary: lined paper */
.diary { display: flex; flex-direction: column; gap: 10px; }
.diary__entry {
padding: 6px 10px 8px 22px; position: relative;
background: #fffaf0 repeating-linear-gradient(to bottom, transparent 0 21px, #d8e6ee 21px 22px);
background-position: 0 5px;
box-shadow: 0 -2px 0 0 #b8915f, 0 2px 0 0 #b8915f, -2px 0 0 0 #b8915f, 2px 0 0 0 #b8915f;
font: 400 14px/22px var(--f-body); color: #3b2432;
}
.diary__entry::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: #f2a3a3; }
.diary__entry h5 { margin: 0; font: 700 13px/22px var(--f-title); letter-spacing: .04em; display: flex; align-items: center; gap: 4px; color: #6b3530; }
.diary__entry h5 .tag { font-size: 9px; }
.diary__entry p { margin: 0; }
.diary__entry .hive-voice { color: #6b3fb0; text-shadow: none; }
.stat-table { width: 100%; border-collapse: collapse; font: 400 14px/1.3 var(--f-body); }
.stat-table td { padding: 5px 4px; border-bottom: 2px dotted var(--paper-deep); }
.stat-table td:last-child { text-align: right; font: 400 20px/1 var(--f-crt); }
.bp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; align-items: center; }
.bp-actions .btn { font-size: 15px; }
.bp-actions .btn:first-child { grid-column: 1 / -1; }
/* ==========================================================================
OVERLAYS + MODALS
========================================================================== */
.overlay {
position: absolute; inset: 0; z-index: 50; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 34px 20px 20px;
background: radial-gradient(ellipse at 50% 45%, rgba(22, 17, 31, .55) 0%, rgba(12, 8, 18, .86) 75%);
animation: bn-fade .18s steps(3);
}
.modal { position: relative; width: min(100%, 1000px); max-height: 100%; display: flex; flex-direction: column; padding: 14px 16px 12px; animation: bn-pop .22s steps(4); }
.modal__title {
position: absolute; top: calc(-15 * var(--px)); left: 50%; transform: translateX(-50%); z-index: 3; margin: 0;
padding: 4px 22px 6px; white-space: nowrap;
font: 700 22px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase;
text-shadow: 0 2px 0 rgba(255, 241, 184, .7);
display: flex; align-items: center; gap: 8px;
}
.modal__close { position: absolute; top: calc(-12 * var(--px)); right: calc(-8 * var(--px)); z-index: 4; }
.modal__body { overflow: auto; min-height: 0; padding: 22px 4px 4px; }
.modal__foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; margin-top: 6px; border-top: 2px dashed var(--paper-deep); }
.modal__foot .grow { flex: 1; }
.section-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 15px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--wood-lo); }
.section-h::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--paper-deep) 0 4px, transparent 4px 8px); }
.section-h small { font: 500 12px/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.note { font: 400 13px/1.35 var(--f-body); color: var(--ink-soft); }
/* ---------- CREATE YOUR BLIPNIK ---------- */
.create { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.create__stage { display: grid; gap: 12px; align-content: start; }
.launchpad { position: relative; height: 230px; display: grid; place-items: end center; overflow: hidden; }
.launchpad .blip-canvas { width: 216px; height: 216px; image-rendering: pixelated; }
.launchpad__stars { position: absolute; inset: 0; pointer-events: none; background:
radial-gradient(circle, #5ff2d5 0 1px, transparent 2px) 10px 20px / 60px 50px,
radial-gradient(circle, #9fdcff 0 1px, transparent 2px) 34px 8px / 80px 64px; opacity: .45; }
.launchpad__label { position: absolute; left: 8px; top: 6px; font: 400 18px/1 var(--f-crt); color: var(--crt); opacity: .8; }
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 48px)); gap: 10px; }
.swatch {
appearance: none; border: 0; aspect-ratio: 1; position: relative; margin: 2px;
background: linear-gradient(135deg, var(--hi) 0 30%, var(--c) 30% 70%, var(--lo) 70%);
box-shadow: 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol), inset -2px -2px 0 var(--lo), inset 2px 2px 0 var(--hi);
}
.swatch[aria-checked="true"] { transform: translateY(-2px); box-shadow: 0 -2px 0 0 var(--ol), 0 2px 0 0 var(--ol), -2px 0 0 0 var(--ol), 2px 0 0 0 var(--ol), 0 0 0 4px var(--brass), 0 0 0 6px var(--ol), 0 6px 0 2px rgba(0, 0, 0, .25); }
.name-row { display: flex; gap: 6px; align-items: center; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.class-card {
appearance: none; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-content: start;
padding: 7px 8px 8px; position: relative; font: inherit; color: inherit;
transition: transform 80ms steps(2);
}
.class-card .ico { grid-row: 1 / 3; }
.class-card h4 { margin: 0; font: 700 17px/1 var(--f-title); letter-spacing: .04em; align-self: end; }
.class-card .rule { grid-column: 1 / -1; font: 400 13.5px/1.3 var(--f-body); color: var(--ink); margin-top: 4px; }
.class-card .risk { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 11px/1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.class-card .risk b { color: var(--ink); }
.class-card:hover { transform: translateY(-2px); }
.class-card[aria-checked="true"] { border-image-source: url("assets/ui/frame-teal.png"); border-image-slice: 4; border-width: calc(3 * var(--px)); border-image-width: calc(4 * var(--px)); background: #e6fbf5; }
.class-card[aria-checked="true"]::after { content: "PICKED"; position: absolute; right: 4px; top: 4px; font: 700 10px/1 var(--f-title); letter-spacing: .08em; padding: 2px 4px 3px; background: var(--crt); color: #06282a; box-shadow: 0 0 0 2px #0b3336; }
.ai-notice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 12px 10px 8px; font: 400 14px/1.4 var(--f-body); }
.ai-notice strong { font: 700 15px/1.2 var(--f-title); letter-spacing: .04em; display: block; margin-bottom: 2px; color: var(--crt); }
.ai-notice p { margin: 0; color: #d9fff6; }
/* ---------- COUNTDOWN overlay ---------- */
.overlay--countdown { place-items: stretch; padding: 64px 24px 16px; background:
radial-gradient(ellipse at 40% 30%, rgba(80, 30, 140, .35) 0%, rgba(20, 8, 36, .78) 55%, rgba(8, 4, 14, .92) 100%); }
.cd { display: grid; align-content: center; gap: 16px; justify-items: center; min-height: 0; max-height: 100%; }
.cd__hive { display: flex; align-items: center; gap: 14px; max-width: 760px; }
.cd__hive .balloon { font-size: 18px; max-width: 520px; }
.cd__orb { position: relative; width: 144px; height: 144px; flex: none; animation: bn-float 3s steps(6) infinite; }
.cd__orb canvas { width: 144px; height: 144px; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(160, 90, 255, .75)); }
.cd__clock { position: relative; padding: 4px 34px 10px; text-align: center; }
.cd__kicker { font: 600 13px/1 var(--f-title); letter-spacing: .16em; color: var(--brass-hi); text-transform: uppercase; display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 2px; }
.cd__time { font: 400 136px/.78 var(--f-crt); color: var(--crt); text-shadow: 0 0 18px rgba(95, 242, 213, .7), 0 0 2px #e6fffa; letter-spacing: .02em; }
.cd__time.is-final { color: #ffd76a; text-shadow: 0 0 22px rgba(255, 200, 80, .85); }
.cd__theses { width: 100%; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-content: start; overflow: auto; min-height: 0; padding: 4px; }
.thesis { padding: 6px 10px 8px; display: grid; gap: 5px; align-content: start; animation: bn-slide .35s steps(5) both; }
.thesis__who { display: flex; align-items: center; gap: 6px; font: 700 14px/1 var(--f-title); letter-spacing: .03em; }
.thesis__who .ico { width: 24px; height: 24px; }
.thesis__text { font: 400 14px/1.35 var(--f-body); }
.thesis__meta { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; }
.thesis__meta .conf { margin-left: auto; opacity: .85; }
.stance { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px 3px; font: 700 12px/1 var(--f-title); }
.stance--in { background: var(--go); color: #0f2e18; box-shadow: 0 0 0 2px #1c4a2c; }
.stance--out { background: var(--stop); color: #2a0710; box-shadow: 0 0 0 2px #5c1628; }
.stance--watch { background: #cfd0e0; color: #1c1a26; box-shadow: 0 0 0 2px #1c1a26; }
.fr-house .thesis__text { color: #ffeccc; }
.fr-teal .thesis__text { color: #d9fff6; }
.cd__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rules-banner { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 6px; font: 700 14px/1 var(--f-title); letter-spacing: .1em; text-transform: uppercase; color: #3a1f10; }
/* ---------- RISK CARD ---------- */
.risk { width: min(100%, 960px); }
.risk__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px 16px; align-items: start; }
.risk__head { grid-column: 1 / -1; }
.risk__side { display: grid; gap: 10px; }
.risk__main { display: grid; gap: 10px; }
.risk__main .balloon { max-width: none; margin: 0 0 8px 2px; }
.risk__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.risk__head .mini { width: calc(72px + 10 * var(--px)); height: calc(72px + 10 * var(--px)); }
.risk__head .mini .blip-canvas { width: 72px; height: 72px; image-rendering: pixelated; display: block; }
.risk__trade { font: 700 22px/1.1 var(--f-title); }
.risk__head { position: relative; }
.stamp {
position: absolute; right: 118px; top: 2px; transform: rotate(-8deg); pointer-events: none;
font: 700 16px/1 var(--f-title); letter-spacing: .14em; text-transform: uppercase; color: #c0344a;
padding: 4px 8px 5px; box-shadow: inset 0 0 0 3px #c0344a, inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(192, 52, 74, .6);
opacity: .9; mix-blend-mode: multiply;
}
.risk__trade small { display: block; font: 500 13px/1.3 var(--f-body); color: var(--ink-soft); margin-top: 2px; }
.risk__quote { text-align: right; font: 600 11px/1.2 var(--f-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.risk__quote b { display: block; font: 400 28px/1 var(--f-crt); color: var(--ink); letter-spacing: 0; }
.risk-rows { display: grid; }
.risk-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 5px 6px; }
.risk-row + .risk-row { border-top: 2px dotted #d9c095; }
.risk-row__k { font: 600 14px/1.15 var(--f-title); }
.risk-row__k small { display: block; font: 400 12px/1.3 var(--f-body); color: var(--ink-soft); }
.risk-row__v { font: 400 22px/1 var(--f-crt); text-align: right; white-space: nowrap; }
.risk-row .tag { min-width: 64px; justify-content: center; }
.fees { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font: 400 14px/1.3 var(--f-body); padding: 6px 8px; }
.fees dt { color: var(--ink-soft); } .fees dd { margin: 0; text-align: right; font: 400 19px/1.1 var(--f-crt); }
.fees .total { border-top: 2px solid var(--paper-deep); padding-top: 4px; color: var(--ink); font-weight: 700; }
.minrecv { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 6px 10px 8px; }
.minrecv__k { font: 600 12px/1.2 var(--f-title); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); }
.minrecv__v { font: 400 34px/.9 var(--f-crt); color: var(--crt); text-shadow: 0 0 8px rgba(95, 242, 213, .55); text-align: right; }
.minrecv p { grid-column: 1 / -1; margin: 0; font: 400 13px/1.35 var(--f-body); color: #bfeee2; }
.rule-box { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 6px 10px 8px; }
.rule-box strong { display: block; font: 700 16px/1.1 var(--f-title); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.rule-box p { margin: 0; font: 400 13.5px/1.35 var(--f-body); }
/* ---------- SHOP ---------- */
.shop { display: grid; grid-template-columns: 150px 1fr 250px; gap: 14px; min-height: 0; }
.shop__cats { display: flex; flex-direction: column; gap: 4px; }
.shop__cats button { justify-content: flex-start; }
.shop__cats button[aria-selected="true"] { --face: #43d6b6; --face-hi: #b8fff0; --face-lo: #1f8f80; --line: #0b3336; --txt: #06282a; text-shadow: none; }
.shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; align-content: start; overflow: auto; padding: 6px; }
.slot { appearance: none; position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; font: inherit; color: inherit; background: transparent; }
.slot .ico { width: 48px; height: 48px; transition: transform 80ms steps(2); }
.slot:hover .ico { transform: translateY(-3px); }
.slot__name { font: 600 13px/1.1 var(--f-title); text-align: center; }
.price { display: inline-flex; align-items: center; gap: 3px; font: 400 20px/1 var(--f-crt); color: var(--ink); }
.price .ico { width: 16px; height: 16px; }
.price.is-short { color: var(--stop-lo); }
.slot .tag { position: absolute; top: -4px; right: -4px; }
.slot.is-selected::before { /* Stardew-style corner brackets */
content: ""; position: absolute; inset: -8px; pointer-events: none; animation: bn-bracket .8s steps(2) infinite;
--b: #fff7e6; --k: #24141f;
background:
linear-gradient(var(--b), var(--b)) 0 0 / 14px 4px, linear-gradient(var(--b), var(--b)) 0 0 / 4px 14px,
linear-gradient(var(--b), var(--b)) 100% 0 / 14px 4px, linear-gradient(var(--b), var(--b)) 100% 0 / 4px 14px,
linear-gradient(var(--b), var(--b)) 0 100% / 14px 4px, linear-gradient(var(--b), var(--b)) 0 100% / 4px 14px,
linear-gradient(var(--b), var(--b)) 100% 100% / 14px 4px, linear-gradient(var(--b), var(--b)) 100% 100% / 4px 14px;
background-repeat: no-repeat;
filter: drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)) drop-shadow(0 -2px 0 var(--k));
}
.shop__preview { display: grid; gap: 10px; align-content: start; }
.shop__stage { height: 170px; display: grid; place-items: center; position: relative; }
.shop__stage .blip-canvas { width: 144px; height: 144px; image-rendering: pixelated; }
.shop__stage .wear-ico { position: absolute; right: 10px; top: 10px; filter: drop-shadow(0 0 6px rgba(95, 242, 213, .5)); }
.shop__desc h4 { margin: 0 0 4px; font: 700 18px/1.1 var(--f-title); }
.shop__desc p { margin: 0; font: 400 13.5px/1.35 var(--f-body); color: var(--ink-soft); }
.keeper { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.fixed-note { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-title); letter-spacing: .06em; text-transform: uppercase; color: var(--go-lo); }
/* floating plates cast a hard pixel shadow on the world */
.blip-panel, .modal, .hud-clock, .hud-money, .loyalty, .demo-dock, .notif-pop { filter: drop-shadow(0 calc(3 * var(--px)) 0 rgba(8, 4, 14, .5)); }
/* ---------- toasts ---------- */
.toasts { position: absolute; z-index: 60; left: 50%; top: 84px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 3px 12px 5px 6px; font: 600 14px/1.2 var(--f-title); animation: bn-toast 4.2s steps(8) both; }
.toast .ico { width: 24px; height: 24px; }
/* zone banner (entering a zone) */
.zone-banner { position: absolute; z-index: 25; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; animation: bn-zone 3.2s steps(10) both; }
.zone-banner b { display: block; font: 700 34px/1 var(--f-title); color: var(--paper-hi); text-shadow: 0 3px 0 var(--ol), 3px 0 0 var(--ol), -3px 0 0 var(--ol), 0 -3px 0 var(--ol), 0 6px 0 rgba(0, 0, 0, .3); letter-spacing: .06em; }
.zone-banner span { font: 600 14px/1 var(--f-title); letter-spacing: .2em; color: var(--brass-hi); text-transform: uppercase; text-shadow: 0 2px 0 var(--ol); }
/* ==========================================================================
ANIMATION (stepped — nothing glides like a web page)
========================================================================== */
@keyframes bn-blink { 50% { opacity: 0; } }
@keyframes bn-bob { 50% { transform: translateY(-2px); } }
@keyframes bn-float { 50% { transform: translateY(-6px); } }
@keyframes bn-ring { 0%, 60%, 100% { transform: none; } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } }
@keyframes bn-fade { from { opacity: 0; } }
@keyframes bn-pop { from { transform: translateY(10px) scale(.97); opacity: 0; } }
@keyframes bn-slide { from { transform: translateY(12px); opacity: 0; } }
@keyframes bn-bracket { 50% { inset: -5px; } }
@keyframes bn-toast { 0% { transform: translateY(-14px); opacity: 0; } 8%, 88% { transform: none; opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes bn-zone { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.bn *, .bn *::before, .bn *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
/* ==========================================================================
PHONE: panel becomes a bottom drawer, modals go full screen
========================================================================== */
@media (max-width: 820px) {
.hud { top: 6px; left: 6px; right: 6px; gap: 4px 6px; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: start; }
.hud-clock { min-width: 0; padding: 2px 8px 4px 4px; column-gap: 6px; }
.hud-clock > .ico { width: 24px; height: 24px; }
.hud-clock__time { font-size: 28px; }
.hud-money__unit { display: none; }
.hud-right { justify-self: end; grid-column: 2; grid-row: 1; }
.hud-clock__label { font-size: 10px; }
.hide-sm { display: none; }
.badge-count { right: -1px; }
.hud-zone { display: none; }
.hud-money { padding: 2px 8px 3px 4px; gap: 4px; }
.hud-money .ico { width: 24px; height: 24px; }
.hud-money__amt { font-size: 26px; }
.hud-money__delta { display: none; }
.loyalty { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 1px 6px 3px; }
.loyalty .ico { width: 24px; height: 24px; }
.hud__spacer { display: none; }
.hud-right { margin-left: auto; }
.notif-pop { right: 6px; left: 6px; width: auto; top: 140px; }
.blip-panel {
left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(86vh, 700px);
transform: translateY(calc(100% - 112px)); transition: transform .28s steps(7);
z-index: 45;
}
.blip-panel.is-open { transform: none; }
.blip-panel__tab { left: 50%; transform: translateX(-50%); top: calc(-17 * var(--px)); display: flex; align-items: center; gap: 6px; }
.blip-panel__tab::after { content: "\25B2"; font-size: 9px; }
.blip-panel.is-open .blip-panel__tab::after { content: "\25BC"; }
.bp-peek { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 58px; appearance: none; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; }
.bp-peek .blip-canvas { width: 72px; height: 72px; image-rendering: pixelated; }
.bp-peek .peek-mini { padding: 0; width: calc(72px + 10 * var(--px)); height: calc(72px + 10 * var(--px)); }
.bp-peek__txt { min-width: 0; }
.bp-peek__txt b { font: 700 16px/1.1 var(--f-title); display: flex; gap: 2px; align-items: center; }
.bp-peek__line { display: block; font: 400 13px/1.3 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0b2b2a; }
.blip-panel.is-open .bp-peek { display: none; }
.portrait { width: calc(108px + 10 * var(--px)); height: calc(108px + 10 * var(--px)); }
.portrait .blip-canvas { width: 108px; height: 108px; }
.overlay { padding: 26px 6px 6px; place-items: stretch; }
.modal { width: 100%; height: 100%; padding: 12px 8px 8px; }
.modal__title { font-size: 15px; padding: 3px 10px 5px; left: 8px; transform: none; max-width: calc(100% - 64px); overflow: hidden; }
.modal__title .ico { width: 24px; height: 24px; }
.modal__close { right: -2px; }
.create { grid-template-columns: 1fr; }
.launchpad { height: 170px; }
.launchpad .blip-canvas { width: 144px; height: 144px; }
.classes { grid-template-columns: 1fr; }
.overlay--countdown { padding: 110px 8px 8px; }
.cd__time { font-size: 84px; }
.cd__hive { flex-direction: column; gap: 6px; }
.cd__orb, .cd__orb canvas { width: 96px; height: 96px; }
.cd__theses { grid-template-columns: 1fr; }
.risk { width: 100%; }
.risk__body { grid-template-columns: 1fr; }
.risk-row { grid-template-columns: auto 1fr auto; row-gap: 4px; }
.risk-row .lamp, .risk-row__k { grid-row: span 2; }
.risk-row__v { font-size: 20px; }
.risk-row .tag { grid-column: 3; justify-self: end; min-width: 0; }
.risk__head { grid-template-columns: auto 1fr; }
.risk__trade { font-size: 18px; }
.risk__quote { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 8px; }
.risk__quote b { font-size: 22px; }
.stamp { right: 6px; top: auto; bottom: 4px; font-size: 13px; }
.shop { grid-template-columns: 1fr; }
.shop__cats { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
.shop__cats button { flex: none; }
.shop__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow: visible; }
.keeper { flex-wrap: wrap; margin-bottom: 8px; }
.keeper .balloon { flex: 1; min-width: 0; }
.keeper .grow { display: none; }
.fixed-note { width: 100%; }
.shop__preview { position: sticky; bottom: -4px; z-index: 2; grid-template-columns: 96px 1fr; gap: 4px 10px; align-items: center; padding: 8px 2px 2px; background: var(--paper) url("assets/ui/tex-paper.png") 0 0 / 64px; border-top: 2px dashed var(--paper-deep); }
.shop__stage { height: 96px; grid-row: span 3; }
.shop__stage .blip-canvas { width: 72px; height: 72px; }
.shop__desc h4 { font-size: 16px; margin: 0; }
.shop__desc p { display: none; }
.shop__preview .btn--block { grid-column: 2; width: calc(100% - 8px); }
.shop__have { display: none; }
.modal__foot { flex-wrap: nowrap; }
.modal__foot .note { display: none; }
.modal__foot .btn--primary { flex: 1; }
.toasts { top: 132px; width: calc(100% - 20px); }
}