* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b2a5c; color: #fff;
  font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif; -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
b { font-weight: 800; }

/* ── HUD ── */
#hud { position: fixed; inset: 0; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
#pipFrame { position: absolute; border: 2px solid rgba(255,255,255,.85); border-radius: 6px; pointer-events: auto; cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#pipFrame span { position: absolute; left: 6px; top: 4px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 4px; }
#pipFrame .key { left: auto; right: 6px; opacity: .8; font-weight: 500; }
#stats { position: absolute; left: 14px; top: calc(12px + min(30vw, 440px) * .6 + 12px); background: rgba(6,18,38,.45);
  border-radius: 10px; padding: 8px 14px 10px; min-width: 170px; }
body.pip-off #stats { top: 12px; }
#stats .big { font-size: 38px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
#stats .big small { font-size: 16px; margin-left: 4px; opacity: .8; }
#stats .row { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-variant-numeric: tabular-nums; }
#stats .row span { width: 34px; opacity: .75; }
#stats .row b { font-size: 18px; min-width: 40px; text-align: right; }
#stats .row small { opacity: .7; }
#top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); text-align: center; }
#timer { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
#goalDist { font-size: 15px; background: rgba(6,18,38,.45); padding: 3px 12px; border-radius: 99px; margin-top: 2px; font-variant-numeric: tabular-nums; }
#goalDist.in { background: #ffd23a; color: #3a2a00; text-shadow: none; font-weight: 800; }
#feed { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msg { background: rgba(6,18,38,.6); padding: 4px 14px; border-radius: 99px; font-size: 14px; transition: opacity .5s; white-space: nowrap; }
.msg.good { background: rgba(30,120,70,.75); } .msg.bad { background: rgba(170,40,30,.75); }
.msg.gold { background: #ffd23a; color: #3a2a00; text-shadow: none; font-weight: 800; }
.msg.out { opacity: 0; }

#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#cross i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
#cross i:nth-child(1) { left: -1px; top: -14px; width: 2px; height: 8px; }
#cross i:nth-child(2) { left: -1px; top: 6px; width: 2px; height: 8px; }
#cross i:nth-child(3) { left: -14px; top: -1px; width: 8px; height: 2px; }
#cross i:nth-child(4) { left: 6px; top: -1px; width: 8px; height: 2px; }
#hitmark { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0; transition: opacity .08s;
  background: linear-gradient(45deg, transparent 45%, #ff5a4a 45%, #ff5a4a 55%, transparent 55%),
              linear-gradient(-45deg, transparent 45%, #ff5a4a 45%, #ff5a4a 55%, transparent 55%); }
/* スコープ */
#scope { position: absolute; inset: 0; }
#scope .glass { position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 28%, rgba(0,0,0,.55) 34%, rgba(4,8,14,.96) 42%); }
#scope .ret { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#scope .ret i { position: absolute; background: rgba(255,255,255,.85); box-shadow: 0 0 2px #000; }
#scope .ret .v { left: -1px; top: -26vh; width: 2px; height: 52vh;
  background: linear-gradient(180deg, transparent 0, rgba(255,255,255,.85) 12%, transparent 46%, transparent 54%, rgba(255,255,255,.85) 88%, transparent 100%); }
#scope .ret .h { top: -1px; left: -26vh; height: 2px; width: 52vh;
  background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.85) 12%, transparent 46%, transparent 54%, rgba(255,255,255,.85) 88%, transparent 100%); }
#scope .ret .c { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ff5a4a; }
#scopeInfo { position: absolute; left: 50%; top: calc(50% + 15vh); transform: translateX(-50%);
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: rgba(4,10,20,.72); padding: 3px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); }
#leadMark { position: absolute; left: 0; top: 0; margin: -11px 0 0 -11px; }
#leadMark i { display: block; width: 22px; height: 22px; border: 2px solid #ffd23a; border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,.6); }
#leadMark span { position: absolute; left: 26px; top: 3px; font-size: 11px; font-weight: 700; color: #ffd23a; white-space: nowrap; }
body.scoped #cross, body.scoped #pipFrame { display: none !important; }

#warn { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); font-size: 30px; font-weight: 900; color: #ff5a4a;
  animation: blink .45s steps(2) infinite; white-space: nowrap; }
#warn:empty { display: none; }
@keyframes blink { 50% { opacity: .35; } }
#center { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font-weight: 900; white-space: nowrap; }
#center.count { font-size: 110px; }
#center.big { font-size: 56px; }
#center.gold { color: #ffd23a; } #center.bad { color: #ff6a5a; }
#goalMark { position: absolute; left: 0; top: 0; margin: -12px 0 0 -30px; width: 60px; text-align: center; font-size: 12px; font-weight: 800; color: #ffd23a; }
#goalMark::before { content: ''; display: block; width: 16px; height: 16px; margin: 0 auto 2px; border: 3px solid #ffd23a; transform: rotate(45deg); }
#goalMark b { display: block; color: #fff; font-weight: 700; }
#goalMark.off { opacity: .7; }

/* レーダー（右下）と重ならないよう、右端を空けた中でまん中に置く */
#umbBox { position: absolute; left: 12px; right: 212px; bottom: 16px; display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap; background: rgba(6,18,38,.5); padding: 8px 16px; border-radius: 12px; margin: 0 auto; width: fit-content; max-width: none; }
#umbBox .lbl { font-size: 13px; opacity: .8; }
#pips { display: flex; gap: 5px; }
#pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.85); }
#pips i.hole { background: #ff4d3d; } #pips i.taped { background: #bdb6a4; }
#pips.many { gap: 3px; } #pips.many i { width: 9px; height: 9px; }
#pips.broken i { animation: blink .3s steps(2) infinite; }
#tapeBox { font-size: 14px; }
#tapeBox .bar { height: 4px; background: rgba(255,255,255,.2); border-radius: 2px; margin-top: 3px; }
#tapeBox .bar i { display: block; height: 100%; width: 0; background: #bff5c8; border-radius: 2px; }
#ammo { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 88px; }
#kills { font-size: 15px; font-weight: 800; min-width: 62px; opacity: .75; }
#kills.on { color: #ffd23a; opacity: 1; }
.award.big b { font-size: 24px; color: #ffd23a; }
#ammo.low { color: #ffb14a; }

#alti { position: absolute; right: 16px; top: 16px; bottom: 250px; width: 120px; }
#alti .cap { position: absolute; right: 0; top: 0; font-size: 12px; opacity: .8; }
#altiTrack { position: absolute; right: 22px; top: 22px; bottom: 6px; width: 10px; background: rgba(255,255,255,.18); border-radius: 5px; }
#altiScale .tick { position: absolute; left: 12px; width: 6px; height: 1px; background: rgba(255,255,255,.6); }
#altiScale .tick span { position: absolute; left: 10px; top: -8px; font-size: 11px; opacity: .8; }
#altiScale .tick.major { width: 10px; }
#altiDanger { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,80,60,.45); border-radius: 0 0 5px 5px; }
#altiDanger.hot { background: rgba(255,60,40,.9); }
#altiMarks { position: absolute; inset: 0; }
.mark { position: absolute; left: 50%; width: 0; height: 0; }
.mark i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #fff; }
.mark span { position: absolute; right: 14px; top: -9px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: rgba(6,18,38,.55); padding: 1px 6px; border-radius: 4px; border-left: 3px solid var(--c); }
.mark.me i { left: -10px; top: -10px; width: 20px; height: 20px; border-width: 3px; }
.mark.me span { background: rgba(255,255,255,.9); color: #111; text-shadow: none; }
.mark.focus i { box-shadow: 0 0 0 3px rgba(255,210,58,.9); }
.mark.broken i { animation: blink .3s steps(2) infinite; }
.mark.landed { opacity: .55; } .mark.crash span { text-decoration: line-through; }
#radar { position: absolute; right: 14px; bottom: 14px; width: 190px; height: 190px; }
#spect { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); background: rgba(6,18,38,.7); padding: 6px 16px;
  border-radius: 99px; font-size: 15px; pointer-events: auto; cursor: pointer; }
#killBan { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%) scale(.7); opacity: 0;
  text-align: center; white-space: nowrap; pointer-events: none; }
#killBan b { display: block; font-size: 52px; font-weight: 900; color: #ffd23a; text-shadow: 0 3px 14px rgba(0,0,0,.6); }
#killBan span { font-size: 22px; font-weight: 800; }
#killBan i { display: block; font-size: 15px; font-style: normal; opacity: .85; }
#killBan.show { animation: killpop 1.5s ease-out forwards; }
@keyframes killpop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30% { transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}
#flash { position: absolute; inset: 0; background: #ffd23a; opacity: 0; pointer-events: none; }
#flash.on { animation: flashout .35s ease-out forwards; }
@keyframes flashout { 0% { opacity: .38; } 100% { opacity: 0; } }
#share { display: block; width: 100%; padding: 10px; margin-top: 8px; font-size: 15px; font-weight: 700;
  color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; cursor: pointer; }
.award.sub { flex-basis: 100%; font-size: 13px; opacity: .75; padding: 4px 12px; }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(220,30,20,.85) 100%); }

/* ── 画面 ── */
.screen { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 24px; }
#title { background: linear-gradient(180deg, rgba(4,16,40,0) 40%, rgba(4,16,40,.55) 100%); }
#pause, #result { align-items: center; background: rgba(4,16,40,.5); }
.card { background: rgba(8,22,48,.82); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 22px 28px; max-width: 560px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.card.small { max-width: 280px; text-align: center; cursor: pointer; }
.card.wide { max-width: 760px; }
.kicker { font-size: 12px; letter-spacing: .3em; opacity: .7; }
h1 { margin: 4px 0 6px; font-size: 40px; }
h2 { margin: 0 0 10px; font-size: 30px; }
h2.gold { color: #ffd23a; } h2.bad { color: #ff7a6a; }
.lead { margin: 0 0 16px; line-height: 1.7; opacity: .95; }
button { font: inherit; }
#start, #again { display: block; width: 100%; padding: 14px; font-size: 20px; font-weight: 800; color: #1b1300; background: #ffd23a;
  border: 0; border-radius: 12px; cursor: pointer; }
#start:disabled { background: #6c7a90; color: #dde; cursor: default; }
details { margin-top: 14px; font-size: 14px; }
summary { cursor: pointer; opacity: .85; }
.rules { padding-left: 18px; line-height: 1.7; margin: 8px 0; }
.keys { border-collapse: collapse; font-size: 13px; }
.keys th { text-align: left; padding: 3px 8px 3px 0; opacity: .75; font-weight: 600; white-space: nowrap; }
.keys td { padding: 3px 16px 3px 0; }
#resAwards { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.award { flex: 1; min-width: 200px; background: rgba(255,255,255,.08); border-radius: 10px; padding: 8px 12px; }
.award span { display: block; font-size: 13px; opacity: .8; }
.award b { font-size: 18px; }
.tablewrap { overflow-x: auto; }
#resTable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#resTable th { font-size: 12px; opacity: .7; font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.2); }
#resTable td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
#resTable tr.me td { background: rgba(255,210,58,.15); font-weight: 700; }
#resTable .nm i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
#resTable .g { color: #ffd23a; } #resTable .x { color: #ff7a6a; }
#resNext { font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
#resBest { color: #ffd23a; margin: 0 0 12px; font-size: 14px; }
.padinfo { margin-top: 12px; font-size: 11px; line-height: 1.6; opacity: .7; white-space: pre-line;
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 8px; word-break: break-all; }
#resSeed { font-size: 11px; opacity: .4; margin-top: 8px; text-align: right; }

/* ── 指 ── */
#touch { position: fixed; inset: 0; pointer-events: none; }
#tLook { position: absolute; left: 38%; right: 0; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
/* 左の輪＝機首。親指が自然に届く位置に大きく置く */
#tStick { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 168px; height: 168px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.32); pointer-events: auto; touch-action: none; }
#tStick span { position: absolute; left: 0; right: 0; top: 50%; margin-top: 52px; text-align: center;
  font-size: 11px; opacity: .55; pointer-events: none; }
#tKnob { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px; border-radius: 50%;
  background: rgba(255,255,255,.5); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
#tBtns { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: 240px; height: 240px; }
#tBtns button { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); background: rgba(10,30,60,.5);
  color: #fff; font-weight: 800; pointer-events: auto; touch-action: none; }
#tBtns button.on { background: rgba(255,210,58,.75); color: #221800; }
#tBtns .fire { right: 0; bottom: 0; width: 116px; height: 116px; font-size: 20px; background: rgba(200,50,40,.6); }
#tBtns .dive { right: 124px; bottom: 6px; width: 84px; height: 84px; font-size: 15px; }
#tBtns .tape { right: 8px; bottom: 124px; width: 84px; height: 84px; font-size: 15px; }
#tBtns .view { right: 116px; bottom: 112px; width: 62px; height: 62px; font-size: 12px; }
#tAuto { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top));
  display: flex; gap: 6px; }
#tAuto button { pointer-events: auto; touch-action: none; font-size: 11px; font-weight: 700; padding: 6px 10px;
  border-radius: 99px; border: 1px solid rgba(255,255,255,.3); background: rgba(10,30,60,.5); color: rgba(255,255,255,.6); }
#tAuto button.on { background: rgba(255,210,58,.85); color: #221800; border-color: transparent; }

/* 狭い画面（375px など）では、輪とボタンが重なる（実測 168+240 > 375）。まとめて縮める */
@media (max-width: 520px) {
  #tStick { width: 126px; height: 126px; }
  #tKnob { width: 56px; height: 56px; margin: -28px; }
  #tStick span { margin-top: 38px; font-size: 10px; }
  #tBtns { width: 186px; height: 186px; }
  #tBtns .fire { width: 92px; height: 92px; font-size: 17px; }
  #tBtns .dive { right: 98px; bottom: 4px; width: 68px; height: 68px; font-size: 13px; }
  #tBtns .tape { right: 6px; bottom: 98px; width: 68px; height: 68px; font-size: 13px; }
  #tBtns .view { right: 92px; bottom: 88px; width: 54px; height: 54px; font-size: 11px; }
  #tLook { left: 34%; }
}
/* 横向きは高さが無いので、上の表示を詰める */
@media (orientation: landscape) and (max-height: 460px) {
  body.touch #alti { top: 120px; bottom: 190px; }
  body.touch #radar { width: 92px; height: 92px; top: 38px; }
  body.touch #umbBox { transform: translateX(-50%) scale(.7); }
}
/* スマホは指と重ならない場所へ寄せる（右上はオートの切替、下は輪とボタン、真ん中下が空く） */
body.touch #radar { top: 46px; bottom: auto; right: 8px; width: 104px; height: 104px; }
body.touch #alti { top: 158px; bottom: 200px; width: 76px; right: 6px; }
body.touch #alti .cap { display: none; }
/* 傘の穴と弾は、輪とボタンのあいだ（画面下のまん中）へ */
/* 画面下のまん中は輪とボタンで埋まる（375px では隙間 33px）。左の輪の真上へ置く */
body.touch #umbBox { top: auto; bottom: 152px; left: 6px; right: auto; max-width: 236px; gap: 8px;
  transform: scale(.7); transform-origin: bottom left; padding: 6px 10px; }
body.touch #feed { top: 168px; max-width: 46vw; left: 4px; transform: none; align-items: flex-start; }
body.touch #stats { top: 30px; left: 6px; min-width: 96px; padding: 4px 8px 5px; }
body.touch #stats .big { font-size: 20px; }
body.touch #stats .row { font-size: 11px; }
body.touch #stats .row b { font-size: 14px; min-width: 28px; }
/* 時計とゴールまでの距離は、右上のオート切替とぶつかるので左の列に下ろす */
body.touch #top { top: 124px; left: 6px; transform: none; text-align: left; }
body.touch #timer { font-size: 16px; }
body.touch #goalDist { font-size: 11px; padding: 2px 8px; }
body.touch #warn { top: 52%; font-size: 19px; }
body.touch #killBan b { font-size: 34px; }

/* 狭い画面・縦長。実測 520×690 では レーダーと傘の表示が 126×96px 重なっていた */
@media (max-width: 900px) {
  #stats { min-width: 130px; padding: 6px 10px 8px; }
  #stats .big { font-size: 28px; }
  #radar { width: 140px; height: 140px; }
  #alti { bottom: 200px; width: 96px; }
  #umbBox { right: 164px; gap: 10px; padding: 6px 10px; font-size: 12px; }
  #umbBox .lbl { display: none; }
  #pips i { width: 11px; height: 11px; }
  #feed { max-width: 64vw; }
  .msg { font-size: 12px; padding: 3px 10px; }
  #warn { font-size: 22px; }
  #center.count { font-size: 76px; }
  #center.big { font-size: 34px; }
}
@media (max-height: 560px) {
  #alti { bottom: 170px; }
  #radar { width: 130px; height: 130px; }
}