:root{--teal:#00a0b0;--rose:#cf5c78;--sun:#f5df4d;--bg:#f0eee9;--grey:#939597;--ink:#1d3b40;--muted:#6d7072;--card:#fff;--line:#dcd8ce;--sun-soft:#fbf3b8;--sun-deep:#cdb52a;--rose-soft:#f6dde4;--teal-soft:#d2eef0;--radius:20px;--shadow:0 4px 0 #1d3b401f;color:var(--ink);font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}input{-webkit-user-select:text;user-select:text}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}h1,h2{margin:0;line-height:1.15}h1{font-size:1.7rem}h2{margin-bottom:8px;font-size:1.15rem}[hidden]{display:none!important}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--muted)}.error{color:var(--rose);font-weight:600}.splash{place-items:center;height:100%;animation:1.2s ease-in-out infinite bob;display:grid}.btn{border:2px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:999px;min-height:48px;padding:12px 20px;font-weight:700}.btn:active{box-shadow:none;transform:translateY(2px)}.btn.primary{background:var(--rose);color:#fff;border-color:var(--rose)}.btn.danger{color:var(--rose)}.btn.small{min-height:40px;padding:8px 14px;font-size:.9rem}.btn:disabled{opacity:.5}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--line);padding:18px}.form{flex-direction:column;gap:12px;display:flex}.form.row{flex-direction:row;align-items:center}.row{flex-wrap:wrap;gap:8px;display:flex}label{flex-direction:column;gap:4px;font-size:.95rem;font-weight:700;display:flex}label small{color:var(--muted);font-weight:400}input{font:inherit;border:2px solid var(--line);color:var(--ink);background:#fff;border-radius:14px;padding:12px 14px;font-size:16px}input:focus{border-color:var(--teal);outline:none}.pin-input{text-align:center;letter-spacing:.4em;width:110px}.segmented{background:#e3dfd6;border-radius:999px;gap:4px;padding:4px;display:flex}.segmented button{border-radius:999px;flex:1;padding:10px;font-weight:700}.segmented button.on{box-shadow:var(--shadow);background:#fff}.segmented.small button{padding:6px;font-size:.9rem}.emoji-row{flex-wrap:wrap;gap:6px;display:flex}.emoji-row button{border:2px solid var(--line);background:#fff;border-radius:14px;width:48px;height:48px;font-size:1.6rem}.emoji-row button.on{border-color:var(--rose);background:var(--rose-soft)}.banner{background:var(--sun-soft);text-align:center;border-radius:12px;padding:8px 12px;font-weight:600}.auth,.home,.family{max-width:560px;min-height:100%;padding:max(16px, env(safe-area-inset-top)) 16px 32px;flex-direction:column;gap:16px;margin:0 auto;display:flex}.auth{justify-content:center}.auth .muted{text-align:center;margin:-8px 0 0}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.header-actions{gap:6px;display:flex}.header-actions .btn{padding:8px 12px}.family header{justify-content:flex-start;gap:12px}.list{flex-direction:column;gap:8px;margin:0 0 12px;padding:0;list-style:none;display:flex}.list li{justify-content:space-between;align-items:center;gap:8px;font-weight:600;display:flex}.invite{letter-spacing:.15em;text-align:center;background:var(--sun-soft);-webkit-user-select:all;user-select:all;border-radius:14px;margin:8px 0;padding:12px;font-size:2rem;font-weight:800}.avatars{flex-wrap:wrap;gap:16px;display:flex}.avatar{opacity:.55;filter:grayscale(.8);flex-direction:column;align-items:center;gap:4px;transition:all .3s;display:flex}.avatar .face{border:4px solid var(--grey);background:#fff;border-radius:50%;place-items:center;width:76px;height:76px;font-size:2.6rem;display:grid;position:relative}.avatar .name{font-weight:700}.avatar.online{opacity:1;filter:none}.avatar.online .face{border-color:var(--teal)}.avatar.online .face:after{content:"";background:var(--teal);border:3px solid var(--bg);border-radius:50%;width:20px;height:20px;position:absolute;bottom:-2px;right:-2px}.avatar.inroom .face{border-color:var(--rose);border-width:5px;animation:.9s ease-in-out infinite bob}.btn.play{text-align:center;background:var(--sun);min-height:150px;box-shadow:0 8px 0 var(--sun-deep);border:0;border-radius:32px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;font-size:1.4rem;display:flex}.btn.play:active{box-shadow:0 2px 0 var(--sun-deep);transform:translateY(6px)}.play-icon{font-size:3.4rem}.btn.play{color:var(--ink)}.pulse{animation:1.2s ease-in-out infinite pulse}.home.kid{gap:24px}.home.kid h1{font-size:2.1rem}.home.kid .avatar .face{width:104px;height:104px;font-size:3.6rem}.home.kid .avatar .name{font-size:1.3rem}.home.kid .btn.play{min-height:240px;font-size:2.2rem}.home.kid .play-icon{font-size:5.5rem}.lock{opacity:.6;background:#fff;border-radius:50%;width:48px;height:48px;font-size:1.6rem}.overlay{z-index:10;background:#1d3b408c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{text-align:center;background:#fff;border-radius:28px;width:min(340px,100%);padding:24px}.dialog p{margin:4px 0 0}.pin-dots{justify-content:center;gap:14px;margin:16px 0 4px;display:flex}.pin-dots span{border:3px solid var(--ink);border-radius:50%;width:18px;height:18px}.pin-dots span.filled{background:var(--ink)}.keypad{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.keypad button{background:var(--sun-soft);border-radius:18px;height:64px;font-size:1.6rem;font-weight:800}.keypad button:active{background:var(--sun)}.keypad .ghost{color:var(--muted);background:0 0;font-size:1rem;font-weight:600}.room{padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr);grid-template-columns:250px minmax(0,1fr);gap:10px;display:grid;position:fixed;inset:0}.call-panel{flex-direction:column;gap:10px;min-width:0;min-height:0;display:flex}.tiles{flex-direction:column;flex:auto;gap:10px;min-height:0;display:flex;overflow:hidden}.tile{min-height:0;max-height:210px;box-shadow:var(--shadow);background:#3a4b4e;border:3px solid #fff;border-radius:18px;flex:1 1 0;position:relative;overflow:hidden}.tile-avatar{background:linear-gradient(135deg, var(--teal-soft), var(--rose-soft));place-items:center;font-size:3.2rem;display:grid;position:absolute;inset:0}.tile video{object-fit:cover;background:0 0;width:100%;height:100%;position:absolute;inset:0}.tile video.mirror{transform:scaleX(-1)}.tile-label{color:#fff;background:#1d3b40bf;border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:700;position:absolute;bottom:6px;left:6px}.tile-blocked{color:#fff;text-align:center;background:#0000008c;place-items:center;padding:8px;font-weight:700;display:grid;position:absolute;inset:0}.tile.waiting .tile-avatar{animation:1.4s ease-in-out infinite bob}.controls{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.ctl{width:52px;height:52px;box-shadow:var(--shadow);border:2px solid var(--line);background:#fff;border-radius:50%;font-size:1.5rem}.ctl.off{background:var(--rose-soft)}.ctl.hangup{background:var(--rose);border-color:var(--rose);place-items:center;padding:0;display:grid}.ctl.hangup svg{fill:#fff;width:60%;height:60%}.game-area{flex-direction:column;gap:8px;min-width:0;min-height:0;display:flex;position:relative}.game-area>.banner{z-index:2;position:absolute;top:8px;left:8px;right:8px}.game-picker{gap:8px;display:flex}.game-picker button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700}.game-picker button.on{background:var(--sun);border-color:var(--sun)}.whiteboard{flex:1;gap:10px;min-height:0;display:flex}.board-stage{flex:1;place-items:center;min-width:0;min-height:0;display:grid;container-type:size}.board-paper{aspect-ratio:1;width:min(100cqw,100cqh);box-shadow:var(--shadow);outline:2px solid var(--line);background:#fff;border:3px solid #fff;border-radius:20px;overflow:hidden}.board-paper canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}.tools{flex-direction:column;flex:none;justify-content:center;gap:10px;width:148px;display:flex}.tool-colors{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.tool-row{flex-direction:column;gap:6px;display:flex}.tool-modes,.tool-sizes{gap:6px;display:flex}.tool-actions{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;min-height:44px;box-shadow:0 0 0 2px var(--line);border:4px solid #fff;border-radius:50%}.swatch.on{box-shadow:0 0 0 4px var(--ink);transform:scale(1.08)}.tool{border:2px solid var(--line);min-width:44px;height:48px;box-shadow:var(--shadow);background:#fff;border-radius:14px;flex:1;place-items:center;padding:0;font-size:1.3rem;display:grid}.tool.on{background:var(--sun);border-color:var(--sun)}.tool.danger{background:var(--rose);color:#fff;font-size:.85rem;font-weight:800}.tool .dot{background:var(--ink);border-radius:50%;display:block}@media (orientation:portrait){.room{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);gap:8px}.call-panel{flex-direction:row;height:min(30dvh,260px)}.tiles{flex-direction:row}.tile,.tile.self{flex:1 1 0;min-width:0;max-height:none}.controls{grid-template-columns:repeat(2,48px);align-content:center;gap:6px;display:grid}.ctl{width:48px;height:48px;font-size:1.3rem}.whiteboard{flex-direction:column}.tools{gap:6px;width:auto}.tool-colors{grid-template-columns:repeat(8,1fr);gap:4px}.swatch{border-width:3px;min-height:0}.tool-row{flex-direction:row;gap:8px}.tool-modes,.tool-sizes{flex:1 1 0}.tool-actions{display:flex}.tool{min-width:0;height:44px}}@media (orientation:landscape) and (height<=500px){.room{grid-template-columns:170px minmax(0,1fr)}.tiles{gap:6px}.tools{gap:8px;width:212px}.tool-colors{grid-template-columns:repeat(4,1fr);gap:6px}.swatch{min-height:0}.tool-actions{grid-template-columns:repeat(4,1fr)}.tool{min-width:0;height:40px}.ctl{width:42px;height:42px;font-size:1.15rem}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.brand-img{mix-blend-mode:multiply;display:block}.auth-logo{width:min(240px,60vw);height:auto;margin:0 auto}.wordmark{letter-spacing:-.01em;align-items:center;gap:8px;font-size:1.35rem;font-weight:800;display:inline-flex}.wordmark img{width:auto;height:34px}.wordmark .w1{color:var(--rose)}.wordmark .w2{color:var(--teal)}.splash img{width:140px;height:auto}.gallery{max-width:720px;min-height:100%;padding:max(16px, env(safe-area-inset-top)) 16px 32px;flex-direction:column;gap:16px;margin:0 auto;display:flex}.gallery header{justify-content:flex-start;gap:12px}.grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}@media (width>=560px){.grid{grid-template-columns:repeat(3,1fr)}}.thumb{border:2px solid var(--line);box-shadow:var(--shadow);text-align:center;background:#fff;border-radius:16px;flex-direction:column;gap:6px;padding:8px;font-size:.9rem;font-weight:700;display:flex}.thumb img{aspect-ratio:1;object-fit:cover;background:#fff;border-radius:10px;width:100%;display:block}.thumb:active{box-shadow:none;transform:translateY(2px)}.empty{text-align:center}.empty-icon{font-size:3.5rem}.viewer{z-index:20}.viewer-card{text-align:center;background:#fff;border-radius:24px;flex-direction:column;gap:12px;width:min(560px,100%);max-height:100%;padding:16px;display:flex;overflow:auto}.viewer-card img{aspect-ratio:1;object-fit:contain;border:2px solid var(--line);border-radius:12px;width:100%}.viewer-title{font-size:1.1rem;font-weight:800}.viewer-card .row{justify-content:center}.gallery.kid .btn{min-height:56px;font-size:1.1rem}.gallery-btn{text-align:center;align-self:stretch;font-size:1.1rem}.home.kid .gallery-btn{min-height:72px;font-size:1.5rem}.board-stage{position:relative}.toast{background:var(--ink);color:#fff;z-index:3;box-shadow:var(--shadow);text-align:center;border-radius:999px;max-width:90%;padding:10px 18px;font-weight:700;animation:.25s ease-out pop;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.85)}to{opacity:1;transform:translate(-50%)scale(1)}}.tool:disabled{opacity:.5}.board-paper canvas.fill-cursor{cursor:cell}.picker{max-height:90dvh}.picker .grid{grid-template-columns:repeat(3,1fr);gap:8px}.picker .thumb{padding:4px;font-size:.75rem}@media (orientation:portrait){.room.floating{padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr);gap:6px}.room.floating .call-panel{flex-direction:row;height:auto}.room.floating .controls{flex-wrap:nowrap;align-items:center;gap:8px;width:100%;display:flex}.room.floating .ctl{flex:none;width:44px;height:44px;font-size:1.2rem}.room.floating .ctl.hangup{margin-left:auto}}.float-layer{pointer-events:none;z-index:6;position:fixed;inset:0}.ftile{pointer-events:auto;touch-action:none;cursor:grab;border-radius:16px;transition:width .15s,height .15s;position:absolute;overflow:hidden;box-shadow:0 4px 14px #1d3b4059}.ftile.mini{border-radius:50%}.ftile:active{cursor:grabbing}.ftile .tile{border-radius:inherit;width:100%;height:100%;max-height:none;box-shadow:none;flex:none;position:absolute;inset:0}.ftile .tile-avatar{font-size:2.4rem}.ftile.mini .tile-avatar{font-size:1.7rem}.ftile.mini .tile-label,.ftile.mini .tile-blocked{display:none}.ftile .tile-label{padding:1px 8px;font-size:.75rem}