* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05070a; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; touch-action: none; }
#app { position: relative; width: 100vw; height: 100vh; height: 100dvh; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

#hud { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; pointer-events: none; z-index: 5; }
.hud-item { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 10px; background: rgba(0,0,0,0.4); border-radius: 12px; backdrop-filter: blur(4px); }
.hud-item .label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #b9f5cd; opacity: 0.85; }
.hud-item span:last-child { font-size: 19px; font-weight: 800; color: #fff; }

#hint { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 5; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #06301a; background: linear-gradient(180deg, #b9ffd4, #6dffa4); border-radius: 22px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); text-align: center; max-width: 92%; }
#hint.hidden { display: none; }

#banner { position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%) scale(1); font-size: 46px; font-weight: 900; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.8); pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 6; white-space: nowrap; }
#banner.hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
#banner.goal { color: #ffe14d; } #banner.miss { color: #ff7a7a; } #banner.save { color: #79c0ff; }

#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b9f5cd; font-size: 18px; font-weight: 700; z-index: 8; background: #0a1d13; }
#loading.hidden { display: none; }

.chip { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 6; padding: 9px 14px; font-size: 14px; font-weight: 800; color: #eafff0; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.15); border-radius: 22px; cursor: pointer; }
.chip:active { transform: scale(0.94); } .chip.hidden { display: none; }

#setpiece { position: absolute; inset: 0; z-index: 22; display: flex; flex-direction: column; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; background: linear-gradient(160deg, #0e2a1a, #071510); color: #eafff0; overflow: hidden; }
#setpiece.hidden { display: none; }
#setpiece h2 { font-size: 19px; font-weight: 900; }
#sp-types { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sp-type { padding: 7px 12px; font-size: 13px; font-weight: 700; color: #eafff0; background: rgba(255,255,255,0.08); border: 2px solid transparent; border-radius: 20px; cursor: pointer; }
.sp-type.sel { border-color: #6dffa4; background: rgba(109,255,164,0.16); color: #fff; }
.sp-type:active { transform: scale(0.96); }
#sp-canvas { flex: 1 1 0; min-height: 0; width: 100%; max-width: 460px; touch-action: none; border-radius: 14px; }
#sp-info { font-size: 15px; font-weight: 800; color: #06301a; background: linear-gradient(180deg, #b9ffd4, #6dffa4); padding: 7px 16px; border-radius: 20px; }
#sp-play { flex: none; padding: 13px 48px; font-size: 19px; font-weight: 800; color: #06301a; background: linear-gradient(180deg, #6dffa4, #23c46a); border: none; border-radius: 40px; cursor: pointer; box-shadow: 0 8px 24px rgba(35,196,106,0.4); }
#sp-info { flex: none; }
#sp-play:active { transform: scale(0.96); }

#start-screen { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: linear-gradient(160deg, rgba(10,40,22,0.92), rgba(6,20,12,0.97)); text-align: center; color: #eafff0; }
#start-screen.hidden { display: none; }
#start-screen h1 { font-size: 46px; font-weight: 900; letter-spacing: 1px; }
.tag { font-size: 14px; opacity: 0.85; }
#start-btn { padding: 15px 50px; font-size: 21px; font-weight: 800; color: #06301a; background: linear-gradient(180deg, #6dffa4, #23c46a); border: none; border-radius: 40px; cursor: pointer; box-shadow: 0 8px 24px rgba(35,196,106,0.4); }
#start-btn:active { transform: scale(0.95); }
#ident-row { display: flex; gap: 8px; }
#name-input { width: 190px; padding: 13px 16px; font-size: 17px; text-align: center; color: #06301a; background: #eafff0; border: none; border-radius: 14px; font-weight: 700; }
#num-input { width: 64px; padding: 13px 8px; font-size: 17px; text-align: center; color: #06301a; background: #eafff0; border: none; border-radius: 14px; font-weight: 800; }
#name-input::placeholder, #num-input::placeholder { color: #6a8f79; font-weight: 500; font-size: 14px; }
.kit-label { font-size: 12px; color: #b9f5cd; opacity: 0.85; margin-top: 2px; }
.kit-row { display: flex; gap: 10px; }
.kit { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); cursor: pointer; }
.kit.sel { border-color: #6dffa4; transform: scale(1.12); }
#best-line { color: #ffe14d; font-weight: 700; min-height: 16px; }
.hint2 { font-size: 12px; opacity: 0.6; max-width: 300px; line-height: 1.45; }