/* ORCA — meme trading floor v0. Theme: near-black purple, toxic green + hot pink neon. No external fonts (CSP: everything self-hosted). Variable names intentionally match the sol-connect dashboard (--acid/--red/--muted/--line/--fg/--card/--bg) because sol-dash.js emits inline styles that reference them. */ :root{ --acid:#00ff9d; /* primary neon (buttons, longs, positive) */ --pink:#ff3dd8; /* secondary neon */ --red:#ff5c7a; /* shorts / danger */ --bg:#07040d; --card:#0d0916; --line:#241b38; --fg:#efe6ff; --muted:#8a7fa8; --mono:ui-monospace,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,"Courier New",monospace; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--mono);-webkit-user-select:none;user-select:none} #scene{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none} /* touch-action:none → canvas gets continuous pointermove for drag-look; no effect on desktop */ button{font-family:var(--mono)} a{color:var(--acid)} /* ---- scanline / vignette vibe (kept from the hall engine) ---- */ .scan{position:fixed;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,255,157,.018) 0,rgba(0,255,157,.018) 1px,transparent 2px,transparent 4px);mix-blend-mode:screen;opacity:.55} .vig{position:fixed;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(4,2,9,.88)} /* ---- HUD ---- */ #hud{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity 1.4s ease .3s} #hud.on{opacity:1} .hud-top{position:absolute;top:22px;left:24px;display:flex;align-items:center;gap:11px} .hud-top .mark{height:34px;width:auto;filter:drop-shadow(0 0 8px rgba(0,255,157,.55))} .hud-top b{font-weight:800;font-size:1.05rem;letter-spacing:.08em} .hud-sub{font-size:.6rem;letter-spacing:.28em;color:var(--pink)} .hud-tag{position:absolute;top:26px;right:24px;font-size:.6rem;letter-spacing:.28em;color:rgba(255,61,216,.7);text-transform:uppercase;text-align:right} .hud-bottom{position:absolute;left:0;right:0;bottom:30px;text-align:center;padding:0 20px} .hud-bottom h1{font-weight:800;font-size:clamp(1.5rem,5.2vw,2.7rem);line-height:1.05;letter-spacing:-.01em} .hud-bottom h1 span{background:linear-gradient(100deg,var(--acid),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} .hud-bottom p{margin-top:9px;font-size:.78rem;color:rgba(220,205,240,.6);letter-spacing:.02em} .walkbtn{pointer-events:auto;margin:16px auto 0;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#04140c;font-weight:700;padding:13px 26px;border:none;border-radius:100px;background:linear-gradient(180deg,#5cffc0,#00cc7a);cursor:pointer;box-shadow:0 8px 26px -8px rgba(0,255,157,.6);transition:transform .18s,box-shadow .3s} .walkbtn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(0,255,157,.85)} body.walk-on .hud-bottom h1,body.walk-on .hud-bottom p,body.walk-on .hud-tag{opacity:0;pointer-events:none;transition:opacity .3s ease} body.ui-hidden .hud-bottom,body.ui-hidden .hud-tag,body.ui-hidden .walkbtn,body.ui-hidden #walkHint{opacity:0;pointer-events:none;transition:opacity .4s ease} #uiToggle{position:fixed;right:16px;bottom:16px;z-index:10;pointer-events:auto;opacity:0;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#e8dcf5;padding:9px 14px;border:1px solid rgba(0,255,157,.3);border-radius:100px;background:rgba(16,10,28,.6);backdrop-filter:blur(6px);cursor:pointer;transition:opacity .6s ease,background .2s,transform .18s} #uiToggle.show{opacity:.8} #uiToggle:hover{background:rgba(38,22,58,.7);transform:translateY(-1px)} .audiobtn{position:fixed;bottom:58px;z-index:10;width:38px;height:38px;border-radius:50%;pointer-events:auto;opacity:0;color:#e8dcf5;border:1px solid rgba(0,255,157,.3);background:rgba(16,10,28,.6);backdrop-filter:blur(6px);cursor:pointer;transition:opacity .6s ease,background .2s,color .2s;display:flex;align-items:center;justify-content:center;padding:0} .audiobtn.show{opacity:.85} .audiobtn:hover{background:rgba(38,22,58,.7)} .audiobtn svg{width:19px;height:19px;display:block} .audiobtn.off{color:rgba(150,135,175,.45)} #muteToggle{right:16px} #musicToggle{right:62px} #walkHint{display:none;position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:9;font-size:.6rem;letter-spacing:.18em;color:rgba(235,220,250,.85);text-transform:uppercase;background:rgba(14,8,24,.6);padding:9px 18px;border-radius:100px;border:1px solid rgba(0,255,157,.3);backdrop-filter:blur(6px)} body.walk-on #walkHint{display:block} body.walk-on.ui-hidden #walkHint{display:none} #prompt{display:none;position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:11;font-size:.68rem;letter-spacing:.12em;color:#f2eaff;background:rgba(14,8,24,.75);border:1px solid rgba(0,255,157,.5);padding:10px 18px;border-radius:100px;backdrop-filter:blur(8px);pointer-events:none;box-shadow:0 8px 30px -8px rgba(0,0,0,.6)} #prompt.on{display:block;animation:ppop .2s ease} #prompt b{color:var(--acid)} #toast{display:none;position:fixed;left:50%;bottom:172px;transform:translateX(-50%);z-index:14;max-width:min(90vw,460px);text-align:center;font-size:.72rem;letter-spacing:.03em;line-height:1.5;color:#f2eaff;background:rgba(14,8,24,.92);border:1px solid rgba(255,61,216,.55);padding:12px 20px;border-radius:16px;backdrop-filter:blur(8px)} #toast.on{display:block;animation:ppop .25s ease} #toast b{color:var(--acid)} @keyframes ppop{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} /* ---- entry / character select ---- */ #enter{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,rgba(0,255,157,.10) 1.2px,transparent 1.7px) 0 0/22px 22px,radial-gradient(1100px 760px at 50% 42%,#150a24 0%,#07040d 72%);animation:edots 9s linear infinite;transition:opacity 1.1s ease;padding:20px} @keyframes edots{from{background-position:0 0,center}to{background-position:22px 22px,center}} #enter.gone{opacity:0;pointer-events:none;animation:none} /* animation:none — the picker now STAYS in the DOM (see floor.js enterBtn) so "change fighter" can re-show it; without this its 9s edots background keeps burning frames while invisible */ #enter .etitle{font-weight:800;font-size:clamp(1.9rem,8vw,3.2rem);letter-spacing:.06em;background:linear-gradient(100deg,var(--acid),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(0,255,157,.35))} #enter .esub{font-size:.66rem;letter-spacing:.34em;color:rgba(255,61,216,.8);text-transform:uppercase;margin-top:-12px} #enter .epick{font-size:.62rem;letter-spacing:.3em;color:rgba(200,185,225,.6);margin-top:14px} #charRow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .charBtn{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(18,10,30,.7);border:2px solid var(--line);border-radius:16px;padding:12px 14px 10px;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .25s} .charBtn:hover{transform:translateY(-3px);border-color:rgba(0,255,157,.5)} .charBtn.sel{border-color:var(--acid);box-shadow:0 0 26px rgba(0,255,157,.35)} .charBtn canvas{width:84px;height:84px;border-radius:12px;background:#120a1e} .charBtn span{font-size:.62rem;letter-spacing:.14em;color:#e8dcf5;font-weight:700} #enterBtn{pointer-events:auto;margin-top:10px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:#04140c;font-weight:700;padding:15px 34px;border:none;border-radius:100px;background:linear-gradient(180deg,#5cffc0,#00cc7a);cursor:pointer;box-shadow:0 10px 40px -8px rgba(0,255,157,.6);transition:transform .2s,box-shadow .3s} #enterBtn:hover{transform:translateY(-2px)} #enterBtn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)} #enter .eloading{font-size:.6rem;letter-spacing:.24em;color:rgba(170,155,200,.55);text-transform:uppercase} /* ===================== SCREEN PANEL (hosts the real dashboard surfaces) ===================== */ #screenPanel{display:none;position:fixed;inset:0;z-index:30;align-items:center;justify-content:center;background:rgba(5,2,10,.6);backdrop-filter:blur(3px)} #screenPanel.on{display:flex} .spCard{position:relative;width:min(94vw,760px);max-height:88vh;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,rgba(22,12,38,.98),rgba(11,6,20,.98));border:1px solid rgba(0,255,157,.35);border-radius:20px;padding:22px 22px 18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85);font-size:14px;line-height:1.5} .spCard::-webkit-scrollbar{width:9px}.spCard::-webkit-scrollbar-thumb{background:rgba(0,255,157,.4);border-radius:5px}.spCard::-webkit-scrollbar-track{background:transparent} .spClose{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(190,170,230,.3);background:rgba(30,18,48,.6);color:#e8dcf5;cursor:pointer;font-size:.8rem;z-index:2} .spClose:hover{background:rgba(50,30,80,.7)} .spHead{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-right:38px;flex-wrap:wrap} .spDot{width:12px;height:12px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px currentColor;color:var(--acid);flex:none} #spTitle{font-weight:800;font-size:1.15rem;letter-spacing:.12em} .spBadge{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#ffcf6b;border:1px solid rgba(255,207,107,.5);border-radius:20px;padding:3px 10px} /* START HERE is long-form prose, not a data readout, so give it a wider column and it scrolls far less. Scoped with :has() so every other screen keeps the 760px card; a browser without :has() support simply keeps the default width. */ #screenPanel:has(section[data-screen="README"].on) .spCard{width:min(94vw,1040px)} #screenPanel section{display:none} #screenPanel section.on{display:block} /* ---- dashboard surface styles (ported from the sol-connect dashboard, degen palette) ---- */ .hide{display:none!important} .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px} .card.acc{border-color:var(--acid)} h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600} h4 .soft,.soft{text-transform:none;font-weight:400;color:var(--muted)} .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .px{border:1px solid var(--line);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column} .px .s{font-size:10px;letter-spacing:.08em;color:var(--muted);min-height:2.2em} .px .p{font-weight:700;font-size:15px;margin-top:auto;padding-top:2px} .s2{font-size:10px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-right:5px} .sig-long{color:var(--acid)} .sig-short{color:var(--red)} .sig-none{color:var(--muted)} table{width:100%;border-collapse:collapse;font-size:12.5px} th{text-align:left;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:6px 8px;font-size:10px;letter-spacing:.06em;text-transform:uppercase} td{padding:7px 8px;border-bottom:1px solid #17102a} .pos{color:var(--acid)} .neg{color:var(--red)} .idle{color:var(--muted);text-align:center;padding:14px} .addr{font-size:12px;color:var(--muted)} .pill{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--acid);color:var(--acid);border-radius:20px;padding:3px 9px} #screenPanel button:not(.chip):not(.copybtn):not(.ghost):not(.opt):not(.spClose):not(.dangerpill):not(.mutedpill):not(.modal-x){background:var(--acid);color:#04140c;border:0;border-radius:6px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer} #screenPanel button:disabled{opacity:.45;cursor:not-allowed} button.ghost{background:transparent;border:1px solid var(--muted);color:var(--muted);border-radius:6px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer} button.ghost:hover{border-color:var(--acid);color:var(--acid)} input.num{width:56px;background:#0a0614;border:1px solid var(--muted);color:var(--fg);border-radius:6px;padding:5px 7px;font-family:var(--mono);text-align:right} .dangerpill{flex:1;background:transparent;border:1px solid var(--red);color:var(--red);border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;text-align:center} .mutedpill{flex:1;background:transparent;border:1px solid var(--muted);color:var(--muted);border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;text-align:center} /* segmented Off·Manual·Auto (sol-dash toggles .opt.on) */ .seg-ctl{display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden} .seg-ctl .opt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:5px 13px;cursor:pointer;flex:1;text-align:center} .seg-ctl .opt:hover{color:var(--fg)} .seg-ctl .opt.on{background:var(--acid);color:#04140c} /* market chips */ .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .chip{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);color:var(--muted);background:transparent;border-radius:20px;padding:5px 12px;cursor:pointer;font-weight:700} .chip:hover{border-color:var(--muted);color:var(--fg)} .chip.active{border-color:var(--acid);color:#04140c;background:var(--acid)} /* proposal card */ .prop{border-color:var(--acid);box-shadow:0 0 30px rgba(0,255,157,.10)} .prop-rat{color:var(--fg);font-size:13px;margin:6px 0 8px} .prop-cd{font-size:12px;color:var(--acid);margin-bottom:12px} .prop-cd.stale{color:var(--red)} .prop-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .prop-btns button{font-size:15px;padding:11px 30px;border-radius:8px;flex:1;min-width:140px} /* flex:1 — equal-width Accept/Reject; padding was already equal, the labels are different lengths */ @media(min-width:641px){.prop-btns{justify-content:flex-end}} /* Accept and Reject must be the same width. flex:1 alone does NOT do it: growth is distributed over the CONTENT box, so each button then adds its own padding+border on top. Measured live, the two content boxes were already identical (126.1px each) and the whole 34px difference on screen was Reject's box (60px padding + 2px border) minus Accept's (28px + 0). Give them an identical box. Two IDs are needed to outrank #screenPanel button:not(...)... which is (1 id, 8 classes, 1 el); this is (2,1,1). The transparent border is invisible on Accept but occupies the same space, and Reject's inline border-color:var(--red) still colours its own. */ #screenPanel #propBody .prop-btns button{font-size:15px;padding:11px 24px;border:1px solid transparent;border-radius:8px;flex:1 1 0;min-width:140px} /* referral */ .refrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px} .reffield{flex:1 1 260px;min-width:0;background:#0a0614;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:text;-webkit-user-select:text} .refbtns{display:flex;gap:8px;flex:none} .refnote{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.55} .refnote b{color:var(--fg)} .copybtn{background:transparent;border:1px solid var(--line);color:var(--acid);border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer;font-weight:700} .copybtn:hover{border-color:var(--acid)} /* contracts (reward-token cards rendered by sol-dash) */ .cagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:4px} @media(max-width:560px){.cagrid{grid-template-columns:1fr}} .cacol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#0a0614} .cacol .catok{font-weight:700;min-width:0} .cacol .cachain{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px} .cacol .camono{color:var(--fg);font-size:13px} .cacol .cabtns{flex:1 1 100%;display:flex;gap:8px;margin-top:6px} .cacol .cabtns .copybtn{flex:1;text-align:center;justify-content:center} .goaticon{width:16px;height:16px;vertical-align:-3px;margin-right:3px} /* onboarding step badges (sol-onboard renders .stepb) */ .stepb{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;border:1.5px solid var(--acid);color:var(--acid);font-weight:800;font-size:12px;flex:none;margin-right:4px;vertical-align:-5px;line-height:1} .stepb.done{background:var(--acid);border-color:var(--acid);color:#04140c} /* rewards modal */ .modal-overlay{position:fixed;inset:0;background:rgba(4,2,9,.82);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;z-index:100;overflow-y:auto} .modal-card{background:var(--card);border:1px solid var(--acid);border-radius:14px;padding:22px;max-width:780px;width:100%;position:relative;box-shadow:0 0 44px rgba(0,255,157,.12);margin:auto} .modal-x{position:absolute;top:12px;right:12px;background:transparent;border:1px solid var(--muted);color:var(--muted);border-radius:6px;padding:4px 10px;font-size:13px;line-height:1;cursor:pointer} .modal-x:hover{border-color:var(--acid);color:var(--acid)} .modal-title{font-weight:800;letter-spacing:.04em;font-size:16px;margin-bottom:4px} .mh{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px;font-weight:600} .tier-row.cur{background:rgba(0,255,157,.10)} .tier-row.cur td{color:var(--acid);font-weight:700} /* ===================== TOUCH CONTROLS (floor.js adds body.touch on coarse-pointer devices) ===================== Everything below is display:none on desktop — zero desktop impact. */ #stick,#dock{display:none} body.touch #stick{display:block;position:fixed;left:16px;bottom:100px;width:116px;height:116px;border-radius:50%;background:rgba(16,10,28,.45);border:1px solid rgba(0,255,157,.28);z-index:9;touch-action:none;backdrop-filter:blur(4px)} #stickNub{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,255,157,.22);border:1px solid rgba(0,255,157,.6);box-shadow:0 0 18px rgba(0,255,157,.35);transition:transform .05s linear} body.touch #dock{display:flex;position:fixed;left:10px;right:10px;bottom:14px;z-index:9;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch} body.touch #dock::-webkit-scrollbar{display:none} #dock button{flex:none;font-size:.6rem;letter-spacing:.12em;font-weight:700;color:#e8dcf5;background:rgba(16,10,28,.72);border:1px solid rgba(0,255,157,.3);border-radius:100px;padding:11px 15px;cursor:pointer;backdrop-filter:blur(5px)} #dock button.dockJack{color:#04140c;background:linear-gradient(180deg,#5cffc0,#00cc7a);border:none;box-shadow:0 4px 18px -4px rgba(0,255,157,.6)} /* keep the fixed chrome out of the dock/joystick's way on touch */ body.touch #uiToggle{bottom:66px} body.touch #muteToggle{bottom:112px;right:16px} body.touch #musicToggle{bottom:112px;right:62px} body.touch #walkHint{display:none!important} /* keyboard hints are meaningless on touch */ body.touch .walkbtn{display:none} /* joystick enters walk mode; no toggle needed */ body.touch .hud-bottom{bottom:170px} /* intro copy clears the dock (hidden once walking anyway) */ body.touch #prompt{pointer-events:auto;bottom:236px;cursor:pointer} /* tap target; sits clear of the joystick (which reaches ~216px up on the left) */ body.touch .spCard{-webkit-overflow-scrolling:touch} @media(max-width:560px){ .spCard{padding:16px 12px} .card{padding:14px} #positions,#tradeHistory{overflow-x:auto} .refbtns{flex-basis:100%} .refbtns .copybtn{flex:1 1 0;padding:8px 6px;text-align:center} #openRewards{flex:1 1 100%;padding:10px 14px} .hud-bottom{bottom:18px} } /* ===================== MULTIPLAYER: session picker + handle + inspect card + toast ===================== */ #mpStart{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(360px,86vw);margin-top:6px} #mpHandle{width:100%;background:rgba(10,7,19,.85);border:1.5px solid var(--line);border-radius:10px;color:#eae2ff;padding:11px 13px;font-family:var(--mono);font-size:.82rem;text-align:center;outline:none;transition:border-color .2s} #mpHandle:focus{border-color:var(--acid);box-shadow:0 0 16px rgba(0,255,157,.22)} #mpModeRow{display:flex;gap:8px;width:100%} .mpMode{flex:1;background:rgba(18,10,30,.7);border:1.5px solid var(--line);border-radius:10px;color:#c9b6ff;padding:11px 8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .25s} .mpMode.on{border-color:var(--acid);color:#8fffd0;box-shadow:0 0 20px rgba(0,255,157,.25)} #mpInvite{width:100%;display:flex;flex-direction:column;gap:8px} #mpInvite.hide{display:none} .mpInviteLink{width:100%;background:rgba(10,7,19,.9);border:1px dashed #2e6b4d;border-radius:9px;color:#8fe9c6;padding:9px 11px;font-family:var(--mono);font-size:.68rem;word-break:break-all;text-align:center} #mpCopy{background:rgba(0,255,157,.12);border:1px solid var(--acid);border-radius:9px;color:#8fffd0;padding:9px 12px;font-family:var(--mono);font-size:.72rem;cursor:pointer} #mpJoinNote{width:100%;text-align:center;color:#8fe9c6;font-size:.72rem;font-family:var(--mono);background:rgba(0,255,157,.07);border:1px solid rgba(0,255,157,.25);border-radius:9px;padding:9px 11px} #mpJoinNote b{color:#eafff0;letter-spacing:.08em} /* inspect card */ #mpCard{position:fixed;z-index:60;left:50%;bottom:96px;transform:translate(-50%,14px);width:min(340px,90vw);background:linear-gradient(180deg,#0c0816,#0a0713);border:1.5px solid var(--acid);border-radius:14px;padding:16px 16px 14px;box-shadow:0 18px 60px -12px rgba(0,0,0,.8),0 0 30px rgba(0,255,157,.12);font-family:var(--mono);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s} #mpCard.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .mpCardX{position:absolute;top:9px;right:10px;background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;line-height:1} .mpCardHandle{font-weight:800;font-size:1.05rem;color:#f2eaff;letter-spacing:.02em;padding-right:18px} .mpCardRow{margin-top:8px;font-size:.8rem;color:#d7ccf0;display:flex;gap:8px;align-items:center} .mpCardRow .mpMuted{min-width:52px;display:inline-block} .mpMuted{color:var(--muted)} .mpMono{color:#8fe9c6;letter-spacing:.03em} .mpTrust{margin-top:12px;font-weight:800;font-size:.82rem;letter-spacing:.02em;padding:9px 11px;border-radius:9px;text-align:center} .mpTrust.safe{color:#04140c;background:linear-gradient(180deg,#5cffc0,#00cc7a)} .mpTrust.imp{color:#fff;background:linear-gradient(180deg,#ff7d95,#ff2d55);box-shadow:0 0 22px rgba(255,45,85,.4)} .mpTrust.unknown{color:#c9b6ff;background:rgba(255,255,255,.05);border:1px solid var(--line)} .mpTrust.guest{color:#b9a7d6;background:rgba(255,255,255,.04);border:1px dashed var(--line)} .mpCardNote{margin-top:9px;font-size:.72rem;line-height:1.5;color:#9a8fbf} .mpCardActs{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} #mpNick{flex:1;min-width:120px;background:rgba(10,7,19,.9);border:1px solid var(--line);border-radius:8px;color:#eae2ff;padding:9px 10px;font-family:var(--mono);font-size:.74rem;outline:none} #mpAddSafe{background:rgba(0,255,157,.14);border:1px solid var(--acid);border-radius:8px;color:#8fffd0;padding:9px 12px;font-family:var(--mono);font-size:.74rem;cursor:pointer;white-space:nowrap} .mpGhost{background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);padding:8px 12px;font-family:var(--mono);font-size:.72rem;cursor:pointer} /* multiplayer toast (top-center; distinct from #toast) */ #mpToast{position:fixed;z-index:60;top:16px;left:50%;transform:translate(-50%,-14px);background:rgba(10,7,19,.94);border:1px solid rgba(0,255,157,.35);border-radius:100px;color:#dff7ec;font-family:var(--mono);font-size:.74rem;padding:9px 18px;box-shadow:0 10px 34px -10px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center} #mpToast.on{opacity:1;transform:translate(-50%,0)} /* wallet deep-link buttons (shown when no injected wallet in this browser) */ .dgenDeep{display:block;width:100%;margin:0 0 8px;padding:13px 14px;border-radius:9px;font-family:var(--mono);font-size:14px;font-weight:800;text-align:center;text-decoration:none;cursor:pointer;letter-spacing:.01em} .dgenDeep:last-child{margin-bottom:0} .dgenPhantom{background:#ab9ff2;color:#1a0a3a} .dgenSolflare{background:#ffb03a;color:#2a1400} /* voice chat "Talk" button (multiplayer only) */ #voiceBtn{position:fixed;bottom:104px;right:16px;z-index:30;display:none;align-items:center;gap:8px;background:rgba(10,7,19,.86);border:1px solid #2e6b4d;border-radius:100px;color:#8fffd0;font-family:var(--mono);font-size:12px;font-weight:700;padding:9px 14px;cursor:pointer;box-shadow:0 6px 20px -8px rgba(0,0,0,.7);letter-spacing:.02em} #voiceBtn::before{content:"🎤";font-size:13px} #voiceBtn.v-live::before{content:"🎙️"} #voiceDot{width:9px;height:9px;border-radius:50%;background:#5f6b7a;flex:none} #voiceBtn.v-live{border-color:#ff4d6d;color:#ff9db0;background:rgba(40,8,16,.92)} #voiceBtn.v-live #voiceDot{background:#ff2d55;box-shadow:0 0 9px #ff2d55;animation:vpulse 1.2s ease-in-out infinite} #voiceBtn.v-connecting #voiceDot{background:#ffcf6b} #voiceBtn.v-denied,#voiceBtn.v-no-mic{border-color:#7a3b45;color:#ff9db0} @keyframes vpulse{0%,100%{opacity:1}50%{opacity:.3}} body.touch #voiceBtn{bottom:158px} /* follow ("leash"): ask prompt + status bar */ #mpAsk{position:fixed;z-index:70;top:70px;left:50%;transform:translate(-50%,-14px);background:linear-gradient(180deg,#0c0816,#0a0713);border:1.5px solid var(--acid);border-radius:14px;padding:14px 16px;box-shadow:0 18px 60px -12px rgba(0,0,0,.8);font-family:var(--mono);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:88vw} #mpAsk.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)} .mpAskTxt{color:#eae2ff;font-size:.86rem;margin-bottom:10px;text-align:center} .mpAskBtns{display:flex;gap:8px} .mpAskBtns button{flex:1;padding:9px 14px;border-radius:9px;font-family:var(--mono);font-size:.8rem;font-weight:800;cursor:pointer} #mpAskYes{background:linear-gradient(180deg,#5cffc0,#00cc7a);color:#04140c;border:0} #mpFollowBar{position:fixed;z-index:60;top:52px;left:50%;transform:translate(-50%,-10px);background:rgba(10,7,19,.94);border:1px solid rgba(0,255,157,.4);border-radius:100px;color:#dff7ec;font-family:var(--mono);font-size:.74rem;padding:7px 8px 7px 15px;display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw} #mpFollowBar.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)} #mpFollowBar button{background:rgba(255,45,85,.15);border:1px solid #ff4d6d;border-radius:100px;color:#ff9db0;font-family:var(--mono);font-size:.7rem;padding:5px 12px;cursor:pointer} /* DGEN logo mark above the title on the pick-your-fighter screen */ #enter .emark{height:128px;width:auto;margin-bottom:2px;filter:drop-shadow(0 0 26px rgba(0,255,157,.5))} /* EARLY ACCESS gate */ #accessGate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle,rgba(0,255,157,.08) 1.2px,transparent 1.7px) 0 0/22px 22px,radial-gradient(1100px 760px at 50% 42%,#150a24 0%,#07040d 72%);transition:opacity .5s ease} #accessGate.gone{opacity:0;pointer-events:none} #accessGate .agCard{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(360px,90vw);text-align:center} #accessGate .agMark{width:66px;height:66px;filter:drop-shadow(0 0 18px rgba(0,255,157,.45))} #accessGate .agTitle{font-family:var(--mono);font-weight:800;font-size:clamp(1.7rem,7vw,2.6rem);letter-spacing:.05em;background:linear-gradient(100deg,var(--acid),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent} #accessGate .agSub{font-family:var(--mono);font-size:.62rem;letter-spacing:.34em;color:rgba(255,61,216,.8);margin-top:-8px} #accessGate .agHint{font-family:var(--mono);font-size:.74rem;color:rgba(200,185,225,.65);margin-top:6px} #accessGate #agCode{width:100%;margin-top:6px;background:rgba(10,7,19,.85);border:1.5px solid var(--line);border-radius:10px;color:#eae2ff;padding:13px;font-family:var(--mono);font-size:.95rem;text-align:center;letter-spacing:.14em;text-transform:uppercase;outline:none;transition:border-color .2s} #accessGate #agCode:focus{border-color:var(--acid);box-shadow:0 0 18px rgba(0,255,157,.22)} #accessGate #agGo{width:100%;background:linear-gradient(180deg,#5cffc0,#00cc7a);color:#04140c;border:0;border-radius:100px;padding:14px;font-family:var(--mono);font-weight:800;font-size:.9rem;letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 40px -8px rgba(0,255,157,.6)} #accessGate .agMsg{font-family:var(--mono);font-size:.72rem;color:#ff5c7a;min-height:1em} #accessGate .agCard.shake{animation:agShake .4s} @keyframes agShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-7px)}} /* pick-your-fighter grid sized for the full ~20-avatar roster */ #charRow{max-width:min(610px,94vw);max-height:46vh;overflow-y:auto;padding:6px 4px;gap:10px} #charRow::-webkit-scrollbar{width:7px}#charRow::-webkit-scrollbar-thumb{background:rgba(0,255,157,.3);border-radius:4px} #enter .charBtn{padding:6px 7px 4px} #enter .charBtn canvas{width:48px;height:48px} #enter .charBtn span{font-size:.55rem;letter-spacing:.1em} /* ---------- ORCA ---------- */ .lp-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0} .lp-form label{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em} .lp-form input,.lp-form select{margin-top:5px} .lp-reserve{border:1px dashed rgba(255,255,255,.18);border-radius:10px;padding:11px 13px;margin:6px 0 12px} .lp-reserve b{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.05em} .lp-costs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:6px} .lp-paid{margin-top:12px;font-size:11.5px;line-height:1.5;color:#ffcf6b;border-left:2px solid #ffcf6b;padding-left:10px} .lp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)} .lp-row:last-child{border-bottom:0} .lp-tick{font-weight:700;letter-spacing:.04em} .lp-chain{font-size:10.5px;padding:2px 6px;border-radius:5px;margin-left:7px;border:1px solid rgba(255,255,255,.2);color:var(--muted)} .lp-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:5px;min-width:110px} .lp-bar i{display:block;height:100%;background:linear-gradient(90deg,#00ff9d,#ffd23d)} @media (max-width:640px){.lp-form{grid-template-columns:1fr}} /* token disc — colour hashed from the ticker, matches the 3D boards exactly */ .lp-ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:50%;font:800 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.02em; color:rgba(12,7,22,.86);margin-right:10px;flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 2px 9px -3px rgba(0,0,0,.75)} .lp-left{display:flex;align-items:center;flex-wrap:wrap} .lp-left .addr,.lp-left .lp-bar{flex-basis:100%;margin-left:40px} /* ---------- orca: functional boards ---------- */ .lp-row{align-items:flex-start} .lp-act{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap} .lp-pct{font-weight:700;font-size:13px;min-width:44px;text-align:right} button.mini{padding:5px 11px;font-size:11.5px;border-radius:7px} button.mini.ghost{background:transparent;border:1px solid rgba(255,255,255,.22)} button.mini.ghost.on{border-color:#ffd23d;color:#ffd23d} .lp-tag{font-size:9.5px;letter-spacing:.09em;padding:2px 6px;border-radius:4px;margin-left:7px; border:1px solid rgba(255,207,107,.5);color:#ffcf6b} .lp-tag.local{border-color:rgba(0,255,157,.55);color:#00ff9d} .lp-tag.paid{border-color:rgba(255,61,216,.6);color:#ff3dd8} .lp-good{color:#00ff9d} .lp-preview{display:flex;align-items:center;gap:4px;padding:11px 13px;margin:4px 0 10px; border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.03)} .lp-err{font-size:12px;color:#ff7a95;padding:2px 0} .lp-ok{font-size:12px;color:#00ff9d;padding:2px 0} .lp-total{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)} .lp-tools{display:flex;gap:9px;align-items:center;margin:10px 0 4px;flex-wrap:wrap} .lp-tools input{flex:1;min-width:150px} .idle{padding:16px 2px;font-size:12.5px;color:var(--muted);text-align:center} #lpToast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(12px);z-index:60; display:none;align-items:center;gap:4px;max-width:min(92vw,430px);padding:12px 18px;border-radius:13px; background:rgba(14,8,24,.96);border:1px solid rgba(255,255,255,.2);color:#f2eaff;font-size:12.5px; box-shadow:0 12px 44px -12px rgba(0,0,0,.85);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none} #lpToast.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)} #lpToast.ok{border-color:rgba(0,255,157,.6)} #lpToast i{display:block;font-style:normal;font-size:11px;color:rgba(200,188,225,.85);margin-top:2px} body.touch #lpToast{bottom:250px} /* ---------- network selector (money-safety control) ---------- */ .lp-net{position:fixed;top:14px;right:14px;z-index:55;font-family:var(--mono);font-weight:800; font-size:10.5px;letter-spacing:.14em;padding:6px 12px;border-radius:100px;cursor:pointer; background:rgba(10,7,19,.9);color:#7fd0f0;border:1.5px solid rgba(127,208,240,.55)} .lp-net.on{color:#ff5c7a;border-color:#ff5c7a;background:rgba(40,6,14,.92); box-shadow:0 0 18px rgba(255,92,122,.45);animation:lpNetPulse 2.2s ease-in-out infinite} @keyframes lpNetPulse{0%,100%{opacity:1}50%{opacity:.72}} #lpNetBand{position:fixed;top:0;left:0;right:0;z-index:54;text-align:center;font-family:var(--mono); font-size:10.5px;letter-spacing:.16em;font-weight:800;color:#1a0308;background:#ff5c7a; padding:0;height:0;overflow:hidden;transition:height .18s,padding .18s} body.mainnet #lpNetBand{height:auto;padding:5px 10px} body.mainnet .lp-net{top:32px} .lp-netnote{margin-top:7px;font-size:12px;color:var(--muted)} body.mainnet .lp-netnote b{color:#ff5c7a} body.touch .lp-net{top:auto;bottom:14px;right:14px} /* ---------- mint modes ---------- */ .lp-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px} .lp-mode{display:block;text-align:left;padding:12px 13px;border-radius:11px;cursor:pointer; background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.14);color:inherit;font-family:var(--mono)} .lp-mode b{display:block;font-size:13px;margin-bottom:4px} .lp-mode i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted)} .lp-mode u{display:block;text-decoration:none;font-size:11px;margin-top:7px;color:rgba(200,188,225,.75)} .lp-mode.on{border-color:#00ff9d;background:rgba(0,255,157,.07);box-shadow:0 0 18px -4px rgba(0,255,157,.4)} .lp-mode.on u{color:#00ff9d} .lp-modenote{margin-top:8px;font-size:12px;line-height:1.5;color:var(--muted)} .lp-modenote b{color:#ffcf6b} .lp-nomarket{color:#ffcf6b} @media (max-width:640px){.lp-modes{grid-template-columns:1fr}} /* ---------- walkthrough fixes ---------- #screenPanel button:not(...) carries (1 id, 8 classes, 1 el) and was painting BOTH mode cards acid-green, so neither looked selected. Two IDs = (2,1,1) beats it. Same cascade trap as the Accept/Reject buttons — check specificity before blaming CSS. */ #screenPanel #lpModes .lp-mode{background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.14); color:inherit;box-shadow:none;padding:12px 13px;border-radius:11px;font-size:13px;font-weight:400; display:flex;flex-direction:column;justify-content:flex-start;min-height:100%} #screenPanel #lpModes .lp-mode b{color:#eae2ff} #screenPanel #lpModes .lp-mode i{color:rgba(200,188,225,.7)} #screenPanel #lpModes .lp-mode u{margin-top:auto;padding-top:7px;color:rgba(200,188,225,.75)} #screenPanel #lpModes .lp-mode.on{background:rgba(0,255,157,.09);border-color:#00ff9d; box-shadow:0 0 18px -4px rgba(0,255,157,.45)} #screenPanel #lpModes .lp-mode.on b{color:#00ff9d} #screenPanel #lpModes .lp-mode.on u{color:#00ff9d} #lpModes{align-items:stretch} /* .num is built for numbers; names and tickers read wrong right-aligned */ #screenPanel #lpName,#screenPanel #lpTick{text-align:left} /* ---------- wide cards for the orca boards ---------- The default .spCard is 760px, which README already overrode to 1040 because its prose wrapped too early. The orca panels carry a form, a two-up mode picker, four cost tiles and long explanatory copy — at 760 everything wrapped at roughly half width and the card read cramped and visually off-centre. */ #screenPanel:has(section[data-screen="MINT"].on) .spCard, #screenPanel:has(section[data-screen="MINTED"].on) .spCard, #screenPanel:has(section[data-screen="WALL"].on) .spCard, #screenPanel:has(section[data-screen="WATCH"].on) .spCard, #screenPanel:has(section[data-screen="BAGS"].on) .spCard{width:min(94vw,1180px)} /* let the prose use the room it now has */ #screenPanel #lpModes .lp-mode i, #screenPanel .lp-reserve .addr, #screenPanel .lp-modenote, #screenPanel .lp-total, #screenPanel .refnote{max-width:none} #screenPanel .lp-costs{grid-template-columns:repeat(4,minmax(0,1fr))} /* ---------- card width, corrected ---------- 1180 pushed the card past the viewport. Root cause is NOT the number: .spCard is a flex item of #screenPanel, and flex items default to min-width:auto, so they refuse to shrink below their content's intrinsic width no matter what `width` says. The four-up cost grid and the long mode-card lines set a wide min-content, and the card grew to fit. min-width:0 lets `width` actually govern; every grid track is minmax(0,1fr) so children can shrink too. Back to README's proven 1040. */ #screenPanel .spCard{min-width:0} #screenPanel:has(section[data-screen="MINT"].on) .spCard, #screenPanel:has(section[data-screen="MINTED"].on) .spCard, #screenPanel:has(section[data-screen="WALL"].on) .spCard, #screenPanel:has(section[data-screen="WATCH"].on) .spCard, #screenPanel:has(section[data-screen="BAGS"].on) .spCard{width:min(92vw,1040px)} #screenPanel .lp-form{grid-template-columns:repeat(2,minmax(0,1fr))} #screenPanel .lp-form label,#screenPanel .lp-form input,#screenPanel .lp-form select{min-width:0;max-width:100%} #screenPanel #lpModes{grid-template-columns:repeat(2,minmax(0,1fr))} #screenPanel #lpModes .lp-mode{min-width:0;overflow-wrap:anywhere} #screenPanel .lp-costs > .px{min-width:0} #screenPanel .lp-costs .p{overflow-wrap:anywhere} /* ---------- responsive without a magic number ---------- A hard @media (max-width:820px) also trips under browser zoom, which collapsed the form to one column and pushed Ticker/Chain below their partners on a wide screen. auto-fit + minmax lets each track fold only when it genuinely cannot fit, so the layout responds to available room rather than to a guess about the device. */ #screenPanel .lp-costs{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))} /* supply presets */ #screenPanel .lp-presets{display:flex;gap:7px;align-items:center;margin-top:7px;flex-wrap:wrap} #screenPanel .lp-presets button{padding:4px 11px;font-size:11px;border-radius:7px;background:transparent; border:1px solid rgba(255,255,255,.2);color:rgba(200,188,225,.85);font-weight:700;box-shadow:none} #screenPanel .lp-presets button:hover{border-color:#00ff9d;color:#00ff9d} /* ---------- two columns, never three ---------- auto-fit with a px minimum packed THREE 260px tracks into the 1040 card, which put Name/Ticker/Supply on row one and orphaned Chain alone on row two. Using a PERCENTAGE minimum caps the count: any track wider than a third of the row means at most two fit, while min(100%,…) still lets them stack to one column when the card is genuinely narrow. No media query, no magic pixel number. */ #screenPanel .lp-form, #screenPanel #lpModes{grid-template-columns:repeat(auto-fit,minmax(min(100%,42%),1fr))} /* ---------- presets: the #screenPanel button cascade, again ---------- #screenPanel button:not(...) is (1 id, 8 classes, 1 el) and was painting the supply presets solid acid-green like primary actions. Two IDs to outrank it. THIRD time this rule has ambushed a new control — anything button-shaped inside #screenPanel needs two IDs or it inherits the primary-button look. */ #screenPanel #lpPresets button{background:transparent;border:1px solid rgba(255,255,255,.2); color:rgba(200,188,225,.85);font-weight:700;font-size:11px;padding:4px 11px;border-radius:7px; box-shadow:none;width:auto;flex:none} #screenPanel #lpPresets button:hover{border-color:#00ff9d;color:#00ff9d;background:rgba(0,255,157,.08)} /* ---------- chain chips (replaces the native