/* 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;}}

/* ---- Rewards (games-rewards.js): your panel, medals, crowns, champions ---- */
#bb-app .rw-me{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:14px 0 6px;padding:16px 18px;text-align:left;
    background:var(--panel);border:1.5px solid var(--text);border-radius:16px;}
#bb-app .rw-badge{flex:none;width:76px;height:76px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:2.3rem;line-height:1;color:#fff;background:#7031d8;}
#bb-app .rw-badge small{font-family:var(--font);font-size:.62rem;font-weight:800;letter-spacing:1.5px;opacity:.85;margin-bottom:3px;}
#bb-app .rw-badge.rk0,#bb-app .rw-badge.rk1{background:#1fa463;}
#bb-app .rw-badge.rk2,#bb-app .rw-badge.rk3{background:#3d5fec;}
#bb-app .rw-badge.rk4,#bb-app .rw-badge.rk5{background:#7031d8;}
#bb-app .rw-badge.rk6,#bb-app .rw-badge.rk7{background:#e43a6c;}
#bb-app .rw-badge.rk8{background:linear-gradient(135deg,#ffb84d,#e43a6c 55%,#7031d8);}
#bb-app .rw-main{flex:1 1 220px;min-width:0;}
#bb-app .rw-who{font-size:.8rem;font-weight:700;color:var(--text-muted);letter-spacing:.3px;}
#bb-app .rw-rank{font-family:var(--font-display);font-size:1.75rem;line-height:1.1;text-transform:uppercase;margin:2px 0 8px;}
#bb-app .rw-main p{color:var(--text-dim);font-size:.92rem;line-height:1.45;}
#bb-app .rw-bar{height:10px;border-radius:4px;background:var(--surface-hi);overflow:hidden;}
#bb-app .rw-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#e43a6c,#7031d8);transition:width .6s;}
#bb-app .rw-next{margin-top:6px;font-size:.85rem;color:var(--text-dim);}
#bb-app .rw-next b{color:var(--text);}
#bb-app .rw-stats{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 300px;}
#bb-app .rw-stat{flex:1 1 90px;background:var(--surface);border-radius:10px;padding:8px 10px;text-align:center;}
#bb-app .rw-stat b{display:block;font-size:1.05rem;white-space:nowrap;}
#bb-app .rw-stat span{display:block;font-size:.72rem;color:var(--text-muted);font-weight:700;line-height:1.25;margin-top:2px;}
#bb-app .rw-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:none;}
#bb-app .rw-acts .bb-btn{padding:10px 16px;font-size:.92rem;}
#bb-app .rw-how{background:none;border:none;color:var(--text-dim);font:inherit;font-size:.85rem;font-weight:700;text-decoration:underline;cursor:pointer;}
#bb-app .rw-howbox{flex:1 1 100%;border-top:1px solid var(--panelborder);padding-top:12px;}
#bb-app .rw-how-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
#bb-app .rw-how-cols h4{font-size:.95rem;margin:8px 0 3px;}
#bb-app .rw-how-cols h4:first-child{margin-top:0;}
#bb-app .rw-how-cols p{font-size:.88rem;color:var(--text-dim);line-height:1.45;}
#bb-app .rw-ladder{list-style:none;margin-top:6px;}
#bb-app .rw-ladder li{display:flex;justify-content:space-between;padding:4px 8px;border-radius:6px;font-size:.88rem;color:var(--text-dim);}
#bb-app .rw-ladder li.done{color:var(--text);}
#bb-app .rw-ladder li.cur{background:var(--text);color:var(--panel);}
#bb-app .rw-signin{border-color:#e43a6c;}
#bb-app .rw-lockico{font-size:2.4rem;flex:none;}
#bb-app .rw-signin .bb-btn{text-decoration:none;padding:12px 26px;flex:none;}
#bb-app .grid.locked .card{opacity:.72;}
#bb-app .grid.locked .card:hover{opacity:1;}
#bb-app .rw-lock{margin-top:auto;padding-top:10px;font-size:.85rem;font-weight:800;color:#e43a6c;}
#bb-app .rw-card{margin-top:auto;padding-top:10px;font-size:.8rem;line-height:1.35;}
#bb-app .rw-medals{display:flex;justify-content:center;gap:8px;font-size:1.25rem;}
#bb-app .rw-m{filter:grayscale(1);opacity:.32;white-space:nowrap;}
#bb-app .rw-m.on{filter:none;opacity:1;}
#bb-app .rw-m small{font-size:.62rem;font-weight:800;color:var(--text-muted);margin-left:1px;vertical-align:1px;}
#bb-app .rw-next-m{color:var(--text-muted);font-weight:700;margin-top:3px;}
#bb-app .rw-crown{margin-top:8px;padding:5px 8px;border-radius:6px;background:var(--surface);color:var(--text-dim);}
#bb-app .rw-crown.mine{background:#ffe9a8;color:#5a3d00;}
#bb-app .rw-best{margin-top:6px;font-weight:700;color:var(--text-dim);}
#bb-app .board-gap{display:inline-block;width:12px;}
/* in the game (dark overlay) */
#bb-app .rw-start{margin-top:8px;}
#bb-app .rw-start .rw-m{font-weight:800;}
#bb-app .rw-start-t{color:var(--text-muted);font-size:.85rem;margin-left:4px;}
#bb-app .rw-runline{margin-top:6px;font-weight:800;color:var(--accent);font-size:.92rem;}
#bb-app .rw-wins{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px;}
#bb-app .rw-win{padding:8px 12px;border-radius:10px;background:rgba(255,184,77,.16);border:1px solid rgba(255,184,77,.5);color:#ffe2a8;font-weight:800;}
#bb-app .rw-win.big{font-family:var(--font-display);font-size:1.4rem;font-weight:400;background:linear-gradient(90deg,#e43a6c,#7031d8);border:none;color:#fff;}
#bb-app .rw-tip{font-size:.9rem;color:var(--text-dim);}
#bb-app .rw-prog{font-size:.9rem;color:var(--text-dim);margin-top:2px;}
#bb-app .rw-prog b{color:var(--accent);}
.rw-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;}
/* champions */
#bb-app .rw-ch-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
#bb-app .rw-ch-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
#bb-app .rw-ch-week{color:var(--text-muted);font-size:.88rem;margin:4px 0 14px;}
#bb-app .rw-ch-h{font-size:1rem;margin:14px 0 8px;}
#bb-app .rw-podium{list-style:none;display:flex;flex-direction:column;gap:6px;}
#bb-app .rw-podium li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--surface);}
#bb-app .rw-podium li.me{outline:2px solid #e43a6c;}
#bb-app .rw-podium li b{flex:1;}
#bb-app .rw-podium li span{color:var(--text-dim);font-size:.88rem;}
#bb-app .rw-pos{width:2em;text-align:center;font-weight:800;font-size:1.1rem;color:var(--text)!important;}
#bb-app .rw-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
#bb-app .rw-ch-card{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;border:1.5px solid var(--panelborder);background:var(--panel);}
#bb-app .rw-ch-card.empty{opacity:.6;}
#bb-app .rw-ch-card .ico{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
#bb-app .rw-ch-card .ico-svg{width:22px;height:22px;fill:#fff;}
#bb-app .rw-ch-card .ico.blocks{background:#f0973a;} #bb-app .rw-ch-card .ico.decor{background:#ee3d8b;} #bb-app .rw-ch-card .ico.items{background:#3d5fec;}
#bb-app .rw-ch-body{min-width:0;}
#bb-app .rw-ch-game{font-size:.75rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);}
#bb-app .rw-ch-king{font-weight:800;}
#bb-app .rw-ch-king.me{color:#e43a6c;}
#bb-app .rw-ch-rest{font-size:.8rem;color:var(--text-dim);}
#bb-app #champs:fullscreen{background:var(--panel);overflow:auto;padding:28px;}
:root:not([data-theme="dark"]) #bb-app #champs:fullscreen{background:#fffdf8;}
#bb-app #champs:fullscreen .backbtn{display:none;}
#bb-app #champs:fullscreen .rw-ch-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
#bb-app #champs:fullscreen .rw-ch-king{font-size:1.15rem;}
@media (max-width:600px){ #bb-app .rw-acts{flex:1 1 100%;} #bb-app .rw-rank{font-size:1.45rem;} }
/* results cards grew (rank, medal, crown lines): let a tall card scroll inside the game area instead of being cut off at the top */
#bb-app .arc-ov.show{align-items:flex-start;overflow-y:auto;padding:14px 0;}
#bb-app .arc-ov .box{margin:auto;}
#bb-app .panel:has(> .arc-ov.show .bb-submit){min-height:700px;}
/* Starting higher up, the champions/table tabs and the school table (20 Oct 2026) */
#bb-app .bb-skip{margin-top:12px;padding-top:10px;border-top:1px dashed var(--panelborder);font-size:.9rem;color:var(--text-dim);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;}
#bb-app .bb-skip small{flex-basis:100%;font-size:.78rem;color:var(--text-muted);}
#bb-app .rw-tab{font:inherit;font-weight:800;font-size:1.05rem;background:none;border:0;color:var(--text-muted);padding:4px 10px 6px;border-bottom:3px solid transparent;cursor:pointer;}
#bb-app .rw-tab.active{color:var(--text);border-bottom-color:#e43a6c;}
#bb-app .rw-tb-ctrl{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;}
#bb-app .rw-table{width:100%;border-collapse:collapse;font-size:.95rem;}
#bb-app .rw-table th,#bb-app .rw-table td{padding:8px 10px;border-bottom:1px solid var(--panelborder);text-align:left;}
#bb-app .rw-table th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
#bb-app .rw-table .num{text-align:right;}
#bb-app .rw-table tr.me td{background:rgba(228,58,108,.08);}
#bb-app .rw-gap{margin-left:auto;}
#bb-app .rw-table td .small{color:var(--text-muted);font-size:.8rem;}