/* Phone controller page (pad.html). Portrait. */
:root{--pc:#3fae3a;--link-bad:#e0413a}
html,body{height:100%;margin:0}
body{background:
  radial-gradient(circle at 15% 10%,#ffd1ea 0 8%,transparent 8.5%),
  radial-gradient(circle at 85% 25%,#c7e8fb 0 6%,transparent 6.5%),
  radial-gradient(circle at 70% 90%,#fff3c4 0 10%,transparent 10.5%),
  linear-gradient(180deg,#ffb3d9,#c9a6ff);
  color:var(--navy);font-family:"Baloo 2","Kenney Future",system-ui,sans-serif;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
.view{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));box-sizing:border-box;text-align:center}
.view[hidden]{display:none}
.logo{margin:0;font-size:clamp(2.2rem,11vw,3.4rem);line-height:.95;color:#fff;
  -webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 5px 0 var(--navy);transform:rotate(-3deg)}
.lead{margin:0;font-size:1.2rem;font-weight:700}
#join-form{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:380px}
.code-boxes{display:flex;gap:10px}
.code-boxes input{width:64px;height:80px;box-sizing:border-box;text-align:center;font-family:inherit;font-weight:800;font-size:2.6rem;line-height:1;text-transform:uppercase;
  color:var(--navy);background:var(--cream);border:4px solid var(--navy);border-radius:16px;box-shadow:0 5px 0 var(--navy);caret-color:transparent}
.code-boxes input:focus{outline:none;background:#fff;border-color:var(--orange)}
.name-row{display:flex;align-items:center;gap:8px;font-weight:700}
.name-row input{font:inherit;width:9em;padding:6px 10px;border:3px solid var(--navy);border-radius:12px;background:#fff}
.big-btn{appearance:none;font-family:inherit;font-weight:800;font-size:1.5rem;line-height:1;color:var(--navy);background:var(--sun);border:4px solid var(--navy);
  border-radius:999px;padding:16px 40px;min-height:64px;box-shadow:0 6px 0 var(--navy);cursor:pointer}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--navy)}
.big-btn:disabled{opacity:.5}
.big-btn.ghost{background:var(--cream);font-size:1.1rem;padding:10px 24px;min-height:48px}
.demo-link{color:var(--navy);font-weight:700}
.spinner{font-size:4rem;animation:pad-spin 1.2s linear infinite}
#status.stopped .spinner{animation:none}
@keyframes pad-spin{to{transform:rotate(360deg)}}
#status h2{margin:0;font-size:2rem}

.seat-card{width:min(80vw,340px);aspect-ratio:3/4;border-radius:28px;background:var(--pc);border:6px solid var(--navy);
  box-shadow:0 10px 0 var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  -webkit-text-stroke:1.5px var(--navy);paint-order:stroke fill;font-weight:800;font-size:1.6rem;animation:pad-pop .5s cubic-bezier(.3,1.6,.6,1);cursor:pointer}
.seat-card p{margin:0}
.seat-card h2{margin:.2em 0;font-size:3.2rem;line-height:1}
.seat-card .small{font-size:1rem}
@keyframes pad-pop{from{transform:scale(.4) rotate(-10deg)}}

#play{justify-content:flex-start;gap:10px;padding-top:max(10px,env(safe-area-inset-top))}
.bar{width:100%;display:flex;align-items:center;gap:8px;padding:6px 10px;box-sizing:border-box;border-radius:16px;
  background:var(--cream);border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy);font-weight:800}
.ptag{background:var(--pc);color:#fff;-webkit-text-stroke:1px var(--navy);paint-order:stroke fill;border:3px solid var(--navy);border-radius:999px;padding:0 .6em}
.mname{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lamp{width:18px;height:18px;border-radius:50%;background:#8a8fa0;border:3px solid var(--navy)}
.lamp.on{background:var(--pc);box-shadow:0 0 10px var(--pc)}
.lamp.blink{background:var(--pc);animation:pad-blink .5s steps(1) infinite}
@keyframes pad-blink{50%{background:#8a8fa0}}
.ping{font-size:.8rem;min-width:3.6em;text-align:right;opacity:.75}
.gear{appearance:none;border:0;background:none;font-size:1.7rem;line-height:1;padding:4px 6px;min-width:44px;min-height:44px;color:var(--navy);cursor:pointer}
.panel-wrap{flex:1;width:100%;min-height:0}
.fs-prompt{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;white-space:nowrap;
  font-family:inherit;font-weight:800;font-size:1rem;line-height:1;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:10px 20px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.fs-prompt[hidden]{display:none}

.sheet-back{position:fixed;inset:0;z-index:30;background:rgba(16,26,61,.5);display:flex;align-items:flex-end}
.sheet-back[hidden]{display:none}
.sheet{width:100%;box-sizing:border-box;background:var(--cream);border-top:5px solid var(--navy);border-radius:24px 24px 0 0;
  padding:16px 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;animation:pad-up .25s ease-out}
@keyframes pad-up{from{transform:translateY(100%)}}
.sheet h3{margin:0 0 4px;font-size:1.5rem;text-align:center}
.opt{appearance:none;display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;
  font-family:inherit;font-weight:700;font-size:1.15rem;line-height:1;color:var(--navy);background:#fff;border:3px solid var(--navy);border-radius:14px;text-align:left;cursor:pointer}
.opt:disabled{opacity:.5;cursor:default}
.opt em{font-weight:400;font-size:.85em}
.opt input{width:28px;height:28px;accent-color:var(--grass)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* "Host a game" on the code screen */
.lead.small{font-size:1rem;margin-top:4px}
.big-btn.host{background:var(--grass);font-size:1.15rem;padding:12px 24px;min-height:52px}
.opt input:disabled{opacity:.6}

/* mini factory view (16:9), above the panel */
.mini{width:min(100%,calc(34vh * 16 / 9));aspect-ratio:16/9;flex:0 0 auto;box-sizing:border-box;border-radius:14px;overflow:hidden;
  border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy);background:var(--navy)}
.mini[hidden]{display:none}
.mini canvas{display:block;width:100%;height:100%}

/* connection light + reconnect banner (pad.js) */
.net-light{width:14px;height:14px;flex:0 0 auto;border-radius:50%;border:3px solid var(--navy);background:#8a8fa0}
.net-light.green{background:var(--grass)}
.net-light.yellow{background:var(--sun)}
.net-light.red{background:var(--link-bad);animation:pad-blink .8s steps(1) infinite}
.net-banner{width:100%;box-sizing:border-box;text-align:center;font-weight:800;color:#fff;background:var(--link-bad);border:3px solid var(--navy);border-radius:12px;padding:4px 8px}
.net-banner[hidden],.net-debug[hidden]{display:none}
.net-debug{font:600 .75rem/1.2 ui-monospace,monospace;opacity:.8}

/* "I'm ready" on the lobby and score screens */
.ready-btn{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;
  font:inherit;font-weight:900;font-size:1.3rem;padding:.7em 1.4em;border-radius:999px;border:4px solid var(--navy,#101a3d);
  background:var(--sun,#f0c95c);color:var(--navy,#101a3d);box-shadow:0 6px 0 rgba(16,26,61,.35);touch-action:manipulation;white-space:nowrap}
.ready-btn.on{background:var(--grass,#a9d94b)}
.ready-btn:active{transform:translate(-50%,4px);box-shadow:0 2px 0 rgba(16,26,61,.35)}

/* multitask: two control panels stacked, each with its own input */
body.dual .panel-wrap{flex:1 1 0;min-height:0}
body.dual #panel{border-bottom:3px dashed rgba(16,26,61,.35)}
.panel-wrap.second{flex:1 1 0;width:100%;min-height:0}
body.dual .mini{display:none}