:root{--ink:#3b2a4a;--cream:#fff8ee;--pink:#ff8fb1;--mint:#9ad9c6;--sky:#7cc6e8;--shadow:0 6px 0 #3b2a4a2e, 0 10px 24px #3b2a4a2e;--tap:72px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{overscroll-behavior:none;background:#7cc6e8;height:100%;margin:0;overflow:hidden}body{color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;font-family:ui-rounded,SF Pro Rounded,Nunito,Quicksand,system-ui,sans-serif}.app,.stage{position:fixed;inset:0}.stage canvas{display:block}.btn{background:var(--cream);box-shadow:var(--shadow);cursor:pointer;color:var(--ink);font:inherit;touch-action:manipulation;border:none;border-radius:22px;justify-content:center;align-items:center;gap:10px;padding:0;font-weight:800;transition:transform .12s;display:inline-flex}.btn:active{transform:translateY(3px)scale(.96)}.btn:disabled{opacity:.45}.btn.round{width:var(--tap);height:var(--tap);border-radius:50%}.btn.round.small{width:58px;height:58px}.btn.round.big{width:104px;height:104px}.btn svg{width:72%;height:72%}.hud{z-index:5;pointer-events:none;gap:14px;display:flex;position:fixed}.hud>*{pointer-events:auto}.hud-tl{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left))}.hud-tr{top:max(14px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));align-items:center}.hud-bl{bottom:max(14px, env(safe-area-inset-bottom));left:max(14px, env(safe-area-inset-left));max-width:calc(100vw - 28px);padding:4px;overflow-x:auto}.roster .face{width:74px;height:74px;box-shadow:var(--shadow);cursor:pointer;background:#ffe6ef;border:5px solid #fff;border-radius:50%;flex:none;padding:0;transition:transform .15s;overflow:hidden}.roster .face img{object-fit:cover;width:100%;height:100%}.roster .face.sel{border-color:#ffd447;transform:scale(1.08)}.roster .face.away{opacity:.75}.roster .face.add{background:var(--cream);justify-content:center;align-items:center;display:flex}.roster .face.add svg{width:70%;height:70%}.overlay{z-index:10;justify-content:center;align-items:center;animation:.22s ease-out pop;display:flex;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.overlay{animation:none}}@keyframes pop{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}.overlay .close{top:max(14px, env(safe-area-inset-top));left:max(14px, env(safe-area-inset-left));position:absolute}.splash{background:radial-gradient(circle at 50% 40%,#bfe6ff,#7cc6e8);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.splash-house{width:140px;height:140px;animation:1.2s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-12px)rotate(-3deg)}}.map{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#3b2a4a73}.map-svg{filter:drop-shadow(0 12px 30px #00000040);width:min(96vw,170vh);max-height:90vh}.map-spot{cursor:pointer}.map-spot:hover rect{fill:#ffffff73}.settings{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#3b2a4a73}.panel{background:var(--cream);box-shadow:var(--shadow);border-radius:36px;flex-direction:column;gap:22px;min-width:min(520px,90vw);padding:32px 36px;display:flex}.row{align-items:center;gap:18px;display:flex}.row.center{justify-content:center}.label{font-size:20px;font-weight:800}.label.small{opacity:.65;font-size:15px}.slider{accent-color:#ff8fb1;flex:1;height:40px}.grown-ups{border-top:3px dashed #e6d8ea;flex-direction:column;gap:12px;padding-top:18px;display:flex}.btn.hold{height:64px;padding:0 20px 0 12px;font-size:17px;position:relative;overflow:hidden}.btn.hold svg{width:44px;height:44px;position:relative}.btn.hold span:not(.hold-fill){position:relative}.hold-fill{transform-origin:0;background:#ffd0da;position:absolute;inset:0;transform:scaleX(0)}.creator{background:linear-gradient(160deg,#ffe6ef 0%,#e6dcff 55%,#d5f1f6 100%);grid-template-columns:minmax(260px,38%) 1fr;align-items:stretch;gap:12px;padding:18px;display:grid}.creator-left{flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}.pedestal{cursor:pointer;background:radial-gradient(at 50% 92%,#fffffff2 0 22%,#ffffff59 23% 60%,#0000 61%);border-radius:160px 160px 40px 40px;width:320px;max-width:100%;height:420px}.pedestal canvas{width:100%!important;height:100%!important}.creator-right{flex-direction:column;gap:12px;min-height:0;padding-top:70px;padding-bottom:120px;display:flex}.tabs{flex-wrap:wrap;gap:10px;display:flex}.tab{width:76px;height:76px;box-shadow:var(--shadow);cursor:pointer;background:#ffffffb3;border:4px solid #0000;border-radius:24px;padding:8px}.tab svg{width:100%;height:100%}.tab.on{background:#fff;border-color:#ff8fb1;transform:translateY(-3px)}.options{touch-action:pan-y;background:#ffffffa6;border-radius:30px;flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto;box-shadow:inset 0 2px 8px #3b2a4a14}.tiles{flex-wrap:wrap;gap:10px;display:flex}.tile{cursor:pointer;background:#fff8fb;border:4px solid #fff;border-radius:22px;justify-content:center;align-items:center;width:84px;height:84px;padding:2px;display:flex;box-shadow:0 3px #3b2a4a1f}.tile img{object-fit:contain;width:100%;height:100%}.tile svg{width:60%;height:60%}.tile.on{background:#fff;border-color:#ff8fb1;transform:scale(1.04)}.slot-tabs{border-bottom:3px dashed #3b2a4a1f;gap:10px;padding-bottom:6px;display:flex}.tile.slot{width:70px;height:70px}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;border:4px solid #fff;border-radius:50%;width:54px;height:54px;box-shadow:0 3px #3b2a4a26}.swatch.on{outline-offset:2px;outline:4px solid #3b2a4a}.creator .done{bottom:max(18px, env(safe-area-inset-bottom));right:max(18px, env(safe-area-inset-right));position:absolute}.btn.trash{position:relative}.btn.trash .ring{width:100%;height:100%;position:absolute;inset:0}.loading-dots{border:6px solid #fff;border-top-color:#ff8fb1;border-radius:50%;width:40px;height:40px;margin:40px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=760px),(height<=560px){:root{--tap:60px}.creator{grid-template-columns:40% 1fr}.pedestal{width:220px;height:290px}.creator-right{padding-top:64px;padding-bottom:96px}.tab{width:60px;height:60px}.tile{width:70px;height:70px}.swatch{width:46px;height:46px}.btn.round.big{width:84px;height:84px}.roster .face{width:62px;height:62px}}
