/* Game Room app shell — sidebar layout shared by all non-gameplay pages */
:root{--gr-side:232px;--gr-ink:#2b2b2b;--gr-gold:#c98a2b;--gr-gold-dk:#b57a20;--gr-navy:#1b2130;--gr-navy-2:#232b3d;--gr-cream:#fdf8ee;--gr-line:#e3d5b8}
html,body{margin:0}
body.gr-shell{min-height:100vh}
body.gr-page{background:#f4efe3;font-family:Georgia,"Times New Roman",serif;color:var(--gr-ink)}
.gr-side{position:fixed;top:0;left:0;bottom:0;width:var(--gr-side);background:linear-gradient(180deg,var(--gr-navy),var(--gr-navy-2));color:#f4ede0;display:flex;flex-direction:column;padding:18px 14px;box-sizing:border-box;z-index:50;box-shadow:4px 0 24px rgba(0,0,0,.25)}
.gr-brand{display:flex;align-items:center;gap:10px;font-weight:bold;font-size:17px;letter-spacing:.02em;padding:6px 8px 18px;color:#f4d9a6;text-decoration:none}
.gr-brand .gr-logo{font-size:26px}
.gr-nav{display:flex;flex-direction:column;gap:4px}
.gr-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:#e9e1d0;text-decoration:none;font-size:15.5px;transition:background .15s}
.gr-nav a:hover{background:rgba(255,255,255,.08)}
.gr-nav a.active{background:var(--gr-gold);color:#1b1200;font-weight:bold}
.gr-nav .gr-ico{font-size:19px;width:24px;text-align:center}
.gr-side .gr-spacer{flex:1}
.gr-side-btn{display:block;width:100%;box-sizing:border-box;margin:0 0 14px;padding:9px 12px;border:1.5px solid rgba(244,217,166,.55);border-radius:10px;background:rgba(255,255,255,.06);color:#f4d9a6;font-family:inherit;font-size:13.5px;font-weight:bold;text-align:center;cursor:pointer;text-decoration:none}
.gr-side-btn:hover{background:rgba(255,255,255,.12);border-color:#f4d9a6}
.gr-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;font-size:13px;color:#bfb7a6}
.gr-foot a{color:#f4d9a6;text-decoration:none}
.gr-foot .gr-user{display:block;margin-top:8px;word-break:break-all;color:#e9e1d0}
.gr-foot button{background:none;border:none;color:#f4d9a6;cursor:pointer;font-family:inherit;padding:0;font-size:13px;text-decoration:underline}
.gr-main{margin-left:var(--gr-side);padding:30px 34px 60px;min-height:100vh;box-sizing:border-box}
.gr-page-title{font-size:30px;margin:0 0 4px;color:#7c4a03}
.gr-page-sub{color:#6b6356;margin:0 0 22px;font-size:15.5px}
.gr-card{background:var(--gr-cream);border:1px solid var(--gr-line);border-radius:16px;padding:22px;box-shadow:0 8px 30px rgba(60,40,10,.08)}
.gr-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;border:1.5px solid var(--gr-gold);background:#fff;color:#7c4a03;font-family:inherit;font-weight:bold;font-size:15px;cursor:pointer;text-decoration:none;transition:background .15s}
.gr-btn:hover{background:#fbf0da}
.gr-btn.primary{background:var(--gr-gold);color:#fff;border-color:var(--gr-gold)}
.gr-btn.primary:hover{background:var(--gr-gold-dk)}
.gr-btn.danger{border-color:#d98a80;color:#c0392b}
.gr-btn.ghost{border-color:#cfc4ad;color:#6b6356}
.gr-btn:disabled{opacity:.55;cursor:default}
.gr-label{display:block;font-weight:bold;margin:14px 0 6px;font-size:15px}
.gr-input,.gr-select,.gr-textarea{width:100%;padding:11px 12px;font-size:16px;border:1.5px solid #c9b189;border-radius:9px;background:#fff;font-family:inherit;box-sizing:border-box}
.gr-textarea{min-height:90px;resize:vertical}
.gr-hint{font-size:13px;color:#7a7262;margin-top:5px}
.gr-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:bold}
.gr-pill.public{background:#d9f2e0;color:#1e7e34}.gr-pill.private{background:#f4e2c4;color:#7c4a03}
.gr-tag{display:inline-block;background:#efe5cf;color:#6b4a10;border-radius:999px;padding:2px 9px;font-size:12.5px;margin:2px 4px 2px 0}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.gr-steps{display:flex;gap:8px;margin:0 0 20px;flex-wrap:wrap}
.gr-steps span{padding:7px 14px;border-radius:999px;background:#efe5cf;color:#7a6a4a;font-size:14px;font-weight:bold}
.gr-steps span.on{background:var(--gr-gold);color:#fff}.gr-steps span.done{background:#d9f2e0;color:#1e7e34}
.gr-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.gr-empty{text-align:center;color:#8a8172;padding:40px 10px;font-size:16px}
.gr-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.gr-modal .gr-card{max-width:560px;width:100%;max-height:90vh;overflow:auto}
@media (max-width:860px){.gr-side{width:70px;padding:14px 8px}.gr-brand span.t,.gr-nav a span.t,.gr-foot,.gr-side-btn{display:none!important}.gr-nav a{justify-content:center}.gr-main{margin-left:70px;padding:20px 16px}}

/* ===== Game setup skin — applies ONLY inside #setupScreen when the shell is on.
   Matches the My Question Banks look: cream card, Georgia type, gold buttons.
   Gameplay (#playScreen) is untouched. ===== */
body.gr-shell #setupScreen{font-family:Georgia,"Times New Roman",serif;color:var(--gr-ink)}
body.gr-shell #setupScreen .card{background:var(--gr-cream);border:1px solid var(--gr-line);border-radius:18px;box-shadow:0 8px 30px rgba(60,40,10,.10);padding:26px 30px 30px}
body.gr-shell #setupScreen .brand-top,body.gr-shell #setupScreen #qi-home{display:none!important}
body.gr-shell #setupScreen h1{font-family:Georgia,serif;font-size:34px;line-height:1.1;letter-spacing:0;color:#7c4a03;background:none;-webkit-text-fill-color:#7c4a03;text-shadow:none;margin:4px 0 6px;text-align:left;font-weight:bold}
body.gr-shell #setupScreen .subtitle{color:#6b6356;font-size:15.5px;font-weight:normal;text-align:left;margin:0 0 18px;max-width:none}
body.gr-shell #setupScreen h2{font-family:Georgia,serif;color:#7c4a03;font-size:20px;font-weight:bold;margin:18px 0 8px}
body.gr-shell #setupScreen .setup-tabs{display:flex;gap:8px;justify-content:flex-start;background:none;border:none;box-shadow:none;padding:0;margin:0 0 18px;border-radius:0}
body.gr-shell #setupScreen .tab{padding:8px 16px;border-radius:999px;background:#efe5cf;color:#7a6a4a;font-size:14px;font-weight:bold;border:none;box-shadow:none;font-family:inherit;text-transform:none;letter-spacing:0}
body.gr-shell #setupScreen .tab.active{background:var(--gr-gold);color:#fff}
body.gr-shell #setupScreen label{font-family:inherit;font-weight:bold;font-size:15px;color:var(--gr-ink);margin:12px 0 6px;display:block;text-transform:none;letter-spacing:0}
body.gr-shell #setupScreen input[type=text],body.gr-shell #setupScreen input[type=number],body.gr-shell #setupScreen input:not([type]),body.gr-shell #setupScreen select,body.gr-shell #setupScreen textarea{font-family:inherit;font-size:16px;padding:11px 12px;border:1.5px solid #c9b189;border-radius:9px;background:#fff;color:var(--gr-ink);box-shadow:none;font-weight:normal}
body.gr-shell #setupScreen textarea[readonly]{background:#faf7f0}
body.gr-shell #setupScreen button{font-family:inherit;font-weight:bold;border-radius:10px;box-shadow:none;text-transform:none;letter-spacing:0;transition:background .15s}
body.gr-shell #setupScreen button.primary{background:var(--gr-gold);color:#fff;border:1.5px solid var(--gr-gold);padding:11px 18px;font-size:15px}
body.gr-shell #setupScreen button.primary:hover{background:var(--gr-gold-dk)}
body.gr-shell #setupScreen button.secondary,body.gr-shell #setupScreen a.secondary{background:#fff;color:#7c4a03;border:1.5px solid var(--gr-gold);padding:10px 16px;font-size:14.5px;border-radius:10px;font-weight:bold;font-family:inherit;box-shadow:none}
body.gr-shell #setupScreen button.secondary:hover{background:#fbf0da}
body.gr-shell #setupScreen button.danger{background:#fff;color:#c0392b;border:1.5px solid #d98a80;box-shadow:none}
body.gr-shell #setupScreen .note{background:#fff;border:1px solid var(--gr-line);border-radius:12px;padding:12px 16px;font-size:14.5px;color:#4f483d;box-shadow:none;font-weight:normal}
body.gr-shell #setupScreen .note strong{color:#7c4a03}
body.gr-shell #setupScreen #grBankPick,body.gr-shell #setupScreen #grQNote{background:#fff!important;border:1.5px solid var(--gr-gold)!important;border-radius:12px!important;box-shadow:none!important}
body.gr-shell #setupScreen #grBankSel{font-family:inherit!important;font-size:16px!important;border:1.5px solid #c9b189!important;border-radius:9px!important;padding:10px 12px!important;font-weight:normal!important}
body.gr-shell #setupScreen .question-row,body.gr-shell #setupScreen .q-row{background:#fff;border:1px solid var(--gr-line);border-radius:12px;box-shadow:none}
body.gr-shell #setupScreen .q-num{background:var(--gr-gold);color:#fff;border-radius:8px;font-family:inherit}
body.gr-shell #setupScreen .actions{gap:10px}
body.gr-shell #setupScreen .bank-library{display:none}

/* ── "yours with Premium" ──────────────────────────────────────────────────
   A quiet corner mark on a game a PAYING member has and the free plan does
   not. Deliberately a small icon, not a badge: a "Premium" pill on 29 of 34
   tiles stops being information, and it is the same mark that means LOCKED
   on the free plan -- a paying teacher could read it as "did I lose access?"
   (Lauren, 21 Oct).

   Top-RIGHT, because "This month" and the Limited Edition ribbon own the
   top-left. Only ever drawn for someone who has full access to that product;
   a free teacher keeps the washed-out tile and the offer, which is a
   different job. */
.gr-prem-mark{
  position:absolute; right:6px; top:6px; z-index:3;
  width:21px; height:21px; border-radius:50%;
  background:#efe3fb; border:1px solid #d9bdf0;
  box-shadow:0 1px 3px rgba(20,12,4,.3);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
/* The diamond itself: a rotated square, so it scales and needs no asset. */
.gr-prem-mark::before{
  content:""; width:9px; height:9px; transform:rotate(45deg);
  background:linear-gradient(140deg,#7d4cb0,#5b2b86); border-radius:1.5px;
}
.gr-prem-legend{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:#8a7a62; margin:0 0 12px;
}
.gr-prem-legend .gr-prem-mark{ position:static; width:18px; height:18px; box-shadow:none; }