/* アブダクション☆ぱにっく — スタイル
   画面サイズは main.js が --gw / --gh / --cell などの変数で渡します */
@font-face { font-family: "Mochiy Pop One"; src: url(fonts/MochiyPopOne-sub.woff2) format("woff2"); font-display: block; }
:root {
  --navy: #0a0c3d; --deep: #070a35; --violet: #2a1a78;
  --pink: #ff4fc4; --green: #7dff3a; --blue: #37b8ff; --yellow: #ffe83a; --purple: #b36bff;
  --ink: #fff;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --en: "Fredoka", "Zen Maru Gothic", "Helvetica Neue", sans-serif;
  --gw: 390px; --gh: 844px; --u: 3.9px; --cell: 52px; --bw: 364px; --bh: 416px; --sh: 300px; --bth: 84px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { touch-action: manipulation; margin: 0; height: 100%; overflow: hidden; background: #04051c; overscroll-behavior: none; }
body { font-family: var(--font); color: var(--ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; }
a { color: inherit; }

#stage { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1d1670 0, #0a0b3a 55%, #04051c 100%); }
#game { touch-action: none; position: relative; width: var(--gw); height: var(--gh); overflow: hidden; background: var(--deep); touch-action: none; border-radius: 0; box-shadow: 0 0 0 1px #3a3a9a55, 0 0 60px #6a4dff44; }
@media (min-width: 560px) { #game { border-radius: 22px; } }

/* ---------- 上部: 牧場 ---------- */
#scene { position: absolute; left: 0; top: 0; width: 100%; height: var(--sh); overflow: hidden; background: #1a1160; }
#scene::before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 46% 52% at 50% 30%, rgba(110, 220, 255, .38), rgba(90, 120, 255, .16) 55%, transparent 80%); }
#scene-bg, #scene-bg .scene-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.star { animation: tw 2.6s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.windmill { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#minis .mini { position: absolute; width: calc(var(--u) * 11); opacity: .85; animation: mini 9s ease-in-out infinite; }
#minis .mini img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 1.2) #b36bff); }
#minis .mini:nth-child(2) img { filter: hue-rotate(-40deg) drop-shadow(0 0 calc(var(--u) * 1.2) #4aa8ff); }
#minis .mini:nth-child(3) img { filter: hue-rotate(30deg) drop-shadow(0 0 calc(var(--u) * 1.2) #ff6fc0); }
@keyframes mini { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--u) * 5), calc(var(--u) * -1.5)); } }
#cows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.cow { position: absolute; left: 0; top: 0; will-change: transform; }
.cow-flip { position: relative; width: 100%; height: 100%; }
.cow-flip.flip { transform: scaleX(-1); }
/* 牛の画像は左向き。ポーズごとに重ねて、右端と足もとをそろえる */
.cow .cp { position: absolute; right: 0; bottom: 0; height: auto; display: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cow[data-pose="stand"] .cp-stand, .cow[data-pose="graze"] .cp-graze, .cow[data-pose="startle"] .cp-startle, .cow[data-pose="run"] .cp-run, .cow[data-pose="lift"] .cp-lift, .cow[data-pose="sleep"] .cp-sleep, .cow[data-pose="fall"] .cp-fall { display: block; }
.cow[data-pose="walk"] .cp-walk, .cow[data-pose="walk"] .cp-stand { display: block; animation: step .64s steps(1, end) infinite; }
.cow[data-pose="walk"] .cp-stand { animation-delay: -.32s; }
@keyframes step { 0% { opacity: 1; } 50% { opacity: 0; } }
.cow[data-pose="stand"] .cp-stand { animation: breath 3.2s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.004, 1.012); } }
.cow[data-pose="graze"] .cp-graze { animation: chew 1.1s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes chew { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.9deg) translateY(1px); } }
.cow[data-pose="walk"] .cow-flip { animation: bob .32s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.cow[data-pose="walk"] .cow-flip.flip { animation: none; }
.cow[data-pose="run"] .cp-run { animation: runbob .22s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes runbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-1.5deg); } }
.cow[data-pose="sleep"] .cp-sleep { animation: zzz 3.4s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes zzz { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.03); } }
.cow.startle .cow-flip { animation: hop 0.5s ease-out 1; }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(calc(var(--u) * -3)); } 100% { transform: translateY(0); } }
.cow.lifted .cp-lift { filter: drop-shadow(0 0 calc(var(--u) * 1.4) #9fe9ff) brightness(1.12); }
.cow.gone { opacity: 0; }
.cow-pic { width: 100%; height: auto; display: block; }
.ghost { position: absolute; pointer-events: none; animation: ghost 3s ease-out forwards; filter: sepia(1) hue-rotate(285deg) saturate(3.5) brightness(1.15); }
.ghost .cow-pic { width: 100%; }
@keyframes ghost { 0% { opacity: .55; transform: translateY(0); } 100% { opacity: 0; transform: translateY(calc(var(--u) * -3)); } }
.moo { position: absolute; font-weight: 900; font-size: calc(var(--u) * 6); color: #fff; -webkit-text-stroke: calc(var(--u) * .5) #7a1f5a; paint-order: stroke fill; text-shadow: 0 0 calc(var(--u) * 2) #ff4fc4; transform: translate(-50%, -50%) rotate(-8deg); animation: moo 1.6s ease-out forwards; pointer-events: none; white-space: nowrap; }
@keyframes moo { 0% { opacity: 0; transform: translate(-50%, -30%) rotate(-8deg) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -60%) rotate(-8deg) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) rotate(-3deg) scale(1); } }

/* UFO */
#ufo { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; opacity: 0; }
#ufo .ufo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 2.2) #b36bffcc); animation: ufoglow 1.6s ease-in-out infinite alternate; }
@keyframes ufoglow { from { filter: drop-shadow(0 0 calc(var(--u) * 2) #b36bffaa) brightness(1); } to { filter: drop-shadow(0 0 calc(var(--u) * 3) #ff7ae8) brightness(1.14); } }
#ufo.danger .ufo-img { animation: ufodanger .5s ease-in-out infinite alternate; }
@keyframes ufodanger { from { filter: drop-shadow(0 0 calc(var(--u) * 2) #ff3a5c) hue-rotate(-24deg) saturate(1.3) brightness(1); } to { filter: drop-shadow(0 0 calc(var(--u) * 4) #ff1a3c) hue-rotate(-24deg) saturate(1.5) brightness(1.25); } }
#ufo.hit .ufo-img { animation: ufohit .28s linear 1; }
@keyframes ufohit { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(3) saturate(0); transform: translateX(-3px); } 60% { transform: translateX(3px); } }
.ufo-light { animation: blink 0.9s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ufo-emit { animation: emit 0.6s ease-in-out infinite; }
@keyframes emit { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
#ufo .hp { position: absolute; left: 50%; top: -14%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1); }
#ufo .hp i { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: 50%; background: #ff5f8a; border: 2px solid #fff; box-shadow: 0 0 calc(var(--u) * 1.4) #ff5f8a; transition: transform .2s, opacity .2s, background .2s; }
#ufo .hp i.off { background: #25214f; border-color: #6a63b0; box-shadow: none; transform: scale(.7); opacity: .8; }
#beam { position: absolute; left: 0; top: 0; transform-origin: 50% 0; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: screen; }
#beam.on { opacity: 1; animation: beamf 0.18s linear infinite; }
#beam svg { width: 100%; height: 100%; display: block; }
#beam::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, #ffffff22 0 calc(var(--u) * 1.4), transparent calc(var(--u) * 1.4) calc(var(--u) * 3.6)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); animation: beamscroll 0.7s linear infinite; }
@keyframes beamf { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes beamscroll { to { background-position: 0 calc(var(--u) * -3.6); } }
#shield-bubble { position: absolute; left: 0; top: 0; border-radius: 50%; border: 3px solid #9ff6ff; background: radial-gradient(circle at 35% 30%, #ffffff66, #37b8ff22 55%, #2a6bff55); box-shadow: 0 0 calc(var(--u) * 3) #37b8ff, inset 0 0 calc(var(--u) * 3) #7ff0ff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#shield-bubble.on { opacity: 1; animation: sbub 1s ease-in-out infinite; }
@keyframes sbub { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
#vignette { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at 50% 55%, transparent 40%, #ff0a3c99 100%); }
#vignette.warn { opacity: 1; animation: vig 0.7s ease-in-out infinite; }
@keyframes vig { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* HUD */
#hud { position: absolute; left: 0; top: 0; width: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 2.4) 0; display: flex; align-items: flex-start; gap: calc(var(--u) * 2); pointer-events: none; }
.timebox { flex: none; width: calc(var(--u) * 15.5); height: calc(var(--u) * 15.5); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #3a2fb0, #120b55); border: calc(var(--u) * .7) solid #b8a6ff; box-shadow: 0 0 calc(var(--u) * 2.5) #8a6bff, inset 0 0 calc(var(--u) * 2) #6a4dff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.timebox small { font-family: var(--en); font-size: calc(var(--u) * 3); letter-spacing: .06em; color: #e9e0ff; }
.timebox b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 8); color: #ffe83a; text-shadow: 0 0 calc(var(--u) * 1.6) #ff9f1a; }
.timebox.low b { color: #ff5f8a; animation: lowp 0.5s ease-in-out infinite; }
@keyframes lowp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.scorebox { flex: none; width: calc(var(--u) * 41); padding-top: 0; }
.stars { display: flex; gap: calc(var(--u) * 2.6); padding-left: calc(var(--u) * 6); height: calc(var(--u) * 4.6); align-items: flex-end; }
.stars i { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); background: #3a3aa0; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); transition: background .3s, filter .3s; }
.stars i.on { background: #ffe83a; filter: drop-shadow(0 0 4px #ffb31a); }
.score-bar { position: relative; height: calc(var(--u) * 4.4); margin-top: calc(var(--u) * .6); background: #0a0c5acc; border: 2px solid #9a8aff; border-radius: 99px; overflow: hidden; box-shadow: 0 0 calc(var(--u) * 1.6) #6a4dff88, inset 0 0 calc(var(--u) * 1.4) #000a; }
.score-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #fff2a0, #ffd23a 50%, #ffa81a); border-radius: 99px; box-shadow: 0 0 8px #ffb31a; }
.score-bar .st { display: none; }
.score-row { display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--u) * .4) calc(var(--u) * 2.4); margin-top: calc(var(--u) * .6); border-radius: calc(var(--u) * 3); background: #0a0c5acc; border: 1.5px solid #8a6bff99; }
.score-row small { font-family: var(--en); font-size: calc(var(--u) * 3); letter-spacing: .08em; color: #fff; }
.score-row b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 5.2); color: #ffe83a; text-shadow: 0 0 calc(var(--u) * 1.2) #ff9f1a; }
.ufo-meter { margin-top: calc(var(--u) * 1.8); display: flex; align-items: center; gap: calc(var(--u) * 1.4); opacity: 0; transition: opacity .3s; }
.ufo-meter.on { opacity: 1; }
.um-label { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 3); color: #ff9fe0; text-shadow: 0 0 6px #ff4fc4; }
.um-bar { flex: 1; height: calc(var(--u) * 2); border-radius: 99px; background: #120b55cc; border: 1.5px solid #ff4fc4aa; overflow: hidden; }
.um-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7dff3a, #ffe83a 55%, #ff3a5c); border-radius: 99px; }
.hud-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.6); }
#btn-pause { pointer-events: auto; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #4a8bff, #1747c7); border: calc(var(--u) * .6) solid #fff; box-shadow: 0 0 calc(var(--u) * 2) #37b8ff; display: grid; place-items: center; padding: 0; }
#btn-pause svg { width: 52%; height: 52%; fill: #fff; }
#cow-icons { display: flex; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2); background: #0a0c3dcc; border: 1.5px solid #8a6bff88; }
#cow-icons .ci { width: calc(var(--u) * 8.6); height: calc(var(--u) * 7.4); border-radius: calc(var(--u) * 1.6); background: linear-gradient(180deg, #1a1a70, #0a0c3d); border: 1.5px solid #8a8aff; padding: calc(var(--u) * .7); transition: filter .4s, opacity .4s, transform .3s; }
#cow-icons .ci img { width: 100%; height: 100%; object-fit: contain; }
#cow-icons .ci.lost { filter: grayscale(1) brightness(.3); opacity: .5; transform: scale(.9); }
#cow-icons .ci.shake { animation: cishake .5s linear 3; }
@keyframes cishake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-6deg); } 75% { transform: translateX(3px) rotate(6deg); } }

/* ---------- 盤面 ---------- */
#boardwrap { position: absolute; left: calc((var(--gw) - var(--bw)) / 2); top: var(--sh); width: var(--bw); height: var(--bh); }
#board { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 3); touch-action: none;
  background: linear-gradient(180deg, #091052, #070b3c); box-shadow: 0 0 0 2px #7f9bff, 0 0 calc(var(--u) * 3.4) #5f84ffcc, 0 0 calc(var(--u) * 8) #3a4fff66, inset 0 0 calc(var(--u) * 5) #2a3fd088; }
.fever-on #board { animation: fevboard .7s ease-in-out infinite; }
@keyframes fevb { 0%, 100% { filter: hue-rotate(0); } 50% { filter: hue-rotate(40deg); } }
/* 盤面は色相を変えない(ピンクと紫が見分けにくくなるため)。ふちの光だけ脈打たせる */
@keyframes fevboard { 0%, 100% { box-shadow: 0 0 0 2px #ffe83a, 0 0 calc(var(--u) * 4) #ffe83a, 0 0 calc(var(--u) * 8) #ffb31a88; } 50% { box-shadow: 0 0 0 2px #fff6a0, 0 0 calc(var(--u) * 6) #fff27a, 0 0 calc(var(--u) * 12) #ffd23acc; } }
.cellbg { position: absolute; border-radius: calc(var(--u) * 2.2); background: linear-gradient(180deg, #0d1566, #080d4a); border: 1px solid #3a4fd855; box-shadow: inset 0 0 calc(var(--u) * 1.6) #000a; }
.pc { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); will-change: transform; transition: transform .34s cubic-bezier(.3, 1.45, .5, 1); touch-action: none; }
.pc::before { content: ""; position: absolute; left: 4%; top: 4%; right: 4%; bottom: 4%; border-radius: 50%; background: radial-gradient(circle, var(--g) 0, transparent 68%); opacity: 0; }
.pc > svg { position: relative; display: block; width: 100%; height: 100%; padding: 1%; transition: transform .12s; overflow: visible; }
.pc.sp > svg { padding: 6%; }
.pc.t0 { --g: #7dff3a; } .pc.t1 { --g: #ff5fc4; } .pc.t2 { --g: #37b8ff; } .pc.t3 { --g: #ffe83a; } .pc.t4 { --g: #b36bff; }
.pc.sel > svg { transform: scale(1.14); filter: drop-shadow(0 0 calc(var(--u) * 1.6) var(--g)) brightness(1.22) saturate(1.2); }
.pc.sel::before { opacity: .55; }
.pc.pop { transition: none; animation: pcpop .3s ease-out forwards; z-index: 3; }
@keyframes pcpop { 0% { transform: var(--tf) scale(1); opacity: 1; } 40% { transform: var(--tf) scale(1.35); opacity: 1; filter: brightness(2); } 100% { transform: var(--tf) scale(.2); opacity: 0; } }
.pc.suck { transition: transform .45s cubic-bezier(.6, 0, .9, .5), opacity .45s; opacity: .1; }
.pc.hint > svg { animation: hint 0.7s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.14); filter: brightness(1.6) drop-shadow(0 0 8px #fff); } }
.pc.sp::before { opacity: .9; width: auto; animation: spglow 1s ease-in-out infinite; background: radial-gradient(circle, #ff7ae0 0, transparent 68%); }
.pc.sp.bomb::before { background: radial-gradient(circle, #ff8a3a 0, transparent 68%); }
.pc.sp.laser::before { background: radial-gradient(circle, #6fd0ff 0, transparent 68%); }
.pc.sp.hole::before { background: radial-gradient(circle, #b36bff 0, transparent 68%); }
@keyframes spglow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pc.sp > svg { animation: spbob 1.1s ease-in-out infinite; }
@keyframes spbob { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.07) rotate(3deg); } }
.pc.sp.laser.v > svg { rotate: 90deg; }
.pc.sp.hole > svg { animation: holespin 3s linear infinite; }
@keyframes holespin { to { transform: rotate(360deg); } }
.pc.spsel { z-index: 4; }
.pc.spsel > svg { animation: none; transform: scale(1.22); filter: drop-shadow(0 0 calc(var(--u) * 2) #fff) brightness(1.3); }
.pc.spsel::after { content: ""; position: absolute; left: -6%; top: -6%; right: -6%; bottom: -6%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 12px #fff; animation: ring 0.8s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: scale(.94); opacity: 1; } 50% { transform: scale(1.06); opacity: .6; } }
.pc.fusable::after { content: ""; position: absolute; left: -4%; top: -4%; right: -4%; bottom: -4%; border-radius: 50%; border: 3px dashed #ffe83a; box-shadow: 0 0 10px #ffe83a; animation: spin 2s linear infinite; }
.pc.fusetarget { z-index: 5; }
.pc.fusetarget > svg { transform: scale(1.22); filter: drop-shadow(0 0 calc(var(--u) * 2) #ffe83a) brightness(1.3); animation: none; }
.pc.fusetarget::after { border-color: #fff; border-style: solid; animation: ring .5s ease-in-out infinite; }
.pc.locked > svg { filter: grayscale(1) brightness(.6) contrast(1.1); }
.pc.locked::before { opacity: 0; }
.pc.locked::after { content: ""; position: absolute; left: 6%; top: 6%; right: 6%; bottom: 6%; border-radius: calc(var(--u) * 2); background:
  repeating-linear-gradient(0deg, #ffffff22 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, #ff4fc455 0 3px, transparent 3px 9px);
  border: 2px solid #ff4fc4; animation: noise 0.25s steps(3) infinite; }
@keyframes noise { 0% { opacity: .9; background-position: 0 0, 0 0; } 33% { opacity: .55; background-position: 0 2px, 3px 0; } 66% { opacity: .8; background-position: 0 4px, 6px 0; } 100% { opacity: .65; background-position: 0 1px, 2px 0; } }
.pc.shuf { animation: shuf .5s ease-in-out; }
@keyframes shuf { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2); } }
#range { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#range .rg { position: absolute; border-radius: calc(var(--u) * 2); background: #ffffff22; border: 2px dashed #ffffffaa; animation: rg .7s ease-in-out infinite; }
@keyframes rg { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
#trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#trace polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#trace-glow { stroke: #fff; stroke-width: calc(var(--cell) * .3); opacity: .35; }
#trace-core { stroke: #fff; stroke-width: calc(var(--cell) * .1); filter: drop-shadow(0 0 6px #fff); }
#combo { position: absolute; left: calc(var(--u) * 1.5); top: calc(var(--u) * -9); padding: calc(var(--u) * .8) calc(var(--u) * 3) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2.4); background: linear-gradient(135deg, #ff4fc4, #8a4dff); border: 2px solid #fff; box-shadow: 0 0 calc(var(--u) * 2) #ff4fc4; transform: rotate(-4deg); display: flex; align-items: baseline; gap: calc(var(--u) * 1.2); overflow: hidden; z-index: 6; }
#combo b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 6.4); line-height: 1; }
#combo small { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 3.2); letter-spacing: .06em; }
#combo i { position: absolute; left: 0; bottom: 0; height: calc(var(--u) * .9); width: 100%; background: #ffe83a; transform-origin: 0 0; }
#combo.bump { animation: bump .25s ease-out; }
@keyframes bump { 0% { transform: rotate(-4deg) scale(1.3); } 100% { transform: rotate(-4deg) scale(1); } }
#jam-tag { position: absolute; right: calc(var(--u) * 1.5); top: calc(var(--u) * -7); padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: 99px; background: #3a0a3acc; border: 2px solid #ff4fc4; color: #ffd0f2; font-weight: 700; font-size: calc(var(--u) * 3.1); animation: lowp 1s ease-in-out infinite; z-index: 6; }

[hidden] { display: none !important; }

/* ---------- 下部 ---------- */
#bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--bth); display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * 3) calc(var(--u) * 1); }
.def { flex: 1.15; display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.def-icon { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: calc(var(--u) * 3.4); background: radial-gradient(circle at 40% 30%, #2a2a9a, #120b55); border: 2px solid #8a6bff; box-shadow: 0 0 calc(var(--u) * 2) #6a4dff; display: grid; place-items: center; }
.def-icon img { width: 86%; height: auto; display: block; }
.def-bar { position: relative; flex: 1; height: calc(var(--u) * 6.2); border-radius: 99px; background: #120b55; border: 2px solid #8a6bff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.def-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffb31a, #ffe83a); transition: width .12s; }
.def-bar span { position: relative; font-weight: 700; font-size: calc(var(--u) * 2.6); text-shadow: 0 1px 3px #000; white-space: nowrap; }
.def-bar.full i { animation: lowp .4s linear infinite; }
.shield-btn { position: relative; flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #3a4fd0, #130c60); border: 3px solid #7ff0ff; box-shadow: 0 0 calc(var(--u) * 2.2) #37b8ff; padding: calc(var(--u) * 2); transition: filter .2s, transform .15s; }
.shield-btn svg { width: 100%; height: 100%; }
.shield-btn b { position: absolute; right: -4px; bottom: -4px; min-width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); padding: 0 4px; border-radius: 99px; background: #2a6bff; border: 2px solid #fff; font-family: var(--en); font-size: calc(var(--u) * 3.6); display: grid; place-items: center; }
.shield-btn.empty { filter: grayscale(.9) brightness(.55); }
.shield-btn.ready { animation: lowp 0.8s ease-in-out infinite; }
.shield-btn:active { transform: scale(.92); }
.fever { flex: 1.1; min-width: 0; }
.fever-bar { position: relative; height: calc(var(--u) * 11); border-radius: 99px; background: #2a0a55; border: 3px solid #ff7ad9; box-shadow: 0 0 calc(var(--u) * 2) #ff4fc4aa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fever-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ff4fc4, #ffb3ec); }
.fever-bar span { position: relative; font-weight: 900; font-size: calc(var(--u) * 4.4); color: #fff; text-shadow: 0 0 8px #ff4fc4, 0 2px 0 #7a1f5a; letter-spacing: .04em; }
.fever-bar.active { border-color: #ffe83a; box-shadow: 0 0 calc(var(--u) * 3) #ffe83a; animation: fevb .5s linear infinite; }
.fever-bar.active i { background: linear-gradient(90deg, #ffe83a, #ff7ad9, #7ff0ff); }
.fever-bar.full span { animation: lowp .45s ease-in-out infinite; }

/* ---------- 演出 ---------- */
#fx { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; }
#ptxt { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 21; overflow: hidden; }
.ptxt { position: absolute; transform: translate(-50%, -50%); font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 5); white-space: nowrap; color: #fff; -webkit-text-stroke: calc(var(--u) * .5) #5a1f9a; paint-order: stroke fill; text-shadow: 0 0 calc(var(--u) * 1.6) #ff4fc4; animation: ptxt .9s ease-out forwards; }
.ptxt.big { font-size: calc(var(--u) * 8); color: #ffe83a; }
.ptxt.chain { font-size: calc(var(--u) * 8); color: #7ff0ff; -webkit-text-stroke-color: #0a3c9a; text-shadow: 0 0 calc(var(--u) * 2) #37b8ff; }
.ptxt.pt { font-size: calc(var(--u) * 4.2); color: #ffe83a; -webkit-text-stroke-color: #7a4a00; text-shadow: 0 0 6px #ff9f1a; }
@keyframes ptxt { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
#banner { position: absolute; left: 0; right: 0; top: calc(var(--sh) * .42); z-index: 25; display: flex; justify-content: center; pointer-events: none; }
.bn { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.8) calc(var(--u) * 5); border-radius: calc(var(--u) * 3); font-weight: 900; font-size: calc(var(--u) * 6.6); letter-spacing: .04em; color: #fff; animation: bn var(--dur, 2s) ease-out forwards; white-space: nowrap; text-shadow: 0 2px 0 #0006; }
.bn svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.bn.warn { background: linear-gradient(180deg, #ff4a5c, #b0102a); border: 3px solid #fff; box-shadow: 0 0 calc(var(--u) * 4) #ff2a4a; }
.bn.loss { background: linear-gradient(180deg, #7a3dd0, #2a1478); border: 3px solid #ffd0ff; box-shadow: 0 0 calc(var(--u) * 4) #b36bff; font-size: calc(var(--u) * 5.6); }
.bn.good { background: linear-gradient(180deg, #38d8ff, #1747c7); border: 3px solid #fff; box-shadow: 0 0 calc(var(--u) * 4) #37b8ff; }
.bn.fever { background: none; padding: 0; text-shadow: none; font-size: calc(var(--u) * 10); justify-content: center; }
.bn.sub { background: linear-gradient(180deg, #ff7ad9, #8a2dc0); border: 3px solid #fff; font-size: calc(var(--u) * 5); }
@keyframes bn { 0% { opacity: 0; transform: scale(.4) rotate(-4deg); } 10% { opacity: 1; transform: scale(1.14) rotate(1deg); } 18% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(calc(var(--u) * -3)); } }
#toast { position: absolute; left: 50%; bottom: calc(var(--bth) + var(--u) * 1); transform: translateX(-50%); z-index: 26; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.tst { padding: calc(var(--u) * 1.4) calc(var(--u) * 4); border-radius: 99px; background: #120b55ee; border: 2px solid #ffe83a; font-weight: 700; font-size: calc(var(--u) * 3.4); animation: tst 2.6s ease-out forwards; white-space: nowrap; box-shadow: 0 0 12px #ffe83a88; }
@keyframes tst { 0% { opacity: 0; transform: translateY(10px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#last10 { position: absolute; left: 0; right: 0; top: calc(var(--sh) * .22); text-align: center; z-index: 24; pointer-events: none; font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 30); color: #ff5f8a; -webkit-text-stroke: calc(var(--u) * 1) #fff; paint-order: stroke fill; text-shadow: 0 0 calc(var(--u) * 4) #ff2a4a; opacity: 0; }
#last10.tick { animation: l10 .9s ease-out; }
@keyframes l10 { 0% { opacity: 0; transform: scale(1.8); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(.8); } }
.shake { animation: gshake .4s linear; }
@keyframes gshake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(3px, 3px); } }
.flash { animation: gflash .5s ease-out; }
@keyframes gflash { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.paused #scene *, .paused #board *, .paused #bottom *, .paused .ptxt { animation-play-state: paused !important; }

/* ---------- 画面(オーバーレイ) ---------- */
.screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 40; display: none; align-items: center; justify-content: center; }
.screen.show { display: flex; animation: scin .25s ease-out; }
@keyframes scin { from { opacity: 0; } to { opacity: 1; } }
#howto, #settings, #stats, #pause, #chooser { background: rgba(5, 5, 40, .86); z-index: 60; }
.panel { width: calc(var(--gw) * .88); max-width: 460px; max-height: 92%; overflow: auto; padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4); border-radius: calc(var(--u) * 6); background: linear-gradient(180deg, #241a8a, #120b55); border: 3px solid #b8a6ff; box-shadow: 0 0 calc(var(--u) * 6) #6a4dff; touch-action: pan-y; }
.panel.wide { width: calc(var(--gw) * .94); }
.panel h2 { margin: 0 0 calc(var(--u) * 3); text-align: center; font-size: calc(var(--u) * 6); font-weight: 900; color: #ffe83a; text-shadow: 0 0 10px #ff9f1a; }
.panel h3 { margin: calc(var(--u) * 2) 0 calc(var(--u) * 1.4); font-size: calc(var(--u) * 4.4); color: #ffb3ec; text-align: center; }
.panel p { margin: 0; font-size: calc(var(--u) * 3.5); line-height: 1.8; }
.panel p b { color: #ffe83a; }
.panel-buttons { margin-top: calc(var(--u) * 4); display: flex; gap: calc(var(--u) * 2.4); justify-content: center; align-items: center; flex-wrap: wrap; }
.panel-col { display: flex; flex-direction: column; gap: calc(var(--u) * 2.6); align-items: stretch; margin-bottom: calc(var(--u) * 3); }
.btn-main { padding: calc(var(--u) * 3.2) calc(var(--u) * 8); border-radius: 99px; font-size: calc(var(--u) * 6.6); font-weight: 900; letter-spacing: .1em; color: #fff; background: linear-gradient(180deg, #ff6af2 0%, #e02cf0 48%, #b010e0 100%); border: 3px solid #fff; box-shadow: inset 0 calc(var(--u) * .8) 0 rgba(255,255,255,.45), inset 0 calc(var(--u) * -1) 0 rgba(120,0,160,.35), 0 0 0 calc(var(--u) * .9) #b83cff, 0 0 calc(var(--u) * 5) #ff4ff0, 0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(60,0,100,.5); text-shadow: 0 2px 0 #8a10a8, 0 0 calc(var(--u) * 2) rgba(255,255,255,.5); transition: transform .1s; }
.btn-main.small { font-size: calc(var(--u) * 4.4); padding: calc(var(--u) * 2.2) calc(var(--u) * 6); }
.btn-main:active, .btn-sub:active { transform: translateY(2px) scale(.97); }
.btn-sub { display: inline-block; text-decoration: none; text-align: center; padding: calc(var(--u) * 2.2) calc(var(--u) * 4.6); border-radius: 99px; font-size: calc(var(--u) * 3.9); font-weight: 700; letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #3f95ff 0%, #1f5cf0 55%, #1a3ad0 100%); border: 2.5px solid #fff; box-shadow: inset 0 calc(var(--u) * .6) 0 rgba(255,255,255,.4), 0 0 0 calc(var(--u) * .5) #2a6bff, 0 0 calc(var(--u) * 3) #37b8ff, 0 calc(var(--u) * .8) calc(var(--u) * 1.2) rgba(0,0,60,.5); text-shadow: 0 1px 2px rgba(0,0,80,.7); transition: transform .1s; }
.btn-sub.wide { padding: calc(var(--u) * 3) 0; font-size: calc(var(--u) * 4.4); }
.btn-sub.danger { background: linear-gradient(180deg, #7a2a5a, #4a0a3a); border-color: #ff9be8; }
.btn-row { display: flex; gap: calc(var(--u) * 2.2); justify-content: center; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); padding: calc(var(--u) * 2) 0; border-bottom: 1px solid #ffffff22; font-size: calc(var(--u) * 3.8); font-weight: 700; }
.set-row input[type=range] { width: 46%; accent-color: #ff4fc4; height: calc(var(--u) * 5); }
.set-row input[type=checkbox] { width: calc(var(--u) * 6); height: calc(var(--u) * 6); accent-color: #ff4fc4; }
.set-note { margin-top: calc(var(--u) * 2) !important; font-size: calc(var(--u) * 3) !important; color: #c9c4ff; }

/* 遊び方 */
.how-viewport { overflow: hidden; border-radius: calc(var(--u) * 3); touch-action: pan-y; }
.how-track { display: flex; transition: transform .35s ease; }
.how-page { flex: none; width: 100%; padding: 0 calc(var(--u) * .6); }
.how-fig { height: calc(var(--u) * 34); border-radius: calc(var(--u) * 3); background: radial-gradient(circle at 50% 40%, #2a2aa0, #0c0c4a); border: 2px solid #5f6bff; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); }
.how-fig svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.how-fig .ufo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 2) #b36bff); }
.how-fig .hf-line { position: absolute; left: 20%; right: 20%; top: 50%; height: calc(var(--u) * 1.6); border-radius: 99px; background: #fff; box-shadow: 0 0 12px #fff; opacity: .85; transform: scaleX(0); transform-origin: 0 50%; animation: hfl 2.4s ease-in-out infinite; }
@keyframes hfl { 0% { transform: scaleX(0); } 50%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.how-fig .hf-hand { position: absolute; width: calc(var(--u) * 9); left: 16%; top: 54%; animation: hfh 2.4s ease-in-out infinite; }
@keyframes hfh { 0% { left: 16%; } 50%, 85% { left: 68%; } 100% { left: 68%; opacity: 0; } }
.how-fig.items svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.how-fig .lab { position: absolute; bottom: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3); font-weight: 700; color: #ffe83a; }
.how-fig .col { display: flex; flex-direction: column; align-items: center; }
.how-fig .col span { font-size: calc(var(--u) * 3); font-weight: 700; color: #ffe83a; }
.how-fig .mini-cow { width: calc(var(--u) * 24); }
.how-fig .mini-cow .cow-pic { width: 100%; height: auto; display: block; }
.how-dots { display: flex; justify-content: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); }
.how-dots i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: #ffffff44; }
.how-dots i.on { background: #ffe83a; box-shadow: 0 0 8px #ffe83a; }
.how-page p { margin-top: calc(var(--u) * 1.5); }

/* きろく */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.stat { padding: calc(var(--u) * 2) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); background: #0a0c3d99; border: 1.5px solid #8a6bff88; }
.stat small { display: block; font-size: calc(var(--u) * 2.8); color: #c9c4ff; }
.stat b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 5.2); color: #ffe83a; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.6); }
.ach-list li { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); background: #0a0c3d99; border: 1.5px solid #ffffff22; opacity: .6; }
.ach-list li.got { opacity: 1; border-color: #ffe83a; background: #3a2a0a66; }
.ach-list .mk { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; border: 2px solid #ffffff55; display: grid; place-items: center; }
.ach-list li.got .mk { background: #ffe83a; border-color: #fff; }
.ach-list li.got .mk::after { content: ""; width: 38%; height: 20%; border-left: 3px solid #5a3a00; border-bottom: 3px solid #5a3a00; transform: rotate(-45deg) translate(1px, -1px); }
.ach-list b { display: block; font-size: calc(var(--u) * 3.6); }
.ach-list small { display: block; font-size: calc(var(--u) * 2.9); color: #c9c4ff; line-height: 1.4; }

/* 色選択 */
.choose-row { display: flex; gap: calc(var(--u) * 1.2); justify-content: center; flex-wrap: wrap; }
.choose-row button { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 3.4); background: #0a0c3d; border: 3px solid var(--g); box-shadow: 0 0 calc(var(--u) * 2) var(--g); padding: calc(var(--u) * 1); position: relative; }
.choose-row button svg { width: 100%; height: 100%; }
.choose-row button small { position: absolute; right: 2px; bottom: 0; font-family: var(--en); font-size: calc(var(--u) * 3.2); color: #fff; text-shadow: 0 1px 3px #000; }
.choose-row button:active { transform: scale(.92); }

/* カウントダウン */
#countdown { z-index: 45; background: rgba(5, 5, 40, .35); pointer-events: none; }
#count-n { font-size: calc(var(--u) * 46); animation: cnt .9s ease-out infinite; }
@keyframes cnt { 0% { transform: scale(2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: .9; } }
#count-n.go { font-size: calc(var(--u) * 15); }

/* ---------- タイトル ---------- */
#title { z-index: 55; background: #0a0c3d; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.title-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #0a0c3d; }
.t-sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #050a45, #0a1280 45%, #3b33bd 100%); }
.t-scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.t-scene > .scene-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.t-mini { position: absolute; pointer-events: none; animation: mini 7s ease-in-out infinite; }
.t-mini .ufo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 2) #b36bff); }
.tm1 { left: -3%; top: 36%; width: 25%; transform: rotate(-12deg); }
.tm2 { right: -4%; top: 40%; width: 24%; transform: rotate(10deg) scaleX(-1); animation-delay: -2s; }
.tm3 { left: 62%; top: 47.5%; width: 13%; opacity: .85; animation-delay: -4s; }
.tm3 .ufo-img { filter: hue-rotate(-40deg) drop-shadow(0 0 calc(var(--u) * 2) #4aa8ff); }
.tm4 { left: 14%; top: 43%; width: 11%; opacity: .8; animation-delay: -1s; }
.tm4 .ufo-img { filter: hue-rotate(35deg) drop-shadow(0 0 calc(var(--u) * 2) #ff6fc0); }
.t-beam { position: absolute; left: 44%; width: 50%; top: 30%; height: 44%; mix-blend-mode: screen; opacity: .95; animation: beamf .22s linear infinite; }
.t-beam svg { width: 100%; height: 100%; display: block; }
.t-ufo { position: absolute; left: 24%; width: 76%; top: 24%; animation: tufo 3.2s ease-in-out infinite; z-index: 1; }
@keyframes tufo { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(calc(var(--u) * -2)) rotate(1.5deg); } }
.t-ufo .ufo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 4) #b36bff); animation: ufoglow 1.8s ease-in-out infinite alternate; }
.t-scene::after { content: ""; position: absolute; left: 12%; width: 76%; top: 62%; height: 20%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(190, 255, 255, .55), rgba(120, 230, 255, .22) 55%, transparent 80%); pointer-events: none; }
.t-cow { position: absolute; left: 57%; width: 19%; top: 50%; animation: tcow 4s ease-in-out infinite; }
@keyframes tcow { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(calc(var(--u) * -3)) rotate(10deg); } }
.t-cow .cow-pic { filter: drop-shadow(0 0 calc(var(--u) * 2) #9fe9ff) brightness(1.1); }
.t-c { position: absolute; }
.t-c1 { left: -2%; width: 35%; bottom: 27%; }
.t-c2 { right: -2%; width: 35%; bottom: 27.5%; }
.t-c3 { left: 34%; width: 28%; bottom: 29.5%; }
.t-c .cow-pic { width: 100%; display: block; }
.t-c .cow-flip.flip { transform: scaleX(-1); }
.tsp { position: absolute; z-index: 3; pointer-events: none; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px #fff); animation: tw 2.4s ease-in-out infinite; }
.title-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3); }
.logo { margin: calc(var(--u) * -1) 0 0 -6%; width: 112%; position: relative; z-index: 2; line-height: 0; animation: logobob 3.6s ease-in-out infinite; }
@keyframes logobob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1)); } }
.title-hero { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 calc(var(--u) * 1.4) rgba(120, 60, 255, .45)); }
.tagline { margin: 0; text-align: center; font-weight: 900; font-size: calc(var(--u) * 3.6); line-height: 1.5; color: #fff; text-shadow: 0 2px 6px #0a3a1a, 0 0 8px #0a3a1a, 0 0 3px #063; }
.t-buttons { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.8); width: 100%; }
.t-buttons .btn-main { width: 66%; }
.t-buttons .btn-row { width: 100%; gap: calc(var(--u) * 2); }
.t-buttons .btn-sub { flex: 1; padding: calc(var(--u) * 2.6) 0; font-size: calc(var(--u) * 4.2); }
.t-best { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.5); font-weight: 900; color: #ffe83a; text-shadow: 0 2px 6px #000, 0 0 8px #0a3a1a; min-height: 1.4em; }
.t-site { margin: calc(var(--u) * .6) 0 0; font-size: calc(var(--u) * 3); color: #fff; text-shadow: 0 2px 6px #000, 0 0 6px #063; }
.t-site a { text-decoration: underline; text-underline-offset: 3px; }
.t-site span { margin: 0 .4em; }

/* ---------- 最初の「タップしてスタート」 ---------- */
#gate { z-index: 70; align-items: center; justify-content: center; background: rgba(5, 5, 40, .6); cursor: pointer; }
.gate-body { padding-top: calc(var(--u) * 20); text-align: center; }
.gate-tap { margin: 0; display: inline-flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 3.4) calc(var(--u) * 8); border-radius: 99px; font-size: calc(var(--u) * 6.6); font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(180deg, #ff6af2 0%, #e02cf0 48%, #b010e0 100%); border: 3px solid #fff; box-shadow: inset 0 calc(var(--u) * .8) 0 rgba(255,255,255,.45), 0 0 0 calc(var(--u) * .9) #b83cff, 0 0 calc(var(--u) * 5) #ff4ff0; text-shadow: 0 2px 0 #8a10a8; animation: gatepulse 1.1s ease-in-out infinite; }
.gate-tap svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.gate-note { margin: calc(var(--u) * 2.6) 0 0; font-size: calc(var(--u) * 3.3); font-weight: 700; color: #fff; text-shadow: 0 2px 6px #000; }
@keyframes gatepulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- 結果 ---------- */
#result { z-index: 56; background: rgba(5, 5, 40, .82); align-items: stretch; }
.result-scroll { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--u) * 12) calc(var(--u) * 3.6) calc(var(--u) * 8); }
.result-card { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); margin: auto 0; }
.res-title { font-size: calc(var(--u) * 8); max-width: 100%; text-align: center; line-height: 1.05; transform: rotate(-3deg); animation: restitle .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes restitle { 0% { transform: rotate(-3deg) scale(.2); opacity: 0; } 100% { transform: rotate(-3deg) scale(1); opacity: 1; } }
/* ぷっくり見出し文字: 濃いふち→白い細線→グラデーションの3層 */
.bt { --dk: #1f3aa8; --gl: #8a80ff; position: relative; display: inline-block; font-family: "Mochiy Pop One", var(--en); font-weight: 400; letter-spacing: .02em; line-height: 1.05; white-space: nowrap; filter: drop-shadow(0 0 calc(var(--u) * 2.4) var(--gl)); }
.bt b { font-weight: inherit; display: block; }
.bt .b1 { color: var(--dk); -webkit-text-stroke: calc(var(--u) * 3.4) var(--dk); }
.bt .b2, .bt .b3 { position: absolute; left: 0; top: 0; width: 100%; text-align: center; }
.bt .b2 { color: #fff; -webkit-text-stroke: calc(var(--u) * 1.7) #fff; }
.bt .b3 { background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bt-clear { --dk: #1f34b0; --gl: #7f8cff; --g1: #fffbd2; --g2: #ffe864; --g3: #ffae2c; }
.bt-over { --dk: #3a0f8f; --gl: #b45aff; --g1: #ffe0f8; --g2: #ff9ee8; --g3: #c872ff; }
.bt-fever { --dk: #7a1a9a; --gl: #ff6ae8; --g1: #fff2a0; --g2: #ff8ad8; --g3: #7fe8ff; }
.bt-go { --dk: #7a1f9a; --gl: #ff4fe0; --g1: #fffbd2; --g2: #ffd84a; --g3: #ff7ad0; }
.res-sub { margin: 0; text-align: center; font-weight: 700; font-size: calc(var(--u) * 4.2); color: #ffe0f8; text-shadow: 0 0 10px #ff4fc4; min-height: 1.4em; }
.res-rank { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.res-rank small { font-family: var(--en); font-size: calc(var(--u) * 4); letter-spacing: .1em; color: #c9c4ff; }
.res-rank b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 20); line-height: 1; color: #ffe83a; -webkit-text-stroke: calc(var(--u) * .8) #7a4a00; paint-order: stroke fill; text-shadow: 0 0 calc(var(--u) * 4) #ff9f1a; animation: rank .7s .3s cubic-bezier(.3, 1.8, .5, 1) both; }
.res-rank.S b { color: #7ff0ff; -webkit-text-stroke-color: #0a3c9a; text-shadow: 0 0 calc(var(--u) * 5) #37b8ff; }
.res-rank.none { display: none; }
@keyframes rank { 0% { transform: scale(3) rotate(-20deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.res-cows { display: flex; gap: calc(var(--u) * 2); }
.res-cows .ci { width: calc(var(--u) * 15); height: calc(var(--u) * 12); background: linear-gradient(180deg, #1a1a70, #0a0c3d); border: 2px solid #8a8aff; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1); }
.res-cows .ci.lost { filter: grayscale(1) brightness(.35); opacity: .55; }
.res-cows .ci img { width: 100%; height: 100%; object-fit: contain; }
.res-table { width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--u) * 1); }
.res-table td { padding: calc(var(--u) * 1.4) calc(var(--u) * 3); background: #12127acc; font-size: calc(var(--u) * 3.8); font-weight: 700; border-top: 1.5px solid #8a6bff88; border-bottom: 1.5px solid #8a6bff88; }
.res-table td:first-child { border-left: 1.5px solid #8a6bff88; border-radius: calc(var(--u) * 2.4) 0 0 calc(var(--u) * 2.4); color: #c9c4ff; }
.res-table td:last-child { border-right: 1.5px solid #8a6bff88; border-radius: 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4) 0; text-align: right; font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 4.6); color: #fff; }
.res-table tr.hi td:last-child { color: #ffe83a; }
.new-tag { display: inline-block; margin-left: .5em; padding: 0 .6em; border-radius: 99px; background: #ff4fc4; color: #fff; font-size: .62em; vertical-align: .15em; animation: lowp .6s ease-in-out infinite; }
.res-new { width: 100%; display: grid; gap: 6px; }
.res-new .tst { animation: none; opacity: 1; text-align: center; font-size: calc(var(--u) * 3.4); }
.res-buttons { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 1); }
.res-buttons .btn-main { width: 76%; }
.share-row { display: flex; gap: calc(var(--u) * 1.8); flex-wrap: wrap; justify-content: center; }
.share-row .btn-sub { font-size: calc(var(--u) * 3.4); padding: calc(var(--u) * 2) calc(var(--u) * 3.6); }
#book-slot { width: 100%; margin-top: calc(var(--u) * 2); }
.book-card { width: 100%; padding: calc(var(--u) * 3.4); border-radius: calc(var(--u) * 4.4); background: linear-gradient(180deg, #fff9fd, #efe6ff); color: #2a2d5e; border: 3px solid #ffd0f2; box-shadow: 0 0 calc(var(--u) * 4) #ff4fc466; animation: scin .5s .6s both; }
.book-head { margin: 0 0 calc(var(--u) * 2); text-align: center; font-weight: 900; font-size: calc(var(--u) * 4); color: #b01f78; line-height: 1.4; }
.book-body { display: flex; gap: calc(var(--u) * 3.4); align-items: center; text-decoration: none; color: inherit; }
.book-cover { flex: none; width: calc(var(--u) * 26); display: block; }
.book-cover img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 6px 14px #2a1a7855; }
.book-info { display: flex; flex-direction: column; gap: calc(var(--u) * .8); min-width: 0; }
.book-client { font-size: calc(var(--u) * 2.8); color: #6b6e97; font-weight: 700; }
.book-title { font-size: calc(var(--u) * 4.2); font-weight: 900; line-height: 1.4; }
.book-sub { font-size: calc(var(--u) * 3); color: #565a8a; line-height: 1.5; }
.book-go { margin-top: calc(var(--u) * 1); align-self: flex-start; padding: calc(var(--u) * 1.4) calc(var(--u) * 3.6); border-radius: 99px; background: #ff9900; color: #1a1a1a; font-weight: 900; font-size: calc(var(--u) * 3.4); box-shadow: 0 3px 0 #b36b00; }
.book-note { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.1); color: #565a8a; text-align: center; line-height: 1.6; }
.book-links { margin: calc(var(--u) * 2) 0 0; display: flex; justify-content: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 3.3); font-weight: 700; }
.book-links a { color: #b01f78; }
.book-aff { margin: calc(var(--u) * 1.6) 0 0; font-size: calc(var(--u) * 2.5); color: #8a8db5; text-align: center; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .star, .windmill, #minis .mini { animation: none; } }

/* ---------- フィーバー中の演出(ピースの色は変えない) ---------- */
#fever-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 18; pointer-events: none; opacity: 0; transition: opacity .35s; border-radius: inherit;
  box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.4) #ff4fd8, inset 0 0 calc(var(--u) * 16) #ffe83a99; }
.fever-on #fever-fx { opacity: 1; animation: fevedge .6s linear infinite; }
@keyframes fevedge {
  0% { box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.4) #ff4fd8, inset 0 0 calc(var(--u) * 16) #ffe83a99; }
  33% { box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.4) #ffe83a, inset 0 0 calc(var(--u) * 16) #7ff0ff99; }
  66% { box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.4) #7ff0ff, inset 0 0 calc(var(--u) * 16) #ff4fd899; }
  100% { box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.4) #ff4fd8, inset 0 0 calc(var(--u) * 16) #ffe83a99; } }
#fever-badge { position: absolute; left: 50%; top: calc(var(--sh) - var(--u) * 7); transform: translate(-50%, -50%) scale(.6); z-index: 19; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; text-align: center; line-height: 1.1; white-space: nowrap; }
#fever-badge b { display: block; font-family: "Mochiy Pop One", var(--en); font-weight: 400; font-size: calc(var(--u) * 7.6); color: #fff; background: linear-gradient(180deg, #fff6a0, #ffb31a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: calc(var(--u) * .5) #fff; paint-order: stroke fill; filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ff4fd8) drop-shadow(0 calc(var(--u) * .5) 0 #7a1f9a); }
#fever-badge small { display: inline-block; margin-top: calc(var(--u) * .6); padding: 0 calc(var(--u) * 2.4); border-radius: 99px; background: #7a1f9acc; border: 1.5px solid #fff; font-weight: 900; font-size: calc(var(--u) * 2.8); color: #fff; }
.fever-on #fever-badge { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: badgebob .5s ease-in-out infinite alternate; }
@keyframes badgebob { from { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } to { transform: translate(-50%, -50%) scale(1.08) rotate(2deg); } }
.fever-on #board { background: radial-gradient(ellipse at 50% 40%, #4a1a8a, #1a0a5a 70%, #0a0640); }
.fever-on .cellbg { background: linear-gradient(180deg, #2a1480, #14084a); border-color: #ffd23a88; }
.fever-on .pc > svg { animation: feverbounce .5s ease-in-out infinite alternate; }
.fever-on .pc:nth-child(3n) > svg { animation-delay: -.17s; } .fever-on .pc:nth-child(3n+1) > svg { animation-delay: -.33s; }
@keyframes feverbounce { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-2px); } }
.fever-on #scene { filter: brightness(1.12) saturate(1.25); }

/* ---------- 結果画面: 本の紹介を1画面目に収める ---------- */
.result-scroll { padding: calc(var(--u) * 9) calc(var(--u) * 3.6) calc(var(--u) * 6); }
.result-card { gap: calc(var(--u) * 1.6); }
.res-title { margin-top: calc(var(--u) * 1); }
.res-sub { font-size: calc(var(--u) * 3.6); }
.res-mid { width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); }
.res-rank { flex-direction: column; gap: 0; align-items: center; }
.res-rank small { font-size: calc(var(--u) * 3); }
.res-rank b { font-size: calc(var(--u) * 15); }
.res-rank.none { display: none; }
.res-side { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1); }
.res-cows { gap: calc(var(--u) * 1.2); }
.res-cows .ci { width: calc(var(--u) * 10.4); height: calc(var(--u) * 8.4); padding: calc(var(--u) * .6); border-width: 1.5px; }
.res-score { display: flex; align-items: baseline; gap: calc(var(--u) * 2); }
.res-score small { font-family: var(--en); font-size: calc(var(--u) * 3.2); color: #c9c4ff; letter-spacing: .08em; }
.res-score b { font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 8.6); color: #ffe83a; text-shadow: 0 0 calc(var(--u) * 1.6) #ff9f1a; }
.res-best { margin: 0; font-size: calc(var(--u) * 3.1); font-weight: 700; color: #e0daff; }
.res-name { width: 100%; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: #2a1480cc; border: 2px solid #ffe83a; text-align: center; }
.res-name label { display: block; font-weight: 900; font-size: calc(var(--u) * 3.4); color: #ffe83a; margin-bottom: calc(var(--u) * 1.2); }
.name-row { display: flex; gap: calc(var(--u) * 2); }
.name-row input { flex: 1; min-width: 0; padding: calc(var(--u) * 1.8) calc(var(--u) * 3); border-radius: 99px; border: 2px solid #c9c4ff; background: #0a0c3d; color: #fff; font: inherit; font-size: 16px; font-weight: 700; -webkit-user-select: text; user-select: text; }
.res-buttons { margin-top: 0; gap: calc(var(--u) * 2); }
.book-card { padding: calc(var(--u) * 2.4); }
.book-head { margin-bottom: calc(var(--u) * 1.2); font-size: calc(var(--u) * 3.7); }
.book-cover { width: calc(var(--u) * 21); }
.book-title { font-size: calc(var(--u) * 3.8); }
.book-sub, .book-note { display: none; }
.book-go { padding: calc(var(--u) * 1) calc(var(--u) * 3); font-size: calc(var(--u) * 3.1); }
.book-links { margin-top: calc(var(--u) * 1.2); }
.book-aff { margin-top: calc(var(--u) * 1); }
#book-slot { margin-top: 0; }
.rank-list { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * 1.2); counter-reset: r; }
.rank-list li { counter-increment: r; display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); background: #0a0c3d99; border: 1.5px solid #ffffff22; font-weight: 700; font-size: calc(var(--u) * 3.6); }
.rank-list li::before { content: counter(r); width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: #ffe83a; color: #5a3a00; display: grid; place-items: center; font-family: var(--en); font-weight: 600; flex: none; }
.rank-list li span.n { flex: 1; } .rank-list li span.s { font-family: var(--en); color: #ffe83a; }
.rank-list li.empty { opacity: .5; }
/* ---------- セリフ(ふきだし) ---------- */
.speech { position: absolute; z-index: 22; transform: translate(-50%, -100%); max-width: 62%; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); background: #fff; color: #7a1f9a; font-weight: 900; font-size: calc(var(--u) * 3.6); line-height: 1.35; text-align: center; box-shadow: 0 0 0 2.5px #b36bff, 0 4px 10px rgba(20, 0, 70, .4); pointer-events: none; animation: speech 2.4s ease-out forwards; white-space: nowrap; }
.speech::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.speech.cow { color: #16161d; box-shadow: 0 0 0 2.5px #16161d, 0 4px 10px rgba(20, 0, 70, .4); }
.speech.alien { color: #1a6a1a; box-shadow: 0 0 0 2.5px #5fd83a, 0 4px 10px rgba(20, 0, 70, .4); }
@keyframes speech { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.08); } 20% { transform: translate(-50%, -100%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -112%) scale(1); } }

/* ---------- 運営者の表記(上村絵美・えみちん・うえむランド) ---------- */
.t-by { margin: calc(var(--u) * 1.4) 0 0; font-size: calc(var(--u) * 3); font-weight: 700; color: #fff; text-shadow: 0 2px 6px #000, 0 0 6px #063; text-align: center; line-height: 1.5; }
.t-by a { text-decoration: underline; text-underline-offset: 3px; }
.gate-by { margin: calc(var(--u) * 5) 0 0; font-size: calc(var(--u) * 3.2); font-weight: 700; color: #e0daff; text-shadow: 0 2px 6px #000; }
.res-by { margin: calc(var(--u) * 1) 0 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); width: 100%; border-radius: calc(var(--u) * 3); background: #0a0c3d99; border: 1.5px solid #ffffff33; text-align: center; font-size: calc(var(--u) * 3); line-height: 1.7; color: #e0daff; }
.res-by a { color: #ffe83a; text-underline-offset: 3px; }
.res-by b { font-weight: 900; }

/* ---------- 3面構成: 面のタグ・カード・面ごとの色 ---------- */
.stage-tag { position: absolute; left: calc(var(--u) * 2.4); top: calc(var(--sh) - var(--u) * 8); display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 5; }
.stage-tag b { align-self: flex-start; padding: 0 calc(var(--u) * 2.4); border-radius: 99px; background: #0a0c5acc; border: 1.5px solid #c9c4ff; font-family: var(--en); font-weight: 600; font-size: calc(var(--u) * 3.2); letter-spacing: .06em; color: #fff; }
.stage-tag b i { font-style: normal; color: #ffe83a; }
.stage-tag span { display: none; }
#stagecard { z-index: 48; background: rgba(5, 5, 40, .72); pointer-events: none; }
.sc-box { text-align: center; padding: 0 calc(var(--u) * 5); }
.sc-title { font-size: calc(var(--u) * 6.8); transform: rotate(-3deg); animation: restitle .5s cubic-bezier(.3, 1.6, .5, 1); }
.sc-sub { margin: calc(var(--u) * 3) 0 0; font-weight: 900; font-size: calc(var(--u) * 5.4); color: #fff; text-shadow: 0 0 calc(var(--u) * 2) #ff4fc4, 0 2px 0 #7a1f9a; }
.sc-info { margin: calc(var(--u) * 2) 0 0; font-weight: 700; font-size: calc(var(--u) * 3.6); color: #ffe83a; text-shadow: 0 2px 6px #000; }
#stagecard.clearcard .sc-sub { font-size: calc(var(--u) * 4.4); }
/* 面ごとの盤面のふち・UFOの色 */
.st2 #board { box-shadow: 0 0 0 2px #ffb38a, 0 0 calc(var(--u) * 3.4) #ff8a6acc, 0 0 calc(var(--u) * 8) #ff4f8a66, inset 0 0 calc(var(--u) * 5) #8a2a9a88; background: linear-gradient(180deg, #2a0f62, #1a0a4a); }
.st3 #board { box-shadow: 0 0 0 2px #c58aff, 0 0 calc(var(--u) * 3.4) #b36bffcc, 0 0 calc(var(--u) * 8) #46ffb066, inset 0 0 calc(var(--u) * 5) #5a1068aa; background: linear-gradient(180deg, #14083a, #0a0428); }
.st2 .cellbg { background: linear-gradient(180deg, #2c1470, #1a0a50); border-color: #ff9a8a44; }
.st3 .cellbg { background: linear-gradient(180deg, #1c0c52, #0e0638); border-color: #c58aff44; }
.st2 #ufo { filter: hue-rotate(-38deg) saturate(1.15); }
.st3 #ufo { filter: hue-rotate(75deg) saturate(1.25) brightness(1.05); }
.st2 #beam { filter: hue-rotate(-30deg); }
.st3 #beam { filter: hue-rotate(60deg) saturate(1.2); }
.st2 #scene::before { background: radial-gradient(ellipse 46% 52% at 50% 30%, rgba(255, 190, 120, .35), rgba(255, 110, 150, .16) 55%, transparent 80%); }
.st3 #scene::before { background: radial-gradient(ellipse 46% 52% at 50% 30%, rgba(160, 120, 255, .3), rgba(70, 255, 176, .12) 55%, transparent 80%); }