.screen{min-height:100%;padding:calc(var(--safe-top) + var(--space-4)) calc(var(--safe-right) + var(--space-4)) calc(var(--safe-bottom) + var(--space-4)) calc(var(--safe-left) + var(--space-4));flex-direction:column;flex:1;display:flex}.screen__inner{width:100%;max-width:1100px;margin:0 auto}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-primary-ink);font-size:var(--text-md);box-shadow:var(--shadow-sm);border:none;font-weight:800;transition:transform 80ms;display:inline-flex}.btn:active{transform:scale(.96)}.btn--ghost{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border);box-shadow:none}.btn--danger{background:var(--color-danger);color:var(--color-danger-ink)}.btn--icon{min-width:var(--touch);font-size:var(--text-lg);padding:0}.topbar{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);display:flex}.topbar h1{font-size:var(--text-2xl);letter-spacing:-.02em;font-weight:900}.topbar__actions{gap:var(--space-2);display:flex}.profile-chip{align-items:center;gap:var(--space-2);min-height:var(--touch-min);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);border:2px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);font-weight:800;display:inline-flex}.profile-chip__avatar{background:var(--color-surface-sunk);border-radius:50%;place-items:center;width:40px;height:40px;font-size:1.4rem;display:grid}.card-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}@media (width<=400px){.card-grid{grid-template-columns:1fr}}.game-card{text-align:left;padding:var(--space-4);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-sm);border:none;border-top:6px solid var(--card-accent,var(--color-primary));flex-direction:column;transition:transform .1s,box-shadow .1s;display:flex}.game-card:active{box-shadow:var(--shadow-md);transform:translateY(2px)scale(.99)}.game-card__icon{border-radius:var(--radius-md);background:color-mix(in srgb, var(--card-accent,var(--color-primary)) 16%, white);width:72px;height:72px;margin-bottom:var(--space-3);place-items:center;font-size:2.6rem;display:grid}.game-card__title{font-size:var(--text-lg);font-weight:900}.game-card__tagline{margin-top:var(--space-1);color:var(--color-text-soft);font-size:var(--text-sm);font-weight:600}.game-card__badges{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-xs);text-transform:capitalize;align-items:center;font-weight:800;display:inline-flex}.badge--age{background:var(--color-surface-sunk);color:var(--color-text-soft)}.badge--subject{background:color-mix(in srgb, var(--card-accent,var(--color-primary)) 18%, white);color:color-mix(in srgb, var(--card-accent,var(--color-primary)) 70%, black)}.overlay{z-index:50;padding:calc(var(--safe-top) + var(--space-4)) var(--space-4) calc(var(--safe-bottom) + var(--space-4));background:#23264a80;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sheet{width:100%;max-width:460px;max-height:100%;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lg);overflow:auto}.sheet h2{font-size:var(--text-xl);margin-bottom:var(--space-4);font-weight:900}.sheet p{color:var(--color-text-soft);font-weight:600}.field{margin-bottom:var(--space-4);display:block}.field>span{margin-bottom:var(--space-2);font-weight:800;display:block}.text-input{width:100%;min-height:var(--touch);padding:0 var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-lg);background:var(--color-surface);color:var(--color-text)}.text-input:focus{outline:3px solid color-mix(in srgb, var(--color-primary) 40%, white);border-color:var(--color-primary)}.picker{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(56px,1fr));display:grid}.picker__item{aspect-ratio:1;min-height:var(--touch);border-radius:var(--radius-md);background:var(--color-surface-sunk);border:3px solid #0000;place-items:center;font-size:1.8rem;display:grid}.picker__item[aria-pressed=true]{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 14%, white)}.sheet__actions{gap:var(--space-3);margin-top:var(--space-5);display:flex}.sheet__actions .btn{flex:1}.profile-list{gap:var(--space-2);margin-bottom:var(--space-4);flex-direction:column;display:flex}.profile-row{align-items:center;gap:var(--space-3);width:100%;min-height:var(--touch);padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-weight:800;font-size:var(--text-md);color:var(--color-text);display:flex}.profile-row[aria-pressed=true]{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 10%, white)}.setting-row{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);display:flex}.setting-row__label{font-weight:800}.setting-row__hint{color:var(--color-text-soft);font-size:var(--text-sm);font-weight:600}.muted-note{color:var(--color-text-soft);font-weight:600;font-size:var(--text-sm);margin-top:var(--space-5)}.switch{border-radius:var(--radius-pill);background:var(--color-border);border:none;flex:none;width:64px;height:38px;transition:background .15s;position:relative}.switch[aria-pressed=true]{background:var(--color-primary)}.switch:after{content:"";width:30px;height:30px;box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;transition:transform .15s;position:absolute;top:4px;left:4px}.switch[aria-pressed=true]:after{transform:translate(26px)}.empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-text-soft);font-weight:700}.game-host{background:#000;position:fixed;inset:0}.game-host__home{top:calc(var(--safe-top) + var(--space-3));left:calc(var(--safe-left) + var(--space-3));z-index:40;width:52px;height:52px;color:var(--color-text);box-shadow:var(--shadow-md);background:#ffffffe6;border:none;border-radius:50%;place-items:center;font-size:1.5rem;display:grid;position:fixed}.game-host__loading{color:#fff;font-weight:800;font-size:var(--text-lg);background:var(--color-primary);place-items:center;display:grid;position:absolute;inset:0}.spinner{width:44px;height:44px;margin-bottom:var(--space-3);border:5px solid #ffffff59;border-top-color:#fff;border-radius:50%;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}:root{--color-bg:#f4f6ff;--color-surface:#fff;--color-surface-sunk:#eef1fb;--color-text:#23264a;--color-text-soft:#676b8f;--color-border:#e2e6f5;--color-primary:#5b6cff;--color-primary-ink:#fff;--color-danger:#ff5a7a;--color-danger-ink:#fff;--accent-1:#ff8a5b;--accent-2:#ffb648;--accent-3:#4cc9a0;--accent-4:#59a7ff;--accent-5:#b07bff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--radius-pill:999px;--touch-min:44px;--touch:64px;--font-family:"Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.75rem;--text-2xl:2.5rem;--shadow-sm:0 2px 6px #23264a14;--shadow-md:0 8px 24px #23264a1f;--shadow-lg:0 16px 48px #23264a2e;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-family);color:var(--color-text);background:var(--color-bg);touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}#root{flex-direction:column;min-height:100%;display:flex}button{cursor:pointer;font-family:inherit}h1,h2,h3,p{margin:0}.no-select{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
