/* mytower.fun — a trading tower at night, run like a game HUD: equity on top, the ranking on the left,
   the building in the middle, the selected trader on the right, the tape along the bottom.
   Palette: ink panels with a brass hairline, one brass-gold for headlines and money, green/red only for P&L.
   Type: Archivo (condensed for headlines, expanded for labels), Instrument Sans for reading, Plex Mono for figures. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --bg: #0B0A0E; --panel: #141117; --panel2: #1B171E; --panel3: #221D25; --line: #3A2F24; --line2: #5C4A30;
  --gold: #E9B949; --gold2: #FFD77A; --gold3: #A07C33; --ink: #F3ECDF; --txt: #DCD3C5; --mut: #9A8F80; --mut2: #6C6257;
  --buy: #3DDC84; --sell: #FF5A4E; --majors: #4FC1B0; --hot: #F08A55; --fresh: #86A8FF;
  --disp: "Archivo", "Instrument Sans", system-ui, sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, monospace;
  --barH: 74px; --tapeH: 50px; --fameW: 372px; --profW: 500px;
}
* { box-sizing: border-box; } [hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--txt); font-family: var(--body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.up { color: var(--buy); } .down { color: var(--sell); } .gold { color: var(--gold); }
.lab { font-family: var(--disp); font-stretch: 120%; font-weight: 700; font-size: 10.5px; letter-spacing: .16em; color: var(--mut); text-transform: uppercase; }

/* ── frame ── */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--fameW) 1fr auto; grid-template-rows: var(--barH) 1fr var(--tapeH); grid-template-areas: "bar bar bar" "fame stage prof" "tape tape tape"; }
.app.prof-open { grid-template-columns: var(--fameW) 1fr var(--profW); }

/* ── top bar ── */
.bar { grid-area: bar; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: linear-gradient(180deg, #17131A, #0F0D12); border-bottom: 1px solid var(--line2); box-shadow: 0 1px 0 #000, 0 6px 18px rgba(0,0,0,.45); position: relative; z-index: 20; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; padding-right: 14px; border-right: 1px solid var(--line); height: 54px; flex: none; }
.mark { width: 50px; height: 50px; display: grid; place-items: center; flex: none; }
.mark img { width: 50px; height: 50px; display: block; filter: drop-shadow(0 0 8px rgba(233,185,73,.28)); }
.wm { display: flex; flex-direction: column; gap: 3px; }
.wm b { font-family: var(--disp); font-stretch: 64%; font-weight: 850; font-size: 34px; line-height: .86; letter-spacing: .01em; color: var(--gold); text-shadow: 0 2px 0 #4A3613, 0 0 18px rgba(233,185,73,.25); }
.wm small { font-family: var(--disp); font-stretch: 118%; font-weight: 700; font-size: 9.5px; letter-spacing: .15em; color: var(--gold2); border: 1px solid var(--line2); border-radius: 3px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 5px; }
.live { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1.5px solid #C63A30; border-radius: 4px; font-family: var(--disp); font-stretch: 80%; font-weight: 800; font-size: 15px; letter-spacing: .06em; color: #FFE9E6; background: rgba(198,58,48,.12); flex: none; }
.live i { width: 9px; height: 9px; border-radius: 50%; background: #FF4B3A; box-shadow: 0 0 10px #FF4B3A; animation: blink 1.6s infinite; }
.live .i { width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-family: var(--body); font-weight: 700; }
@keyframes blink { 50% { opacity: .25; } }
.eq { display: flex; flex-direction: column; min-width: 150px; flex: none; }
.eq b { font-family: var(--disp); font-stretch: 78%; font-weight: 800; font-size: 31px; line-height: 1; color: var(--ink); letter-spacing: .01em; }
.eq small { color: var(--mut); font-size: 12px; white-space: nowrap; }
.spark { width: 150px; height: 40px; flex: none; }
.today { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; flex: none; }
.chg { font-family: var(--mono); font-size: 14px; padding: 2px 9px; border-radius: 3px; border: 1px solid; }
.chg.up { color: var(--buy); border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.1); }
.chg.down { color: var(--sell); border-color: rgba(255,90,78,.5); background: rgba(255,90,78,.1); }
.chg.flat { color: var(--mut); border-color: var(--line2); }
.coin { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: #120F14; flex: none; }
.coin b { font-family: var(--disp); font-stretch: 72%; font-weight: 850; font-size: 22px; color: var(--gold); letter-spacing: .02em; }
.coin .ca { font-family: var(--disp); font-stretch: 120%; font-weight: 700; font-size: 10px; color: var(--mut); letter-spacing: .14em; }
.coin .mono { font-size: 13px; color: var(--ink); }
.coin:hover { border-color: var(--gold3); }
.spacer { flex: 1; min-width: 0; }
.tb { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: linear-gradient(180deg, #1C171E, #131016); font-family: var(--disp); font-stretch: 105%; font-weight: 750; font-size: 12.5px; letter-spacing: .1em; color: var(--ink); white-space: nowrap; flex: none; }
.tb b { color: var(--gold2); font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.tb:hover { border-color: var(--gold3); color: var(--gold2); }
.tb.ico { width: 38px; padding: 0; justify-content: center; font-size: 17px; }
.tb.gold { background: linear-gradient(180deg, #F3C95A, #C99A2E); color: #1A1206; border-color: #F7D98A; }
.tb.gold:hover { filter: brightness(1.08); color: #1A1206; }
.tb.dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--mut2); }
.tb.dot.on i { background: var(--buy); box-shadow: 0 0 10px var(--buy); }
#soundBtn:not(.on) #soundWave, #soundBtn.on #soundOff { display: none; }
#privySlot .btn, #privySlot button, #walletBtn { height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 4px; background: #120F14; font-family: var(--disp); font-stretch: 105%; font-weight: 750; font-size: 12.5px; letter-spacing: .08em; color: var(--ink); }
#privySlot span { display: inline-flex; gap: 6px; }
.btn.busy, .busy { opacity: .6; pointer-events: none; }

/* ── panels ── */
.fame, .profile { background: linear-gradient(180deg, #16121A, #0F0C12); position: relative; z-index: 5; min-height: 0; }
.fame { grid-area: fame; display: flex; flex-direction: column; margin: 10px 0 10px 10px; border: 1px solid var(--line2); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px #000; }
.fame::before, .profile::before, .sheet-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(233,185,73,.12); border-radius: 3px; pointer-events: none; }
.fame-h { display: flex; align-items: center; gap: 10px; padding: 16px 16px 0; }
.fame-h h2 { margin: 0; font-family: var(--disp); font-stretch: 64%; font-weight: 850; font-size: 38px; line-height: .9; color: var(--gold); letter-spacing: .02em; text-shadow: 0 2px 0 #4A3613; white-space: nowrap; }
.orn { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold3)); position: relative; }
.orn.r { background: linear-gradient(270deg, transparent, var(--gold3)); }
.orn::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.orn.r::after { right: auto; left: -3px; }
.fold { color: var(--mut); width: 24px; height: 24px; display: grid; place-items: center; }
.fame.folded .ranks, .fame.folded .tabs, .fame.folded .fame-sub { display: none; }
.fame.folded .fold svg { transform: rotate(180deg); }
.fame-sub { margin: 6px 0 12px; text-align: center; color: var(--mut); font-size: 13px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px 10px; }
.tab { text-align: left; padding: 8px 9px; border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 4px; background: #110E13; }
.tab .n { font-family: var(--disp); font-stretch: 112%; font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--ink); }
.tab .p { display: block; font-family: var(--disp); font-stretch: 80%; font-weight: 800; font-size: 19px; line-height: 1.15; }
.tab small { color: var(--mut); font-size: 11.5px; }
.tab.on { background: color-mix(in srgb, var(--c) 14%, #110E13); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.ranks { list-style: none; margin: 0; padding: 0 8px 10px; overflow: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.rank { display: grid; grid-template-columns: 30px 46px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; }
.rank:hover { background: #1A151D; }
.rank.sel { background: linear-gradient(90deg, rgba(233,185,73,.16), rgba(233,185,73,.04)); border-color: var(--gold3); }
.medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--disp); font-stretch: 80%; font-weight: 850; font-size: 14px; color: var(--mut); }
.medal.m1 { background: radial-gradient(circle at 35% 30%, #FFE7A0, #C9962E); color: #2A1B06; box-shadow: 0 0 0 2px #6E5222; }
.medal.m2 { background: radial-gradient(circle at 35% 30%, #F2F2F2, #9DA3AC); color: #1A1C20; box-shadow: 0 0 0 2px #555B63; }
.medal.m3 { background: radial-gradient(circle at 35% 30%, #F5B98A, #A8602E); color: #2A1206; box-shadow: 0 0 0 2px #5E3417; }
.rank .who { min-width: 0; }
.rank .who b { display: block; font-family: var(--disp); font-stretch: 74%; font-weight: 800; font-size: 19px; line-height: 1.05; color: var(--ink); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .who small { color: var(--mut); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rank .who small i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 5px; vertical-align: 1px; }
.rank .pc { font-family: var(--disp); font-stretch: 80%; font-weight: 800; font-size: 19px; color: var(--mut); }
.rank .pc.up { color: var(--buy); } .rank .pc.down { color: var(--sell); }
.rank.open .who b { color: var(--mut); }
.pt { display: block; } .pt.ghost { opacity: .35; filter: grayscale(1); }

/* ── stage ── */
.stage { grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.scene { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.scene.drag { cursor: grabbing; }
.scene svg { width: 100%; height: 100%; display: block; }
.zoomctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.zoomctl button { width: 32px; height: 32px; border-radius: 4px; background: rgba(20,17,23,.9); border: 1px solid var(--line2); color: var(--gold2); font-size: 17px; }
.cards { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(640px, calc(100% - 28px)); display: flex; flex-direction: column; gap: 8px; z-index: 4; pointer-events: none; }
.tcard { pointer-events: auto; display: grid; grid-template-columns: 58px 1fr 18px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 6px; background: linear-gradient(180deg, rgba(28,23,30,.97), rgba(17,14,19,.97)); border: 1.5px solid var(--k, var(--gold3)); box-shadow: 0 12px 30px rgba(0,0,0,.6); cursor: pointer; animation: cardIn .35s cubic-bezier(.2,.9,.3,1.2); }
.tcard.out { animation: cardOut .4s forwards; }
.tcard .k { font-family: var(--disp); font-stretch: 100%; font-weight: 850; font-size: 13px; letter-spacing: .14em; color: var(--k, var(--gold)); }
.tcard .t { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.tcard small { display: block; color: var(--mut); font-size: 13px; margin-top: 2px; }
.tcard .chev { color: var(--mut); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes cardOut { to { opacity: 0; transform: translateY(10px); } }

/* scene text + motion */
.floor-txt { font-family: var(--disp); font-stretch: 118%; font-weight: 800; font-size: 10px; letter-spacing: .16em; fill: #E9C987; opacity: .85; }
.plate-txt { font-family: var(--disp); font-stretch: 100%; font-weight: 800; font-size: 8.5px; letter-spacing: .08em; fill: #2A1C08; }
.screen-txt { font-family: var(--mono); font-size: 9px; fill: #9FF2D2; }
.ledger-txt { font-family: var(--mono); font-size: 12px; fill: #8FE8B8; }
.board-txt { font-family: var(--disp); font-stretch: 115%; font-weight: 800; font-size: 11px; letter-spacing: .12em; fill: #E9C987; }
.core-txt { font-family: var(--disp); font-stretch: 80%; font-weight: 900; font-size: 14px; fill: #E9C987; }
.tank-txt { font-family: var(--disp); font-stretch: 70%; font-weight: 900; font-size: 18px; fill: #3A2614; }
.sign-txt { font-family: var(--disp); font-stretch: 118%; font-weight: 800; font-size: 9px; letter-spacing: .14em; }
.led-txt { font-family: var(--mono); font-size: 13px; fill: #FFB23D; letter-spacing: .12em; }
.neon { font-family: var(--disp); font-stretch: 70%; font-weight: 900; font-size: 40px; fill: #FFE7B0; letter-spacing: .04em; filter: drop-shadow(0 0 4px #FF9D3A) drop-shadow(0 0 12px #FF6A2A); animation: neon 7s infinite; }
@keyframes neon { 0%, 91%, 95%, 100% { opacity: 1; } 92%, 94% { opacity: .45; } }
.room { cursor: pointer; }
.room .hit { fill: transparent; stroke: transparent; stroke-width: 3; transition: stroke .2s; }
.room:hover .hit { stroke: rgba(255,215,122,.45); }
.room.sel .hit { stroke: var(--gold2); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(255,215,122,.8)); }
.room.flash .hit { stroke: var(--buy); animation: blink .5s 6; }
.office.busy .screen-glow { opacity: .9; }
.lamp-glow { animation: flick 6s infinite; }
@keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 49% { opacity: .7; } 51% { opacity: .95; } }
.window-flicker { animation: flick 9s infinite; }
.twinkle { animation: blink 3.5s infinite; }
.beacon { animation: blink 1.4s infinite; }
.beacon.burst { animation: none; r: 16; fill: var(--buy); }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flame .9s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(.88) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
.furnace-hot .flame { animation-duration: .25s; transform: scale(1.4); }
.furnace-hot .furnace-glow { opacity: .7; }
.gauge { transform-box: view-box; animation: gauge 4s ease-in-out infinite alternate; transform-origin: 360px 1401px; }
@keyframes gauge { to { transform: rotate(50deg); } }
.screen.flash-buy { animation: fb 1.6s; } .screen.flash-sell { animation: fs 1.6s; }
@keyframes fb { 20% { fill: #0F5A35; } } @keyframes fs { 20% { fill: #6A1A16; } }
.float { font-family: var(--disp); font-stretch: 72%; font-weight: 900; font-size: 46px; paint-order: stroke; stroke: #120C0A; stroke-width: 6px; animation: rise 2.8s ease-out forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } 12% { opacity: 1; } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-70px); } }
.bubble { animation: pop .3s cubic-bezier(.2,.9,.3,1.4); transform-box: fill-box; transform-origin: 50% 100%; }
.bubble.out { animation: fade .4s forwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes fade { to { opacity: 0; } }
.bubble-txt { font-family: var(--body); font-weight: 600; font-size: 15px; fill: #17110E; }

/* ── profile ── */
.profile { grid-area: prof; margin: 10px 10px 10px 0; border: 1px solid var(--line2); border-radius: 6px; overflow: auto; padding: 18px 18px 22px; box-shadow: 0 10px 30px rgba(0,0,0,.5); scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.px { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border: 1px solid var(--line2); border-radius: 4px; font-size: 20px; color: var(--ink); background: #110E13; z-index: 2; }
.phead { display: grid; grid-template-columns: 136px 1fr; gap: 18px; align-items: center; padding-right: 40px; }
.phead .pt { filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.where { font-family: var(--disp); font-stretch: 118%; font-weight: 800; font-size: 11.5px; letter-spacing: .16em; color: var(--txt); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.where i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.where span + span { border-left: 1px solid var(--line2); padding-left: 10px; color: var(--mut); }
.ptitle { margin: 6px 0 4px; font-family: var(--disp); font-stretch: 64%; font-weight: 900; font-size: 58px; line-height: .86; color: var(--gold); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 3px 0 #4A3613; }
.pname { color: var(--txt); font-size: 15.5px; }
.quote { margin: 16px 0 0; display: flex; gap: 10px; font-size: 18px; line-height: 1.35; color: var(--ink); font-style: italic; font-family: var(--body); }
.quote::before { content: "“"; font-family: var(--disp); font-weight: 900; font-size: 44px; line-height: .8; color: var(--gold); font-style: normal; }
.mates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mate { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: #110E13; text-align: left; }
.mate b { display: block; color: var(--ink); font-size: 13.5px; } .mate small { color: var(--mut); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.psec { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.psec h4 { margin: 0 0 6px; font-family: var(--disp); font-stretch: 118%; font-weight: 800; font-size: 11.5px; letter-spacing: .18em; color: var(--mut); }
.psec p { margin: 0; color: var(--txt); font-size: 14.5px; }
.wallet { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; background: #110E13; }
.wallet .lab { color: var(--gold2); } .wallet a { font-family: var(--mono); color: var(--ink); } .wallet .bal { margin-left: auto; color: var(--txt); font-size: 13.5px; }
.cp { width: 28px; height: 28px; border: 1px solid var(--line2); border-radius: 4px; display: grid; place-items: center; color: var(--mut); }
.made { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 18px; }
.made .big { font-family: var(--disp); font-stretch: 70%; font-weight: 900; font-size: 84px; line-height: .8; color: var(--ink); letter-spacing: -.01em; display: flex; align-items: baseline; gap: 8px; }
.made .big em { font-style: normal; font-stretch: 70%; font-size: 34px; color: var(--gold); }
.made .big.up { color: var(--buy); } .made .big.down { color: var(--sell); }
.made .td { text-align: right; } .made .td .lab { display: block; margin-bottom: 4px; }
.made-sub { color: var(--mut); margin-top: 8px; font-size: 14px; }
.chart { margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; background: #0E0B10; padding: 6px; }
.chart svg { width: 100%; height: 150px; display: block; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { border: 1px solid var(--line); border-top: 2px solid var(--gold3); border-radius: 4px; padding: 8px 10px; background: #110E13; }
.stat b { display: block; font-family: var(--disp); font-stretch: 80%; font-weight: 850; font-size: 22px; color: var(--ink); }
.list .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.list .row:last-child { border-bottom: 0; }
.list .row small { color: var(--mut); display: block; font-size: 12.5px; }
.list .row a { color: var(--gold2); font-size: 12.5px; }
.side { font-family: var(--mono); font-size: 12px; } .side.BUY { color: var(--buy); } .side.SELL { color: var(--sell); }
.empty { color: var(--mut); font-size: 13.5px; padding: 6px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 4px; background: #17131A; font-family: var(--disp); font-stretch: 105%; font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--ink); text-transform: uppercase; }
.btn:hover { border-color: var(--gold3); color: var(--gold2); }
.btn.lit { background: linear-gradient(180deg, #F3C95A, #C99A2E); color: #1A1206; border-color: #F7D98A; }
.btn.lit:hover { color: #1A1206; filter: brightness(1.07); }
.btn.wide { width: 100%; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: 13.5px; } .kv dt { color: var(--mut); } .kv dd { margin: 0; text-align: right; font-family: var(--mono); color: var(--ink); }

/* ── the tape ── */
.tape { grid-area: tape; display: flex; align-items: stretch; background: #070608; border-top: 1px solid var(--line2); box-shadow: 0 -6px 18px rgba(0,0,0,.5); z-index: 20; }
.tape-lab { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; margin: 6px; border-radius: 3px; background: linear-gradient(180deg, #F3C95A, #C99A2E); color: #1A1206; font-family: var(--disp); font-stretch: 76%; font-weight: 900; font-size: 21px; letter-spacing: .06em; flex: none; }
.tape-lab i { width: 10px; height: 10px; border-radius: 50%; background: #C62F24; box-shadow: 0 0 8px #FF4B3A; animation: blink 1.4s infinite; }
.led { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; }
.led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 55%, rgba(0,0,0,.55) 60%) 0 0 / 3px 3px; }
.run { display: inline-flex; gap: 0; white-space: nowrap; font-family: var(--mono); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: #FFB23D; text-shadow: 0 0 6px rgba(255,160,40,.7); animation: marquee 80s linear infinite; padding-left: 20px; }
.run span { padding: 0 18px; } .run .sep { color: #7A5418; padding: 0; }
.run .up { color: #59F29A; text-shadow: 0 0 6px rgba(61,220,132,.7); } .run .down { color: #FF6B5E; text-shadow: 0 0 6px rgba(255,90,78,.7); }
.tape.paused .run { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tape-btn { width: 50px; color: var(--gold2); border-left: 1px solid var(--line); flex: none; }

/* ── sheets (build, how, towers, launch progress) ── */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(5,4,7,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; }
.sheet-card { position: relative; width: min(980px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: linear-gradient(180deg, #19141C, #0F0C12); border: 1px solid var(--line2); border-radius: 8px; padding: 26px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.sheet-card h2 { margin: 0 0 4px; font-family: var(--disp); font-stretch: 64%; font-weight: 900; font-size: 54px; line-height: .9; color: var(--gold); text-transform: uppercase; text-shadow: 0 3px 0 #4A3613; }
.sheet-card .sub { color: var(--mut); margin: 0 0 18px; font-size: 14.5px; }
.cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; }
.fl { display: block; margin-bottom: 12px; } .fl > span { display: block; margin-bottom: 5px; }
.in { width: 100%; height: 42px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--line2); background: #0D0B0F; color: var(--ink); font: inherit; font-size: 15px; }
textarea.in { height: 70px; padding: 10px 12px; resize: vertical; }
.in:focus { outline: none; border-color: var(--gold); }
.drop { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px dashed var(--line2); border-radius: 4px; cursor: pointer; }
.drop .img { width: 52px; height: 52px; border-radius: 50%; background: #1A151D center / cover; display: grid; place-items: center; color: var(--gold); font-size: 22px; border: 1px solid var(--line2); }
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.caps button { height: 40px; border: 1px solid var(--line2); border-radius: 4px; font-family: var(--mono); font-size: 13.5px; background: #0D0B0F; }
.caps button.on { border-color: var(--gold); color: var(--gold2); background: rgba(233,185,73,.1); }
.note { color: var(--mut); font-size: 12.5px; margin: 12px 0 0; }
.cast { display: grid; gap: 10px; }
.cast .desk { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 4px; padding: 8px 10px; background: #110E13; }
.cast h4 { margin: 0 0 6px; font-family: var(--disp); font-stretch: 112%; font-weight: 800; font-size: 11px; letter-spacing: .14em; color: var(--c); }
.cast .who { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; font-size: 13px; color: var(--ink); }
.cast .who small { display: block; color: var(--mut); font-size: 11.5px; }
.steps { display: grid; gap: 8px; margin-top: 12px; counter-reset: s; }
.steps div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 13.5px; }
.steps i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--gold3); display: grid; place-items: center; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold2); }
.steps .done i { background: var(--gold); color: #1A1206; } .steps .now i { box-shadow: 0 0 0 3px rgba(233,185,73,.3); animation: blink 1.2s infinite; }
.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.how .card { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: #110E13; }
.how h3 { margin: 0 0 6px; font-family: var(--disp); font-stretch: 72%; font-weight: 850; font-size: 24px; color: var(--ink); text-transform: uppercase; }
.how p { margin: 0; font-size: 14px; color: var(--txt); }
.tlist { display: grid; gap: 6px; }
.trow { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #110E13; }
.trow img, .trow .ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #241D27; }
.trow b { display: block; font-family: var(--disp); font-stretch: 76%; font-weight: 850; font-size: 20px; color: var(--ink); text-transform: uppercase; }
.trow small { color: var(--mut); }
.trow:hover { border-color: var(--gold3); }
.sx { position: sticky; top: 0; float: right; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 4px; font-size: 22px; background: #110E13; margin: -8px -10px 0 0; z-index: 2; }

.toasts { position: fixed; right: 16px; top: calc(var(--barH) + 12px); z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 4px; background: #17131A; border: 1px solid var(--line2); color: var(--ink); font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-width: 340px; animation: cardIn .3s; }
.toast.ok { border-color: rgba(61,220,132,.6); } .toast.err { border-color: rgba(255,90,78,.7); }

/* ── preloader ── */
#pre { position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 40%, #1E1820, #070608); display: grid; place-content: center; justify-items: center; gap: 14px; transition: opacity .5s, visibility .5s; }
body:not(.booting) #pre { opacity: 0; visibility: hidden; }
.pre-logo { position: relative; width: 190px; height: 190px; -webkit-mask: url(/brand/logo.png) center / contain no-repeat; mask: url(/brand/logo.png) center / contain no-repeat; animation: build 1.3s cubic-bezier(.3,.7,.2,1) both; }
.pre-logo img { width: 100%; height: 100%; display: block; }
.pre-logo .shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,250,225,.95) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat; animation: shine 1.8s .9s ease-in-out infinite; }
@keyframes build { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shine { to { background-position: 200% 0; } }
#pre { --glow: 0 0 60px rgba(233,185,73,.25); } #pre .pre-logo { filter: drop-shadow(var(--glow)); }
.pre-wm { font-family: var(--disp); font-stretch: 64%; font-weight: 900; font-size: 46px; color: var(--ink); letter-spacing: .02em; } .pre-wm b { color: var(--gold); }
.pre-bar { width: 220px; height: 3px; background: #2A2026; border-radius: 2px; overflow: hidden; } .pre-bar i { display: block; height: 100%; width: 10%; background: var(--gold); transition: width .35s; }
.pre-tip { font-family: var(--mono); font-size: 12px; color: var(--mut); }

/* ── smaller screens ── */
@media (max-width: 1800px) { .spark, #ledgerBtn, #xLink { display: none; } }
@media (max-width: 1640px) { .live, #netDot, #soundBtn { display: none; } .bar { gap: 12px; } .tb { padding: 0 10px; } }
@media (max-width: 1500px) { :root { --profW: 450px; --fameW: 330px; } .today { display: none; } .coin .ca { display: none; } }
@media (max-width: 1250px) { #towersBtn, .eq small { display: none; } .ptitle { font-size: 46px; } .made .big { font-size: 64px; } }
@media (max-width: 1000px) {
  body { overflow: auto; }
  .app, .app.prof-open { position: static; display: flex; flex-direction: column; min-height: 100vh; }
  .bar { position: sticky; top: 0; flex-wrap: nowrap; overflow-x: auto; height: 64px; gap: 10px; }
  .eq b { font-size: 24px; } .wm b { font-size: 26px; } .wm small, .coin .ca, #feesBtn, #towersBtn, #helpBtn, #soundBtn, #netDot { display: none; }
  .stage { height: 72vh; flex: none; order: 1; } .fame { order: 2; } .profile { order: 3; } .tape { order: 4; }
  .fame { margin: 10px; max-height: none; } .ranks { overflow: visible; }
  .profile { position: fixed; inset: 64px 0 0 0; margin: 0; border-radius: 10px 10px 0 0; z-index: 30; }
  .tape { position: sticky; bottom: 0; height: 46px; } .run { font-size: 17px; } .tape-lab { font-size: 16px; padding: 0 10px; }
  .cols, .how { grid-template-columns: 1fr; } .sheet-card h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; } .run { animation: none; } }