*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;background:#eee2c6;color:#243c45;overscroll-behavior:none}button{font:inherit;cursor:pointer;border:0;color:inherit;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:4px solid #e96e47;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button:active:not(:disabled){transform:translateY(3px);box-shadow:none}#app{height:100dvh;max-width:800px;margin:auto;display:flex;flex-direction:column;background:#fbf2dd;position:relative;box-shadow:0 0 90px #5f715022}header{height:65px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 21px 7px;border-bottom:2px solid #243c4512;z-index:2}h1{font-size:clamp(21px,4.8vw,30px);font-weight:900;letter-spacing:-.065em;margin:0;white-space:nowrap;color:#e86c46}h1 span{color:#219e93;margin-right:3px}.head-controls{display:flex;gap:8px}.head-controls button{width:44px;height:44px;position:relative;border-radius:50%;background:#fff9eb;border:2px solid #243c45;font-size:21px;font-weight:800}.head-controls button .slash{position:absolute;left:18px;top:7px;width:2px;height:22px;background:#243c45;transform:rotate(40deg)}.head-controls button[aria-pressed=true] .slash{display:none}#arena{position:relative;min-height:0;flex:1;overflow:hidden;background:#f6e8c8}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}footer{height:111px;flex-shrink:0;padding:8px 18px max(10px,env(safe-area-inset-bottom));background:#fcf5e5;border-top:2px solid #243c4520;z-index:2;display:flex;align-items:center;justify-content:center}footer>div{width:min(100%,510px)}.hint{font-size:16px;font-weight:700;margin:0 0 8px;text-align:center;letter-spacing:.035em}.hint span{color:#ec784e}#lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}#lanes button{font-size:26px;font-weight:900;background:#fffdf1;border:2.5px solid #263e48;border-radius:13px;height:48px;box-shadow:0 4px 0 #263e48}#lanes button:hover{background:#a6e7d9}#lanes button:nth-child(2){background:#ffe2af}#lanes button:nth-child(3){background:#d9d5f2}#lanes button:nth-child(4){background:#ffd4c2}.ammo-label{display:flex;align-items:center;justify-content:center;height:49px;gap:14px}#ammo{display:flex;gap:9px;align-items:center}.ammo-item{font-size:27px;filter:drop-shadow(0 2px 0 #243c4530);transition:opacity .15s,transform .15s}.ammo-item.used{opacity:.15;transform:scale(.76)}#hit-label{font-size:15px;font-weight:800;color:#1e9288}#play-controls .hint{margin:4px 0 0;font-size:15px;color:#526b6e}#finish-hint{margin:0}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:#163c4538;backdrop-filter:blur(3px);z-index:5}.overlay[hidden],[hidden]{display:none!important}.result-card,.pause-card{background:#fff8e7;border:3px solid #243c45;border-radius:25px;padding:25px 28px 28px;width:min(100%,330px);text-align:center;box-shadow:7px 8px 0 #243c45;animation:pop .3s cubic-bezier(.2,1.8,.4,1)}#result-icon{font-size:56px;color:#edb935;line-height:1.1;text-shadow:2px 3px #243c45;margin-bottom:10px}.result-card h2,.pause-card h2{font-size:32px;line-height:1.25;margin:0 0 10px;letter-spacing:-.04em}.result-card p{font-size:17px;line-height:1.5;margin:0 0 22px;color:#577071;font-weight:700}.result-card button,.pause-card button{min-height:52px;border:2px solid #243c45;border-radius:12px;background:#39beb0;font-size:19px;font-weight:800;padding:9px 20px;width:100%;box-shadow:0 4px #243c45}.pause-card .quiet{background:transparent;box-shadow:none;margin-top:16px;font-size:15px;border:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@media(max-height:680px){header{height:52px;padding-top:5px}.head-controls button{height:33px;width:33px;font-size:18px}footer{height:91px;padding-top:5px;padding-bottom:8px}.hint{font-size:14px;margin-bottom:5px}#lanes button{height:39px;font-size:23px}.ammo-label{height:38px}.ammo-item{font-size:24px}.result-card{padding:18px 24px}#result-icon{font-size:40px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#reload{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;border-radius:50%;width:34px;height:34px;background:conic-gradient(#2faf9f var(--charge),#e4dcc6 0);box-shadow:inset 0 0 0 6px #ffffffaa;flex-shrink:0}

#ammo{font-size:32px;gap:8px}#ammo b{font-size:38px;line-height:1;color:#219e93}.ammo-label{height:47px}

/* Keep repeated taps and long presses on game controls out of browser selection UI.
   Reading text and native fields outside the play area retain browser gestures. */
button{touch-action:manipulation}
[data-touch-guard]{touch-action:manipulation}
button,button *,[data-touch-guard],[data-touch-guard] *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
[data-touch-guard] input,[data-touch-guard] textarea,[data-touch-guard] select,[data-touch-guard] [contenteditable]:not([contenteditable="false"]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

.result-card h2{margin-bottom:22px}

/* Leave the board room to breathe once the lane is chosen. */
#app[data-phase="run"] footer,#app[data-phase="result"] footer{height:40px;padding-top:5px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
#app[data-phase="run"] #play-controls .hint{margin:0}

/* The semantic start button follows the Canvas card exactly; Canvas owns its visible lettering. */
#start{position:absolute;background:transparent;border-radius:14px;padding:0;z-index:4}
#start:active{transform:none;box-shadow:inset 0 0 0 3px #ffffff70}
#app[data-phase="intro"] footer{display:none}