/* The room: the home page's own look on every other page (plan docs/plans/active/2026-10-16-home-style-everywhere.md;
   Kyle 2026-10-16: "Homes own style on every page"). Loaded after account.css and before the page's own styles.
   - <html data-room> is the game whose art lights the page: the scene, its shade and the edge glow read --rm-tint and
     --rm-g1. <html data-look> is the game whose colours the words and buttons wear (--g1 --g2 --tint --on --hi). The two
     are the same game on every page but the pass page, whose room re-lights through the lineup (room.js) while its
     words keep one look. tools/test-room.mjs holds these colours to games.mjs.
   - One scale: the root font size grows with the width (1.1vw: 16px on a 1440 laptop, 21px on a 1080 TV, never under
     16px; Kyle 2026-10-16 "text feels big" took it down from home's 1.25vw), so every rem on the page grows with it.
   - Phones and portrait tablets (STACK in games.mjs, repeated below): the art is a band at the top of the page, as on home. */

@property --rm-tint{syntax:"<color>";inherits:true;initial-value:#25170a}
@property --rm-g1{syntax:"<color>";inherits:true;initial-value:#e9b04a}

/* ---------- the six rooms (games.mjs colours) ---------- */
html[data-room="kingfu"]{--rm-g1:#ffd23f;--rm-tint:#220705}
html[data-room="dogfight"]{--rm-g1:#f2c230;--rm-tint:#0d2031}
html[data-room="queen"]{--rm-g1:#e9b04a;--rm-tint:#25170a}
html[data-room="berlin"]{--rm-g1:#cc0000;--rm-tint:#141010}
html[data-room="cruz"]{--rm-g1:#a51c30;--rm-tint:#161d36}
html[data-room="arrow"]{--rm-g1:#2d6a39;--rm-tint:#0b170e}
html[data-look="kingfu"]{--g1:#ffd23f;--g2:#d7261e;--tint:#220705;--on:#111111;--hi:#ffd23f}
html[data-look="dogfight"]{--g1:#f2c230;--g2:#4fa6d8;--tint:#0d2031;--on:#16110d;--hi:#f2c230}
html[data-look="queen"]{--g1:#e9b04a;--g2:#9b2c55;--tint:#25170a;--on:#16110d;--hi:#e9b04a}
html[data-look="berlin"]{--g1:#cc0000;--g2:#e3cfa3;--tint:#141010;--on:#ffffff;--hi:#e3cfa3}
html[data-look="cruz"]{--g1:#a51c30;--g2:#f2876a;--tint:#161d36;--on:#fbf3e6;--hi:#f2876a}
html[data-look="arrow"]{--g1:#2d6a39;--g2:#e6b440;--tint:#0b170e;--on:#f4ece1;--hi:#e6b440}
html[data-room]{--accent:var(--hi);--room:var(--tint);--night:var(--tint);--night-2:color-mix(in srgb,var(--tint) 82%,#000);
  /* a panel: the game's room, deep enough that muted words read over the brightest art behind it */
  --panel:color-mix(in srgb,var(--tint) 93%,transparent);--panel-line:color-mix(in srgb,var(--g1) 34%,transparent);
  /* the sides clear a sideways phone's camera (safe-area insets; Kyle 2026-10-23: the camera blocked sign-in) */
  --pad:max(16px,5vw,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--col:calc(100vw - 2 * var(--pad));
  font-size:max(16px,1.1vw);background:var(--tint);transition:--rm-tint .9s ease,--rm-g1 .9s ease}
html[data-room] body{background:transparent}

/* ---------- the scene: the game's art, edge to edge, drifting as on home ---------- */
.rm-scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--rm-tint);pointer-events:none}
.rm-art{position:absolute;inset:-2%;animation:rm-drift 32s ease-in-out infinite alternate;will-change:transform}
.rm-art img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:opacity .9s ease}
.rm-art img.rm-off{opacity:0}
/* framing (art pass 2026-10-18): every hero is 16:9 with its subject top-right; a page whose window is not 16:9 keeps
   the subject in view */
.rm-art img{object-position:84% 30%}
@keyframes rm-drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
html.still .rm-art{animation:none}
.rm-shade{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(90deg,color-mix(in srgb,var(--rm-tint) 90%,transparent) 0%,color-mix(in srgb,var(--rm-tint) 62%,transparent) 42%,color-mix(in srgb,var(--rm-tint) 38%,transparent) 72%,color-mix(in srgb,var(--rm-tint) 55%,transparent) 100%),
  linear-gradient(0deg,color-mix(in srgb,var(--rm-tint) 96%,transparent) 0%,color-mix(in srgb,var(--rm-tint) 70%,transparent) 14%,transparent 38%),
  linear-gradient(180deg,color-mix(in srgb,var(--rm-tint) 86%,transparent) 0%,color-mix(in srgb,var(--rm-tint) 40%,transparent) 16%,transparent 30%)}
/* bias light: the screen's edges glow in the game's colour, as on home */
.rm-glow{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background:
  linear-gradient(90deg,var(--rm-g1),transparent 7%,transparent 93%,var(--rm-g1)),linear-gradient(0deg,var(--rm-g1),transparent 9%,transparent 91%,var(--rm-g1))}

/* ---------- the header and footer sit over the art, as on home ---------- */
html[data-room] .top{position:relative;z-index:5;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-room] header.top::after{content:none}
html[data-room] .vin{max-width:none;width:var(--col);min-height:0;padding:1.1rem 0 .4rem}
html[data-room] .brand img{width:auto;height:max(40px,3.4rem)}
html[data-room] .back{font:600 1rem/1 var(--body);color:var(--paper);padding:.7rem .4rem}
/* the footer: room above it and a dark bar the width of the window (Kyle 2026-10-16: "a little space and maybe a black
   or faded bar") */
html[data-room] .legal{width:100%;margin:1.5rem 0 0;padding:1.1rem var(--pad) 1.3rem;justify-content:center;font-size:max(14px,.86rem);color:color-mix(in srgb,var(--paper) 88%,transparent);
  border-top:1px solid color-mix(in srgb,var(--paper) 10%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#000 42%,transparent),color-mix(in srgb,#000 64%,transparent))}

/* ---------- a panel: the one container on these pages ---------- */
.rm-panel{position:relative;background:var(--panel);border:1px solid var(--panel-line);border-radius:.6rem;padding:1.6rem 1.8rem;
  box-shadow:0 1.4rem 2.6rem -1.6rem rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the eyebrow: home's "Tonight's feature" line, a bar in the game's colour before the words */
.rm-eye{display:flex;align-items:center;gap:.7rem;font:600 1rem/1.2 var(--body);color:var(--paper)}
.rm-eye::before{content:"";flex:none;width:2.2rem;height:.36rem;border-radius:.12rem;background:var(--g1)}

/* ---------- the lineup: every game, one tap to play (home's cards, smaller) ---------- */
.rm-lineup{position:relative;z-index:1;width:var(--col);margin:0 auto;padding-block:1rem .4rem;display:grid;gap:.9rem}
.rm-lineup h2{font:800 1.4rem/1.1 var(--display);font-stretch:96%;color:var(--paper)}
.rm-lineup ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem;margin:0;padding:0;list-style:none}
.rm-lineup a{display:grid;gap:.55rem;text-decoration:none;color:var(--paper);font:700 1rem/1.2 var(--display);font-stretch:104%}
.rm-lineup img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.45rem;border:2px solid rgba(244,236,225,.24);
  box-shadow:0 .8rem 1.6rem -.8rem rgba(0,0,0,.8);transition:transform .45s var(--spring),border-color .3s}
.rm-lineup a:hover img{transform:translateY(-.3rem);border-color:var(--paper)}
.rm-lineup a:focus-visible{outline:none;box-shadow:none}
.rm-lineup a:focus-visible img{border-color:var(--paper);box-shadow:0 0 0 3px var(--night),0 0 0 6px var(--paper)}

/* ---------- stacked: phones, portrait tablets, short landscape (STACK in games.mjs) ---------- */
@media (max-aspect-ratio: 5/4), (max-height: 500px), (max-width: 760px){
  html[data-room]{--pad:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--band:min(125vw,60svh)}
  .rm-scene,.rm-shade{position:absolute;height:var(--band)}
  /* the glow lights the band's sides and top, fading out before the band ends (no hard line across the page) */
  .rm-glow{position:absolute;height:var(--band);background:linear-gradient(90deg,var(--rm-g1),transparent 7%,transparent 93%,var(--rm-g1)),linear-gradient(180deg,var(--rm-g1),transparent 9%);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .rm-shade{background:linear-gradient(0deg,var(--rm-tint) 0%,color-mix(in srgb,var(--rm-tint) 92%,transparent) 30%,color-mix(in srgb,var(--rm-tint) 82%,transparent) 62%,color-mix(in srgb,var(--rm-tint) 86%,transparent) 100%)}
  html[data-room] .brand img{height:auto;width:186px}
  .rm-panel{padding:1.1rem 1rem;-webkit-backdrop-filter:none;backdrop-filter:none;--panel:color-mix(in srgb,var(--tint) 92%,transparent)}
  .rm-lineup ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .8rem}
}
@media (prefers-reduced-motion:reduce){.rm-art{animation:none}.rm-lineup img{transition:none}}