/* Snappy v0.20.1 — disciplined layout layer over stable v0.19.0.
   All widths border-box, app stays <=550px, no forced side-by-side mobile grids. */
:root{--app-width:550px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--ui-line:rgba(176,228,204,.22);--ui-surface:#142b25;--ui-surface-alt:#193b31}
html{overflow-x:hidden;scroll-padding-top:80px}
body{font-size:16px;overflow-wrap:break-word;min-width:0}
body,main,header,footer,section,article,nav,aside,form,div{min-width:0}
.top,.shell,.footer{width:min(100%,550px);max-width:550px}
.top{padding:16px 16px 12px;display:block;min-height:0}
.top .brand{display:inline-flex;align-items:center;gap:8px;font-size:1.35rem;line-height:1.2}
.top .brand:before{content:'✦';width:30px;height:30px;background:#285a48;border:1px solid #408a71;color:#b0e4cc;display:inline-grid;place-items:center;font-size:1rem}
.top nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;align-items:stretch;width:100%}
.top nav a,.top nav .inline,.top nav .inline button{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;width:100%;padding:10px 6px;min-height:44px;border:1px solid var(--ui-line);background:rgba(176,228,204,.04);font-size:clamp(.7rem,2.6vw,.82rem);line-height:1.25;white-space:normal;overflow-wrap:anywhere;text-decoration:none}
.top nav .inline{padding:0;margin:0}.top nav .inline button{border:0!important;background:transparent!important;color:var(--text)!important;min-height:44px!important;padding:10px 5px!important;max-width:100%}
.top nav a:hover,.top nav .inline:hover{background:#285a48;border-color:#b0e4cc}
#preferences-toggle{display:block;width:100%;margin:12px 0 0;padding:8px 12px;min-height:42px;font-size:.82rem}
#preferences-panel{width:min(100%,550px);display:grid;grid-template-columns:1fr;gap:8px;padding:12px 16px}
#preferences-panel[hidden]{display:none}
#preferences-panel label{display:flex;align-items:center;gap:8px;line-height:1.4;margin:0;min-width:0}
#preferences-panel input[type=checkbox]{width:20px;min-height:20px;margin:0;flex:none}
.shell{padding:24px 16px 52px}.footer{padding:20px 16px;display:flex;flex-wrap:wrap;align-items:center}
.hero,.hero-home{padding:36px 0 24px}.hero-home h1{max-width:14ch;line-height:1.08;overflow-wrap:normal}
.eyebrow{letter-spacing:.13em;font-size:.74rem}.section-block{padding-block:28px}.section-block h2{font-size:clamp(1.35rem,5.5vw,1.8rem)}
.panel,.cards article,.cards .panel,.closing-cta{padding:20px;margin-inline:0;width:100%;min-width:0;max-width:100%;border:1px solid var(--ui-line);background:var(--ui-surface);box-shadow:none}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 24px}
.cards article,.cards section{min-width:0}.cards .panel{padding:20px}
.panel+.panel{margin-top:12px}.panel h1,.panel h2,.panel h3{overflow-wrap:anywhere}
.button,button:not(.link){min-width:0;max-width:100%;min-height:48px;line-height:1.3;white-space:normal;text-align:center;overflow-wrap:anywhere;padding:11px 14px}
form:not(.inline)>.button,form:not(.inline)>button:only-of-type{width:100%}
form{min-width:0;max-width:100%}
label{max-width:100%;overflow-wrap:break-word}
input,select,textarea{max-width:100%;width:100%;min-width:0;min-height:48px;margin:8px 0 14px;font-size:16px}
input[type=checkbox],input[type=radio]{min-height:initial;width:auto}
.password-wrap{position:relative}.password-wrap input{padding-right:86px}.password-wrap .password-toggle{width:auto;min-height:36px;right:6px;top:6px;padding:5px 9px;white-space:nowrap}
.auth-links{display:grid;gap:8px}.action-stack{align-items:stretch}.action-stack .button{width:100%}.step,.feature-line{grid-template-columns:38px minmax(0,1fr);gap:12px}
.invite-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.invite-actions button{width:100%;min-width:0;margin:0}
.score-strip{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:hidden}
.score-strip>span{min-width:0;padding:12px 4px}.score-strip b{font-variant-numeric:tabular-nums;font-size:clamp(1.25rem,5vw,1.65rem);overflow-wrap:anywhere}.score-strip small{line-height:1.25;font-size:.73rem}
.game-overview{min-width:0}.game-overview h1{overflow-wrap:break-word}.game-topline{flex-wrap:wrap}.game-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.game-tabs a{min-width:0;padding:12px 1px;overflow-wrap:anywhere;font-size:clamp(.68rem,2.7vw,.85rem);min-height:46px}
.game-app,.room-panels{min-width:0;width:100%;gap:12px}.gameplay-section{padding:20px!important}.game-part{grid-template-columns:29px minmax(0,1fr);gap:12px}.part-content{min-width:0;overflow-wrap:anywhere}.game-progress{height:9px}.progress-label{flex-wrap:wrap}
.bingo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.tile{min-width:0;min-height:135px;padding:9px!important;overflow-wrap:anywhere;gap:8px}.tile strong{font-size:clamp(.68rem,2.5vw,.79rem);line-height:1.35}.tile button{min-width:0;width:100%;padding:8px 4px;font-size:clamp(.68rem,2.4vw,.78rem);min-height:42px}
.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.photo-grid img{min-width:0;width:100%;aspect-ratio:1;object-fit:cover}
.member-summary>div,.agreement-members li{flex-wrap:wrap;align-items:flex-start;overflow-wrap:anywhere}.agreement-box{max-width:100%;padding:14px}.agreement-box form button{width:100%}
.profile-head{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center}.profile-avatar{width:80px;height:80px;flex:0 0 80px}.profile-head h1{font-size:clamp(1.45rem,6vw,2.1rem);margin-bottom:8px}
.studio-result{width:100%;max-width:100%;height:auto}.invention-card{min-width:0;display:grid;gap:12px}.invention-card p:has(> .button){display:flex;flex-wrap:wrap;gap:8px}.invention-card .button,.invention-card .game-secondary{flex:1 1 160px;max-width:100%}
.table-scroll{max-width:100%;width:100%;overflow-x:auto}table{width:100%;min-width:360px}th,td{vertical-align:top}
.camera-dialog{max-width:100vw}.camera-window{width:min(100%,550px)}.camera-top,.camera-bottom{min-width:0}.camera-controls{display:grid;grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr);gap:8px}.camera-controls button{min-width:0;padding:8px 4px;font-size:.75rem}.camera-controls .shutter{width:66px;padding:0}.camera-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.camera-footer button{min-width:0}
@media(min-width:620px){.shell{padding:30px 24px 60px}.top{padding:18px 24px 12px}.footer{padding:18px 24px}.panel,.cards article,.cards .panel{padding:24px}.gameplay-section{padding:24px!important}.top nav{grid-template-columns:repeat(5,minmax(0,1fr))}.camera-window{max-height:92dvh}}
@media(max-width:359px){.shell{padding-inline:12px}.top,.footer{padding-inline:12px}.panel,.cards article,.cards .panel{padding:14px}.gameplay-section{padding:14px!important}.bingo{gap:4px}.tile{padding:6px!important;min-height:125px}.tile button{font-size:.66rem;padding:6px 2px}.game-tabs a{font-size:.66rem}.top nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Camera covers the visual viewport, including mobile overscroll and safe areas. */
html.camera-active,body.camera-active{overflow:hidden!important;overscroll-behavior:none!important}
.camera-dialog{inset:0;bottom:auto;width:100%;height:100dvh;max-width:none;z-index:2147483000;background:#010807;overflow:hidden;overscroll-behavior:none;isolation:isolate;touch-action:none}
.camera-dialog .camera-window{width:min(100%,550px);height:100%;max-height:none;border:0;overflow:hidden}
.camera-top,.camera-bottom{flex-shrink:0;padding:12px max(16px,env(safe-area-inset-left))}
.camera-top{padding-top:max(12px,env(safe-area-inset-top))}
.camera-bottom{padding-bottom:max(16px,env(safe-area-inset-bottom));gap:8px}
.camera-stage{min-height:0;flex:1;isolation:isolate}
.camera-stage video,.camera-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.camera-stage [hidden]{display:none!important}
.camera-status{position:static;margin:0;font-size:.85rem;text-shadow:none}
.camera-bottom #camera-hint{margin:0;text-align:center}
.camera-controls{display:grid;grid-template-columns:1fr 66px 1fr;align-items:center;min-height:70px}
.camera-controls .shutter{grid-column:2;grid-row:1}
.camera-controls #camera-torch{grid-column:1;grid-row:1}
.camera-footer{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.game-intro{max-width:720px;margin-inline:auto}.intro-project{padding:18px;background:var(--forest);border-left:3px solid var(--mint)}
.intro-powers{border:0;padding:0;margin:24px 0}.intro-powers legend{font-size:1.35rem;font-weight:700}
.intro-power{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--border);cursor:pointer}
.intro-power:has(input:checked){background:var(--forest);border-color:var(--mint)}
.intro-power input{width:22px;min-width:22px;min-height:22px;height:22px;margin:0;accent-color:var(--mint)}
.intro-power span span{display:block;margin-top:5px;font-weight:400;color:var(--muted);line-height:1.45}