/* Split out of css/gamebar.css (which @imports it) so the teacher portal
   can use the game setup banner without the solo-game bar styles. */

/* ── Game setup banner, level cards and How to play (js/game-hero.js) ──
   Shared by every solo game's setup screen. Markup, top to bottom:

     <header class="gh-hero" style="--gh:#D97706">          accent colour
       <div class="gh-hero-body">
         <div class="gh-hero-copy">
           <span class="gh-kicker"><svg>…</svg> Number puzzle</span>
           <h1 class="gh-title">Game name</h1>
           <p class="gh-sub">One or two sentences.</p>
           <button type="button" class="gh-help-btn" data-gh-help>…How to play</button>
         </div>
         <div class="gh-hero-art" aria-hidden="true">
           <span class="gh-bubble" style="left:…;top:…;width:…;height:…"></span>
           <div class="gh-art-card"> a little picture of the game — usually
             <div class="gh-tiles" style="--cols:3">…<span>7</span>…</div> </div>
           <canvas class="gh-blip" data-pose="sign" data-color="#…" data-text="…" data-face="-1"></canvas>
         </div>
       </div>
     </header>

   Optional level cards (keep the game's own class, e.g. .diff-card, for its JS):
     <h2 class="gh-section-label">Choose your grid</h2>
     <div class="gh-levels">
       <button class="diff-card gh-level" data-diff="easy" data-n="3">
         <span class="gh-level-preview"></span>   n×n preview, filled in by JS (needs data-n)
         <span class="gh-level-size">3×3</span>
         <span class="gh-level-name">Easy</span>
         <span class="gh-level-meta">Numbers 1–9</span>  (one or more)
         <span class="gh-level-pips"></span>      difficulty bars, filled in by JS
       </button> …
     </div>

   How to play modal (the page's only one; data-gh-help opens it):
     <div class="gh-help-overlay" id="gh-help" style="--gh:#…" hidden>
       <div class="gh-help-card" role="dialog" aria-modal="true" aria-labelledby="gh-help-title">
         <button class="gh-help-close" data-gh-help-close aria-label="Close">×</button>
         <svg class="gh-help-icon">…</svg>
         <h2 id="gh-help-title">How to play …</h2>
         <div class="gh-help-example">…</div>  <p class="gh-help-caption">…</p>  (optional)
         <ul>…</ul>
       </div>
     </div>

   Tiles (.gh-tiles span) take .is-accent (filled), .is-soft (tinted),
   .is-gap (dashed "missing" square), .is-blank (empty) and .is-op (bare
   operator/symbol); .gh-tiles.is-round makes them bubbles. --tile sets size.
   .gh-chips (word pills) and .gh-clock (an svg clock face) cover the rest. */

.gh-hero {
  --gh: var(--purple);
  --gh-ink: color-mix(in srgb, var(--gh) 78%, var(--btn-text));
  container-type: inline-size;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gh) 16%, var(--surface)), color-mix(in srgb, var(--gh) 4%, var(--surface)) 72%);
  border: 1.5px solid color-mix(in srgb, var(--gh) 26%, var(--toolbar-border));
  text-align: left;
}
.gh-hero-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.gh-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 24px 22px;
}
.gh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--gh) 16%, var(--surface));
  color: var(--gh-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gh-kicker svg { width: 15px; height: 15px; flex-shrink: 0; }
.gh-title {
  margin: 0;
  font-size: clamp(28px, 6cqi, 38px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--btn-text);
}
.gh-sub {
  margin: 0;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text-muted) 60%, var(--btn-text));
}
.gh-help-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 11px;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, var(--gh) 35%, var(--btn-border));
  background: var(--surface);
  color: var(--gh-ink);
  font-size: 13px;
  font-weight: 800;
}
.gh-help-btn svg { width: 17px; height: 17px; }
.gh-help-btn:hover { background: color-mix(in srgb, var(--gh) 10%, var(--surface)); border-color: var(--gh); }

/* The scene: a little picture of the game beside a Blip, on a soft floor */
.gh-hero-art {
  position: relative;
  min-height: 180px;
  background: radial-gradient(ellipse 85% 50% at 50% 100%, color-mix(in srgb, var(--gh) 18%, var(--surface)) 0 60%, transparent 61%);
}
.gh-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--gh) 35%, transparent);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.7), color-mix(in srgb, var(--gh) 10%, transparent) 60%);
}
.gh-art-card {
  position: absolute;
  left: 6%;
  top: 50%;
  translate: 0 -54%;
  rotate: -5deg;
  padding: 7px;
  border-radius: 12px;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--gh) 30%, var(--toolbar-border));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--gh) 18%, transparent);
}
.gh-blip {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 40%;
  max-width: 150px;
  height: 88%;
}
@container (min-width: 560px) {
  .gh-hero-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .gh-hero-copy { padding: 30px 8px 28px 32px; justify-content: center; }
  .gh-hero-art { min-height: 220px; }
}

/* Tiles: the building block for the banner pictures and help examples */
.gh-tiles {
  --tile: 32px;
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile));
  grid-auto-rows: var(--tile);
  gap: 3px;
}
.gh-tiles > span {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: calc(var(--tile) * .47);
  font-weight: 800;
  line-height: 1;
  color: var(--btn-text);
}
.gh-tiles > span.is-accent { background: var(--gh); color: #fff; }
.gh-tiles > span.is-soft { background: color-mix(in srgb, var(--gh) 18%, var(--surface)); color: var(--gh-ink, var(--gh)); }
.gh-tiles > span.is-gap {
  background: color-mix(in srgb, var(--gh) 18%, var(--surface));
  color: var(--gh-ink, var(--gh));
  outline: 2px dashed color-mix(in srgb, var(--gh) 60%, transparent);
  outline-offset: -3px;
}
.gh-tiles > span.is-blank { color: transparent; }
.gh-tiles > span.is-op { background: transparent; color: var(--text-muted); }
.gh-tiles > span.is-ok { color: #16A34A; background: transparent; font-size: calc(var(--tile) * .38); }
.gh-tiles.is-round > span { border-radius: 50%; }
/* Word chips (.gh-chips, add .is-row to lay them side by side) and a clock face (.gh-clock svg) */
.gh-chips { display: flex; flex-direction: column; gap: 6px; }
.gh-chips.is-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.gh-chips > span {
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--btn-text);
}
.gh-chips > span.is-accent { background: var(--gh); color: #fff; }
.gh-chips > span.is-strike { color: var(--text-muted); text-decoration: line-through; text-decoration-color: #D63B3B; text-decoration-thickness: 2px; }
.gh-clock { display: block; width: 100px; height: 100px; color: var(--btn-text); }
.gh-help-example .gh-clock { width: 124px; height: 124px; }

/* Setup panels that cap their own width (a narrow column of pickers) get
   .gh-narrow: the panel spans the card so the banner can, and everything
   else in it keeps the old cap (--gh-narrow, default 420px), centred. */
.gh-narrow { box-sizing: border-box; width: 100%; max-width: none !important; }
.gh-narrow > :not(.gh-hero) { max-width: var(--gh-narrow, 420px); margin-left: auto; margin-right: auto; }

/* Level cards */
.gh-section-label {
  align-self: stretch;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.gh-levels {
  --gh: var(--purple);
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
}
.gh-levels .gh-level {
  width: auto;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px 14px;
  white-space: normal;
  text-align: center;
  border: 1.5px solid var(--btn-border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--btn-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.gh-levels .gh-level:hover {
  border-color: var(--gh);
  background: color-mix(in srgb, var(--gh) 5%, var(--surface));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gh) 18%, transparent);
  transform: translateY(-2px);
}
.gh-levels .gh-level:focus-visible { outline: 3px solid color-mix(in srgb, var(--gh) 45%, transparent); outline-offset: 2px; }
.gh-level-preview {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 2px;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--gh) 10%, var(--surface-2));
}
.gh-level-preview[data-dense] { gap: 1px; }
.gh-level-preview span { border-radius: 2px; background: var(--surface); }
.gh-level-preview span.is-on { background: color-mix(in srgb, var(--gh) 55%, var(--surface)); }
.gh-level-size { font-size: 22px; font-weight: 900; line-height: 1; color: color-mix(in srgb, var(--gh) 78%, var(--btn-text)); }
.gh-level-name { font-size: 15px; font-weight: 800; color: var(--btn-text); }
.gh-level-meta { font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--text-muted); }
.gh-level-name + .gh-level-meta { margin-top: 2px; }
.gh-level-meta b { color: var(--btn-text); }
.gh-level-pips { display: flex; gap: 4px; margin-top: 6px; }
.gh-level-pips i { width: 14px; height: 4px; border-radius: 2px; background: var(--btn-border); }
.gh-level-pips i.on { background: var(--gh); }

/* How to play modal */
.gh-help-overlay {
  --gh: var(--purple);
  --gh-ink: color-mix(in srgb, var(--gh) 78%, var(--btn-text));
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20,18,35,.55);
}
.gh-help-overlay[hidden] { display: none !important; }
.gh-help-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 28px;
  border: 1.5px solid var(--btn-border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--btn-text);
  text-align: left;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.gh-help-card h2 { margin: 6px 0 18px; font-size: 22px; text-align: center; }
.gh-help-icon { display: block; width: 38px; height: 38px; margin: auto; color: var(--gh); }
.gh-help-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 25px;
}
.gh-help-close:hover { background: var(--btn-hover); color: var(--btn-text); }
.gh-help-example { display: flex; justify-content: center; margin: 0 auto 12px; }
.gh-help-example .gh-tiles { --tile: 40px; gap: 4px; }
.gh-help-example .gh-tiles > span:not(.is-op):not(.is-ok) { border: 1px solid var(--toolbar-border); }
.gh-help-caption { margin: 0 4px 16px; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; text-align: center; }
.gh-help-caption b { color: var(--btn-text); }
.gh-help-card ul { display: grid; gap: 11px; margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.gh-help-card li b { color: var(--btn-text); }
.gh-help-card li b.ok { color: #16A34A; }
.gh-help-card li b.bad { color: #D63B3B; }