:root{--bg:#fff6e5;--red:#ff4757;--red-soft:#ffdadd;--yellow:#ffc312;--yellow-soft:#ffedb8;--blue:#1e90ff;--blue-soft:#d6e9ff;--green:#2ed573;--ink:#3d2b1f;--ink-soft:#3d2b1f8c;--white:#fff;--side-left:var(--blue);--side-left-soft:var(--blue-soft);--side-right:var(--red);--side-right-soft:var(--red-soft);--radius-sm:12px;--radius-md:16px;--radius-lg:24px;--border-ink:3px solid var(--ink);--shadow-pop:0 4px 0 #3d2b1f40;--shadow-pop-pressed:0 1px 0 #3d2b1f40;--font-round:"M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif}*{box-sizing:border-box}html{overscroll-behavior:none}body{background:var(--bg);min-height:100dvh;color:var(--ink);font-family:var(--font-round);touch-action:manipulation;-webkit-font-smoothing:antialiased;margin:0;font-weight:700;line-height:1.6}button{color:var(--ink);background:var(--white);border:var(--border-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);cursor:pointer;min-height:48px;padding:.6rem 1.4rem;font-family:inherit;font-size:1rem;font-weight:800;transition:transform 80ms,box-shadow 80ms}button:active:not(:disabled){box-shadow:var(--shadow-pop-pressed);transform:translateY(3px)}button:disabled{opacity:.45;cursor:not-allowed}.hud{pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;inset:0}.hud-top{flex-direction:column;align-items:center;gap:.35rem;width:100%;padding:.6rem .6rem 0;display:flex}.app--immersive .hud-top{padding:max(.4rem, env(safe-area-inset-top)) max(3.2rem, calc(.6rem + env(safe-area-inset-right))) 0 max(3.2rem, calc(.6rem + env(safe-area-inset-left)));gap:.25rem}.shell--rotated .hud .hud-top{padding-top:max(.4rem, env(safe-area-inset-right));padding-left:max(3.2rem, calc(.6rem + env(safe-area-inset-top)));padding-right:max(3.2rem, calc(.6rem + env(safe-area-inset-bottom)))}.shell--rotated.shell--flipped .hud .hud-top{padding-top:max(.4rem, env(safe-area-inset-left));padding-left:max(3.2rem, calc(.6rem + env(safe-area-inset-bottom)));padding-right:max(3.2rem, calc(.6rem + env(safe-area-inset-top)))}.app--immersive .gauge-score{min-width:1.6rem;font-size:1.2rem}.app--immersive .gauge-track{border-width:2px;height:16px}.app--immersive .gauge-knot{font-size:1.35rem}.app--immersive .hud-outcome{margin-top:.2rem;font-size:.9rem}.gauge{align-items:center;gap:.5rem;width:100%;display:flex}.gauge-score{text-align:center;min-width:2rem;color:var(--white);text-shadow:0 2px #0006;font-size:1.5rem;font-weight:800}.gauge-track{border:3px solid var(--white);background:#ffffff40;border-radius:999px;flex:1;height:22px;position:relative}.gauge-fill{transition:width .25s;position:absolute;top:0;bottom:0}.gauge-fill-left{background:var(--side-left);border-radius:999px 0 0 999px;left:0}.gauge-fill-right{background:var(--side-right);border-radius:0 999px 999px 0;right:0}.gauge-knot{filter:drop-shadow(0 2px #00000059);font-size:1.7rem;line-height:1;transition:left .25s;position:absolute;top:50%;transform:translate(-50%,-50%)}.hud-timer{border:2px solid var(--ink);color:var(--ink);background:#ffffffeb;border-radius:999px;padding:.05rem .85rem;font-size:.9rem;font-weight:800}.hud-outcome{color:var(--white);border:2px solid #fffc;border-radius:999px;margin-top:.35rem;padding:.15rem 1.05rem;font-size:1rem;font-weight:800;animation:.3s stamp-pop}.hud-outcome.left{background:var(--side-left)}.hud-outcome.right{background:var(--side-right)}.hud-outcome.draw{background:var(--ink-soft)}@keyframes stamp-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.go-flash{color:var(--yellow);text-shadow:3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);justify-content:center;align-items:center;font-size:min(4.5rem,20vmin);font-weight:800;animation:.8s ease-out forwards go-pop;display:flex;position:absolute;inset:0}@keyframes go-pop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.2)}60%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}.result-overlay{pointer-events:none;flex-direction:column;justify-content:flex-start;align-items:center;padding:.8rem;display:flex;position:absolute;inset:0}.result-banner{background:var(--yellow);border:var(--border-ink);box-shadow:var(--shadow-pop);border-radius:999px;padding:.3rem 1.4rem;font-size:1.35rem;font-weight:800;animation:.5s banner-drop}.result-banner.left{background:var(--side-left-soft)}.result-banner.right{background:var(--side-right-soft)}@keyframes banner-drop{0%{opacity:0;transform:translateY(-1.5rem)scale(.7)}60%{opacity:1;transform:translateY(.2rem)scale(1.05)}to{transform:translateY(0)scale(1)}}.result-panel{background:var(--white);border:var(--border-ink);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-pop);flex-direction:column;align-items:center;gap:.5rem;padding:.7rem .9rem;display:flex}.result-scores{justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}.result-score{flex-direction:column;align-items:center;gap:.1rem;display:flex}.result-score-name{color:var(--white);border-radius:999px;padding:0 .7rem;font-size:.85rem;font-weight:800}.result-score.left .result-score-name{background:var(--side-left)}.result-score.right .result-score-name{background:var(--side-right)}.result-score-value{font-size:2.3rem;font-weight:800;line-height:1.15}.result-score-sub{color:var(--ink-soft);font-size:.75rem}.result-vs{color:var(--ink-soft);font-size:1.3rem;font-weight:800}.draw-counts{color:var(--ink-soft);margin:0;font-size:.85rem}.timeline{width:100%;font-size:.85rem}.timeline summary{cursor:pointer;text-align:center;color:var(--ink-soft);font-weight:700}.timeline-table{border-collapse:collapse;width:100%;margin-top:.4rem}.timeline-table th,.timeline-table td{text-align:center;border:1px solid #3d2b1f40;padding:.25rem .5rem;font-weight:700}.timeline .has-unknown td{opacity:.55}.retry-btn{background:var(--green);width:min(100%,280px);color:var(--white);border-radius:var(--radius-lg);font-size:1.2rem}.app--immersive .result-panel{left:50%;bottom:max(.9rem, env(safe-area-inset-bottom));z-index:5;background:#fffffff0;gap:.35rem;width:min(92%,520px);max-height:58%;padding:.55rem .9rem;position:absolute;overflow-y:auto;transform:translate(-50%)}.app--immersive .result-score-value{font-size:1.9rem}.title-controls{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.presets{gap:.6rem;display:flex}.preset-btn{border-radius:999px;padding:.45rem 1.2rem;font-size:1rem}.preset-btn[aria-pressed=true]{background:var(--blue);color:var(--white)}.start-btn{background:var(--yellow);border-radius:var(--radius-lg);width:min(100%,340px);padding:.8rem 2rem;font-size:1.5rem;box-shadow:0 6px #3d2b1f4d}.start-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px #3d2b1f4d}.hint{background:var(--white);border:2px dashed var(--ink-soft);border-radius:var(--radius-md);text-align:center;max-width:46ch;margin:0;padding:.7rem 1rem;font-size:.9rem;font-weight:700}.app--immersive .title-controls{left:50%;bottom:max(.9rem, env(safe-area-inset-bottom));z-index:5;gap:.6rem;width:min(92%,460px);position:absolute;transform:translate(-50%)}.app--immersive .start-btn{padding:.6rem 2rem;font-size:1.3rem}.app--immersive .hint{background:#fffffff5;padding:.5rem .9rem;font-size:.85rem;line-height:1.5}.game-screen{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.video-wrap{border-radius:var(--radius-lg);border:var(--border-ink);width:100%;box-shadow:var(--shadow-pop);background:#20160f;position:relative;overflow:hidden}.preview{width:100%;display:block;transform:scaleX(-1)}.overlay-canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.guide{pointer-events:none;display:flex;position:absolute;inset:0}.guide:before{content:"";border-left:3px dashed #ffffff73;position:absolute;top:0;bottom:0;left:50%}.side-panel{flex-direction:column;flex:1;justify-content:flex-end;align-items:flex-start;gap:.35rem;padding:.6rem;display:flex}.side-right{align-items:flex-end}.side-name{color:var(--white);border:2px solid #ffffffbf;border-radius:999px;padding:.05rem .75rem;font-size:.85rem;font-weight:800}.side-left .side-name{background:var(--side-left)}.side-right .side-name{background:var(--side-right)}.side-gesture{align-items:center;gap:.45rem;display:flex}.side-right .side-gesture{flex-direction:row-reverse}.side-emoji{border:3px solid var(--ink);background:#ffffffeb;border-radius:50%;justify-content:center;align-items:center;width:3.4rem;height:3.4rem;font-size:2.3rem;line-height:1;display:flex}.side-gesture-label,.side-placeholder{color:var(--white);text-shadow:0 1px 3px #000000bf;font-size:.95rem;font-weight:800}.side-reading .side-emoji{animation:1s ease-in-out infinite side-pulse}@keyframes side-pulse{50%{opacity:.55}}.overlay{color:var(--white);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.9rem;display:flex;position:absolute;inset:0}.overlay.countdown{text-shadow:0 5px #00000059;font-size:min(7.5rem,38vmin);font-weight:800;line-height:1;animation:.95s both count-pop}.overlay.countdown.count-3{color:var(--blue)}.overlay.countdown.count-2{color:var(--yellow)}.overlay.countdown.count-1{color:var(--red)}@keyframes count-pop{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.15)}45%{transform:scale(1)}to{opacity:.9;transform:scale(1)}}.overlay.status{background:#20160fc7;padding:1.5rem;font-size:1.05rem;font-weight:700}.overlay.status p{max-width:34ch;margin:0}.app--immersive .game-screen{position:absolute;inset:0}.app--immersive .video-wrap{box-shadow:none;border:none;border-radius:0;position:absolute;inset:0}.app--immersive .preview{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.shell--rotated .preview{width:100dvw;height:100dvh;inset:50% auto auto 50%;transform:translate(-50%,-50%)rotate(-90deg)scaleY(-1)}.shell--rotated.shell--flipped .preview{transform:translate(-50%,-50%)rotate(90deg)scaleY(-1)}.app--immersive .side-panel{padding:.75rem;padding-bottom:max(.75rem, env(safe-area-inset-bottom));justify-content:flex-end}.app--immersive .game-screen[data-phase=idle] .side-panel{padding-bottom:9.5rem}.app--immersive .side-emoji{border-width:2px;width:2.6rem;height:2.6rem;font-size:1.7rem}.app--immersive .side-name,.app--immersive .side-gesture-label,.app--immersive .side-placeholder{font-size:.8rem}.app{max-width:640px;min-height:100dvh;padding:calc(.75rem + env(safe-area-inset-top)) calc(.75rem + env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left));flex-direction:column;align-items:center;gap:.75rem;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:.5rem;width:100%;display:flex}.logo{letter-spacing:.03em;white-space:nowrap;align-items:center;gap:.3rem;margin:0;font-size:clamp(1rem,4.3vw,1.45rem);font-weight:800;display:flex}.logo-emoji{font-size:1.2em;display:inline-block;transform:rotate(-12deg)}.logo-emoji.flip{transform:rotate(12deg)scaleX(-1)}.header-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.mute-btn,.flip-btn{border-radius:999px;width:44px;height:44px;min-height:44px;padding:0;font-size:1.15rem;line-height:1}.lang-toggle{border:var(--border-ink);background:var(--white);box-shadow:var(--shadow-pop);border-radius:999px;flex-shrink:0;display:flex;overflow:hidden}.lang-btn{box-shadow:none;border:none;border-radius:0;min-height:44px;padding:.2rem .95rem;font-size:.85rem}.lang-btn:active:not(:disabled){box-shadow:none;transform:none}.lang-btn[aria-pressed=true]{background:var(--yellow)}@media (width>=900px){.app{max-width:960px;padding-top:2rem}.logo{font-size:2rem}}.shell--rotated{transform-origin:0 0;width:100dvh;height:100dvw;position:fixed;top:0;left:0;overflow:hidden;transform:rotate(90deg)translateY(-100%)}.shell--rotated.shell--flipped{transform:rotate(-90deg)translate(-100%)}.app--immersive{max-width:none;min-height:0;padding:0;position:absolute;inset:0;overflow:hidden}.app--immersive .app-header{top:max(.5rem, env(safe-area-inset-top));left:calc(.75rem + env(safe-area-inset-left));right:calc(.75rem + env(safe-area-inset-right));z-index:10;pointer-events:none;position:absolute}.shell--rotated .app-header{top:max(.5rem, env(safe-area-inset-right));left:calc(.75rem + env(safe-area-inset-top));right:calc(.75rem + env(safe-area-inset-bottom))}.shell--rotated.shell--flipped .app-header{top:max(.5rem, env(safe-area-inset-left));left:calc(.75rem + env(safe-area-inset-bottom));right:calc(.75rem + env(safe-area-inset-top))}.app--immersive .app-header .lang-toggle,.app--immersive .app-header .mute-btn,.app--immersive .app-header .flip-btn{pointer-events:auto}.app--immersive .logo{color:var(--white);text-shadow:0 1px 4px #0009;font-size:1.1rem}.app--immersive .lang-btn{min-height:36px;padding:.1rem .8rem}.app--immersive .mute-btn,.app--immersive .flip-btn{width:36px;height:36px;min-height:36px;font-size:1rem}.logo,.lang-toggle,.flip-btn{transition:opacity .25s,visibility linear}.app-header--quiet .logo,.app-header--quiet .lang-toggle,.app-header--quiet .flip-btn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s linear .25s}
