/* color-guesser · fullscreen — paired with fullscreen-fit.js (--fs-hero-h / --fs-hero-w, html.fs-wide).
   Everything is scoped under html.pip-immersive: normal play is untouched. */
html.pip-immersive .game-wrap.pip-stage {
  display: flex; flex-direction: column; align-items: center;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
html.pip-immersive .game-wrap.pip-stage > * { width: min(100%, 560px); flex: none; }
html.pip-immersive .game-wrap.pip-stage > #card-grid {
  width: 100%; max-width: 760px; height: var(--fs-hero-h, 320px); margin: 0; container-type: size; box-sizing: border-box;
}
/* Landscape: hero on the left at full height, the rest in a right-hand column. */
html.pip-immersive.fs-wide .game-wrap.pip-stage {
  display: grid; grid-template-columns: var(--fs-hero-w, 55%) minmax(0, 440px); column-gap: 24px;
  grid-auto-rows: min-content; align-content: start; justify-content: center; align-items: start; overflow-y: auto;
}
html.pip-immersive.fs-wide .game-wrap.pip-stage > * { width: auto; grid-column: 2; min-width: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > #card-grid { grid-column: 1; grid-row: 1 / span 14; max-width: none; height: var(--fs-hero-h, 320px); position: sticky; top: 0; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > .pip-dock { grid-column: 1 / -1; }
html.pip-immersive #card-grid { display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
html.pip-immersive #card-grid .quiz-card { width: min(100%, 640px); max-height: 100%; padding: clamp(.6rem, 2cqh, 1.4rem) 1rem; }
html.pip-immersive .swatch-row { gap: clamp(.5rem, 2.4cqw, 1.1rem); }
html.pip-immersive .swatch-row.n3 .swatch { width: max(60px, min(28cqw, calc(100cqh - 290px))); height: max(60px, min(28cqw, calc(100cqh - 290px))); }
html.pip-immersive .swatch-row.n4 .swatch { width: max(56px, min(21cqw, calc(100cqh - 290px))); height: max(56px, min(21cqw, calc(100cqh - 290px))); }
html.pip-immersive .swatch-row.n5 .swatch, html.pip-immersive .swatch-row.n6 .swatch { width: max(60px, min(26cqw, calc((100cqh - 290px) / 1.7))); height: max(48px, min(21cqw, calc((100cqh - 290px) / 2.1))); }
html.pip-immersive .swatch-row.n5, html.pip-immersive .swatch-row.n6 { max-width: 100%; }
html.pip-immersive .target-swatch { width: max(110px, min(46cqw, 190px)); height: max(70px, min(22cqh, 120px)); }
html.pip-immersive .hex-row { margin-top: .6rem; }
html.pip-immersive .hex-code { font-size: clamp(1.5rem, 8cqh, 2.6rem); }
html.pip-immersive .how { font-size: .8rem; }
html.pip-immersive .game-wrap.pip-stage > .cg-mixer-entry { margin-top: .4rem; }

/* Description under the game (normal page only). */
.cg-guide { max-width: 560px; margin: 1.5rem auto; padding: 0 1rem; color: #1e293b; line-height: 1.55; font-size: .98rem; }
.cg-guide h2 { font-size: 1.15rem; margin: 1.1rem 0 .4rem; color: #6d28d9; }
.cg-guide p, .cg-guide ul { margin: 0 0 .7rem; }
.cg-guide ul { padding-left: 1.2rem; }
.cg-guide li { margin-bottom: .45rem; }
html.pip-immersive.fs-wide .game-wrap.pip-stage > .how, html.pip-immersive.fs-wide .game-wrap.pip-stage > .cg-mixer-entry { display: none; }