:root{--bg-deep:#1a0e14;--bg:#2a1520;--bg-lift:#3d1f2e;--cream:#fff5f7;--cream-dim:#e8c8d0;--accent:#ff4d8d;--accent-soft:#ff7aad;--win:#7dffb3;--lose:#ff8a9a;--draw:#ffd27a;--bubble:#fff5f7f0;--bubble-text:#2a1520;--glass:#1a0e148c;--shadow:0 12px 32px #00000073;--font:"Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Segoe UI", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font);color:var(--cream);background:var(--bg-deep);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1.45}*,:before,:after{box-sizing:border-box}html,body,#app{height:100dvh;margin:0;overflow:hidden}body{background:var(--bg-deep)}#app{justify-content:center;display:flex}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}button:disabled{cursor:not-allowed;opacity:.55}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;max-width:100%;display:block}.game{isolation:isolate;width:100%;max-width:480px;height:100dvh;position:relative;overflow:hidden}.portrait-layer{z-index:0;background:radial-gradient(ellipse 90% 70% at 50% 20%, #4a1e35 0%, transparent 60%), var(--bg-deep);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.portrait{object-fit:contain;object-position:center center;width:100%;height:100%;animation:.45s ease-out both portrait-in}@keyframes portrait-in{0%{opacity:.35;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.header{z-index:2;padding:max(.55rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .55rem max(.75rem, env(safe-area-inset-left));background:linear-gradient(#12080cbf 0%,#12080c59 70%,#0000 100%);justify-content:space-between;align-items:center;gap:.75rem;display:flex;position:absolute;top:0;left:0;right:0}.title{letter-spacing:.04em;color:var(--cream);text-shadow:0 1px 8px #0000008c;margin:0;font-size:1.05rem;font-weight:700}.stage{letter-spacing:.08em;color:var(--accent-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ff4d8d38;border:1px solid #ffb4c859;border-radius:999px;margin:0;padding:.2rem .55rem;font-size:.75rem;font-weight:600}.stage[data-cleared]{color:var(--win);background:#7dffb32e;border-color:#7dffb373}.clear-badge{z-index:2;letter-spacing:.2em;color:var(--bg-deep);background:linear-gradient(135deg, var(--accent-soft), var(--accent));pointer-events:none;border-radius:999px;padding:.4rem 1.2rem;font-size:1rem;font-weight:800;animation:.5s cubic-bezier(.34,1.4,.64,1) both badge-pop;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 24px #ff4d8d80}@keyframes badge-pop{0%{opacity:0;transform:translate(-50%,-40%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.hud{z-index:2;padding:2.5rem max(.75rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#0000 0%,#0c060a40 22%,#0c060ab8 55%,#0c060aeb 100%);flex-direction:column;gap:.45rem;display:flex;position:absolute;bottom:0;left:0;right:0}.hud>*{pointer-events:auto}.bubble{background:var(--bubble);color:var(--bubble-text);border-radius:.9rem;align-self:stretch;padding:.6rem .85rem;animation:.35s cubic-bezier(.34,1.3,.64,1) both bubble-in;position:relative;box-shadow:0 4px 16px #0000004d}.bubble:before{content:"";background:var(--bubble);border-radius:2px;width:14px;height:14px;position:absolute;top:-7px;left:1.25rem;transform:rotate(45deg)}.bubble-text{margin:0;font-size:.9rem;font-weight:600;line-height:1.35}@keyframes bubble-in{0%{opacity:0;transform:translateY(6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.result{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-height:0;display:flex}.hint{color:var(--cream-dim);text-shadow:0 1px 6px #0009;margin:0;font-size:.85rem}.outcome{letter-spacing:.04em;text-shadow:0 1px 8px #0000008c;margin:0;font-size:.95rem;font-weight:800}.outcome[data-outcome=win]{color:var(--win)}.outcome[data-outcome=lose]{color:var(--lose)}.outcome[data-outcome=draw]{color:var(--draw)}.hands-row{align-items:center;gap:.55rem;display:flex}.hand-chip{flex-direction:column;align-items:center;gap:.1rem;display:flex}.hand-chip-label{letter-spacing:.06em;color:var(--cream-dim);font-size:.6rem}.hand-chip-img{object-fit:contain;filter:drop-shadow(0 2px 4px #0006);width:36px;height:36px}.vs{color:var(--cream-dim);letter-spacing:.12em;font-size:.65rem;font-weight:700}.controls{flex-shrink:0}.hand-buttons{grid-template-columns:repeat(3,1fr);gap:.45rem;display:grid}.hand-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#3d1f2eeb 0%,#1e0e16f2 100%);border:1px solid #ffb4c838;border-radius:.9rem;flex-direction:column;align-items:center;gap:.2rem;min-height:4.25rem;padding:.45rem .3rem .4rem;transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 3px #12080c,0 6px 14px #00000059}.hand-btn:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px #12080c,0 3px 8px #0000004d}.hand-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hand-btn-img{object-fit:contain;width:44px;height:44px}.hand-btn-label{letter-spacing:.06em;color:var(--cream);font-size:.75rem;font-weight:700}.restart{letter-spacing:.08em;width:100%;min-height:2.85rem;color:var(--bg-deep);background:linear-gradient(135deg, var(--accent-soft), var(--accent));border-radius:999px;font-size:1rem;font-weight:800;transition:transform .12s,box-shadow .12s;box-shadow:0 5px #a0184a,0 8px 20px #ff4d8d59}.restart:active{transform:translateY(2px);box-shadow:0 2px #a0184a,0 4px 10px #ff4d8d4d}.restart:focus-visible{outline:2px solid var(--cream);outline-offset:3px}@media (height<=700px){.title{font-size:.95rem}.hud{gap:.35rem;padding-top:1.75rem}.bubble{padding:.5rem .75rem}.bubble-text{font-size:.85rem}.hand-btn{min-height:3.6rem;padding:.35rem .25rem .3rem}.hand-btn-img{width:38px;height:38px}.hand-chip-img{width:30px;height:30px}}@media (height<=560px){.hud{gap:.3rem;padding-top:1.25rem}.bubble:before{display:none}.hand-buttons{gap:.35rem}.hand-btn{flex-direction:row;justify-content:center;gap:.35rem;min-height:3.1rem;padding:.35rem .4rem}.hand-btn-img{width:32px;height:32px}.hand-btn-label{font-size:.8rem}.result{flex-flow:wrap;gap:.35rem .75rem}}@media (prefers-reduced-motion:reduce){.portrait,.bubble,.clear-badge{animation:none}.hand-btn,.restart{transition:none}}