/* Shared visual shell only; game state, board geometry and semantic rarity colors stay intact. */
:root {
  --qe-brand:#b18aef; --qe-accent:#8c5bdd; --qe-brand-dim:#a377eb20;
  --qe-brand-glow:#a377eb45; --qe-bg:#050910; --qe-surface:#0e1522;
  --qe-surface-2:#171d2d; --qe-text:#edf0fa; --qe-muted:#a1abc0;
  --qe-border:#9f82c52e; --qe-font:"Outfit","Noto Sans TC",system-ui,sans-serif;
  --bg:#050910; --panel:#0e1522; --line:#9f82c52e; --text:#edf0fa; --muted:#a1abc0; --brand:#b18aef;
}
body:is(.bingo-body,.pw-body,.ac-body,.zd-body,.gw-body) {
  background:radial-gradient(ellipse at 85% 0%,#48296628,transparent 50%),#050910;
  font-family:var(--qe-font); color:#edf0fa;
}
.qt-nav { position:relative; z-index:20; background:#050910f2; border-bottom:1px solid #ffffff12; }
.qt-nav__inner { min-height:76px; width:min(100% - 40px,1200px); margin:auto; display:flex; align-items:center; gap:24px; }
.qt-brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#f2f1fb; flex-shrink:0; -webkit-touch-callout:none; user-select:none; }
.qt-brand img { width:38px; height:38px; -webkit-user-drag:none; }
.qt-brand > span { font-family:var(--qe-font); font-size:14px; font-weight:700; letter-spacing:.19em; line-height:1.3; }
.qt-brand small { display:block; color:#8c94ad; font-size:9px; letter-spacing:.14em; margin-top:4px; font-weight:400; }
.qt-back { color:#b8a7d2; font-size:12px; text-decoration:none; min-height:44px; display:flex; align-items:center; margin-left:auto; white-space:nowrap; }
.qt-back:hover { color:#e1d1fb; }
.qt-switch { display:flex; align-items:center; gap:10px; color:#8e98ad; font-size:11px; }
.qt-switch select { width:175px; height:42px; border:1px solid #9c78ca3f; border-radius:8px; padding:0 10px; color:#d9d1e9; background:#0d1320; font:inherit; font-size:12px; color-scheme:dark; }
:is(.bingo-wrap,.pw-wrap,.ac-wrap,.zd-wrap,.gw-wrap) { padding-top:30px; }
.pw-wrap { min-height:calc(100svh - 76px); justify-content:flex-start; padding-top:50px; }
.pw-top { display:none; }
:is(.bingo-top,.ac-top,.zd-top,.gw-top) { margin-bottom:24px; }
:is(.bingo-top,.ac-top,.zd-top,.gw-top) h1,.pw-title { color:#ece8f7; font-weight:700; }
:is(.bingo-top,.ac-top,.zd-top,.gw-top) > a { display:none; }
:is(.bingo-panel,.pw-panel,.ac-progress,.zd-roster,.gw-zone) { border-color:#a382cd2c; background:#0e1522; }
:is(.bingo-btn,.pw-btn,.ac-btn,.zd-btn,.gw-btn) { font-family:var(--qe-font); min-height:44px; border-radius:8px; transition:background .2s,border-color .2s,box-shadow .2s; }
:is(.bingo-btn--primary,.pw-btn--primary,.ac-btn--primary,.zd-btn--primary,.gw-btn--primary) {
  background:linear-gradient(115deg,#8d36e3,#6634b7); color:#fff; border:1px solid #b07bef65;
  box-shadow:0 4px 20px #853fe21c;
}
:is(.bingo-btn--primary,.pw-btn--primary,.ac-btn--primary,.zd-btn--primary,.gw-btn--primary):hover:not(:disabled) {
  background:linear-gradient(115deg,#9d4af0,#7845c9); box-shadow:0 5px 24px #853fe236;
}
:is(.bingo-input,.bingo-select,.pw-input) { border-color:#9a7cb83a; background:#070d17; }
:is(.bingo-btn,.pw-btn,.ac-btn,.zd-btn,.gw-btn):disabled { box-shadow:none; }
:is(a,button,input,select):focus-visible { outline:2px solid #b58cee; outline-offset:3px; }
.gw-mode.is-active { color:#dfccff; border-color:#a579d489; background:#9669d422; }
@media(max-width:620px) {
  .qt-nav__inner { width:calc(100% - 28px); flex-wrap:wrap; gap:10px 16px; padding-block:12px; }
  .qt-brand img { width:32px; height:32px; }
  .qt-brand > span { font-size:12px; }
  .qt-back { font-size:11px; }
  .qt-switch { width:100%; justify-content:space-between; }
  .qt-switch select { flex:1; max-width:260px; font-size:16px; }
  .pw-wrap { padding-top:30px; min-height:0; }
  :is(.bingo-wrap,.ac-wrap,.zd-wrap,.gw-wrap) { padding-top:24px; }
}
@media(prefers-reduced-motion:reduce) { :is(.bingo-btn,.pw-btn,.ac-btn,.zd-btn,.gw-btn) { transition:none; } }