:root {
  --ink: #23406f;
  --ink-soft: #4f6b98;
  --sky: #8fd0ff;
  --white: #ffffff;
  --pink: #ff6fae;
  --pink2: #ffb3d4;
  --blue: #3aa8ff;
  --blue2: #a9dcff;
  --mint: #34d0a0;
  --mint2: #aef1d8;
  --yellow: #ffbf2e;
  --yellow2: #ffe7a3;
  --purple: #9a72ff;
  --purple2: #d9cbff;
  --panel: rgba(255, 255, 255, 0.86);
  --shadow: 0 4px 0 rgba(40, 90, 170, 0.18), 0 8px 20px rgba(40, 90, 170, 0.18);
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #8fd0ff;
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: manipulation;
}
#bg {
  position: fixed; inset: 0; background: #8fd0ff url(../assets/bg/sky_day.jpg) center / cover no-repeat;
  transition: filter .4s;
}
#bg.dusk { background-image: url(../assets/bg/sky_dusk.jpg); }
#bg.soft::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(225, 242, 255, .55), rgba(200, 230, 255, .35)); }
#app {
  position: fixed; inset: 0; margin: 0 auto; max-width: 560px;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}
button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
h2, h3 { margin: 0; }

.screen { position: absolute; inset: var(--sat) var(--sar) var(--sab) var(--sal); display: none; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- ボタン ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 900; font-size: 18px; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff 0%, #eef7ff 100%);
  border: 3px solid #fff; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .08s;
}
.btn:active { transform: translateY(2px) scale(.98); }
.btn.big { min-height: 64px; font-size: 22px; }
.btn.slim { min-height: 44px; font-size: 16px; }
.btn.tiny { min-height: 34px; font-size: 13px; padding: 0 10px; border-width: 2px; }
.btn.pink { background: linear-gradient(180deg, #ffd6e8 0%, #ff9cc8 100%); color: #c2185b; }
.btn.blue { background: linear-gradient(180deg, #d7efff 0%, #8fcfff 100%); color: #1658b0; }
.btn.mint { background: linear-gradient(180deg, #d9fbef 0%, #8ee9c8 100%); color: #0f7f5c; }
.btn.yellow { background: linear-gradient(180deg, #fff3c9 0%, #ffd56b 100%); color: #9a5a00; }
.btn.purple { background: linear-gradient(180deg, #ece4ff 0%, #c7b2ff 100%); color: #5b34c9; }
.btn[disabled] { opacity: .5; }
.ico.moko { width: 34px; height: 34px; display: inline-block; image-rendering: pixelated; background-size: contain; }

/* ---------- タイトル ---------- */
#scr-title { align-items: center; padding: 8px 16px 12px; overflow: hidden; }
#title-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.title-head { position: relative; z-index: 3; text-align: center; width: 100%; margin-top: 4vh; transition: margin .5s cubic-bezier(.3, 1.3, .5, 1), transform .5s; }
.menu-open .title-head { margin-top: 0; transform: scale(.86); }
.logo { width: min(96%, 470px); filter: drop-shadow(0 8px 14px rgba(30, 90, 180, .3)); }
.intro .logo { animation: logoDrop .9s cubic-bezier(.25, 1.4, .45, 1) both, floaty 4s 1s ease-in-out infinite; }
.menu-open .logo { animation: floaty 4s ease-in-out infinite; }
@keyframes logoDrop { 0% { transform: translateY(-60vh) scale(.6); opacity: 0 } 55% { transform: translateY(0) scale(1.05, .92); opacity: 1 } 75% { transform: translateY(-10px) scale(.97, 1.04) } 100% { transform: translateY(0) scale(1) } }
.catch {
  display: inline-block; margin-top: -2px; padding: 6px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #e2508f; font-weight: 900; font-size: clamp(14px, 4vw, 17px);
  box-shadow: var(--shadow);
}
.intro .catch { animation: fadeUp .6s .7s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
/* タイトルのキャラ：全身が画面に収まるように、ボタンの上に左右で立たせる */
.peek {
  position: absolute; z-index: 1; bottom: calc(14% + 78px); height: min(40vh, 380px); max-width: 47%; object-fit: contain; object-position: 50% 100%;
  pointer-events: none; filter: drop-shadow(0 8px 12px rgba(30, 80, 160, .25)); transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .4s;
}
.peek.left { left: 2%; transform: rotate(-2deg); transform-origin: 50% 100%; }
.peek.right { right: 2%; transform: rotate(2deg) scaleX(-1); transform-origin: 50% 100%; }
.intro .peek.left { animation: peekL .9s .35s cubic-bezier(.3, 1.3, .5, 1) both; }
.intro .peek.right { animation: peekR .9s .5s cubic-bezier(.3, 1.3, .5, 1) both; }
.menu-open .peek { opacity: 0; }
.menu-open .peek.left { transform: translateX(-70%) rotate(-8deg); }
.menu-open .peek.right { transform: translateX(70%) rotate(8deg) scaleX(-1); }
@keyframes peekL { from { transform: translateX(-60%) rotate(-10deg); opacity: 0 } to { transform: rotate(-2deg); opacity: 1 } }
@keyframes peekR { from { transform: translateX(60%) rotate(10deg) scaleX(-1); opacity: 0 } to { transform: rotate(2deg) scaleX(-1); opacity: 1 } }
#press {
  position: absolute; z-index: 4; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 14%;
  padding: 14px 34px; border-radius: 999px; font-size: 20px; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #ff9cc8, #ff5fa2); border: 4px solid #fff; box-shadow: 0 5px 0 rgba(190, 40, 110, .35), 0 10px 24px rgba(190, 40, 110, .25);
  animation: fadeUp .5s 1s both, pressPulse 1.4s 1.5s ease-in-out infinite;
}
@keyframes pressPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }
.menu-open #press { display: none; }
.menu { position: relative; z-index: 3; margin-top: auto; width: min(100%, 390px); display: flex; flex-direction: column; gap: 10px; }
.intro .menu { visibility: hidden; }
.menu-open .menu > * { animation: menuIn .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.menu-open .menu > *:nth-child(2) { animation-delay: .06s; }
.menu-open .menu > *:nth-child(3) { animation-delay: .12s; }
.menu-open .menu > *:nth-child(4) { animation-delay: .18s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(30px) scale(.95) } to { opacity: 1; transform: none } }
.mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbtn {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 66px; padding: 8px 16px 8px 10px; border-radius: 24px; border: 4px solid #fff;
  box-shadow: 0 5px 0 var(--mb-edge), 0 10px 20px rgba(40, 90, 170, .18);
  background: var(--mb-bg); color: var(--mb-ink); transition: transform .08s;
}
.mbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--mb-edge), 0 4px 10px rgba(40, 90, 170, .18); }
.mbtn:focus-visible, .mopt:focus-visible, #press:focus-visible { outline: 3px solid #ffd24d; outline-offset: 3px; }
.mbtn .mi { flex: none; width: 46px; height: 46px; border-radius: 16px; background: rgba(255, 255, 255, .7) center / 78% no-repeat; image-rendering: pixelated; }
.mbtn .mt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mbtn b { font-size: clamp(18px, 5.6vw, 22px); font-weight: 900; white-space: nowrap; }
.mbtn small { font-size: 12px; font-weight: 800; opacity: .8; margin-top: 2px; white-space: nowrap; }
.mbtn.solo { --mb-bg: linear-gradient(180deg, #ffe0ee 0%, #ff9cc8 100%); --mb-ink: #b3155a; --mb-edge: rgba(190, 40, 110, .35); min-height: 74px; }
.mbtn.solo b { font-size: clamp(20px, 6.4vw, 25px); }
.mbtn.duo { --mb-bg: linear-gradient(180deg, #def2ff 0%, #8fcfff 100%); --mb-ink: #1453a8; --mb-edge: rgba(30, 100, 190, .32); }
.mbtn.sub { min-height: 60px; padding-right: 8px; gap: 7px; }
.mbtn.sub .mi { width: 36px; height: 36px; border-radius: 12px; }
.mbtn.sub b { font-size: clamp(15px, 4.6vw, 18px); }
.mbtn.sub small { font-size: 10.5px; }
.mbtn.practice { --mb-bg: linear-gradient(180deg, #e0fcf2 0%, #8ee9c8 100%); --mb-ink: #0d6e50; --mb-edge: rgba(20, 140, 100, .3); }
.mbtn.howto { --mb-bg: linear-gradient(180deg, #fff6d6 0%, #ffd56b 100%); --mb-ink: #8a4f00; --mb-edge: rgba(190, 120, 0, .3); }
.mopt { align-self: center; padding: 8px 22px; border-radius: 999px; font-weight: 900; font-size: 14px; color: #5b34c9; background: rgba(255, 255, 255, .88); box-shadow: var(--shadow); }
.ver { position: absolute; z-index: 3; right: 12px; bottom: 6px; font-size: 10px; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(0, 60, 140, .5); }

/* 雲のワイプ */
#wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; display: none; }
#wipe.on { display: block; pointer-events: auto; }

/* READY? / GO! */
.count-text { font-size: 72px; font-weight: 900; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 3px #3a8ff0; paint-order: stroke fill; text-shadow: 0 6px 0 #2a6fd0, 0 0 24px rgba(255, 255, 255, .9); animation: countpop .5s cubic-bezier(.3, 1.6, .5, 1); }
.count-text.go { font-size: 96px; color: #fff36b; -webkit-text-stroke: 3px #ff5fa2; text-shadow: 0 6px 0 #d8407f, 0 0 30px rgba(255, 220, 90, .9); }

/* 結果 */
.result-ov { flex-direction: column; justify-content: flex-end; padding-bottom: calc(18px + var(--sab)); background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .35), rgba(40, 90, 160, .45)); }
.result-ov.lose { background: radial-gradient(ellipse at 50% 30%, rgba(200, 210, 240, .3), rgba(30, 40, 90, .6)); }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.res-stage { position: relative; width: 100%; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-end; }
.res-stand { height: 100%; max-height: 52vh; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20, 60, 140, .35)); animation: standIn .7s cubic-bezier(.3, 1.3, .5, 1) both; }
.lose .res-stand { filter: drop-shadow(0 10px 18px rgba(20, 30, 80, .4)) saturate(.85); }
@keyframes standIn { from { transform: translateY(40px) scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
.res-ribbon {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-3deg);
  padding: 6px 34px 8px; font-size: 44px; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #ff8cbf, #ff4f9a); border: 4px solid #fff; border-radius: 20px;
  box-shadow: 0 6px 0 rgba(180, 30, 100, .35), 0 12px 26px rgba(180, 30, 100, .3);
  animation: ribbonIn .55s .35s cubic-bezier(.3, 1.6, .5, 1) both;
}
.lose .res-ribbon { background: linear-gradient(180deg, #9fb4ff, #5f7ad8); box-shadow: 0 6px 0 rgba(40, 60, 150, .4), 0 12px 26px rgba(40, 60, 150, .3); }
@keyframes ribbonIn { from { transform: translateX(-50%) rotate(-3deg) scale(2); opacity: 0 } to { transform: translateX(-50%) rotate(-3deg) scale(1); opacity: 1 } }
.res-crown { position: absolute; top: calc(10px + var(--sat)); left: 50%; width: 96px; transform: translateX(-50%); filter: drop-shadow(0 4px 10px rgba(255, 180, 0, .55)); animation: floaty 2.4s ease-in-out infinite; }
.result-ov:not(.win) .res-crown { display: none; }
.panel.result { position: relative; width: min(92%, 380px); gap: 8px; padding: 12px 14px 14px; animation: fadeUp .5s .5s both; }
.res-vs { display: flex; align-items: center; justify-content: center; gap: 10px; }
.res-vs img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 25%; border-radius: 50%; border: 3px solid #fff; box-shadow: var(--shadow); background: #e6f3ff; }
.res-vs-mark { font-weight: 900; color: #ff5fa2; font-size: 18px; }
.res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: none; padding: 0; }
.res-stats div { background: #f1f8ff; border-radius: 12px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; }
.res-stats small { font-size: 10px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.res-stats b { font-size: 17px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.res-stats div { position: relative; }
.res-stats .new { position: absolute; top: -7px; right: -2px; font-style: normal; font-size: 9px; font-weight: 900; color: #fff; background: #ff4f9a; border-radius: 999px; padding: 0 5px; line-height: 1.5; box-shadow: 0 1px 0 rgba(160, 20, 80, .4); animation: countpop .5s .8s cubic-bezier(.3, 1.6, .5, 1) both; }
.res-rec { margin: 0; text-align: center; font-size: 12.5px; font-weight: 800; color: var(--ink-soft); }
.res-rec em { font-style: normal; color: #e2408a; }
.res-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-row .btn { font-size: 15px; padding: 0 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- サブ画面共通 ---------- */
.sub-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; }
.sub-head h2 {
  flex: 1; text-align: center; margin-right: 70px; font-size: clamp(16px, 5vw, 20px); font-weight: 900; white-space: nowrap;
  color: #fff; text-shadow: 0 2px 0 #3d8ee8, 0 0 8px rgba(30, 110, 220, .6);
}
.back { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-weight: 900; box-shadow: var(--shadow); }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 14px 30px; touch-action: pan-y; }
.scroll h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #2a6fc4; }
.scroll h3.sec-h { padding: 7px 12px 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(42, 120, 214, .88), rgba(30, 96, 190, .88)); box-shadow: 0 3px 10px rgba(20, 60, 140, .25); }
.scroll h3.sec-h small { margin-top: 1px; color: #e3f1ff; text-shadow: none; }
.scroll h3 small { font-size: 12px; font-weight: 700; }
.card { background: var(--panel); border-radius: 22px; padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); border: 3px solid #fff; }
.card h3 { color: var(--ink); text-shadow: none; margin: 0 0 6px; }
.card p { margin: 4px 0 10px; font-size: 14px; line-height: 1.6; }
.hint { font-size: 12.5px; color: var(--ink-soft); background: rgba(255, 255, 255, .8); border-radius: 12px; padding: 8px 10px; line-height: 1.55; }

/* セグメント */
.seg { display: flex; gap: 6px; background: rgba(255, 255, 255, .7); padding: 5px; border-radius: 999px; box-shadow: var(--shadow); align-items: center; }
.seg button { flex: 1; min-height: 40px; border-radius: 999px; font-weight: 900; font-size: 15px; color: var(--ink-soft); }
.seg button.on { background: linear-gradient(180deg, #4fb6ff, #2a8ff0); color: #fff; box-shadow: 0 2px 0 rgba(0, 60, 150, .25); }
.seg.small button { min-height: 34px; font-size: 13px; }
.seg.tiny { padding: 3px; box-shadow: none; }
.seg.tiny button { min-height: 28px; font-size: 11px; }
.seg .seg-label { font-size: 12px; font-weight: 900; padding: 0 6px 0 10px; color: var(--ink-soft); }
.seg.disabled { opacity: .45; pointer-events: none; }
#seg-cost { margin-top: 8px; }

/* キャラ選択 */
.vs-preview { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; height: min(38vh, 300px); margin-top: 2px; }
.vp { position: relative; height: 100%; }
.vp img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 30px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 10px rgba(30, 80, 160, .3)); animation: floaty 3.4s ease-in-out infinite; }
.vp.opp img { animation-delay: -1.6s; }
.vp img.mystery { height: 46%; top: 30%; }
.vp-name { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 3px 14px; border-radius: 999px; background: #fff; font-weight: 900; box-shadow: var(--shadow); white-space: nowrap; }
.vs-mark { font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 #ff6fae, 0 0 10px rgba(255, 80, 150, .7); align-self: center; }
.profile { margin: 8px 2px 0; font-size: 13px; text-align: center; background: rgba(255, 255, 255, .85); border-radius: 14px; padding: 6px 10px; }
.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; }
.char-grid button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: 0; }
.char-grid button .cf {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff, #cfe9ff); border: 3px solid #fff; box-shadow: var(--shadow); transition: transform .12s;
}
.char-grid button .cf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.15); transform-origin: 50% 30%; }
.char-grid button:active .cf { transform: scale(.95); }
.char-grid button.on .cf { border-color: #ff6fae; box-shadow: 0 0 0 3px #ffd0e4, var(--shadow); }
.char-grid button.on-opp .cf { border-color: #8a63ff; box-shadow: 0 0 0 3px #e2d8ff, var(--shadow); }
.char-grid button .nm { font-size: 12px; font-weight: 900; color: var(--ink); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 0 10px; line-height: 1.6; box-shadow: 0 2px 0 rgba(40, 100, 190, .15); white-space: nowrap; }
.char-grid button.on .nm { background: #ff6fae; color: #fff; }
.char-grid button.on-opp .nm { background: #8a63ff; color: #fff; }
.char-grid button.rand { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #9a72ff; }
.cta-bar { flex: none; padding: 10px 16px 12px; background: linear-gradient(180deg, rgba(200, 230, 255, 0), rgba(200, 230, 255, .85) 35%); }
.cta-bar .btn { width: 100%; }
#scr-setup .scroll { padding-bottom: 12px; }
.tut-btn { flex-direction: column; gap: 0; width: 100%; line-height: 1.15; padding: 8px 16px; }
.tut-btn span { white-space: nowrap; }
.tut-btn small { font-size: 12px; font-weight: 800; opacity: .85; }
.opts h3:first-child { margin-top: 4px; }
.opt-sub { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }

/* ふたり */
.keys { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.keys th, .keys td { padding: 5px 6px; border-bottom: 1px dashed #bcd7f5; text-align: center; }
.keys td:first-child { text-align: left; font-weight: 700; }
.online-row { display: flex; gap: 8px; margin-bottom: 8px; }
.online-row input { flex: 1; min-width: 0; font: inherit; font-size: 20px; font-weight: 900; letter-spacing: .2em; text-align: center; border-radius: 999px; border: 3px solid #cfe6ff; padding: 8px; color: var(--ink); }

/* あそびかた */
.howto-cards { margin-top: 12px; }
.howto-cards .card { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.6; }
.howto-cv { width: 112px; height: 150px; flex: none; border-radius: 12px; }
.howto-ops { font-size: 13.5px; line-height: 1.7; }

/* オプション */
.opts .opt { margin-bottom: 10px; }
.opt { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow); font-weight: 800; }
.opt > span { flex: 1; }
.opt input[type=range] { width: 38%; accent-color: #3aa8ff; }
.opt .seg { box-shadow: none; flex: none; }
.opt .seg button { padding: 0 12px; white-space: nowrap; }
.sw { position: relative; width: 52px; height: 30px; flex: none; }
.sw input { display: none; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: #cfd9e8; transition: .2s; }
.sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: .2s; }
.sw input:checked + i { background: #3aa8ff; }
.sw input:checked + i::after { left: 25px; }

/* ---------- ゲーム ---------- */
#scr-game { padding: 4px 6px 0; gap: 4px; --me: #ff5fa2; --me2: #ffd3e6; --op: #8a63ff; --op2: #e3d9ff; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; height: 54px; flex: none; }
.hud-top .pl { position: relative; display: flex; align-items: center; min-width: 0; height: 46px; }
.hud-top .pl.opp { justify-content: flex-end; text-align: right; }
.face { width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden; position: relative; background: radial-gradient(circle at 50% 35%, #fff, #cfe9ff); border: 3px solid #fff; box-shadow: var(--shadow); }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.2); transform-origin: 50% 30%; }
.hud-top .face { z-index: 2; width: 48px; height: 48px; }
.hud-top .pl.me .face { box-shadow: 0 0 0 2px var(--me), var(--shadow); }
.hud-top .pl.opp .face { box-shadow: 0 0 0 2px var(--op), var(--shadow); }
.hud-top .info {
  flex: 1; min-width: 0; height: 40px; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(232, 244, 255, .95)); border: 2px solid #fff;
  box-shadow: 0 3px 0 rgba(40, 100, 190, .18), 0 6px 14px rgba(40, 90, 170, .16);
}
.hud-top .pl.me .info { margin-left: -16px; padding: 0 10px 0 20px; border-radius: 0 20px 20px 0; border-bottom: 3px solid var(--me); }
.hud-top .pl.opp .info { margin-right: -16px; padding: 0 20px 0 10px; border-radius: 20px 0 0 20px; border-bottom: 3px solid var(--op); }
.info { min-width: 0; }
.info .name { font-size: 10.5px; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl.me .name { color: #d8407f; } .pl.opp .name { color: #6a45e0; }
.info .score { font-size: 19px; font-weight: 900; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.hud-top .mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pause-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff, #e4f1ff); border: 2px solid #fff; box-shadow: 0 3px 0 rgba(40, 100, 190, .22), 0 5px 10px rgba(40, 90, 170, .18);
}
.pause-btn svg { width: 20px; height: 20px; fill: #3b7fe0; }
.pause-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(40, 100, 190, .22); }
.icon-btn { width: 40px; height: 40px; }
.icon-btn img { width: 100%; height: 100%; object-fit: contain; }
#timer { font-size: 11px; font-weight: 900; color: #fff; background: rgba(30, 80, 160, .45); padding: 0 8px; border-radius: 999px; line-height: 1.5; font-variant-numeric: tabular-nums; }
#timer2 { font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(20, 70, 150, .8); font-variant-numeric: tabular-nums; }

.arena { flex: 1; display: flex; gap: 6px; min-height: 0; }
.main-col { position: relative; display: flex; flex-direction: column; align-items: center; }
.side-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: stretch; }
.garbage-bar { height: 20px; display: flex; align-items: center; justify-content: center; gap: 2px; flex: none; padding: 0 8px; border-radius: 999px; transition: background .2s; }
.garbage-bar:not(:empty) { background: rgba(40, 30, 90, .28); box-shadow: inset 0 1px 3px rgba(20, 10, 60, .3); }
.garbage-bar img { height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); animation: wob .6s ease-in-out infinite alternate; }
.garbage-bar img.s { height: 60%; }
.garbage-bar img.m { height: 85%; }
.garbage-bar img.l { height: 100%; filter: drop-shadow(0 0 4px #ffe14a); }
.garbage-bar img.xl { height: 120%; filter: drop-shadow(0 0 6px #ff5a7a); }
.garbage-bar.mini { height: 14px; padding: 0 4px; }
.gb-n { margin-left: 4px; font-size: 12px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
@keyframes wob { from { transform: translateY(0) } to { transform: translateY(-2px) } }

/* サイドのカード */
.gcard { position: relative; background: rgba(255, 255, 255, .9); border: 2px solid #fff; border-radius: 18px; box-shadow: 0 3px 0 rgba(40, 100, 190, .16), 0 8px 18px rgba(40, 90, 170, .16); }
.gcard .tab {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .06em; color: #fff; white-space: nowrap; padding: 1px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #5cb6ff, #2f8ef0); box-shadow: 0 2px 0 rgba(20, 80, 170, .3);
}
.gcard .tab.sky { background: linear-gradient(180deg, #8a6bff, #5f45e6); box-shadow: 0 2px 0 rgba(60, 30, 160, .35); }
.opp-box { display: flex; flex-direction: column; align-items: center; padding: 3px 0 4px; background: linear-gradient(180deg, rgba(240, 234, 255, .85), rgba(255, 255, 255, .7)); border-color: #fff; }
.flow-badge {
  align-self: center; display: flex; align-items: center; gap: 3px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 900;
  background: linear-gradient(180deg, #fff, #e6f4ff); color: #1d6fd8; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(40, 100, 190, .2); white-space: nowrap;
}
.flow-badge.up { background: linear-gradient(180deg, #fff6c8, #ffd34d); color: #8a4b00; }
.flow-badge.mini { font-size: 10px; padding: 0 8px; margin-top: 3px; border-width: 1px; box-shadow: none; }
.chain-badge { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-weight: 900; font-size: 12px; color: #fff; pointer-events: none; padding: 0 10px; border-radius: 999px; line-height: 1.6; }
.chain-badge:not(:empty) { background: linear-gradient(90deg, #ff5fa2, #ff9a3c); box-shadow: 0 2px 6px rgba(200, 40, 100, .35); }

.next-box { padding: 10px 4px 4px; text-align: center; }
#cv-next { display: block; margin: 0 auto; }

.practice-box { display: none; grid-template-columns: 1fr; gap: 4px; background: rgba(255, 255, 255, .55); padding: 5px; border-radius: 16px; }
.practice-box .btn { min-height: 30px; font-size: 11.5px; padding: 0 4px; letter-spacing: 0; white-space: nowrap; box-shadow: 0 2px 0 rgba(40, 90, 170, .18); }
.practice .practice-box { display: grid; }
.tutorial .practice-box { display: none; }
.practice .opp-box { display: none; }
#pr-stop.on { background: linear-gradient(180deg, #ffd0d0, #ff8f8f); color: #a01818; }

/* エアシフト情報 */
.shift-info { margin-top: auto; padding: 12px 7px 7px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gauge-ico { width: 15px; height: 15px; object-fit: contain; flex: none; filter: brightness(0) invert(1); }
.gauge { display: flex; gap: 2px; width: 100%; position: relative; padding: 3px; border-radius: 999px; background: rgba(40, 80, 160, .16); box-shadow: inset 0 1px 3px rgba(20, 50, 120, .25); }
.gauge i { flex: 1; height: 11px; background: rgba(255, 255, 255, .55); overflow: hidden; position: relative; border-radius: 3px; }
.gauge i:first-child { border-radius: 999px 3px 3px 999px; } .gauge i:nth-child(4) { border-radius: 3px 999px 999px 3px; }
.gauge i::after { content: ""; position: absolute; inset: 0; width: var(--fill, 0%); background: linear-gradient(180deg, #8ff0ff 0%, #3cc2ff 45%, #6b6bff 100%); transition: width .15s; }
.gauge i::before { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .55); z-index: 1; }
.gauge.full { box-shadow: inset 0 1px 3px rgba(20, 50, 120, .25), 0 0 8px 1px rgba(255, 140, 200, .7); }
.gauge.full i::after { background: linear-gradient(90deg, #ffe066, #ff6fae, #6bd7ff, #ffe066); animation: shine 1s linear infinite; background-size: 200% 100%; }
.gauge b { display: none; font-size: 11px; font-weight: 900; color: #fff; width: 100%; text-align: center; line-height: 11px; }
.gauge.free { background: linear-gradient(90deg, #ff5a7a, #ffd83a, #5fd36a, #4fc3ff, #a66bff); }
.gauge.free i { display: none; }
.gauge.free b { display: block; }
@keyframes shine { from { background-position: 0 0 } to { background-position: 200% 0 } }
.si-cost { display: flex; gap: 3px; width: 100%; justify-content: center; }
.si-cost .c { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1px 0; border-radius: 9px; font-size: 9px; font-weight: 900; line-height: 1.2; color: var(--ink-soft); background: #f0f6ff; border: 1.5px solid transparent; white-space: nowrap; }
.si-cost .c b { font-size: 12px; }
.si-cost .c.opp.on { background: #ffe8f2; color: #d8407f; border-color: #ff9cc8; }
.si-cost .c.self.on { background: #e3f3ff; color: #1d6fd8; border-color: #8fcfff; }
.si-cost .c.ng { opacity: .45; }
.si-cost .free { font-size: 11px; font-weight: 900; color: #7a5cff; }
.rainbow { display: flex; gap: 3px; width: 100%; justify-content: center; padding-top: 2px; }
.rainbow i { width: 11%; aspect-ratio: 1; border-radius: 50%; background: rgba(160, 180, 210, .3); box-shadow: inset 0 1px 2px rgba(40, 60, 120, .25); transition: background .2s, transform .2s; }
.rainbow i.on:nth-child(1) { background: #ff5a7a; } .rainbow i.on:nth-child(2) { background: #ff9a3c; } .rainbow i.on:nth-child(3) { background: #ffd83a; }
.rainbow i.on:nth-child(4) { background: #5fd36a; } .rainbow i.on:nth-child(5) { background: #4fc3ff; } .rainbow i.on:nth-child(6) { background: #4f7bff; } .rainbow i.on:nth-child(7) { background: #a66bff; }
.rainbow i.on { transform: scale(1.15); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 0 6px rgba(255, 255, 255, .95); }
.rainbow i.part { background: conic-gradient(#ffd83a calc(var(--p) * 360deg), rgba(160, 180, 210, .3) 0); }
.rainbow.off { display: none; }
.rt-timer { display: none; font-size: 11px; font-weight: 900; color: #fff; padding: 1px 8px; border-radius: 999px; white-space: nowrap; background: linear-gradient(90deg, #ff5a7a, #ffd83a, #5fd36a, #4fc3ff, #a66bff); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rt-timer.on { display: block; }

/* ---------- コントローラー ---------- */
.controls {
  flex: none; height: clamp(156px, 23vh, 200px); display: flex; justify-content: space-between; align-items: stretch; gap: 8px;
  margin: 0 -6px; padding: 10px 10px 14px; touch-action: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(235, 245, 255, .78));
  border-top: 2px solid rgba(255, 255, 255, .95); border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 18px rgba(40, 90, 170, .14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.controls.lefty { flex-direction: row-reverse; }
.controls svg { width: 58%; height: 58%; max-width: 30px; max-height: 30px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.controls svg .fill { fill: currentColor; stroke: none; }
.dpad { position: relative; width: 44%; aspect-ratio: 1; max-height: 100%; align-self: center; display: grid; grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; gap: 3px; }
.dpad::before, .dpad::after { content: ""; border-radius: 20px; background: rgba(40, 90, 170, .13); box-shadow: inset 0 2px 4px rgba(20, 60, 140, .18); margin: -4px; }
.dpad::before { grid-area: 1 / 2 / 4 / 3; }
.dpad::after { grid-area: 2 / 1 / 3 / 4; }
.dpad .d-up { grid-area: 1 / 2; } .dpad .d-left { grid-area: 2 / 1; } .dpad .d-right { grid-area: 2 / 3; } .dpad .d-down { grid-area: 3 / 2; }
.dp-hub { grid-area: 2 / 2; z-index: 1; margin: 22%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .9), rgba(200, 225, 250, .9)); box-shadow: inset 0 -2px 3px rgba(40, 90, 170, .25); }
.cbtn {
  position: relative; z-index: 1; border-radius: 15px; font-weight: 900; color: #2b78e4; padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #eef7ff 55%, #d9ecff 100%);
  border: 2px solid #fff; box-shadow: inset 0 -3px 0 rgba(70, 130, 220, .16), 0 4px 0 #a8cdf2, 0 7px 12px rgba(40, 90, 170, .22);
  touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  transition: transform .05s, box-shadow .05s;
}
.cbtn small { font-size: 9.5px; font-weight: 900; margin-top: 1px; letter-spacing: .02em; }
.cbtn.d-up { color: #e2408a; background: linear-gradient(180deg, #fff 0%, #fff0f7 55%, #ffd9ea 100%); box-shadow: inset 0 -3px 0 rgba(230, 80, 140, .16), 0 4px 0 #f5b3d1, 0 7px 12px rgba(190, 50, 120, .2); }
.cbtn.d-down { color: #11946b; background: linear-gradient(180deg, #fff 0%, #effdf7 55%, #d2f6e7 100%); box-shadow: inset 0 -3px 0 rgba(30, 160, 110, .16), 0 4px 0 #a5e4c9, 0 7px 12px rgba(20, 130, 90, .2); }
.cbtn.d-up svg, .cbtn.d-down svg { width: 46%; height: 46%; }
.cbtn.press, .sbtn.press { transform: translateY(3px); box-shadow: inset 0 2px 4px rgba(40, 90, 170, .2), 0 1px 0 rgba(40, 100, 190, .25); filter: brightness(.96); }
.rpad { width: 54%; display: flex; gap: 8px; align-items: center; }
.rot { flex: 0 0 37%; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: 100%; }
.cbtn.rot { flex: 1 1 0; width: 100%; height: auto; min-height: 0; border-radius: 26px; justify-content: center; gap: 0; }
.cbtn.rot svg { width: 52%; height: 52%; max-width: 38px; max-height: 38px; stroke-width: 3; }
.cbtn.rot.cw { color: #e2408a; background: linear-gradient(180deg, #fff 0%, #ffeef6 50%, #ffcfe4 100%); box-shadow: inset 0 -4px 0 rgba(230, 80, 140, .18), 0 4px 0 #f0a6c8, 0 8px 14px rgba(190, 50, 120, .22); }
.cbtn.rot.ccw { color: #2b78e4; }
.spad-wrap { flex: 1; aspect-ratio: 1; max-height: 100%; min-width: 120px; border-radius: 50%; padding: 5px; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .2), rgba(40, 90, 170, .14)); box-shadow: inset 0 2px 5px rgba(20, 60, 140, .2); }
.spad { width: 100%; height: 100%; display: grid; grid-template: 1fr 1.2fr 1fr / 1fr 1.2fr 1fr; gap: 3px; }
.spad .s-up { grid-area: 1 / 2; } .spad .s-left { grid-area: 2 / 1; } .spad .s-right { grid-area: 2 / 3; } .spad .s-down { grid-area: 3 / 2; }
.spad .s-center { grid-area: 2 / 2; }
.sbtn {
  border-radius: 11px; font-weight: 900; padding: 0; touch-action: none; color: #fff;
  border: 2px solid rgba(255, 255, 255, .95); background: linear-gradient(180deg, #ffb3d4 0%, #ff6fae 60%, #f2559a 100%);
  box-shadow: inset 0 -3px 0 rgba(170, 30, 100, .2), 0 3px 0 #d9568f, 0 5px 9px rgba(180, 40, 110, .25);
  display: flex; align-items: center; justify-content: center; transition: transform .05s, filter .15s;
}
.sbtn svg { width: 70%; height: 70%; stroke-width: 3.6; }
.spad .s-up { border-radius: 14px 14px 8px 8px; } .spad .s-down { border-radius: 8px 8px 14px 14px; }
.spad .s-left { border-radius: 14px 8px 8px 14px; } .spad .s-right { border-radius: 8px 14px 14px 8px; }
.sbtn.s-center { flex-direction: column; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #fff, #ffe4f1); color: #d81b72; line-height: 1.05; box-shadow: 0 2px 0 #f0a6c8, 0 4px 8px rgba(180, 40, 110, .2); }
.sbtn.s-center small { font-size: 7.5px; font-weight: 800; opacity: .85; }
.sbtn.s-center b { font-size: 11px; white-space: nowrap; letter-spacing: -.02em; }
.sbtn.s-center small { white-space: nowrap; }
.spad.self .sbtn { background: linear-gradient(180deg, #b5e4ff 0%, #4fb0ff 60%, #2f8ef0 100%); box-shadow: inset 0 -3px 0 rgba(20, 70, 170, .2), 0 3px 0 #3b82d6, 0 5px 9px rgba(20, 90, 180, .25); }
.spad.self .sbtn.s-center { background: radial-gradient(circle at 50% 30%, #fff, #dcf1ff); color: #1d6fd8; box-shadow: 0 2px 0 #8fc4f2, 0 4px 8px rgba(20, 90, 180, .2); }
.spad.dim .sbtn:not(.s-center) { filter: grayscale(.9) brightness(1.05); opacity: .55; }
.spad.ready .sbtn:not(.s-center) { animation: sglow 1s ease-in-out infinite; }
.spad.rt .sbtn:not(.s-center) { background: linear-gradient(135deg, #ff7eb3, #ffd24d, #6be3a0, #5cc8ff, #a98bff); background-size: 300% 300%; animation: rtbg 1.2s linear infinite; }
@keyframes sglow { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 255, 255, .95)) } }
@keyframes rtbg { from { background-position: 0% 50% } to { background-position: 300% 50% } }

/* 技名の吹き出し・カットイン・演出レイヤー */
#fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }
.spell { position: absolute; top: 54px; z-index: 26; pointer-events: none; padding: 4px 12px; border-radius: 14px; background: #fff; font-weight: 900; font-size: 15px; color: #e2408a; box-shadow: var(--shadow); opacity: 0; transform: scale(.6); transition: opacity .12s, transform .18s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
.spell.me { left: 8px; } .spell.opp { right: 8px; color: #5b34c9; }
.spell::before { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.spell.me::before { left: 18px; } .spell.opp::before { right: 18px; }
.spell.show { opacity: 1; transform: scale(1); }
.spell.big { font-size: 19px; background: linear-gradient(90deg, #fff, #ffeef6); }
/* 連鎖カットイン：上の点数の帯にだけ重ねる（盤面・ボタン・予告は隠さない。タッチは素通り） */
.cutin { position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 27; pointer-events: none; display: none; overflow: hidden; }
.cutin.show { display: block; }
.ci-band {
  position: absolute; left: 0; right: 0; top: 3px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 86px;
  background: linear-gradient(90deg, #ff5fa2, #ff8ac0 55%, #ffb36b); border-top: 2px solid #fff; border-bottom: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(190, 40, 110, .35); animation: ciInL 1.4s cubic-bezier(.2, .9, .3, 1) forwards;
}
.cutin.opp .ci-band { flex-direction: row-reverse; padding: 0 86px 0 14px; background: linear-gradient(270deg, #7a55f0, #9a7bff 55%, #5fa8ff); box-shadow: 0 4px 14px rgba(80, 40, 190, .35); animation-name: ciInR; }
.cutin.rainbow .ci-band { background: linear-gradient(90deg, #ff5a7a, #ff9a3c, #ffd83a, #5fd36a, #4fc3ff, #4f7bff, #a66bff); }
.ci-lines { position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 22px, rgba(255, 255, 255, .22) 22px 26px); background-size: 200% 100%; animation: ciLines .5s linear infinite; }
.cutin.opp .ci-lines { animation-direction: reverse; }
.ci-face { position: absolute; left: 10px; top: -2px; width: 72px; height: 72px; z-index: 2; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.cutin.opp .ci-face { left: auto; right: 10px; }
.ci-face { border-width: 4px; box-shadow: 0 4px 10px rgba(120, 20, 80, .35); animation: ciFace .45s .05s cubic-bezier(.3, 1.7, .5, 1) both; }
.cutin.opp .ci-face { box-shadow: 0 4px 10px rgba(50, 20, 140, .35); }
@keyframes ciFace { from { transform: scale(.4) rotate(-20deg) } to { transform: none } }
.ci-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.2); transform-origin: 50% 30%; }
.cutin-text { position: relative; display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; color: #fff; }
.cutin.opp .cutin-text { flex-direction: row-reverse; }
.cutin-text b { font-size: 26px; font-weight: 900; letter-spacing: .02em; -webkit-text-stroke: 1px rgba(160, 20, 90, .6); paint-order: stroke fill; text-shadow: 0 3px 0 rgba(160, 20, 90, .45); }
.cutin.opp .cutin-text b { -webkit-text-stroke-color: rgba(60, 30, 150, .6); text-shadow: 0 3px 0 rgba(60, 30, 150, .45); }
.cutin-text small { font-size: 13px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.cutin-text b.pop { animation: ciPop .25s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes ciInL { 0% { transform: translateX(-105%) } 14% { transform: translateX(0) } 86% { transform: translateX(0); opacity: 1 } 100% { transform: translateX(8%); opacity: 0 } }
@keyframes ciInR { 0% { transform: translateX(105%) } 14% { transform: translateX(0) } 86% { transform: translateX(0); opacity: 1 } 100% { transform: translateX(-8%); opacity: 0 } }
@keyframes ciLines { from { background-position: 0 0 } to { background-position: 52px 0 } }
@keyframes ciPop { from { transform: scale(1.5) } to { transform: scale(1) } }
@keyframes cutband { 0% { opacity: 0 } 10% { opacity: 1 } 80% { opacity: 1 } 100% { opacity: 0 } }
@keyframes cutimg { 0% { transform: translateX(-60%) } 18% { transform: translateX(0) } 80% { transform: translateX(6%) } 100% { transform: translateX(30%); opacity: 0 } }
@keyframes cuttext { 0% { transform: translate(40%, -50%) scale(1.4); opacity: 0 } 18% { transform: translate(0, -50%) scale(1); opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }
#scr-game.pinch #cv-me { animation: pinchGlow 0.9s ease-in-out infinite; }
@keyframes pinchGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 60, 90, .3)) } 50% { filter: drop-shadow(0 0 12px rgba(255, 60, 90, .9)) } }
@keyframes pinch { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* チュートリアル吹き出し */
.tutor { display: none; position: absolute; left: 6px; right: 6px; top: 30%; z-index: 30; background: rgba(255, 255, 255, .96); border-radius: 18px; padding: 8px 10px 8px 66px; min-height: 64px; box-shadow: var(--shadow); border: 3px solid #ffd0e4; font-size: 14px; line-height: 1.5; font-weight: 700; }
.tutor.show { display: block; }
.tutor img { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; object-fit: cover; object-position: top; border-radius: 50%; background: #ffe9f3; }
.tutor .btn { margin: 6px 0 0 auto; }
.tutor .tutor-text b { color: #e2508f; }
.tutor .tutor-ok { color: #19a974; font-weight: 900; }

/* ---------- 1台ふたり ---------- */
#scr-local { padding: 4px 8px; }
#app.wide { max-width: 1100px; }
.local-top { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; }
.local-arena { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }
.lp { display: flex; flex-direction: column; align-items: center; min-height: 0; }
.lp-head { display: flex; align-items: center; gap: 8px; height: 50px; }
.lp-cv { flex: none; }
.lp-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.lp-next { background: var(--panel); border-radius: 12px; }
.lp-side { display: flex; flex-direction: column; gap: 4px; align-items: center; min-width: 110px; }
.lp-target { font-size: 12px; font-weight: 900; background: #fff; border-radius: 999px; padding: 1px 10px; }

/* ---------- オーバーレイ ---------- */
.overlay { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(40, 90, 160, .35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.overlay.show { display: flex; }
.overlay.clear { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.panel { width: min(88%, 360px); background: rgba(255, 255, 255, .96); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); border: 4px solid #fff; }
.panel h3 { text-align: center; font-size: 20px; font-weight: 900; color: #1d6fd8; }
.panel .opt { box-shadow: none; background: #f1f8ff; }
.shift-menu .sm-title { font-weight: 900; font-size: 14px; margin-bottom: 6px; }
.shift-menu .sm-title small { font-weight: 700; color: var(--ink-soft); }
.sm-dirs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sm-dirs button { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 16px; font-size: 26px; font-weight: 900; background: linear-gradient(180deg, #fff, #ffe1f0); color: #d81b72; border: 2px solid #ffd0e4; }
#sm-self .sm-dirs button { background: linear-gradient(180deg, #fff, #dff3ff); color: #1d6fd8; border-color: #c9e8ff; }
.sm-dirs button small { font-size: 10px; font-weight: 800; }
.sm-dirs button[disabled] { opacity: .35; }
.sm-sec.hidden { display: none; }

@keyframes countpop { from { transform: scale(1.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.toast { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .95); font-weight: 900; color: #e2508f; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; max-width: 92%; width: max-content; text-align: center; line-height: 1.45; }
.toast.show { opacity: 1; }
.toast { white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; border-radius: 22px; }
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-hint { display: flex; position: fixed; inset: 0; z-index: 99; align-items: center; justify-content: center; background: rgba(143, 208, 255, .96); font-weight: 900; font-size: 20px; }
}

.btn .bi, .opt .bi { width: 30px; height: 30px; object-fit: contain; margin-left: -6px; }


/* キャラ選択（8アイコン1つ） */
.vs-preview .vp { border: 0; background: none; padding: 0; border-radius: 22px; transition: background .2s; }
.vs-preview .vp.active { background: radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); }
.vp-tag { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-soft); }
.vp.active .vp-tag { background: #ff6fae; color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.vp.opp.active .vp-tag { background: #8a63ff; }
.vs-preview.solo { grid-template-columns: 1fr; }
.vs-preview.solo .vs-mark, .vs-preview.solo .vp.opp { display: none; }
.pick-guide { text-align: center; margin: 8px 0; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #3d8ee8, 0 0 6px rgba(30, 110, 220, .7); font-size: 15px; }
.char-grid button .who { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; color: #fff; padding: 0 6px; border-radius: 999px; z-index: 2; }
.char-grid button .who.me { background: #ff6fae; } .char-grid button .who.opp { background: #8a63ff; }
.rand-row { display: flex; justify-content: center; margin-top: 8px; }
.rand-row .btn.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #8a63ff; }
.rule { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 16px; padding: 6px 8px 6px 12px; margin-bottom: 6px; font-weight: 800; font-size: 13px; }
.rule > span { flex: 1; white-space: nowrap; }
.rule .seg { box-shadow: none; flex: none; }
.rule .seg button { padding: 0 9px; white-space: nowrap; }
.level-rule { flex-wrap: wrap; }
.level-rule .seg { width: 100%; }
.level-rule .seg button { flex: 1; padding: 0 4px; }
.level-note { width: 100%; margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.reset-rules { font-size: 11px; font-weight: 900; color: #1d6fd8; background: #fff; border-radius: 999px; padding: 3px 10px; margin-left: 6px; vertical-align: middle; text-shadow: none; }
.online-char { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font-weight: 900; }
.online-char span { flex: 1; }
.garbage-bar.bump { animation: gbump .35s ease-out; }
@keyframes gbump { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
.char-grid button .who { white-space: nowrap; font-size: 9px; }
@media (max-width: 360px) {
  .mbtn.sub small { display: none; }
  .mbtn.sub { min-height: 52px; padding: 6px 8px; }
  .mbtn.sub .mi { width: 30px; height: 30px; }
  .mbtn .mi { width: 40px; height: 40px; }
  .res-row .btn { font-size: 13px; }
}
.res-row .btn { white-space: nowrap; }

/* ---------- 表情の反応（HUDの顔） ---------- */
.hud-top .emo { position: absolute; z-index: 3; top: -6px; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: scale(.3); filter: drop-shadow(0 1px 2px rgba(0, 40, 100, .35)); }
.hud-top .pl.me .emo { left: 34px; }
.hud-top .pl.opp .emo { right: 34px; }
.hud-top .emo svg { width: 100%; height: 100%; display: block; }
.hud-top .emo.show { animation: emoIn .35s cubic-bezier(.3, 1.7, .5, 1) forwards; }
.hud-top .emo.show[data-k=spark] svg { animation: emoSpin 1.2s linear infinite; }
.hud-top .emo.show[data-k=sweat] svg { animation: emoDrip 1s ease-in-out infinite; }
.hud-top .emo.show[data-k=note] svg { animation: emoBob .6s ease-in-out infinite alternate; }
@keyframes emoIn { to { opacity: 1; transform: scale(1) } }
@keyframes emoSpin { from { transform: rotate(0) scale(1) } 50% { transform: rotate(180deg) scale(1.15) } to { transform: rotate(360deg) scale(1) } }
@keyframes emoDrip { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }
@keyframes emoBob { from { transform: translateY(0) rotate(-8deg) } to { transform: translateY(-3px) rotate(8deg) } }
.hud-top .face.hop { animation: faceHop .45s cubic-bezier(.3, 1.6, .5, 1); }
.hud-top .face.shake { animation: faceShake .4s ease-in-out; }
@keyframes faceHop { 0% { transform: translateY(0) scale(1) } 35% { transform: translateY(-6px) scale(1.08, .95) } 100% { transform: none } }
@keyframes faceShake { 0%, 100% { transform: none } 20% { transform: translateX(-4px) rotate(-6deg) } 45% { transform: translateX(4px) rotate(5deg) } 70% { transform: translateX(-2px) rotate(-2deg) } }
.hud-top .pl.pinch .face { animation: facePinch .9s ease-in-out infinite; }
@keyframes facePinch { 0%, 100% { box-shadow: 0 0 0 2px #ff5a7a, var(--shadow) } 50% { box-shadow: 0 0 0 5px rgba(255, 90, 122, .45), var(--shadow) } }
.hud-top .pl.pinch .info { border-bottom-color: #ff5a7a; }

/* ルールの折りたたみ */
.rule-more { background: rgba(255, 255, 255, .55); border-radius: 18px; padding: 0; margin-bottom: 6px; }
.rule-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--panel); font-weight: 900; font-size: 13px; cursor: pointer; }
.rule-more > summary::-webkit-details-marker { display: none; }
.rm-t { white-space: nowrap; }
.rm-sum { flex: 1; min-width: 0; font-size: 11px; font-weight: 800; color: var(--ink-soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-arrow { width: 9px; height: 9px; border-right: 2.5px solid #3a8ff0; border-bottom: 2.5px solid #3a8ff0; transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex: none; }
.rule-more[open] .rm-arrow { transform: rotate(-135deg) translateY(-2px); }
.rule-more[open] { padding: 0 6px 6px; }
.rule-more[open] > summary { margin: 0 -6px 6px; }
.rule-more .rule { box-shadow: none; }

/* ---------- 画像ボタン（UIスプライト） ---------- */
/* 一体型の十字キー：押している向きで絵を切りかえ */
.dpad { display: block; width: 44%; aspect-ratio: 1; max-height: 100%; align-self: center; touch-action: none; gap: 0;
  background: url(../assets/ui/btn/dpad_0.webp) center / contain no-repeat; }
.dpad::before { display: none; }
.dpad::after { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; box-shadow: none; border-radius: 0;
  background: url(../assets/ui/btn/dpad_1.webp), url(../assets/ui/btn/dpad_2.webp), url(../assets/ui/btn/dpad_3.webp), url(../assets/ui/btn/dpad_4.webp); }
.dpad.p-hard { background-image: url(../assets/ui/btn/dpad_1.webp); }
.dpad.p-soft { background-image: url(../assets/ui/btn/dpad_2.webp); }
.dpad.p-left { background-image: url(../assets/ui/btn/dpad_3.webp); }
.dpad.p-right { background-image: url(../assets/ui/btn/dpad_4.webp); }
.dp-lbl { position: absolute; left: 3%; font-size: 10px; font-weight: 900; padding: 0 7px; line-height: 1.6; border-radius: 999px; background: rgba(255, 255, 255, .9); pointer-events: none; box-shadow: 0 1px 0 rgba(40, 100, 190, .15); }
.dp-lbl.up { top: 6%; color: #e2408a; }
.dp-lbl.down { bottom: 6%; color: #11946b; }
.controls.lefty .dp-lbl { left: auto; right: 3%; }
/* 回転ボタン */
/* 回転ボタン：本体はCSSで描き（素材の上下が欠けていたため）、矢印と雲のマークは素材から */
.cbtn.rot.cw, .cbtn.rot.ccw { border: 3px solid #fff; border-radius: 22px; }
.cbtn.rot.cw { background: url(../assets/ui/btn/rot_cw_icon.webp) center / auto 62% no-repeat, linear-gradient(180deg, #ffa3cb 0%, #ff6fae 55%, #f2559a 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(170, 30, 100, .25), 0 5px 0 #d4508a, 0 9px 14px rgba(190, 50, 120, .28); }
.cbtn.rot.ccw { background: url(../assets/ui/btn/rot_ccw_icon.webp) center / auto 62% no-repeat, linear-gradient(180deg, #a9dcff 0%, #5cb6ff 55%, #3a9cf0 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(20, 80, 170, .25), 0 5px 0 #3a82d4, 0 9px 14px rgba(30, 90, 180, .28); }
.cbtn.rot.press { transform: translateY(4px); filter: brightness(.95); }
.cbtn.rot.cw.press { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(170, 30, 100, .25), 0 1px 0 #d4508a, 0 3px 6px rgba(190, 50, 120, .25); }
.cbtn.rot.ccw.press { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(20, 80, 170, .25), 0 1px 0 #3a82d4, 0 3px 6px rgba(30, 90, 180, .25); }
/* エアシフト：円盤の上に矢印（あいて＝ピンク／じぶん＝水色） */
.spad-wrap { background: url(../assets/ui/btn/windpad.webp) center / contain no-repeat; box-shadow: none; padding: 3%; }
.spad { gap: 1px; grid-template: 1fr 1.05fr 1fr / 1fr 1.05fr 1fr; }
.spad .sbtn.s-center small { font-size: 6.5px; letter-spacing: -.04em; }
.spad .sbtn.s-center b { font-size: 10.5px; }
.sbtn:not(.s-center) { border: 0; box-shadow: none; border-radius: 0; background: center / contain no-repeat; }
.spad .s-up { background-image: url(../assets/ui/btn/shift_pink_up.webp); }
.spad .s-down { background-image: url(../assets/ui/btn/shift_pink_down.webp); }
.spad .s-left { background-image: url(../assets/ui/btn/shift_pink_left.webp); }
.spad .s-right { background-image: url(../assets/ui/btn/shift_pink_right.webp); }
.spad .s-up.press { background-image: url(../assets/ui/btn/shift_pink_up_p.webp); }
.spad .s-down.press { background-image: url(../assets/ui/btn/shift_pink_down_p.webp); }
.spad .s-left.press { background-image: url(../assets/ui/btn/shift_pink_left_p.webp); }
.spad .s-right.press { background-image: url(../assets/ui/btn/shift_pink_right_p.webp); }
.spad.self .s-up { background-image: url(../assets/ui/btn/shift_blue_up.webp); }
.spad.self .s-down { background-image: url(../assets/ui/btn/shift_blue_down.webp); }
.spad.self .s-left { background-image: url(../assets/ui/btn/shift_blue_left.webp); }
.spad.self .s-right { background-image: url(../assets/ui/btn/shift_blue_right.webp); }
.spad.self .s-up.press { background-image: url(../assets/ui/btn/shift_blue_up_p.webp); }
.spad.self .s-down.press { background-image: url(../assets/ui/btn/shift_blue_down_p.webp); }
.spad.self .s-left.press { background-image: url(../assets/ui/btn/shift_blue_left_p.webp); }
.spad.self .s-right.press { background-image: url(../assets/ui/btn/shift_blue_right_p.webp); }
.spad .sbtn.press { transform: none; box-shadow: none; filter: none; }
.spad .sbtn.s-center, .spad.self .sbtn.s-center { border-radius: 50% !important; aspect-ratio: 1; align-self: center; justify-self: center; width: 112%; margin: -6%;
  background: radial-gradient(circle at 50% 32%, #fff 0 55%, #ffe3f0 100%) !important; border: 3px solid #ff8ac0 !important;
  box-shadow: 0 0 0 2px #fff, 0 3px 0 #e06aa0, 0 5px 8px rgba(190, 50, 120, .25) !important; z-index: 2; }
.spad.self .sbtn.s-center { background: radial-gradient(circle at 50% 32%, #fff 0 55%, #dff1ff 100%) !important; border-color: #6cbcff !important;
  box-shadow: 0 0 0 2px #fff, 0 3px 0 #3a82d4, 0 5px 8px rgba(30, 90, 180, .25) !important; }
.spad .sbtn.s-center.press { transform: translateY(2px); box-shadow: 0 0 0 2px #fff, 0 1px 0 #e06aa0 !important; }
.spad.self .sbtn.s-center.press { box-shadow: 0 0 0 2px #fff, 0 1px 0 #3a82d4 !important; }
.spad .sbtn.s-center small { font-size: 6.5px; letter-spacing: -.04em; white-space: nowrap; }
.spad .sbtn.s-center b { font-size: 10px; white-space: nowrap; letter-spacing: -.03em; }
.spad.rt .sbtn:not(.s-center) { animation: rtHue 1.2s linear infinite; }
@keyframes rtHue { from { filter: hue-rotate(0deg) saturate(1.3) } to { filter: hue-rotate(360deg) saturate(1.3) } }
.spad.dim .sbtn:not(.s-center) { filter: grayscale(.85) brightness(1.08); opacity: .6; }
/* 一時停止 */
.pause-btn { background: url(../assets/ui/btn/pause.webp) center / contain no-repeat; border: 0; box-shadow: none; width: 42px; height: 42px; }
.pause-btn:active { background-image: url(../assets/ui/btn/pause_p.webp); transform: none; box-shadow: none; }

/* ボタン画像の先読み（はじめて押したときに一瞬消えないように） */
body::after { content: ""; position: fixed; left: -4px; top: -4px; width: 2px; height: 2px; opacity: .01; pointer-events: none;
  background-image: url(../assets/ui/btn/deco_corner_l.webp), url(../assets/ui/btn/deco_corner_r.webp), url(../assets/ui/btn/deco_crest.webp), url(../assets/ui/btn/deco_gauge.webp), url(../assets/ui/btn/deco_label.webp), url(../assets/ui/btn/dpad_0.webp), url(../assets/ui/btn/dpad_1.webp), url(../assets/ui/btn/dpad_2.webp), url(../assets/ui/btn/dpad_3.webp), url(../assets/ui/btn/dpad_4.webp), url(../assets/ui/btn/ic_back.webp), url(../assets/ui/btn/ic_back_p.webp), url(../assets/ui/btn/ic_gear.webp), url(../assets/ui/btn/ic_gear_p.webp), url(../assets/ui/btn/ic_home.webp), url(../assets/ui/btn/ic_home_p.webp), url(../assets/ui/btn/ic_retry.webp), url(../assets/ui/btn/ic_retry_p.webp), url(../assets/ui/btn/menu_blue.webp), url(../assets/ui/btn/menu_blue_p.webp), url(../assets/ui/btn/menu_mint.webp), url(../assets/ui/btn/menu_mint_p.webp), url(../assets/ui/btn/menu_pink.webp), url(../assets/ui/btn/menu_pink_p.webp), url(../assets/ui/btn/menu_purple.webp), url(../assets/ui/btn/menu_purple_p.webp), url(../assets/ui/btn/menu_yellow.webp), url(../assets/ui/btn/menu_yellow_p.webp), url(../assets/ui/btn/pause.webp), url(../assets/ui/btn/pause_p.webp), url(../assets/ui/btn/rot_ccw_icon.webp), url(../assets/ui/btn/rot_cw_icon.webp), url(../assets/ui/btn/shift_blue_down.webp), url(../assets/ui/btn/shift_blue_down_p.webp), url(../assets/ui/btn/shift_blue_left.webp), url(../assets/ui/btn/shift_blue_left_p.webp), url(../assets/ui/btn/shift_blue_right.webp), url(../assets/ui/btn/shift_blue_right_p.webp), url(../assets/ui/btn/shift_blue_up.webp), url(../assets/ui/btn/shift_blue_up_p.webp), url(../assets/ui/btn/shift_pink_down.webp), url(../assets/ui/btn/shift_pink_down_p.webp), url(../assets/ui/btn/shift_pink_left.webp), url(../assets/ui/btn/shift_pink_left_p.webp), url(../assets/ui/btn/shift_pink_right.webp), url(../assets/ui/btn/shift_pink_right_p.webp), url(../assets/ui/btn/shift_pink_up.webp), url(../assets/ui/btn/shift_pink_up_p.webp), url(../assets/ui/btn/windpad.webp); background-size: 1px 1px; background-repeat: no-repeat; }
/* 古いグラデーション指定より優先して、画像の大きさ・位置をそろえる */
.spad .sbtn, .spad.self .sbtn { background-color: transparent !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; box-shadow: none !important; border: 0 !important; }

/* ---------- 画像ボタン（第2弾：メニュー・アイコン・飾り） ---------- */
.btn.pink:not(.tiny), .mbtn.solo { border-image: url(../assets/ui/btn/menu_pink.webp) 0 155 fill / 0 var(--bw) stretch; --ink: 160,20,90; }
.btn.pink:not(.tiny):active, .mbtn.solo:active { border-image-source: url(../assets/ui/btn/menu_pink_p.webp); }
.btn.blue:not(.tiny), .mbtn.duo { border-image: url(../assets/ui/btn/menu_blue.webp) 0 155 fill / 0 var(--bw) stretch; --ink: 20,70,160; }
.btn.blue:not(.tiny):active, .mbtn.duo:active { border-image-source: url(../assets/ui/btn/menu_blue_p.webp); }
.btn.mint:not(.tiny), .mbtn.practice { border-image: url(../assets/ui/btn/menu_mint.webp) 0 116 fill / 0 var(--bw) stretch; --ink: 10,110,80; }
.btn.mint:not(.tiny):active, .mbtn.practice:active { border-image-source: url(../assets/ui/btn/menu_mint_p.webp); }
.btn.yellow:not(.tiny), .mbtn.howto { border-image: url(../assets/ui/btn/menu_yellow.webp) 0 116 fill / 0 var(--bw) stretch; --ink: 170,90,0; }
.btn.yellow:not(.tiny):active, .mbtn.howto:active { border-image-source: url(../assets/ui/btn/menu_yellow_p.webp); }
.btn.purple:not(.tiny), .mbtn.zz { border-image: url(../assets/ui/btn/menu_purple.webp) 0 116 fill / 0 var(--bw) stretch; --ink: 80,40,170; }
.btn.purple:not(.tiny):active, .mbtn.zz:active { border-image-source: url(../assets/ui/btn/menu_purple_p.webp); }

.btn.pink:not(.tiny), .btn.blue:not(.tiny), .btn.mint:not(.tiny), .btn.yellow:not(.tiny), .btn.purple:not(.tiny), .mbtn {
  --bw: 40px; border-style: solid; border-color: transparent; border-width: 0 var(--bw); padding: 0 2px; background: none !important; box-shadow: none !important;
  color: #fff !important; text-shadow: 0 2px 0 rgba(var(--ink), .55), 0 0 6px rgba(var(--ink), .35); transition: transform .06s; }
.btn.big { --bw: 50px; } .btn.slim { --bw: 34px; }
.btn.pink:not(.tiny):active, .btn.blue:not(.tiny):active, .btn.mint:not(.tiny):active, .btn.yellow:not(.tiny):active, .btn.purple:not(.tiny):active, .mbtn:active { transform: translateY(3px); box-shadow: none !important; }
.mbtn { --bw: 54px; border-radius: 0; min-height: 70px; gap: 8px; padding: 0 2px 0 0; }
.mbtn.solo { --bw: 60px; min-height: 78px; }
.mbtn.sub { --bw: 44px; min-height: 58px; }
.mbtn .mi { margin-left: calc(var(--bw) * -0.55); background-color: rgba(255, 255, 255, .85); box-shadow: 0 2px 4px rgba(var(--ink), .3); }
.mbtn small { opacity: .95; }
.btn .bi { width: 30px; height: 30px; border-radius: 50%; }
/* もどる：丸いアイコンボタン */
.back { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: url(../assets/ui/btn/ic_back.webp) center / contain no-repeat !important; box-shadow: none; flex: none; }
.back:active { background-image: url(../assets/ui/btn/ic_back_p.webp) !important; }
.sub-head h2 { margin-right: 54px; }
/* NEXT枠とゲージ枠 */
.next-box { background: url(../assets/ui/btn/deco_label.webp) center / 100% 100% no-repeat; border: 0; box-shadow: none; padding: 14px 10px 10px; }
.next-box .tab { top: -6px; }
.gauge { background: url(../assets/ui/btn/deco_gauge.webp) center / 100% 100% no-repeat; box-shadow: none; padding: 7px 14px; }
.gauge i { height: 9px; }
.gauge.free { background: url(../assets/ui/btn/deco_gauge.webp) center / 100% 100% no-repeat; }
.gauge.free b { color: #7a5cff; text-shadow: none; }
/* 盤面の角の飾り（盤の外側の下すみ） */
.main-col::before, .main-col::after { content: ""; position: absolute; bottom: -6px; width: 17%; aspect-ratio: 394 / 402; pointer-events: none; z-index: 3;
  background: url(../assets/ui/btn/deco_corner_l.webp) center / contain no-repeat; }
.main-col::before { left: -9px; }
.main-col::after { right: -9px; background-image: url(../assets/ui/btn/deco_corner_r.webp); }
/* 結果パネルの上に紋章 */
.panel.result::before { content: ""; position: absolute; left: 50%; top: -42px; width: 62%; aspect-ratio: 1050 / 420; transform: translateX(-50%); pointer-events: none;
  background: url(../assets/ui/btn/deco_crest.webp) center / contain no-repeat; }
.panel.result { margin-top: 34px; padding-top: 30px; }
.mrow > *, .res-row > * { min-width: 0; }
.mbtn.sub { --bw: 34px; gap: 4px; }
.mbtn.sub .mi { width: 30px; height: 30px; margin-left: -22px; }
.mbtn.sub b { font-size: clamp(14px, 4.2vw, 17px); }
.mbtn.sub small { font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; }
.mbtn .mt { min-width: 0; overflow: hidden; }
.res-row .btn { --bw: 28px; font-size: 13.5px; }
.res-row .btn .bi { width: 24px; height: 24px; margin-left: -10px; }
.next-box { padding: 16px 14px 12px; }
@media (max-width: 370px) { .mbtn.sub .mi { display: none; } .mbtn.sub { justify-content: center; } .res-row .btn .bi { display: none; } }
/* 結果画面の立ち絵：王冠の下から、パネルの上までに収める */
.res-stage { min-height: 0; overflow: hidden; }
.res-stand { position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(78px + var(--sat)); bottom: 0; height: calc(100% - 78px - var(--sat)); max-height: none; width: auto; max-width: 92%; object-fit: contain; object-position: 50% 100%; }
.result-ov:not(.win) .res-stand { top: calc(24px + var(--sat)); height: calc(100% - 24px - var(--sat)); }

/* ---------- あそびかた（短く・レッスン形式） ---------- */
.howto-lead { text-shadow: 0 1px 3px rgba(20, 60, 140, .6);  text-align: center; margin: 12px 0 8px; font-weight: 900; font-size: 13px; color: #fff; text-shadow: 0 1px 0 #3d8ee8, 0 0 6px rgba(30, 110, 220, .7); }
.lessons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.lesson { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: 20px;
  background: var(--panel); border: 3px solid #fff; box-shadow: var(--shadow); text-align: center; }
.lesson:active { transform: translateY(2px); }
.lesson .howto-cv { width: 84px; height: 112px; border-radius: 12px; }
.lesson b { font-size: 15px; font-weight: 900; color: var(--ink); margin-top: 4px; }
.lesson small { font-size: 11px; font-weight: 700; color: var(--ink-soft); line-height: 1.3; }
.ls-go { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 900; color: #fff; padding: 2px 14px; border-radius: 999px; background: linear-gradient(180deg, #ff9cc8, #ff5fa2); box-shadow: 0 2px 0 rgba(190, 40, 110, .3); }
.lesson.done::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #34d0a0; color: #fff; font-weight: 900; font-size: 13px; line-height: 22px; box-shadow: 0 1px 0 rgba(0, 100, 70, .3); }
.lesson.done .ls-go { background: linear-gradient(180deg, #8ee9c8, #34d0a0); box-shadow: 0 2px 0 rgba(20, 130, 90, .3); }
.ops dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 6px 0 0; font-size: 13px; }
.ops dt { font-weight: 900; color: #1d6fd8; white-space: nowrap; }
.ops dd { margin: 0; font-weight: 700; }
.tips summary { font-weight: 900; cursor: pointer; color: var(--ink); }
.tips ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }

.sec-h { margin: 18px 4px 8px; }
.sec-h small { display: block; font-size: 11.5px; }

/* ---------- れんしゅうの設定・盤面づくり ---------- */
.practice-box .btn.wide { grid-column: 1 / -1; }
.prac-panel { gap: 10px; }
.pp-row { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 13px; }
.pp-row > span { flex: 1; white-space: nowrap; }
.pp-row .seg { box-shadow: none; }
.pp-row .seg button { padding: 0 10px; white-space: nowrap; }
.pp-note { margin: -4px 0 0; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.pp-next { background: #f1f8ff; border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 900; font-size: 13px; }
.pp-pairs { display: flex; gap: 18px; justify-content: center; }
.pp-pair { display: grid; grid-template-rows: auto 40px 40px; justify-items: center; gap: 2px; }
.pp-pair small { font-size: 10px; color: var(--ink-soft); }
.pp-sw { width: 40px; height: 40px; border-radius: 12px; background: #fff center / 86% no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #cfe6ff; }
.pp-sw:active { transform: scale(.92); }
.edit-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; display: none; flex-direction: column; gap: 6px; padding: 10px 12px calc(12px + var(--sab));
  background: rgba(255, 255, 255, .96); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 18px rgba(40, 90, 170, .2); }
.edit-bar.show { display: flex; }
.eb-title { text-align: center; font-weight: 900; font-size: 12.5px; color: #1d6fd8; }
.eb-tools { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.eb-tools button { width: 44px; height: 44px; border-radius: 14px; background: #f1f8ff center / 80% no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #dbeaff; font-weight: 900; font-size: 11px; color: var(--ink-soft); }
.eb-tools button.on { box-shadow: inset 0 0 0 3px #ff6fae, 0 0 0 2px #ffd0e4; background-color: #fff; }
.eb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eb-row .btn { min-height: 40px; }
#scr-game.editing #cv-me { box-shadow: 0 0 0 3px #ff6fae; border-radius: 12px; }

/* ---------- 軽量モード ---------- */
body.lite .controls, body.lite .overlay { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.lite .overlay { background: rgba(40, 90, 160, .55); }
body.lite .logo, body.lite .peek, body.lite .res-stand, body.lite .res-crown, body.lite .vp img, body.lite .garbage-bar img { filter: none !important; }
body.lite .logo, body.lite .vp img, body.lite .res-crown, body.lite #press, body.lite .garbage-bar img, body.lite .spad.ready .sbtn, body.lite .spad.rt .sbtn,
body.lite .hud-top .pl.pinch .face, body.lite #scr-game.pinch #cv-me, body.lite .ci-lines, body.lite .gauge.full i::after { animation: none !important; }
body.lite #scr-game.pinch #cv-me { filter: drop-shadow(0 0 6px rgba(255, 60, 90, .8)); }
body.lite .cbtn, body.lite .sbtn, body.lite .gcard, body.lite .card, body.lite .panel { box-shadow: none !important; }
.ls-step { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: #3a9cf0; color: #fff; font-size: 11px; font-weight: 900; line-height: 1.7; vertical-align: 1px; }
.tutor .tutor-ng { color: #e2408a; font-weight: 900; }
.tutor .why { margin-top: 6px; padding: 5px 8px; border-radius: 10px; background: #f1f8ff; font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.tutor .why > b:first-child { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: #ffbf2e; color: #fff; font-size: 10.5px; line-height: 1.7; vertical-align: 1px; }
.tutor.in-lesson { top: 56px; }
.basics { font-size: 13px; }
.basics ol { margin: 6px 0; padding-left: 20px; line-height: 1.6; font-weight: 700; }
.basics small { color: var(--ink-soft); font-weight: 700; }
.mbtn.sub small { white-space: nowrap; overflow: visible; text-overflow: clip; line-height: 1.2; font-size: min(9.5px, 2.4vw); letter-spacing: -.02em; }

.pat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.pat { font-size: 11px; font-weight: 900; color: #fff; padding: 3px 9px; border-radius: 999px; background: linear-gradient(180deg, #ff9cc8, #ff5fa2); box-shadow: 0 2px 0 rgba(190, 40, 110, .3); white-space: nowrap; }
.pat.done { background: linear-gradient(180deg, #8ee9c8, #34d0a0); box-shadow: 0 2px 0 rgba(20, 130, 90, .3); }
.pat.done::before { content: "✓ "; }
.pat:active { transform: translateY(2px); }

/* れんさクイズ */
.quiz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.quiz-q { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 #e3d7f2, 0 6px 14px rgba(120, 80, 170, .12); color: #5b4a78; font: inherit; text-align: left; cursor: pointer; }
.quiz-q:active { transform: translateY(2px); box-shadow: 0 1px 0 #e3d7f2; }
.quiz-q b { font-size: 12px; color: #3a9cf0; letter-spacing: .05em; }
.quiz-q .qs { position: absolute; right: 10px; top: 8px; color: #ffb52e; font-size: 12px; letter-spacing: -1px; }
.quiz-q .qt { font-weight: 900; font-size: 14px; }
.quiz-q.done::after { content: '✓'; position: absolute; right: 10px; bottom: 7px; width: 18px; height: 18px; border-radius: 50%; background: #19a974; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 900; }
.tutor .q-note { display: block; margin-top: 2px; font-size: 11px; opacity: .7; }

/* 形の解説 */
.guide-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.guide-open { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #fff 0%, #eef6ff 100%); box-shadow: 0 3px 0 #cfe3f7, 0 6px 14px rgba(60, 120, 200, .14); color: #1658b0; font: inherit; cursor: pointer; }
.guide-open:active { transform: translateY(2px); box-shadow: 0 1px 0 #cfe3f7; }
.guide-open b { font-size: 16px; font-weight: 900; }
.guide-open small { font-size: 10.5px; color: #5b6f8a; }
.quiz-grp { display: inline-block; margin: 2px 2px 6px; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-weight: 900; font-size: 13px; color: #1d5fb3; box-shadow: 0 2px 6px rgba(20, 60, 140, .15); }
#scr-guide { display: none; flex-direction: column; }
#scr-guide.active { display: flex; }
#guide-tabs { margin: 0 14px 8px; }
#guide-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 12px; padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); color: var(--ink); font-size: 14px; line-height: 1.7; }
#guide-body .g-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; color: #1d3e6e; text-shadow: none; -webkit-text-stroke: 0; }
.g-h span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3a9cf0; color: #fff; font-size: 14px; }
.g-fig { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.g-cv { width: min(190px, 42vw); border-radius: 12px; background: #e9f4ff; }
.g-fig figcaption { width: 100%; text-align: center; font-size: 11.5px; color: #5b6f8a; }
.g-text p { margin: 0 0 8px; }
.g-text ul { margin: 0 0 8px; padding-left: 1.2em; }
.g-text li { margin-bottom: 3px; }
.g-point { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: #fff6dc; font-size: 13px; }
.g-point b:first-child { display: block; color: #9a5a00; }
.g-go { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.g-go .btn { min-height: 46px; font-size: 15px; }
.guide-pager { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
.guide-pager .btn { flex: 1; min-height: 44px; font-size: 15px; }
.guide-pager .btn:disabled { opacity: .4; }

/* あそびかた：タブときろく */
.howto-top { padding: 0 12px 6px; }
.howto-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
.howto-tabs button { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 5px 2px; font-size: 12.5px; white-space: nowrap; }
.howto-tabs .cnt { font-style: normal; font-size: 10px; font-weight: 800; opacity: .75; }
.howto-tabs .cnt.full { color: #19a974; opacity: 1; }
.howto-tabs .cnt.full::before { content: '✓'; }
.rec-strip { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 5px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(20, 60, 140, .15); font: inherit; color: #1d5fb3; cursor: pointer; }
.rec-bar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: #dceafa; overflow: hidden; }
.rec-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #6fd3ff, #ff9cc8); transition: width .4s; }
.rec-strip b { font-size: 12px; font-weight: 900; min-width: 38px; text-align: right; }
.rec-medals { display: flex; gap: 3px; }
.medal { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 900; color: #a9b8cc; background: #e8eef6; border: 2px solid #d3deeb; }
.medal.on { color: #8a4b00; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffd24a 55%, #f0a800); border-color: #fff; box-shadow: 0 1px 3px rgba(160, 100, 0, .45); }
.medal.big { width: 40px; height: 40px; font-size: 17px; border-width: 3px; }
#scr-howto .pane { display: none; }
#scr-howto .pane.show { display: block; }
#scr-howto .pane > .sec-h:first-child { margin-top: 4px; }
.rec-list { display: flex; flex-direction: column; gap: 10px; }
.rec-cat { padding: 12px; border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); color: var(--ink); }
.rec-cat.full { background: linear-gradient(180deg, #fffbe6, #fff); }
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rec-head span { flex: 1; display: flex; flex-direction: column; }
.rec-head b { font-size: 15px; }
.rec-head small { font-size: 11px; color: #8a6a1f; }
.rec-head em { font-style: normal; font-weight: 900; color: #1d5fb3; }
.rec-cat .rec-bar { display: block; margin-bottom: 8px; }
.rec-cat ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rec-cat li { padding: 2px 8px; border-radius: 99px; background: #eef3f9; color: #8796ab; font-size: 11px; font-weight: 800; }
.rec-cat li.ok { background: #dff7ec; color: #12825a; }
.rec-cat li.ok::before { content: '✓ '; }
.guide-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.guide-open.wide { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
.guide-open.wide .howto-cv { width: 64px; height: 84px; flex: none; border-radius: 12px; }
.guide-open.wide span { display: flex; flex-direction: column; gap: 3px; }
.guide-open.wide b { font-size: 17px; }
.guide-open.wide small { font-size: 11.5px; }
.guide-open.wide .g-pages { align-self: flex-start; font-style: normal; font-size: 10.5px; font-weight: 900; padding: 1px 8px; border-radius: 99px; background: #e2f0ff; color: #1d5fb3; }
.guide-open.wide.done .g-pages::after { content: ' ✓ よんだ'; color: #19a974; }

.cmk { display: inline-block; margin-left: 1px; font-size: .85em; font-weight: 900; opacity: .85; }

.g-table { width: 100%; margin: 4px 0 10px; border-collapse: separate; border-spacing: 0; font-size: 12.5px; text-align: center; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 2px #dceafa; }
.g-table th { background: #e2f0ff; color: #1d5fb3; padding: 5px 4px; font-weight: 900; }
.g-table td { padding: 5px 4px; border-top: 1px solid #e6eef8; background: #fff; }
.g-table td:first-child { text-align: left; font-weight: 800; padding-left: 8px; }
.g-table .good { color: #12825a; font-weight: 900; background: #e8f8f0; }
.g-table .bad { color: #c2185b; font-weight: 900; background: #fdeef4; }
#guide-tabs button { white-space: nowrap; font-size: 12.5px; }

.dpad.p-hard-wait { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 120, 170, .7)); }