:root {
  --bg: #07060a;
  --panel: #c3c3c3;
  --panel-dark: #1a1420;
  --green: #39ff14;
  --pink: #ff2bd6;
  --cyan: #00f0ff;
  --red: #ff1f3d;
  --ink: #e9e3ff;
  --muted: #8a7fa3;
  --pixel: 'Press Start 2P', monospace;
  --term: 'VT323', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(circle at 20% 10%, #2a0b2e 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #062b14 0%, transparent 40%),
    var(--bg);
  color: var(--ink);
  font-family: var(--term);
  font-size: 20px;
  overflow-x: hidden;
  cursor: crosshair;
}
.grain, .scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.grain {
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines { background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.25) 2px 3px); }
.hidden { display: none !important; }
.screen { min-height: 100vh; }

/* ---------- Win95 boxes ---------- */
.win {
  background: var(--panel-dark);
  border: 2px solid;
  border-color: #fff #3a3046 #3a3046 #fff;
  box-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 43, 214, .15);
}
.titlebar {
  /* only windows that can actually move get the grab cursor (see .draggable below) */
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(90deg, #6b006b, var(--pink));
  color: #fff; font-family: var(--pixel); font-size: 10px;
  padding: 5px 6px; user-select: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tb-btns i {
  display: inline-block; width: 16px; height: 14px; margin-left: 3px;
  background: var(--panel); color: #000; font-style: normal; font-size: 9px;
  text-align: center; line-height: 14px; border: 1px solid; border-color: #fff #000 #000 #fff;
}
.win-body { padding: 12px; }

.btn {
  font-family: var(--pixel); font-size: 10px; color: #000;
  background: var(--panel); border: 2px solid; border-color: #fff #000 #000 #fff;
  padding: 9px 10px; cursor: pointer; text-transform: uppercase;
}
.btn.pressed, .btn:active { border-color: #000 #fff #fff #000; transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.big { font-size: 13px; padding: 14px; width: 100%; background: var(--green); }
.btn.alt { width: 100%; margin-top: 8px; font-size: 10px; }
.btn.big.pink { background: var(--pink); color: #fff; }
/* keycaps: high contrast on any button color */
kbd {
  display: inline-block; font-family: var(--pixel); font-size: 9px; line-height: 1;
  color: #fff; background: #111; padding: 3px 5px 2px; margin: 0 2px; vertical-align: middle;
  border: 1px solid #fff; border-bottom-width: 3px; border-radius: 3px;
}
.btn kbd { margin-left: 6px; font-size: 9px; }
.btn.pressed kbd, .btn:active kbd { border-bottom-width: 1px; transform: translateY(2px); }
.m-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.m-title .m-name { overflow: hidden; text-overflow: ellipsis; }
.m-key { background: #fff; color: #000; border-color: #000; font-size: 9px; padding: 2px 4px 1px; margin: 0; }
.market-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.keys-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 8px 12px; background: rgba(0, 0, 0, .55); border: 1px dashed #3a3046; font-size: 18px; color: var(--ink); }
.keys-legend b { font-family: var(--pixel); font-size: 9px; color: var(--cyan); font-weight: normal; }
.keys-legend span { display: inline-flex; align-items: center; gap: 2px; }
@media (pointer: coarse) { .btn kbd, .m-key, .hotkeys, .keys-legend, .howto-keys { display: none !important; } }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 16px; margin: 18px 0 10px; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px dashed #3a3046; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tab { flex: 1; font-family: var(--pixel); font-size: 10px; padding: 8px; background: #000; color: var(--muted); border: 2px solid #3a3046; cursor: pointer; }
.tab.active { color: var(--green); border-color: var(--green); }
.err { color: var(--red); min-height: 20px; margin: 0 0 6px; font-size: 18px; }
.hello { font-size: 22px; margin: 6px 0; }
.hello b { color: var(--green); }
.acct-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.acct-stats div { background: #000; border: 1px solid #3a3046; padding: 6px; }
.acct-stats b { display: block; font-family: var(--pixel); font-size: 7px; color: var(--muted); font-weight: normal; }
.acct-stats span { font-size: 22px; color: var(--green); }/* ---------- names: cosmetics other players see ---------- */
.nm { white-space: nowrap; }
.lv { font-family: var(--pixel); font-size: 7px; color: var(--muted); margin-left: 6px; vertical-align: 2px; }
.nc-lime { color: #b6ff00 !important; text-shadow: 0 0 6px rgba(182, 255, 0, .6); }
.nc-hotpink { color: #ff4fd8 !important; text-shadow: 0 0 6px rgba(255, 79, 216, .6); }
.nc-ice { color: #7df9ff !important; text-shadow: 0 0 6px rgba(125, 249, 255, .6); }
.nc-blood { color: #ff6a2b !important; text-shadow: 0 0 6px rgba(255, 106, 43, .6); }
.nc-gold { background: linear-gradient(90deg, #ffe680, #ffb700, #fff2b3, #ffb700); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 0 4px rgba(255, 183, 0, .5)); }
/* ---------- limited effects (only obtainable as serial-numbered limiteds) ---------- */
.nm { position: relative; display: inline-block; }
.nc-glitch { color: #fff !important; text-shadow: 2px 0 rgba(255, 43, 214, .8), -2px 0 rgba(0, 240, 255, .8); animation: g-skew 2.4s infinite steps(1); }
.nc-glitch::before, .nc-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; }
.nc-glitch::before { color: #ff2bd6; clip-path: inset(0 0 58% 0); animation: g-a .9s infinite steps(3); }
.nc-glitch::after { color: #00f0ff; clip-path: inset(58% 0 0 0); animation: g-b 1.1s infinite steps(3); }
@keyframes g-a { 33% { translate: -3px 1px; } 66% { translate: 2px -1px; } }
@keyframes g-b { 33% { translate: 3px 0; } 66% { translate: -2px 1px; } }
@keyframes g-skew { 0%, 90% { transform: none; } 92% { transform: skewX(-12deg); } 96% { transform: skewX(8deg); } }
.nc-inferno { background: linear-gradient(0deg, #ff1f00, #ff7a00 30%, #ffd000 55%, #fff6c2 75%, #ff7a00); background-size: 100% 300%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: inferno 1.1s linear infinite, flicker 2.7s infinite; filter: drop-shadow(0 0 5px rgba(255, 90, 0, .85)); }
@keyframes inferno { to { background-position: 0 -300%; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .85; } 47% { opacity: 1; } 70% { opacity: .9; } }
.nc-chrome { background: linear-gradient(110deg, #5c5c66, #ffffff 18%, #8d8d99 32%, #f2f2f7 48%, #6c6c78 62%, #ffffff 78%, #5c5c66); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: chrome 2.6s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .45)); }
@keyframes chrome { to { background-position: -250% 0; } }
.nc-void { color: #12001f !important; text-shadow: 0 0 2px #c77dff, 0 0 8px #9d4edd, 0 0 18px #6a00ff; animation: void 2.2s ease-in-out infinite; }
@keyframes void { 50% { text-shadow: 0 0 4px #f0c4ff, 0 0 14px #c77dff, 0 0 30px #7b2cff; } }
.bdg { display: inline-block; }
.bfx-gold { filter: drop-shadow(0 0 4px #ffd700); animation: gold-pulse 1.4s ease-in-out infinite; }
@keyframes gold-pulse { 50% { filter: drop-shadow(0 0 9px #ffd700) brightness(1.25); } }
.bfx-spin { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bfx-blink { animation: blink 3.2s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
.ser { font-family: var(--pixel); font-size: 7px; color: #ffd700; margin-left: 5px; vertical-align: 2px; text-shadow: 0 0 4px rgba(255, 215, 0, .6); }
.stamp.fx-glitch { animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) forwards, s-glitch .32s steps(2) .4s infinite; text-shadow: 6px 0 #00f0ff, -6px 0 #ff2bd6; }
@keyframes s-glitch { 50% { clip-path: inset(12% 0 38% 0); translate: 10px 0; } }
.stamp.fx-burn { color: #ff7a00; border-color: #ff3d00; text-shadow: 0 0 18px #ff3d00, 4px 4px 0 #000; animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) forwards, burn .5s ease-in-out .4s infinite alternate; }
@keyframes burn { to { filter: brightness(1.35) drop-shadow(0 0 24px #ff5500); } }
.entrance { position: fixed; top: 92px; left: 50%; translate: -50% 0; z-index: 58; font-family: var(--pixel); font-size: 13px; padding: 14px 26px; border: 3px solid; max-width: calc(100% - 24px); text-align: center; animation: ent-in .45s cubic-bezier(.2, 1.6, .4, 1), ent-out .5s ease-in 3.7s forwards; }
.entrance .ent-icon { font-size: 22px; vertical-align: -3px; }
.entrance .nm, .entrance .bdg { font-family: var(--term); font-size: 22px; }
.entrance.fx-whale { color: #fff; border-color: #7fd4ff; background: linear-gradient(90deg, #00163d, #0077d6, #00163d); background-size: 200% 100%; box-shadow: 0 0 40px rgba(0, 162, 255, .65); animation: ent-in .45s cubic-bezier(.2, 1.6, .4, 1), wave 1.4s linear infinite, ent-out .5s ease-in 3.7s forwards; }
.entrance.fx-king { color: #1a1000; border-color: #fff2a8; background: linear-gradient(90deg, #6b4a00, #ffd700, #fff2a8, #ffd700, #6b4a00); background-size: 200% 100%; box-shadow: 0 0 50px rgba(255, 215, 0, .7); animation: ent-in .45s cubic-bezier(.2, 1.6, .4, 1), wave 2s linear infinite, ent-out .5s ease-in 3.7s forwards; }
@keyframes wave { to { background-position: -200% 0; } }
@keyframes ent-in { from { scale: .5; opacity: 0; } }
@keyframes ent-out { to { opacity: 0; translate: -50% -20px; } }
/* receipt frame swatches (shop + market previews) */
.frame-pv { display: inline-block; font-family: var(--pixel); font-size: 8px; padding: 8px 10px; background: #000; color: var(--ink); border: 4px solid; }
.fr-neon { border-color: #ff2bd6; box-shadow: 0 0 10px #ff2bd6, inset 0 0 8px #00f0ff; }
.fr-matrix { border-color: #39ff14; border-style: dashed; color: #39ff14; text-shadow: 0 0 6px #39ff14; }
.fr-holo { border-image: linear-gradient(45deg, #ff2bd6, #ffd700, #39ff14, #00f0ff, #b026ff) 1; animation: hue 3s linear infinite; }
.fr-goldfoil { border-image: linear-gradient(45deg, #6b4a00, #ffd700, #fff2a8, #ffd700, #6b4a00) 1; border-width: 6px; color: #ffd700; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.ent-pv { display: inline-block; font-family: var(--pixel); font-size: 9px; padding: 6px 8px; border: 2px solid; }
.ent-pv.fx-whale { color: #fff; border-color: #7fd4ff; background: linear-gradient(90deg, #00163d, #0077d6, #00163d); background-size: 200% 100%; animation: wave 1.4s linear infinite; }
.ent-pv.fx-king { color: #1a1000; border-color: #fff2a8; background: linear-gradient(90deg, #6b4a00, #ffd700, #fff2a8, #ffd700, #6b4a00); background-size: 200% 100%; animation: wave 2s linear infinite; }
.stamp-pv.fx-glitch { text-shadow: 2px 0 #00f0ff, -2px 0 #ff2bd6; animation: g-skew 1.2s infinite steps(1); }
.stamp-pv.fx-burn { color: #ff7a00; border-color: #ff3d00; box-shadow: 0 0 10px #ff3d00; }

/* ---------- MARKET.EXE ---------- */
.win.popup.market-win { width: min(980px, 100%); }
.market-btn { background: linear-gradient(90deg, #b026ff, #ff2bd6); color: #fff; }
.mk-status span { font-size: 18px !important; }
.mk-tabs .inbox { display: inline-block; background: var(--red); color: #fff; padding: 1px 5px; margin-left: 4px; font-size: 8px; }
.mk-body { margin-top: 8px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.lim { background: #07060a; border: 2px solid #3a3046; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.lim::before { content: 'LIMITED'; position: absolute; top: 8px; right: -26px; rotate: 35deg; background: linear-gradient(90deg, #b026ff, #ff2bd6); color: #fff; font-family: var(--pixel); font-size: 7px; padding: 3px 28px; }
.lim .pv { min-height: 46px; display: flex; align-items: center; font-size: 26px; }
.lim .ttl { font-family: var(--pixel); font-size: 10px; color: #fff; }
.lim .blurb { color: var(--muted); font-size: 16px; line-height: 1.2; min-height: 38px; }
.lim .px { color: var(--green); font-size: 22px; }
.lim .meta { color: var(--muted); font-size: 16px; }
.lim .bar { height: 6px; background: #2a2236; }
.lim .bar i { display: block; height: 100%; background: linear-gradient(90deg, #b026ff, #ff2bd6); }
.lim .btn { font-size: 9px; padding: 9px 4px; }
.lim .btn.buy { background: linear-gradient(90deg, #b026ff, #ff2bd6); color: #fff; }
.lim .btn.on, .offer .btn.on { background: var(--green); }
.lim .stamp-pv, .mk-rows .stamp-pv { font-family: var(--pixel); font-size: 10px; color: var(--red); border: 3px solid var(--red); padding: 3px 6px; display: inline-block; transform: rotate(-6deg); }
.mk-rows .pv-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lim.equipped { border-color: var(--green); }
.lim .serial { font-family: var(--pixel); font-size: 9px; color: #ffd700; }
.lim .own-count { color: var(--green); }
.lim .row2 { display: flex; gap: 6px; }
.lim .row2 input { margin: 0; padding: 6px; font-size: 18px; flex: 1; min-width: 0; }
.mk-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mk-filter select, .mk-trade input, .mk-trade select { font-family: var(--term); font-size: 20px; background: #000; color: var(--green); border: 2px solid #3a3046; padding: 6px; }
.mk-stats { color: var(--cyan); font-size: 18px; }
.mk-rows { list-style: none; margin: 0; padding: 0; background: #000; border: 1px solid #3a3046; max-height: 46vh; overflow: auto; }
.mk-rows li { display: grid; grid-template-columns: minmax(0, 1.6fr) 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px dashed #2a2236; font-size: 18px; }
.mk-rows .serial { font-family: var(--pixel); font-size: 9px; color: #ffd700; }
.mk-rows .px { color: var(--green); }
.mk-rows .btn { font-size: 9px; padding: 7px 8px; }
.mk-empty { color: var(--muted); text-align: center; padding: 20px; display: block; }
.mk-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-trade h4, .mk-section h4 { font-family: var(--pixel); font-size: 10px; color: var(--pink); margin: 12px 0 6px; font-weight: normal; }
.mk-pick { background: #000; border: 1px solid #3a3046; max-height: 220px; overflow: auto; padding: 6px; }
.mk-pick label { display: flex; gap: 8px; align-items: center; font-family: var(--term); font-size: 18px; color: var(--ink); padding: 3px 0; }
.offer { background: #000; border: 1px solid #3a3046; padding: 10px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; font-size: 17px; }
.offer .side b { font-family: var(--pixel); font-size: 8px; color: var(--muted); display: block; font-weight: normal; margin-bottom: 4px; }
.offer .arrow { font-size: 22px; color: var(--pink); }
.offer .acts { display: flex; flex-direction: column; gap: 6px; }
.offer .acts .btn { font-size: 9px; padding: 7px 8px; }
.offer.done { opacity: .6; }
@media (max-width: 860px) {
  .mk-trade { grid-template-columns: 1fr; }
  .mk-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-rows li .seller { display: none; }
  .offer { grid-template-columns: 1fr; }
}
/* ---------- premium (Hype Coins) effects ---------- */
.nc-neonsign { color: #ffd6f5 !important; text-shadow: 0 0 2px #fff, 0 0 6px #ff2bd6, 0 0 14px #ff2bd6, 0 0 24px #ff2bd6; animation: neon-buzz 3.2s infinite; }
@keyframes neon-buzz { 0%, 18%, 22%, 58%, 62%, 100% { opacity: 1; } 20%, 60% { opacity: .35; text-shadow: none; } }
.nc-plasma { background: linear-gradient(120deg, #7b2cff, #00f0ff, #ff2bd6, #7b2cff); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: plasma 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(123, 44, 255, .6)); }
@keyframes plasma { 50% { background-position: 100% 50%; } }
.bfx-bounce { animation: b-bounce .9s ease-in-out infinite; }
@keyframes b-bounce { 50% { transform: translateY(-4px); } }
.bfx-flash { animation: b-flash 1.6s steps(1) infinite; filter: drop-shadow(0 0 4px #fff200); }
@keyframes b-flash { 0%, 70%, 80% { opacity: 1; } 75% { opacity: .2; } 85% { filter: drop-shadow(0 0 10px #fff200) brightness(1.6); } }
.entrance.fx-bull { color: #021a02; border-color: #b6ff9a; background: linear-gradient(90deg, #0b4d0b, #39ff14, #b6ff9a, #39ff14, #0b4d0b); background-size: 200% 100%; box-shadow: 0 0 40px rgba(57, 255, 20, .6); animation: ent-in .45s cubic-bezier(.2, 1.6, .4, 1), wave 1.4s linear infinite, ent-out .5s ease-in 3.7s forwards; }
.ent-pv.fx-bull { color: #021a02; border-color: #b6ff9a; background: linear-gradient(90deg, #0b4d0b, #39ff14, #0b4d0b); background-size: 200% 100%; animation: wave 1.4s linear infinite; }
.fr-vapor { border-image: linear-gradient(180deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff) 1; color: #ff6ad5; }
.fr-crt { border-color: #1aff6e; border-radius: 10px; color: #1aff6e; background: repeating-linear-gradient(0deg, #001a08 0 2px, #002a10 2px 3px); text-shadow: 0 0 6px #1aff6e; }
/* coin store */
.coin-chip { font-family: var(--term); font-size: 18px !important; color: #000; background: #ffd700; }
.coin-cta { background: linear-gradient(90deg, #ffd700, #ffb700); color: #1a1000; }
.coins-win { width: min(620px, 100%); }
.coins-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.coins-head b { font-family: var(--term); font-size: 32px; color: #ffd700; font-weight: normal; }
.coin-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.coin-packs .pack { background: #000; border: 2px solid #5a4500; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.coin-packs .amt { font-size: 26px; color: #ffd700; }
.coin-packs .bonus { font-family: var(--pixel); font-size: 8px; color: var(--green); min-height: 10px; }
.coin-buy { background: linear-gradient(90deg, #ffd700, #ffb700) !important; color: #1a1000 !important; }
.adult-ok { display: flex; gap: 8px; align-items: center; font-family: var(--term); font-size: 18px; color: var(--ink); margin: 6px 0; }
.adult-ok input { width: auto; margin: 0; }
.shop-item.prem { border-color: #5a4500; }
.prem-tab { color: #ffd700 !important; }
.nc-rainbow { background: linear-gradient(90deg, #ff2bd6, #ffb700, #39ff14, #00f0ff, #ff2bd6); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: holo 2s linear infinite; }
@keyframes holo { to { background-position: 200% 0; } }

/* ---------- level / xp ---------- */
.xp-bar { display: block; height: 4px; background: #2a2236; margin-top: 4px; }
.xp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .4s; }
.stat.lvl span { color: var(--cyan); }
.lvl-card { background: #000; border: 1px solid #3a3046; padding: 8px 10px; margin-bottom: 8px; }
.lvl-card .t { color: var(--cyan); font-size: 22px; }
.lvl-card .x { color: var(--muted); font-size: 16px; float: right; }
.lvl-card .wk { display: block; color: var(--green); font-size: 17px; margin-top: 6px; }
.xp-line { color: var(--cyan); font-size: 18px; margin: 0 0 8px; }
.toast { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 60; background: #000; border: 3px solid var(--cyan); color: var(--cyan); font-family: var(--pixel); font-size: 12px; padding: 14px 18px; text-align: center; box-shadow: 0 0 30px rgba(0, 240, 255, .5); animation: toast-in .3s cubic-bezier(.2, 1.6, .4, 1); max-width: calc(100% - 32px); }
.toast small { display: block; font-family: var(--term); font-size: 20px; color: var(--ink); margin-top: 6px; }
@keyframes toast-in { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

/* ---------- shop ---------- */
.shop-overlay { z-index: 40; }
.shop-win { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.tb-btns i[role=button] { cursor: pointer; }
.shop-head { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.shop-head > div { background: #000; border: 1px solid #3a3046; padding: 6px 8px; }
.shop-head b { display: block; font-family: var(--pixel); font-size: 7px; color: var(--muted); font-weight: normal; }
.shop-head span { font-size: 22px; color: var(--green); }
.shop-tabs { flex-wrap: wrap; margin-top: 10px; }
.shop-tabs .tab { font-size: 8px; padding: 8px 4px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shop-item { background: #000; border: 2px solid #3a3046; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.shop-item.equipped { border-color: var(--green); }
.shop-item.locked { opacity: .55; }
.shop-item .pv { font-size: 24px; min-height: 34px; display: flex; align-items: center; overflow: hidden; }
.shop-item .pv .stamp-pv { font-family: var(--pixel); font-size: 11px; color: var(--red); border: 3px solid var(--red); padding: 3px 6px; transform: rotate(-6deg); }
.shop-item .nmx { font-size: 18px; color: var(--ink); }
.shop-item .price { font-size: 18px; color: var(--green); }
.shop-item .btn { font-size: 9px; padding: 8px 4px; }
.shop-item .btn.own { background: var(--cyan); }
.shop-item .btn.on { background: var(--green); }
/* ---------- leaderboard ---------- */
.board-list { list-style: none; margin: 8px 0 0; padding: 0; background: #000; border: 1px solid #3a3046; max-height: 52vh; overflow: auto; }
.board-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px dashed #2a2236; font-size: 19px; }
.board-list li .rk { font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.board-list li:nth-child(1) .rk { color: #ffd700; } .board-list li:nth-child(2) .rk { color: #d8d8e8; } .board-list li:nth-child(3) .rk { color: #e08a4a; }
.board-list li .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list li .who small { color: var(--muted); font-size: 15px; margin-left: 6px; }
.board-list li .val { color: var(--green); }
.board-list li .val.neg { color: var(--red); }
.board-list li.me { background: rgba(0, 240, 255, .08); outline: 1px solid var(--cyan); }
.board-list .empty { display: block; color: var(--muted); text-align: center; padding: 18px; }
.board-me { margin-top: 8px; color: var(--cyan); font-size: 19px; min-height: 24px; }
.titles { margin-top: 10px; color: var(--muted); }
.titles summary { font-family: var(--pixel); font-size: 9px; cursor: pointer; }
.titles ol { list-style: none; padding: 0; margin: 8px 0 0; columns: 2; }
.titles li { font-size: 17px; }
.titles li.got { color: var(--cyan); }
.stamp.custom { font-size: clamp(32px, 10vw, 100px); }

.reconnect { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff200; color: #000; font-family: var(--pixel); font-size: 11px; padding: 10px 16px; text-align: center; animation: flash .8s steps(2) infinite; }
.fine a { color: var(--cyan); }
/* how to play */
.howto-win { width: min(560px, 100%); }
.howto { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 12px; }
.howto li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; font-size: 20px; line-height: 1.25; }
.howto .hi { font-size: 28px; }
.howto b { font-family: var(--pixel); font-size: 10px; color: var(--green); font-weight: normal; }
.howto b.red { color: var(--red); }
/* ---------- legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; }
.legal h1 { font-family: var(--pixel); font-size: 18px; color: var(--green); text-shadow: 2px 2px 0 var(--pink); }
.legal h2 { font-family: var(--pixel); font-size: 11px; color: var(--pink); margin: 22px 0 8px; line-height: 1.6; }
.legal h3 { font-size: 22px; color: var(--cyan); margin: 14px 0 4px; font-weight: normal; }
.legal p, .legal li { font-size: 20px; line-height: 1.35; }
.legal ul { padding-left: 22px; }
.legal b { color: var(--green); font-weight: normal; }
.legal a { color: var(--cyan); }
.legal a.btn { color: #000; text-decoration: none; display: inline-block; margin: 14px 6px 0 0; }
.legal .tb-btns a { display: inline-block; width: 16px; height: 14px; background: var(--panel); color: #000; font-size: 9px; text-align: center; line-height: 14px; border: 1px solid; border-color: #fff #000 #000 #fff; text-decoration: none; }
.open-banner { background: #fff200; color: #000; font-family: var(--pixel); font-size: 12px; padding: 7px; text-align: center; }
.next-items { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.next-items li { border: 1px solid var(--cyan); color: var(--cyan); padding: 3px 8px; font-size: 18px; }
.next-items li em { color: var(--muted); font-style: normal; }
.roast { color: var(--pink); font-size: 20px; margin: 0 0 8px; font-style: italic; }
.share-btn { background: var(--green); }
.share-preview { font-family: var(--term); font-size: 16px; color: var(--muted); background: #000; border: 1px dashed #3a3046; padding: 8px; margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; }
.what-if { color: var(--pink); font-size: 20px; margin: 0 0 8px; }
.acct-line { color: var(--green); font-size: 20px; margin: 0 0 8px; }
.next-drop { color: var(--cyan); font-size: 18px; margin: 10px 0 0; }
.markets.locked .btn.buy, .markets.locked .btn.sell { opacity: .45; } /* still pressable: the lock lifts on the server's clock, not ours */
.btn.tiny { padding: 6px 8px; font-size: 14px; }
.btn.buy { background: var(--green); }
.btn.buy.max { background: var(--pink); color: #fff; }
.btn.sell { background: var(--cyan); width: 100%; margin-top: 8px; font-size: 12px; padding: 12px; }
/* rug risk: glow, don't resize (a button that changes size under the cursor can lose clicks) */
.btn.sell.hot { animation: hot-glow .5s infinite alternate; background: #fff200; }
@keyframes hot-glow { to { box-shadow: 0 0 0 3px #fff200, 0 0 18px rgba(255, 242, 0, .8); filter: brightness(1.12); } }
/* nothing to sell / no cash: dimmed but still pressable, the server has the final say */
.btn.idle { opacity: .5; }
.btn.idle.pending { opacity: 1; }
.btn.pending { filter: brightness(1.25); }

/* ---------- Join ---------- */
#join { display: grid; place-items: center; padding: 16px; }
.join-win { width: min(520px, 100%); }
.logo { font-family: var(--pixel); color: var(--green); text-shadow: 3px 3px 0 var(--pink); margin: 6px 0; font-size: clamp(22px, 6vw, 38px); letter-spacing: 1px; }
.logo span { color: var(--pink); text-shadow: 3px 3px 0 var(--green); }
.logo small { font-size: .45em; color: var(--cyan); text-shadow: none; }
.logo.small, .logo.small span { font-size: 13px; margin: 0; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.tag { color: var(--cyan); margin: 4px 0 18px; }
label { font-family: var(--pixel); font-size: 10px; color: var(--green); }
input {
  display: block; width: 100%; margin: 8px 0 14px; padding: 10px;
  font-family: var(--term); font-size: 24px; background: #000; color: var(--green);
  border: 2px solid; border-color: #3a3046 #fff #fff #3a3046; outline: none;
}
.fine { color: var(--muted); font-size: 16px; margin: 10px 0 0; }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; background: rgba(7, 6, 10, .92); border-bottom: 2px solid var(--pink);
}
.stat { display: flex; flex-direction: column; min-width: 92px; }
.stat b { font-family: var(--pixel); font-size: 8px; color: var(--muted); font-weight: normal; }
.stat span { font-size: 28px; color: var(--green); line-height: 1; }
.stat.timer span { color: var(--cyan); }
.stat.risk span { color: var(--muted); }
.stat.risk.hot span { color: var(--red); }
.risk-bar { display: block; height: 4px; margin-top: 4px; background: #2a2236; }
.risk-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fff200, var(--red)); transition: width .2s linear; }
#mute { margin-left: auto; }
.presence { padding: 6px 16px; color: var(--pink); font-size: 18px; }
.hud .banner, .hud .open-banner { flex: 0 0 calc(100% + 32px); margin: 0 -16px -10px; order: 99; }
.banner {
  background: var(--red); color: #fff; font-family: var(--pixel); font-size: 11px;
  padding: 7px; white-space: nowrap; overflow: hidden; animation: flash .35s steps(2) infinite;
}

/* ---------- Desk ---------- */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 8px 16px 40px; }
.markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; align-content: start; }
.side { display: flex; flex-direction: column; gap: 16px; }
.market .m-top { display: flex; align-items: center; gap: 10px; }
.market .m-top .m-delta { margin-left: auto; }
.m-icon { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.m-icon:not([src]) { visibility: hidden; }
.next-items img { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: -4px; }
.m-price { font-size: 40px; color: var(--green); text-shadow: 0 0 10px rgba(57, 255, 20, .5); }
.m-delta { font-size: 22px; }
.up { color: var(--green); } .down { color: var(--red); }
.market { min-width: 0; }
.m-chart { display: block; width: 100%; max-width: 100%; height: 150px; min-height: 0; background: #000; border: 1px solid #3a3046; margin: 6px 0; image-rendering: pixelated; }
.m-hold { color: var(--cyan); margin-bottom: 8px; min-height: 24px; }
.m-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.market.pumping { box-shadow: 4px 4px 0 #000, 0 0 30px rgba(57, 255, 20, .5); }
/* you're holding this one: green if it would sell for a profit right now, red if not */
.market.in-green { outline: 3px solid var(--green); outline-offset: -1px; }
.market.in-red { outline: 3px solid var(--red); outline-offset: -1px; }
.btn.sell .sell-label { font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; }

/* ---------- windows: drag, minimize ---------- */
.titlebar { cursor: default; }
.draggable > .titlebar { cursor: grab; touch-action: none; }
.dragging > .titlebar { cursor: grabbing; }
.dragging { z-index: 45 !important; box-shadow: 8px 8px 0 #000, 0 0 30px rgba(255, 43, 214, .35); }
.tb-btns i { cursor: pointer; }
.win.min > :not(.titlebar) { display: none !important; }
.win.min { align-self: start; }
.leave-btn { font-family: var(--pixel); font-size: 9px; }
@media (max-width: 860px) { .leave-btn { font-size: 14px; } .leave-btn .lbl { display: none; } } /* just the icon on phones */
.leave-win { width: min(440px, 100%); }
.leave-msg { font-size: 20px; color: var(--ink); min-height: 26px; }
.leave-row { justify-content: center; }
.leave-go { background: var(--red); color: #fff; }

/* ---------- desktop: fill the screen instead of floating in the top third ---------- */
@media (min-width: 1280px) and (min-height: 620px) {
  #game:not(.hidden) { display: flex; flex-direction: column; height: 100vh; min-height: 620px; }
  .hud, .presence { flex: none; }
  .desk { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px); padding-bottom: 16px; }
  .market-col { min-height: 0; }
  .markets { flex: 1; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
  .market { display: flex; flex-direction: column; min-height: 0; }
  .market > .win-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .market .m-chart { flex: 1 1 0; height: auto; min-height: 140px; }
  .m-price { font-size: clamp(40px, 3vw, 56px); }
  .m-icon { width: 48px; height: 48px; }
  .side { min-height: 0; }
  .side-board { flex: none; }
  .side-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .side-feed .list { flex: 1; max-height: none; }
  .side-feed.min { flex: none; }
}
.list li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed #2a2236; font-size: 18px; }
.list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list li span:last-child { flex-shrink: 0; }
.list li .bot { color: var(--muted); }
.feed li { display: block; font-size: 17px; }
.feed li span:first-child { white-space: normal; overflow: visible; overflow-wrap: anywhere; } /* wrap, don't clip */
.feed .b { color: var(--green); } .feed .s { color: var(--cyan); } .feed .l { color: var(--red); }

.danger .market { animation: shake .25s infinite; }
.danger { --pink: #ff1f3d; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; }
.popup { width: min(560px, 100%); }
.center { text-align: center; }
.big-text { font-family: var(--pixel); font-size: 14px; color: var(--pink); }
.count { font-family: var(--pixel); font-size: 64px; color: var(--green); margin: 10px 0; text-shadow: 4px 4px 0 var(--pink); }

#crash { background: rgba(255, 31, 61, .25); animation: flash .12s steps(2) 6; }
.stamp {
  font-family: var(--pixel); font-size: clamp(40px, 12vw, 120px); color: var(--red);
  border: 10px solid var(--red); padding: 10px 24px; transform: rotate(-12deg) scale(3); opacity: 0;
  animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1) forwards; text-shadow: 4px 4px 0 #000; background: rgba(0,0,0,.6);
}
.stamp.safe { color: var(--green); border-color: var(--green); }
.melt { animation: melt 1.2s ease-in forwards; }

.results-win .awards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.award { border: 2px solid; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.award b { font-family: var(--pixel); font-size: 9px; }
.award span { font-size: 26px; }
.award.genius { border-color: var(--green); color: var(--green); }
.award.bag { border-color: var(--red); color: var(--red); }
.you-line { font-size: 22px; color: var(--cyan); }
.standings { max-height: 180px; background: #000; }
.row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

@keyframes flash { 50% { filter: invert(1); } }
@keyframes pulse { to { transform: scale(1.04); } }
@keyframes shake { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes stamp { to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes melt { to { filter: blur(3px) hue-rotate(90deg); transform: skewY(6deg) translateY(30px); opacity: .3; } }

@media (max-width: 860px) {
  .desk { grid-template-columns: minmax(0, 1fr); padding: 8px 10px 40px; gap: 12px; }
  .markets { gap: 12px; }
  .hud { gap: 8px 12px; padding: 8px 10px; }
  .hud .logo.small { order: -2; flex: 1 1 calc(100% - 60px); }
  #mute { order: -1; padding: 3px 6px; font-size: 12px; }
  .stat { min-width: 0; flex: 1 1 22%; }
  .stat span { font-size: 20px; white-space: nowrap; }
  .m-price { font-size: 32px; }
  .m-chart { height: 110px; }
  .m-btns { gap: 4px; }
  .m-btns .btn { padding: 12px 4px; font-size: 9px; }
  .btn.sell { padding: 14px; }
  .presence { padding: 4px 10px; font-size: 16px; }
  .banner, .open-banner { font-size: 9px; }
  .hud .banner, .hud .open-banner { flex-basis: calc(100% + 20px); margin: 0 -10px -8px; }
  .results-win .awards { grid-template-columns: 1fr; }
  .shop-head { grid-template-columns: 1fr 1fr; }
  .shop-head .shop-lvl { grid-column: 1 / -1; }
  .titles ol { columns: 1; }
}

/* ---------- menu polish ---------- */
/* live ticker tape across the top and bottom of the menu */
#join { padding: 46px 16px; }
.tape {
  position: fixed; left: 0; right: 0; height: 30px; overflow: hidden; z-index: 1;
  background: rgba(0, 0, 0, .72); border-block: 1px solid #2b2236;
  font-family: var(--pixel); font-size: 10px; line-height: 30px; white-space: nowrap;
  contain: layout paint;
}
/* edge fades as overlays (a mask on the moving strip stops browsers from animating it on the GPU) */
.tape::before, .tape::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, #07060a, transparent); }
.tape::after { right: 0; background: linear-gradient(-90deg, #07060a, transparent); }
.tape.top { top: 0; }
.tape.bottom { bottom: 0; }
/* the strip holds the list twice, so sliding it exactly half its width loops seamlessly.
   Speed is set from JS (fixed px per second) once fonts load and the width is known. */
.tape-track {
  display: inline-block; will-change: transform; backface-visibility: hidden;
  animation: tape 45s linear infinite;
}
.tape-track.rev { animation-direction: reverse; }
.tape-track span { margin-right: 34px; color: #b9aed0; }
.tape-track b { font-weight: normal; margin-left: 8px; }
.tape-track .up { color: var(--green); }
.tape-track .dn { color: var(--red); }
.tape-track .rug { color: #000; background: var(--red); padding: 2px 6px; }
@keyframes tape { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.join-win { position: relative; z-index: 2; animation: win-boot .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes win-boot { from { opacity: 0; transform: scale(.94) translateY(8px); filter: brightness(2.4); } }

/* logo: a quick RGB-split glitch every few seconds */
.logo.glitch { position: relative; }
.logo.glitch::before, .logo.glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none;
  opacity: 0; text-shadow: none;
}
.logo.glitch::before { color: var(--cyan); animation: glitch-a 4.2s steps(1) infinite; }
.logo.glitch::after { color: var(--red); animation: glitch-b 4.2s steps(1) infinite; }
@keyframes glitch-a {
  0%, 88%, 100% { opacity: 0; transform: none; clip-path: none; }
  89% { opacity: .85; transform: translate(-4px, -1px); clip-path: inset(0 0 55% 0); }
  91% { opacity: .85; transform: translate(3px, 1px); clip-path: inset(60% 0 0 0); }
  93% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 89%, 100% { opacity: 0; transform: none; clip-path: none; }
  90% { opacity: .75; transform: translate(4px, 1px); clip-path: inset(30% 0 30% 0); }
  92% { opacity: .75; transform: translate(-3px, 0); clip-path: inset(0 0 70% 0); }
  94% { opacity: 0; }
}
.caret { display: inline-block; width: .55em; height: 1em; margin-left: 4px; vertical-align: -2px; background: var(--cyan); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* the big PLAY buttons pulse gently so the next click is obvious */
#guestBtn, #playBtn { position: relative; overflow: hidden; }
#guestBtn::after, #playBtn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }

/* ---------- invite box in the lobby ---------- */
.invite-box {
  display: flex; align-items: stretch; gap: 0; margin: 8px auto 0; max-width: 420px;
  border: 2px solid; border-color: #3a3046 #fff #fff #3a3046; background: #000;
}
.invite-url {
  flex: 1; min-width: 0; padding: 8px 10px; text-align: left;
  font-family: var(--term); font-size: 20px; color: var(--green);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; cursor: text;
}
.invite-url::before { content: '> '; color: var(--pink); }
.invite-box .btn { flex: none; background: var(--cyan); }
.invite-box .btn.copied { background: var(--green); animation: pop .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes pop { 50% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .tape-track, .logo.glitch::before, .logo.glitch::after, .caret, #guestBtn::after, #playBtn::after, .join-win { animation: none !important; }
}