/* ══════════════════════════════════════════════════════════
   padkit.css — the thumb's floor under every control of the arcade.

   Loaded after style.css, so what it says wins without rewriting the
   pads. Nothing here changes what a button sends: only how big it is,
   how far from the edge, how plainly it says it is pressed, and how
   large its label is. test/pad-size.mjs holds every pad to these rules
   at 360x640, 390x844 and 412x915.

   THE RULES (--tap is the floor, --tap-big the main action)
   · every control a thumb can land on is at least --tap in both
     dimensions; the one a thumb lives on (FIRE, JUMP, TAP, NEXT) is
     --tap-big or more, and most are far bigger already
   · a control keeps --edge clear of the viewport's edges: the browser's
     own bars sit under the top and the bottom, a palm along the sides
   · a pressed or held control fills with the room's colour and gets a
     thick inner ring, so it reads through a thumb, on the light theme
     too (brightness alone did not)
   · no label inside a control is set under 11 px
   · the top bar's menu, cog and Cancel are tap targets like the rest

   The second half is the shared screen, read from a sofa: the focus
   ring a controller or the keyboard moves, and the dialogs' buttons at
   TV size.
   ══════════════════════════════════════════════════════════ */
:root{--tap:56px;--tap-big:72px;--edge:.6rem}

/* ── the pad's frame: clear of the edges ── */
#view-controller .pad-stage{padding-top:max(calc(env(safe-area-inset-top) + .6rem),var(--edge));padding-bottom:max(calc(env(safe-area-inset-bottom) + .6rem),var(--edge))}
@media (orientation:landscape) and (max-height:560px){
  #view-controller .pad-stage{padding-top:max(calc(env(safe-area-inset-top) + .6rem),var(--edge));padding-bottom:max(calc(env(safe-area-inset-bottom) + .6rem),var(--edge))}
}
/* a pad drawn turned a quarter (controller.js applyOrient): its short sides are the phone's long sides */
#view-controller.pad-rot #pad-live{padding-top:var(--edge);padding-bottom:var(--edge);padding-left:calc(env(safe-area-inset-top) + var(--edge));padding-right:calc(env(safe-area-inset-bottom) + var(--edge))}

/* ── the top bar: menu, cog, sound, Cancel ── */
/* a fixed height: the title may wrap, the bar never grows, so the pad under it never moves between packets */
#view-controller .pad-top{height:var(--tap);min-height:var(--tap);gap:.5rem;flex-wrap:nowrap}
/* the title gives way before the buttons do: a long name wraps onto a second line, a button never leaves the screen */
#view-controller .pad-title{min-width:0;font-size:.85rem;line-height:1.15;overflow-wrap:anywhere}
#view-controller .pad-you,#view-controller .pad-top .ghost-btn{flex:0 0 auto}
#view-controller .pad-top .ghost-btn{min-width:var(--tap);min-height:var(--tap);padding:0 .5rem;font-size:1.35rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#view-controller .pad-top #btn-pad-cancel{font-size:.9rem;font-weight:700;letter-spacing:.04em;padding:0 .7rem}
#view-controller .pad-top .pad-you{padding:.22rem .45rem}
#view-controller .pad-top #btn-kb-panel{font-size:.9rem}
#view-controller #btn-pad-opts{min-width:var(--tap);min-height:var(--tap);font-size:1.5rem}
/* Crypt's pad carries its own header; the menu floats over it, still a tap target */
#view-controller #pad-live.is-crown #btn-pad-menu{min-width:4.5rem;min-height:var(--tap);padding:0 1rem;font-size:1.2rem;opacity:.9}
/* …at the top right, over the header's empty end, so the cards below keep their room */
#view-controller #pad-live.is-crown .pad-top{left:auto;right:var(--edge);transform:none}
#view-controller #pad-live.is-crown .cr-hero{padding-top:.5rem;padding-right:5.2rem}
#view-controller #pad-live.is-crown .cr-hero[hidden] + .cr-info{padding-top:.5rem;padding-right:5.2rem}

/* ── the floor under every secondary button ── */
#view-controller .pad-stage .ghost-btn,#view-controller .pad-layout button,#view-controller .pad-layout [role=button],
#view-controller .seg button,#view-controller .sheet-card .seg button,#view-controller .sheet-btn,#view-controller .ctl-edit-btn{min-height:var(--tap)}
#view-controller .pad-layout .dp{min-height:var(--tap);min-width:var(--tap)}
/* the ready pad's how-to scrolls inside its box: without a cap the body grew past it and lay over NEXT (seen on
   main of 2026-11-01 with Kings' lines at 360x640) */
#view-controller #lay-ready .ready-view{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
#view-controller #lay-ready .ready-body{min-height:0;max-height:100%}
/* the ready pad's way to its second page */
#view-controller .howto-more{min-height:var(--tap);min-width:var(--tap-big);padding:.4em 1.2em;font-size:.85rem;font-weight:700;letter-spacing:.06em}
/* the rules buttons on the card and tile pads, and Fowl Play's aim switch */
#view-controller .cards-rules-btn,#view-controller .hunt-mode{min-height:var(--tap);min-width:var(--tap-big);font-size:.85rem}
/* Redline and Vertigo: the item and tilt buttons */
#view-controller .drive-acts .ghost-btn,#view-controller .climb-acts .ghost-btn,#view-controller #lay-climb #btn-climb-tilt{min-height:var(--tap);font-size:.8rem}
/* Redline: the brake chip goes under the arrows, so each arrow gets half the width */
#view-controller .steer-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.5rem .6rem}
#view-controller .steer-brake{grid-column:1 / -1;grid-row:2;justify-self:center}
#view-controller .steer-arw{min-width:var(--tap)}
/* Snake: the cross's arms are each a thumb target; DASH gives up a little of its width */
#view-controller #lay-dpad .dpad{gap:.35rem}
#view-controller #lay-dpad .gp-dir{flex:1 1 60%}
#view-controller #lay-dpad .gp-act .action-btn.round{max-width:132px}
/* Block Battles: the soft drop and the two small actions */
#view-controller .tet-dir .tet-soft,#view-controller .tet-act-row .action-btn.small{height:var(--tap)}
/* Riposte: DUCK and the row buttons */
#view-controller .fen-duck{min-height:var(--tap)}
#view-controller .fen-b,#view-controller .fen-row{min-height:var(--tap)}
/* Mothlight: GLOW and DASH */
#view-controller .mth-act{grid-template-rows:var(--tap) min(100px,26vh)}
/* Cinder Vault: QUENCH, RITE, KEG, ROLL, KIT */
#view-controller .cin-act{grid-template-rows:var(--tap) var(--tap) minmax(0,1fr)}
#view-controller .cin-b{font-size:.8rem}
/* Gridfire: the five on the right and the two on the left, upright or on its side */
#view-controller .sht-reload,#view-controller .sht-knife,#view-controller .sht-ads,#view-controller .sht-duck{height:var(--tap);font-size:.9rem}
#view-controller .sht-jump,#view-controller .sht-light{height:var(--tap);min-height:var(--tap)}
#view-controller .sht-btns{grid-template-columns:1fr 1fr 1.4fr}
#view-controller .sht-fire{max-width:140px}
/* Gridfire's own controls sheet: tabs and steppers */
#view-controller .gfo-tab,#view-controller .gfo-step,#view-controller .gfo-sw{min-height:var(--tap)}
#view-controller .gfo-page{grid-auto-rows:minmax(var(--tap),auto)}
/* Lagoon Lobbers: the bag over the aim square */
#view-controller .lob-bag{grid-auto-rows:minmax(var(--tap),auto)}
#view-controller .lob-bag button b{font-size:.7rem}
/* Doodle Light: pen, eraser, the three sizes, undo, clear, the word tiles */
#view-controller .dd-tool,#view-controller .dd-sizes button,#view-controller .dd-word,#view-controller .dd-tile,#view-controller .dd-slot{min-height:var(--tap)}
#view-controller .dd-sizes button{min-width:var(--tap)}
/* Pesten: the suit to call */
#view-controller .suit-row button{min-width:var(--tap);min-height:var(--tap);font-size:1.8rem}
/* the camera pad's choices, Mic Drop's difficulty, the room sheet's segments */
#view-controller .seg button{font-size:.85rem}
#view-controller .seg.wide button{font-size:.9rem}
/* the shake pad's "enable motion" */
#view-controller #btn-motion{min-height:var(--tap)}
/* Short Fuse's manual: the page tabs */
#view-controller .fz-tab{min-height:var(--tap)}
/* Beacon: READY, END TURN, PLAY, the piles, the potions, every choice */
#view-controller #lay-beacon .bc-btn,#view-controller #lay-beacon .bc-pile,#view-controller #lay-beacon .bc-pot,#view-controller #lay-beacon .bc-mini{min-height:var(--tap)}
#view-controller #lay-beacon .bc-ready,#view-controller #lay-beacon .bc-end,#view-controller #lay-beacon .bc-play{min-height:var(--tap-big);font-size:1.05rem}
#view-controller #lay-beacon .bc-act{min-height:var(--tap)}
#view-controller #lay-beacon .bc-pile,#view-controller #lay-beacon .bc-pot{font-size:.7rem}
#view-controller .bc-alines,#view-controller .bc-votes em,#view-controller .bc-asub{font-size:.72rem}
#view-controller .bc-cname,#view-controller .bc-ctype,#view-controller .bc-tag,#view-controller .bc-need{font-size:.7rem}
/* Crypt: the choice cards' small print, the Character button and the panel's tabs */
#view-controller .cr-act small,#view-controller .cr-odds,#view-controller .cr-tags,#view-controller .cr-tag{font-size:.7rem}
#view-controller #lay-crown .cr-charbtn,#view-controller #lay-crown .cr-tab{min-height:var(--tap);font-size:.7rem}
#view-controller .fp-mid small{font-size:.7rem}
#view-controller #lay-crown .cr-act.hero{--ht:max(11px,calc(var(--sq) * .066))}
#view-controller #pad-live.is-crown .pad-top{top:max(calc(env(safe-area-inset-top) + .2rem),var(--edge));min-height:0}
/* Crater Clash: the hand of weapons, their names readable */
#view-controller .tnk-arms{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
#view-controller .tnk-arms button{min-height:var(--tap)}
#view-controller .tnk-arms button b,#view-controller .tnk-arms button small{font-size:.7rem}
/* Scrap Rumble: the garage's part arrows */
#view-controller .sc-arrow{flex:0 0 var(--tap);min-height:var(--tap);font-size:1.3rem}
#view-controller .sc-garage{scrollbar-width:none}
#view-controller .sc-garage::-webkit-scrollbar{display:none}
/* Kings, Roll Call, Ship Attack, the card pack: every button they build */
#view-controller #lay-kings button,#view-controller #lay-dice button,#view-controller #lay-ships button,#view-controller #lay-cardpad button{min-height:var(--tap)}
/* a disabled control looks it, but keeps its size: it is a target again in a moment */
#view-controller .pad-layout button[disabled]{opacity:.4}

/* ── pressed and held: a fill and a thick inner ring, not a brightness nudge ── */
#view-controller .action-btn:active,#view-controller .action-btn.hot,#view-controller .action-btn.down,
#view-controller .dp:active,#view-controller .dp.hot,
#view-controller .steer-arw:active,#view-controller .steer-arw.hot,
#view-controller .hunt-btn:active,#view-controller .hunt-btn.down,
#view-controller .dh-btn.hot,#view-controller .bb-btn.hot,#view-controller .fz-arrow:active,#view-controller .fz-arrow.hot,#view-controller .fz-act:active,#view-controller .fz-act.hot,
#view-controller .vote-opt:active,#view-controller .vote-opt.hot,#view-controller .buzzer:active,#view-controller .buzzer.hot,
#view-controller .hold-btn.down,#view-controller .shake-pad:active,#view-controller .shake-pad.hot,
#view-controller .pad-stage .ghost-btn:active,#view-controller .sheet-btn:active,#view-controller .seg button:active,
#view-controller .bc-btn:active,#view-controller .bc-act:active,#view-controller .cr-act:active,#view-controller .cr-act.hold{
  filter:none;transform:scale(.97);
  background:color-mix(in srgb,var(--knob,var(--brand)) 42%,transparent);
  box-shadow:inset 0 0 0 4px var(--knob,var(--brand));color:var(--ink);
}
#view-controller .dp:active,#view-controller .dp.hot{transform:scale(.95)}
/* a switch that is on (TILT: ON, AIM, DUCK, LIGHT, a picked segment) keeps its own colours */
#view-controller .seg button.on:active{box-shadow:none;background:linear-gradient(96deg,var(--brand),var(--brand-2));color:#0b0a0d}
@media (prefers-reduced-motion:reduce){#view-controller .action-btn:active,#view-controller .dp:active{transform:none}}

/* ══════════ the shared screen, from the sofa ══════════ */
/* the briefing's body scrolls inside its card: without a cap it grew past it and lay over the seats and the
   Start and Cancel buttons (seen on main of 2026-11-01, the same as the ready pad above) */
.gate-view{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.gate-view > .gate-body{min-height:0;max-height:100%}
/* the focus ring a controller or the keyboard moves: thicker, and a fill the eye finds first */
html[data-input="pad"] .nav-focus,html[data-input="keys"] .nav-focus{outline-width:4px !important;outline-offset:4px;box-shadow:0 0 0 10px rgba(245,158,11,.32)}
[data-theme="light"][data-input] .nav-focus{box-shadow:0 0 0 10px rgba(180,83,9,.24)}
html[data-input="pad"] .game-card.nav-focus,html[data-input="keys"] .game-card.nav-focus{outline-offset:2px}
/* at TV size every button of a dialog is a size up: the briefing's Start and Cancel, a game's start menu and
   result, the room menu's buttons, the landing page's ways in and the join flow */
@media (min-width:1600px) and (min-height:860px){
  /* a game's start menu and its result: the whole dialog a size up, as it is read from across the room (the
     briefing keeps its size: it is held to fitting with twelve seats of every kind; its buttons grow below) */
  .stage-overlay > .ov-inner{zoom:1.12}
  .gate-actions .prime-btn,.gate-actions .ghost-btn.wide{min-height:3.6rem;padding:.9rem 2rem;font-size:1.15rem}
  .ov-actions > button,.ov-actions .prime-btn,.ov-actions .ghost-btn{min-height:3.4rem;font-size:1.1rem}
  .gm-opt,.gm-modal .prime-btn,.gm-modal .ghost-btn{min-height:3.4rem;font-size:1.05rem}
  .sheet-btn{min-height:3.4rem;font-size:1.1rem}
  .seg.wide button,.room-sheet .seg button{min-height:3rem;font-size:.95rem}
  .room-row,.rooms-foot .ghost-btn,#btn-open-random,.join-card .prime-btn,.join-card .ghost-btn,#view-landing .landing-top .ghost-btn{min-height:3.4rem;font-size:1.05rem}
  .stage-menu{width:52px;height:52px;font-size:1.4rem}
}