*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}.joystick-zone{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.joystick-base{left:max(16px, env(safe-area-inset-left));bottom:max(24px, env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#c3e1f259;border:3px solid #ffffffb3;border-radius:50%;transition:background .15s,border-color .15s;position:absolute;box-shadow:0 6px 20px #1f2d3a40,inset 0 0 20px #4b99d240}.joystick-base.active{border-color:var(--secondary);background:#c3e1f28c}.joystick-knob{background:var(--secondary);border:4px solid var(--primary);width:45%;height:45%;box-shadow:0 4px 0 var(--primary-dark), 0 6px 14px #1f2d3a4d;pointer-events:none;border-radius:50%;transition:transform 20ms linear;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.joystick-base.floating{bottom:auto;transform:translate(-50%,-50%)}.overlay{justify-content:center;align-items:center;padding:16px;animation:.35s ease-out fade-in;display:flex;position:absolute;inset:0}.overlay-start{background:linear-gradient(160deg,#ffc41380,#d4092799)}.overlay-caught{background:#1f2d3a73}.overlay-won{background:radial-gradient(circle at 50% 40%,#ffc4138c,#d4092799)}.win-badge{object-fit:cover;border-radius:18px;width:100%;max-height:200px;margin:0 auto 12px;animation:.5s cubic-bezier(.34,1.56,.64,1) .15s both pop-in;display:block}.panel{background:var(--secondary);text-align:center;border-radius:28px;width:min(400px,100%);padding:28px 28px 30px;animation:.4s cubic-bezier(.34,1.56,.64,1) pop-in;box-shadow:0 10px #a0061c40,0 24px 60px #1f2d3a4d}.panel h1{color:var(--primary);margin-bottom:6px;font-size:clamp(28px,8vw,38px);font-weight:800;line-height:1.25}.panel p{color:var(--ink-soft);font-size:18px}.tips{flex-direction:column;gap:8px;margin:18px 0 4px;list-style:none;display:flex}.tips li{background:var(--light-blue);color:var(--ink);border-radius:14px;padding:8px 14px;font-size:16px}.btn{background:var(--primary);box-shadow:0 6px 0 var(--primary-dark);color:var(--secondary);cursor:pointer;touch-action:manipulation;border:none;border-radius:18px;margin-top:22px;padding:10px 48px 14px;font-family:inherit;font-size:24px;font-weight:800;transition:transform 80ms,box-shadow 80ms,filter .15s}.btn:hover{filter:brightness(1.06)}.btn:active{box-shadow:0 1px 0 var(--primary-dark);transform:translateY(5px)}.btn:focus-visible{outline:3px solid var(--light-blue);outline-offset:3px}@keyframes fade-in{0%{opacity:0}}@keyframes pop-in{0%{opacity:0;transform:scale(.85)translateY(20px)}}.hud{top:calc(10px + env(safe-area-inset-top,0px));pointer-events:none;justify-content:space-between;align-items:center;gap:10px;display:flex;position:absolute;inset-inline:12px}.hud-logo{background:var(--secondary);border-radius:50%;width:54px;height:54px;box-shadow:0 3px 10px #3a1d1259}.hud-chip{background:var(--secondary);color:var(--primary);border-radius:999px;padding:4px 16px 6px;font-size:17px;font-weight:800;box-shadow:0 3px 10px #3a1d1259}.intro{padding:76px 12px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;animation:.3s ease-out fade-in;display:flex;position:absolute;inset:0}.intro-title{color:var(--secondary);text-align:center;text-shadow:0 3px 0 var(--primary-dark), 0 6px 22px #3a1d128c;font-size:clamp(24px,5vw,36px);font-weight:800;line-height:1.15}.intro-title small{font-size:.5em;display:block}.intro-card{background:var(--secondary);border-radius:18px;align-items:center;gap:12px;width:min(520px,100%);padding:10px 14px;animation:.4s cubic-bezier(.34,1.56,.64,1) pop-in;display:flex;box-shadow:0 6px #a0061c4d,0 14px 34px #3a1d1259}.intro-card img{object-fit:cover;border-radius:12px;flex:none;width:92px;height:92px}.intro-card ul{min-width:0;color:var(--ink);font-size:14px;line-height:1.45;list-style:none}.intro-card b{color:var(--primary)}.intro-skip{background:var(--primary);color:var(--secondary);border-radius:999px;padding:3px 16px 5px;font-size:15px;font-weight:800}.products{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;display:grid}.products img{aspect-ratio:1;object-fit:cover;border-radius:12px;width:100%}.panel a.site-link{color:var(--primary-dark);margin-top:12px;font-weight:700;display:block}@media (prefers-reduced-motion:reduce){.intro,.intro-card{animation:none}}.letterbox{pointer-events:none;position:absolute;inset:0}.letterbox-bar{background:#000;height:12vh;transition:transform .5s ease-out;position:absolute;left:0;right:0}.letterbox-bar.top{top:0;transform:translateY(-100%)}.letterbox-bar.bottom{bottom:0;transform:translateY(100%)}.letterbox.active .letterbox-bar{transform:translateY(0)}.canvas-container{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-container canvas{display:block}.joysticks{position:absolute;inset:0}.joysticks.hidden{visibility:hidden}