:root{font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#243c3c;background:#f2eddf;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:3px solid #136f69;outline-offset:4px}button:disabled{cursor:default;opacity:.5}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#game{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom;background:radial-gradient(ellipse at 50% 25%,#fffdf2,#e5e5d4)}
#game,#game *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#game [data-selectable],#game [data-selectable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
#scene{display:block;width:100%;height:100%;outline:0;touch-action:pinch-zoom}
.topbar,.hud,.bottom{position:absolute;z-index:2;pointer-events:none;width:min(100%,680px);left:50%;transform:translateX(-50%);padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.topbar{top:max(16px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand span{font-size:17px;font-weight:850;letter-spacing:-.6px}.brand strong{font-size:12px;border-left:1px solid #7c939355;padding-left:12px;color:#64706a}.top-actions{display:flex;gap:8px}.icon-button{pointer-events:auto;border:1px solid #ffffffa0;border-radius:50%;background:#fff9;width:42px;height:42px;box-shadow:0 3px 14px #33423509;font-size:22px;font-weight:700}
.hud{top:calc(max(16px,env(safe-area-inset-top)) + 65px);display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:#75817a}h1{font-size:clamp(18px,4.6vw,25px);margin:8px 0 0;letter-spacing:.015em}.target-counter{display:grid;grid-template-columns:24px 25px;align-items:center;column-gap:6px;background:#fff9;padding:9px 13px;border-radius:16px}.target-symbol{font-size:20px;color:#e56c55}.target-counter strong{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}.target-counter small{grid-column:1/3;text-align:center;margin-top:4px;font-size:9px;letter-spacing:2px;color:#738078}
.bottom{bottom:max(17px,env(safe-area-inset-bottom));text-align:center}.status{display:inline-block;max-width:100%;font-size:12px;line-height:1.5;padding:8px 14px;background:#ffffffe0;border-radius:999px;box-shadow:0 4px 20px #37483306;min-height:34px;letter-spacing:.02em}.shot-row{height:53px;display:flex;align-items:center;justify-content:center;gap:12px}.shot-row .eyebrow{letter-spacing:1px;font-size:9px}#balls{display:flex;gap:9px}#balls i{display:block;width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffe997,#ebbc43 68%);box-shadow:0 3px 4px #6f65371c,inset 0 -2px 2px #b8891926;transition:opacity .15s,transform .15s}#balls i.used{background:#bcc7bc66;box-shadow:inset 0 1px 3px #52675a18;transform:scale(.72)}#shot-number{font-size:9px;letter-spacing:1px;color:#75817a;font-variant-numeric:tabular-nums;min-width:49px}.bottom-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.retry-button{pointer-events:auto;background:#fff9;border:1px solid #ffffffa0;min-height:46px;padding:0 16px;border-radius:16px;font-size:12px;font-weight:700}.retry-button>span[aria-hidden]{font-size:23px;vertical-align:-2px;margin-right:3px}
.result-button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:48px;padding:0 12px;border:0;border-radius:16px;background:#2c5751;color:#fff9e6;font-size:13px;font-weight:750;line-height:1;white-space:nowrap}.result-button svg{display:block;flex:none}.panel-close{position:absolute;top:10px;right:10px;width:36px;height:36px;font-size:24px}
dialog{position:fixed;width:min(350px,calc(100vw - 36px));max-height:calc(100dvh - 36px);padding:0;border:1px solid #fff;border-radius:28px;color:#243c3c;background:#fffcf3;box-shadow:0 25px 90px #253e3e30;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#243c3c25;backdrop-filter:blur(3px)}.dialog-content{padding:29px 24px 21px;text-align:center}#panel-tag{font-size:9px}#panel-icon{font-size:23px;letter-spacing:10px;color:#e4b949;margin:24px 0 17px;padding-left:10px}#panel-icon span{color:#e77962}h2{font-size:23px;line-height:1.4;letter-spacing:-.5px;margin:0 0 15px}#panel-copy{font-size:12px;line-height:1.9;margin:0;color:#566761}#panel-detail{font-size:11px;color:#697973;margin:12px 0 23px;line-height:1.8}.primary-button,.secondary-button{display:block;width:100%;border:0;min-height:48px;border-radius:15px;font-weight:750;font-size:14px}.primary-button{background:#2c5751;color:#fff9e6;box-shadow:0 4px 0 #1f403d}.secondary-button{background:transparent;font-size:12px;margin-top:10px;min-height:40px}#keyboard-tip{display:block;font-size:9px;line-height:1.7;color:#859089;margin-top:19px}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#f2eddf;z-index:5;font-size:13px}#celebrate{position:absolute;top:23%;left:0;width:100%;text-align:center;pointer-events:none;font-size:30px;font-weight:850;color:#305650;opacity:0;transition:opacity .15s,transform .25s;transform:translateY(8px)}#celebrate.visible{opacity:1;transform:translateY(0)}
@media(max-height:600px){.topbar{top:max(9px,env(safe-area-inset-top))}.hud{top:calc(max(9px,env(safe-area-inset-top)) + 49px)}.icon-button{width:36px;height:36px}.bottom{bottom:max(9px,env(safe-area-inset-bottom))}.shot-row{height:39px}.status{padding:5px 12px;font-size:11px;min-height:27px}.dialog-content{padding:20px}#panel-icon{margin:14px 0}#panel-detail{margin:8px 0 17px}.bottom-actions{gap:8px}h1{margin-top:5px}.hud .target-counter{padding:6px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


.stage-select{display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:132px;padding:0 15px;border:1px solid #ffffffa0;border-radius:16px;background:#fff9;color:#294f4e;pointer-events:auto;text-align:left;flex-shrink:0}.stage-select svg{flex:none}.stage-select span{font-size:12px;font-weight:750;line-height:1.2}.stage-select small{display:block;font-size:10px;letter-spacing:1px;font-weight:500;margin-top:3px;color:#687f73}
#save-warning{display:block;max-width:190px;font-size:10px;line-height:1.5;color:#956047;margin-top:6px}
dialog.stage-selection{width:min(370px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:hidden;border-radius:24px}
#stage-picker{display:flex;flex-direction:column;max-height:calc(100dvh - 30px);padding:22px 18px 16px;text-align:center;gap:12px}.picker-heading h2{font-size:20px;margin:6px 0 5px}.picker-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.picker-heading p{font-size:11px;color:#697973;margin:0;font-variant-numeric:tabular-nums}
#stage-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex-shrink:0}#stage-pages button{min-width:0;min-height:44px;border:0;border-radius:12px;background:#e9ece2;color:#64796d;font-size:12px;letter-spacing:1px;font-weight:700}#stage-pages button[aria-current]{background:#294f4e;color:#fff9e8}
#stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;overflow:auto;overscroll-behavior:contain;min-height:0;padding:3px;touch-action:pan-y pinch-zoom}.stage-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:54px;border:1px solid #dfe3d5;border-radius:12px;background:#f3f3e9;color:#547064}.stage-tile strong{font-size:16px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}.stage-tile span{font-size:10px;line-height:1;letter-spacing:1px;color:#a9b1a2}.stage-tile.cleared{background:#e8eee0}.stage-tile.cleared span{color:#a77e24}.stage-tile[aria-current]{border-color:#345e53;box-shadow:0 0 0 1px #345e53}.stage-tile:focus-visible,#stage-pages button:focus-visible{outline:2px solid #c39127;outline-offset:1px}
#stage-current{font-size:11px;color:#526e61;line-height:1.4;margin:0;flex-shrink:0}#save-status{font-size:9px;line-height:1.4;color:#7d8779;margin-top:-5px;flex-shrink:0}

.hud>div:first-child{min-width:0;flex:1;padding-right:12px}.hud h1{overflow-wrap:anywhere}.target-counter{flex-shrink:0}

.top-actions .icon-button{width:44px;height:44px}.icon-button svg{display:block;margin:auto}
.settings-link{display:block;margin:10px auto 0;min-height:44px;min-width:100px;padding:0 20px;border:0;border-radius:12px;background:#edf0e6;color:#526e61;font-size:12px;font-weight:700}
.settings-content{padding:26px 24px 24px}.settings-content>.eyebrow{text-align:center;font-size:8px;letter-spacing:1.4px;margin:0 0 10px}.settings-content h2{text-align:center;margin-bottom:24px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;border-top:1px solid #dfe3d5}.setting-row>span{font-size:12px;font-weight:650}.setting-options{display:flex;gap:6px}.setting-row button{min-width:70px;min-height:44px;padding:0 10px;border:1px solid #dfe3d5;border-radius:12px;background:#f3f3e9;font-size:12px}.setting-row button[aria-pressed="true"]{background:#e0ebe1;border-color:#6d8a77;font-weight:750}
#settings-save-status{font-size:11px;line-height:1.6;text-align:center;color:#697973;margin:12px 0 22px}#settings-save-status.warning{color:#956047}
@media(max-height:600px){.dialog-content{padding:18px 20px}#panel-icon{margin:10px 0}#keyboard-tip{margin-top:10px}.settings-content{padding:22px 20px}}