/* Eyes Up! の見た目（ux）。基準 390×844。#stage を --s 倍に拡大縮小して、画面に合わせる。 */
:root {
  --yellow: #ffd23f; --red: #ff4a3d; --green: #4fe08a; --aqua: #5ad7ff;
  --rim: #4fe08a; --rimA: 0;
  --ui: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0914; color: #fff; font-family: var(--ui); touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; }

#backdrop { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #2a2250, #0b0914 70%); }
#backdrop canvas { position: absolute; left: 50%; top: 50%; width: 130vmax; height: 281vmax; transform: translate(-50%, -50%); filter: blur(26px) brightness(0.45) saturate(1.2); opacity: 0.9; image-rendering: auto; }
#stage-wrap { position: fixed; inset: 0; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 390px; height: 844px; overflow: hidden; background: #1a1630;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: 50% 50%; touch-action: none; isolation: isolate;
}
@media (min-width: 700px) { #stage { border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); } }
#world { position: absolute; inset: 0; }
#road { position: absolute; left: 0; top: 0; width: 390px; height: 844px; display: block; }

/* 押せる所の薄い ‹ › （手ほどきのあとも残る） */
.chev { position: absolute; top: 470px; width: 26px; height: 60px; opacity: 0.42; pointer-events: none; animation: chev 2.4s ease-in-out infinite; }
.chev.l { left: 8px; } .chev.r { right: 8px; }
.chev::before { content: ""; position: absolute; top: 16px; width: 22px; height: 22px; border: 0 solid rgba(255,255,255,.95); border-width: 0 0 5px 5px; border-radius: 3px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.chev.l::before { left: 8px; transform: rotate(45deg); }
.chev.r::before { right: 8px; transform: rotate(-135deg); }
@keyframes chev { 50% { opacity: .15; } }
#stage[data-look="1"] .chev { opacity: .8; top: 360px; }

/* ---- スマホ本体（CSS で描く。ガラスの位置は layout.js と同じ） ---- */
#phone {
  position: absolute; left: 40px; top: 176px; width: 310px; height: 740px; transform-origin: 50% 0; will-change: transform; pointer-events: none;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.55));
}
.pframe {
  position: absolute; inset: 0; border-radius: 46px;
  background: linear-gradient(135deg, #b9bec8 0%, #5b5f68 12%, #2a2c33 28%, #17181c 50%, #2a2c33 72%, #6c717c 90%, #b9bec8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 2px 3px rgba(255,255,255,.4), 0 0 0 1px #000, 0 0 46px rgba(90,215,255,.2);
}
.pbody { position: absolute; inset: 4px; border-radius: 42px; background: linear-gradient(180deg, #101116, #07080b); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 8px 14px rgba(0,0,0,.6); }
.btn-side { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #4a4d55, #9da2ac 40%, #3a3d44); }
.bl1 { left: -3px; top: 120px; height: 34px; } .bl2 { left: -3px; top: 170px; height: 58px; } .br1 { right: -3px; top: 190px; height: 82px; transform: scaleX(-1); }
.rimglow { position: absolute; inset: 0; border-radius: 46px; border: 4px solid var(--rim); box-shadow: 0 0 22px 4px var(--rim), inset 0 0 22px var(--rim); opacity: var(--rimA); }
.glass { position: absolute; left: 18px; top: 28px; width: 274px; height: 568px; border-radius: 30px; overflow: hidden; background: #14102e; box-shadow: 0 0 0 2px #000, 0 0 34px 6px rgba(90,215,255,.22), 0 0 80px 14px rgba(120,70,200,.18); }
.glass canvas { position: absolute; inset: 0; width: 274px; height: 568px; }
.island { position: absolute; left: 50%; top: 10px; width: 74px; height: 22px; margin-left: -37px; border-radius: 12px; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.island::after { content: ""; position: absolute; right: 9px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5a79ff 0 18%, #14204a 40%, #05070f 75%); box-shadow: 0 0 0 1px #1c1f2a; }
.score { position: absolute; right: 12px; top: 6px; padding: 2px 8px; font: 800 13px/18px var(--ui); letter-spacing: .02em; font-variant-numeric: tabular-nums; background: rgba(10,6,30,.55); border-radius: 9px; color: #c8f4ff; text-shadow: 0 0 8px rgba(90,215,255,.8); }
.score::before { content: "★ "; color: #ffd23f; }
.gloss { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 24%, rgba(255,255,255,0) 25%), radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.1), transparent 55%); pointer-events: none; }
.homebar { position: absolute; left: 50%; bottom: 6px; width: 96px; height: 4px; margin-left: -48px; border-radius: 2px; background: rgba(255,255,255,.35); }

#hands { position: absolute; left: 0; top: 0; width: 390px; height: 844px; pointer-events: none; will-change: transform; }
.hand { position: absolute; top: 740px; width: 276px; height: 284px; background: url(../assets/hands.webp) no-repeat; background-size: 884px 442px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)) contrast(1.05); }
.hand.l { left: -170px; background-position: -1px -158px; }
.hand.r { left: 284px; background-position: -609px -158px; }

/* ---- HUD ---- */
#hud { position: absolute; inset: 0; pointer-events: none; }
.distance { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font: 900 34px/38px var(--ui); font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: 5px rgba(0,0,0,.72); paint-order: stroke fill; letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0,0,0,.4); transition: color .1s; }
.distance.bad { color: #ff7a6a; animation: blink .18s 3; }
@keyframes blink { 50% { opacity: .3; } }
.lanes { position: absolute; left: 50%; top: 49px; width: 66px; margin-left: -33px; display: flex; justify-content: space-between; }
.lanes i { width: 14px; height: 14px; border-radius: 50% 50% 46% 46%; background: rgba(255,255,255,.35); border: 1.5px solid rgba(0,0,0,.5); transition: background .12s, box-shadow .12s, transform .12s; }
.lanes i.on { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); transform: scale(1.2); }
.follow { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font: 700 11px/14px var(--ui); color: #d8ffe4; background: rgba(20,50,35,.7); padding: 3px 9px 3px 7px; border-radius: 12px; white-space: nowrap; box-shadow: 0 0 12px rgba(120,255,170,.4); }
.zone-toast { position: absolute; left: 12px; top: 56px; padding: 4px 12px; border-radius: 12px; background: rgba(0,0,0,.55); font: 800 13px/16px var(--ui); letter-spacing: .06em; animation: toast 2.2s ease both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.icon-btn { pointer-events: auto; position: absolute; right: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.55); display: grid; place-items: center; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.icon-btn:focus-visible, .retry:focus-visible, .pill:focus-visible, .langsw button:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.icon-btn .mute { display: none; }
body.muted .icon-btn .mute { display: block; } body.muted .icon-btn .waves { display: none; }
.hint-line { position: absolute; left: 50%; top: 78px; transform: translateX(-50%); max-width: 330px; padding: 6px 16px; border-radius: 16px; background: rgba(12,10,30,.78); font: 800 15px/20px var(--ui); white-space: nowrap; box-shadow: 0 2px 12px rgba(0,0,0,.4); animation: pop .25s ease both; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -6px) scale(.9); } }
#popups { position: absolute; inset: 0; }
.popup { position: absolute; padding: 5px 12px 6px; border-radius: 16px 16px 16px 4px; background: #fff; color: #111; font: 900 16px/18px var(--ui); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.4); animation: bubble .6s ease both; transform-origin: 0 100%; }
@keyframes bubble { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(var(--k, 1)); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(var(--k, 1)); } }

/* ---- 手ほどきの合図 ---- */
#hints { position: absolute; inset: 0; pointer-events: none; }
.finger { position: absolute; width: 74px; height: 110px; margin: -12px 0 0 -26px; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.finger.show { animation: fin .2s ease forwards; }
@keyframes fin { to { opacity: .88; } }
.glow-zone { position: absolute; border-radius: 14px; background: radial-gradient(closest-side, rgba(255,210,63,.55), rgba(255,210,63,.12) 70%, transparent); animation: pulse 1.1s ease-in-out infinite; opacity: 0; transition: opacity .2s; }
.glow-zone.show { opacity: 1; }
@keyframes pulse { 50% { filter: brightness(1.5); transform: scale(1.06); } }
.keycaps { position: absolute; display: flex; gap: 8px; opacity: 0; transition: opacity .2s; }
.keycaps.show { opacity: .95; }
.keycaps kbd, #side-left kbd { min-width: 44px; height: 44px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 9px; font: 800 18px var(--ui); color: #fff; background: linear-gradient(#4a4d5a, #2a2c37); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 4px 0 #14151c, 0 8px 14px rgba(0,0,0,.4); }
.keycaps kbd { animation: keyp 1s ease-in-out infinite; }
@keyframes keyp { 50% { transform: translateY(3px); box-shadow: 0 1px 0 #14151c; } }
.rim-hint { position: absolute; left: 58px; top: 196px; width: 274px; height: 18px; border-radius: 10px; opacity: 0; box-shadow: 0 0 22px 6px rgba(79,224,138,.9); background: rgba(79,224,138,.55); animation: pulse 1.4s ease-in-out infinite; }
.rim-hint.show { opacity: 1; }

/* ---- 画面（S1 / S3 / 一時停止） ---- */
.screen { position: absolute; inset: 0; z-index: 20; }
.screen[hidden] { display: none; }
.logo { position: absolute; left: 0; right: 0; top: 14px; text-align: center; pointer-events: none; }
.logo b { display: block; font: 900 40px/42px var(--ui); letter-spacing: .02em; color: #fff; -webkit-text-stroke: 7px rgba(18,10,40,.85); paint-order: stroke fill; text-shadow: 0 4px 16px rgba(0,0,0,.5); }
.logo small { display: block; margin-top: 2px; font: 800 14px/16px var(--ui); letter-spacing: .3em; color: var(--yellow); text-shadow: 0 1px 6px #000, 0 0 3px #000; }
.title-tools { position: absolute; right: 8px; top: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.title-tools .icon-btn { position: static; background: rgba(12,10,30,.6); border-radius: 22px; color: #fff; }
.langsw { display: inline-flex; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); background: rgba(12,10,30,.66); }
.langsw button { min-width: 40px; height: 34px; padding: 0 10px; border: 0; background: transparent; color: rgba(255,255,255,.6); font-weight: 800; font-size: 14px; cursor: pointer; }
.langsw button.on { background: var(--yellow); color: #1a1230; }
.tap-ring { position: absolute; left: 50%; top: 470px; width: 232px; height: 232px; margin: -116px 0 0 -116px; border-radius: 50%; display: grid; place-items: center; pointer-events: none; border: 3px solid rgba(255,210,63,.9); box-shadow: 0 0 30px rgba(255,210,63,.6), inset 0 0 30px rgba(255,210,63,.25); animation: breathe 1.8s ease-in-out infinite; }
.tap-ring span { max-width: 200px; text-wrap: balance; text-align: center; font: 900 20px/26px var(--ui); color: #fff; text-shadow: 0 2px 8px #000, 0 0 14px rgba(0,0,0,.8); }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .7; } }
.title-best { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 800 14px var(--ui); color: #fff; text-shadow: 0 1px 6px #000; }

#result { background: radial-gradient(ellipse at 50% 30%, rgba(30,20,60,.86), rgba(8,6,18,.96)); animation: fadein .3s ease both; }
@keyframes fadein { from { opacity: 0; } }
.card { position: absolute; left: 20px; top: 24px; width: 350px; padding: 0 0 14px; border-radius: 22px; background: linear-gradient(170deg, #241c4a, #120e26 70%); box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; animation: cardin .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardin { from { transform: translateY(30px) scale(.96); opacity: 0; } }
.card-pic { position: relative; height: 230px; background: #2a2450; }
.card-pic canvas { display: block; width: 350px; height: 230px; }
.card-label { position: absolute; left: 12px; top: 12px; padding: 4px 12px; border-radius: 12px; background: rgba(255,60,50,.92); font: 900 13px/16px var(--ui); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.card-line { padding: 10px 16px 0; font: 900 20px/26px var(--ui); text-align: center; }
.card-dist { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding-top: 2px; position: relative; }
.card-dist b { font: 900 66px/72px var(--ui); font-variant-numeric: tabular-nums; color: var(--yellow); text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.card-dist span { font: 900 24px var(--ui); color: var(--yellow); }
.card-dist em { position: absolute; right: 14px; top: 8px; font: 900 12px/14px var(--ui); font-style: normal; padding: 4px 8px; border-radius: 10px; background: var(--red); transform: rotate(6deg); }
.card-best { text-align: center; font: 700 13px/16px var(--ui); color: rgba(255,255,255,.75); min-height: 16px; }
.card-road { position: relative; margin: 12px 16px 0; height: 38px; }
.road-seg { position: absolute; top: 9px; height: 8px; border-radius: 4px; }
.road-lbl { position: absolute; top: 24px; font: 700 9px/10px var(--ui); color: rgba(255,255,255,.65); white-space: nowrap; }
.road-mark { position: absolute; top: 2px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 0 10px rgba(255,70,60,.9); }
.card-nums { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font: 700 12px/16px var(--ui); color: rgba(255,255,255,.8); }
.card-zukan { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 40px)); justify-content: center; gap: 4px; margin: 10px 8px 0; }  /* 周回2: 8枠（次は9枠）でも1行に収まる（390 の論理幅で 40px×9＋4px×8 = 392 までは入れ、足りなければ幅が縮む） */
.zk { position: relative; width: 100%; min-width: 0; height: 52px; border-radius: 9px; background: rgba(255,255,255,.07); display: grid; place-items: center; }
.zk canvas { width: 100%; max-width: 38px; height: auto; aspect-ratio: 40 / 48; }
.zk.lock canvas { filter: brightness(0) opacity(.38); }
.zk.now { background: rgba(255,210,63,.22); box-shadow: 0 0 0 2px var(--yellow), 0 0 14px rgba(255,210,63,.7); }
.card-foot { margin-top: 10px; text-align: center; font: 700 12px/16px var(--ui); color: rgba(255,255,255,.7); letter-spacing: .04em; }
.retry { position: absolute; left: 45px; top: 650px; width: 300px; height: 62px; border: 0; border-radius: 31px; background: linear-gradient(#ffe066, #ffbd1f); color: #2a1a00; font: 900 24px var(--ui); box-shadow: 0 6px 0 #b9780d, 0 12px 24px rgba(0,0,0,.5); cursor: pointer; animation: cardin .4s .1s cubic-bezier(.2,.8,.2,1) both; }
.retry:active { transform: translateY(4px); box-shadow: 0 2px 0 #b9780d; }
.retry.small { position: static; width: auto; height: 40px; padding: 0 20px; margin-left: 12px; font-size: 16px; border-radius: 20px; }
.result-tools { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.pause { background: rgba(8,6,18,.55); display: grid; place-items: center; }
.pause-pill { padding: 16px 28px; border-radius: 30px; background: #fff; color: #1a1230; font: 900 20px var(--ui); display: flex; align-items: center; }
.hitlabel { position: absolute; left: 50%; top: 612px; transform: translateX(-50%); padding: 6px 18px; border-radius: 16px; background: #ff3b30; font: 900 20px/24px var(--ui); white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: pop .2s ease both; z-index: 8; }
.hitlabel[hidden] { display: none; }

.pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 12px; border-radius: 17px; border: 1px solid rgba(255,255,255,.3); background: rgba(12,10,30,.66); font: 800 13px var(--ui); cursor: pointer; }
.pill .knob { width: 34px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.25); position: relative; transition: background .15s; }
.pill .knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pill.on .knob { background: var(--green); } .pill.on .knob::after { transform: translateX(14px); }

/* ---- 落ちるスマホ・揺れ ---- */
#phone.falling { animation: fall .65s cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes fall { to { transform: translate(-30px, 980px) rotate(38deg); } }
#hands.empty .hand { animation: handsag .5s ease both; }
@keyframes handsag { to { transform: translateY(14px) rotate(-3deg); } }

/* ---- PC の横長 ---- */
.side { position: fixed; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 18px; z-index: 5; }
#side-left { right: calc(50% + var(--sw, 200px) + 40px); align-items: flex-end; }
#side-right { left: calc(50% + var(--sw, 200px) + 40px); align-items: flex-start; }
.keyrow { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font: 700 14px var(--ui); color: rgba(255,255,255,.8); }
.keys { display: flex; gap: 8px; }
#side-left kbd.wide { min-width: 96px; }
#side-left kbd.down { transform: translateY(4px); background: linear-gradient(#ffe066, #ffbd1f); color: #2a1a00; box-shadow: 0 0 0 #14151c, 0 0 22px rgba(255,210,63,.8); }
@media (min-width: 760px) { .side { display: flex; } }
@media (hover: none) and (pointer: coarse) { #side-left { display: none; } }
@media (prefers-reduced-motion: reduce) { .tap-ring, .chev, .glow-zone { animation: none; } }
[hidden] { display: none !important; }
#endshot { position: absolute; left: 0; top: 0; width: 390px; height: 844px; pointer-events: none; z-index: 6; }

/* ---- 5-4 仕上げ ---- */
.tap-ring span { white-space: pre-line; word-break: keep-all; }
/* 手ほどきの合図: 手の絵をやめ、光る点と矢印にする */
.finger { width: 52px; height: 52px; margin: -26px 0 0 -26px; filter: none; }
.finger.show { animation: fin .2s ease forwards; }
@keyframes fin { to { opacity: 1; } }
.cue-dot { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 25%, #ffe680 55%, rgba(255,214,60,.0) 100%); box-shadow: 0 0 18px 8px rgba(255,214,60,.7), 0 0 4px 1px #fff; }
.cue-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,230,120,.85); animation: cuering 1.2s ease-out infinite; }
@keyframes cuering { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.cue-arrow { position: absolute; left: 50%; top: 58px; width: 22px; height: 22px; margin-left: -11px; border: solid rgba(255,240,170,.95); border-width: 0 5px 5px 0; transform: rotate(45deg); filter: drop-shadow(0 0 8px rgba(255,214,60,.9)); animation: cuedown 1.2s ease-in-out infinite; }
@keyframes cuedown { 0% { opacity: 0; translate: 0 -14px; } 50% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }
/* 結果のカード */
.road-seg.dim { background: #3a3a4a !important; opacity: .7; }
.road-lbl.dim { color: rgba(255,255,255,.3); }
.road-best { position: absolute; top: 0; width: 2px; height: 26px; margin-left: -1px; background: rgba(255,255,255,.85); }
.road-best::before { content: ""; position: absolute; left: 2px; top: 0; border: 6px solid transparent; border-left: 12px solid #5ad7ff; border-right: 0; }
.zk b { position: absolute; right: -4px; top: -6px; padding: 1px 5px; border-radius: 7px; background: var(--red); font: 900 9px/12px var(--ui); transform: rotate(8deg); }
.zk s { position: absolute; left: 0; right: 0; bottom: -8px; text-align: center; text-decoration: none; font: 900 9px/11px var(--ui); white-space: nowrap; letter-spacing: -.3px; }
.zk s u { text-decoration: none; } .zk s u.av { color: #7dffc8; } .zk s u.ht { color: #ff8c80; margin-left: 1px; }
.zk.now { animation: zknew 1.1s ease-in-out infinite; }
@keyframes zknew { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.card-zukan { margin-bottom: 8px; }
.card-zukan-count { margin-top: 10px; text-align: center; font: 800 11px/14px var(--ui); color: rgba(255,255,255,.75); white-space: nowrap; }
.clear-rec { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid rgba(255,255,255,.2); background: rgba(12,10,30,.5); font: 700 12px var(--ui); color: rgba(255,255,255,.6); cursor: pointer; }
.clear-rec.armed { background: var(--red); color: #fff; border-color: transparent; }
.result-tools { flex-wrap: wrap; row-gap: 8px; bottom: 22px; }
.hitlabel.wet { background: #2b7fd0; }
.drop { position: absolute; width: 9px; height: 12px; margin: -6px; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; background: radial-gradient(circle at 35% 30%, #fff, #8fc9ff 60%, #4a8fd8); animation: drop .75s cubic-bezier(.2,.7,.4,1) both; }
@keyframes drop { 0% { transform: translate(0,0) scale(.5); opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) + 150px)) scale(.7); opacity: 0; } }
.popup.big { font-size: 26px; }

/* ---- 工程7-2（ux）初見の引っかかり ---- */
/* 距離と列の点は、上の帯の左上に小さく置く（道の真ん中の遠くの物を隠さない） */
.distance { left: 10px; right: auto; top: 6px; text-align: left; font-size: 22px; line-height: 26px; -webkit-text-stroke: 4px rgba(0,0,0,.72); }
.lanes { left: 14px; top: 36px; margin-left: 0; width: 44px; }
.lanes i { width: 10px; height: 10px; }
/* 「前の人の後ろ」は得をしている印。右上（音のボタンの下）に出す */
.follow { left: auto; right: 8px; top: 48px; transform: none; max-width: 190px; white-space: normal; text-align: left; font: 800 11px/14px var(--ui); color: #eafff0; background: rgba(14,70,42,.82); border: 1px solid rgba(160,255,190,.7); padding: 4px 9px 4px 6px; box-shadow: 0 0 14px rgba(120,255,170,.55); transition: background .15s, border-color .15s; }
.follow .f-shield { flex: none; }
.follow .f-arrow { flex: none; font: 900 20px/14px var(--ui); color: #fff; text-shadow: 0 0 8px #7dffb0; animation: nudge .5s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateX(3px); } }
.follow[data-f="notice"] { background: rgba(120,70,0,.9); border-color: #ffd23f; box-shadow: 0 0 18px 4px rgba(255,210,63,.75); animation: blink .35s infinite; }
.follow[data-f="turn"] { background: rgba(80,40,100,.9); border-color: #d6a8ff; box-shadow: 0 0 14px rgba(214,168,255,.7); }
.edge-alert { position: absolute; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 14px 0 22px -6px rgba(255,210,63,.85), inset -14px 0 22px -6px rgba(255,210,63,.85), inset 0 14px 22px -8px rgba(255,210,63,.7); animation: blink .35s infinite; }
.edge-alert.turn { box-shadow: inset 12px 0 20px -8px rgba(214,168,255,.8), inset -12px 0 20px -8px rgba(214,168,255,.8); animation: none; }
/* 手ほどきの1行は、スマホの下のあご（道の物が見えない所）に出す */
.hint-line { top: 780px; max-width: 250px; white-space: normal; text-align: center; font-size: 14px; line-height: 18px; padding: 5px 12px; }
/* よけた手応え: 通り過ぎた側の端に光 */
.passmark { position: absolute; top: 300px; width: 26px; height: 260px; opacity: 0; pointer-events: none; z-index: 3; }
.passmark.l { left: 0; background: linear-gradient(90deg, rgba(190,255,215,.95), rgba(190,255,215,0)); border-radius: 0 40% 40% 0; }
.passmark.r { right: 0; background: linear-gradient(270deg, rgba(190,255,215,.95), rgba(190,255,215,0)); border-radius: 40% 0 0 40%; }
.passmark.on { animation: passfx .55s ease-out; }
@keyframes passfx { 0% { opacity: 1; transform: scaleY(.6); } 100% { opacity: 0; transform: scaleY(1.1); } }
/* 手ほどきでぶつかったとき（本番ではここで終わり） */
.practice-hit { position: absolute; left: 50%; top: 410px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 18px; background: rgba(255,52,40,.94); font: 900 15px/18px var(--ui); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.55); z-index: 9; animation: pop .2s ease both; }
.practice-hit svg { animation: dropphone .9s ease-in both; }
@keyframes dropphone { 0% { transform: translateY(-10px) rotate(0); } 60% { transform: translateY(12px) rotate(40deg); } 100% { transform: translateY(16px) rotate(50deg); } }
/* 手ほどきの終わり */
.go-banner { position: absolute; left: 58px; top: 380px; width: 274px; text-align: center; z-index: 9; animation: gob 2.2s ease both; pointer-events: none; }
.go-banner span { display: inline-block; padding: 10px 18px; border-radius: 18px; background: rgba(12,10,30,.88); border: 2px solid var(--yellow); box-shadow: 0 0 24px rgba(255,210,63,.6); font: 900 19px/24px var(--ui); color: #fff; }
@keyframes gob { 0% { opacity: 0; transform: scale(.8); } 12%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* スマホのゲームでやられた終わり: 札は上の帯に出し、スマホは落とさない */
.hitlabel.phone { top: 96px; background: #6a3bd8; box-shadow: 0 6px 24px rgba(106,59,216,.7); }
html[lang="en"] .logo small { letter-spacing: .08em; }
/* 縦横の比が違う端末でも、左右を黒い帯にしない（道の絵のぼかしで埋める） */
@media (max-width: 699px) { #backdrop canvas { filter: blur(10px) brightness(0.8) saturate(1.15); } }

/* 7-4: 練習の札、スマホの陰の1行、結果の「もう1回」の待ち */
.practice-badge { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 3px 14px; border-radius: 12px; background: rgba(12,10,30,.78); border: 1.5px solid var(--yellow); color: var(--yellow); font: 900 13px/18px var(--ui); letter-spacing: .08em; pointer-events: none; z-index: 8; }
.shadow-line { top: 96px; }
#result.wait .retry { opacity: .38; }
.retry { transition: opacity .15s; }

/* 7-5: 段階3の合図（玉が下へ動いて、そこで止まり、押さえ続ける）。「本番ならここで終わり」の札は上の帯（敵と弾を隠さない） */
.practice-hit { top: 112px; }
.finger.hold .cue-arrow { opacity: 0; }
.finger.hold .cue-dot { transform: scale(1.3); }
.finger.hold .cue-ring { inset: -10px; border-width: 4px; border-color: rgba(255,230,120,1); animation: holdring 1s ease-in-out infinite; }
@keyframes holdring { 0%, 100% { transform: scale(.85); opacity: .95; } 50% { transform: scale(1.25); opacity: .45; } }

/* 7-7: 自分の列の3つの点を大きく */
.lanes { width: 96px; margin-left: -48px; top: 44px; }
.lanes i { width: 24px; height: 24px; }
.lanes i.on { transform: scale(1.15); box-shadow: 0 0 14px var(--yellow); }
.lanes { left: 14px; top: 38px; margin-left: 0; width: 84px; }
.lanes i { width: 20px; height: 20px; }

/* 周回1（ux）: 最初の1分の分かりやすさ */
/* 段階3: 光る点から下へ引く向きの絵と一言 */
.pull-guide { position: absolute; opacity: 0; filter: drop-shadow(0 0 8px rgba(255,214,60,.8)); transition: opacity .2s; }
.pull-guide.show { opacity: .95; }
.pull-guide svg { display: block; animation: pullnudge 1.2s ease-in-out infinite; }
@keyframes pullnudge { 50% { transform: translateY(8px); } }
.pull-label { position: absolute; transform: translateX(-50%); padding: 6px 16px; border-radius: 16px; background: rgba(12,10,30,.86); border: 2px solid var(--yellow); box-shadow: 0 0 18px rgba(255,210,63,.55); font: 900 17px/22px var(--ui); color: #fff; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.pull-label.show { opacity: 1; }
/* 段階2: 押せる光は ‹ › の1種類。押す側の帯の全体に薄い色を敷く（脈打たない） */
.glow-zone { background: rgba(255,210,63,.16); border: 2px dashed rgba(255,210,63,.6); animation: none; }
/* 練習の札: 何段のうちのどこか */
.practice-badge { white-space: nowrap; letter-spacing: .04em; }
/* 本番で最初の障害物が近づいた時の、上の縁の下向きの印（1回） */
.edge-pull { position: absolute; left: 50%; top: 172px; width: 44px; height: 30px; margin-left: -22px; z-index: 7; pointer-events: none; animation: edgepull 2.4s ease-in-out both; filter: drop-shadow(0 0 8px rgba(255,214,60,.9)); }
.edge-pull[hidden] { display: none; }
@keyframes edgepull { 0%, 100% { opacity: 0; transform: translateY(-8px); } 15%, 80% { opacity: 1; } 50% { transform: translateY(8px); } }
html[lang="ja"] .logo small { letter-spacing: .06em; font-size: 15px; }
/* 段階2: 押せる光は両端の ‹ › だけ。押す側を明るく大きくし、光る点がその上に乗る */
#stage[data-tut="l"] .chev.l, #stage[data-tut="r"] .chev.r { opacity: 1; animation: none; transform: scale(1.5); transform-origin: 50% 50%; filter: drop-shadow(0 0 10px rgba(255,210,63,.95)); }
#stage[data-tut="l"] .chev.r, #stage[data-tut="r"] .chev.l { opacity: .6; }

/* 周回2: ここから本番（練習が終わった合図。約1.5秒、大きく） */
.go-banner { top: 330px; animation-duration: 1.8s; }
.go-banner span { display: grid; gap: 2px; padding: 14px 22px; border-radius: 22px; border-width: 3px; box-shadow: 0 0 40px rgba(255,210,63,.85), 0 0 0 9999px rgba(8,6,20,.25); }
.go-banner small { font: 800 13px/16px var(--ui); color: var(--yellow); letter-spacing: .06em; }
.go-banner b { font: 900 30px/34px var(--ui); color: #fff; text-shadow: 0 2px 0 #2a0f5a, 0 0 18px rgba(255,210,63,.9); }
@keyframes gob { 0% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1.12); } 24%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.04); } }
/* 周回2: 前を見ている間に列を変える案内（最初の数回）。左右の ‹ › をはっきり光らせ、指の輪を重ねる */
.look-tip { top: 214px; max-width: 330px; white-space: normal; text-align: center; font-size: 15px; line-height: 20px; z-index: 8; background: rgba(12,10,30,.86); border: 1.5px solid var(--yellow); }
#stage[data-tip="1"] .chev { opacity: 1; animation: none; transform: scale(1.45); filter: drop-shadow(0 0 10px rgba(255,210,63,.95)); }
#stage[data-tip="1"] .chev::after { content: ""; position: absolute; left: 50%; top: 27px; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid rgba(255,230,120,.95); animation: tipring 1.2s ease-out infinite; }
@keyframes tipring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #stage[data-tip="1"] .chev::after { animation: none; } }
/* 周回2: 結果のカードが出る間、後ろのスマホの画面（GAME OVER の字）を消す。カードの絵の GAME OVER と重ならない */
#phone .glass { transition: opacity .12s; }
#stage[data-mode="result"] #phone .glass { opacity: 0; }

/* 周回3: 信号。待っている間の印、最初の信号の「下へ引く」矢印、結果の待ち回数 */
.signal-wait { position: absolute; left: 50%; top: 672px; transform: translateX(-50%); display: grid; gap: 1px; justify-items: center; width: 262px; padding: 6px 12px; border-radius: 16px; background: rgba(60,10,8,.88); border: 2px solid #ff4a3a; box-shadow: 0 0 18px rgba(255,64,48,.6); text-align: center; z-index: 8; pointer-events: none; animation: pop .2s ease both; }
.signal-wait[hidden] { display: none; }
.signal-wait b { font: 900 16px/20px var(--ui); color: #fff; white-space: nowrap; }
.signal-wait small { font: 700 12px/16px var(--ui); color: #ffd9d4; }
.signal-pull { position: absolute; left: 50%; top: 110px; margin-left: -22px; width: 44px; display: grid; justify-items: center; z-index: 7; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255,214,60,.9)); }
.signal-pull[hidden] { display: none; }
.signal-pull svg { animation: pullnudge 1.1s ease-in-out infinite; }
.signal-pull span { margin-top: 2px; padding: 3px 12px; border-radius: 14px; background: rgba(12,10,30,.88); border: 1.5px solid var(--yellow); font: 900 13px/17px var(--ui); color: #fff; white-space: nowrap; }
.card-stops { margin-top: 6px; text-align: center; font: 800 13px/16px var(--ui); color: #9ff5d5; }
.card-stops[hidden] { display: none; }
/* 周回3: 「‹ › を押してよける」の札は、道の先の物を隠さない所（スマホの下のあご）に出す */
.look-tip { top: 772px; }
#stage[data-state="ending"] .signal-wait, #stage[data-state="result"] .signal-wait { display: none; }
.signal-pull { margin-left: 0; width: max-content; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.card-line { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
/* 周回3: 出て 0.5秒の間の「もう1回」は、押せない見た目（灰色に沈み、影と押し込みがない） */
#result.wait .retry { opacity: .42; filter: grayscale(.9) brightness(.85); box-shadow: none; transform: none; cursor: not-allowed; }
/* 周回3b: スマホを見ている間は、待ちの札を上の帯へ（スマホのゲームを隠さない）。赤を見た／歩き出す合図 */
.signal-wait.band { top: 126px; width: auto; max-width: 340px; padding: 3px 14px; }
.signal-wait.band small { display: none; }
.signal-toast { position: absolute; left: 50%; top: 152px; transform: translateX(-50%); padding: 4px 14px; border-radius: 14px; font: 900 14px/18px var(--ui); color: #fff; white-space: nowrap; background: rgba(60,10,8,.92); border: 2px solid #ff4a3a; box-shadow: 0 0 18px rgba(255,64,48,.7); z-index: 9; pointer-events: none; animation: pop .2s ease both; }
.signal-toast[data-k="walk"] { background: rgba(6,50,38,.92); border-color: #35f0b4; box-shadow: 0 0 18px rgba(53,240,180,.7); }
.signal-toast[hidden] { display: none; }
.signal-wait.band { left: 8px; top: 120px; transform: none; max-width: 150px; padding: 3px 10px; border-radius: 12px; }
.signal-wait.band b { font-size: 13px; line-height: 16px; }
.signal-toast { left: auto; right: 8px; top: 120px; transform: none; max-width: 150px; white-space: normal; text-align: center; font-size: 13px; line-height: 16px; padding: 3px 10px; border-radius: 12px; }
.signal-toast { max-width: 158px; font-size: 12px; padding: 3px 8px; word-break: keep-all; overflow-wrap: anywhere; }
/* 周回4: 前を見ている間の、スマホの敵の近さ（下の線にどれだけ近いか）。スマホの上の縁のそば。敵と自機の位置は見せない */
.danger-gauge { position: absolute; left: 50%; top: 712px; border: 1px solid rgba(255,255,255,.25); transform: translateX(-50%); display: flex; gap: 3px; padding: 3px 6px; border-radius: 8px; background: rgba(12,10,30,.55); z-index: 6; pointer-events: none; }
.danger-gauge[hidden] { display: none; }
.danger-gauge i { width: 12px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.2); }
.danger-gauge i.on { background: var(--c, #4fe08a); }
.edge-hint { top: 650px; max-width: 340px; text-align: center; white-space: normal; z-index: 8; background: rgba(12,10,30,.86); border: 1.5px solid var(--yellow); font-size: 13px; line-height: 17px; }
.edge-hint[hidden] { display: none; }
/* 周回5: 結果のカードの共有ボタン（「もう1回」より目立たせない。絵の右上の小さな薄い札） */
.share { position: absolute; right: 10px; top: 10px; height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; background: rgba(14,10,30,.55); color: rgba(255,255,255,.88); font: 700 12px/1 var(--ui); cursor: pointer; white-space: nowrap; }
.share:active { transform: translateY(1px); background: rgba(14,10,30,.8); }
.share:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.share[disabled] { opacity: .6; }
/* 周回5: 図鑑の ✓ ✕ を大きく（11px 以上）、図鑑に入る条件の一行、前を見ている間の目盛りの敵の印 */
.zk s { font: 900 12px/13px var(--ui); bottom: -12px; letter-spacing: -.2px; }
.card-zukan { margin-bottom: 14px; }
.card-zukan-rule { text-align: center; font: 700 11px/14px var(--ui); color: rgba(255,255,255,.62); margin-top: 1px; padding: 0 12px; }
.gauge-enemy { align-self: center; margin-right: 3px; flex: none; }
.edge-hint { width: max-content; max-width: 330px; text-wrap: balance; }
#stage[data-sigpull="1"] #shadow-line { visibility: hidden; }  /* 周回5: 信号の矢印と札が出ている間は「陰に何かある」の札を隠す（重なり） */
/* 周回6（F20）: 今日の道。遊んでいる間の印、結果のカードの今日のベスト、遊び方の切り替え（「もう1回」の下。小さく、もう1回より目立たせない） */
.daily-tag { position: absolute; left: 98px; top: 12px; font: 800 11px/14px var(--ui); letter-spacing: .02em; color: #ffe680; -webkit-text-stroke: 3px rgba(0,0,0,.72); paint-order: stroke fill; white-space: nowrap; pointer-events: none; }
.daily-tag[hidden] { display: none; }
.card-daily { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 6px 14px 0; font: 800 12px/16px var(--ui); color: rgba(255,255,255,.9); }
.card-daily[hidden], .card-daily em[hidden], .mode-box[hidden] { display: none; }
.card-daily b { padding: 2px 9px; border-radius: 10px; background: rgba(255,210,63,.16); color: var(--yellow); font-weight: 900; white-space: nowrap; }
.card-daily span { white-space: nowrap; }
.card-daily em { font: 900 11px/14px var(--ui); font-style: normal; padding: 2px 7px; border-radius: 9px; background: var(--red); color: #fff; white-space: nowrap; }
.mode-box { position: absolute; left: 0; right: 0; top: 724px; text-align: center; animation: cardin .4s .15s cubic-bezier(.2,.8,.2,1) both; }
.mode-sw { display: inline-flex; height: 30px; border: 1px solid rgba(255,255,255,.26); border-radius: 15px; overflow: hidden; background: rgba(12,10,30,.5); }
.mode-sw button { min-width: 92px; padding: 0 14px; border: 0; background: transparent; color: rgba(255,255,255,.72); font: 800 12px/1 var(--ui); cursor: pointer; white-space: nowrap; }
.mode-sw button.on { background: var(--yellow); color: #2a1a00; }
.mode-sw button:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; }
.mode-note { margin-top: 5px; font: 700 11px/14px var(--ui); color: rgba(255,255,255,.62); }
/* 周回6: 共有の札を絵の右上から、数字の行の左端へ（絵の信号を隠さない。R5-3）。結果の画面の縦の並びを少し詰める（英語の下の並びが2段になる幅でも、切り替えと重ならない） */
.card { top: 14px; }
.retry:not(.small) { top: 654px; }
.mode-box { top: 728px; }
.mode-note { margin-top: 4px; }
.result-tools { bottom: 16px; row-gap: 6px; }
.card-dist .share { right: auto; left: 12px; top: 18px; min-width: 104px; justify-content: center; }
.card-dist .share span { font: inherit; color: inherit; }