:root {
  --bg: #f6f1e7;
  --panel: #fffdf8;
  --ink: #3a332b;
  --muted: #8a7f72;
  --accent: #e8794a;
  --board: #ece4d4;
  --cell-line: #e2d8c5;
  --c0: #ef6461; --c0d: #c94a47;
  --c1: #4f8fe6; --c1d: #3a6fbb;
  --c2: #4cbf7a; --c2d: #369a5d;
  --c3: #f4c430; --c3d: #c99d17;
  --c4: #a56de0; --c4d: #8150b8;
  --c5: #3b3a40; --c5d: #1f1e22;
  --c6: #f06aa8; --c6d: #c44a86;
  --c7: #f7f9fc; --c7d: #b9c6d6; /* 2026-10-11 白ダンゴウオ */
  --c8: #9a958e; --c8d: #67625b; /* 2026-10-12 対戦の石 */
  --c9: #4a4d55; --c9d: #2a2c32; /* 2026-10-12 じっくりモードの割れない石 */
  --cell: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1a17; --panel: #2a2622; --ink: #f1ebe2; --muted: #a99e90;
    --board: #2f2a25; --cell-line: #3a342e;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
#app { height: 100%; max-width: 560px; margin: 0 auto; position: relative; }
.hidden { display: none !important; }
.screen { height: 100%; display: flex; flex-direction: column; align-items: center; }

/* トップ */
#top { justify-content: center; gap: 12px; padding: 16px; }
.logo { text-align: center; font-size: 34px; margin: 0 0 4px; letter-spacing: .05em; }
.logo small { font-size: 14px; color: var(--muted); letter-spacing: 0; font-weight: 500; }
.faces-demo { display: flex; gap: 8px; margin: 8px 0 16px; }
.faces-demo .blk { position: relative; transform: none; width: 44px; height: 44px; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button.big { width: min(280px, 100%); padding: 14px; border-radius: 14px; font-size: 18px; font-weight: 700;
  background: var(--accent); color: #fff; box-shadow: 0 3px 0 #b85a33; }
button.big:active { transform: translateY(2px); box-shadow: 0 1px 0 #b85a33; }
button.sub { width: min(280px, 100%); padding: 10px; border-radius: 12px; background: var(--panel); color: var(--muted); }
.hint { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.7; margin-top: 12px; }

/* HUD */
.hud { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 8px 6px;
  padding-top: max(8px, env(safe-area-inset-top)); }
.hud > div { background: var(--panel); border-radius: 10px; padding: 4px 6px; text-align: center; }
.hud .lbl { display: block; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.hud b { font-size: 18px; font-variant-numeric: tabular-nums; }
.hud .chain-on b { color: var(--accent); }

/* 盤面 */
.board-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: 0; }
.board { position: relative; width: calc(var(--cell) * 8); height: calc(var(--cell) * 12);
  background: var(--board); border-radius: 12px; touch-action: none; overflow: hidden;
  background-image: linear-gradient(var(--cell-line) 1px, transparent 1px), linear-gradient(90deg, var(--cell-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); }
.line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.trail { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); padding: 6px; pointer-events: none; z-index: 0;
  transform: translate(var(--x), var(--y)); }
.trail::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 30%; background: var(--tc); opacity: .35;
  box-shadow: 0 0 10px 2px var(--tc); animation: trailIn .25s ease-out; }
.trail.gone::before { animation: trailOut .3s ease-out forwards; }
@keyframes trailIn { from { opacity: 0; transform: scale(.5); } to { opacity: .35; transform: none; } }
@keyframes trailOut { to { opacity: 0; transform: scale(1.3); } }

/* キャラクターブロック */
.blk { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); padding: 3px;
  transform: translate(var(--x), var(--y)); z-index: 1; } /* will-change はやめた(96個が常にGPUに載ってスマホが熱くなるため) */
.blk .bd { position: relative; width: 100%; height: 100%; border-radius: 38% 38% 34% 34%;
  /* みずみずしさ: 中心が明るく縁が濃いゼリー状のグラデーション+底の照り返し */
  background:
    radial-gradient(120% 90% at 50% 105%, color-mix(in srgb, var(--fill), white 35%) 0 18%, transparent 45%),
    radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill), white 22%) 0%, var(--fill) 55%, var(--shade) 100%);
  box-shadow: inset 0 -3px 6px color-mix(in srgb, var(--shade), black 15%), inset 0 2px 3px rgba(255,255,255,.55),
    0 3px 4px -1px color-mix(in srgb, var(--shade), transparent 45%);
  animation: jelly 3.2s ease-in-out infinite; animation-delay: var(--bd, 0s);
  transition: background .2s, transform .15s; }
.blk.c0 { --fill: var(--c0); --shade: var(--c0d); }
.blk.c1 { --fill: var(--c1); --shade: var(--c1d); }
.blk.c2 { --fill: var(--c2); --shade: var(--c2d); }
.blk.c3 { --fill: var(--c3); --shade: var(--c3d); }
.blk.c4 { --fill: var(--c4); --shade: var(--c4d); }
/* 顔: 間抜けで癒し系。点の目を離して低めに、ほっぺは全員 */
.blk { --ink: #4a3a32; }
.eye { position: absolute; top: 44%; width: 11%; height: 13%; background: var(--ink); border-radius: 50%; z-index: 1;
  transition: height .1s, top .1s, transform .1s; }
.eye.l { left: 20%; } .eye.r { right: 20%; }
.eye::after { content: ""; position: absolute; width: 40%; height: 36%; background: #fff; border-radius: 50%; top: 12%; left: 18%; }
.mouth { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); z-index: 1; }
.brow { position: absolute; top: 33%; width: 14%; height: 4.5%; background: var(--ink); border-radius: 3px; display: none; z-index: 1; }
.brow.l { left: 18%; } .brow.r { right: 18%; }
.cheek { position: absolute; top: 58%; width: 15%; height: 9%; background: rgba(255,110,130,.42); border-radius: 50%; z-index: 1; }
.cheek.l { left: 7%; } .cheek.r { right: 7%; }
.x { position: absolute; display: none; z-index: 2; pointer-events: none; }

/* 赤: ぷんすか(怒っても怖くない。眉が少しハの字、口はむっ) */
.c0 .brow { display: block; } .c0 .brow.l { transform: rotate(18deg); } .c0 .brow.r { transform: rotate(-18deg); }
.c0 .mouth { width: 18%; height: 9%; border: 2.2px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; top: 64%; }
.c0 .cheek { background: rgba(255,90,90,.55); }
/* 青: 眠そう。閉じた目+鼻ちょうちん */
.c1 .eye { height: 7%; top: 48%; background: transparent; border: 2.2px solid var(--ink); border-top: 0; border-radius: 0 0 50% 50%; width: 14%; }
.c1 .eye::after { display: none; }
.c1 .mouth { width: 9%; height: 7%; background: var(--ink); border-radius: 50%; top: 66%; left: 46%; }
.c1 .x { display: block; left: 56%; top: 52%; width: 18%; height: 18%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 18%, rgba(200,235,255,.55) 40%, rgba(160,210,255,.35) 100%);
  border: 1px solid rgba(255,255,255,.7); animation: bubble 2.6s ease-in-out infinite; animation-delay: var(--bd, 0s); transform-origin: 0 50%; }
@keyframes bubble { 0%, 100% { transform: scale(.35); } 55% { transform: scale(1); } 60% { transform: scale(1.05); } }
/* 緑: ニコニコ。^ ^ の目と ω の口 */
.c2 .eye { height: 10%; width: 15%; top: 43%; background: transparent; border: 2.6px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; }
.c2 .eye::after { display: none; }
.c2 .mouth { width: 22%; height: 13%; top: 59%; background: var(--ink); border-radius: 15% 15% 60% 60% / 15% 15% 90% 90%; overflow: hidden; }
.c2 .mouth::after { content: ""; position: absolute; left: 25%; bottom: -20%; width: 50%; height: 60%; background: #f2828f; border-radius: 50%; }
/* 黄: 驚きやすい。左右で大きさの違うまんまる目と小さな「ほ」の口 */
.c3 .eye { width: 13%; height: 16%; top: 40%; } .c3 .eye.r { width: 15%; height: 18%; top: 39%; }
.c3 .mouth { width: 10%; height: 12%; background: var(--ink); border-radius: 50%; top: 63%; }
/* 紫: ぼーっと。目の高さがずれて、口はぽかん */
.c4 .eye.l { top: 43%; left: 18%; } .c4 .eye.r { top: 48%; right: 24%; width: 9%; height: 11%; }
.c4 .mouth { width: 12%; height: 10%; background: var(--ink); border-radius: 40% 40% 50% 50%; top: 64%; left: 46%; }

/* 通常: 瞬き(緑・青は目を閉じているので動かさない) */
.blk .eye { animation: blink 5s infinite; animation-delay: var(--bd, 0s); }
.c1 .eye, .c2 .eye { animation: none; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.1); } }
/* なぞられ中: プレイヤーを見る(ぽわっと膨らんで目がぱっちり) */
.blk.sel .bd { animation: none; transform: scale(1.08); }
.blk.sel .eye { animation: none; transform: translateY(-10%) scale(1.2); }
.blk.sel.c1 .eye { height: 13%; top: 44%; width: 11%; border: 0; background: var(--ink); border-radius: 50%; }
.blk.sel.c1 .x { animation: none; transform: scale(0); }
/* 5個以上つながった: 嬉しそうに弾む */
.blk.ready .bd { animation: hop .5s ease-in-out infinite; }
.blk.ready .cheek { display: block; }
@keyframes hop { 0%,100% { transform: scale(1.08) translateY(0); } 50% { transform: scale(1.12, 1.04) translateY(-8%); } }
/* 消去: 嬉しそうに小さくなる */
.blk.pop .bd { animation: pop .22s ease-in forwards; }
@keyframes pop { 0% { transform: scale(1.15) translateY(-10%); } 100% { transform: scale(0) translateY(-30%); opacity: 0; } }
/* 着地: 少し潰れる */
/* 色変化: 驚く→新しい色 */
.blk.change .bd { animation: change .35s ease-out; }
@keyframes change { 0% { transform: scale(1.2); filter: brightness(1.6); } 40% { transform: scale(.9); } 100% { transform: none; filter: none; } }
.blk.change .eye { transform: scale(1.3); }

/* 得点ポップ */
.popup { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); pointer-events: none;
  font-size: 28px; font-weight: 800; color: var(--accent); text-shadow: 0 2px 0 var(--panel); opacity: 0; z-index: 10; text-align: center; }
.popup.show { animation: popup .8s ease-out; }
.popup small { display: block; font-size: 16px; }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, -30%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }

.ctrl { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.ctrl button { padding: 8px 14px; border-radius: 10px; background: var(--panel); font-size: 14px; }
.mode { font-size: 13px; color: var(--muted); }

/* オーバーレイ */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.card { background: var(--panel); border-radius: 18px; padding: 20px; width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.card h2 { margin: 0; letter-spacing: .1em; }
.res { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 4px 0 8px; width: 100%; font-size: 14px; }
.res dt { color: var(--muted); } .res dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#rScore { font-size: 22px; }
.newbest { font-size: 32px; font-weight: 900; color: var(--accent); animation: nb .8s ease-in-out infinite alternate; }
@keyframes nb { from { transform: scale(1); } to { transform: scale(1.1); } }

.trial { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.trial select { font: inherit; font-size: 13px; padding: 6px; border-radius: 8px; background: var(--panel); color: var(--ink); border: 1px solid var(--cell-line); }

/* 黒: どの色ともつながる。目がキラッと光る */
.blk.c5 { --fill: var(--c5); --shade: var(--c5d); }
/* 黒は硬い: 角ばった石のような面取り、揺れない・潰れない */
.blk.c5 .bd { border-radius: 16%; animation: none;
  background: linear-gradient(145deg, #5a5961 0%, #3b3a40 45%, #26252a 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.22), inset -2px -3px 0 rgba(0,0,0,.55),
    0 0 0 2px rgba(255,215,90,.8), 0 0 8px rgba(255,215,90,.4), 0 3px 3px rgba(0,0,0,.35); }
.blk.c5 .bd::before { left: 10%; top: 10%; width: 30%; height: 6%; border-radius: 2px; transform: none; background: rgba(255,255,255,.35); }
.blk.c5 .bd::after { display: none; }
.c5 .cheek { display: none; }
.c5 .eye { animation: none; }
.blk.c5.sel .bd { transform: none; }
.blk.c5.ready .bd { animation: rattle .25s linear infinite; }
@keyframes rattle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.blk.c5.land .bd { animation: thunk .15s ease-out; }
@keyframes thunk { 0% { transform: translateY(4%); } 100% { transform: none; } }
.c5 .eye { background: #ffd75a; height: 8%; width: 13%; top: 45%; border-radius: 2px; box-shadow: 0 0 4px #ffd75a; }
.c5 .eye::after { display: none; }
.c5 .mouth { width: 20%; height: 4%; background: #ffd75a; border-radius: 1px; top: 64%; opacity: .85; }
.blk.blast .bd { animation: blastPop .26s ease-in forwards; }
@keyframes blastPop { 0% { transform: scale(1.1) rotate(0); filter: brightness(1.8); } 100% { transform: scale(0) rotate(25deg); opacity: 0; } }
.board.shake { animation: shake .25s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ツヤ: 左上の大きな光沢と小さな光の粒(目より下のレイヤー) */
.blk .bd::before { content: ""; position: absolute; left: 13%; top: 7%; width: 52%; height: 26%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); transform: rotate(-12deg); pointer-events: none; }
.blk .bd::after { content: ""; position: absolute; right: 15%; top: 12%; width: 9%; height: 9%; border-radius: 50%;
  background: rgba(255,255,255,.9); pointer-events: none; }
/* 待機中: ゆっくりぷるんと呼吸する */
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975) translateY(1.2%); } }
/* 着地: ゼリーらしく潰れて跳ね返る */
.blk.land .bd { animation: land .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes land { 0% { transform: scale(1.18, .78) translateY(10%); } 45% { transform: scale(.94, 1.07) translateY(-3%); } 100% { transform: none; } }
/* 目にもうるみを */
.eye::after { background: rgba(255,255,255,.95); }

/* ランキング・名前 */
button.sub.on { color: var(--ink); font-weight: 700; }
.who { background: none; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.rank-card { max-height: calc(100% - 16px); }
.tabs { display: flex; gap: 6px; width: 100%; }
.tabs button { flex: 1; padding: 8px; border-radius: 10px; background: var(--bg); color: var(--muted); font-weight: 700; }
.tabs button.on { background: var(--accent); color: #fff; }
.rank-list { list-style: none; margin: 0; padding: 0; width: 100%; overflow-y: auto; max-height: 52vh; }
.rank-list li { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-bottom: 1px solid var(--cell-line); font-size: 14px; }
.rank-list li.me { background: color-mix(in srgb, var(--accent), transparent 82%); border-radius: 8px; font-weight: 700; }
.rank-list li.msg { justify-content: center; color: var(--muted); border: 0; }
.rank-list .no { width: 2.4em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-list li:nth-child(1) .no, .rank-list li:nth-child(2) .no, .rank-list li:nth-child(3) .no { color: var(--accent); font-weight: 800; }
.rank-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.rank-list .del { background: none; color: var(--muted); padding: 0 4px; font-size: 16px; }
/* 名前を押すとプロフィール(2026-10-14) */
.rank-list button.nm { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rank-list button.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list .nm .on { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fbf5b; margin-left: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px color-mix(in srgb, #2fbf5b, transparent 75%); } /* 1時間以内にプレイ */
.prof-last { margin: 2px 0 0; font-size: 13px; font-weight: 700; text-align: center; }
.prof-card { max-height: calc(100% - 16px); }
.prof-card h2 { letter-spacing: 0; overflow-wrap: anywhere; text-align: center; }
.prof-body { width: 100%; overflow-y: auto; padding-right: 10px; scrollbar-gutter: stable; box-sizing: border-box; } /* スクロールバーが右寄せの点数にかぶらないように(2026-10-20) */
.prof-body h3 { margin: 6px 0 2px; font-size: 14px; color: var(--accent); }
.prof-body .res { margin: 0 0 4px; }
.prof-body .msg { text-align: center; color: var(--muted); }
.prof-note { margin: 4px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.prof-rep { background: none; border: 0; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; padding: 4px; opacity: .8; }
.rank-me { font-size: 13px; font-weight: 700; min-height: 1em; }
.rank-who { font-size: 12px; color: var(--muted); }

/* ===================== ダンゴリン: 丸文字・ロゴ・かわいいボタン ===================== */
html, body { font-family: "M PLUS Rounded 1c", system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; }
body { background:
  radial-gradient(circle at 15% 12%, rgba(120,200,255,.18) 0 60px, transparent 61px),
  radial-gradient(circle at 88% 30%, rgba(120,200,255,.14) 0 34px, transparent 35px),
  radial-gradient(circle at 75% 85%, rgba(120,200,255,.12) 0 48px, transparent 49px),
  var(--bg); }
#top { gap: 10px; }
.logo { display: flex; justify-content: center; gap: 0; margin: 0 0 2px; font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.logo span { display: inline-block; color: var(--lc); -webkit-text-stroke: 7px #fff; paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ls), 0 8px 10px rgba(0,0,0,.12); animation: logoBob 2.4s ease-in-out infinite; }
.logo .l0 { --lc: var(--c0); --ls: var(--c0d); transform: rotate(-8deg); animation-delay: 0s; }
.logo .l1 { --lc: var(--c1); --ls: var(--c1d); transform: rotate(5deg); animation-delay: .15s; }
.logo .l2 { --lc: var(--c2); --ls: var(--c2d); transform: rotate(-4deg); animation-delay: .3s; }
.logo .l3 { --lc: var(--c3); --ls: var(--c3d); transform: rotate(7deg); animation-delay: .45s; }
.logo .l4 { --lc: var(--c4); --ls: var(--c4d); transform: rotate(-5deg); animation-delay: .6s; }
@keyframes logoBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.faces-demo { margin: 4px 0 10px; }
.faces-demo .blk { animation: logoBob 2.4s ease-in-out infinite; }
.faces-demo .blk:nth-child(2) { animation-delay: .2s; } .faces-demo .blk:nth-child(3) { animation-delay: .4s; }
.faces-demo .blk:nth-child(4) { animation-delay: .6s; } .faces-demo .blk:nth-child(5) { animation-delay: .8s; }

.btn { --b1: #ff9a6b; --b2: #f2734a; --bs: #c9552f; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(290px, 100%); padding: 13px 18px; border-radius: 999px; font: inherit; font-size: 19px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--b1), var(--b2)); box-shadow: 0 5px 0 var(--bs), 0 8px 14px rgba(0,0,0,.12);
  text-shadow: 0 1px 0 rgba(0,0,0,.15); transition: transform .08s, box-shadow .08s; }
.btn::before { content: ""; position: absolute; left: 14%; right: 14%; top: 4px; height: 38%; border-radius: 999px; background: rgba(255,255,255,.35); pointer-events: none; }
.btn::after { content: ""; position: absolute; right: 22px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75); }
.btn:active { transform: translateY(4px) scale(.98); box-shadow: 0 1px 0 var(--bs), 0 3px 6px rgba(0,0,0,.12); }
.btn svg { width: 24px; height: 24px; flex: 0 0 auto; }
.btn span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn small { font-size: 12px; font-weight: 500; opacity: .9; }
.btn.b30 { --b1: #ff9a7a; --b2: #ff6f61; --bs: #d14b44; }
.btn.bend { --b1: #6fd3ff; --b2: #3fa7f0; --bs: #2a7cc0; }
.btn.brank { --b1: #ffd95a; --b2: #ffb92e; --bs: #d18e12; color: #6b4a00; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.btn.cont { --b1: #8ce6a8; --b2: #4cc77a; --bs: #2f9a58; }
.btn.plain { --b1: #fffdf8; --b2: #f1eadc; --bs: #d9cdb5; color: var(--ink); text-shadow: none; font-size: 16px; padding: 10px 16px; }
.btn.plain::after { display: none; }
@media (prefers-color-scheme: dark) { .btn.plain { --b1: #3a342e; --b2: #2f2a25; --bs: #1c1916; } }
.toggles { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800;
  background: var(--panel); color: var(--ink); box-shadow: 0 3px 0 var(--cell-line); }
.chip svg { width: 17px; height: 17px; }
.chip.off { color: var(--muted); opacity: .6; }
.chip.off svg { opacity: .5; }
.chip[data-snd].off span::after { content: " OFF"; } .chip[data-snd]:not(.off) span::after { content: " ON"; color: var(--accent); }
.chip[data-skin].on { background: var(--accent); color: #fff; box-shadow: 0 3px 0 #b85a33; }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cell-line); }
.ctrl .round { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 14px; border-radius: 18px; font: inherit; font-size: 11px; font-weight: 800;
  background: var(--panel); box-shadow: 0 3px 0 var(--cell-line); color: var(--ink); }
.ctrl .round svg { width: 22px; height: 22px; color: var(--accent); }
.ctrl .round:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cell-line); }
.hud > div { border-radius: 16px; box-shadow: 0 3px 0 var(--cell-line); }
.hud b { font-weight: 800; }
.card { border-radius: 26px; }
.card h2 { font-weight: 800; }
.tabs button { font: inherit; font-weight: 800; border-radius: 999px; }

/* ===================== ダンゴウオ(まんまるの魚。ヒレ付き) ===================== */
.fin { display: none; position: absolute; pointer-events: none; }
.skin-dango .blk:not(.c5) .bd { border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; }
.skin-dango .blk:not(.c5) .fin { display: block; background: color-mix(in srgb, var(--fill), white 25%); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--shade), transparent 40%); }
/* 背びれ: 頭のてっぺんにちょこん */
.skin-dango .blk:not(.c5) .fin.d { left: 44%; top: -9%; width: 20%; height: 20%; border-radius: 60% 60% 30% 30%; transform: rotate(14deg); z-index: -1;
  animation: finD 1.8s ease-in-out infinite; animation-delay: var(--bd, 0s); }
/* 胸びれ: 横でぱたぱた */
.skin-dango .blk:not(.c5) .fin.p { right: -7%; top: 52%; width: 22%; height: 17%; border-radius: 50% 70% 70% 50%; transform-origin: 0 50%; z-index: 0;
  animation: finP .9s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes finD { 0%,100% { transform: rotate(14deg); } 50% { transform: rotate(-6deg); } }
@keyframes finP { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(22deg); } }
/* ぶつぶつの肌(小さな水玉) */
.skin-dango .blk:not(.c5) .bd { background:
  radial-gradient(circle at 22% 70%, rgba(255,255,255,.28) 0 3%, transparent 4%),
  radial-gradient(circle at 80% 76%, rgba(255,255,255,.24) 0 2.6%, transparent 3.6%),
  radial-gradient(circle at 70% 30%, rgba(255,255,255,.2) 0 2.4%, transparent 3.4%),
  radial-gradient(120% 90% at 50% 105%, color-mix(in srgb, var(--fill), white 35%) 0 18%, transparent 45%),
  radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill), white 22%) 0%, var(--fill) 55%, var(--shade) 100%); }
/* 目はもっと大きく、ちょっと離れ気味(間抜け) */
.skin-dango .blk:not(.c5) .eye { width: 14%; height: 17%; }
.skin-dango .blk:not(.c5) .eye.l { left: 17%; } .skin-dango .blk:not(.c5) .eye.r { right: 17%; }
.skin-dango .c1 .eye, .skin-dango .c2 .eye { height: 8%; width: 15%; }
/* 口はおちょぼ */
.skin-dango .c3 .mouth, .skin-dango .c4 .mouth { width: 9%; height: 9%; }
/* 選ばれたら泳ぐように揺れる */
.skin-dango .blk.sel:not(.c5) .fin.p { animation-duration: .35s; }

/* ===================== 海の背景(2026-10-08ユーザー指示「背景海っぽく」) ===================== */
:root { --sea1: #9be3f7; --sea2: #45b4e0; --sea3: #1d6fb2; --sea4: #134d86; }
@media (prefers-color-scheme: dark) { :root { --sea1: #2c7fae; --sea2: #1a5a8a; --sea3: #0f3b63; --sea4: #08243f; } }
html, body { background: var(--sea3); }
body { background:
  radial-gradient(120% 50% at 50% -10%, rgba(255,255,255,.45), transparent 60%),
  linear-gradient(180deg, var(--sea1) 0%, var(--sea2) 32%, var(--sea3) 72%, var(--sea4) 100%);
  background-attachment: fixed; }
/* 上から差す光の帯 */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(105deg, rgba(255,255,255,.0) 0 40px, rgba(255,255,255,.07) 40px 70px, rgba(255,255,255,0) 70px 130px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 65%); mask-image: linear-gradient(180deg, #000, transparent 65%);
  animation: rays 9s ease-in-out infinite alternate; }
@keyframes rays { from { transform: translateX(-20px); } to { transform: translateX(20px); } }
/* 下から上がっていく泡 */
body::after { content: ""; position: fixed; left: 0; right: 0; bottom: -40vh; height: 140vh; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.55) 0 4px, rgba(255,255,255,.15) 5px, transparent 7px),
    radial-gradient(circle at 18% 60%, rgba(255,255,255,.5) 0 3px, transparent 5px),
    radial-gradient(circle at 34% 80%, rgba(255,255,255,.5) 0 6px, rgba(255,255,255,.12) 7px, transparent 9px),
    radial-gradient(circle at 52% 40%, rgba(255,255,255,.45) 0 3px, transparent 5px),
    radial-gradient(circle at 66% 70%, rgba(255,255,255,.5) 0 5px, rgba(255,255,255,.12) 6px, transparent 8px),
    radial-gradient(circle at 82% 50%, rgba(255,255,255,.5) 0 3px, transparent 5px),
    radial-gradient(circle at 93% 85%, rgba(255,255,255,.5) 0 7px, rgba(255,255,255,.12) 8px, transparent 10px),
    radial-gradient(circle at 44% 15%, rgba(255,255,255,.45) 0 4px, transparent 6px),
    radial-gradient(circle at 74% 20%, rgba(255,255,255,.4) 0 2px, transparent 4px);
  animation: bubbles 16s linear infinite; }
@keyframes bubbles { from { transform: translateY(0); } to { transform: translateY(-40vh); } }
#app { z-index: 1; }
/* 海の上でも読めるように: 文字は白、パネルは白いガラス風 */
#top .logo span { -webkit-text-stroke-color: #fff; }
.who, .mode { color: rgba(255,255,255,.92) !important; text-shadow: 0 1px 2px rgba(0,40,80,.4); }
.hud > div { background: rgba(255,255,255,.9); color: #3a332b; box-shadow: 0 3px 0 rgba(0,50,100,.18); } /* 2026-10-09 すりガラス(backdrop-filter)をやめた: 後ろの泡が動くたびに描き直して iPhone で重い */
.hud .lbl { color: #5f7a90; }
.chip { background: rgba(255,255,255,.85); color: #2d4a60; box-shadow: 0 3px 0 rgba(0,50,100,.2); }
.chip.off { color: #5f7a90; }
.ctrl .round { background: rgba(255,255,255,.85); color: #2d4a60; box-shadow: 0 3px 0 rgba(0,50,100,.2); }
/* 盤面: 水の中の砂地っぽく */
.board { background-color: rgba(255,255,255,.16);
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,236,200,.22));
  background-size: var(--cell) var(--cell), var(--cell) var(--cell), 100% 100%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 24px rgba(0,40,90,.25); border-radius: 18px; }
.popup { text-shadow: 0 2px 0 #fff, 0 0 10px rgba(255,255,255,.8); }
@media (prefers-color-scheme: dark) {
  .hud > div, .chip, .ctrl .round { background: rgba(20,40,60,.75); color: #e8f2fa; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
  .hud .lbl, .chip.off { color: #9fb7c9; }
}

.chip.off { opacity: 1; color: #5a7184; }
.chip.off svg { opacity: .55; }

/* ===================== 黒の大技の演出 ===================== */
/* なぞり中の予告: 黒が金色に光り、巻き込まれるブロックが震える */
.board.charged .blk.c5.sel .bd { box-shadow: 0 0 0 3px #ffd75a, 0 0 18px 6px rgba(255,200,60,.9), inset 2px 2px 0 rgba(255,255,255,.22); animation: charge .3s ease-in-out infinite alternate; }
@keyframes charge { from { filter: brightness(1); } to { filter: brightness(1.6); } }
.blk.doom .bd { animation: doom .12s linear infinite !important; }
.blk.doom::after { content: ""; position: absolute; inset: 0; border-radius: 40%; box-shadow: inset 0 0 0 2px rgba(255,80,60,.85), 0 0 10px rgba(255,80,60,.6); pointer-events: none; }
@keyframes doom { 0% { transform: translate(-1.5px, 0) rotate(-3deg); } 50% { transform: translate(1.5px, -1px) rotate(3deg); } 100% { transform: translate(-1px, 1px) rotate(-2deg); } }
/* 吹っ飛ぶ */
.blk.blast { z-index: 6; }
.blk.blast .bd { animation: flyaway .5s cubic-bezier(.2,.7,.4,1) forwards !important; }
@keyframes flyaway { 0% { transform: scale(1.25); filter: brightness(2); } 100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.3); opacity: 0; } }
/* 衝撃波 */
/* 2026-10-10 iPhone で落ちる対策: 前は 10px の輪を26倍に広げていて、iPhone は広げた後の大きさ(影込みで約6000px四方)で絵を作っていた。
   最後の大きさ(260px)で作って、小さく縮めた所から広げる */
.shock { position: absolute; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; z-index: 7; pointer-events: none; box-sizing: border-box;
  border: 26px solid rgba(255,220,90,.95); box-shadow: 0 0 40px 12px rgba(255,190,60,.7), inset 0 0 30px rgba(255,255,255,.8);
  animation: shock .6s ease-out forwards; }
@keyframes shock { from { transform: scale(.008); opacity: 1; border-width: 130px; } to { transform: scale(1); opacity: 0; border-width: 26px; } }
/* 火花 */
.spark { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; z-index: 8; pointer-events: none;
  background: #fff6c8; box-shadow: 0 0 8px 3px rgba(255,200,60,.95); animation: spark .7s ease-out forwards; }
@keyframes spark { from { transform: translate(0,0) scale(1.3); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; } }
/* 画面フラッシュ */
.flash { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle, #fff 0%, rgba(255,240,180,.85) 40%, rgba(255,220,120,0) 75%);
  animation: flash .45s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
/* ドドーン! */
.boom { position: absolute; left: 50%; top: 42%; z-index: 12; pointer-events: none; white-space: nowrap;
  font-size: 54px; font-weight: 800; color: #ffcf3a; -webkit-text-stroke: 8px #3b2a10; paint-order: stroke fill;
  text-shadow: 0 6px 0 #3b2a10, 0 0 30px rgba(255,200,60,.9); animation: boom 1.1s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes boom { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-12deg); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1.25) rotate(-6deg); opacity: 1; }
  35% { transform: translate(-50%,-50%) scale(1) rotate(-6deg); } 80% { opacity: 1; } 100% { transform: translate(-50%,-62%) scale(1.05) rotate(-6deg); opacity: 0; } }
/* 大揺れ */
.board.bigshake { animation: bigshake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes bigshake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); } 30%, 50%, 70% { transform: translate(-9px, 4px) rotate(-1deg); } 40%, 60% { transform: translate(9px, -4px) rotate(1deg); } }

/* ダンゴウオ版の黒: 黒い鎧のダンゴウオ(丸いけれど硬い。揺れず、ヒレもゆっくり) */
.skin-dango .blk.c5 .bd { border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%;
  background:
    radial-gradient(circle at 26% 72%, rgba(255,215,90,.35) 0 3%, transparent 4%),
    radial-gradient(circle at 78% 70%, rgba(255,215,90,.3) 0 2.6%, transparent 3.6%),
    radial-gradient(circle at 64% 26%, rgba(255,215,90,.28) 0 2.4%, transparent 3.4%),
    radial-gradient(90% 80% at 38% 30%, #6a6873 0%, #3b3a40 50%, #1c1b20 100%);
  box-shadow: inset 2px 3px 0 rgba(255,255,255,.2), inset -2px -4px 0 rgba(0,0,0,.6),
    0 0 0 2px rgba(255,215,90,.85), 0 0 10px rgba(255,215,90,.45), 0 3px 3px rgba(0,0,0,.35); }
.skin-dango .blk.c5 .bd::before { left: 18%; top: 10%; width: 40%; height: 14%; border-radius: 50%; transform: rotate(-12deg); background: rgba(255,255,255,.3); }
.skin-dango .blk.c5 .fin { display: block; background: #2a2930; box-shadow: 0 0 0 1.5px rgba(255,215,90,.8); }
.skin-dango .blk.c5 .fin.d { left: 42%; top: -10%; width: 22%; height: 20%; border-radius: 30% 70% 20% 20%; transform: rotate(10deg); z-index: -1; }
.skin-dango .blk.c5 .fin.p { right: -6%; top: 52%; width: 22%; height: 16%; border-radius: 40% 70% 70% 40%; transform-origin: 0 50%; animation: finP 2.4s ease-in-out infinite; }
.skin-dango .blk.c5 .eye { width: 15%; height: 9%; top: 44%; }
.skin-dango .blk.c5 .eye.l { left: 18%; } .skin-dango .blk.c5 .eye.r { right: 18%; }

/* ダンゴウオの黒を「強そう」に: とげとげの背びれ、つり上がった金の眉、光る目、牙、金の鎧の縁 */
.skin-dango .blk.c5 .fin.d { left: 22%; top: -16%; width: 56%; height: 26%; border-radius: 0; transform: none; box-shadow: none;
  background: linear-gradient(180deg, #ffd75a, #b8860b); clip-path: polygon(0 100%, 12% 20%, 28% 75%, 50% 0, 72% 75%, 88% 20%, 100% 100%); }
.skin-dango .blk.c5 .fin.p { background: linear-gradient(90deg, #2a2930, #4a4852); clip-path: polygon(0 20%, 100% 0, 70% 50%, 100% 100%, 0 80%); box-shadow: none; }
.skin-dango .c5 .brow { display: block; background: #ffd75a; height: 7%; width: 22%; top: 33%; box-shadow: 0 0 4px rgba(255,200,60,.8); }
.skin-dango .c5 .brow.l { left: 14%; transform: rotate(24deg); } .skin-dango .c5 .brow.r { right: 14%; transform: rotate(-24deg); }
.skin-dango .blk.c5 .eye { background: #ffef9a; height: 8%; width: 14%; top: 46%; border-radius: 2px 2px 50% 50%; box-shadow: 0 0 6px 2px rgba(255,180,40,.95); }
.skin-dango .blk.c5 .eye.l { transform: rotate(14deg); } .skin-dango .blk.c5 .eye.r { transform: rotate(-14deg); }
.skin-dango .c5 .mouth { width: 26%; height: 4%; top: 66%; background: #ffd75a; border-radius: 1px; }
.skin-dango .c5 .mouth::before, .skin-dango .c5 .mouth::after { content: ""; position: absolute; top: 100%; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid #fff3c4; }
.skin-dango .c5 .mouth::before { left: 8%; } .skin-dango .c5 .mouth::after { right: 8%; }
.skin-dango .blk.c5 .bd { box-shadow: inset 2px 3px 0 rgba(255,255,255,.2), inset -2px -4px 0 rgba(0,0,0,.6),
  0 0 0 2.5px #ffd75a, 0 0 0 4px #7a5a10, 0 0 14px rgba(255,200,60,.55), 0 3px 3px rgba(0,0,0,.35); }

/* ===================== チェインの気持ちよさ ===================== */
.bub { position: absolute; border-radius: 50%; z-index: 7; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(255,255,255,.35) 35%, rgba(180,230,255,.25) 70%, rgba(255,255,255,.6) 100%);
  border: 1px solid rgba(255,255,255,.8); animation: bub .85s ease-out forwards; opacity: 0; }
.bub.gold { background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(255,240,170,.6) 40%, rgba(255,200,80,.35) 75%, rgba(255,255,255,.7) 100%); box-shadow: 0 0 6px rgba(255,210,90,.8); }
@keyframes bub { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.2); } }
.chainfx { position: absolute; left: 50%; top: 30%; z-index: 11; pointer-events: none; display: flex; flex-direction: column; align-items: center; line-height: 1;
  animation: chainIn 1.3s cubic-bezier(.2,1.7,.4,1) forwards; --cc: #ff8a3d; --cs: #fff; }
.chainfx b { font-size: 64px; font-weight: 800; color: var(--cc); -webkit-text-stroke: 8px var(--cs); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,40,90,.25); }
.chainfx span { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,40,90,.4); margin-top: -4px; }
.chainfx i { font-style: normal; font-size: 20px; font-weight: 800; color: #fff6b0; text-shadow: 0 2px 0 rgba(120,60,0,.5), 0 0 12px rgba(255,220,90,.9); margin-top: 4px; }
.chainfx.lv2 { --cc: #ffb000; } .chainfx.lv3 { --cc: #ff5fa2; } .chainfx.lv4 { --cc: #8b5cff; }
.chainfx.lv5 b { background: linear-gradient(90deg, #ff6b6b, #ffb000, #4cd07a, #3fa7f0, #a56de0); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 4px 0 rgba(0,40,90,.3)); }
.chainfx.lv4 b, .chainfx.lv5 b { font-size: 78px; }
@keyframes chainIn { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-10deg); opacity: 0; } 15% { transform: translate(-50%,-50%) scale(1.3) rotate(4deg); opacity: 1; }
  30% { transform: translate(-50%,-50%) scale(1) rotate(-2deg); } 80% { opacity: 1; } 100% { transform: translate(-50%,-80%) scale(1); opacity: 0; } }
.board.glow { animation: boardGlow .9s ease-out; }
.board.glow1 { --gc: rgba(255,170,90,.8); } .board.glow2 { --gc: rgba(255,200,40,.9); } .board.glow3 { --gc: rgba(255,95,162,.9); }
.board.glow4 { --gc: rgba(139,92,255,.95); } .board.glow5 { --gc: rgba(255,255,255,1); }
@keyframes boardGlow { 0% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 0 var(--gc), 0 0 40px 10px var(--gc); }
  100% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 14px transparent, 0 10px 24px rgba(0,40,90,.25); } }
.hud > div.pop { animation: hudPop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes hudPop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-3deg); background: #fff3c4; } 100% { transform: scale(1); } }
.hud .chain-on b { color: #ff6f61; }

.songs .chip { font-size: 12px; padding: 6px 11px; }
.chip[data-song].on { background: #3fa7f0; color: #fff; box-shadow: 0 3px 0 #2a7cc0; }

.popup { top: 64%; }

/* ===================== ダンゴウオ: まんまる版+参考画像の要素(とがった頭・白いひげ・左右のヒレ)(2026-10-08「間をとる」) ===================== */
/* 頭のてっぺんが、ちょこんととがる(背びれの代わり) */
.skin-dango .blk:not(.c5) .fin.d { left: 36%; top: -15%; width: 28%; height: 28%; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); z-index: 0;
  background: color-mix(in srgb, var(--fill), white 20%); box-shadow: none; animation: tip 2.2s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes tip { 0%,100% { transform: rotate(-45deg); } 50% { transform: rotate(-35deg) translateX(4%); } }
/* 左右のヒレ(右は今までの .fin.p、左を足す) */
.skin-dango .blk .fin.q { display: block; left: -7%; top: 52%; width: 22%; height: 17%; border-radius: 70% 50% 50% 70%; transform-origin: 100% 50%;
  background: color-mix(in srgb, var(--fill), white 25%); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--shade), transparent 40%);
  animation: finQ .9s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes finQ { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-22deg); } }
.skin-dango .blk.sel .fin.q { animation-duration: .35s; }
.skin-dango .blk.c5 .fin.q { background: linear-gradient(270deg, #2a2930, #4a4852); clip-path: polygon(100% 20%, 0 0, 30% 50%, 0 100%, 100% 80%); box-shadow: none; animation-duration: 2.4s; }
/* 白いひげ(体の下のほうに短い線が並ぶ) */
.wh { display: none; position: absolute; pointer-events: none; }
.skin-dango .blk .wh { display: block; left: 20%; right: 20%; bottom: 9%; height: 9%; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 2px, transparent 2px 22%);
  -webkit-mask-image: radial-gradient(120% 140% at 50% -40%, transparent 55%, #000 56%); mask-image: radial-gradient(120% 140% at 50% -40%, transparent 55%, #000 56%); }
.skin-dango .blk.c5 .wh { background: repeating-linear-gradient(90deg, rgba(255,215,90,.8) 0 2px, transparent 2px 22%); }

/* 色をもっと濃く(2026-10-08「色が薄すぎる、濃くていい」) */
:root { --c0: #e8453f; --c0d: #b52d29; --c1: #2f7ae0; --c1d: #1f57a8; --c2: #2fb562; --c2d: #1f8445; --c3: #f2b705; --c3d: #b98a00; --c4: #8f4fd6; --c4d: #6a35a6; --c6: #ec4f9a; --c6d: #b8336f; }
.skin-dango .blk:not(.c5) .bd { background:
  radial-gradient(circle at 22% 70%, rgba(255,255,255,.22) 0 3%, transparent 4%),
  radial-gradient(circle at 80% 76%, rgba(255,255,255,.2) 0 2.6%, transparent 3.6%),
  radial-gradient(120% 90% at 50% 105%, color-mix(in srgb, var(--fill), white 18%) 0 16%, transparent 42%),
  radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill), white 8%) 0%, var(--fill) 55%, var(--shade) 100%); }
.skin-dango .blk:not(.c5) .fin.d { background: color-mix(in srgb, var(--fill), white 6%); }
.skin-dango .blk:not(.c5) .fin.p, .skin-dango .blk:not(.c5) .fin.q { background: color-mix(in srgb, var(--fill), white 10%); }
/* 唇: 参考画像版の横長の明るい唇+細い線(黄は驚きの「ほ」の口のまま) */
.skin-dango .blk:not(.c3):not(.c5) .mouth { width: 44%; height: 14%; top: 59%; left: 50%; transform: translateX(-50%); border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--fill), white 45%); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--shade), transparent 50%); overflow: visible; }
.skin-dango .blk:not(.c3):not(.c5) .mouth::before { content: none; }
.skin-dango .blk:not(.c3):not(.c5) .mouth::after { content: ""; position: absolute; left: 20%; right: 20%; top: 48%; bottom: auto; width: auto; height: 0;
  border: 0; border-top: 1.6px solid color-mix(in srgb, var(--shade), black 35%); border-radius: 0 0 50% 50%; background: none; opacity: .7; }
/* ひげ: 細い斜めの線に(歯に見えないように) */
.skin-dango .blk .wh { left: 18%; right: 18%; bottom: 10%; height: 7%;
  background: repeating-linear-gradient(105deg, transparent 0 9%, rgba(255,255,255,.8) 9% 11%, transparent 11% 20%); }
.skin-dango .blk.c5 .wh { background: repeating-linear-gradient(105deg, transparent 0 9%, rgba(255,215,90,.75) 9% 11%, transparent 11% 20%); }

/* ひげは小さな図形で(なめらかな白い線) */
.skin-dango .blk .wh, .skin-dango .blk.c5 .wh { background: none; -webkit-mask-image: none; mask-image: none; left: 19%; right: 19%; bottom: 8%; height: 11%; }
.wh svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wh path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c5 .wh path { stroke: rgba(255,215,90,.85); }

.skin-dango .blk .wh, .skin-dango .blk.c5 .wh { bottom: 10%; height: 7%; left: 21%; right: 21%; }
.wh path { stroke-width: 1.3; stroke: rgba(255,255,255,.75); }

/* マスいっぱいに大きく(2026-10-08「余白多すぎると見づらい」): 余白を減らし、目と唇も大きく */
.skin-dango .blk { padding: 1px 0 0; }
.skin-dango .blk:not(.c5) .fin.d { top: -10%; width: 24%; height: 24%; left: 38%; }
.skin-dango .blk .fin.p { right: -3%; width: 18%; } .skin-dango .blk .fin.q { left: -3%; width: 18%; }
.skin-dango .blk:not(.c5) .eye { width: 17%; height: 20%; top: 38%; }
.skin-dango .blk:not(.c5) .eye.l { left: 15%; } .skin-dango .blk:not(.c5) .eye.r { right: 15%; }
.skin-dango .c1 .eye, .skin-dango .c2 .eye { width: 18% !important; height: 10% !important; top: 42% !important; }
.skin-dango .blk:not(.c3):not(.c5) .mouth { width: 52%; height: 16%; top: 60%; }
.skin-dango .c3 .mouth { width: 13%; height: 15%; top: 62%; }
.skin-dango .c4 .mouth { width: 13%; height: 12%; }
.skin-dango .c0 .brow { width: 20%; height: 6%; top: 28%; }
.skin-dango .c0 .brow.l { left: 13%; } .skin-dango .c0 .brow.r { right: 13%; }
.skin-dango .cheek { width: 17%; height: 10%; top: 60%; } .skin-dango .cheek.l { left: 3%; } .skin-dango .cheek.r { right: 3%; }
.skin-dango .blk .wh, .skin-dango .blk.c5 .wh { bottom: 6%; }

/* ===================== ゲーム中のスコア欄を海藻風に(2026-10-08) ===================== */
.hud { gap: 8px; }
.hud > div, .hud > div.pop { position: relative; overflow: visible; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 6%, transparent 7%),
    radial-gradient(circle at 78% 70%, rgba(255,255,255,.12) 0 5%, transparent 6%),
    linear-gradient(170deg, #7fd48a 0%, #3fae5c 45%, #24804a 100%);
  border-radius: 46% 54% 40% 60% / 60% 45% 55% 40%;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(10,70,35,.35), 0 4px 0 rgba(0,50,40,.25);
  transform-origin: 50% 100%; animation: kelp 3.6s ease-in-out infinite; }
.hud > div:nth-child(2) { border-radius: 58% 42% 55% 45% / 45% 60% 40% 55%; animation-delay: -.9s; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.16) 0 6%, transparent 7%), linear-gradient(190deg, #8ad98a 0%, #4bb563 45%, #2a8a4c 100%); }
.hud > div:nth-child(3) { border-radius: 42% 58% 60% 40% / 55% 40% 60% 45%; animation-delay: -1.8s; background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.16) 0 5%, transparent 6%), linear-gradient(165deg, #9ad37a 0%, #5aa94c 45%, #357a35 100%); }
.hud > div:nth-child(4) { border-radius: 55% 45% 42% 58% / 40% 58% 45% 60%; animation-delay: -2.7s; }
/* 真ん中の葉脈 */
.hud > div::before { content: ""; position: absolute; left: 50%; top: 10%; bottom: 8%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(220,255,220,.35) 30%, rgba(220,255,220,.35) 70%, transparent); pointer-events: none; }
/* 下からのびる小さな海藻 */
.hud > div::after { content: ""; position: absolute; left: 14%; bottom: -9px; width: 12px; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, #3fae5c, #24804a); border-radius: 50% 50% 40% 60% / 70% 70% 30% 30%; transform: rotate(-12deg); }
.hud > div:nth-child(even)::after { left: auto; right: 16%; transform: rotate(14deg); }
@keyframes kelp { 0%,100% { transform: rotate(-1.6deg) skewX(-1deg); } 50% { transform: rotate(1.6deg) skewX(1deg); } }
.hud .lbl { color: #e4ffd9; text-shadow: 0 1px 0 rgba(10,70,35,.6); font-weight: 800; }
.hud b { color: #fff; -webkit-text-stroke: 4px #1f6b3c; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(10,60,30,.4); position: relative; z-index: 1; }
.hud .chain-on b { color: #ffe066; }
.hud > div.pop { animation: hudPop .45s cubic-bezier(.2,1.8,.4,1), kelp 3.6s ease-in-out infinite; }
@keyframes hudPop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-3deg); filter: brightness(1.25); } 100% { transform: scale(1); } }
@media (prefers-color-scheme: dark) { .hud > div { color: #fff; } .hud .lbl { color: #d6f5cc; } }

/* 名前の横の共有ボタン */
.who-row { display: flex; align-items: center; gap: 8px; }
.chip.share { padding: 6px 12px; font-size: 12px; }
.chip.share svg { width: 15px; height: 15px; }
.toast { position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 60; pointer-events: none;
  background: rgba(20,50,80,.88); color: #fff; font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 現場タイムカードへ戻る(2026-10-08「ゲームからもどれない」) */
#top { position: relative; }
.chip.back { position: absolute; left: 12px; top: max(12px, env(safe-area-inset-top)); text-decoration: none; padding: 6px 12px 6px 8px; font-size: 12px; }
.chip.back svg { width: 15px; height: 15px; }
.priv { margin-top: 18px; text-align: center; font-size: 12px; }
.priv a { color: var(--muted, #6b7a88); }
a.btn { text-decoration: none; }

.pause-note { margin: -4px 0 2px; font-size: 12px; color: var(--muted); }

/* ホーム画面に追加(2026-10-08ユーザー指示) */
.chip.a2hs { padding: 6px 12px; font-size: 12px; }
.chip.a2hs svg { width: 15px; height: 15px; }
.a2hs-lead { margin: -4px 0 2px; font-size: 12px; color: var(--muted); text-align: center; }
.a2hs-steps { margin: 0; padding: 0; list-style: none; width: 100%; display: flex; flex-direction: column; gap: 8px; counter-reset: st; }
.a2hs-steps li { counter-increment: st; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; }
.a2hs-steps li::before { content: counter(st); flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ff7a86; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.a2hs-steps .ic { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; }
/* ホーム画面のアイコンから開いた時は「戻る」(タイムカードへ)を出さない */
.playapp [data-back] { display: none !important; }

/* 15ライン以上: 大きいダンゴウオが画面の下から飛び出す(20ライン以上は黒)。2026-10-08ユーザー指示 */
.bigfish { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
/* 2026-10-09 iPhone 17 で落ちる対策: 元は 260vmax 四方(スマホで約7000px四方=約190MBの画像)を回していた。160vmax に縮め、拡大を .4〜1.15 → .7〜1.05 に
   (見え始めから画面のすみまで届くように)。マスクの位置は同じ見た目になるよう合わせた(画像は約3分の1) */
/* 2026-10-10: 光線は ui.js の drawRays が 512px の canvas に描く(CSS の模様・mask をやめた) */
/* 2026-10-10 何回か遊んだ後の演出で落ちる対策: 光線は画面の対角線ぶん(--rs、JSで設定)だけにした(前は 160vmax = iPhone で約1400px四方) */
.bigfish .bf-rays { position: absolute; left: 50%; top: 50%; width: var(--rs, 160vmax); height: var(--rs, 160vmax); margin: calc(var(--rs, 160vmax) / -2) 0 0 calc(var(--rs, 160vmax) / -2); opacity: 0;
  animation: bfRays 1.7s ease-out forwards; }
@keyframes bfRays { 0% { opacity: 0; transform: scale(.75) rotate(0deg); } 15% { opacity: .9; } 70% { opacity: .75; } 100% { opacity: 0; transform: scale(1) rotate(40deg); } }
/* 2026-10-10 魚を動かす枠は魚の大きさ(--fs)だけに。前は画面全体の枠を 2.6 倍まで広げていて、演出1回で約80MBの画像になっていた。
   支点は前と同じ所(画面の上から 64.4vh)になるように合わせてある */
.bigfish .bf-move { position: absolute; left: 50%; top: 46vh; width: var(--fs); height: var(--fs); margin: calc(var(--fs) / -2) 0 0 calc(var(--fs) / -2);
  display: flex; align-items: center; justify-content: center; transform-origin: 50% calc(50% + 18.4vh); animation: bfJump 1.7s cubic-bezier(.2,.8,.3,1) forwards; }
.bigfish .bf-zoom { flex: none; }
.bigfish .bf-zoom .blk { position: relative; transform: none; width: 44px; height: 44px; filter: drop-shadow(0 1.2px 0 rgba(0,0,0,.18)); }
.bigfish.black .bf-zoom .blk { filter: drop-shadow(0 0 2.5px rgba(255,215,90,.95)); }
/* 下から跳ね上がる→着地のつぶれ→伸び→もう一度弾む→こちらに飛び出して消える */
@keyframes bfJump {
  0%   { transform: translateY(95vh) rotate(-25deg) scale(.55, .7); }
  20%  { transform: translateY(-6vh) rotate(8deg) scale(.92, 1.14); }
  30%  { transform: translateY(2vh) rotate(-3deg) scale(1.16, .84); }
  40%  { transform: translateY(-3vh) rotate(4deg) scale(.95, 1.07); }
  50%  { transform: translateY(0) rotate(-2deg) scale(1.04, .97); }
  62%  { transform: translateY(-1vh) rotate(2deg) scale(1, 1); }
  74%  { transform: translateY(0) rotate(-1deg) scale(1.03, .98); opacity: 1; }
  100% { transform: translateY(-14vh) rotate(14deg) scale(2.6, 2.6); opacity: 0; }
}
.bigfish .bf-zoom .blk.excite .bd { animation: bfWiggle .18s ease-in-out infinite alternate; }
@keyframes bfWiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.bigfish .bf-text { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; animation: bfText 1.7s ease-out forwards; }
.bigfish .bf-text b { display: block; font-size: clamp(40px, 13vw, 76px); font-weight: 800; color: #fff; letter-spacing: .02em;
  -webkit-text-stroke: 3px color-mix(in srgb, var(--fc) 70%, #000); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(0,0,0,.25); }
.bigfish .bf-text span { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 999px; font-size: clamp(15px, 4.4vw, 22px); font-weight: 800;
  background: #24222b; color: #ffd75a; box-shadow: 0 0 0 2px #ffd75a, 0 4px 0 rgba(0,0,0,.3); }
@keyframes bfText { 0%, 14% { opacity: 0; transform: scale(.3) rotate(-10deg); } 26% { opacity: 1; transform: scale(1.25) rotate(3deg); } 34% { transform: scale(.95) rotate(-1deg); } 42%, 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-20px); } }
.bigfish .bf-bub { position: absolute; bottom: -40px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 18%, rgba(255,255,255,.25) 40%, rgba(255,255,255,.1) 70%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7);
  animation: bfBub 1.3s ease-out var(--d) forwards; }
@keyframes bfBub { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), -105vh) scale(1.1); } }
/* ご褒美の黒は落ちてきた時に光る */
.blk.bonus .bd { box-shadow: 0 0 0 3px #ffd75a, 0 0 16px 6px rgba(255,200,60,.85); animation: bonusPulse .4s ease-in-out 4 alternate; }
@keyframes bonusPulse { from { transform: scale(1); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .bigfish .bf-move, .bigfish .bf-rays { animation-duration: .9s; } }

/* 20ライン以上: 金色に光り輝きながら長く出てきて、最後に大爆発(2026-10-08ユーザー指示) */
.bigfish.black .bf-move, .bigfish.black .bf-rays, .bigfish.black .bf-text { animation-duration: 2.7s; }
.bigfish.black .bf-zoom .blk { filter: drop-shadow(0 0 2.5px #fff3b0) drop-shadow(0 0 7px rgba(255,190,30,1)); } /* 2026-10-10 光り方の点滅(filter のアニメーション)をやめた: 拡大した魚に毎フレームかけ直して重い */
@keyframes bfGold { from { filter: drop-shadow(0 0 1.5px #ffd75a) drop-shadow(0 0 4px rgba(255,200,40,.7)) brightness(1); }
  to { filter: drop-shadow(0 0 3px #fff3b0) drop-shadow(0 0 9px rgba(255,190,30,1)) brightness(1.25); } }
.bigfish .bf-halo { position: absolute; left: 50%; top: 46%; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; /* 中身は drawHalo(canvas) */
  animation: bfHalo 2.7s ease-out forwards; }
@keyframes bfHalo { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1); }
  30%, 50%, 70% { transform: scale(1.12); } 40%, 60% { transform: scale(.96); } 74% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.6); } }
.bigfish .bf-star { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; transform: scale(0);
  background: radial-gradient(circle, #fff 0 10%, rgba(255,230,120,.9) 22%, transparent 60%);
  -webkit-mask: conic-gradient(from 45deg, #000 0 6deg, transparent 6deg 84deg, #000 84deg 96deg, transparent 96deg 174deg, #000 174deg 186deg, transparent 186deg 264deg, #000 264deg 276deg, transparent 276deg), radial-gradient(circle, #000 0 22%, transparent 26%);
  mask: conic-gradient(from 45deg, #000 0 6deg, transparent 6deg 84deg, #000 84deg 96deg, transparent 96deg 174deg, #000 174deg 186deg, transparent 186deg 264deg, #000 264deg 276deg, transparent 276deg), radial-gradient(circle, #000 0 22%, transparent 26%);
  animation: bfStar .7s ease-out var(--d) 1 forwards; }
@keyframes bfStar { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 40% { opacity: 1; transform: scale(var(--s)) rotate(45deg); } 100% { opacity: 0; transform: scale(calc(var(--s) * .4)) rotate(90deg); } }
.bigfish .bf-boom { position: absolute; left: 50%; top: 46%; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin; border-radius: 50%; box-sizing: border-box; /* 2026-10-10 最後の大きさで作る(前は5倍に広げていた) */
  border: 5vmin solid rgba(255,215,90,.95); box-shadow: 0 0 60px 20px rgba(255,200,40,.8), inset 0 0 60px 20px rgba(255,240,180,.8);
  animation: bfBoom .7s ease-out forwards; }
@keyframes bfBoom { 0% { opacity: 1; transform: scale(.04); border-width: 75vmin; } 100% { opacity: 0; transform: scale(1); border-width: 5vmin; } }
.flash.gold { background: radial-gradient(circle, #fffbe6 0%, rgba(255,220,90,.95) 35%, rgba(255,180,30,.55) 65%, rgba(255,170,20,0) 90%); animation-duration: .7s; }
.bigfish.black .bf-text b { color: #ffe27a; text-shadow: 0 0 12px rgba(255,200,40,.9), 0 5px 0 rgba(0,0,0,.35); }
/* スタート画面のいちばん下にバージョン */
.ver { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); text-align: center; font-size: 11px; color: rgba(255,255,255,.75); pointer-events: none; }
#top { padding-bottom: 30px; }

/* あそびかた(2026-10-08ユーザー指示) */
.chip.rules { position: absolute; right: 12px; top: max(12px, env(safe-area-inset-top)); padding: 6px 12px 6px 8px; font-size: 12px; }
.chip.rules svg { width: 16px; height: 16px; }
.rules-card { width: min(380px, 100%); max-height: calc(100dvh - 32px); }
.rules-body { overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; text-align: left; font-size: 14px; line-height: 1.6; padding: 0 2px; }
.rules-body h3 { margin: 12px 0 4px; font-size: 15px; font-weight: 800; color: #2a86c8; }
.rules-body h3:first-child { margin-top: 0; }
.rules-body p { margin: 0 0 6px; }
.rules-body .dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.rules-body .cycle { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 4px 0 8px; }
.rules-body .cycle .dot { width: 22px; height: 22px; }
.rules-body .ar { font-size: 12px; color: var(--muted); }
.rules-body .mult { width: 100%; border-collapse: collapse; margin: 2px 0 6px; font-size: 13px; text-align: center; }
.rules-body .mult th, .rules-body .mult td { border: 1px solid rgba(127,127,127,.3); padding: 3px 2px; }
.rules-body .mult th { font-weight: 800; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .rules-body h3 { color: #7fd3f2; } }
.rules-body .figs { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin: 4px 0 8px; }
.rules-body .figs.chain { gap: 2px; }
.rules-body figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; }
.rules-body figure.small { flex: none; }
.rules-body figcaption { font-size: 11px; line-height: 1.35; text-align: center; color: var(--muted); max-width: 150px; }
.rules-body figcaption b { color: var(--ink); }
.rules-body .dg { display: block; max-width: 100%; height: auto; }
.rules-body .fig-ar { align-self: center; margin-top: -18px; font-size: 14px; font-weight: 800; color: var(--muted); }
.rules-body .reward { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 2px 0 4px; }
.rules-body .reward > div { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(127,127,127,.12); }
.rules-body .reward small { font-weight: 800; }
.rules-body .figs.chain figure { flex: 1 1 0; }
.rules-body .figs.chain .dg { width: 100%; }
.rules-body figcaption { font-size: 12px; }
/* 共有(QRコード) 2026-10-08ユーザー指示 */
.share-card .qr { display: block; width: min(220px, 62vw); height: auto; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 8px; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.share-card .qr-note { margin: -2px 0 4px; font-size: 13px; color: var(--muted); }

/* ===== 省エネ(2026-10-08「スマホがかなり熱くなる」): ずっと動くアニメーションは .alive のブロックだけ =====
   全部(96個×目・ヒレ・体)が動き続けると数百のアニメーションが毎フレーム動いて熱くなる。
   ui.js が数個ずつ順番に .alive をつけて、生きている感じは残す。なぞり中・落下・消える時などは今までどおり */
.blk:not(.alive):not(.sel) .eye, .blk:not(.alive):not(.sel) .fin, .blk:not(.alive):not(.sel) .x, .blk:not(.alive):not(.sel) .wh { animation: none !important; }
.blk:not(.alive):not(.sel):not(.ready):not(.pop):not(.change):not(.land):not(.blast):not(.doom):not(.excite):not(.bonus) .bd { animation: none; }

/* (ゲーム中も背景の光と泡は動かす: 8個だけの時に「つまらない」と言われたため。画面1枚分なので負担は小さい) */
@media (prefers-reduced-motion: reduce) { body::before, body::after, .hud > div { animation: none !important; } }

/* ゲーム中の音ボタン(BGMと効果音をまとめてON/OFF) */
.snd-all .snd-x { display: none; } .snd-all.off .snd-x { display: inline; } .snd-all.off .snd-w { display: none; }
.snd-all.off svg { opacity: .55; }

/* 鬼モードの6色目: ピンク。セクシーな顔(2026-10-09 ユーザー指示): ウインク、まつげの流し目、赤いぷるんとした唇(ほくろは無し)。
   ダンゴウオ/ぷにぷにの顔の指定より強くするため #app から書く */
.blk.c6 { --fill: var(--c6); --shade: var(--c6d); }
#app .blk.c6 .eye { animation: none; }
#app .blk.c6 .eye.l { left: 16%; width: 17%; height: 7%; top: 47%; background: transparent; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: rotate(-6deg); }
#app .blk.c6 .eye.l::after { display: none; }
#app .blk.c6 .eye.r { right: 16%; width: 17%; height: 11%; top: 45%; border-radius: 10% 10% 60% 60% / 10% 10% 90% 90%; box-shadow: 0 -3px 0 0 var(--ink); transform: rotate(6deg); }
#app .blk.c6 .eye.r::after { width: 28%; height: 34%; top: 18%; left: 58%; }
#app .blk.c6 .brow { display: block; width: 10%; height: 3%; border-radius: 2px; background: var(--ink); }
#app .blk.c6 .brow.l { left: 10%; top: 50%; width: 8%; transform: rotate(-35deg); }
#app .blk.c6 .brow.r { top: 41%; right: 9%; transform: rotate(32deg); box-shadow: -2px -4px 0 -0.3px var(--ink); }
#app .blk.c6 .mouth { width: 21%; height: 12%; top: 61%; left: 50%; transform: translateX(-50%); background: #d6164f; border: 0;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
#app .blk.c6 .mouth::after { content: ""; position: absolute; left: 12%; right: 12%; top: 46%; bottom: auto; width: auto; height: 1.5px; background: rgba(90,0,30,.65); border: 0; border-radius: 1px; }
#app .blk.c6 .mouth::before { content: ""; position: absolute; left: 20%; top: 14%; width: 20%; height: 22%; background: rgba(255,255,255,.75); border-radius: 50%; }
#app .blk.c6 .x { display: none; }
#app .blk.c6 .cheek { background: rgba(255,60,140,.55); }

/* 鬼・60秒(おまけのモード。30手・エンドレスより小さく) */
.sub-modes { display: flex; gap: 10px; width: min(290px, 100%); }
.btn.sm { flex: 1; width: auto; padding: 9px 8px; font-size: 16px; }
.btn.sm::after { display: none; }
.btn.sm small { font-size: 10.5px; }
.btn.boni { --b1: #7a6b8f; --b2: #4f4361; --bs: #2f2740; }
.btn.bt60 { --b1: #b58cff; --b2: #8a5fe0; --bs: #6340b0; }
.tabs button { padding-left: 4px; padding-right: 4px; }
/* 60秒: 残り10秒から赤く点滅 */
#hudMovesBox.hurry b { color: #e8453f; animation: hurry .5s ease-in-out infinite alternate; }
@keyframes hurry { to { transform: scale(1.18); } }

/* メニュー画面の下のお知らせ(2026-10-09。現場タイムカードの更新バナーと同じ形) */
.menu-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #f05a3c; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5;
  box-shadow: 0 -2px 8px rgba(0,0,0,.2); }
.menu-bar .mb-text { flex: 0 1 auto; text-align: left; }
.menu-bar .mb-new { display: inline-block; background: #fff; color: #f05a3c; font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 1px 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
.menu-bar button { flex: none; background: #fff; color: #f05a3c; border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }

/* 2026-10-11 白ダンゴウオ(30個以上のご褒美。消すと盤面が全部消える)。メモリを使わないよう、光り方は止まった影だけ(アニメーションなし) */
.blk.c7 { --fill: var(--c7); --shade: var(--c7d); }
.blk.c7 .bd { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 10px 3px rgba(190,230,255,.95), inset 0 -3px 6px rgba(150,170,200,.45), inset 0 2px 3px #fff; }
.blk.c7 .eye { background: #5b6b80; }
.rules-body .dot.white { background: var(--c7); box-shadow: 0 0 0 1.5px #b9c6d6, 0 0 6px rgba(150,210,255,.9); }
.flash.white { background: radial-gradient(circle, #fff 0%, rgba(235,248,255,.95) 45%, rgba(200,235,255,0) 85%); animation-duration: .6s; }
.boom.white { color: #fff; text-shadow: 0 0 10px rgba(120,200,255,.95), 0 4px 0 rgba(0,40,90,.35); }

/* 2026-10-11 フィーバーのゲージ(100個消すと満タン→次の1手だけ色を1回乗り換えられる)。メモリを使わないよう、満タン時も止まった光だけ */
.fever-bar { position: relative; width: calc(100% - 16px); height: 14px; margin: 0 8px 4px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: inset 0 1px 2px rgba(0,40,80,.25); overflow: hidden; flex: none; }
.fever-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffb000, #ff6b6b); transition: width .4s ease-out; }
.fever-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #2d4a60; }
.fever-bar.full i { background: linear-gradient(90deg, #ff6b6b, #ffb000, #4cd07a, #3fa7f0, #a56de0); }
.fever-bar.full { box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255,190,60,.9); }
.fever-bar.full span { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.board.fever { box-shadow: inset 0 0 0 3px #ffd75a, 0 0 0 3px rgba(255,107,107,.85), 0 10px 24px rgba(0,40,90,.25); }

/* 2026-10-11 クール: 前のクールの1〜3位を記録として出す */
h2 .season { margin-left: 8px; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; vertical-align: 3px; }
.rank-past { width: 100%; }
.rank-past .past { margin-top: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(255,215,90,.18); box-shadow: inset 0 0 0 1px rgba(200,160,40,.35); font-size: 13px; }
.rank-past .past b { display: block; font-size: 12px; color: #a07a10; margin-bottom: 2px; }
.rank-past .past span { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.rank-past .past i { font-style: normal; }
.rank-past .past em { margin-left: auto; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-past .past i { min-width: 1.4em; text-align: center; font-weight: 800; color: #a07a10; }
.rank-past details summary { cursor: pointer; font-size: 12px; color: #a07a10; padding: 2px 0; }

/* 2026-10-11 1日1発 */
.btn.bdaily { --b1: #6fe0a8; --b2: #2fbf71; --bs: #1f8a50; } /* ランキング(金)と見分けがつくよう緑 */
.btn.bdaily span small { display: block; font-size: 11px; font-weight: 700; opacity: .9; }
.daily-card p { margin: 6px 0; line-height: 1.6; font-size: 14px; }
.rank-past .past.today { background: rgba(255,164,31,.14); box-shadow: inset 0 0 0 1px rgba(200,120,0,.35); }
.rank-past .past span.me { font-weight: 800; color: var(--accent); }
.rank-card .tabs button { white-space: nowrap; font-size: 13px; padding-left: 4px; padding-right: 4px; } /* 4つ並ぶので小さめ(1日1発を足した時) */

/* ===== 2026-10-11 軽量化(「演出が重い・カクカク」「PCで見てもファンがすごく回る」) =====
   ・ずっと動くもの: ゲーム中は背景の光の帯を止める(ダンゴウオの動きは元どおり)
   ・明るさ(filter)のアニメーションは毎フレーム描き直しになるのでやめる(形の動きは同じ)
   ・星の形の切り抜き(mask)・盤面のふちの光の広がり(box-shadow のアニメーション)をやめて軽い作りに */
/* ヒレ・ひげ・まばたきは元どおり動かす(2026-10-11 ユーザー「動きがないのはつまらない」)。動くのは .alive の36匹だけ(上の省エネのルール) */
body.playing::before { animation-play-state: paused; } /* ゲーム中は上からの光の帯を止める(盤面の後ろでほとんど見えない) */
@keyframes change { 0% { transform: scale(1.2); } 40% { transform: scale(.9); } 100% { transform: none; } }
@keyframes blastPop { 0% { transform: scale(1.1) rotate(0); } 100% { transform: scale(0) rotate(25deg); opacity: 0; } }
@keyframes flyaway { 0% { transform: scale(1.25); } 100% { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.3); opacity: 0; } }
.board.charged .blk.c5.sel .bd { animation: none; }
.shock { box-shadow: 0 0 14px 4px rgba(255,190,60,.6); }
.bigfish .bf-star { -webkit-mask: none; mask: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, rgba(255,230,120,.85) 45%, transparent 70%); }
.board.glow { animation: none; }
.board-wrap .glowfx { position: absolute; z-index: 6; pointer-events: none; border-radius: 18px; box-shadow: 0 0 36px 10px var(--gc); animation: glowFade .9s ease-out forwards; }
@keyframes glowFade { from { opacity: 1; } to { opacity: 0; } }

/* 2026-10-11 白ダンゴウオの演出(約5秒・海の底から浮かび上がる)。部品は20ラインの演出と同じ */
.bigfish.white .bf-move { animation: bfRise 4.9s cubic-bezier(.3,.6,.3,1) forwards; }
@keyframes bfRise {
  0%   { transform: translateY(95vh) rotate(-8deg) scale(.6); }
  40%  { transform: translateY(2vh) rotate(4deg) scale(1.03, .97); }
  47%  { transform: translateY(-3vh) rotate(-2deg) scale(.97, 1.05); }
  55%  { transform: translateY(0) rotate(1deg) scale(1); }
  80%  { transform: translateY(-1vh) rotate(-1deg) scale(1.03); opacity: 1; }
  100% { transform: translateY(-12vh) rotate(10deg) scale(2.4); opacity: 0; }
}
.bigfish.white .bf-rays { animation: bfRays 2.9s ease-out 2s both; }
.bigfish.white .bf-halo { animation: bfHalo 2.9s ease-out 1.9s both; }
.bigfish.white .bf-text { animation: bfText 2.9s ease-out 2s both; }
.bigfish.white .bf-text b { color: #fff; text-shadow: 0 0 12px rgba(120,200,255,.95), 0 5px 0 rgba(0,40,90,.35); }
.bigfish.white .bf-text span { background: #fff; color: #2a7cc0; box-shadow: 0 0 0 2px #bfe3ff, 0 4px 0 rgba(0,0,0,.2); }
.bigfish.white .bf-bub { animation-duration: 2.4s; }
.bigfish.white .bf-zoom .blk { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(150,215,255,1)); }
.blk.pop.wpop .bd { animation: pop .3s ease-in var(--pd, 0s) forwards; }
.whitefx { position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(240,250,255,.9) 40%, rgba(200,235,255,.35) 75%, rgba(200,235,255,0) 100%);
  animation: whiteGlow 2.9s ease-out forwards; }
@keyframes whiteGlow { 0% { opacity: 0; } 12% { opacity: .9; } 35% { opacity: .55; } 60% { opacity: .7; } 100% { opacity: 0; } }
.shock.white { border-color: rgba(255,255,255,.95); box-shadow: 0 0 14px 4px rgba(150,210,255,.7); }
.bigfish.white .bf-text b { color: #2a86c8; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,40,90,.3); } /* 白い光の上でも読めるように青文字+白ふち */

/* 2026-10-11 演出は fx.js の canvas に描く。大きな魚は光のフィルター(毎コマ描き直しになる)を外し、光は canvas の光の輪で出す */
.bigfish .bf-zoom .blk, .bigfish.black .bf-zoom .blk, .bigfish.white .bf-zoom .blk { filter: none; }
/* 30ライン: 光の柱の中を白ダンゴウオが上から降りてくる(約4.3秒) */
.bigfish.arrive .bf-move { animation: bfDescend 4.3s ease-in-out forwards; }
@keyframes bfDescend {
  0%, 12% { transform: translateY(-80vh) scale(.5); opacity: 0; }
  20%  { opacity: 1; }
  48%  { transform: translateY(3vh) rotate(3deg) scale(1.02, .97); }
  55%  { transform: translateY(-2vh) rotate(-2deg) scale(.98, 1.04); }
  62%  { transform: translateY(0) rotate(1deg) scale(1); }
  80%  { transform: translateY(-1.5vh) rotate(-1deg) scale(1.02); opacity: 1; }
  100% { transform: translateY(30vh) scale(.15); opacity: 0; }
}
.bigfish.arrive .bf-text { animation: bfText 2.6s ease-out 2s both; }
.bigfish.arrive .bf-text b { color: #2a86c8; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,40,90,.3); }
.bigfish.arrive .bf-text span { background: #fff; color: #2a7cc0; box-shadow: 0 0 0 2px #bfe3ff, 0 4px 0 rgba(0,0,0,.2); }
.season-badge { position: absolute; right: 12px; top: calc(max(12px, env(safe-area-inset-top)) + 40px); z-index: 2; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #ffb000, #ff7a3d); box-shadow: 0 2px 0 #c75a1f; }

/* フィーバーに入った瞬間、盤面が弾む(2026-10-11) */
#board.fever-in { animation: feverIn .8s ease-out; }
@keyframes feverIn { 0% { transform: scale(1); } 15% { transform: scale(1.05); } 35% { transform: scale(.98); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* 対戦(2026-10-12 土台。battle.js) */
.btn.bvs { --b1: #ff9fd0; --b2: #f2679f; --bs: #c4437a; } /* 60秒(紫)と見分けがつくようにピンク */
.battle-bar { display: none; position: relative; width: 100%; align-items: center; gap: 8px; padding: 0 10px 4px; font-size: 13px; }
#app.in-battle .battle-bar { display: flex; }
.battle-bar .bv-vs { font-weight: 800; color: #9b6cf0; }
.battle-bar > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-card p { margin: 0; text-align: center; }
.battle-card .bt-note { font-size: 13px; color: var(--muted); }
.battle-card .bt-err { min-height: 1.2em; font-size: 13px; color: #d14b44; }
.battle-card .bt-join { display: flex; flex-direction: column; gap: 8px; width: 100%; } /* 2026-10-12 横並びだと入力欄が20pxにつぶれた → 縦に */
.battle-card .bt-join input { width: 100%; box-sizing: border-box; font: inherit; font-size: 34px; font-weight: 800; text-align: center; letter-spacing: .3em; padding: 10px 8px 10px calc(8px + .3em); border: 2px solid var(--cell-line, #d9cdb5); border-radius: 14px; background: var(--bg); color: var(--ink); }
.battle-card .bt-join input::placeholder { font-size: 18px; letter-spacing: .05em; }
.battle-card .bt-code { font-size: 48px; font-weight: 800; letter-spacing: .25em; padding-left: .25em; color: #9b6cf0; font-variant-numeric: tabular-nums; }
.battle-card .bt-count { font-size: 64px; font-weight: 800; color: #9b6cf0; min-height: 1.2em; }
.battle-card .bt-players { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.battle-card .bt-players li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.battle-card .bt-players li.me { outline: 2px solid #c9a2ff; }
.battle-card .bt-players em { font-style: normal; font-weight: 800; color: var(--muted); }
.battle-card .bt-players em.ok { color: #2f9a58; }
.battle-card .bt-players .muted { color: var(--muted); }
.battle-card .bt-head { font-size: 40px; font-weight: 800; }
.battle-card .bt-head.win { color: #e8794a; }
.battle-card .bt-head.lose { color: #3fa7f0; }
.battle-card .bt-head.draw { color: var(--muted); }
.battle-card .btn[disabled] { opacity: .5; pointer-events: none; }

/* 対戦のおじゃま(2026-10-12): 石・こおり・届いた時・予告・アタックメーター・ルーレット */
.blk.c8, .blk.c9 { --fill: var(--c8); --shade: var(--c8d); } /* c9 = じっくりの石。2026-10-13 からスピードの石と同じ見た目(ユーザー指示) */
.blk.ojama-in .bd { animation: ojamaIn .6s ease-out var(--od, 0s) both; }
@keyframes ojamaIn { 0% { transform: translateY(-60%) scale(.6); opacity: 0; } 60% { transform: translateY(6%) scale(1.08); opacity: 1; } 100% { transform: none; } }
.blk.pop.crack .bd { filter: grayscale(1) brightness(1.3); }
#hudMovesBox.hit { animation: timeHit .7s ease-out; }
@keyframes timeHit { 0%, 100% { transform: none; } 20% { transform: scale(1.15); background: #ffd1d1; } 50% { transform: scale(.95); } }
.fever-bar.attack i { background: linear-gradient(90deg, #ff9fd0, #f2679f); }
.fever-bar.attack.full { box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(242,103,159,.9); animation: atkPulse .6s ease-in-out infinite alternate; }
@keyframes atkPulse { to { box-shadow: 0 0 0 2px #fff, 0 0 16px 4px rgba(242,103,159,1); } }
.battle-bar .bv-warn { display: flex; gap: 2px; font-size: 18px; min-height: 22px; }
.battle-bar .bv-warn i { font-style: normal; animation: warnBlink .5s ease-in-out infinite alternate; }
@keyframes warnBlink { to { transform: scale(1.2); filter: drop-shadow(0 0 4px #ff4d6d); } }
.bv-pop { position: absolute; left: 50%; top: 100%; z-index: 5; transform: translateX(-50%); font-style: normal; font-weight: 800; color: #fff; background: #f2679f; padding: 3px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; }
.bv-pop.warn { background: #ff8a3d; }
.bv-pop.hit { background: #d14b44; }
.bv-pop.show { animation: bvPop 1.4s ease-out; }
@keyframes bvPop { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15% { opacity: 1; transform: translateX(-50%) scale(1.1); } 30% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.roulette { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(40,10,40,.45); border-radius: 16px; pointer-events: none; }
.roulette.hidden { display: none; }
.roulette .rl-title { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: .1em; text-shadow: 0 3px 0 #c4437a; }
.roulette .rl-icon { font-size: 96px; line-height: 1.1; }
.roulette.done .rl-icon { animation: rlLand .5s ease-out; }
@keyframes rlLand { 0% { transform: scale(1.6); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.roulette .rl-name { min-height: 1.4em; font-size: 17px; font-weight: 800; color: #fff; background: rgba(242,103,159,.95); padding: 2px 14px; border-radius: 999px; }
.roulette .rl-name:empty { background: none; }
.battle-card .bt-rule { width: 100%; font-size: 13px; line-height: 1.6; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.battle-card .bt-rule b { display: block; font-size: 12px; color: var(--muted); }
/* 対戦のライフ(2026-10-12): 点数の代わりにハート */
.hud .lives b { font-size: 15px; letter-spacing: -1px; color: #f2477a; white-space: nowrap; }
.hud .lives b .lost, .battle-card .bt-hearts .lost { font-style: normal; color: rgba(120,110,100,.35); filter: grayscale(1) brightness(1.5); opacity: .3; } /* iPhone は ❤ を絵文字で出して色の指定が効かない(2026-10-12 なくしたハートも赤く見えた)→ 白黒にして薄く */
.battle-card .bt-hearts { color: #f2477a; letter-spacing: 1px; }
.battle-card p.bt-hearts { font-size: 28px; }
.bv-pop.crack { background: #8a8378; }
.battle-card .bt-players em.bt-hearts { color: #f2477a; }
/* 60秒モードと1日1発を半分ずつ横に(2026-10-12)。1日1発が隠れたら60秒モードが元の幅 */
.mode-pair { display: flex; gap: 8px; width: min(290px, 100%); }
.mode-pair .btn { width: auto; flex: 1 1 0; min-width: 0; }
.mode-pair:has(.bdaily:not(.hidden)) .btn { font-size: 16px; padding-left: 8px; padding-right: 8px; gap: 5px; }
.mode-pair:has(.bdaily:not(.hidden)) .btn svg { width: 20px; height: 20px; }
.mode-pair:has(.bdaily:not(.hidden)) .btn::after { right: 14px; }
.mode-pair .btn.bdaily span small { font-size: 10px; white-space: nowrap; }
/* トップのボタンは全部同じ高さ(2026-10-12 ユーザー指示「ボタンの大きさそろえたい」)。2行のボタン(1日1発・つづきから)も 50px に収める */
#top .btn { height: 50px; padding-top: 0; padding-bottom: 0; }
#top .btn span small { line-height: 1.1; }
.battle-card .bt-rec { font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.6; }
/* 石(2026-10-12 ユーザー「もっと石っぽく」): ごつごつした形・灰色の岩肌・ひび。顔は彫ったような細い目だけ */
.blk.c8 .bd, .skin-dango .blk.c8 .bd, .blk.c9 .bd, .skin-dango .blk.c9 .bd { border-radius: 44% 34% 40% 30% / 36% 44% 30% 42%; animation: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M23 3 L19 13 L24 18 L20 28' fill='none' stroke='%23413c36' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 18 L32 22 M9 27 L14 30' fill='none' stroke='%23413c36' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 26% 30%, rgba(255,255,255,.28) 0 7%, transparent 8%),
    radial-gradient(circle at 72% 26%, rgba(0,0,0,.2) 0 5%, transparent 6%),
    radial-gradient(circle at 64% 72%, rgba(0,0,0,.22) 0 7%, transparent 8%),
    radial-gradient(circle at 30% 78%, rgba(255,255,255,.14) 0 6%, transparent 7%),
    radial-gradient(90% 80% at 36% 28%, #c2bdb5 0%, #8f8a82 55%, #5c5751 100%);
  box-shadow: inset -3px -4px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.3), 0 3px 3px -1px rgba(0,0,0,.4); }
.blk.c8 .bd::before, .blk.c8 .bd::after, .skin-dango .blk.c8 .bd::before, .blk.c9 .bd::before, .blk.c9 .bd::after, .skin-dango .blk.c9 .bd::before { display: none; }
.blk.c8 .fin, .blk.c8 .cheek, .blk.c8 .brow, .blk.c8 .wh, .blk.c8 .mouth, .blk.c8 .x, .blk.c9 .fin, .blk.c9 .cheek, .blk.c9 .brow, .blk.c9 .wh, .blk.c9 .mouth, .blk.c9 .x { display: none; }
.blk.c8 .eye, .blk.c9 .eye { height: 3% !important; border-radius: 2px; background: #3a3530 !important; opacity: .6; box-shadow: none !important; animation: none !important; }
/* こおり(2026-10-12 ユーザー「氷四角で囲んだがいい」): ダンゴウオを四角い氷のかたまりで包む */
.blk.frz::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 16%;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.75) 18% 26%, transparent 26% 32%, rgba(255,255,255,.45) 32% 35%, transparent 35%),
    linear-gradient(160deg, rgba(240,252,255,.7) 0%, rgba(175,225,255,.42) 50%, rgba(120,190,245,.6) 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: inset 0 0 0 1.5px rgba(100,175,240,.85), inset -3px -3px 0 rgba(90,160,230,.35), 0 0 6px rgba(120,200,255,.8); }
.blk.frz .bd { animation: none !important; filter: saturate(.55) brightness(1.08); }
/* ラスト(2026-10-12) */
.battle-card .bt-lastnote { font-size: 16px; font-weight: 800; color: #e8794a; text-align: center; }
.battle-card .bt-lastnote small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.battle-card .bt-final { font-size: 16px; font-weight: 800; text-align: center; }
.battle-card .bt-tally { font-size: 14px; text-align: center; }
.battle-card .bt-lastbattle { font-size: 26px; font-weight: 800; color: #f2477a; letter-spacing: .1em; animation: atkPulseTxt .5s ease-in-out infinite alternate; }
@keyframes atkPulseTxt { to { transform: scale(1.08); } }
/* 攻撃の絵(2026-10-12 ユーザー指示): ルーレット・予告に、絵文字の代わりにダンゴウオ */
.blk.kface { position: relative; display: inline-block; transform: none; left: auto; top: auto; vertical-align: middle; }
.roulette .rl-icon { font-size: 0; height: 104px; display: flex; align-items: center; justify-content: center; }
.roulette .rl-icon .kface { width: 100px; height: 100px; padding: 6px; }
.battle-bar .bv-warn .kface { width: 24px; height: 24px; padding: 1px; }
.battle-bar .bv-warn i { display: inline-flex; }
/* 色かえ: 体の左半分が赤・右半分が青 */
.blk.kface.half .bd, .skin-dango .blk.kface.half .bd { background:
    radial-gradient(90% 80% at 40% 30%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(90deg, var(--c0) 0 50%, var(--c1) 50% 100%); }
.blk.kface.half .fin.p { background: var(--c1); }
/* バージョンがちがう相手の警告(2026-10-12) */
.battle-card .bt-verwarn { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; background: #fff1d6; color: #7a4a00; font-size: 13px; line-height: 1.5; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.battle-card .bt-verwarn b { font-size: 14px; color: #c45a00; }
/* 部屋のモード選び */
.battle-card .bt-modes { display: flex; gap: 8px; width: 100%; }
.battle-card .bt-modes button { flex: 1; font: inherit; font-weight: 800; font-size: 15px; padding: 9px 4px; border-radius: 999px; border: 2px solid #d9cdb5; background: var(--bg); color: var(--muted); }
.battle-card .bt-modes button.on { border-color: #f2679f; background: #f2679f; color: #fff; }
.hud .lives b .calm-sub { display: block; font-size: 10px; letter-spacing: 0; color: var(--muted); line-height: 1.1; }
/* ライフが減った演出(2026-10-12): 暗くなって大きなハートが割れる(約2秒) */
.lifefx { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none;
  background: rgba(20,10,30,.55); animation: lfBg 2.1s ease-out forwards; }
@keyframes lfBg { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.lifefx .lf-heart { position: relative; width: 150px; height: 140px; }
.lifefx .lf-heart i { position: absolute; top: 0; font-style: normal; font-size: 140px; line-height: 1; color: #ff4d7a; text-shadow: 0 0 24px rgba(255,80,120,.8); width: 150px; text-align: center; }
.lifefx .lf-heart i.l { clip-path: polygon(0 0, 52% 0, 44% 30%, 56% 50%, 46% 72%, 50% 100%, 0 100%); animation: lfL 2.1s ease-in forwards; }
.lifefx .lf-heart i.r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 50% 100%, 46% 72%, 56% 50%, 44% 30%); animation: lfR 2.1s ease-in forwards; }
@keyframes lfL { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25%, 35% { transform: scale(1); } 55% { transform: translate(-14px, 10px) rotate(-14deg); } 100% { transform: translate(-60px, 160px) rotate(-40deg); opacity: 0; } }
@keyframes lfR { 0% { transform: scale(.3); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25%, 35% { transform: scale(1); } 55% { transform: translate(14px, 10px) rotate(14deg); } 100% { transform: translate(60px, 160px) rotate(40deg); opacity: 0; } }
.lifefx .lf-text { display: flex; flex-direction: column; align-items: center; animation: lfText 2.1s ease-out forwards; }
.lifefx .lf-text b { font-size: 44px; color: #fff; -webkit-text-stroke: 3px #c4304f; paint-order: stroke fill; letter-spacing: .08em; }
.lifefx .lf-text span { margin-top: 4px; padding: 4px 14px; border-radius: 999px; background: #fff; color: #c4304f; font-weight: 800; font-size: 18px; }
.lifefx.last .lf-text span { background: #c4304f; color: #fff; }
@keyframes lfText { 0%, 30% { opacity: 0; transform: translateY(10px) scale(.8); } 42% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
/* 相手のライフが減った: 上の帯 */
.opplifefx { position: absolute; left: 50%; top: 22%; z-index: 30; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center;
  padding: 8px 22px; border-radius: 16px; background: linear-gradient(180deg, #ffd95a, #ffb92e); box-shadow: 0 6px 0 #d18e12, 0 10px 20px rgba(0,0,0,.25); animation: oppFx 1.7s ease-out forwards; white-space: nowrap; }
.opplifefx b { font-size: 24px; color: #6b4a00; }
.opplifefx span { font-size: 14px; font-weight: 800; color: #8a5a00; }
@keyframes oppFx { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 15% { opacity: 1; transform: translateX(-50%) scale(1.12); } 25% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
.hud > div.opphit { animation: oppHit .6s ease-out; }
@keyframes oppHit { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(6px) rotate(4deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* 結果画面のダンゴウオ(2026-10-13 ユーザー指示): 勝ち=笑顔でぴょんぴょん、負け=しょんぼり(下がり眉・への字口・なみだ) */
.battle-card .bt-face { height: 104px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -6px; }
.blk.mood { width: 96px; height: 96px; padding: 4px; }
.blk.mood .bd { animation: none !important; }
.blk.mood .fin, .blk.mood .cheek { display: block; }
.blk.mood .x, .blk.mood .wh { display: none !important; }
.blk.mood.win { animation: moodHop .6s ease-in-out infinite alternate; }
@keyframes moodHop { from { transform: translateY(4px) scale(1.02, .97); } to { transform: translateY(-12px) scale(.98, 1.03); } }
.blk.mood.win .eye { top: 40% !important; width: 15% !important; height: 9% !important; background: transparent !important; border: 3.5px solid var(--ink) !important; border-bottom: 0 !important; border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important; box-shadow: none !important; animation: none !important; }
.blk.mood.win .eye::after, .blk.mood.lose .eye::after { display: none; }
.blk.mood.win .brow { display: none !important; }
.blk.mood.win .mouth { top: 58% !important; width: 30% !important; height: 16% !important; background: #8e2b1f !important; border: 0 !important; border-radius: 10% 10% 60% 60% / 10% 10% 100% 100% !important; box-shadow: inset 0 -5px 0 #ff8a8a !important; }
.blk.mood.win .mouth::before, .blk.mood.win .mouth::after, .blk.mood.lose .mouth::before, .blk.mood.lose .mouth::after { display: none !important; }
.blk.mood.lose { animation: moodSad 2.4s ease-in-out infinite; filter: saturate(.75); }
@keyframes moodSad { 0%, 100% { transform: rotate(-6deg) translateY(4px); } 50% { transform: rotate(-3deg) translateY(7px); } }
.blk.mood.lose .eye { top: 50% !important; width: 9% !important; height: 9% !important; animation: none !important; }
.blk.mood.lose .brow { display: block !important; top: 36% !important; width: 18% !important; height: 4.5% !important; }
.blk.mood.lose .brow.l { transform: rotate(-22deg) !important; } .blk.mood.lose .brow.r { transform: rotate(22deg) !important; }
.blk.mood.lose .mouth { top: 68% !important; width: 22% !important; height: 9% !important; background: transparent !important; border: 0 !important; border-top: 3.5px solid var(--ink) !important; border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important; box-shadow: none !important; }
.blk.mood.lose .bd::after { display: block !important; content: ""; position: absolute; right: auto !important; left: 24% !important; top: 60% !important; width: 9% !important; height: 15% !important; background: #6fc3ff !important; border-radius: 50% 50% 50% 50% / 65% 65% 35% 35% !important; box-shadow: none !important; animation: moodTear 1.8s ease-in infinite; z-index: 2; }
@keyframes moodTear { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
.blk.mood.draw .eye { animation: none !important; }
/* 試合終了の合図(2026-10-13): 盤面を見せたまま「しゅうりょう!」(3秒) */
.endfx { position: absolute; inset: 0; z-index: 41; display: flex; align-items: center; justify-content: center; pointer-events: none; background: rgba(255,255,255,.18); animation: endBg 3s ease-out forwards; }
@keyframes endBg { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 1; } }
.endfx b { font-size: 52px; letter-spacing: .06em; color: #fff; -webkit-text-stroke: 4px #f2477a; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(120,20,60,.35); animation: endText 3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes endText { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 12% { transform: scale(1.15) rotate(3deg); opacity: 1; } 22% { transform: scale(1) rotate(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }

/* 残り1か所(ちょうど5個)のヒント(2026-10-13 ユーザー指示、全モード): 3秒たったらその5個を光らせる */
.blk.hint .bd { animation: hintGlow .7s ease-in-out infinite alternate !important; }
@keyframes hintGlow { from { box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 6px 2px rgba(255,230,80,.6); transform: scale(1); } to { box-shadow: 0 0 0 3px #fff, 0 0 18px 7px rgba(255,220,60,1); transform: scale(1.08); } }
/* モード選び(2026-10-13 ユーザー指示「わかりづらい、色を変えて大きく」): スピード=オレンジ・じっくり=青 */
.battle-card .bt-modes { gap: 10px; }
.battle-card .bt-modes button.bt-mode { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 9px; border-radius: 18px; border: 3px solid var(--mc); background: #fff; color: var(--mc); opacity: .55; transition: transform .15s, opacity .15s; }
.battle-card .bt-modes button.bt-mode.speed { --mc: #f2732a; --ms: #c4531a; }
.battle-card .bt-modes button.bt-mode.calm { --mc: #2f8fe0; --ms: #1f6aa8; }
.battle-card .bt-modes button.bt-mode.endure { --mc: #e8730c; --ms: #a64d00; } /* 耐久チェイン対戦(2026-10-15、カボチャ色) */
.battle-card .bt-modes button.bt-mode i { font-style: normal; font-size: 24px; line-height: 1.1; }
.battle-card .bt-modes button.bt-mode b { font-size: 19px; font-weight: 800; }
.battle-card .bt-modes button.bt-mode small { font-size: 11px; font-weight: 700; opacity: .9; }
.battle-card .bt-modes button.bt-mode.on { opacity: 1; background: var(--mc); color: #fff; box-shadow: 0 4px 0 var(--ms), 0 6px 14px rgba(0,0,0,.18); transform: scale(1.04); }
.battle-card .bt-modes button.bt-mode em { position: absolute; top: -9px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--mc); font-style: normal; font-weight: 800; font-size: 15px; line-height: 24px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
/* 軽量化(2026-10-13): スコア欄(ゆれる海藻)を盤面より手前の重なり順に。前は欄のゆれのせいで、後ろに描く FEVER の帯〜盤面全体が
   別の層(画面の約9割・約15MB)に分けられていた。盤面は欄に重ならない(overflow: hidden)ので見た目は同じ */
#game .hud, #game .fever-bar { position: relative; z-index: 3; } /* FEVER の帯も同じ高さに(DOM の順で今までどおり帯が海藻の先を隠す) */

/* 試作モード(2026-10-14 タイトルを押すと出る) */
#top .logo { cursor: pointer; }
.lab-card { max-height: calc(100% - 16px); }
.lab-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.lab-list { width: 100%; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
/* 試作モードの一覧(2026-10-14 色つき+それぞれのランキング)。--lc / --ld = そのモードの色 */
.lab-row { display: flex; gap: 6px; width: 100%; }
.lab-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 0; text-align: left; color: #fff;
  background: linear-gradient(color-mix(in srgb, var(--lc), white 18%), var(--lc)); box-shadow: 0 3px 0 var(--ld); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.lab-item b { font-size: 16px; }
.lab-item small { font-size: 11.5px; opacity: .95; line-height: 1.35; }
.lab-rank { flex: 0 0 auto; width: 66px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 14px; border: 0;
  background: linear-gradient(#ffd75e, #f2b21b); box-shadow: 0 3px 0 #c98a00; color: #7a4a00; font-size: 10px; font-weight: 800; }
.lab-rank svg { width: 22px; height: 22px; }
.rank-lab { margin: -4px 0 0; font-size: 14px; font-weight: 800; color: var(--accent); }

/* 記憶モード(2026-10-14): 色を隠したダンゴウオ(DOM の時。canvas は canvasboard.js)。どの色も同じ形・ベージュに黒い輪郭 */
.blk.mh .bd { background: #efe4cc !important; box-shadow: inset 0 0 0 2px #3a2e28 !important; border-radius: 36% !important; animation: none !important; }
.blk.mh .bd > i { display: none !important; }
.blk.miss .bd { box-shadow: 0 0 0 3px #e53935, 0 0 12px 2px rgba(229,57,53,.6) !important; }
.memo { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.memo.show { display: flex; background: rgba(20, 30, 60, .35); }
.memo b { font-size: 40px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px #2a86c8; paint-order: stroke fill; }
.memo b.n { font-size: 84px; animation: nb .7s ease-out; }
.memo.peek { display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 10px; }
.memo.peek span { font-size: 28px; font-weight: 900; color: #fff; background: rgba(42,134,200,.85); border-radius: 999px; min-width: 1.8em; text-align: center; }
.memo.bad b { -webkit-text-stroke-color: #e53935; }
.memo small { margin-top: 6px; font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ひっくり返し(2026-10-14): さかさまになる時の回転 */
.board.flipping { transition: transform .5s ease-in-out; transform: rotateX(180deg); }

/* 対戦の3本先取(2026-10-14) */
.bt-stars { margin-left: 6px; color: #ffb400; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.bt-stars i { font-style: normal; color: rgba(120,110,100,.45); }
.bt-setnote { margin: 4px 0; font-size: 13px; color: var(--muted); text-align: center; }
.bt-setdone { margin: 6px 0; font-size: 16px; font-weight: 800; color: var(--accent); text-align: center; }

/* ---------- 裏ダンゴリン(2026-10-14): ハロウィンの夜の背景・ゾンビのダンゴウオ ---------- */
body.ura { background:
  radial-gradient(circle at 82% 11%, #ffe7a3 0 26px, #ffbf47 27px, rgba(255,160,40,.35) 34px, transparent 80px),
  radial-gradient(120% 60% at 50% 110%, rgba(255,110,20,.35), transparent 60%),
  linear-gradient(180deg, #1b0f2e 0%, #35154d 45%, #1a0b26 100%);
  background-attachment: fixed; }
html:has(body.ura) { background: #1a0b26; }
body.ura::before { content: ""; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20800%22%20preserveAspectRatio%3D%22xMidYMin%20slice%22%3E%20%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.7%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%22120%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%2260%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22140%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%2230%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22360%22%20cy%3D%22190%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22260%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%22320%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22380%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%2220%22%20r%3D%221.3%22%2F%3E%3C%2Fg%3E%20%3Cpath%20transform%3D%22translate(40%20150)%20scale(1.6)%22%20fill%3D%22%23a98bd6%22%20d%3D%22M0%206c3-4%207-5%2010-2%201-3%203-4%205-4l1%203%201-3c2%200%204%201%205%204%203-3%207-2%2010%202-4-1-7%200-8%203-2-2-5-2-6%201-1-2-3-2-4%200-1-3-4-3-6-1-1-3-4-4-8-3z%22%2F%3E%3Cpath%20transform%3D%22translate(250%20120)%20scale(1.2)%22%20fill%3D%22%23a98bd6%22%20d%3D%22M0%206c3-4%207-5%2010-2%201-3%203-4%205-4l1%203%201-3c2%200%204%201%205%204%203-3%207-2%2010%202-4-1-7%200-8%203-2-2-5-2-6%201-1-2-3-2-4%200-1-3-4-3-6-1-1-3-4-4-8-3z%22%2F%3E%3Cpath%20transform%3D%22translate(300%20170)%20scale(2)%22%20fill%3D%22%23b99ae6%22%20d%3D%22M0%206c3-4%207-5%2010-2%201-3%203-4%205-4l1%203%201-3c2%200%204%201%205%204%203-3%207-2%2010%202-4-1-7%200-8%203-2-2-5-2-6%201-1-2-3-2-4%200-1-3-4-3-6-1-1-3-4-4-8-3z%22%2F%3E%3Cpath%20transform%3D%22translate(110%20230)%20scale(1)%22%20fill%3D%22%238f72bd%22%20d%3D%22M0%206c3-4%207-5%2010-2%201-3%203-4%205-4l1%203%201-3c2%200%204%201%205%204%203-3%207-2%2010%202-4-1-7%200-8%203-2-2-5-2-6%201-1-2-3-2-4%200-1-3-4-3-6-1-1-3-4-4-8-3z%22%2F%3E%3Cpath%20transform%3D%22translate(330%20260)%20scale(1.1)%22%20fill%3D%22%238f72bd%22%20d%3D%22M0%206c3-4%207-5%2010-2%201-3%203-4%205-4l1%203%201-3c2%200%204%201%205%204%203-3%207-2%2010%202-4-1-7%200-8%203-2-2-5-2-6%201-1-2-3-2-4%200-1-3-4-3-6-1-1-3-4-4-8-3z%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.35%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200L90%2090M0%200L60%20110M0%200L110%2050M0%200L25%20120M0%200L120%2018%22%2F%3E%3Cpath%20d%3D%22M28%209Q22%2018%209%2025M55%2018Q45%2038%2018%2050M82%2027Q66%2058%2027%2075M106%2034Q86%2078%2034%20100%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E") top center / cover no-repeat; -webkit-mask-image: none; mask-image: none; animation: uraBats 6s ease-in-out infinite alternate; opacity: 1; }
@keyframes uraBats { from { transform: translate(-6px, 0); } to { transform: translate(8px, -8px); } }
body.ura::after { content: ""; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20160%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%20%3Cpath%20d%3D%22M0%20110%20Q100%2085%20200%20105%20T400%2095%20V160%20H0z%22%20fill%3D%22%231a0b26%22%2F%3E%20%3Cg%20fill%3D%22%230e0616%22%3E%20%3Cpath%20d%3D%22M290%20105%20V60%20L310%2040%20L330%2060%20V105z%22%2F%3E%3Cpath%20d%3D%22M318%20105%20V48%20L340%2026%20L362%2048%20V105z%22%2F%3E%3Crect%20x%3D%22300%22%20y%3D%2268%22%20width%3D%228%22%20height%3D%2210%22%20fill%3D%22%23ffcc4d%22%2F%3E%3Crect%20x%3D%22333%22%20y%3D%2256%22%20width%3D%229%22%20height%3D%2211%22%20fill%3D%22%23ffcc4d%22%2F%3E%3Crect%20x%3D%22345%22%20y%3D%2278%22%20width%3D%228%22%20height%3D%2210%22%20fill%3D%22%23ffcc4d%22%2F%3E%20%3Cpath%20d%3D%22M60%20110%20C62%2080%2058%2060%2050%2045%20M56%2070%20C46%2062%2038%2062%2030%2056%20M56%2060%20C64%2050%2074%2048%2082%2040%20M52%2050%20C48%2040%2052%2032%2046%2024%22%20stroke%3D%22%230e0616%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M140%20112%20v-22%20a10%2010%200%200%201%2020%200%20v22z%22%2F%3E%3Cpath%20d%3D%22M180%20108%20v-16%20a8%208%200%200%201%2016%200%20v16z%22%2F%3E%3Cpath%20d%3D%22M228%20112%20h6%20v-18%20h8%20v-6%20h-8%20v-8%20h-6%20v8%20h-8%20v6%20h8z%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20transform%3D%22translate(110%20118)%20scale(1.1)%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2214%22%20ry%3D%2211%22%20fill%3D%22%23f07a10%22%2F%3E%3Cpath%20d%3D%22M-5-3l3-4%203%204zM3-3l3-4%203%204z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M-8%203l3%203%203-2%202%203%203-3%203%202%202-3c-2%205-6%207-9%207s-7-2-9-7z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M0-11c0-3%201-5%204-6%22%20stroke%3D%22%233f7a22%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(262%20116)%20scale(0.9)%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2214%22%20ry%3D%2211%22%20fill%3D%22%23f07a10%22%2F%3E%3Cpath%20d%3D%22M-5-3l3-4%203%204zM3-3l3-4%203%204z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M-8%203l3%203%203-2%202%203%203-3%203%202%202-3c-2%205-6%207-9%207s-7-2-9-7z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M0-11c0-3%201-5%204-6%22%20stroke%3D%22%233f7a22%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(380%20124)%20scale(1.2)%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2214%22%20ry%3D%2211%22%20fill%3D%22%23f07a10%22%2F%3E%3Cpath%20d%3D%22M-5-3l3-4%203%204zM3-3l3-4%203%204z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M-8%203l3%203%203-2%202%203%203-3%203%202%202-3c-2%205-6%207-9%207s-7-2-9-7z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M0-11c0-3%201-5%204-6%22%20stroke%3D%22%233f7a22%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(24%20128)%20scale(0.8)%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2214%22%20ry%3D%2211%22%20fill%3D%22%23f07a10%22%2F%3E%3Cpath%20d%3D%22M-5-3l3-4%203%204zM3-3l3-4%203%204z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M-8%203l3%203%203-2%202%203%203-3%203%202%202-3c-2%205-6%207-9%207s-7-2-9-7z%22%20fill%3D%22%23ffd36b%22%2F%3E%3Cpath%20d%3D%22M0-11c0-3%201-5%204-6%22%20stroke%3D%22%233f7a22%22%20stroke-width%3D%222.5%22%20fill%3D%22none%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat; animation: none; left: 0; right: 0; bottom: 0; top: auto; height: 22vh; }
body.ura #game::before { content: none; }
.ura-screen { justify-content: center; gap: 8px; padding: 12px 16px 70px; }
.ura-logo span { --lc: #ff8a1f; --ls: #a34700; }
.ura-logo .u0 { --lc: #b46bff; --ls: #4a1d80; transform: rotate(-10deg) scale(1.1); margin-right: 4px; }
.ura-logo .l1, .ura-logo .l3 { --lc: #8be04e; --ls: #3c7a12; }
.ura-screen .lab-list { width: min(100%, 420px); gap: 10px; }
.ura-screen .lab-note { color: rgba(255,255,255,.7); }
.ura-screen .chip.back { position: absolute; left: 12px; top: max(12px, env(safe-area-inset-top)); }
/* 裏ダンゴリンのダンゴウオ(body.ura の間だけ、盤面も。canvas の画像は tools/fish-sprites.js を URA=1 で fish-ura-*)。飾りの部品 sk1〜3 はふだん出さない */
.blk .sk1, .blk .sk2, .blk .sk3 { display: none; position: absolute; }
/* 緑 = ゾンビ: くすんだ色・おでこのつぎはぎ・片目が白い */
body.ura .blk.c2:not(.king):not(.nc) .bd { filter: saturate(.5) sepia(.3) hue-rotate(35deg) brightness(.88); }
body.ura .blk.c2:not(.king):not(.nc) .eye.r { background: #f3f3e8 !important; box-shadow: inset 0 0 0 2px #3a2e28; }
body.ura .blk.c2:not(.king):not(.nc) .eye.r::after { display: none; }
body.ura .blk.c2:not(.king):not(.nc) .sk1 { display: block; left: 36%; top: 12%; width: 38%; height: 4px; border-radius: 2px; transform: rotate(-24deg);
  background: repeating-linear-gradient(90deg, #3a2e28 0 2px, transparent 2px 5px), linear-gradient(#3a2e28, #3a2e28) center / 100% 1.5px no-repeat; }
/* 黄色 = カボチャ: オレンジ・たてのすじ・へた・三角の目・ギザギザの口 */
body.ura .blk.c3:not(.king):not(.nc) { --fill: #f57c00; --shade: #b34700; }
body.ura .blk.c3:not(.king):not(.nc) .bd { background-image: repeating-linear-gradient(90deg, transparent 0 22%, rgba(130,50,0,.3) 22% 26%), radial-gradient(90% 80% at 40% 35%, #ffa040 0%, #f57c00 55%, #b34700 100%) !important; }
body.ura .blk.c3:not(.king):not(.nc) .sk1 { display: block; left: 44%; top: -10%; width: 14%; height: 18%; border-radius: 3px 3px 2px 2px; background: #4c8a2a; transform: rotate(8deg); }
body.ura .blk.c3:not(.king):not(.nc) .eye { background: #3a1a00 !important; border: 0 !important; border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: none !important; }
body.ura .blk.c3:not(.king):not(.nc) .eye::after { display: none; }
body.ura .blk.c3:not(.king):not(.nc) .mouth { background: #3a1a00 !important; border: 0 !important; clip-path: polygon(0 0, 16% 60%, 33% 0, 50% 60%, 67% 0, 84% 60%, 100% 0, 85% 100%, 15% 100%); }
/* 青 = フランケンシュタイン(2026-10-14 ユーザー「髪が黒すぎて邪魔、もっとフランケンぽく」): 頭の上だけの うすい緑がかった四角い髪・おでこの縫い目・首の大きなボルト・ねむそうな目 */
body.ura .blk.c1:not(.king):not(.nc) .sk1 { display: block; left: 16%; top: -3%; width: 68%; height: 14%; background: #3f5246; border-radius: 3px 3px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 86% 70%, 72% 100%, 58% 70%, 44% 100%, 30% 70%, 16% 100%, 0 70%); }
body.ura .blk.c1:not(.king):not(.nc) .sk2, body.ura .blk.c1:not(.king):not(.nc) .sk3 { display: block; top: 60%; width: 15%; height: 16%; border-radius: 3px; background: linear-gradient(#e2e6ec, #8a919c); box-shadow: 0 0 0 1.5px #3a3f48, inset 0 -2px 0 rgba(0,0,0,.2); }
body.ura .blk.c1:not(.king):not(.nc) .sk2 { left: -9%; } body.ura .blk.c1:not(.king):not(.nc) .sk3 { right: -9%; }
body.ura .blk.c1:not(.king):not(.nc) .eye { border-top: 2.4px solid var(--ink) !important; }
body.ura .blk.c1:not(.king):not(.nc) .bd::after { right: auto; left: 30%; top: 14%; width: 40%; height: 9%; border-radius: 0; background: repeating-linear-gradient(90deg, #23303a 0 2px, transparent 2px 6px), linear-gradient(#23303a, #23303a) center / 100% 2px no-repeat; } /* おでこの縫い目 */
/* 紫 = おばけ(2026-10-14 ユーザー「紫はお化け風に」): うすく光る・すそがひらひら・まっ黒な丸い目・「お」の口 */
body.ura .blk.c4:not(.king):not(.nc) .bd { filter: brightness(1.18) saturate(.75); box-shadow: 0 0 10px 2px rgba(200,170,255,.55), inset 0 -3px 6px rgba(80,40,140,.35) !important; }
body.ura .blk.c4:not(.king):not(.nc) .bd { opacity: .92; }
body.ura .blk.c4:not(.king):not(.nc) .sk1 { display: block; left: 2%; bottom: -12%; width: 96%; height: 22%; /* すそのひらひら(体と同じ色の丸を4つ) */
  background: radial-gradient(circle at 50% 0, #a979e8 0 62%, transparent 64%) 0 0 / 25% 100% repeat-x; }
body.ura .blk.c4:not(.king):not(.nc) .eye { background: #1a0f2a !important; border: 0 !important; width: 15% !important; height: 20% !important; top: 36% !important; border-radius: 50% !important; animation: none !important; }
body.ura .blk.c4:not(.king):not(.nc) .eye::after { display: none !important; }
body.ura .blk.c4:not(.king):not(.nc) .mouth { background: #1a0f2a !important; border: 0 !important; width: 12% !important; height: 13% !important; left: 44% !important; border-radius: 50% !important; }
body.ura .blk.c4:not(.king):not(.nc) .brow, body.ura .blk.c4:not(.king):not(.nc) .cheek { display: none !important; }
/* 赤 = ミイラ(2026-10-14 ユーザー「赤は包帯巻いて」「マミーぽく」): ななめの包帯(すき間から赤が見える)と、ほどけた包帯の端 */
body.ura .blk.c0:not(.king):not(.nc) .sk1 { display: block; inset: 4% 6% 8% 6%; border-radius: 36%; pointer-events: none;
  background: repeating-linear-gradient(-18deg, transparent 0 13%, rgba(246,236,214,.92) 13% 24%, transparent 24% 30%, rgba(232,220,196,.9) 30% 37%); }
body.ura .blk.c0:not(.king):not(.nc) .sk2 { display: block; right: -4%; top: 58%; width: 20%; height: 12%; border-radius: 2px; background: #efe4cc; transform: rotate(28deg); box-shadow: 0 1px 0 rgba(0,0,0,.15); }
body.ura .blk.c0:not(.king):not(.nc) .eye { z-index: 2; }

/* 裏ダンゴリンのランキング(1つのボタン+ランキング画面に裏のタブ、2026-10-14) */
.ura-screen #btnLabRank { margin-top: 4px; }
.tabs.lab-tabs button { padding: 8px 2px; font-size: 12px; white-space: nowrap; }
/* 裏ダンゴリンの文字(2026-10-14 ユーザー「裏は黒、ダンゴリンはハロウィンのダンゴウオの色に合わせて」): ダ=ミイラの赤・ン=フランケンの青・ゴ=ゾンビのくすんだ緑・リ=カボチャのオレンジ・ン=ドラキュラの紫 */
.ura-logo .u0 { --lc: #15101c; --ls: #000; }
.ura-logo .l0 { --lc: var(--c0); --ls: var(--c0d); }
.ura-logo .l1 { --lc: var(--c1); --ls: var(--c1d); }
.ura-logo .l2 { --lc: #6f9a78; --ls: #3e5c45; }
.ura-logo .l3 { --lc: #f57c00; --ls: #b34700; }
.ura-logo .l4 { --lc: var(--c4); --ls: var(--c4d); }

/* 裏ダンゴリンのボタン(2026-10-14): スタート画面のボタンと同じ形、ハロウィンの色、汚れ(しみ)・ひび・クモの巣 */
.ura-screen .lab-list { align-items: center; }
.ura-btn { overflow: hidden;
  background: radial-gradient(circle at 18% 72%, rgba(40,20,0,.3) 0 5px, transparent 9px), radial-gradient(circle at 70% 30%, rgba(40,20,0,.22) 0 3px, transparent 7px),
    radial-gradient(circle at 52% 85%, rgba(40,20,0,.25) 0 4px, transparent 7px), radial-gradient(ellipse 30% 40% at 90% 90%, rgba(30,10,0,.25), transparent),
    linear-gradient(180deg, var(--b1), var(--b2)); }
.ura-btn .ub-web { position: absolute; right: 0; top: 0; width: 44px; height: 44px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-opacity='.8' stroke-width='1'><path d='M48 0L4 44M48 0L24 48M48 0L0 22M48 0L36 48M48 0L0 8'/><path d='M41 7Q38 3 40 0M44 12Q33 9 33 1M38 20Q25 17 26 3M31 30Q15 25 18 5M23 41Q5 33 9 9'/></svg>") no-repeat; pointer-events: none; }
.ura-btn .ub-crack { position: absolute; left: 10px; bottom: 2px; width: 46px; height: 23px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='none' stroke='%23201008' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 29L12 19L9 13L18 7L16 1M12 19L21 21L27 15M18 7L25 9'/></svg>") no-repeat; pointer-events: none; }
.ura-btn:nth-child(even) .ub-web { right: auto; left: 0; transform: scaleX(-1); }
.ura-btn:nth-child(even) .ub-crack { left: auto; right: 14px; transform: scaleX(-1); }
.ura-btn::after { display: none; }
.ura-btn.ub-flip   { --b1: #9d6bff; --b2: #6b3fd0; --bs: #44228f; }
.ura-btn.ub-rise   { --b1: #9ad85c; --b2: #5ea52e; --bs: #3b6e1a; }
.ura-btn.ub-endure { --b1: #ffa64d; --b2: #f07a10; --bs: #a64d00; }
.ura-btn.ub-memory { --b1: #8fa3c7; --b2: #5c6f99; --bs: #3a4766; }
.ura-btn.ub-oni    { --b1: #e8584f; --b2: #b5261f; --bs: #74120d; }
.ura-btn.ub-rank   { --b1: #e6c25a; --b2: #b88a1e; --bs: #7a5a0a; color: #3a2600; }

/* スタート画面のランキングの右下のカボチャ(2026-10-14 ユーザー指示「少し斜め、大きさはタイトルのダンゴリンくらい、押すと裏ダンゴリン」) */
.rank-wrap { position: relative; width: min(290px, 100%); display: flex; justify-content: center; }
.ura-pumpkin { position: absolute; right: -18px; bottom: -22px; width: 60px; height: 60px; padding: 0; border: 0; background: none; transform: rotate(14deg); z-index: 2; filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); cursor: pointer; }
.ura-pumpkin svg { width: 100%; height: 100%; display: block; }
.ura-pumpkin:active { transform: rotate(14deg) scale(.92); }
/* 裏ダンゴリンの成績(プロフィール、2026-10-14) */
.prof-ura { color: #7a3fd0 !important; }
.prof-ura-list dd small { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }

/* 裏ダンゴリンのモード一覧: 最後のボタンの影が枠で切れないように(2026-10-14 ユーザー「鬼の6色のボタンの下が少し切れてる」) */
.ura-screen .lab-list { overflow: visible; padding-bottom: 6px; }

/* お化け撃退のお化け(2026-10-14): 白くふわふわ・黒い丸い目・すそがひらひら。色の見た目(裏の飾り)は全部かくす */
.blk.gh .bd { background: radial-gradient(90% 80% at 40% 35%, #ffffff, #eef0ff 60%, #c9cfee) !important; filter: none !important; opacity: .95;
  box-shadow: 0 0 10px 2px rgba(255,255,255,.55) !important; animation: ghFloat 2.4s ease-in-out infinite !important; border-radius: 46% 46% 30% 30% !important; }
.blk.gh .bd::before, .blk.gh .bd::after { display: none !important; }
.blk.gh .bd > i { display: none !important; }
.blk.gh .bd > i.eye { display: block !important; background: #1a1a2a !important; border: 0 !important; width: 15% !important; height: 20% !important; top: 34% !important; border-radius: 50% !important; clip-path: none !important; animation: none !important; box-shadow: none !important; }
.blk.gh .bd > i.eye::after { display: none !important; }
.blk.gh .bd > i.mouth { display: block !important; background: #1a1a2a !important; border: 0 !important; width: 12% !important; height: 12% !important; left: 44% !important; top: 62% !important; border-radius: 50% !important; clip-path: none !important; }
.blk.gh .bd > i.sk1 { display: block !important; position: absolute; left: 2%; right: auto; top: auto; bottom: -12%; width: 96%; height: 22%; transform: none; clip-path: none; border-radius: 0; box-shadow: none;
  background: radial-gradient(circle at 50% 0, #dfe3fb 0 62%, transparent 64%) 0 0 / 25% 100% repeat-x !important; }
@keyframes ghFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
.blk.ghin .bd { animation: ghIn .5s ease-out !important; }
@keyframes ghIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: .95; } }
.ura-btn.ub-ghost { --b1: #8fa3c7; --b2: #5c6f99; --bs: #3a4766; }
/* スタート画面のカボチャ: 3秒に1回ぶるっと動く(2026-10-14 ユーザー指示) */
.ura-pumpkin svg { animation: pumpShake 3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes pumpShake { 0%, 82%, 100% { transform: rotate(0) translateY(0); } 85% { transform: rotate(-12deg) translateY(-3px); } 88% { transform: rotate(10deg); } 91% { transform: rotate(-7deg); } 94% { transform: rotate(4deg); } 97% { transform: rotate(-2deg); } }

/* 裏ダンゴリンの期間限定のカウントダウン(2026-10-14) */
.ura-limit { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: #ffb347; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ura-limit b { font-size: 22px; color: #ff8a1f; margin: 0 2px; }
.ura-limit small { display: block; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); }

/* ふつうのランキングの🎃のタブ(裏ダンゴリンをにおわせる、2026-10-14) */
.tabs button.tab-ura { flex: 0 0 38px; padding: 6px 0; font-size: 18px; background: linear-gradient(#3a1d52, #1d0f2b); box-shadow: inset 0 0 0 2px #7a3fd0; animation: pumpShake 3s ease-in-out infinite; }
.tabs.lab-tabs button.tab-omote { flex: 0 0 34px; background: var(--accent); color: #fff; }

/* 王様ダンゴ(2026-10-15): 頭に王冠・金色に光る */
.blk.king { z-index: 3; }
.blk.king::before { content: "👑"; position: absolute; left: 50%; top: -34%; transform: translateX(-50%) rotate(-8deg); font-size: calc(var(--cell) * .62); z-index: 4; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); pointer-events: none; }
.blk.king .bd { box-shadow: 0 0 0 3px #ffd23f, 0 0 16px 6px rgba(255,210,63,.9) !important; animation: kingGlow 1.2s ease-in-out infinite alternate !important; }
@keyframes kingGlow { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.blk.kingin::before { animation: kingIn .6s ease-out; }
@keyframes kingIn { from { transform: translateX(-50%) translateY(-60%) scale(1.8); opacity: 0; } to { transform: translateX(-50%) rotate(-8deg); opacity: 1; } }
.ura-btn.ub-cont { --b1: #5fd6b0; --b2: #23a07a; --bs: #11634a; } /* 裏ダンゴリンのつづきから(2026-10-15) */
.ura-btn.ub-king { --b1: #9d6bff; --b2: #6b3fd0; --bs: #44228f; }

/* 王様ダンゴウオの見た目(2026-10-15 ユーザー「口元に白ひげ・王冠・色はベージュ」)。裏の色の見た目にはしない(上の :not(.king)) */
.blk.king { --fill: #e9d3a8; --shade: #b99a68; }
.blk.king .bd { background: radial-gradient(90% 80% at 40% 35%, #f8ead0 0%, #e9d3a8 55%, #b99a68 100%) !important; filter: none !important; }
.blk.king .bd > i.sk1, .blk.king .bd > i.sk2 { display: none !important; }
.blk.king .bd > i.sk3 { display: block !important; position: absolute; left: 16%; right: 16%; width: auto; top: 62%; height: 34%; border-radius: 30% 30% 50% 50%; z-index: 2; transform: none; clip-path: none;
  background: radial-gradient(circle at 18% 28%, #fff 0 30%, transparent 32%), radial-gradient(circle at 50% 36%, #fff 0 34%, transparent 36%), radial-gradient(circle at 82% 28%, #fff 0 30%, transparent 32%), radial-gradient(circle at 50% 78%, #fff 0 38%, transparent 40%) !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.18)); }
.blk.king.mood .bd > i.sk3 { top: 70%; height: 30%; }
/* 囲んだ時の演出(約4秒): 大きな王様がにんまり */
.memo.king-catch { display: flex; background: rgba(40, 20, 60, .55); }
.memo.king-catch .kc-face { margin-top: 10px; animation: kcIn .5s ease-out; }
.memo.king-catch .kc-face .blk.mood { width: 140px; height: 140px; }
.memo.king-catch .blk.king::before { font-size: 64px; top: -40%; }
.memo.king-catch b { margin-top: 18px; -webkit-text-stroke-color: #c98a00; color: #ffe27a; font-size: 34px; }
.memo.king-catch small { font-size: 26px; color: #ffd23f; }
@keyframes kcIn { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* 対戦の攻撃「色ぬき」(2026-10-15): ふつうの色のダンゴウオを うすい灰色に(顔はそのまま)。軌跡も色が分からないように隠す */
.blk.nc { --fill: #d9dde3; --shade: #9aa2ad; }
.blk.nc .fin { filter: grayscale(1); }
.board.blind .trail { display: none; }
/* チェインに使えるダンゴウオ(落ちてきて色が変わった = tf)は、色が変わった時に1秒だけ金色のふち(2026-10-16 ユーザー「光が弱い」。
   前は色が変わる瞬間の 0.35 秒だけ明るくなり、そのあとは見分けがつかなかった)。あそびかたの図と同じ金色。canvas で描く時は canvasboard.js の tfRing */
.blk.tf:not(.doom)::after { content: ""; position: absolute; inset: 1px; border-radius: 38%; border: 2px solid #ffd75a;
  box-shadow: 0 0 5px rgba(255,200,40,.4); pointer-events: none; opacity: 0; animation: tfGlow 1s ease-out; }
@keyframes tfGlow { from { opacity: .8; } to { opacity: 0; } } /* 2026-10-16 ユーザー「明るさは少しだけ」「光るのは1秒でいい」 */

/* 小さい画面(幅350px以下・高さ520px以下)でもトップが詰まらない・切れないように(2026-10-17 App Store 審査 Guideline 4
   「iPad で crowded and cropped」の対応。iPad の中の iPhone 窓が小さい機種の大きさでも崩れないように)。今の iPhone(幅375以上・高さ660以上)は変わらない */
@media (max-width: 350px) {
  #top .logo { font-size: 42px; margin-top: 34px; }      /* 右上の「あそびかた」「シーズン2」の下へ */
  .ura-pumpkin { right: -4px; bottom: -20px; width: 52px; height: 52px; } /* 右にはみ出さない */
  .faces-demo { gap: 6px; }
  .faces-demo .blk { width: 38px; height: 38px; }
}
@media (max-height: 520px) {
  #top { gap: 7px; padding-top: 10px; padding-bottom: 14px; }
  #top .logo { font-size: 38px; margin-top: 30px; }
  .faces-demo { margin: 0 0 4px; }
  .faces-demo .blk { width: 32px; height: 32px; }
  #top .btn { height: 42px; }
}
/* とても低い横長の窓(高さ420px以下・幅500px以上。iPad の自由な大きさの窓など)でもメニューが切れないように(2026-10-17) */
@media (max-height: 420px) and (min-width: 500px) {
  #top { gap: 5px; padding-top: 8px; padding-bottom: 8px; }
  #top .logo { font-size: 32px; margin-top: 0; }
  .faces-demo { margin: 0; }
  .faces-demo .blk { width: 26px; height: 26px; }
  #top .btn { height: 36px; }
  #top .toggles { margin-top: 0; }
}
/* 低い窓では、まん中に出るカード(対戦・ランキング・プロフィールなど)が窓より高くなったら中をスクロール(2026-10-17) */
@media (max-height: 520px) {
  .card { max-height: calc(100dvh - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
/* 裏ダンゴリンが詰まって見えない・切れないように(2026-10-17 App Store 審査 Guideline 4。Apple のスクリーンショットは iPad の中の
   iPhone 窓(縦 375×667 くらい)の裏ダンゴリンで、ロゴが左上の「もどる」にかぶって切れ、地面の飾りが文字・ボタンに重なっていた) */
@media (max-width: 520px) {
  .ura-screen .ura-logo { font-size: 40px; margin-top: 40px; }   /* 左上の「もどる」の下へ、左右にも収める */
}
body.ura .screen { position: relative; z-index: 1; }            /* 画面の中身(文字・ボタン)を地面の飾りより手前に */
body.ura:has(#game:not(.hidden))::after { opacity: .3; }        /* ゲーム中は地面の飾り(カボチャ・お墓・家)をうすく */
body.ura .ctrl .round { background: #fff; }                      /* 下のボタンは透けない白に */
.ura-screen .lab-note { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.8); }
@media (max-height: 620px) {   /* 背の低い窓では中身が窓より高くなり、まん中寄せだとロゴが上にはみ出して「もどる」にかぶる → 上から並べてスクロール */
  .ura-screen { justify-content: flex-start; padding-top: 54px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .ura-screen .ura-logo { font-size: 34px; margin-top: 0; }
  .ura-screen .lab-list .btn { height: 50px; }
}
@media (max-height: 620px) { .ura-screen > *, .ura-screen .lab-list > * { flex-shrink: 0; } }   /* スクロールする時にボタンがつぶれないように */
.ura-screen .lab-note { background: rgba(20,8,30,.72); border-radius: 10px; padding: 6px 10px; position: relative; z-index: 1; }   /* おばけ屋敷の窓と重ならないよう、うしろに暗い下地 */
@media (max-height: 620px) { .ura-screen #btnLabRank { height: 44px; } }

/* ダンゴリンの誕生日のお知らせ(2026-10-18 その日だけ) */
.bday-pop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 30, 20, .5); }
.bday-card { position: relative; overflow: hidden; width: min(100%, 360px); background: var(--panel); border-radius: 24px; padding: 18px 18px 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 3px solid #f2b23a; animation: bday-in .4s ease-out; }
.bday-face { height: 110px; display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1; }
.bday-card h2 { margin: 8px 0 6px; font-size: 22px; color: #d9622c; position: relative; z-index: 1; }
.bday-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--ink); position: relative; z-index: 1; }
.bday-card p b { color: #222; background: linear-gradient(transparent 60%, #ffe08a 60%); }
.bday-card .btn { position: relative; z-index: 1; min-width: 160px; }
.bday-conf i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: bday-fall 2.6s linear infinite; opacity: .9; }
.bday-conf i:nth-child(1) { left: 8%; background: #ef6461; animation-delay: 0s; }
.bday-conf i:nth-child(2) { left: 20%; background: #4a90e2; animation-delay: .9s; }
.bday-conf i:nth-child(3) { left: 33%; background: #f2c14e; animation-delay: .4s; }
.bday-conf i:nth-child(4) { left: 46%; background: #6cc070; animation-delay: 1.4s; }
.bday-conf i:nth-child(5) { left: 59%; background: #b07cd8; animation-delay: .2s; }
.bday-conf i:nth-child(6) { left: 72%; background: #ef6461; animation-delay: 1.1s; }
.bday-conf i:nth-child(7) { left: 84%; background: #4a90e2; animation-delay: .6s; }
.bday-conf i:nth-child(8) { left: 93%; background: #f2c14e; animation-delay: 1.8s; }
@keyframes bday-fall { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(460px) rotate(540deg); } }
@keyframes bday-in { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bday-conf i, .bday-card { animation: none; } }
.bday-ura { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 14px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg, #2d1f4a, #4a2c6e); color: #fff; }
.bday-ura p { margin: 0; font-size: 13px; line-height: 1.6; color: #f3e9ff; }
.bday-ura p b { color: #ffb347; background: none; }
.bday-pk { flex: none; width: 54px; height: 54px; transform: rotate(-8deg); animation: bday-pk 2.4s ease-in-out infinite; }
.bday-pk svg { width: 100%; height: 100%; display: block; }
@keyframes bday-pk { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .bday-pk { animation: none; } }
.bday-ura .bu-t { display: block; font-size: 14px; line-height: 1.45; }
.bday-ura .nw { white-space: nowrap; }
.bday-ura p { word-break: keep-all; }
.bday-face .blk.c5 .cheek { display: none !important; } /* 本物の黒にほっぺは無い */
/* ダークモードで「黒ダンゴウオ」の字が見えなかった(字が #222 固定・カードは暗い色)。字はいつもの色にして、下線のマーカーで目立たせる */
.bday-card p b { color: var(--ink); }
@media (prefers-color-scheme: dark) { .bday-card p b { background: linear-gradient(transparent 60%, rgba(255, 200, 80, .45) 60%); } .bday-card h2 { color: #ff9a5c; } }
.bday-card .bday-ura p b { color: #ffb347; background: none; } /* ハロウィンの見出しはオレンジのまま(マーカーなし) */
.bday-card #bdayOk { display: block; width: min(100%, 280px); margin: 0 auto; } /* 「あそぶ!」を真ん中に */

/* イベントの日の札(タイトルの上。押すとお知らせのポップアップ。2026-10-18 ダンゴリンの誕生日)。文字だけ(2026-10-18 ユーザー「文字だけでいい、ピンクのボタンもいらない」) */
.event-badge { align-self: center; margin: 0 0 -6px; padding: 4px 10px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #e2457f;
  -webkit-text-stroke: 4px #fff; paint-order: stroke fill; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.event-badge:active { opacity: .7; }
.event-badge.hidden { display: none; }
/* 背の低い画面(iPhone SE など)は、上の「トップ」と「あそびかた」の間に小さく置く(タイトルが上のボタンにかからないように) */
@media (max-height: 720px) {
  .event-badge { position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: calc(max(12px, env(safe-area-inset-top)) + 3px); margin: 0; padding: 4px 4px; font-size: 12px; letter-spacing: 0; max-width: calc(100% - 210px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke-width: 3px; }
}

/* イベントの日の背景の飾り(2026-10-18 ダンゴリンの誕生日、ユーザー「トップの背景少し華やかに、10/18だけ」)。スタート画面だけ(ゲーム中・裏ダンゴリンは出さない) */
#eventDeco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; display: none; }
body[class*="ev-"] #eventDeco { display: block; }
body.playing #eventDeco, body.ura #eventDeco { display: none; }
#eventDeco .ed-flags { position: absolute; left: 0; top: 0; width: 100%; height: 62px; opacity: .9; filter: drop-shadow(0 2px 2px rgba(0,40,90,.18)); }
#eventDeco .ed-conf { position: absolute; top: -20px; opacity: .85; animation: edFall linear infinite; }
@keyframes edFall { 0% { transform: translateY(-5vh) rotate(0deg); } 50% { transform: translateY(52vh) translateX(18px) rotate(220deg); } 100% { transform: translateY(108vh) rotate(440deg); } }
#eventDeco .ed-bal { position: absolute; bottom: -90px; width: 38px; height: 46px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 12%, transparent 13%), var(--bc); opacity: .8; animation: edRise 13s ease-in-out infinite; }
#eventDeco .ed-bal::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 40px; background: rgba(255,255,255,.7); }
@keyframes edRise { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -60vh); } 100% { transform: translate(-6px, -125vh); } }
@media (prefers-reduced-motion: reduce) { #eventDeco .ed-conf, #eventDeco .ed-bal { animation: none; } #eventDeco .ed-conf { top: auto; } }

/* 誕生日のお知らせの期間(2026-10-18 ユーザー「ポップアップにも期間表示」) */
.bday-term { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 92, 138, .12); color: #D9446F; font-size: 13px; font-weight: 800; }

/* マイページ・経験値・レベル(2026-10-19) */
.lv-box { margin: 2px 0 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lv-head { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.lv-num { font-size: 26px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.lv-title { font-size: 15px; font-weight: 800; }
.lv-bar { height: 10px; margin: 6px 0 4px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffb703, #fb5607); }
.lv-sub { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 11px; color: var(--muted); font-weight: 700; }
.my-name { margin: 0 0 6px; text-align: center; font-weight: 800; overflow-wrap: anywhere; }
.my-name small { font-weight: 500; color: var(--muted); font-size: 11px; }
#rXp small { font-size: 12px; color: var(--muted); margin-left: 4px; }
.chip.mypage { padding: 6px 10px; }

/* 名前の合言葉(2026-10-19) */
.pin-card { max-width: 340px; }
.pin-card h2 { letter-spacing: 0; text-align: center; }
.pin-msg { margin: 0 0 10px; font-size: 14px; line-height: 1.6; text-align: center; }
.pin-msg small { color: var(--muted); font-size: 11.5px; }
.pin-input { width: 160px; margin: 0 auto; display: block; padding: 10px; font-size: 28px; letter-spacing: .5em; text-align: center; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--muted) 40%, transparent); background: #fff; color: #333; }
.pin-err { min-height: 18px; margin: 6px 0; font-size: 13px; font-weight: 700; color: #e2557a; text-align: center; }
.prof-pin { display: block; margin: 8px auto 0; padding: 6px 12px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 800; font-size: 13px; }
#pinBox { z-index: 30; } /* マイページの上に出す */
.prof-del { display: block; margin: 14px auto 0; padding: 4px 10px; border: 0; background: none; color: #c0566f; font-size: 12px; text-decoration: underline; } /* 名前と記録を消す(2026-10-19) */

/* ガチャ(2026-10-19) */
#gachaBox { z-index: 25; }
.gacha-card { max-width: 340px; text-align: center; }
.gacha-stage { height: 170px; display: flex; align-items: center; justify-content: center; }
.prize { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 18px; border-radius: 18px; border: 3px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, #fff); }
.prize b { font-size: 28px; color: var(--rc); letter-spacing: .1em; }
.prize span { font-size: 18px; font-weight: 800; }
.prize small, .own small { color: var(--muted); font-size: 11px; }
.gacha-left { margin: 4px 0 8px; font-weight: 800; }
.gacha-msg { font-weight: 800; }
.gacha-rate { margin-top: 8px; font-size: 13px; }
.gacha-rate small { color: var(--muted); }
.gacha-btn { display: block; width: 100%; margin: 0 0 6px; padding: 10px; border-radius: 14px; border: 0; background: linear-gradient(90deg, #ffb703, #fb5607); color: #fff; font-weight: 900; font-size: 16px; }
.gacha-btn:disabled { background: color-mix(in srgb, var(--muted) 35%, transparent); color: var(--muted); font-size: 13px; }
.owned { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.own { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 2px solid var(--rc); font-size: 12px; font-weight: 700; }
.own i { font-style: normal; color: var(--rc); font-weight: 900; }
#btnGachaSpin:disabled { opacity: .4; filter: grayscale(.6); } /* 回数がない時(2026-10-19) */

/* ガチャ(表どおり)・アイテム(2026-10-19) */
.prizes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.prize b { font-size: 34px; letter-spacing: 0; }
.gacha-left b { color: var(--accent); }
.gacha-rate div { text-align: left; font-size: 12px; line-height: 1.6; }
.items { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
.items .item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.items .item span { font-weight: 800; font-size: 14px; }
.items .item small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.items .use { padding: 6px 14px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-weight: 800; }
.items .use:disabled { opacity: .35; }
.effects { margin: 2px 0 6px; font-size: 12.5px; font-weight: 800; color: #e8772b; }

/* マイダンゴリン(2026-10-19) */
.mydango { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mydango.none p { margin: 4px 0; text-align: center; font-weight: 700; color: var(--muted); }
.mydango.none small { font-size: 11px; }
.md-face { width: 72px; height: 72px; position: relative; }
.md-face .blk { position: relative !important; left: 0 !important; top: 0 !important; width: 72px !important; height: 72px !important; transform: none; }
.md-txt { display: flex; flex-direction: column; }
.md-txt b { font-size: 17px; }
.md-txt small { color: var(--muted); font-size: 11px; }
.md-pick-lbl { width: 100%; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; } /* 2026-10-20 ユーザー「選ぶところがなかった気がする」 */
.md-pick { display: flex; gap: 8px; width: 100%; justify-content: center; }
.md-c { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; padding: 0; }
.md-c.c0 { background: #f04a57; } .md-c.c1 { background: #3f8fd6; } .md-c.c2 { background: #3fae62; } .md-c.c3 { background: #f2c230; } .md-c.c4 { background: #9b6bd6; }
.md-c.on { border-color: #3a2e2a; box-shadow: 0 0 0 2px #fff inset; }

/* 下の並び(2026-10-20): 左 = 一時停止・音・モード名(小さく)、右 = 能力ゲージ(円) */
.ctrl-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctrl-l .mode { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7em; }
.ctrl .skill { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 3px 0 rgba(0,50,100,.2); display: flex; align-items: center; justify-content: center; }
.ctrl .skill svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ctrl .skill .sk-bg { fill: none; stroke: rgba(0,40,80,.15); stroke-width: 5; }
.ctrl .skill .sk-fill { fill: none; stroke: var(--skc, #ffb703); stroke-width: 5; stroke-linecap: round; } /* 色 = マイダンゴリンの色(ui.js の SKILL_COL、2026-10-21) */
.ctrl .skill span { position: relative; font-weight: 900; font-size: 18px; color: var(--skd, #c98a00); }
.ctrl .skill.full { box-shadow: 0 0 0 3px var(--skc, #ffd166), 0 0 14px var(--skc, #ffb703); }
.ctrl .skill.full .sk-fill { stroke: var(--skd, #fb5607); }
#pause #btnRestart { display: flex; }

/* 必殺技(2026-10-20) */
.ctrl .skills { display: flex; align-items: center; gap: 8px; }
.ctrl .skill em { position: absolute; right: -4px; top: -4px; font-style: normal; font-size: 11px; font-weight: 900; background: #fb5607; color: #fff; border-radius: 999px; padding: 0 5px; }
.ctrl .skill em:empty { display: none; }
.ctrl .skill.sk2 { width: 40px; height: 40px; }
.ctrl .skill.sk2 span { font-size: 15px; }
.ctrl .skill.sk2.used { opacity: .35; }
.ctrl .skill.ready { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--skc, #fb5607), 0 0 18px var(--skc, #ffb703); }
.ctrl .skill.aim { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3f8fd6; }
.board.aiming { outline: 3px dashed #3f8fd6; outline-offset: 2px; }
.skill-big { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 30; font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 0 12px #fb5607, 0 0 28px #ffb703, 0 4px 0 #a33; pointer-events: none; }
.skill-big.sk-hyo, .skill-big.sk-fu { text-shadow: 0 0 12px #3f8fd6, 0 0 28px #9ad0ff, 0 4px 0 #246; }
.skill-big.sk-hikari { text-shadow: 0 0 12px #ffd166, 0 0 30px #fff3b0, 0 4px 0 #b80; }

/* 検証用の新しい機能(2026-10-20)。body.beta の時だけ */
body:not(.beta) .beta-only { display: none !important; }

/* ガチャの演出・アイテムの絵・のうりょく(2026-10-20 ユーザー「演出しょぼい」「緊張感」「ひかりで ふぁーーーん」「絵文字じゃなくて」「五角形のグラフ」) */
.gacha-card { position: relative; overflow: hidden; transition: background .5s; }
.gacha-card > * { position: relative; z-index: 1; }
.gacha-card.run { background: #1b1430; color: #fff; }
.gacha-card.run .gacha-rate, .gacha-card.run #btnGachaClose { opacity: .25; pointer-events: none; }
.gacha-card.run.reveal .gacha-rate, .gacha-card.run.reveal #btnGachaClose { opacity: 1; pointer-events: auto; }
.gacha-card.run .gacha-left b { color: #ffd23f; }
.gacha-stage { height: 200px; position: relative; width: 100%; }
.gcap { --gp: 0; --rc: #fff; position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.gcap-top, .gcap-bot { position: absolute; left: 0; right: 0; height: 52px; border: 4px solid #3a2e2a; box-sizing: border-box; transition: transform .35s cubic-bezier(.2,1.6,.4,1), opacity .35s; }
.gcap-top { top: 0; border-radius: 52px 52px 0 0; border-bottom-width: 3px; background: radial-gradient(circle at 32% 30%, #fff 0 9%, transparent 10%), linear-gradient(180deg, #ff7b98, #e8546c); }
.gcap-bot { bottom: 0; border-radius: 0 0 52px 52px; border-top-width: 3px; background: linear-gradient(180deg, #fff, #e9e2d8); }
.gcap-glow { position: absolute; left: -6px; right: -6px; top: calc(50% - 3px); height: 6px; border-radius: 3px; background: #fff; opacity: calc(var(--gp) * var(--gp)); box-shadow: 0 0 calc(6px + 26px * var(--gp)) calc(2px + 10px * var(--gp)) #ffe9a8; }
.gacha-card:not(.run) .gcap { animation: gcapIdle 2.4s ease-in-out infinite; }
@keyframes gcapIdle { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.gcap.open .gcap-top { transform: translateY(-70px) rotate(-30deg); opacity: 0; }
.gcap.open .gcap-bot { transform: translateY(60px) rotate(18deg); opacity: 0; }
.gcap.open .gcap-glow { height: 40px; top: calc(50% - 20px); border-radius: 50%; background: var(--rc); box-shadow: 0 0 60px 40px #fff; opacity: 1; transition: all .25s; }
.g-flash { position: absolute; inset: -400px; background: #fff; z-index: 3; pointer-events: none; animation: gFlash .9s ease-out forwards; }
@keyframes gFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.g-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 70%, #fff) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%);
  animation: gRays 9s linear infinite, gRaysIn .8s ease-out; opacity: .85; }
.gacha-card.rare .g-rays { background: repeating-conic-gradient(from 0deg, #ff6b8b 0 7deg, transparent 7deg 15deg, #ffd23f 15deg 22deg, transparent 22deg 30deg, #4cc9f0 30deg 37deg, transparent 37deg 45deg); }
@keyframes gRays { to { transform: rotate(360deg); } }
@keyframes gRaysIn { from { transform: scale(.2); opacity: 0; } }
.g-spark { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 2; }
.g-spark i { position: absolute; width: 8px; height: 8px; margin: -4px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gSpark 1.1s var(--t) ease-out forwards; opacity: 0; }
.gacha-card.rare .g-spark i:nth-child(3n) { background: #ffd23f; } .gacha-card.rare .g-spark i:nth-child(3n+1) { background: #ff8fab; }
@keyframes gSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.5); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.6); } }
.gacha-stage .prizes { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 2; }
.gacha-stage .prize { background: rgba(255,255,255,.96); color: #3a2e2a; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc) 35%, transparent), 0 10px 30px rgba(0,0,0,.35); animation: gPrize .7s calc(var(--i) * .25s) cubic-bezier(.2,1.7,.4,1) both; padding: 10px 16px 12px; }
@keyframes gPrize { from { transform: scale(0) rotate(-12deg); opacity: 0; } }
.prize .pic { display: block; width: 72px; height: 72px; }
.prize .pic .isvg, .prize .pic .iface { width: 72px; height: 72px; }
.prize em { font-style: normal; font-size: 12px; font-weight: 900; color: #fff; background: linear-gradient(90deg, #ff6b8b, #ffb703); border-radius: 999px; padding: 2px 10px; }
.g-lv { position: absolute; left: 0; right: 0; bottom: 2px; z-index: 2; font-size: 12px; font-weight: 800; color: #ffe9a8; text-align: center; }
.isvg { display: block; width: 100%; height: 100%; }
.iface { display: block; position: relative; }
.iface .blk { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: none; }
.iic { display: inline-block; width: 36px; height: 36px; flex: none; font-style: normal; }
.iic.sm { width: 20px; height: 20px; vertical-align: -5px; margin-right: 3px; }
.items .item { justify-content: flex-start; }
.items .item > span { flex: 1; }
.items .item b { color: var(--accent); }
.effects { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.gb-cap { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(180deg, #ff7b98 0 50%, #fff 50%); }
.gacha-btn:disabled .gb-cap { opacity: .5; border-color: var(--muted); }
.power { display: flex; flex-direction: column; align-items: center; margin: 0 0 6px; }
.radar { width: 220px; max-width: 100%; height: auto; }
.rd-grid { fill: none; stroke: color-mix(in srgb, var(--muted) 35%, transparent); stroke-width: 1; }
.rd-grid.out { fill: color-mix(in srgb, var(--muted) 8%, transparent); stroke-width: 1.5; }
.rd-axis { stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; }
.rd-k { font-size: 16px; font-weight: 900; fill: var(--ink, #3a2e2a); }
.rd-v { font-size: 11px; font-weight: 800; fill: var(--muted); }
.pw-sk { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pw-sk b { color: var(--accent); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .g-rays { animation: gRaysIn .8s ease-out; } .gacha-card:not(.run) .gcap { animation: none; } }
.g-wait { display: inline-block; color: #ffe9a8; animation: gWait .5s ease-in-out infinite alternate; }
@keyframes gWait { to { transform: scale(1.12); opacity: .6; } }
/* レベルアップの画面(2026-10-20 ユーザー「専用の画面」「豪華に。ただ軽く」): 動かすのは transform と opacity だけ。光の筋1枚・きらきら12個 */
.overlay.lvup { z-index: 30; overflow: hidden; background: radial-gradient(circle at 50% 42%, #5b2a86 0%, #2a1450 45%, #120a26 100%); }
.lvup-rays { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; margin: -450px 0 0 -450px; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 102, .55) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 5%, transparent 60%); mask: radial-gradient(circle, #000 5%, transparent 60%);
  animation: gRays 14s linear infinite; will-change: transform; }
.lvup-spark { position: absolute; left: 50%; top: 40%; pointer-events: none; }
.lvup-spark i { position: absolute; width: 14px; height: 14px; margin: -7px; background: #fff3b0; opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.lvup-spark i:nth-child(3n) { background: #ff9ec0; } .lvup-spark i:nth-child(3n+1) { background: #9fe3ff; }
.lvup.go .lvup-spark i { animation: lvSpark 1.2s ease-out forwards; }
@keyframes lvSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1.4); } }
.lvup-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(340px, 100%); color: #fff; text-align: center; }
.lvup-head { margin: 0; font-size: 44px; font-weight: 900; letter-spacing: .04em; font-style: italic;
  color: #ffd84d; text-shadow: 0 3px 0 #c76a00, 0 6px 0 rgba(0, 0, 0, .35); }
.lvup.go .lvup-head { animation: lvHead .6s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes lvHead { 0% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.lvup-face { width: 120px; height: 120px; position: relative; margin: 6px 0; }
.lvup-face .blk { position: relative !important; left: 0 !important; top: 0 !important; width: 120px !important; height: 120px !important; transform: none; }
.lvup.go .lvup-face { animation: lvJump .7s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes lvJump { 0% { transform: translateY(30px) scale(.6); opacity: 0; } 60% { transform: translateY(-18px) scale(1.08); opacity: 1; } 100% { transform: none; } }
.lvup-num { margin: 0; display: flex; align-items: center; gap: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lvup-num span { font-size: 20px; opacity: .6; }
.lvup-num i { font-style: normal; font-size: 14px; color: #ffd84d; }
.lvup-num b { font-size: 40px; color: #fff; text-shadow: 0 0 12px rgba(255, 216, 77, .8); }
.lvup.go .lvup-num b { animation: lvNum .5s .35s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes lvNum { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.lvup-title { margin: 0; min-height: 1.4em; font-size: 20px; font-weight: 900; color: #ffe9a8; }
.lvup-gacha { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 800; }
.lvup-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; animation: lvBtns .4s ease-out both; }
.lvup-btns.hidden { display: none; }
@keyframes lvBtns { from { opacity: 0; transform: translateY(12px); } }
#btnAgain:disabled { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .lvup-rays { animation: none; } }
/* お知らせの App Store ボタン(2026-10-20 iPhone アプリ配信開始) */
.ev-store { display: inline-block; margin: 10px 0 4px; padding: 9px 18px; border-radius: 12px; background: #111; color: #fff !important; font-weight: 800; font-size: 15px; text-decoration: none; }
.ev-store::before { content: ''; display: inline-block; width: 14px; height: 16px; margin-right: 8px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='3' y='1' width='8' height='14' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Ccircle cx='7' cy='12.5' r='.9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Crect x='3' y='1' width='8' height='14' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Ccircle cx='7' cy='12.5' r='.9'/%3E%3C/svg%3E") center / contain no-repeat; }
.ev-note { color: var(--muted); font-size: 12px; }
@media (prefers-color-scheme: dark) { .ev-store { background: #fff; color: #111 !important; } }

/* ===================== BGM保管庫・テーマカラー(2026-10-20) ===================== */
.vault-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 4px; padding: 10px 12px; border-radius: 14px; border: 2px solid #8560cf; background: color-mix(in srgb, #8560cf 10%, var(--panel)); color: var(--ink); font-weight: 900; font-size: 15px; }
.vault-btn small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 700; }
.bgm-card { gap: 6px; max-height: calc(100% - 16px); } /* 曲が多いと上が画面の外に切れた(2026-10-20)→ 一覧の中をスクロール */
.bgm-list { width: 100%; text-align: left; min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-gutter: stable; box-sizing: border-box; }
.bgm-list h3 { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }
.bgm-rows { display: flex; flex-direction: column; gap: 5px; }
.bgm-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 2px solid transparent; background: color-mix(in srgb, #8560cf 8%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; text-align: left; }
.bgm-row i { font-style: normal; color: #8560cf; }
.bgm-row small { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 600; }
.bgm-row em { margin-left: auto; font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #8560cf; color: #fff; }
.bgm-row.on { border-color: #8560cf; }
.bgm-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.bgm-note:empty { display: none; }
.ask-card { z-index: 1; }
.ask-msg { margin: 4px 0 6px; font-size: 16px; font-weight: 700; line-height: 1.6; text-align: center; }
.prof-body h3 small { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 2px 0 6px; }
.th-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; border: 2px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; }
.th-sw i { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, var(--sea1), var(--sea2) 40%, var(--sea3) 75%, var(--sea4)); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.th-sw.on { border-color: var(--accent); }
/* スタート画面の海の色(body[data-theme] はスタート画面にいる時だけ付く。.th-sw はマイページの見本) */
.th-sw[data-theme="none"] { --sea1: #9be3f7; --sea2: #45b4e0; --sea3: #1d6fb2; --sea4: #134d86; }
@media (prefers-color-scheme: dark) { .th-sw[data-theme="none"] { --sea1: #2c7fae; --sea2: #1a5a8a; --sea3: #0f3b63; --sea4: #08243f; } }
[data-theme="theme_2"] { --sea1: #ffe1ee; --sea2: #f7a8c8; --sea3: #d9679b; --sea4: #8e3a6e; }
[data-theme="theme_4"] { --sea1: #c9b6ff; --sea2: #8a6be0; --sea3: #4b3a9e; --sea4: #24195e; }
[data-theme="theme_6"] { --sea1: #fff6a8; --sea2: #ffd94a; --sea3: #e8a51c; --sea4: #9a6410; }
[data-theme="theme_7"] { --sea1: #d6fff0; --sea2: #8ae8cf; --sea3: #3fb6a8; --sea4: #1f7a80; }
[data-theme="theme_9"] { --sea1: #eef2f6; --sea2: #b9c4cf; --sea3: #7a8a9a; --sea4: #46525e; }
[data-theme="theme_10"] { --sea1: #b8ffd9; --sea2: #5fe0c0; --sea3: #6a5fd6; --sea4: #2a1f6e; }

/* ===================== テーマカラー「ネオン」(2026-10-20 ユーザー「ネオンは黒背景でダンゴリンもネオンカラーになる、引くラインもネオン」) =====================
   html.neon = スタート画面とゲーム画面(裏ダンゴリンは除く。ui.js の syncTheme)。盤面の canvas の画像は fish/fish-neon-*(NEON=1 node tools/fish-sprites.js)。
   ダンゴウオの見た目を変えたら fish-neon を作り直して canvasboard.js の FISH_V を上げる */
html.neon { --c0: #ff3d7f; --c0d: #c4135a; --c1: #2ee8ff; --c1d: #0aa3c2; --c2: #4dff88; --c2d: #12b84f; --c3: #fff23d; --c3d: #c9b800; --c4: #c45cff; --c4d: #8a1fd1;
  --sea1: #1a0f33; --sea2: #0d0820; --sea3: #06040f; --sea4: #000; --board: #0a0814; --cell-line: #1d1838; --bg: #05040b; }
html.neon, html.neon body { background: #05040b; }
html.neon body { background:
  radial-gradient(60% 35% at 15% 10%, rgba(196,92,255,.22), transparent 70%),
  radial-gradient(55% 30% at 90% 30%, rgba(46,232,255,.16), transparent 70%),
  radial-gradient(70% 40% at 50% 105%, rgba(255,61,127,.18), transparent 70%),
  #05040b; background-attachment: fixed; }
html.neon body::before { background: linear-gradient(rgba(120,90,255,.07) 1px, transparent 1px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(120,90,255,.07) 1px, transparent 1px) 0 0 / 28px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); animation: none; }
html.neon body::after { opacity: .25; }
html.neon .board { background-color: #0a0814; box-shadow: 0 0 0 2px rgba(196,92,255,.55), 0 0 18px rgba(196,92,255,.35); }
html.neon .hud > div { background: rgba(14,10,30,.92); color: #f4f0ff; box-shadow: 0 0 0 1.5px rgba(46,232,255,.55), 0 0 10px rgba(46,232,255,.25); }
html.neon .hud .lbl { color: #8fe9ff; }
html.neon #top .logo span { -webkit-text-stroke-color: #0a0814; filter: drop-shadow(0 0 6px var(--lc)); }
/* ダンゴウオ: 黒い体に光るふち・顔の線も光る色 */
html.neon .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) { --ink: #fff; } /* 顔は白い線(色の入った体の上で見えるように) */
html.neon .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd {
  /* 2026-10-20 ユーザー「ネオン 盤面で少し見づらい」→ 体にも色を入れて(中 55%・ふち 30%)、ふちを太く(3px) */
  background: radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill) 58%, #0b0916) 0%, color-mix(in srgb, var(--fill) 30%, #07060e) 85%) !important;
  box-shadow: inset 0 0 0 3px var(--fill), inset 0 0 8px 2px color-mix(in srgb, var(--fill) 60%, transparent), 0 0 6px 1px color-mix(in srgb, var(--fill) 80%, transparent) !important; }
html.neon .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .fin { background: #0b0916 !important; box-shadow: inset 0 0 0 1.5px var(--fill), 0 0 4px color-mix(in srgb, var(--fill) 70%, transparent) !important; }
html.neon .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .cheek { background: color-mix(in srgb, var(--fill) 45%, transparent); }
html.neon .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .eye::after { opacity: .9; }
/* 黒ダンゴウオ・石は白く光るふち(黒い背景で見えるように) */
html.neon .blk.c5 .bd { box-shadow: inset 0 0 0 2px #e9e4ff, 0 0 7px 1px rgba(233,228,255,.7) !important; }
html.neon .blk:is(.c8, .c9) .bd { box-shadow: 0 0 0 1.5px rgba(233,228,255,.6), 0 0 6px rgba(233,228,255,.35) !important; }
/* 線 */
html.neon .line .neon-glow { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor); }
html.neon .trail::before { opacity: .6; box-shadow: 0 0 14px 4px var(--tc); }
/* テーマカラーの画面の見本: ネオンは黒に光る輪 */
.th-sw.neon-sw i { background: radial-gradient(circle, #1a0f33 0 45%, #05040b 70%) !important; box-shadow: inset 0 0 0 2px #ff3d7f, 0 0 0 2px #2ee8ff, 0 0 10px 2px #c45cff !important; }
.th-sw .th-rare { font-size: 9px; color: #e0a800; letter-spacing: -1px; min-height: 11px; line-height: 11px; }
.th-sw em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
#themeList.themes { display: grid; }

/* ===================== テーマカラー「わふう」「ゆめかわ」(2026-10-20 ユーザー「夕焼けと深海もなくして、なにかいい感じのテーマ、ネオンにまけないような」。最初のギャラクシーは同日「目が痛い」「ネオンと似てる」で わふう に) =====================
   ネオンと同じしくみ: html.wa / html.yume(ui.js の FX_THEME)、盤面の画像は fish/fish-wa-* / fish-yume-*(THEME=wa node tools/fish-sprites.js …)。版は canvasboard.js の FX_V */
/* --- わふう(2026-10-20 ギャラクシーから作り直し。ユーザー「ギャラクシーは目が痛い」「ネオンと似てない?」): 和紙と青海波。ダンゴウオは つや消しの日本の色+墨のふち、線は墨のふちの筆 --- */
html.wa { --c0: #d9452b; --c0d: #a52f1c; --c1: #2b5c9e; --c1d: #1d4174; --c2: #5a9a3a; --c2d: #3f7428; --c3: #e8a400; --c3d: #b57f00; --c4: #9a5cc0; --c4d: #6e3d8e;
  --sea1: #f6efdc; --sea2: #efe4c8; --sea3: #e6d8b6; --sea4: #d9c79f; --board: #f7f0de; --cell-line: rgba(120,90,50,.16); --bg: #efe6cf; --sumi: #2a2420; }
html.wa, html.wa body { background: #efe6cf; }
html.wa body { background:
  radial-gradient(circle at 50% 100%, transparent 0 9px, rgba(43,92,158,.10) 9px 11px, transparent 11px 15px, rgba(43,92,158,.10) 15px 17px, transparent 17px 21px, rgba(43,92,158,.10) 21px 23px, transparent 23px) 0 0 / 48px 24px,
  radial-gradient(circle at 50% 100%, transparent 0 9px, rgba(43,92,158,.10) 9px 11px, transparent 11px 15px, rgba(43,92,158,.10) 15px 17px, transparent 17px 21px, rgba(43,92,158,.10) 21px 23px, transparent 23px) 24px 12px / 48px 24px,
  linear-gradient(180deg, #f6efdc 0%, #efe6cf 60%, #e6d8b6 100%); background-attachment: fixed; }
html.wa body::before { /* 上にうすい金の霞 */
  background: radial-gradient(70% 22% at 30% 6%, rgba(214,170,80,.22), transparent 70%), radial-gradient(60% 18% at 80% 12%, rgba(214,170,80,.16), transparent 70%);
  -webkit-mask-image: none; mask-image: none; animation: none; }
html.wa body::after { display: none; }
html.wa .board { background-color: #f7f0de; box-shadow: 0 0 0 2px var(--sumi), 0 0 0 5px #f7f0de, 0 0 0 6px rgba(42,36,32,.5), 0 6px 14px rgba(80,60,30,.2); }
html.wa .hud > div { background: #fbf6e8; color: var(--sumi); box-shadow: 0 0 0 1.5px var(--sumi), 0 3px 0 rgba(42,36,32,.25); }
html.wa .hud .lbl { color: #a52f1c; }
html.wa .who, html.wa .mode, html.wa .ver { color: #5a4a3a !important; text-shadow: none; }
html.wa #top .logo span { -webkit-text-stroke-color: var(--sumi); }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) { --ink: #2a2420; }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd {
  background: radial-gradient(90% 80% at 40% 30%, color-mix(in srgb, var(--fill), #fff 18%) 0%, var(--fill) 60%, var(--shade) 100%) !important;
  box-shadow: inset 0 0 0 2px var(--sumi), inset 0 3px 0 rgba(255,255,255,.25), 0 2px 0 rgba(42,36,32,.25) !important; }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd::before, html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd::after { opacity: .35; }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .cheek { background: rgba(240,120,110,.45); }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .fin { box-shadow: inset 0 0 0 1.5px var(--sumi) !important; }
html.wa .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .eye::after { opacity: .7; }
html.wa .trail::before { opacity: .3; box-shadow: none; }
.th-sw.wa-sw i { background: radial-gradient(circle at 50% 100%, transparent 0 4px, rgba(43,92,158,.35) 4px 5px, transparent 5px 7px, rgba(43,92,158,.35) 7px 8px, transparent 8px) 0 0 / 14px 8px,
  radial-gradient(circle at 50% 50%, #d9452b 0 22%, transparent 23%), #f3ead2 !important;
  box-shadow: 0 0 0 2px #2a2420, 0 2px 0 rgba(42,36,32,.3) !important; }

/* --- ゆめかわ: パステルの空・雲・星。ダンゴウオはパステル+白いふち、線はパステル+白いふち --- */
html.yume { --c0: #ff7eb0; --c0d: #e0508a; --c1: #6ec2ff; --c1d: #3d94dd; --c2: #6edcb0; --c2d: #34b085; --c3: #ffd25e; --c3d: #e0a92a; --c4: #b98cff; --c4d: #8a5ae0;
  --sea1: #ffe3f1; --sea2: #f3d6ff; --sea3: #d8ecff; --sea4: #d6fff0; --board: rgba(255,255,255,.72); --cell-line: rgba(200,160,230,.28); --bg: #fbeefe; }
html.yume, html.yume body { background: #fbeefe; }
html.yume body { background:
  radial-gradient(40% 18% at 20% 22%, rgba(255,255,255,.95), transparent 70%), radial-gradient(34% 14% at 30% 20%, rgba(255,255,255,.9), transparent 70%),
  radial-gradient(42% 16% at 82% 58%, rgba(255,255,255,.9), transparent 70%), radial-gradient(30% 12% at 72% 60%, rgba(255,255,255,.85), transparent 70%),
  linear-gradient(180deg, #ffd6ec 0%, #f0d8ff 35%, #d6e8ff 70%, #d4fbec 100%); background-attachment: fixed; }
html.yume body::before { /* きらきらの星 */
  background:
    radial-gradient(2.5px 2.5px at 10% 12%, #fff, transparent), radial-gradient(2px 2px at 88% 9%, #fff, transparent), radial-gradient(2.5px 2.5px at 70% 34%, #fff, transparent),
    radial-gradient(2px 2px at 15% 48%, #fff, transparent), radial-gradient(2.5px 2.5px at 93% 72%, #fff, transparent), radial-gradient(2px 2px at 40% 88%, #fff, transparent);
  -webkit-mask-image: none; mask-image: none; animation: galTwinkle 2.8s ease-in-out infinite alternate; }
html.yume body::after { opacity: .9; }
html.yume .board { background-color: rgba(255,255,255,.72); box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(255,126,176,.35), 0 8px 24px rgba(185,140,255,.3); }
html.yume .hud > div { background: rgba(255,255,255,.92); color: #6a4a8a; box-shadow: 0 0 0 2px rgba(255,126,176,.45), 0 3px 0 rgba(185,140,255,.35); }
html.yume .hud .lbl { color: #c47ab0; }
html.yume .who, html.yume .mode { color: #8a5ab0 !important; text-shadow: 0 1px 0 #fff; }
html.yume .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) { --ink: #6a4a8a; --fill: color-mix(in srgb, var(--c), #fff 30%); }
html.yume .blk.c0 { --c: var(--c0); } html.yume .blk.c1 { --c: var(--c1); } html.yume .blk.c2 { --c: var(--c2); } html.yume .blk.c3 { --c: var(--c3); } html.yume .blk.c4 { --c: var(--c4); }
html.yume .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd {
  background:
    radial-gradient(28% 18% at 34% 24%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill), #fff 35%) 0%, var(--fill) 55%, var(--c) 100%) !important;
  box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, #fff), 0 3px 5px -1px color-mix(in srgb, var(--c) 45%, transparent) !important; }
html.yume .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .cheek { background: rgba(255,120,170,.55); }
html.yume .blk.c5 .bd { box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 1.5px #b98cff !important; }
html.yume .line .yume-line { filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
html.yume .trail::before { opacity: .5; }
.th-sw.yume-sw i { background: radial-gradient(30% 18% at 35% 35%, #fff, transparent 70%), linear-gradient(135deg, #ffb3d4, #e0c4ff 50%, #b8e4ff 80%, #b8f5dc) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff9ec6, 0 2px 8px rgba(185,140,255,.5) !important; }
html.yume .ver { color: #a07ac0 !important; text-shadow: none; }

/* ===================== 使っているアイテム・発火材の目(2026-10-20 ユーザー「発火材使用中は必殺技の左に発火材のアイコン」「参考書も同様」「発火材つかったらダンゴリンの目が燃える、使った直後だけ」) ===================== */
.ctrl .item-on { display: flex; gap: 4px; }
.ctrl .item-on:empty { display: none; }
.item-on-ic { display: block; width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 2px 0 rgba(0,50,100,.2); box-sizing: border-box; }
.item-on-ic svg { display: block; width: 100%; height: 100%; }
.md-face.fire-eyes .eye { width: 15% !important; height: 17% !important; top: 40% !important; border: 0 !important; border-radius: 50% 50% 45% 45% !important;
  background: radial-gradient(circle at 50% 62%, #fff6c8 0 18%, #ffd23f 34%, #ff7a1a 62%, #d92b10 100%) !important;
  box-shadow: 0 0 6px 3px rgba(255,120,30,.9), 0 0 16px 7px rgba(255,60,0,.45) !important; animation: fireEye .16s ease-in-out infinite alternate !important; }
.md-face.fire-eyes .eye::after { display: none !important; }
.md-face.fire-eyes .eye::before { content: ""; position: absolute; left: -60%; bottom: 50%; width: 220%; height: 320%;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, #fff3b0 0 18%, #ffb703 38%, #ff5a1a 62%, transparent 76%);
  border-radius: 50% 50% 30% 30% / 75% 75% 25% 25%; transform-origin: 50% 100%; animation: flameUp .2s ease-in-out infinite alternate; }
.md-face.fire-eyes .eye.r::before { animation-delay: .1s; }
@keyframes fireEye { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes flameUp { from { transform: scaleY(.85) skewX(-6deg); opacity: .85; } to { transform: scaleY(1.15) skewX(6deg); opacity: 1; } }

/* ===================== 必殺技 10種(2026-10-20 ユーザーの仕様書。演出は仮 → 案を出してから作り込む) ===================== */
.skill-big { font-size: clamp(30px, 10vw, 54px); white-space: nowrap; animation: skBig .42s cubic-bezier(.2,1.6,.4,1); }
.skill-big.sk-c0 { text-shadow: 0 0 12px #ff5a4a, 0 0 28px #ffb703, 0 4px 0 #a33; }
.skill-big.sk-c1 { text-shadow: 0 0 12px #3f8fd6, 0 0 28px #9ad0ff, 0 4px 0 #246; }
.skill-big.sk-c2 { text-shadow: 0 0 12px #3fae62, 0 0 28px #b7f5c8, 0 4px 0 #264; }
.skill-big.sk-c3 { text-shadow: 0 0 12px #f2b705, 0 0 28px #fff3b0, 0 4px 0 #a70; }
.skill-big.sk-c4 { text-shadow: 0 0 12px #9b6bd6, 0 0 28px #e0c8ff, 0 4px 0 #426; }
@keyframes skBig { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
/* 場所・色を選ぶ時の帯(盤面の上) */
.skill-bar { position: absolute; left: 8px; right: 8px; bottom: calc(100% - 6px); z-index: 40; /* 盤面の上(点数の欄の上)に出して、盤面のマスはかくさない */ display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 10px; border-radius: 14px;
  background: rgba(24,18,44,.92); color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.skill-bar.hidden { display: none; }
.skill-bar b { white-space: nowrap; color: #ffd23f; }
.skill-bar span { flex: 1 1 120px; }
.skill-bar button { border: 0; border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 800; background: #fff; color: #3a2e2a; }
.skill-bar button[disabled] { opacity: .4; }
.skill-bar .sb-col { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #fff; }
.sb-col.c0 { background: var(--c0); } .sb-col.c1 { background: var(--c1); } .sb-col.c2 { background: var(--c2); } .sb-col.c3 { background: var(--c3); } .sb-col.c4 { background: var(--c4); } .sb-col.c6 { background: var(--c6); }
/* 選んだマス */
html .blk.pick.pick.pick.pick .bd { /* テーマ(ネオンなど)の ふちより強く(2026-10-21 ユーザー「テーマ変えてると色付かなかった」) */ box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffd23f, 0 0 14px 4px rgba(255,210,63,.8) !important; transform: scale(1.06); }
.blk.sk-pop .bd { animation: skPop .46s cubic-bezier(.2,1.6,.4,1) !important; }
@keyframes skPop { 0% { transform: scale(.55); filter: brightness(1.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); filter: none; } }
/* 金のシャチホコ(GOLD = 10): 金ぴか、きらっと光る */
.blk.c10 { --fill: #ffd23f; --shade: #c99000; --ink: #6a4300; }
.blk.c10 .bd { background: radial-gradient(60% 45% at 35% 26%, #fffbe0 0 18%, transparent 46%), radial-gradient(90% 80% at 40% 35%, #ffe680 0%, #ffc61a 45%, #d99a00 80%, #a86e00 100%) !important;
  box-shadow: 0 0 0 2px #fff3b0, 0 0 10px 3px rgba(255,200,40,.85), inset 0 -3px 6px rgba(140,90,0,.5) !important; animation: goldShine 1.4s ease-in-out infinite alternate !important; }
.blk.c10::after { content: ""; position: absolute; right: 10%; top: 6%; width: 26%; height: 26%; background: radial-gradient(circle, #fff 0 18%, transparent 60%), conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80%);
  border-radius: 50%; animation: goldSpark 1.4s ease-in-out infinite; pointer-events: none; z-index: 3; }
@keyframes goldShine { from { filter: brightness(1); } to { filter: brightness(1.18); } }
@keyframes goldSpark { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* 虹色(RAINBOW = 11、ダンゴプリズム): どの色ともつながる */
.blk.c11 { --fill: #fff; --shade: #ccc; --ink: #3a2e2a; }
.blk.c11 .bd { background: radial-gradient(55% 40% at 35% 26%, rgba(255,255,255,.9) 0 20%, transparent 50%), conic-gradient(from 210deg, #ff6b8b, #ffb347, #ffe066, #6fe08a, #5ab8ff, #b48cff, #ff6b8b) !important;
  box-shadow: 0 0 0 2px #fff, 0 0 8px 2px rgba(255,255,255,.75) !important; }
/* 技の効いている間(ミラージュ・流星群)の印 */
.item-on-ic.sk-on { position: relative; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #5a3fa0; }
.item-on-ic.sk-on em { position: absolute; right: -4px; bottom: -4px; min-width: 15px; height: 15px; border-radius: 8px; background: #ff5a4a; color: #fff; font-size: 10px; font-style: normal; line-height: 15px; text-align: center; }
.ctrl .skill span { font-size: 18px; }

/* ===================== テーマカラー「こくばん」「おかし」「ドット」(2026-10-21 ユーザー「つくってもらったテーマがすごくいい。ほかにもほしい」) =====================
   しくみはネオンと同じ: html.chalk / html.sweets / html.dot(ui.js の FX_THEME・EDGE_LINE)、盤面の画像は fish/fish-chalk-* など(THEME=chalk node tools/fish-sprites.js …)、版は canvasboard.js の FX_V */

/* --- こくばん: 緑の黒板と木のわく。ダンゴウオはチョークの色+白いチョークのふち、顔もチョーク --- */
/* 2026-10-21 ユーザー「黒板のダンゴリンはもっとみやすく」→ 色を こく・チョークのすじを うすく・ふちを太く・顔は 黒板の色の線 */
html.chalk { --c0: #ff6a5c; --c0d: #c94436; --c1: #4aa8ff; --c1d: #2a72c4; --c2: #6fd64a; --c2d: #3f9a28; --c3: #ffcf33; --c3d: #c99a00; --c4: #b77cff; --c4d: #8048d0;
  --sea1: #3b5e4a; --sea2: #2f4d3c; --sea3: #26402f; --sea4: #1d3326; --board: #2b4636; --cell-line: rgba(255,255,255,.07); --bg: #2c4a38; }
html.chalk, html.chalk body { background: #2c4a38; }
html.chalk body { background:
  radial-gradient(40% 18% at 22% 30%, rgba(255,255,255,.06), transparent 70%), radial-gradient(50% 20% at 78% 62%, rgba(255,255,255,.05), transparent 70%),
  radial-gradient(30% 10% at 60% 14%, rgba(255,255,255,.05), transparent 70%),
  linear-gradient(180deg, transparent calc(100% - 26px), #8a5a34 calc(100% - 26px), #6e4526 calc(100% - 8px), #4f311b 100%),
  linear-gradient(180deg, #33543f, #2a4535); background-attachment: fixed; }
html.chalk body::before { /* 消し跡のうすいすじ */
  background: repeating-linear-gradient(170deg, transparent 0 40px, rgba(255,255,255,.025) 40px 70px, transparent 70px 120px);
  -webkit-mask-image: none; mask-image: none; animation: none; }
html.chalk body::after { display: none; }
html.chalk .board { background-color: #2b4636; box-shadow: 0 0 0 5px #9a6a40, 0 0 0 7px #6e4526, 0 6px 14px rgba(0,0,0,.35); }
html.chalk .hud > div { background: rgba(30,52,40,.9); color: #f4f1e6; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
html.chalk .hud .lbl { color: #ffe07a; }
html.chalk .who, html.chalk .mode, html.chalk .ver { color: #f4f1e6 !important; text-shadow: none; }
html.chalk #top .logo span { -webkit-text-stroke-color: #f4f1e6; }
html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) { --ink: #1e3528; }
html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd {
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1.5px, transparent 1.5px 5px),
    radial-gradient(90% 80% at 40% 35%, color-mix(in srgb, var(--fill), #fff 22%) 0%, var(--fill) 55%, var(--shade) 100%) !important;
  box-shadow: inset 0 0 0 3px #fbfaf2, 0 0 0 1px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.3) !important; }
html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd::before, html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd::after { opacity: .25; }
html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .cheek { background: rgba(255,255,255,.45); }
html.chalk .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .fin { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8) !important; }
html.chalk .blk.c5 .bd { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9) !important; }
html.chalk .trail::before { opacity: .3; box-shadow: none; }
.th-sw.chalk-sw i { background: repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 1.5px, transparent 1.5px 4px), #2f4d3c !important; box-shadow: 0 0 0 3px #9a6a40, inset 0 0 0 2px rgba(255,255,255,.7) !important; }

/* --- おかし: チョコの背景とカラースプレー。ダンゴウオは あめ玉+頭に白いアイシング、線はアイシング --- */
html.sweets { --c0: #ff5c7a; --c0d: #d23a5a; --c1: #4fc3ff; --c1d: #2a92d0; --c2: #7ed957; --c2d: #4fa832; --c3: #ffc23a; --c3d: #d6921a; --c4: #b77cff; --c4d: #8650d6;
  --sea1: #7a4a30; --sea2: #5e3622; --sea3: #4a2a1a; --sea4: #3a1f12; --board: #f8e6c4; --cell-line: rgba(140,90,50,.14); --bg: #4a2a1a; }
html.sweets, html.sweets body { background: #4a2a1a; }
html.sweets body { background:
  radial-gradient(circle at 50% 0, #fff8ee 0 26px, transparent 27px) -20px -6px / 64px 44px repeat-x, /* 上からとろりとしたクリーム */
  linear-gradient(#fff8ee, #fff8ee) 0 0 / 100% 14px no-repeat,
  linear-gradient(180deg, #5e3622, #3f2315); background-attachment: fixed; }
html.sweets body::before { /* カラースプレー(止まったまま) */
  background:
    linear-gradient(35deg, transparent 46%, #ff5c7a 46% 54%, transparent 54%) 8% 22% / 14px 6px no-repeat, linear-gradient(-30deg, transparent 46%, #4fc3ff 46% 54%, transparent 54%) 82% 18% / 14px 6px no-repeat,
    linear-gradient(70deg, transparent 46%, #ffc23a 46% 54%, transparent 54%) 20% 64% / 14px 6px no-repeat, linear-gradient(-60deg, transparent 46%, #7ed957 46% 54%, transparent 54%) 90% 58% / 14px 6px no-repeat,
    linear-gradient(10deg, transparent 46%, #b77cff 46% 54%, transparent 54%) 52% 88% / 14px 6px no-repeat, linear-gradient(-15deg, transparent 46%, #fff 46% 54%, transparent 54%) 12% 90% / 14px 6px no-repeat,
    linear-gradient(50deg, transparent 46%, #ff9ec6 46% 54%, transparent 54%) 66% 40% / 14px 6px no-repeat, linear-gradient(-75deg, transparent 46%, #ffc23a 46% 54%, transparent 54%) 38% 32% / 14px 6px no-repeat;
  -webkit-mask-image: none; mask-image: none; animation: none; }
html.sweets body::after { display: none; }
html.sweets .board { background-color: #f8e6c4; box-shadow: 0 0 0 4px #c98a52, 0 0 0 8px #8a5430, 0 8px 18px rgba(0,0,0,.35); }
html.sweets .hud > div { background: #fff8ee; color: #5a2e1a; box-shadow: 0 0 0 2px #c98a52, 0 3px 0 #8a5430; }
html.sweets .hud .lbl { color: #d23a5a; }
html.sweets .who, html.sweets .mode, html.sweets .ver { color: #fff2dc !important; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
html.sweets .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) { --ink: #5a2e1a; }
html.sweets .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .bd {
  background:
    linear-gradient(30deg, transparent 40%, #ff5c7a 40% 60%, transparent 60%) 30% 9% / 9% 5% no-repeat, linear-gradient(-40deg, transparent 40%, #4fc3ff 40% 60%, transparent 60%) 58% 6% / 9% 5% no-repeat,
    linear-gradient(80deg, transparent 40%, #ffc23a 40% 60%, transparent 60%) 70% 14% / 9% 5% no-repeat,
    radial-gradient(70% 36% at 50% 0%, #fff8ee 0 70%, transparent 72%), /* 頭のアイシング */
    radial-gradient(18% 12% at 30% 40%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(90% 80% at 40% 40%, color-mix(in srgb, var(--fill), #fff 25%) 0%, var(--fill) 55%, var(--shade) 100%) !important;
  box-shadow: inset 0 -3px 5px color-mix(in srgb, var(--shade), #000 20%), 0 3px 0 rgba(90,46,26,.35) !important; }
html.sweets .blk:is(.c0, .c1, .c2, .c3, .c4):not(.nc) .cheek { background: rgba(255,110,140,.55); }
html.sweets .blk.c5 .bd { box-shadow: inset 0 0 0 2px #fff8ee !important; }
html.sweets .trail::before { opacity: .35; }
.th-sw.sweets-sw i { background: radial-gradient(70% 36% at 50% 0%, #fff8ee 0 70%, transparent 72%), radial-gradient(circle at 50% 60%, #ff5c7a 0 40%, #5e3622 42%) !important; box-shadow: 0 0 0 3px #c98a52 !important; }

/* ===================== 必殺技の演出(2026-10-21、skillfx.js。動かすのは transform と opacity だけ) ===================== */
.sfx-cut { position: absolute; left: -6%; right: -6%; top: 38%; height: 76px; z-index: 45; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cb, rgba(30,20,50,.9)) 14%, var(--cb, rgba(30,20,50,.9)) 86%, transparent); transform: skewY(-4deg); animation: sfxCutIn .26s cubic-bezier(.2,1.2,.4,1) both; }
.sfx-cut .blk { position: relative; left: auto; top: auto; transform: none; flex: none; width: 64px; height: 64px; } /* 帯の中に並べる(前は 帯の左はし=画面の外に置かれて 切れていた。2026-10-21) */
.sfx-cut.out { animation: sfxCutOut .26s ease-in forwards; }
.sfx-cut b { color: #fff; font-size: clamp(24px, 7.5vw, 34px); font-weight: 900; letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0,0,0,.35); white-space: nowrap; }
.sfx-c0 { --cb: rgba(190,40,50,.92); } .sfx-c1 { --cb: rgba(40,90,190,.92); } .sfx-c2 { --cb: rgba(30,140,70,.92); } .sfx-c3 { --cb: rgba(200,140,0,.92); } .sfx-c4 { --cb: rgba(110,60,180,.92); }
@keyframes sfxCutIn { from { transform: skewY(-4deg) translateX(-110%); } to { transform: skewY(-4deg) translateX(0); } }
@keyframes sfxCutOut { to { transform: skewY(-4deg) translateX(110%); opacity: .4; } }
.sfx-ring { position: absolute; z-index: 24; border-radius: 50%; border: 4px solid var(--rc); pointer-events: none; animation: sfxRing .6s ease-out forwards; }
@keyframes sfxRing { from { transform: scale(.15); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.sfx-part { position: absolute; z-index: 26; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; pointer-events: none; animation: sfxPart .75s cubic-bezier(.2,.7,.4,1) forwards; }
.sfx-part.coin { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle at 35% 30%, #fff6c8 0 25%, #ffd23f 30%, #d99a00 100%); box-shadow: 0 0 0 1.5px #b07800; }
.sfx-part.spark { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: radial-gradient(circle, #fff 0 30%, #ffd23f 45%, #ff6a3d 100%); box-shadow: 0 0 6px 2px rgba(255,140,60,.8); } /* ボマーの火花(2026-10-21) */
.sfx-boom { position: absolute; z-index: 25; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ffd23f 40%, rgba(255,90,40,.85) 60%, transparent 72%); animation: sfxBoom .5s ease-out forwards; }
@keyframes sfxBoom { 0% { transform: scale(.3); opacity: 1; } 60% { transform: scale(2.2); opacity: .9; } 100% { transform: scale(2.8); opacity: 0; } }
.sfx-part.dust { background: rgba(140,120,110,.75); width: 10px; height: 10px; }
@keyframes sfxPart { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
.blk.sfx-drop { animation: sfxDrop .42s cubic-bezier(.55,0,1,.6) both; }
@keyframes sfxDrop { from { transform: translateY(-520px); } to { transform: translateY(0); } }
.blk.sfx-shiver .bd { animation: sfxShiver .1s linear 5 !important; }
@keyframes sfxShiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px) scale(1.06); } 75% { transform: translateX(3px) scale(1.06); } }
.sfx-mirror { position: absolute; left: calc(50% - 3px); top: -2%; width: 6px; height: 104%; z-index: 24; pointer-events: none; border-radius: 3px;
  background: linear-gradient(180deg, transparent, #fff 20%, #bfe6ff 50%, #fff 80%, transparent); box-shadow: 0 0 14px 4px rgba(170,220,255,.8); animation: sfxMirror .9s ease-out forwards; }
@keyframes sfxMirror { 0% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.sfx-mirror.h { left: -2%; top: calc(50% - 3px); width: 104%; height: 6px; background: linear-gradient(90deg, transparent, #fff 20%, #bfe6ff 50%, #fff 80%, transparent); animation-name: sfxMirrorH; }
@keyframes sfxMirrorH { 0% { transform: scaleX(0); opacity: 0; } 30% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.board.mirage-on.mirage-h::after { left: 0; right: 0; top: calc(50% - 1px); bottom: auto; width: auto; height: 2px; } /* 上下の鏡(2026-10-21) */
.board.mirage-on::after { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; z-index: 3; pointer-events: none; background: rgba(190,230,255,.65); box-shadow: 0 0 8px 2px rgba(170,220,255,.5); }
.board.sfx-shuffle { animation: sfxShuffle .42s ease-in-out; }
@keyframes sfxShuffle { 0%, 100% { transform: none; } 25% { transform: rotate(-1.5deg) scale(.985); } 75% { transform: rotate(1.5deg) scale(.985); } }
.sfx-star { position: absolute; z-index: 24; width: 90px; height: 4px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4) 40%, #fff 92%, #fff6c8);
  box-shadow: 0 0 8px 2px rgba(255,246,200,.7); transform-origin: 100% 50%; animation: sfxStar .8s ease-in both; }
@keyframes sfxStar { from { transform: translate(-60px, -40px) rotate(32deg); opacity: 0; } 15% { opacity: 1; } to { transform: translate(140px, 320px) rotate(32deg); opacity: 0; } }
.board.meteor-on::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(1.5px 1.5px at 20% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 62% 4%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 12%, #fff, transparent); opacity: .9; }
.sfx-chain { position: absolute; z-index: 24; pointer-events: none; box-sizing: border-box; border-radius: 50%; border: 3px dashed rgba(255,255,255,.95); box-shadow: 0 0 0 2px rgba(80,70,90,.6); animation: sfxChainIn .3s ease-out both; }
.sfx-chain.break { animation: sfxChainBreak .4s ease-in forwards; }
@keyframes sfxChainIn { from { transform: scale(1.6); opacity: 0; } to { transform: scale(.92); opacity: 1; } }
@keyframes sfxChainBreak { 40% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1.5) rotate(25deg); opacity: 0; } }
.sfx-pillar { position: absolute; top: -4%; height: 108%; z-index: 24; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,222,90,.9) 30%, #fffbe0 50%, rgba(255,222,90,.9) 70%, transparent);
  transform-origin: 50% 100%; animation: sfxPillar 1s ease-out forwards; }
@keyframes sfxPillar { 0% { transform: scaleY(0) scaleX(.4); opacity: 0; } 35% { transform: scaleY(1) scaleX(1); opacity: 1; } 100% { transform: scaleY(1) scaleX(.2); opacity: 0; } }
.sfx-beam { position: absolute; top: 0; z-index: 24; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95)); box-shadow: 0 0 10px 3px rgba(255,255,255,.6);
  transform-origin: 50% 0; animation: sfxBeam .7s ease-out both; }
@keyframes sfxBeam { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.sfx-fan { position: absolute; z-index: 25; pointer-events: none; border-radius: 50%; background: conic-gradient(#ff6b8b, #ffb347, #ffe066, #6fe08a, #5ab8ff, #b48cff, #ff6b8b); opacity: .85; animation: sfxFan .55s ease-out forwards; }
@keyframes sfxFan { from { transform: scale(.3) rotate(0deg); opacity: .9; } to { transform: scale(2.2) rotate(120deg); opacity: 0; } }
.sfx-vortex { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #120a26 0 12%, rgba(90,40,160,.55) 30%, rgba(150,90,220,.25) 55%, transparent 70%), conic-gradient(from 0deg, transparent, rgba(190,140,255,.35), transparent 30%, rgba(190,140,255,.35) 50%, transparent 65%, rgba(190,140,255,.35) 85%, transparent);
  animation: sfxVortexIn .3s ease-out both, sfxSpin 1.1s linear infinite; }
.sfx-vortex.out { animation: sfxVortexOut .28s ease-in forwards; }
@keyframes sfxVortexIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes sfxVortexOut { to { opacity: 0; transform: scale(.1) rotate(180deg); } }
@keyframes sfxSpin { to { transform: rotate(360deg); } }
.blk.sfx-suck { transition: transform .33s cubic-bezier(.5,0,.7,1) !important; transform: translate(calc(var(--x) + var(--sx)), calc(var(--y) + var(--sy))) scale(.72) !important; }
.sfx-area { position: absolute; z-index: 24; pointer-events: none; box-sizing: border-box; border: 3px solid var(--rc); border-radius: 8px; box-shadow: 0 0 0 2px #fff, 0 0 16px 4px var(--rc); animation: sfxArea .9s ease-out both; }
@keyframes sfxArea { 0% { transform: scale(1.25); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.sfx-flag { position: absolute; z-index: 26; width: 24px; height: 34px; pointer-events: none; animation: sfxFlag .38s cubic-bezier(.5,0,.8,1.4) both; }
.sfx-flag::before { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 34px; background: #6b4a2a; border-radius: 2px; }
.sfx-flag::after { content: ""; position: absolute; left: 6px; top: 2px; width: 18px; height: 13px; background: var(--rc); clip-path: polygon(0 0, 100% 50%, 0 100%); }
@keyframes sfxFlag { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
.blk.sfx-flip .bd { animation: sfxFlip .34s ease-in-out !important; }
@keyframes sfxFlip { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
/* 演出のおためし(?skilldemo=1): ゲーム中の右上に10個のボタン */
#skillDemo { position: fixed; right: 6px; top: 6px; z-index: 60; display: none; grid-template-columns: repeat(2, auto); gap: 4px; padding: 6px; border-radius: 12px; background: rgba(20,16,40,.86); }
body.playing.sk-demo #skillDemo { display: grid; }
#skillDemo small { grid-column: 1 / -1; color: #ffd23f; font-size: 10px; font-weight: 800; text-align: center; }
#skillDemo button { border: 0; border-radius: 8px; padding: 5px 7px; font: inherit; font-size: 11px; font-weight: 800; color: #fff; }
#skillDemo button.c0 { background: #c8323e; } #skillDemo button.c1 { background: #2f6fd0; } #skillDemo button.c2 { background: #2a9a52; } #skillDemo button.c3 { background: #c28a00; } #skillDemo button.c4 { background: #7a46c4; }
body.playing.sk-demo.sk-aim #skillDemo { display: none; } /* 帯を出している間は かくす(前は 表示の決まりの方が強くて かくれなかった) */
.line .mirror-line { filter: drop-shadow(0 0 4px rgba(150,210,255,.9)); } /* ミラージュの鏡の線(2026-10-21) */

/* 流星群(2026-10-21 作り直し): 引いた線の跡・流れ星・くずれる */
html .blk.mt-mark.mt-mark.mt-mark.mt-mark .bd { box-shadow: 0 0 0 3px #fff6c8, 0 0 12px 4px rgba(255,236,150,.9) !important; filter: brightness(1.12); }
.sfx-mfall { position: absolute; z-index: 30; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; background: #fffbe6; box-shadow: 0 0 10px 4px #ffe680, 0 -40px 18px 2px rgba(255,236,150,.35);
  animation: sfxMFall linear both; }
.sfx-mfall::before { content: ""; position: absolute; left: 3px; bottom: 6px; width: 6px; height: 90px; border-radius: 3px; background: linear-gradient(0deg, #fff6c8, rgba(255,236,150,0)); }
@keyframes sfxMFall { from { transform: translateY(0); } to { transform: translateY(var(--fy)); } }
.blk.mt-crumble { animation: mtCrumble .42s ease-in forwards !important; }
@keyframes mtCrumble { 0% { transform: translate(var(--x), var(--y)) scale(1.1); filter: brightness(1.8); } 100% { transform: translate(var(--x), calc(var(--y) + 18px)) scale(.3) rotate(25deg); opacity: 0; } }
.sfx-part.star { background: #fff3a0; width: 7px; height: 7px; box-shadow: 0 0 6px 2px rgba(255,236,150,.9); }
/* ミラージュの反対側: 鏡が割れるように(2026-10-21 ユーザー「反対側がくずれる演出がない」) */
.blk.mr-crumble .bd { animation: mrCrumble .5s ease-in forwards !important; }
@keyframes mrCrumble { 0% { filter: brightness(1.9) hue-rotate(160deg); transform: scale(1.12); } 35% { filter: brightness(1.6); transform: scale(1.05) skewX(-8deg); } 100% { filter: brightness(1.2); transform: scale(.2) rotate(-35deg); opacity: 0; } }
html .blk.pick-bomb.pick-bomb.pick-bomb.pick-bomb .bd { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e53935, 0 0 14px 4px rgba(229,57,53,.8) !important; transform: scale(1.06); } /* ボマーで選んだ子(2026-10-21) */
html .blk.bomb.bomb.bomb .bd { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #e53935, 0 0 10px 2px rgba(229,57,53,.7) !important; animation: bombPulse 1s ease-in-out infinite; } /* ボマーの爆弾(赤ふち、色はそのまま。2026-10-21) */
@keyframes bombPulse { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff5a4f, 0 0 16px 5px rgba(255,80,60,.85); } }
.blk.bh-pull { transition: transform .3s ease-out !important; transform: translate(calc(var(--x) + var(--sx)), calc(var(--y) + var(--sy))) scale(.86) !important; } /* ブラックホールの長押し中(2026-10-21) */

/* マイページの「メインとサブ」(2026-10-21) */
#growthBox h4 { margin: 8px 0 4px; font-size: 13px; color: var(--ink); text-align: left; }
#growthBox h4 small, #growthBox h3 small { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }
.gw-row { display: grid; grid-template-columns: 16px auto 44px 1fr; align-items: center; gap: 4px 8px; padding: 6px 8px; margin: 3px 0; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 2px solid transparent; text-align: left; }
.gw-row.on { border-color: #e8546c; }
.gw-row b { font-size: 13px; white-space: nowrap; }
.gw-row small { grid-column: 2 / -1; font-size: 10px; color: var(--muted); }
.gw-lv { font-size: 12px; font-weight: 900; color: #e8772b; }
.gw-dot { width: 14px; height: 14px; border-radius: 50%; }
.gw-dot.c0 { background: #f04a57; } .gw-dot.c1 { background: #3f8fd6; } .gw-dot.c2 { background: #3fae62; } .gw-dot.c3 { background: #f2c230; } .gw-dot.c4 { background: #9b6bd6; }
.gw-bar { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.gw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb703, #e8772b); }
.gw-row.sub { grid-template-columns: 22px auto 52px 1fr; }
.gw-row.sub.on { border-color: #2e9e7c; }
.gw-btns { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.gw-btns button { border: 0; border-radius: 8px; padding: 4px 7px; font: inherit; font-size: 11px; font-weight: 800; background: #2e9e7c; color: #fff; }
.gw-btns .gw-candy { background: #ff6fa3; }
.gw-btns button[disabled] { opacity: .4; }
.gw-btns em { font-style: normal; font-size: 10px; font-weight: 800; color: #2e9e7c; align-self: center; }
.gw-more { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.gw-row.sub { grid-template-columns: 22px auto 1fr; }
.gw-row.sub .gw-btns { grid-column: 1 / -1; }
.gw-btns button { white-space: nowrap; }

/* ===================== きせかえ(2026-10-21 ユーザー「頭・目元・首元」。ui.js の dressFace が .blk に <i class="kz kz-頭など kz-名前"> を足す) ===================== */
.blk .kz { position: absolute; z-index: 6; pointer-events: none; display: block; }
/* 頭 */
.blk .kz-ribbon { right: 4%; top: -6%; width: 42%; height: 26%; transform: rotate(18deg);
  background: radial-gradient(circle at 50% 50%, #c43c74 0 14%, transparent 15%), linear-gradient(#ff6fa3, #ff6fa3);
  clip-path: polygon(0 0, 45% 38%, 55% 38%, 100% 0, 100% 100%, 55% 62%, 45% 62%, 0 100%); filter: drop-shadow(0 1px 0 #c43c74); }
.blk .kz-flower { left: 14%; top: -4%; width: 72%; height: 20%;
  background: radial-gradient(circle at 10% 60%, #ff9ec6 0 13%, transparent 14%), radial-gradient(circle at 30% 40%, #ffe066 0 13%, transparent 14%), radial-gradient(circle at 50% 30%, #ff6fa3 0 14%, transparent 15%),
    radial-gradient(circle at 70% 40%, #8fd3ff 0 13%, transparent 14%), radial-gradient(circle at 90% 60%, #b98cff 0 13%, transparent 14%), radial-gradient(ellipse 50% 22% at 50% 70%, #5aa84a 0 80%, transparent 82%); }
.blk .kz-halo { left: 22%; top: -14%; width: 56%; height: 16%; border-radius: 50%; border: 3px solid #ffd23f; box-sizing: border-box; box-shadow: 0 0 6px 2px rgba(255,220,90,.8), inset 0 0 4px rgba(255,240,180,.9); }
.blk .kz-crown { left: 26%; top: -16%; width: 48%; height: 28%; background: linear-gradient(#ffe066, #e0a800);
  clip-path: polygon(0 100%, 0 30%, 22% 60%, 50% 0, 78% 60%, 100% 30%, 100% 100%); filter: drop-shadow(0 1px 0 #a87800); }
/* 目元(目は top 44%、左右 20% の所) */
.blk .kz-round { left: 11%; top: 36%; width: 78%; height: 28%; background: linear-gradient(#3a2e2a, #3a2e2a) 50% 40% / 18% 9% no-repeat; }
.blk .kz-round::before, .blk .kz-round::after { content: ""; position: absolute; top: 0; width: 38%; height: 100%; border-radius: 50%; border: 3px solid #3a2e2a; box-sizing: border-box; background: rgba(255,255,255,.18); }
.blk .kz-round::before { left: 3%; } .blk .kz-round::after { right: 3%; }
.blk .kz-sun { left: 10%; top: 38%; width: 80%; height: 20%;
  background: linear-gradient(#1e1e28, #3a3a50) 4% 0 / 40% 100% no-repeat, linear-gradient(#1e1e28, #3a3a50) 96% 0 / 40% 100% no-repeat, linear-gradient(#1e1e28, #1e1e28) 50% 30% / 20% 14% no-repeat; border-radius: 6px; }
.blk .kz-sun::after { content: ""; position: absolute; left: 10%; top: 18%; width: 14%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.55); }
.blk .kz-heart::before, .blk .kz-heart::after { content: ""; position: absolute; top: 0; width: 42%; height: 100%; background: #ff4f8b;
  clip-path: polygon(50% 100%, 0 38%, 8% 10%, 28% 0, 50% 16%, 72% 0, 92% 10%, 100% 38%); }
.blk .kz-heart { left: 10%; top: 36%; width: 80%; height: 26%; }
.blk .kz-heart::before { left: 2%; } .blk .kz-heart::after { right: 2%; }
/* 首元(体の下の方) */
.blk .kz-bow { left: 31%; top: 76%; width: 38%; height: 18%; background: radial-gradient(circle at 50% 50%, #b8232f 0 16%, transparent 17%), linear-gradient(#e53945, #e53945);
  clip-path: polygon(0 0, 42% 35%, 58% 35%, 100% 0, 100% 100%, 58% 65%, 42% 65%, 0 100%); }
.blk .kz-scarf { left: 12%; top: 74%; width: 76%; height: 14%; border-radius: 8px; background: repeating-linear-gradient(90deg, #3f8fd6 0 18%, #fff 18% 26%); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.blk .kz-scarf::after { content: ""; position: absolute; right: 12%; top: 70%; width: 18%; height: 110%; border-radius: 3px; background: repeating-linear-gradient(0deg, #3f8fd6 0 30%, #fff 30% 42%); transform: rotate(-12deg); }
.blk .kz-bell { left: 40%; top: 76%; width: 20%; height: 20%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8 0 18%, #ffd23f 30%, #c99a00 100%); box-shadow: 0 1px 0 #8a6a00; }
.blk .kz-bell::after { content: ""; position: absolute; left: 30%; top: 55%; width: 40%; height: 12%; border-radius: 2px; background: #6a4a00; }
/* マイページのきせかえの選び */
.kz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 3px 0; }
.kz-row b { font-size: 12px; min-width: 3em; text-align: left; }
.kz-pick { border: 2px solid transparent; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.kz-pick.on { border-color: #ff6fa3; background: color-mix(in srgb, #ff6fa3 14%, transparent); }
.gw-btns .gw-learn { background: #b5651d; }
.gw-row.sub.locked { opacity: .85; }
.gw-row.sub.locked b { color: var(--muted); }
/* すずは 黄色のダンゴリンでも見えるように ふちと赤いひも(2026-10-21) */
.blk .kz-bell { box-shadow: 0 0 0 1.5px #6a4a00, 0 1px 0 #6a4a00; }
.blk .kz-bell::before { content: ""; position: absolute; left: -90%; top: -26%; width: 280%; height: 22%; border-radius: 4px; background: #e53945; z-index: -1; box-shadow: 0 1px 0 #a8232f; }
.blk .kz-bell { top: 83%; } .blk .kz-bell::before { top: -8%; height: 18%; } /* ひもが口にかからないように */
/* きせかえ +2(2026-10-21): ねこみみ・メダル */
.blk .kz-cat::before, .blk .kz-cat::after { content: ""; position: absolute; top: 0; width: 30%; height: 100%; background: linear-gradient(#ffb3c9 0 45%, #6b5a52 45%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.blk .kz-cat { left: 14%; top: -12%; width: 72%; height: 28%; }
.blk .kz-cat::before { left: 0; transform: rotate(-14deg); } .blk .kz-cat::after { right: 0; transform: rotate(14deg); }
.blk .kz-medal { left: 38%; top: 80%; width: 24%; height: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6c8 0 16%, #ffcf33 34%, #c99a00 100%); box-shadow: 0 0 0 1.5px #8a6a00; }
.blk .kz-medal::before { content: ""; position: absolute; left: 15%; top: -55%; width: 70%; height: 60%; background: linear-gradient(90deg, #e53945 0 33%, #fff 33% 66%, #3f8fd6 66%); clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); z-index: -1; }
.blk .kz-medal::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: #a87800; line-height: 1; }
.blk .kz-cat::before, .blk .kz-cat::after { background: radial-gradient(ellipse 32% 48% at 50% 78%, #ffa8c2 0 92%, transparent 95%), #fff6ee; }

/* サブの画面(2026-10-21) */
.waza-hiden { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 900; font-size: 14px; }
.waza-hiden small { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 700; }
.gw-row.sub .gw-desc { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); }
.vault-btn.waza-btn { border-color: #2e9e7c; background: color-mix(in srgb, #2e9e7c 10%, var(--panel)); }

/* マイページの「メインとサブ」ボタン(2026-10-21): 題と説明を2行に */
.vault-btn.waza-btn .wb-t { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.vault-btn.waza-btn .wb-t small { margin: 2px 0 0; font-size: 11px; line-height: 1.35; }
#wazaList h4 { margin: 10px 0 4px; font-size: 13px; text-align: left; }
#wazaList h4 small { margin-left: 6px; font-size: 11px; color: var(--muted); font-weight: 600; }

/* おためしの Lv 切りかえ(2026-10-21) */
#skillDemo .sd-lv { grid-column: 1 / -1; display: flex; align-items: center; gap: 3px; }
#skillDemo .sd-lv b { font-size: 10px; color: #fff; margin-right: 2px; white-space: nowrap; }
#skillDemo .sd-l { padding: 3px 6px; background: rgba(255,255,255,.18); }
#skillDemo .sd-l.on { background: #ffd23f; color: #3a2e2a; }
.gw-btns .gw-need { font-size: 10px; color: var(--muted); align-self: center; }

/* 詰んだ時の起死回生(2026-10-21): 盤面が暗くなり、使える技のボタンが心臓の音で ドクン */
.cbc0 { --cbk: #ff5a6a; } .cbc1 { --cbk: #4fa3ff; } .cbc2 { --cbk: #4fd07a; } .cbc3 { --cbk: #ffc93a; } .cbc4 { --cbk: #b07cff; }
#game .board { transition: filter .8s ease; }
#game.stuck .board { filter: brightness(.45) saturate(.5); }
#game.stuck .ctrl .skill.ready { animation: cbBeat 1.1s infinite; z-index: 5; }
@keyframes cbBeat { 0%, 45%, 100% { transform: scale(1); } 8% { transform: scale(1.22); } 18% { transform: scale(1.04); } 28% { transform: scale(1.15); } }
.stuck-msg { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none; text-align: center; color: #fff; white-space: nowrap; animation: cbMsgIn .5s ease-out; }
.stuck-msg b { display: block; font-size: clamp(22px, 7vw, 32px); font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 16px rgba(0,0,0,.6); }
.stuck-msg small { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; opacity: .9; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.stuck-msg.hope b { color: #fff; text-shadow: 0 0 10px var(--cbk), 0 0 24px var(--cbk), 0 3px 0 rgba(0,0,0,.45); animation: cbHope 1.1s infinite; }
@keyframes cbMsgIn { from { opacity: 0; transform: translate(-50%, -30%); } }
@keyframes cbHope { 0%, 45%, 100% { transform: scale(1); } 8% { transform: scale(1.08); } 28% { transform: scale(1.05); } }
/* 押した時: 集中線+大きな顔(目が光る) */
.cb-cut, .cb-win, .cb-lose { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cb-cut { background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(0,0,0,.82) 0 5deg, color-mix(in srgb, var(--cbk) 55%, #000) 5deg 7deg); animation: cbCutIn .3s ease-out; }
.cb-cut::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 18%, rgba(0,0,0,.65) 62%); }
.cb-cut .cb-face, .cb-win .cb-face, .cb-lose .cb-face { position: relative !important; left: auto !important; top: auto !important; transform: none; width: 44px !important; height: 44px !important; flex: none; z-index: 1; } /* 大きさは ui.js の myBigFace(zoom) */
.cb-cut .cb-face { animation: cbFaceIn .45s cubic-bezier(.2,1.5,.4,1); filter: drop-shadow(0 0 18px var(--cbk)) drop-shadow(0 0 36px var(--cbk)); }
.cb-cut .cb-face .eye, .cb-cut .cb-face [class*="eye"] { box-shadow: 0 0 10px 4px #fff, 0 0 22px 8px var(--cbk); }
.cb-cut b { position: relative; z-index: 1; color: #fff; font-size: clamp(30px, 10vw, 46px); font-weight: 900; text-align: center; line-height: 1.1; text-shadow: 0 0 12px var(--cbk), 0 4px 0 rgba(0,0,0,.5); animation: cbFaceIn .45s .12s cubic-bezier(.2,1.5,.4,1) both; }
.cb-cut b small { display: block; font-size: .5em; letter-spacing: .3em; opacity: .9; }
@keyframes cbCutIn { from { opacity: 0; } }
@keyframes cbFaceIn { from { transform: scale(.3); opacity: 0; } }
.cb-cut.out, .cb-win.out, .cb-lose.out { transition: opacity .26s; opacity: 0; }
/* 起死回生!! */
.cb-win .cb-flash { position: absolute; inset: 0; background: #fff; animation: cbFlash .6s ease-out forwards; }
@keyframes cbFlash { from { opacity: .95; } to { opacity: 0; } }
.cb-win b { position: relative; z-index: 2; font-size: clamp(44px, 15vw, 72px); font-weight: 900; color: #fff6c8; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 0 6px #fff, 0 0 18px var(--cbk), 0 0 36px var(--cbk), 0 5px 0 #a35d00; animation: cbWin .7s cubic-bezier(.2,1.7,.4,1); }
.cb-win .cb-face { animation: cbJump .55s .35s ease-out 2 both; }
@keyframes cbWin { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } }
@keyframes cbJump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px); } }
/* むねん… */
.cb-lose { background: rgba(10,14,30,.55); animation: cbCutIn .4s ease-out; }
.cb-lose .cb-face { filter: grayscale(.6) brightness(.8); animation: cbSad 1.4s ease-out forwards; }
.cb-lose b { color: #cfd6ea; font-size: clamp(24px, 8vw, 34px); font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
@keyframes cbSad { 0% { transform: translateY(0) rotate(0); } 60%, 100% { transform: translateY(14px) rotate(-12deg) scaleY(.92); } }
/* 結果のバッジ */
.cb-badge { display: inline-block; margin: 4px auto 0; padding: 3px 14px; border-radius: 999px; background: linear-gradient(90deg, #ffb703, #fb5607); color: #fff; font-weight: 900; font-size: 15px; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.cb-badge.hidden { display: none; }
#skillDemo .sd-stuck { background: #333; color: #ffd166; font-weight: 800; }

.sfx-area-x { border-color: transparent; box-shadow: none; } /* 十字などの形は 四角いわくを出さない(2026-10-21) */