/* partygame.plus/tv, the TV menu (plan docs/plans/active/2026-10-24-tv-menu.md). The screen's SHAPE picks the layout,
   as home does: a stacked screen (STACK in games.mjs) gets the phone panel, everything else the menu inside ONE safe
   frame, 5% in from every edge (a TV crops an HDMI picture; a laptop plugged into a TV is the likeliest case). Sized on
   the TV unit --u (10px on a 1080 TV, 5px on a 960x540 TV browser), like home. The ring is on .tile:focus whatever
   moved it: on a TV the remote IS a pointer (SCREEN-CONTRACT deck tv, the named exception to "off at the first
   pointer use"); a focused tile's lift and ring fit inside the grid's own padding, so it never leaves the frame. */
/* the TV unit and the 10-foot ring are home's (night.css :root; page-check's ring judges both by one rule), its glow
   tighter; the neon is the party brand's (Kyle's pick A, soon.mjs COLOURS) */
:root{--u:min(calc(100vw / 192),calc(100vh / 108));--party-pink:#e8457c;--party-teal:#2fb3a6;
  --gap:calc(.5 * var(--u));--ring:max(calc(.6 * var(--u)),.4vh,3px);--lift:calc(-1.3 * var(--u));
  --focus:0 0 0 var(--gap) var(--night),0 0 0 calc(var(--gap) + var(--ring)) var(--paper),0 0 calc(2 * var(--u)) calc(.5 * var(--u)) color-mix(in srgb,var(--g1) 55%,transparent)}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);color:var(--paper);font-family:var(--body)}
.tvm{position:relative;z-index:1;box-sizing:border-box;height:100%;padding:calc(5.4 * var(--u)) calc(9.6 * var(--u));display:grid;grid-template-rows:auto 1fr auto;gap:calc(1.6 * var(--u))}

/* the top row: the wordmark, and the corner label once a TV is recognised */
.tvm-top{display:flex;align-items:center;justify-content:space-between;gap:calc(2 * var(--u))}
.tvm-top .brand img{display:block;height:calc(5.6 * var(--u));width:auto}
.screen-label{margin:0;padding:calc(.8 * var(--u)) calc(1.4 * var(--u));border-radius:calc(.8 * var(--u));font:600 calc(2.4 * var(--u))/1 var(--body);color:var(--paper);
  background:color-mix(in srgb,var(--tint) 80%,transparent)}   /* (on a chip: the room's art is bright behind the corner, and no check sees it off a TV) */

/* the menu: Game night large on the left, the games stacked on the right (tv.js walks the same map) */
.tvm-grid{min-height:0;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:calc(2.4 * var(--u));padding:calc(4 * var(--u))}   /* (room for a focused tile's lift and ring inside the frame) */
.tile{box-sizing:border-box;min-height:0;display:flex;align-items:center;gap:calc(2.4 * var(--u));padding:calc(1.6 * var(--u));border-radius:calc(1.6 * var(--u));
  background:var(--night-2);border:max(calc(.2 * var(--u)),1px) solid var(--hair);color:var(--paper);text-decoration:none;outline:none;
  transition:transform .25s var(--glide),box-shadow .25s var(--glide)}
.tile:focus{transform:translateY(var(--lift));box-shadow:var(--focus);border-color:transparent}
html.still .tile{transition:none}
.tile > img{flex:none;height:100%;width:auto;aspect-ratio:16/9;border-radius:calc(.8 * var(--u));object-fit:cover;background:var(--night)}
.words{min-width:0;display:grid;gap:calc(.6 * var(--u))}
.words b{font:800 calc(3.6 * var(--u))/1.05 var(--display);font-stretch:96%}
.words span{font:500 calc(2.4 * var(--u))/1.3 var(--body);color:var(--muted)}

/* Game night: the three party cards fanned, its name the largest on the page */
.tile.night{grid-row:1 / -1;flex-direction:column;justify-content:center;align-items:stretch;gap:calc(3 * var(--u));padding:calc(3 * var(--u));
  background:linear-gradient(150deg,color-mix(in srgb,var(--party-pink) 34%,var(--night-2)),color-mix(in srgb,var(--party-teal) 26%,var(--night-2)))}
.fan{position:relative;height:calc(26 * var(--u))}
.fan img{position:absolute;left:50%;top:50%;width:calc(30 * var(--u));height:auto;border-radius:calc(.8 * var(--u));box-shadow:0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.5)}
.fan img:nth-child(1){transform:translate(-104%,-46%) rotate(-9deg)}
.fan img:nth-child(2){transform:translate(-50%,-56%);z-index:1}
.fan img:nth-child(3){transform:translate(4%,-46%) rotate(9deg)}
.night .words{text-align:center}
.night .words b{font-size:calc(6 * var(--u))}
.night .words span{font-size:calc(2.8 * var(--u))}

.hint{margin:0;text-align:center;font:600 calc(2.4 * var(--u))/1 var(--body);color:var(--muted)}

/* the phone panel: a phone (or any stacked screen) cannot be the TV */
.phone{display:none}
@media (max-aspect-ratio: 5/4), (max-height: 500px), (max-width: 760px){
  html,body{overflow:auto}
  .tvm{height:auto;min-height:100%;padding:24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));display:flex;align-items:center;justify-content:center}
  .tvm-top,.tvm-grid,.hint{display:none}
  .phone{display:grid;justify-items:center;gap:16px;max-width:26rem;text-align:center}
  .phone img{width:min(15rem,70vw);height:auto}
  .phone h1{margin:8px 0 0;font:800 1.75rem/1.15 var(--display);font-stretch:96%}
  .phone p{margin:0;font:500 1.0625rem/1.4 var(--body);color:var(--muted)}
}