:root{--bg:#b8f3ff;--panel:#fff8db;--ink:#223;--accent:#ff8bd1;--accent2:#7cdd7c;--safe:#a7f3d0;--lane:#ffd166;--goal:#c084fc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(#9ee7ff,#e0fff5);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;border:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #111;outline-offset:3px}.app{max-width:920px;margin:0 auto;padding:env(safe-area-inset-top) 14px 18px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.topbar strong{font-size:1.35rem}.topbar small{display:block;opacity:.65}.icon-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.icon-btn{min-width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 3px 0 #0002;font-weight:900}.icon-btn.text-btn{width:auto;border-radius:999px;padding:0 14px;font-size:.9rem}.panel{background:var(--panel);border:4px solid #fff;border-radius:28px;padding:18px;box-shadow:0 10px 0 #0001}.start-screen{text-align:center}.subtle{opacity:.75}.select-row{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900;margin:12px auto}.select-row select{border:3px solid #fff;border-radius:999px;padding:10px 14px;background:#fff;font-weight:800}.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px;margin:18px 0}.char-card{background:#fff;border:3px solid transparent;border-radius:22px;padding:10px;box-shadow:0 4px 0 #0001}.char-card.selected{border-color:var(--accent);transform:translateY(-2px)}.char-card img{width:86px;height:86px;object-fit:contain;display:block;margin:0 auto 6px}.primary{background:linear-gradient(135deg,var(--accent),#ffcc70);border-radius:999px;padding:13px 22px;font-weight:900;box-shadow:0 5px 0 #0002}.hidden{display:none}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:18px;padding:8px 10px;margin-bottom:8px;font-weight:800;flex-wrap:wrap}.avatar{display:flex;align-items:center;gap:8px}.avatar img{width:42px;height:42px;object-fit:contain}.message{min-height:38px;text-align:center;font-weight:900;color:#642;background:#fff8;border-radius:16px;padding:8px;margin-bottom:8px}canvas{width:100%;max-height:68vh;aspect-ratio:3/2;display:block;background:#fff;border-radius:24px;border:5px solid #fff;box-shadow:0 7px 0 #0001}.controls{display:grid;place-items:center;gap:6px;margin-top:10px}.controls button{width:74px;height:56px;border-radius:18px;background:#fff;font-size:1.4rem;font-weight:900;box-shadow:0 5px 0 #0002}.big-controls .controls button{width:92px;height:68px;font-size:1.7rem}.dialog{width:min(92vw,540px);border:0;border-radius:24px;padding:22px;background:#fffef2;box-shadow:0 20px 70px #0005}.dialog::backdrop{background:#0007}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;font-weight:800}.switch-row input{width:28px;height:28px}.privacy-note{background:#ecfeff;border-radius:16px;padding:12px;font-weight:700}.reduced-motion *{transition:none!important;animation:none!important}@media (orientation:landscape) and (max-height:720px){.app{max-width:1100px}.topbar{padding:6px 0}canvas{max-height:58vh}.controls button{height:48px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
.avatar-fallback {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 2px 0 #0000001a;
  color: #111827;
  font-weight: 900;
}
.char-card .avatar-fallback {
  margin: 0 auto;
}
#hudAvatar.avatar-fallback {
  flex: 0 0 auto;
}

@media (min-width:1000px){.app{max-width:1120px}}