/* MIX-ED Games — arcade engine styles.
   Extracted from BeatBuilders (beatbuilders.html) and namespaced under #bb-app so it
   sits inside the portal chrome without fighting styles.css. Regenerate rather than
   hand-edit if the BeatBuilders source changes: see docs/GAMES-HUB.md */
@font-face{font-family:"Bravura";src:url("../fonts/Bravura.woff2") format("woff2"),url("../fonts/Bravura.woff") format("woff");font-display:swap;}
#bb-app .smufl{font-family:"Bravura",serif;}
#bb-app{
    
    --bg1:#0c0d12; --bg2:#14131f; --bg3:#0b1020;
    --accent:#ffb84d;            
    --accent2:#ee3d8b;           
    --accent3:#2ec882;           
    --accent4:#3d5fec;           
    --accent-purple:#8b3dee;     
    --panel:rgba(255,255,255,0.045); --panelborder:#2a2c38;
    --text:#f5f5fb; --text-dim:#c9cef5; --text-muted:#9aa0d6;
    --chip-bg:rgba(0,0,0,0.28); --surface:rgba(255,255,255,0.08); --surface-hi:rgba(255,255,255,0.16);
    --good:#2ec882; --bad:#ff5a6e;
    --font:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
    --font-display:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  }
:root:not([data-theme="dark"]) #bb-app{
    --bg1:#eef1fb; --bg2:#e8e7f5; --bg3:#e9f0fc;
    --panel:rgba(20,18,40,0.04); --panelborder:#d8dae8;
    --text:#1b1730; --text-dim:#55506a; --text-muted:#7b7e93;
    --chip-bg:rgba(255,255,255,0.6); --surface:rgba(20,18,40,0.05); --surface-hi:rgba(20,18,40,0.10);
  }
#bb-app .arc-field,#bb-app .g2-field,#bb-app .arc-ov,#bb-app .g2-ov{
    --text:#f5f5fb; --text-dim:#c9cef5; --text-muted:#9aa0d6;
    --panel:rgba(255,255,255,0.05); --panelborder:#2a2c38;
    --chip-bg:rgba(0,0,0,0.3); --surface:rgba(255,255,255,0.08); --surface-hi:rgba(255,255,255,0.18);
  }
#bb-app *{box-sizing:border-box;margin:0;padding:0;}
#bb-app{height:100%;}
#bb-app{font-family:var(--font);color:var(--text);}
#bb-app .wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:16px;}
#bb-app .chip{background:var(--chip-bg);border:1px solid var(--panelborder);border-radius:10px;padding:6px 12px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px;}
#bb-app .chip b{color:var(--accent)}
#bb-app .chip .coin{width:1.7em;height:1.7em;vertical-align:-0.5em;}
#bb-app #r-coins{color:var(--text)}
#bb-app .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px;}
#bb-app .card{background:var(--panel);border:1px solid var(--panelborder);border-radius:18px;padding:18px;cursor:pointer;
    transition:transform .15s,box-shadow .15s,background .15s;backdrop-filter:blur(6px);text-align:center;display:flex;flex-direction:column;}
#bb-app .card:hover{transform:translateY(-4px);background:var(--surface-hi);}
#bb-app .card .ico{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:1.9rem;}
#bb-app .card .ico .ico-svg{width:32px;height:32px;fill:#fff;display:block;}
#bb-app .card .ico.blocks{background:#f0973a;}
#bb-app .card .ico.decor{background:#ee3d8b;}
#bb-app .card .ico.items{background:#3d5fec;}
#bb-app .card .ico.util{background:#4a4b5e;}
#bb-app .card h3{margin:8px 0 4px;font-size:1.15rem;}
#bb-app .card p{color:var(--text-dim);font-size:.88rem;line-height:1.4;}
#bb-app .card .reward{margin-top:auto;padding-top:10px;font-size:.82rem;color:var(--accent);font-weight:700;white-space:nowrap;}
:root:not([data-theme="dark"]) #bb-app .card .reward{color:#b5650f;}
#bb-app .screen{display:none;}
#bb-app .screen.active{display:block;}
#bb-app .panel{background:var(--panel);border:1px solid var(--panelborder);border-radius:18px;padding:20px;backdrop-filter:blur(6px);}
#bb-app .backbtn{background:var(--chip-bg);border:1px solid var(--panelborder);color:var(--text);border-radius:10px;padding:8px 16px;cursor:pointer;font-weight:700;margin-bottom:14px;}
#bb-app .backbtn:hover{background:rgba(0,0,0,.5);}
#bb-app .scr-title{font-family:var(--font-display);font-size:1.5rem;margin-bottom:4px;}
#bb-app .scr-sub{color:var(--text-dim);margin-bottom:16px;}
#bb-app .bb-btn{background:linear-gradient(90deg,var(--accent2),var(--accent4));border:none;color:#fff;font-weight:800;
    padding:12px 22px;border-radius:10px;cursor:pointer;font-size:1rem;box-shadow:0 6px 18px rgba(255,107,214,.35);}
#bb-app .bb-btn:hover{filter:brightness(1.08);}
#bb-app .bb-btn:active{transform:scale(.97);}
#bb-app .bb-btn.alt{background:linear-gradient(90deg,var(--accent3),var(--accent4));box-shadow:0 6px 18px rgba(77,255,216,.3);color:#08233a;}
#bb-app .prompt{font-size:1.4rem;font-weight:800;text-align:center;margin:10px 0;min-height:1.6em;}
#bb-app .feedback{text-align:center;font-weight:800;min-height:1.4em;font-size:1.1rem;margin:6px 0;}
#bb-app .feedback.good{color:var(--good)}
#bb-app .feedback.bad{color:var(--bad)}
#bb-app .wkey{position:relative;width:64px;height:170px;background:linear-gradient(#fff,#e9e9f5);border:1px solid #b9b9d0;border-radius:0 0 8px 8px;margin:0 1px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;color:#3a1d6e;font-weight:800;transition:background .08s;}
#bb-app .wkey:hover{background:linear-gradient(#fff,#d7d7ef);}
#bb-app .wkey.press{background:linear-gradient(var(--accent3),#9affe9);}
#bb-app .wkey.show{color:#3a1d6e}
#bb-app .wkey.hide{color:transparent}
#bb-app .bkey{position:absolute;top:0;width:40px;height:104px;background:linear-gradient(#2a2a3a,#000);border-radius:0 0 6px 6px;cursor:pointer;z-index:2;color:#ffd84d;font-size:.7rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;}
#bb-app .bkey.press{background:linear-gradient(#7a5cff,#4d2dd8);}
#bb-app .rhythm-lane{position:relative;height:120px;background:var(--chip-bg);border:1px solid var(--panelborder);border-radius:14px;overflow:hidden;margin:14px 0;}
#bb-app .targetzone{position:absolute;left:40px;top:0;bottom:0;width:80px;border-left:3px solid var(--accent);border-right:3px solid var(--accent);background:rgba(255,216,77,.12);}
#bb-app .beat{position:absolute;top:35px;width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent4));display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 14px rgba(0,0,0,.4);}
#bb-app .hitbtn{width:100%;font-size:1.2rem;padding:18px;}
#bb-app .combo{text-align:center;font-weight:800;color:var(--accent);min-height:1.3em;}
#bb-app .staffwrap{display:flex;justify-content:center;margin:16px 0;}
#bb-app .opts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
#bb-app .opt{background:var(--surface);border:1px solid var(--panelborder);color:var(--text);font-weight:800;font-size:1.1rem;width:56px;height:56px;border-radius:14px;cursor:pointer;}
#bb-app .opt:hover{background:var(--surface-hi);}
#bb-app .build-top{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
#bb-app .palette{display:flex;gap:8px;flex-wrap:wrap;}
#bb-app .tile-btn{background:var(--surface);border:2px solid transparent;border-radius:14px;padding:8px 10px;cursor:pointer;text-align:center;min-width:74px;}
#bb-app .tile-btn .em{font-size:1.6rem;display:block;}
#bb-app .tile-btn small{display:block;color:var(--text-dim);font-size:.72rem;margin-top:2px;}
#bb-app .tile-btn .cost{color:var(--accent);font-weight:800;font-size:.8rem;}
#bb-app .tile-btn.sel{border-color:var(--accent);background:rgba(255,216,77,.15);}
#bb-app .tile-btn.locked{opacity:.4;filter:grayscale(.6);}
#bb-app .world{display:grid;gap:3px;background:var(--chip-bg);border:1px solid var(--panelborder);border-radius:14px;padding:8px;margin-top:8px;}
#bb-app .cell{aspect-ratio:1;background:linear-gradient(135deg,rgba(123,170,255,.18),rgba(77,255,216,.10));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;cursor:pointer;transition:transform .1s;}
#bb-app .cell:hover{transform:scale(1.08);background:var(--surface-hi);}
#bb-app .artist-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
#bb-app .artist{background:var(--panel);border:1px solid var(--panelborder);border-radius:16px;padding:16px;cursor:pointer;transition:transform .15s;}
#bb-app .artist:hover{transform:translateY(-3px);}
#bb-app .artist.locked{opacity:.55;}
#bb-app .artist .av{font-size:2.4rem;}
#bb-app .artist h4{margin:6px 0 2px;}
#bb-app .artist .role{color:var(--accent3);font-weight:700;font-size:.85rem;}
#bb-app .artist .lockmsg{color:var(--accent);font-size:.78rem;margin-top:8px;font-weight:700;}
#bb-app .artist-detail dt{color:var(--accent);font-weight:800;margin-top:10px;}
#bb-app .artist-detail dd{color:var(--text-dim);margin:2px 0 0;line-height:1.4;}
#bb-app .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120px);background:linear-gradient(90deg,var(--accent2),var(--accent4));
    padding:12px 22px;border-radius:10px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:50;transition:transform .3s;}
#bb-app .toast.show{transform:translateX(-50%) translateY(0);}
#bb-app #arcade .panel{position:relative;}
#bb-app .arc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
#bb-app .arc-stats{display:flex;gap:8px;flex-wrap:wrap;}
#bb-app .arc-chip{background:var(--chip-bg);border:1px solid var(--panelborder);border-radius:10px;padding:5px 12px;font-weight:800;font-size:.9rem;}
#bb-app .arc-chip b{color:var(--accent);}
#bb-app #g2-time{color:var(--text);}
#bb-app #g2-earned{color:var(--text);}
#bb-app #g2-lines-n{color:var(--text);}
#bb-app #arc-time,#bb-app #arc-earned{color:var(--text);}
#bb-app .nrd-tag{position:absolute;top:8px;left:0;right:0;text-align:center;color:var(--text-dim);font-weight:700;font-size:.78rem;padding:0 12px;z-index:2;}
#bb-app .nrd-card{position:absolute;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);overflow:hidden;}
#bb-app .nrd-card svg{display:block;width:100%;}
#bb-app .nrd-line{position:absolute;left:0;right:0;height:0;border-top:3px dashed #ef4d6b;z-index:1;}
#bb-app .nrd-cannon{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
#bb-app .nrd-cannon svg{display:block;}
#bb-app .nrd-laser-wrap{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:4;animation:nrdlaser .18s ease-out forwards;filter:drop-shadow(0 0 5px #ff2330);}
@keyframes nrdlaser{0%{opacity:1}100%{opacity:.15}}
#bb-app .nrd-boom{position:absolute;z-index:5;font-size:26px;pointer-events:none;animation:nrdboom .42s ease-out forwards;}
@keyframes nrdboom{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.7);opacity:0}}
#bb-app .g2-field .arc-judge{z-index:7;}
#bb-app .nrd-toggle{position:absolute;top:8px;right:10px;z-index:4;border:none;cursor:pointer;font-weight:800;font-size:.72rem;padding:6px 11px;border-radius:9px;background:#fff;color:#1b1730;box-shadow:0 2px 6px rgba(0,0,0,.25);}
#bb-app .nrd-toggle.on{background:linear-gradient(90deg,#ee3d8b,#3d5fec);color:#fff;}
#bb-app .nrd-name{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-weight:800;font-size:13px;color:#ef4d6b;font-family:system-ui,sans-serif;}
#bb-app .nrd-pad{gap:9px;}
#bb-app .nrd-pad .arc-key{min-width:58px;height:66px;font-size:1.4rem;padding:0 8px;}
#bb-app .nrd-pad .arc-key.blk{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;gap:2px;}
#bb-app .nrd-pad .arc-key.blk .sh{font-size:1.05rem;}
#bb-app .nrd-pad .arc-key.blk .fl{font-size:.85rem;opacity:.72;}
#bb-app .kong-girder{position:absolute;left:24px;right:24px;height:9px;border-radius:5px;background:linear-gradient(#d6557a,#a8325a);z-index:1;box-shadow:0 2px 0 rgba(0,0,0,.18);transform-origin:50% 50%;}
#bb-app .kong-ladder{position:absolute;width:18px;box-sizing:border-box;border-left:3px solid #8a92bd;border-right:3px solid #8a92bd;background:repeating-linear-gradient(to bottom,#8a92bd 0 3px,transparent 3px 11px);z-index:1;}
#bb-app .kong-princess{position:absolute;font-size:28px;line-height:1;z-index:2;}
#bb-app .kong-char{position:absolute;font-size:30px;line-height:1;z-index:3;}
#bb-app .kong-barrel{position:absolute;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#c8813f,#a0622d 60%,#7a4a22);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 0 0 3px #7a4a22, inset 6px 6px 9px rgba(255,255,255,.15);}
#bb-app .kong-barrel .smufl{font-size:26px;line-height:1;color:#fff3e0;}
#bb-app .frog-lane{position:absolute;left:0;right:0;background:rgba(80,120,255,.10);border-top:1px dashed rgba(255,255,255,.16);border-bottom:1px dashed rgba(255,255,255,.16);z-index:1;}
#bb-app .gnote-card{background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 3px 9px rgba(0,0,0,.28);}
#bb-app .frog-card{position:absolute;width:52px;height:66px;z-index:2;}
#bb-app .frog-frog{position:absolute;font-size:28px;line-height:1;z-index:4;transition:top .12s ease,left .12s ease;}
#bb-app .frog-goal{position:absolute;right:12px;top:6px;font-weight:800;color:#ffd86b;font-size:15px;z-index:1;}
#bb-app .sqd-ship,#bb-app .cent-ship{position:absolute;font-size:30px;line-height:1;z-index:3;}
#bb-app .sqd-enemy{position:absolute;width:54px;height:66px;z-index:2;}
#bb-app .sqd-bullet{position:absolute;width:4px;height:15px;border-radius:2px;background:#ffe36b;box-shadow:0 0 7px #ffd86b;z-index:2;}
#bb-app .cent-seg{position:absolute;width:36px;height:32px;border-radius:16px;background:#3fae6b;color:#fff;font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 0 0 2px #2f8f55;}
#bb-app .cent-target{position:absolute;top:8px;left:10px;background:#fff;border-radius:10px;padding:5px 6px;z-index:3;box-shadow:0 3px 10px rgba(0,0,0,.28);}
#bb-app #sqd-root{width:88px;}
#bb-app .arc-metro{display:none;text-align:center;white-space:nowrap;height:34px;line-height:34px;margin:0 0 8px;}
#bb-app .arc-metro.on{display:block;}
#bb-app .arc-metro .mdot{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
    width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.07);border:1.5px solid var(--panelborder);
    font-weight:800;font-size:.82rem;color:var(--text-muted);margin:0 7px;}
#bb-app .arc-metro .mdot.lit{background:var(--accent);color:#3a1d6e;box-shadow:0 0 14px var(--accent);}
#bb-app .arc-metro .mdot.one{background:var(--accent2);color:#fff;box-shadow:0 0 16px var(--accent2);}
#bb-app #arc-count{position:absolute;top:0;left:0;right:0;height:120px;display:none;align-items:center;justify-content:center;z-index:7;pointer-events:none;font-family:var(--font-display);font-size:4.6rem;font-weight:900;color:var(--accent2);text-shadow:0 4px 20px rgba(0,0,0,.25);}
@keyframes arccount{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:.92}}
#bb-app .arc-combo{min-height:0;text-align:center;font-family:var(--font-display);font-size:1.15rem;
    background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#bb-app .arc-combo:empty{display:none;}
#bb-app .arc-field{position:relative;height:316px;border:1px solid var(--panelborder);border-radius:14px;overflow:hidden;
    background:#ffffff;}
#bb-app .arc-stage{position:absolute;inset:0;}
#bb-app .arc-stage svg{width:100%;height:100%;display:block;}
#bb-app .arc-targets{position:absolute;inset:0;}
#bb-app .arc-note{position:absolute;top:0;height:316px;width:64px;will-change:left;}
#bb-app .arc-note svg{width:64px;height:316px;display:block;overflow:visible;}
#bb-app .arc-note.hit{animation:archit .26s ease-out forwards;}
#bb-app .arc-note.miss{opacity:.3;filter:grayscale(.85);}
@keyframes archit{to{transform:translateY(-16px) scale(1.45);opacity:0;}}
#bb-app .arc-note.hitbeam{animation:architflat .24s ease-out forwards;}
@keyframes architflat{0%{filter:brightness(1)}40%{filter:brightness(1.8)}to{opacity:0;}}
#bb-app .streak-pop{position:absolute;top:16px;left:50%;z-index:8;pointer-events:none;font-family:var(--font-display);font-weight:900;font-size:1.5rem;white-space:nowrap;
    background:linear-gradient(90deg,#ff8a3d,#ff3d7f,#b15bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 8px rgba(255,80,140,.35));animation:streakpop 1.15s ease-out forwards;}
@keyframes streakpop{0%{opacity:0;transform:translateX(-50%) scale(.6)}16%{opacity:1;transform:translateX(-50%) scale(1.18)}30%{transform:translateX(-50%) scale(1)}74%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%) translateY(-16px)}}
#bb-app .arc-note.zap{animation:arczap .32s ease-out forwards;transform-origin:32px 120px;}
@keyframes arczap{0%{filter:brightness(2.6) drop-shadow(0 0 9px #ffd21a)}28%{filter:brightness(3) drop-shadow(0 0 13px #fff2a0);transform:scale(1.22)}100%{filter:brightness(2);opacity:0;transform:scale(1.5) rotate(7deg)}}
#bb-app .arc-strike{position:absolute;inset:0;pointer-events:none;z-index:6;filter:drop-shadow(0 0 7px #ffcf2e);animation:arcstrike .3s ease-out forwards;}
@keyframes arcstrike{0%{opacity:1}55%{opacity:1}100%{opacity:0}}
#bb-app .arc-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe23a;box-shadow:0 0 8px #ffcf2e;pointer-events:none;z-index:6;transition:transform .3s ease-out,opacity .3s ease-out;}
#bb-app .arc-field.zapflash{animation:arczapflash .22s;}
@keyframes arczapflash{0%{box-shadow:inset 0 0 0 0 rgba(255,210,40,0)}45%{box-shadow:inset 0 0 70px rgba(255,210,40,.45)}100%{box-shadow:inset 0 0 0 0 rgba(255,210,40,0)}}
#bb-app .arc-judge{position:absolute;left:0;right:0;top:auto;bottom:12px;text-align:center;pointer-events:none;}
#bb-app .arc-judge span{display:inline-block;font-family:var(--font-display);font-size:1.95rem;font-weight:800;opacity:0;padding:8px 20px;border-radius:14px;background:rgba(10,10,22,.85);box-shadow:0 6px 24px rgba(0,0,0,.4);}
#bb-app .arc-judge span.show{animation:arcjudge 1.2s ease-out;}
#bb-app .arc-judge .good{color:#34d17f;}
#bb-app .arc-judge .perfect{color:#ff5c93;}
#bb-app .arc-judge .bad{color:#ff5a68;}
#bb-app .arc-judge .strike{color:#ffd21a;}
@keyframes arcjudge{0%{opacity:0;transform:translateY(12px) scale(.7)}14%{opacity:1;transform:none}72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
#bb-app .arc-field.flash{animation:arcflash .18s;}
@keyframes arcflash{0%{box-shadow:inset 0 0 0 0 rgba(46,200,130,0)}50%{box-shadow:inset 0 0 60px rgba(46,200,130,.35)}100%{box-shadow:inset 0 0 0 0 rgba(46,200,130,0)}}
#bb-app .arc-field.shake{animation:arcshake .2s;}
@keyframes arcshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
#bb-app .arc-controls{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:64px;}
#bb-app .arc-letters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
#bb-app .arc-row-lbl{font-size:.74rem;color:var(--text-muted);font-weight:700;margin:8px 0 2px;text-align:center;}
#bb-app .arc-key{background:var(--surface);border:1px solid var(--panelborder);color:var(--text);font-weight:800;font-size:1.05rem;
    min-width:50px;height:50px;border-radius:12px;cursor:pointer;padding:0 10px;}
#bb-app .arc-key:hover{background:var(--surface-hi);}
#bb-app .arc-key:active{transform:scale(.93);}
#bb-app .arc-tap{width:100%;max-width:440px;font-size:1.3rem;font-weight:800;padding:18px;border:none;border-radius:14px;color:#fff;cursor:pointer;
    background:linear-gradient(90deg,var(--accent2),var(--accent4));box-shadow:0 8px 22px rgba(238,61,139,.35);}
#bb-app .arc-tap:active{transform:scale(.98);}
#bb-app .arc-piano{position:relative;display:flex;justify-content:center;height:168px;max-width:620px;margin:0 auto;user-select:none;}
#bb-app .arc-wkey{position:relative;width:68px;height:168px;background:linear-gradient(#fff,#e9e9f5);border:1px solid #b9b9d0;border-radius:0 0 7px 7px;
    margin:0 1px;cursor:pointer;color:#3a1d6e;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-weight:800;font-size:.95rem;}
#bb-app .arc-wkey.press{background:linear-gradient(var(--accent3),#9affe9);}
#bb-app .arc-piano{width:max-content;max-width:100%;}
#bb-app .arc-bkey{position:absolute;top:0;width:44px;height:104px;background:linear-gradient(#2a2a3a,#000);border-radius:0 0 6px 6px;cursor:pointer;z-index:2;}
#bb-app .arc-bkey.press{background:linear-gradient(#7a5cff,#4d2dd8);}
#bb-app .arc-key.blk{background:linear-gradient(#23242e,#0c0d12);color:var(--accent);font-size:.66rem;line-height:1.05;}
#bb-app .arc-stage-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0 18px;}
#bb-app .arc-stage-chip{background:var(--surface);border:2px solid var(--panelborder);color:var(--text);border-radius:12px;padding:11px 18px;font-size:.98rem;font-weight:800;cursor:pointer;min-width:130px;}
#bb-app .arc-stage-chip:hover{border-color:var(--accent2);}
#bb-app .arc-stage-chip.on{background:linear-gradient(90deg,var(--accent2),var(--accent4));color:#fff;border-color:#fff;}
#bb-app #mini .panel{position:relative;}
#bb-app .g2-field{position:relative;height:300px;border:1px solid var(--panelborder);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(61,95,236,.12),rgba(139,61,238,.08)),#101019;}
#bb-app .g2-field .arc-judge{top:30%;bottom:auto;}
#bb-app .hilo-tag{position:absolute;top:12px;left:0;right:0;text-align:center;color:var(--text-dim);font-weight:700;}
#bb-app .hilo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;}
#bb-app .hilo-card{background:#ffffff;border:1px solid var(--panelborder);border-radius:14px;padding:6px;width:190px;}
#bb-app .hilo-card svg{width:100%;height:auto;display:block;}
#bb-app .hilo-vs{font-family:var(--font-display);color:var(--accent);font-size:1.4rem;}
#bb-app .catch-tag{position:absolute;top:8px;left:0;right:0;text-align:center;font-weight:800;color:var(--accent);font-family:var(--font-display);font-size:1.05rem;}
#bb-app .catch-note{position:absolute;width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent4));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.1rem;will-change:top;}
#bb-app .catch-basket{position:absolute;bottom:8px;width:116px;height:22px;border-radius:8px;background:linear-gradient(var(--accent3),#1f8f63);box-shadow:0 0 14px rgba(46,200,130,.55);}
#bb-app .run-lanes{position:absolute;inset:0 0 50px 0;display:flex;}
#bb-app .run-lane{flex:1;border-right:1px solid rgba(255,255,255,.06);position:relative;}
#bb-app .run-line{position:absolute;left:0;right:0;bottom:56px;height:3px;background:var(--accent);opacity:.75;}
#bb-app .run-tile{position:absolute;left:8%;width:84%;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent2),var(--accent4));will-change:top;}
#bb-app .run-keys{position:absolute;left:0;right:0;bottom:0;display:flex;height:50px;}
#bb-app .run-key{flex:1;margin:0 1px;background:linear-gradient(#fff,#e9e9f5);border-radius:0 0 7px 7px;color:#3a1d6e;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;cursor:pointer;font-size:.8rem;}
#bb-app .run-key.press{background:linear-gradient(var(--accent3),#9affe9);}
#bb-app .echo-piano{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;display:flex;}
#bb-app .echo-key{width:50px;height:140px;background:linear-gradient(#fff,#e9e9f5);border:1px solid #b9b9d0;border-radius:0 0 8px 8px;margin:0 1px;cursor:pointer;color:#3a1d6e;font-weight:800;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;}
#bb-app .echo-key.lit{background:linear-gradient(var(--accent),#ffd27a);}
#bb-app .echo-key.press{background:linear-gradient(var(--accent3),#9affe9);}
#bb-app .echo-status{position:absolute;top:14px;left:0;right:0;text-align:center;font-weight:800;color:var(--text-dim);}
#bb-app .inv-tag{position:absolute;top:8px;left:0;right:0;text-align:center;font-weight:800;color:var(--accent);font-family:var(--font-display);font-size:1.05rem;}
#bb-app .inv-note{position:absolute;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent4));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;will-change:top;}
#bb-app .inv-bullet{position:absolute;width:6px;height:16px;border-radius:3px;background:var(--accent3);will-change:top;}
#bb-app .inv-ship{position:absolute;bottom:6px;width:46px;height:24px;border-radius:8px 8px 4px 4px;background:linear-gradient(var(--accent3),#1f8f63);box-shadow:0 0 12px rgba(46,200,130,.55);}
#bb-app .snk-tag{position:absolute;top:6px;left:6px;right:6px;height:148px;background:#fff;border:1px solid #d7daea;border-radius:10px;display:flex;align-items:center;justify-content:center;z-index:2;padding:6px 12px;}
#bb-app .snk-tag svg{height:140px;width:auto;max-width:100%;}
#bb-app .snk-grid{position:absolute;inset:164px 6px 6px 6px;display:grid;gap:2px;}
#bb-app .snk-cell{min-width:0;min-height:0;overflow:hidden;border-radius:3px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.6rem;color:#3a1d6e;}
#bb-app .snk-cell.wall{background:#3d5fec;border-radius:3px;}
#bb-app .snk-cell.body{background:var(--accent4);}
#bb-app .snk-cell.head{background:var(--accent3);}
#bb-app .snk-cell.food{background:linear-gradient(135deg,var(--accent),#ffd27a);}
#bb-app .snk-toggle{position:absolute;top:10px;right:12px;z-index:3;background:#282b40;border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:.72rem;padding:6px 12px;border-radius:10px;cursor:pointer;}
#bb-app .snk-toggle.on{background:linear-gradient(90deg,var(--accent2),var(--accent4));color:#fff;border-color:#fff;}
#bb-app #arc-names{background:#eef1f7;color:#1b1730;border:1.5px solid #cfd6e6;}
#bb-app #arc-names.on{background:linear-gradient(90deg,var(--accent2),var(--accent4));color:#fff;border-color:#fff;}
#bb-app .mel-staff{background:#fff;border:1px solid #d7daea;border-radius:12px;padding:10px 8px;}
#bb-app .mel-staff svg{width:100%;height:auto;max-height:188px;display:block;}
#bb-app .tet-tag{position:absolute;top:8px;left:0;right:0;text-align:center;color:var(--text-dim);font-weight:700;font-size:.78rem;padding:0 12px;}
#bb-app .tet-well{position:relative;margin:38px auto 0;border:2px solid var(--panelborder);border-radius:10px;background:rgba(0,0,0,.2);box-sizing:content-box;}
#bb-app .maze-tag{position:absolute;top:6px;left:6px;right:6px;height:148px;background:#fff;border:1px solid #d7daea;border-radius:10px;display:flex;align-items:center;justify-content:center;z-index:2;padding:6px 12px;}
#bb-app .maze-tag svg{height:140px;width:auto;max-width:100%;}
#bb-app .maze-grid{position:absolute;inset:164px 6px 6px 6px;display:grid;gap:2px;}
#bb-app .maze-cell{border-radius:3px;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;}
#bb-app .maze-cell.wall{background:#3d5fec;}
#bb-app .maze-cell.open{background:transparent;}
#bb-app .mz-dot{height:82%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.64rem;color:#3a1d6e;}
#bb-app .mz-dot.pl{background:var(--accent3);box-shadow:0 0 8px rgba(46,200,130,.65);}
#bb-app .mz-dot.pl svg{width:66%;height:66%;}
#bb-app .mz-dot.gh{background:var(--bad);box-shadow:0 0 8px rgba(255,90,110,.55);}
#bb-app .mz-dot.gh svg{width:80%;height:80%;}
#bb-app .mz-dot.tgt{background:radial-gradient(circle,var(--accent),#ffd27a);animation:mzpulse 1s infinite;}
#bb-app .mz-note{width:84%;height:84%;background:#fff;border:2px solid #c4cae8;border-radius:8px;display:flex;align-items:center;justify-content:center;opacity:.9;font-weight:900;font-size:2rem;line-height:1;color:#2b2f7a;}
#bb-app .mz-note.next{opacity:1;color:#ef8a00;border-color:#ef8a00;box-shadow:0 0 0 3px var(--accent),0 0 10px rgba(255,184,77,.75);}
#bb-app .mz-pad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,46px);gap:6px;justify-content:center;}
#bb-app .mz-pad .arc-key{margin:0;width:100%;}
#bb-app .mz-pad .mzu{grid-column:2;grid-row:1;}
#bb-app .mz-pad .mzl{grid-column:1;grid-row:2;}
#bb-app .mz-pad .mzr{grid-column:3;grid-row:2;}
#bb-app .mz-pad .mzd{grid-column:2;grid-row:3;}
@keyframes mzpulse{0%,100%{opacity:.75}50%{opacity:1}}
#bb-app .jmp-tag{position:absolute;top:8px;left:0;right:0;text-align:center;font-weight:800;color:var(--accent);z-index:2;}
#bb-app .jmp-char{position:absolute;width:26px;height:26px;border-radius:8px;background:linear-gradient(var(--accent3),#1f8f63);box-shadow:0 0 10px rgba(46,200,130,.55);z-index:2;}
#bb-app .jmp-plat{position:absolute;height:14px;border-radius:6px;background:linear-gradient(135deg,var(--accent2),var(--accent4));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.72rem;}
#bb-app .jmp-plat.tgt{background:linear-gradient(135deg,var(--accent),#ffd27a);color:#3a1d6e;}
#bb-app .hk-zones{position:absolute;top:0;left:0;right:0;height:30px;display:flex;}
#bb-app .hk-zone{flex:1;border-right:1px solid var(--surface);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-dim);background:rgba(139,61,238,.12);}
#bb-app .hk-puck{position:absolute;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffd27a);display:flex;align-items:center;justify-content:center;color:#3a1d6e;font-weight:800;z-index:2;}
#bb-app .hk-paddle{position:absolute;bottom:8px;height:14px;border-radius:8px;background:linear-gradient(var(--accent3),#1f8f63);box-shadow:0 0 10px rgba(46,200,130,.55);}
#bb-app .hk-piano{position:absolute;top:0;left:0;right:0;height:64px;}
#bb-app .hk-wkey{position:absolute;top:0;height:64px;background:linear-gradient(#fff,#e9e9f5);border:1px solid #b9b9d0;border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;color:#3a1d6e;font-weight:800;font-size:.72rem;box-sizing:border-box;}
#bb-app .hk-bkey{position:absolute;top:0;height:40px;background:linear-gradient(#2a2a3a,#000);border-radius:0 0 5px 5px;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;color:var(--accent);font-size:.6rem;}
#bb-app .hk-wkey.aim{background:linear-gradient(var(--accent3),#9affe9);}
#bb-app .hk-bkey.aim{background:linear-gradient(#7a5cff,#4d2dd8);}
#bb-app .hk-wkey.good,#bb-app .hk-bkey.good{background:linear-gradient(var(--good),#1f8f63);color:#fff;}
#bb-app .hk-wkey.badk,#bb-app .hk-bkey.badk{background:linear-gradient(var(--bad),#a0303c);color:#fff;}
#bb-app .hk-guide{position:absolute;width:2px;top:64px;bottom:24px;background:repeating-linear-gradient(var(--accent) 0 6px,transparent 6px 12px);opacity:.6;}
#bb-app .hk-target{position:absolute;top:72px;left:0;right:0;text-align:center;font-weight:800;color:var(--accent);z-index:1;}
#bb-app .arc-ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
    background:#0d0d15;border-radius:18px;z-index:5;color:var(--text);}
#bb-app .arc-ov.show{display:flex;}
#bb-app .arc-ov .box{width:90%;max-width:580px;padding:30px 34px;background:#191925;border:1px solid #33344a;border-radius:16px;}
#bb-app .lvl-badge{display:inline-block;background:linear-gradient(90deg,var(--accent2),var(--accent4));color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.5px;padding:5px 13px;border-radius:10px;margin-bottom:8px;}
#bb-app .lvl-name{font-weight:800;color:var(--accent);font-size:1.08rem;margin:2px 0 2px;}
#bb-app .lvl-dots{display:flex;gap:8px;justify-content:center;margin:12px 0 8px;}
#bb-app .lvldot{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid #33344a;}
#bb-app .lvldot.done{background:var(--accent3);border-color:transparent;}
#bb-app .lvldot.cur{background:var(--accent);border-color:#fff;box-shadow:0 0 0 2px var(--accent);}
#bb-app .lvl-pick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0 8px;}
#bb-app .lvlpk{min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:var(--surface);border:1px solid var(--panelborder);color:var(--text);font-weight:800;cursor:pointer;}
#bb-app .lvlpk.cur{background:linear-gradient(90deg,var(--accent2),var(--accent4));color:#fff;border-color:#fff;}
#bb-app .lvlpk.lock{opacity:.35;cursor:not-allowed;}
#bb-app .arc-ov h2{font-family:var(--font-display);font-size:2.1rem;margin-bottom:10px;}
#bb-app .arc-ov p{color:var(--text-dim);margin:6px 0;font-size:1.02rem;}
#bb-app .arc-ov .bb-big{font-family:var(--font-display);font-size:3rem;color:var(--accent);margin:6px 0;}
#bb-app .arc-ov .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px;}
#bb-app .arc-ov .row .bb-btn{font-size:1.05rem;padding:14px 26px;}
#bb-app #bonus-field{position:relative;height:440px;border-radius:14px;overflow:hidden;border:1px solid var(--panelborder);background:linear-gradient(180deg,rgba(61,95,236,.12),rgba(139,61,238,.08)),#101019;}
#bb-app .bonus-coin{position:absolute;font-size:2.1rem;cursor:pointer;user-select:none;transition:transform .06s;will-change:top;}
#bb-app .bonus-coin:hover{transform:scale(1.18);}
#bb-app .bonus-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:8px;}
#bb-app .coin{display:inline-block;width:1.1em;height:1.1em;vertical-align:-0.2em;}
#bb-app #iso-wrap{margin-top:10px;border-radius:14px;overflow:hidden;border:1px solid var(--panelborder);background:linear-gradient(180deg,#cdebff,#8fc8ff 60%,#6db0f0);}
#bb-app #ex3d{width:100%;height:480px;border-radius:14px;overflow:hidden;border:1px solid var(--panelborder);background:#8fc8ff;cursor:crosshair;}
#bb-app #ex3d canvas{display:block;}
#bb-app #ex-prompt{position:absolute;left:0;right:0;bottom:16px;text-align:center;pointer-events:none;}
#bb-app #ex-prompt span{display:inline-block;background:rgba(0,0,0,.72);color:#fff;padding:9px 18px;border-radius:10px;font-weight:800;pointer-events:auto;cursor:pointer;}
#bb-app .ex-pad{display:inline-flex;gap:8px;}
#bb-app .ex-pad .arc-key{font-size:1.4rem;min-width:62px;}
#bb-app #isoCanvas{display:block;width:100%;height:auto;cursor:pointer;}
#bb-app .pal-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;}
#bb-app .pal-lock{flex:1 1 100%;background:rgba(255,210,26,.10);border:1px dashed var(--gold,#ffd21a);color:var(--text-dim,#c9cef5);border-radius:10px;padding:8px 12px;font-size:.8rem;line-height:1.35;}
#bb-app .pal-lock b{color:var(--gold,#ffd21a);}
#bb-app .pal-stage{background:rgba(123,92,255,.12);border-color:#7b5cff;}
#bb-app .pal-stage b{color:#b9a6ff;}
#bb-app #stage-editor{position:fixed;inset:0;background:rgba(10,10,20,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:14px;}
#bb-app #stage-editor .se-box{background:#1c1c28;border:1px solid #2e2e40;border-radius:16px;max-width:940px;width:100%;max-height:92vh;overflow:auto;padding:14px 16px;color:#eef0f7;box-shadow:0 20px 60px rgba(0,0,0,.5);}
#bb-app .se-head{display:flex;justify-content:space-between;align-items:center;font-size:1.05rem;margin-bottom:8px;}
#bb-app .se-x{cursor:pointer;font-weight:800;opacity:.6;padding:2px 8px;}
#bb-app .se-body{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
#bb-app .se-stage{flex:1 1 360px;min-width:300px;}
#bb-app #se-canvas{width:100%;height:auto;background:#141220;border-radius:12px;border:1px solid #2e2e40;touch-action:none;cursor:crosshair;display:block;}
#bb-app .se-pal{flex:1 1 240px;min-width:220px;max-height:62vh;overflow:auto;}
#bb-app .se-tools{display:flex;gap:8px;margin-bottom:8px;}
#bb-app .se-tool{flex:1;background:#23233a;border:1px solid #34344a;border-radius:9px;padding:8px;color:#eef0f7;font-weight:800;font-size:.8rem;cursor:pointer;}
#bb-app .se-tool.on{background:linear-gradient(90deg,#7b5cff,#ee3d8b);border-color:#fff;color:#fff;}
#bb-app .se-grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:#9aa0b8;margin:10px 0 5px;font-weight:800;}
#bb-app .se-row{display:flex;flex-wrap:wrap;gap:6px;}
#bb-app .se-btn{background:#23233a;border:1px solid #34344a;border-radius:9px;padding:6px 4px;width:70px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:#eef0f7;}
#bb-app .se-btn.on{border-color:#7b5cff;background:#2b2650;}
#bb-app .se-btn.off{opacity:.45;}
#bb-app .se-btn span{font-size:1.25rem;line-height:1;}
#bb-app .se-btn small{font-size:.6rem;text-align:center;}
#bb-app .se-btn em{font-size:.6rem;color:#ffd21a;font-style:normal;}
#bb-app .se-foot{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#bb-app .se-done{background:linear-gradient(90deg,#7b5cff,#ee3d8b);border:none;color:#fff;font-weight:800;border-radius:10px;padding:8px 18px;cursor:pointer;}
#bb-app .se-tip{color:#9aa0b8;font-size:.72rem;}
#bb-app .pal-label{font-size:.66rem;font-weight:800;color:var(--text-dim);margin-right:2px;text-transform:uppercase;letter-spacing:.5px;width:100%;}
#bb-app .pal-btn{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:56px;padding:6px;border-radius:10px;background:var(--surface);border:1px solid var(--panelborder);cursor:pointer;font-size:.6rem;color:var(--text-dim);text-align:center;}
#bb-app .pal-btn.sel{outline:2px solid var(--accent);background:var(--surface-hi);color:var(--text);}
#bb-app .pal-btn .em{font-size:1.35rem;line-height:1;}
#bb-app .pal-btn .stagico{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;}
#bb-app .pal-btn .cc{color:var(--accent);font-weight:800;font-size:.6rem;}
#bb-app .bonus-coin svg{width:38px;height:38px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
#bb-app .progressbar{height:10px;background:var(--chip-bg);border-radius:10px;overflow:hidden;margin:6px 0 2px;}
#bb-app .progressbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent3),var(--accent));width:0;transition:width .3s;}
#bb-app .small{font-size:.8rem;color:var(--text-dim);}
#bb-app .center{text-align:center;}
#bb-app footer{text-align:center;color:var(--text-muted);font-size:.78rem;margin:24px 0 10px;}

/* ---- portal hub additions ---- */
#bb-app{--font:inherit;}
#bb-app .bb-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
#bb-app .bb-chips{display:flex;gap:8px;flex-wrap:wrap;}
#bb-app .card .cat{font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);font-weight:700;margin-bottom:6px;}
#bb-app .card.hidden{display:none;}
#bb-app .bb-hero{text-align:center;padding:10px 16px 6px;}
#bb-app .bb-hero h1{font-family:var(--font-display);font-size:2.4rem;line-height:1.05;margin:0;}
#bb-app .bb-hero h1 .g{background:linear-gradient(90deg,var(--accent4),var(--accent-purple),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#bb-app .bb-hero p{max-width:600px;margin:10px auto 6px;color:var(--text-dim);font-size:1.02rem;line-height:1.5;}
#bb-app .bb-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 4px;}
#bb-app .bb-pill{background:var(--surface);border:1px solid var(--panelborder);color:var(--text-dim);border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:700;font-size:.85rem;}
#bb-app .bb-pill.active,#bb-app .bb-pill:hover{background:var(--surface-hi);color:var(--text);}
#bb-app.playing .bb-topline>.backbtn{visibility:hidden;}
#bb-app .pts{font-family:var(--font);font-size:.45em;font-weight:800;letter-spacing:1px;color:var(--text-dim);vertical-align:middle;}
#bb-app .bb-total{margin-top:10px;font-size:1rem;color:var(--text);} #bb-app .bb-total span{color:var(--text-dim);font-size:.9rem;}
#bb-app .bb-submit{margin-top:14px;padding-top:12px;border-top:1px solid var(--panelborder);}
#bb-app .bb-sub-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:8px;}
#bb-app .bb-sub-row input,#bb-app .bb-sub-row select{background:var(--surface);border:1px solid var(--panelborder);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit;min-width:150px;}
#bb-app .bb-sub-status{font-size:.92rem;color:var(--text-dim);}
#bb-app .bb-sub-status a{color:var(--text);}
#bb-app .card .card-board{margin-top:8px;font-size:.82rem;font-weight:700;color:var(--text-dim);text-decoration:none;}
#bb-app .card .card-board:hover{color:var(--text);text-decoration:underline;}
#bb-app .board-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px;}
#bb-app .board-class{font-size:.9rem;color:var(--text-dim);font-weight:700;}
#bb-app .board-class select{margin-left:6px;background:var(--surface);border:1px solid var(--panelborder);color:var(--text);border-radius:10px;padding:7px 10px;font:inherit;}
#bb-app .bb-board{width:100%;border-collapse:collapse;font-size:1rem;}
#bb-app .bb-board th{text-align:left;font-size:.75rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--panelborder);}
#bb-app .bb-board td{padding:10px;border-bottom:1px solid var(--panelborder);}
#bb-app .bb-board .num{text-align:right;} #bb-app .bb-board .rank{width:2.4em;font-weight:800;}
#bb-app .bb-board tr.me td{background:var(--surface-hi);}
#bb-app .bb-board tbody tr:first-child td{font-size:1.1rem;}
#bb-app .bb-empty{padding:28px;text-align:center;color:var(--text-dim);border:1px dashed var(--panelborder);border-radius:12px;}
#bb-app .bb-note{color:var(--text-muted);font-size:.85rem;text-align:center;margin-top:22px;}

/* ---- Whack-a-Note ---- */
#bb-app .wm-sky{position:absolute;inset:0;background:linear-gradient(180deg,#8fd3ff 0%,#d9f1ff 55%,#7cc95a 55%,#4fa63a 100%);}
#bb-app .wm-grass{position:absolute;left:0;right:0;top:55%;height:6px;background:#3d8f2c;opacity:.5;}
#bb-app .wm-tagbar{color:#1b1730;text-shadow:0 1px 0 #fff;}
#bb-app .wm-hear{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.15);border-radius:999px;padding:1px 8px;cursor:pointer;font-size:.9rem;margin-left:6px;}
#bb-app .wm-holes{position:absolute;left:0;right:0;top:44px;bottom:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding:0 6%;}
#bb-app .wm-hole{position:relative;overflow:hidden;}
#bb-app .wm-dirt{position:absolute;left:50%;bottom:10px;width:120px;height:34px;margin-left:-60px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#3a2417,#1e120a);box-shadow:inset 0 4px 8px rgba(0,0,0,.6);}
#bb-app .wm-mole{position:absolute;left:50%;bottom:22px;width:76px;height:92px;margin-left:-38px;transform:translateY(140px);transition:transform .16s ease-out;cursor:pointer;touch-action:none;user-select:none;}
#bb-app .wm-mole.up{transform:translateY(0);}
#bb-app .wm-mole.bonk{transform:translateY(140px) rotate(-12deg);transition:transform .12s ease-in;}
#bb-app .wm-face{position:absolute;left:8px;top:0;width:60px;height:56px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 35%,#b07a4a,#7a4b26);box-shadow:inset 0 -6px 10px rgba(0,0,0,.25);}
#bb-app .wm-face::before,#bb-app .wm-face::after{content:'';position:absolute;top:18px;width:9px;height:9px;border-radius:50%;background:#1b1210;}
#bb-app .wm-face::before{left:16px;} #bb-app .wm-face::after{right:16px;}
#bb-app .wm-card{position:absolute;left:10px;top:30px;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid #3a2417;color:#15151d;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#bb-app .wm-card svg{display:block;}

/* ---- Rhythm Conveyor ---- */
#bb-app .cv-belt{position:absolute;left:0;right:0;top:34px;height:80px;background:linear-gradient(#5a5d75,#3e4056);border-top:4px solid #7b7ea0;border-bottom:4px solid #2a2c3d;}
#bb-app .cv-rollers{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:space-around;}
#bb-app .cv-rollers i{width:12px;height:12px;border-radius:50%;background:#c9cef5;opacity:.6;}
#bb-app .cv-tag{top:118px;font-size:.9rem;}
#bb-app .cv-card{position:absolute;width:52px;height:52px;border-radius:10px;background:#fff;color:#15151d;border:2px solid #2a2c38;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;box-shadow:0 4px 10px rgba(0,0,0,.35);z-index:5;}
#bb-app .cv-card.sel{outline:3px solid var(--accent);}
#bb-app .cv-card.drag{cursor:grabbing;z-index:9;transform:scale(1.08);}
#bb-app .cv-card.in{transition:left .3s,top .3s,opacity .3s;opacity:0;}
#bb-app .cv-boxes{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:space-around;padding:0 4%;}
#bb-app .cv-box{width:96px;text-align:center;cursor:pointer;padding-top:6px;}
#bb-app .cv-boxart{width:78px;height:54px;margin:0 auto;border-radius:6px;background:linear-gradient(#e0a256,#b7742f);border:2px solid #7a4b1a;position:relative;box-shadow:inset 0 10px 14px rgba(0,0,0,.25);}
#bb-app .cv-boxart::before{content:'';position:absolute;left:-6px;right:-6px;top:-10px;height:14px;background:#d99a4d;border:2px solid #7a4b1a;border-radius:3px;}
#bb-app .cv-box.over .cv-boxart{box-shadow:0 0 0 4px var(--accent3),inset 0 10px 14px rgba(0,0,0,.25);}
#bb-app .cv-box.hit .cv-boxart{transform:scale(1.08);}
#bb-app .cv-boxlabel{font-weight:800;font-size:.85rem;margin-top:8px;color:var(--text);}