@charset "UTF-8";

:root{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#2a1a10;background:#1f3a5f;font-synthesis:none;font-weight:700;--cream:#f6ead2;--paper:#fff8ec;--navy:#1f3a5f;--wood:#b07a45;--red:#d9412b;--ink:#2a1a10;--ball-size:clamp(84px,24.5vw,106px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 18%,#365371 0,#1f3a5f 70%);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #d9412b;outline-offset:4px}button:disabled{cursor:default;opacity:.55}img{display:block;object-fit:contain;pointer-events:none}p,h1,h2{margin:0}strong,b{font-weight:900}[hidden]{display:none!important}
.app{position:relative;isolation:isolate;display:grid;grid-template-rows:62px 140px minmax(268px,1fr) 96px 46px;width:min(100%,460px);height:100vh;height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:max(8px,env(safe-area-inset-bottom,0px));background:var(--cream);box-shadow:0 0 70px #091b3450;overflow:hidden}
.app:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:repeating-linear-gradient(0deg,transparent 0 27px,#b07a4510 28px 29px)}
.topbar{position:relative;z-index:30;display:grid;grid-template-columns:65px minmax(0,1fr) 96px;align-items:center;padding:6px 12px;gap:8px}.time-card,.score-card{display:flex;flex-direction:column;align-items:flex-start;transition:opacity .2s}.hud-caption{font-size:10px;font-weight:800;letter-spacing:.12em;color:#776251}.time-card strong{display:flex;align-items:baseline;gap:3px;line-height:1.05;font-size:31px;font-variant-numeric:tabular-nums}.time-card small{font-size:11px}.time-card.is-urgent,.time-card.urgent,#time-value.urgent{color:var(--red)}.score-card{position:relative;align-items:center}.score-card>strong{font-size:29px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.best-caption{font-size:9px;color:#84715c;white-space:nowrap;margin-top:2px}.best-caption b{font-variant-numeric:tabular-nums}.top-controls{display:flex;align-items:center;justify-content:flex-end;gap:5px}.icon-button{height:44px;min-width:44px;background:#fff8ecde;border:1px solid #b07a4540;border-radius:13px;box-shadow:0 2px 0 #b07a4520;display:grid;place-items:center;font-weight:900}.icon-button:active{transform:translateY(1px)}.sound-toggle{font-size:10px;white-space:nowrap;padding:0 5px}.pause-button{font-size:21px;line-height:1;color:var(--navy)}
.stall-top{position:relative;min-height:0}.noren{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:3px;height:48px;margin:0 10px;filter:drop-shadow(0 3px 1px #1f3a5f18)}.noren span{display:flex;align-items:center;justify-content:center;background:var(--navy);border-radius:0 0 13px 13px;color:var(--paper);font-size:12px;font-weight:800;letter-spacing:.1em}.noren .noren-name{font-size:20px;letter-spacing:0}.noren span:before,.noren span:after{content:"";height:2px;background:#fff8ec33;width:7px;margin:0 4px}.soncho-card{position:absolute;right:16px;top:54px;bottom:auto;width:100px;height:110px;background:transparent;display:grid;place-items:center}.soncho-card img{width:100px;height:110px;max-width:100%;filter:drop-shadow(0 1px 0 #fff);transition:opacity .12s,transform .4s ease;animation:soncho-ready 2.4s ease-in-out infinite}.speech-wrap{position:absolute;left:20px;right:130px;top:54px;bottom:auto;display:flex;align-items:center;height:110px;max-width:calc(100% - 130px)}.speech{position:relative;font-size:15px;line-height:1.65;letter-spacing:.01em;text-wrap:balance}.speech:before{content:"";position:absolute;left:-9px;top:1px;bottom:1px;width:3px;background:var(--red);border-radius:2px}
.play-area{position:relative;display:flex;align-items:center;padding:9px 10px 12px;min-width:0;min-height:0}.griddle{position:relative;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(112px,1fr));gap:9px 4px;padding:17px 3px 10px;background:radial-gradient(ellipse at 45% 5%,#434345,#2b2b2e 64%);border:6px solid var(--wood);border-radius:25px;box-shadow:0 5px 0 #6e4320,0 8px 0 #4a2c141a,inset 0 2px 0 #ffffff16,inset 0 -4px 8px #0005;touch-action:none;user-select:none;-webkit-user-select:none}.griddle:before,.griddle:after{content:"";position:absolute;width:5px;height:5px;background:#634323;border-radius:50%;box-shadow:inset 1px 1px 1px #3e2815;top:5px;pointer-events:none}.griddle:before{left:6px}.griddle:after{right:6px}.griddle-corner{display:none}.hole{position:relative;display:flex;align-items:flex-start;justify-content:center;min-width:0;height:clamp(112px,29.7vw,134px);padding:0;background:none;isolation:isolate;touch-action:none;border-radius:20px;color:var(--paper)}.hole:before{content:"";position:absolute;left:50%;top:0;width:calc(var(--ball-size) + 5px);height:calc(var(--ball-size) + 5px);border-radius:50%;transform:translateX(-50%);background:#1a1a1c;box-shadow:inset 0 5px 8px #000c,0 1px 0 #ffffff19}.ball{position:relative;flex:none;display:block;width:var(--ball-size);height:var(--ball-size);border-radius:47% 50% 48% 49%;margin-top:2px;background:radial-gradient(ellipse at 35% 25%,#fff3cc 0%,#f3e3b5 43%,#d7ba7b 78%,#a87e3e 100%);box-shadow:inset 2px 3px 6px #fff9df91,inset -4px -7px 7px #9e6a2d30,0 3px 4px #0006;transition:background .3s,filter .3s,transform .18s;pointer-events:none;z-index:2}.ball:before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle at 30% 64%,#fff6d5 0 2px,transparent 3px),radial-gradient(circle at 62% 25%,#fff8e2 0 2px,transparent 3px),radial-gradient(circle at 70% 62%,#dfc98f 0 2px,transparent 3px),radial-gradient(circle at 42% 41%,#e8d4a2 0 1px,transparent 2px);opacity:.75}.ball:after{content:"";position:absolute;left:17%;top:12%;width:28%;height:14%;border-radius:50%;transform:rotate(-26deg);background:#fffbe580;filter:blur(1px)}.face{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:#8a4b1b;text-shadow:0 1px 0 #fff2;font-weight:900;z-index:3}.state-label{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.04em;white-space:nowrap;line-height:18px;padding:0 8px;border-radius:8px;background:#ffffff0d;color:#c9c0a9;font-weight:800;pointer-events:none}.steam{position:absolute;left:50%;top:-14px;transform:translateX(-50%);display:flex;gap:9px;height:30px;z-index:4;opacity:0;pointer-events:none}.steam i{display:block;width:4px;height:22px;border-left:2px solid #fff6d5;border-radius:50%;transform:rotate(8deg);animation:steam-up 1.6s ease-in-out infinite}.steam i:nth-child(2){height:28px;animation-delay:-.6s;transform:rotate(-8deg)}.steam i:nth-child(3){animation-delay:-1s}.warning-mark{display:none;position:absolute;top:-3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff8ec;z-index:6;font-size:17px;line-height:22px;font-weight:900;pointer-events:none}.skewer{display:none;position:absolute;top:12px;left:51%;height:70px;width:3px;background:linear-gradient(90deg,#f8e5a2,#b07a45);border-radius:1px;z-index:5;transform:rotate(35deg);transform-origin:bottom;pointer-events:none;box-shadow:1px 1px 1px #0004}.selection-number{display:none;position:absolute;left:3px;top:-5px;width:24px;height:24px;align-items:center;justify-content:center;border:2px solid var(--paper);border-radius:50%;background:var(--navy);color:white;box-shadow:0 1px 4px #0005;font-size:13px;font-variant-numeric:tabular-nums;z-index:7;pointer-events:none}
[data-doneness="ready"] .ball{background:radial-gradient(ellipse at 35% 25%,#ffecb2 0%,#f4cf77 36%,#e0a040 70%,#a95d21 100%);outline:2px solid #ffdda0;outline-offset:2px;box-shadow:0 0 0 6px #e0a04055,inset 2px 3px 6px #fff1bd70,inset -4px -7px 8px #9c471d55,0 4px 5px #0007;animation:ready-pulse 1.5s ease-in-out infinite}[data-doneness="ready"] .ball:before{background:radial-gradient(circle at 26% 65%,#a9642b 0 2px,transparent 3px),radial-gradient(circle at 66% 30%,#b4712b 0 3px,transparent 4px),radial-gradient(circle at 77% 61%,#ab6428 0 2px,transparent 3px),radial-gradient(circle at 41% 24%,#e3ad52 0 3px,transparent 4px);opacity:.55}[data-doneness="ready"] .steam{opacity:1}[data-doneness="ready"] .state-label{color:#ffdda0;background:#e0a04022}[data-doneness="near"] .ball{background:radial-gradient(ellipse at 34% 23%,#e8ba60,#b8692a 55%,#70391c 95%);outline:2px dashed #e8b87a;outline-offset:3px;box-shadow:inset 2px 3px 5px #ffe0a55c,inset -5px -7px 7px #5427187a,0 4px 5px #0007}[data-doneness="near"] .steam{opacity:.8;filter:brightness(.65)}[data-doneness="near"] .steam i:not(:nth-child(2)){display:none}[data-doneness="near"] .warning-mark{display:block}[data-doneness="near"] .state-label{color:#ffb99d;background:#d9412b25}[data-doneness="burnt"] .ball{background:radial-gradient(ellipse at 35% 25%,#73503a,#3a2a20 60%,#211712);box-shadow:inset 1px 2px 5px #af8a5e55,0 3px 4px #0008;animation:burnt-shake .3s linear infinite}[data-doneness="burnt"] .ball:before{inset:12%;opacity:.65;background:linear-gradient(115deg,transparent 0 38%,#1c1511 39% 41%,transparent 42%),linear-gradient(30deg,transparent 0 60%,#1c1511 61% 63%,transparent 64%)}[data-doneness="burnt"] .ball:after{opacity:.12}[data-doneness="burnt"] .face:before{content:"×";color:#f6c09b;font-size:37px}[data-doneness="burnt"] .state-label{color:#e5a48d}
.hole[data-stage="empty"] .ball,.hole[data-stage="empty"] .steam,.hole[data-stage="empty"] .state-label,.hole[data-stage="empty"] .warning-mark{opacity:0;transform:scale(.3)}.hole[data-stage="selected"] .ball,.hole.selected .ball{outline:3px solid #fff8ec;outline-offset:3px;animation:none;box-shadow:0 0 0 7px #d9412b90,inset 2px 3px 6px #fff1bd70,0 4px 5px #0007}.hole[data-stage="selected"] .skewer,.hole.selected .skewer{display:block}.hole[data-stage="selected"] .selection-number,.hole.selected .selection-number{display:flex}.hole[data-stage="selected"] .steam{opacity:0}.hole[data-stage="selected"] .warning-mark{display:none}.hole[data-stage="selected"] .state-label{background:#fff8ec;color:#613e28}.hole[data-stage="selected"][data-doneness="early"] .skewer{transform:rotate(60deg)}.hole[data-stage="selected"][data-doneness="early"] .face:before{content:"〜";color:#9b6b37;font-size:29px}.hole[data-stage="flipping"] .ball{animation:none}.hole[data-stage="flipping"] .steam,.hole[data-stage="finishing"] .steam{opacity:0}.hole[data-stage="finishing"] .ball{outline:0;background:radial-gradient(ellipse at 33% 22%,#e9b365,#b8692a 60%,#82431c);animation:finish-pop .25s ease-out both;box-shadow:inset 2px 3px 6px #fff1bd50,inset -4px -7px 8px #763c1f66,0 4px 5px #0007}.hole[data-stage="finishing"] .face:before{content:"◎";color:#ffe1a1;font-size:25px}.hole[data-stage="finishing"] .state-label{color:#dbb888}.hole[data-stage="finishing"] .warning-mark{display:none}
.combo-text{position:absolute;z-index:9;left:50%;top:5px;transform:translateX(-50%);min-width:0;padding:5px 13px;border:2px solid #fff8ec;border-radius:12px;background:var(--red);color:#fff8ec;text-align:center;font-weight:900;font-size:14px;box-shadow:0 3px 0 #932f20;pointer-events:none;white-space:nowrap;line-height:1.2}.combo-text:empty{display:none}
.boat-section{position:relative;display:flex;flex-direction:column;align-items:center;padding:3px 30px 8px;min-height:0}.boat-caption{display:flex;justify-content:space-between;width:min(100%,290px);font-size:10px;letter-spacing:.08em;color:#8d6a45;margin-bottom:4px}.boat-caption b{font-size:13px;font-variant-numeric:tabular-nums;color:#6e4320}.boat{position:relative;display:grid;grid-template-columns:repeat(6,1fr);align-items:center;justify-items:center;gap:3px;width:min(100%,310px);height:55px;flex:none;padding:9px 13px 13px;background:repeating-linear-gradient(4deg,#eacb8e 0 6px,#e4be79 7px,#eacb8e 9px);border:2px solid #c49b58;border-radius:9% 9% 37% 37%/35% 35% 65% 65%;box-shadow:inset 0 0 0 3px #f6dca5,0 3px 0 #b98d4c,0 5px 5px #b07a4522}.served-ball{position:relative;display:block;width:32px;height:31px;border-radius:47% 49% 45% 48%;background:radial-gradient(ellipse at 30% 22%,#eebd74,#c27831 60%,#8b471c);box-shadow:inset 1px 2px 2px #ffe0a47a,0 2px 2px #69391c66}.served-ball:before{content:"";position:absolute;inset:6px 3px 5px;border-radius:50%;background:repeating-linear-gradient(165deg,transparent 0 4px,#59301d 5px 8px,transparent 9px 12px);transform:rotate(-12deg)}.served-ball:after{content:"";position:absolute;inset:6px 5px;background:radial-gradient(ellipse at 25% 35%,#658149 0 2px,transparent 3px),radial-gradient(ellipse at 66% 60%,#729147 0 2px,transparent 3px),linear-gradient(22deg,transparent 38%,#efd1a6 40% 47%,transparent 50% 66%,#edbc80 67% 72%,transparent 76%)}.served-ball{opacity:0;transform:translateY(-8px) scale(.7);transition:opacity .15s,transform .25s cubic-bezier(.18,.83,.35,1.5)}.served-ball.filled,.served-ball.is-visible,.served-ball[data-filled="true"]{opacity:1;transform:translateY(0) scale(1)}.served-ball.failed,.served-ball.squashed{height:21px;align-self:end;transform:scaleX(1.1)}.gesture-hint{align-self:center;text-align:center;font-size:12px;line-height:1.6;font-weight:800;color:#6e5236;padding:0 8px}.gesture-hint span{font-size:10px;color:#8f775c}
.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:calc(58px + env(safe-area-inset-top,0px)) 24px max(15px,env(safe-area-inset-bottom,0px));background:var(--cream)}.screen:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,#fff8ecb3,transparent 65%),repeating-linear-gradient(0deg,transparent 0 27px,#b07a4508 28px 29px)}.app[data-mode="title"] .time-card,.app[data-mode="title"] .score-card,.app[data-mode="guide"] .time-card,.app[data-mode="guide"] .score-card,.app[data-mode="result"] .time-card,.app[data-mode="result"] .score-card{opacity:0;pointer-events:none}.title-content{width:100%;max-width:350px;text-align:center}.eyebrow{display:flex;justify-content:center;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#8c6541}.eyebrow>span{height:1px;width:20px;background:#b07a4570}.game-title{margin-top:13px;display:flex;flex-direction:column;align-items:center;line-height:1.05;transform:rotate(-3deg)}.game-title>span{font-size:clamp(36px,10.7vw,48px);font-weight:950;color:var(--navy);letter-spacing:-.05em;text-shadow:1px 3px 0 #fff8ec}.game-title>strong{display:block;font-size:clamp(52px,15.2vw,67px);font-weight:950;color:var(--red);letter-spacing:-.07em;text-shadow:0 4px 0 #fff8ec,0 6px 0 #b07a4530}.title-hero{position:relative;margin:18px auto 12px;width:220px;height:192px;display:flex;justify-content:center;align-items:flex-start}.title-hero:before{content:"";position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;background:#e5d1ad66;top:1px;left:25px}.title-soncho{width:170px;height:170px;filter:drop-shadow(0 1px 0 #fff);animation:soncho-celebrate .35s ease-out both}.hero-flourish{position:absolute;font-size:20px;color:#bd8b3d}.flourish-one{left:18px;top:33px;transform:rotate(-15deg)}.flourish-two{right:19px;top:88px;font-size:13px}.title-catch{font-size:18px;font-weight:900;letter-spacing:.06em;margin-top:15px}.title-description{font-size:12px;color:#8c6b49;line-height:1.6;margin:9px 0 23px}.title-description b{color:#6e4320}.primary-button{display:flex;align-items:center;justify-content:center;position:relative;width:100%;min-height:56px;background:var(--red);color:#fff8ec;border:1px solid #c13926;border-radius:16px;box-shadow:0 4px 0 #9f3324,0 7px 13px #b07a4526;font-weight:900;font-size:17px;letter-spacing:.04em;padding:13px 35px;transition:transform .12s,box-shadow .12s}.primary-button>span{position:absolute;right:19px;font-size:20px}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #9f3324,0 3px 6px #b07a4526}.text-button{background:none;min-height:44px;padding:9px 20px;font-size:12px;color:#785635;text-decoration:underline;text-underline-offset:5px}.title-content .text-button{margin-top:8px}.small-note{font-size:10px;color:#a08566;letter-spacing:.03em}.screen-noren{position:absolute;left:0;right:0;top:0;height:10px;display:flex;gap:3px;z-index:-1}.screen-noren i{flex:1;border-radius:0 0 10px 10px;background:var(--navy)}
.dialog{width:100%;max-width:350px;text-align:center}.dialog h2{font-weight:950;line-height:1.45;font-size:30px;letter-spacing:.02em;color:var(--navy);margin:12px 0 20px}.guide-dialog h2{font-size:34px;line-height:1.35}.guide-states{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:30px -5px 26px}.guide-state{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:11px;color:#846346}.sample-hole{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:#2b2b2e;border-radius:50%;--ball-size:65px;box-shadow:inset 0 4px 8px #0009}.sample-hole .ball{margin:0}.sample-hole .steam{top:-15px}.sample-hole .warning-mark{right:-4px;top:-4px}.guide-main-copy{font-size:15px;line-height:1.9}.guide-main-copy strong{color:var(--red);font-size:20px}.guide-detail{font-size:11px;line-height:1.9;color:#8a7052;margin:15px 0 26px}.translucent-screen{background:#1f3a5f75;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.translucent-screen:before{display:none}.pause-dialog{padding:25px 22px 29px;background:var(--paper);border:1px solid #ffffffc0;border-radius:27px;box-shadow:0 15px 40px #0b19394a}.dialog-soncho{height:115px;width:auto;margin:0 auto 17px}.pause-dialog h2{font-size:28px;margin:8px 0 12px}.dialog-description{font-size:11px;color:#8a7052;margin-bottom:24px}.result-dialog h2{font-size:28px;margin:8px 0 6px}.result-hero{position:relative;width:240px;height:175px;margin:0 auto 5px}.result-soncho{position:absolute;left:25px;bottom:0;width:170px;height:170px;filter:drop-shadow(0 1px 0 #fff)}.result-stamp{position:absolute;right:0;top:20px;width:60px;height:60px;border:2px solid #c87652;border-radius:50%;display:grid;place-content:center;color:#bb6945;font-size:10px;line-height:1.3;transform:rotate(12deg)}.result-message{color:#836142;font-size:12px;min-height:19px}.result-score-block{margin:15px 0 14px}.result-score-block>.hud-caption{display:block;font-size:11px}.result-score-block>strong{display:block;font-size:58px;line-height:1.1;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--navy)}.result-score-block>p{font-size:11px;margin-top:5px;color:#967650}.result-score-block>p b{margin-left:5px;font-variant-numeric:tabular-nums}.result-stats{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 25px;padding:13px 0;background:#fff8ec9c;border-top:1px solid #b07a4535;border-bottom:1px solid #b07a4535}.result-stats>div+div{border-left:1px solid #b07a4535}.result-stats span{display:block;font-size:10px;color:#93704c;margin-bottom:4px}.result-stats strong{font-size:25px;color:#6e4320;font-variant-numeric:tabular-nums}.result-stats small{font-size:11px;margin-left:4px}.result-dialog .text-button{margin-top:9px}
@keyframes soncho-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes steam-up{0%,100%{opacity:.3;translate:0 3px}50%{opacity:.8;translate:0 -4px}}@keyframes ready-pulse{0%,100%{outline-offset:2px}50%{outline-offset:4px}}@keyframes burnt-shake{0%,100%{translate:0 0}33%{translate:-.7px 0}66%{translate:.7px 0}}@keyframes finish-pop{0%{transform:scale(.86,1.05)}70%{transform:scale(1.06,.94)}100%{transform:scale(1)}}@keyframes combo-pop{0%{transform:translate(-50%,-50%) rotate(-4deg) scale(.75);opacity:0}75%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.08)}100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:1}}
@media(max-height:740px){.app{grid-template-rows:58px 108px minmax(258px,1fr) 88px 40px}.noren{height:38px}.noren .noren-name{font-size:17px}.noren span{font-size:10px}.soncho-card{height:110px;width:100px;right:16px;top:44px;bottom:auto}.soncho-card img{height:110px}.speech-wrap{right:130px;top:44px;bottom:auto;left:21px}.speech{font-size:13px}.boat-section{padding-top:0}.title-hero{height:153px;width:206px;margin:13px auto 5px}.title-hero:before{width:143px;height:143px;left:31px}.title-soncho{width:140px;height:140px}.title-catch{font-size:16px;margin-top:13px}.title-description{margin:7px 0 17px}.game-title>span{font-size:clamp(35px,9.8vw,44px)}.game-title>strong{font-size:clamp(49px,14.6vw,63px)}.title-content .text-button{margin-top:5px}.result-hero{height:136px}.result-soncho{width:132px;height:132px;left:42px}.result-stamp{width:51px;height:51px;right:13px;font-size:9px}.result-dialog h2{font-size:25px}.result-score-block{margin:10px 0}.result-score-block>strong{font-size:51px}.result-stats{margin:13px 0 19px;padding:10px 0}.guide-dialog h2{font-size:30px;margin-bottom:14px}.guide-states{margin:23px -5px 19px}.guide-detail{margin:10px 0 20px}}
@media(max-height:600px){.app{grid-template-rows:64px 28px minmax(252px,1fr) 80px 40px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}.topbar{grid-template-columns:55px minmax(0,1fr) 92px;gap:5px;padding-inline:10px}.time-card strong{font-size:27px}.score-card{padding-left:50px}.score-card>strong{font-size:24px}.top-controls{gap:4px}.noren{display:none}.soncho-card{top:-61px;bottom:auto;left:66px;right:auto;width:56px;height:56px;background:transparent;box-shadow:none;border-radius:0}.soncho-card img{width:56px;height:56px;max-width:100%}.speech-wrap{position:static;display:block;min-height:0;max-width:none;height:28px;text-align:center;margin:0 14px;background:#fff8ec91;border-radius:8px}.speech{line-height:28px;font-size:11px;white-space:nowrap}.speech:before{display:none}.play-area{padding-top:7px;padding-bottom:11px}.griddle{grid-template-rows:repeat(2,110px);padding-top:13px;padding-bottom:8px;gap:8px 4px;border-radius:22px}.hole{height:110px;--ball-size:84px}.state-label{font-size:9px;line-height:17px}.boat-section{padding-inline:30px}.boat-caption{margin-bottom:3px;font-size:9px}.boat{height:48px}.served-ball{width:29px;height:28px}.gesture-hint{font-size:11px;line-height:1.5}.gesture-hint span{font-size:9px}.screen{padding:52px 24px max(10px,env(safe-area-inset-bottom,0px))}.eyebrow{font-size:10px}.game-title{margin-top:8px}.game-title>span{font-size:34px}.game-title>strong{font-size:49px}.title-hero{height:134px;margin:9px auto 4px}.title-soncho{width:122px;height:122px}.title-hero:before{width:123px;height:123px;left:42px}.title-catch{font-size:15px;margin-top:9px}.title-description{font-size:11px;margin:5px 0 13px}.primary-button{min-height:52px;font-size:15px;border-radius:14px}.title-content .text-button{margin-top:2px;min-height:44px}.small-note{font-size:9px}.guide-dialog h2{font-size:27px;margin:8px 0 12px}.guide-states{margin:19px -5px 16px}.guide-state{gap:8px}.sample-hole{width:72px;height:72px;--ball-size:59px}.guide-main-copy{font-size:13px}.guide-main-copy strong{font-size:18px}.guide-detail{font-size:10px;margin:8px 0 18px}.result-dialog h2{font-size:24px;margin:6px 0}.result-hero{height:96px}.result-soncho{width:92px;height:92px;left:62px}.result-stamp{right:19px;top:15px;width:46px;height:46px}.result-message{font-size:10px;min-height:15px}.result-score-block{margin:9px 0}.result-score-block>strong{font-size:44px}.result-stats{margin:12px 0 17px;padding:8px 0}.result-stats strong{font-size:22px}.result-stats span{font-size:9px}.result-dialog .text-button{margin-top:4px}.dialog-soncho{height:92px}.pause-dialog{padding:20px}.pause-dialog h2{font-size:24px}}
@media(min-width:461px){.app{border-left:1px solid #fff8ec30;border-right:1px solid #fff8ec30}.hole{--ball-size:106px}.griddle{gap:13px 5px;padding-top:22px;padding-bottom:14px}.hole{height:134px}.title-hero{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.translucent-screen{backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Game state comes from the deterministic game controller. */
.app[data-urgent="true"] .time-card{color:var(--red)}
.served-ball[data-doneness="early"]{height:19px;align-self:end;transform:scaleX(1.1);border-radius:45% 48% 38% 40%;background:radial-gradient(ellipse at 30% 22%,#fff3cc,#e2c68b 70%,#ba8d4c);box-shadow:inset 1px 2px 2px #fff6d5aa,0 2px 2px #69391c55}
.served-ball[data-doneness="early"]:before{inset:3px 5px;background:radial-gradient(ellipse at 30% 35%,#fff8de 0 2px,transparent 3px),radial-gradient(ellipse at 70% 65%,#c8a56a 0 1px,transparent 2px)}
.served-ball[data-doneness="early"]:after{opacity:0}
.served-ball[data-doneness="burnt"]{background:radial-gradient(ellipse at 30% 22%,#73503a,#3a2a20 60%,#211712);box-shadow:inset 1px 2px 2px #af8a5e55,0 2px 2px #27190e88}
.served-ball[data-doneness="burnt"]:before{inset:4px 3px;background:linear-gradient(115deg,transparent 0 38%,#17100d 39% 44%,transparent 45%),linear-gradient(30deg,transparent 0 60%,#17100d 61% 66%,transparent 67%);transform:none}
.served-ball[data-doneness="burnt"]:after{content:"×";inset:0;display:grid;place-items:center;background:none;color:#e6b28c;font-size:15px;font-weight:900}

/* Dedicated Soncho artwork follows Claude's pose and layout specifications. */
.soncho-card img[src*="-funamori."]{animation:soncho-celebrate .35s ease-out both}
.soncho-card img[src*="-shonbori."]{animation:soncho-shonbori .25s ease-out both}
@keyframes soncho-ready{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes soncho-celebrate{0%{transform:scale(.9)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes soncho-shonbori{from{transform:translateY(0) rotate(0)}to{transform:translateY(3px) rotate(-3deg)}}
#orientation-screen{display:none}
/* Feedback follows the real selection, flip and serve events. */
.combo-text[data-kind="preview"]{background:var(--navy);box-shadow:0 3px 0 #132a48}
.combo-text[data-kind="progress"]{background:#ad622e;box-shadow:0 3px 0 #75411e}
.combo-text[data-kind="invalid"]{background:#6f706a;box-shadow:0 3px 0 #4c4c48;font-size:12px}
.griddle[data-invalid="true"] .hole[data-stage="selected"] .selection-number{background:#6f706a}
.griddle[data-invalid="true"] .hole[data-stage="selected"] .ball{box-shadow:0 0 0 7px #8c8e8290,inset 2px 3px 6px #fff1bd70,0 4px 5px #0007}
.flip-vapor{position:absolute;top:7px;z-index:8;pointer-events:none;width:7px;height:23px;border-left:3px solid #fff6d5;border-radius:50%;opacity:0}
.flip-vapor[data-burnt="true"]{border-color:#b7aaa1;width:12px;height:29px}
.hole[data-stage="flipping"][data-flipped="true"][data-doneness="ready"] .ball,.hole[data-stage="flipping"][data-flipped="true"][data-doneness="near"] .ball{background:radial-gradient(ellipse at 33% 22%,#ffe2a1,#c78131 55%,#8e4820);outline:0;animation:none}
.hole[data-stage="finishing"][data-doneness="early"] .ball{background:radial-gradient(ellipse at 35% 25%,#fff3cc,#e6cc96 68%,#bd9356);animation:none;border-radius:48% 48% 42% 43%}
.hole[data-stage="finishing"][data-doneness="early"] .face:before{content:"〜";color:#aa8050}
.hole[data-stage="finishing"][data-doneness="burnt"] .ball{background:radial-gradient(ellipse at 35% 25%,#73503a,#3a2a20 60%,#211712);animation:none;box-shadow:inset 1px 2px 5px #af8a5e55,0 3px 4px #0008}
.hole[data-stage="finishing"][data-doneness="burnt"] .face:before{content:"×";color:#f6c09b}
.result-next{font-size:12px;line-height:1.5;color:var(--navy);margin:-10px 0 13px;font-weight:900}
.result-stamp{white-space:pre-line;pointer-events:none}
@media(max-height:600px){.result-stats{margin-bottom:13px}.result-next{font-size:10px;margin:-4px 0 10px}.combo-text{padding:5px 9px;font-size:13px}.combo-text[data-kind="invalid"]{font-size:11px}}
@media(orientation:landscape) and (max-height:500px){
  #app{visibility:hidden;pointer-events:none}
  #app *{pointer-events:none!important}
  #orientation-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at 50% 40%,#fff8ec,var(--cream));color:#8c6541;font-size:12px;text-align:center;touch-action:none}
  .orientation-heading{font-size:25px;font-weight:900;letter-spacing:.08em;color:var(--navy)}
  .orientation-phone{position:relative;width:46px;height:78px;margin-bottom:6px;border:3px solid var(--navy);border-radius:11px;background:var(--paper);box-shadow:3px 4px 0 #b07a4525}
  .orientation-phone:before{content:"";position:absolute;top:5px;left:14px;width:12px;height:3px;border-radius:2px;background:var(--navy)}
  .orientation-phone:after{content:"";position:absolute;bottom:5px;left:16px;width:8px;height:3px;border-radius:2px;background:#1f3a5f55}
  .orientation-phone span{position:absolute;left:7px;top:25px;width:6px;height:6px;background:#d49a42;border-radius:50%;box-shadow:10px 0 #d49a42,20px 0 #d49a42,0 11px #d49a42,10px 11px #d49a42,20px 11px #d49a42}
}