/* MIX-ED Games hub — the portal's look on top of games-arcade.css.
   games-arcade.css is generated by docs/games-hub-build.py; keep hand-made styling here
   so a rebuild doesn't wipe it. Loaded after games-arcade.css. */

/* Mix-Ed Classroom look (matches styles.css) */
#bb-app{--font:"Open Sans","Helvetica Neue",Arial,sans-serif;--font-display:"Anton","Arial Narrow",Impact,sans-serif;font-synthesis-weight:none;}
:root:not([data-theme="dark"]) #bb-app{
    --panel:#fffdf8; --panelborder:#d6cdb9;
    --text:#111; --text-dim:#45444f; --text-muted:#6b6878;
    --chip-bg:#fffdf8; --surface:#efe8d8; --surface-hi:#e6dcc6;
  }
:root[data-theme="dark"] #bb-app{
    --panel:rgba(24,24,32,.72); --panelborder:#2e2e38;
    --text:#f4f4f6; --text-dim:#c3c3cf; --text-muted:#a4a4b2;
  }
#bb-app .bb-hero h1{text-transform:uppercase;font-weight:400;font-size:clamp(40px,6vw,64px);letter-spacing:.5px;}
#bb-app .bb-hero h1 .g{background:none;-webkit-text-fill-color:currentColor;color:var(--text);}
#bb-app .card h3{font-weight:800;}
#bb-app .backbtn{background:var(--panel);border:1.5px solid var(--text);border-radius:10px;font-size:14px;}
#bb-app .backbtn:hover{background:var(--text);color:var(--panel);}
#bb-app .bb-pill{border:1.5px solid var(--panelborder);}
#bb-app .bb-pill.active{background:var(--text);border-color:var(--text);color:var(--panel);}
#bb-app .bb-btn{background:#e43a6c;box-shadow:none;border-radius:10px;}
#bb-app .bb-btn.alt{background:#1fa463;color:#fff;box-shadow:none;}
#bb-app .bb-pill{border-radius:8px;}
#bb-app .wm-hear{border-radius:6px;}

/* Game cards: a thin line in the colour of the card's icon; hover lifts the card with a
   shadow and the background stays the same. */
#bb-app .card{--card-accent:var(--panelborder);border:1.5px solid var(--card-accent);
    box-shadow:0 2px 6px rgba(70,50,20,.06);transition:transform .15s,box-shadow .15s;}
#bb-app .card:has(.ico.blocks){--card-accent:#f0973a;}
#bb-app .card:has(.ico.decor){--card-accent:#ee3d8b;}
#bb-app .card:has(.ico.items){--card-accent:#3d5fec;}
#bb-app .card:hover{background:var(--panel);transform:translateY(-4px);box-shadow:0 16px 34px rgba(70,50,20,.16);}
:root[data-theme="dark"] #bb-app .card{box-shadow:none;}
:root[data-theme="dark"] #bb-app .card:hover{box-shadow:0 24px 44px -20px rgba(0,0,0,.6);}
@media (prefers-reduced-motion: reduce){#bb-app .card,#bb-app .card:hover{transition:none;transform:none;}}