/* =================================================================
   WAN-COCO ポップ！  style.css
   確認版4 までの6層の上書きを、最終的に効いていた値だけで一本化したもの。
   見た目・タイミングは確認版4と同一。

   目次
     1. 土台（ページ・ボタン共通）
     2. ヘッダー
     3. レイアウト・左側（PC表示のみ）
     4. プレイパネル・HUD
     5. 盤面・ピース
     6. ピースの状態アニメーション（消去・落下・生成・変換）
     7. 下部（スコア・特殊ピース案内）
     8. モーダル
     9. 演出レイヤー（#fx・全画面）
    10. キーフレーム
    11. レスポンシブ
    12. 動きを減らす設定
   ================================================================= */

/* ---------- 1. 土台 ---------- */
:root {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  color: #53341e;
  background: #20bafa;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background: radial-gradient(ellipse at 85% 5%, #fff7bd 0, transparent 40%),
    linear-gradient(155deg, #11b5fb 0%, #73dfff 55%, #b7ef75 100%);
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; border: 0; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #df8226; outline-offset: 3px; }
button:disabled { cursor: default; }
button:active { transform: translateY(2px); }

/* ---------- 2. ヘッダー ---------- */
.topbar {
  height: 84px; max-width: 1160px; margin: auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 18px; letter-spacing: 1.5px; font-weight: 900;
  text-decoration: none; color: #fff; text-shadow: 0 2px 0 #286a9b;
}
.brand b { font-size: 15px; letter-spacing: 0; }
.brandmark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  font-size: 25px; color: #ffdc2c;
  background: linear-gradient(#a2642d, #713912);
  box-shadow: inset 0 2px #ffe8a0, 0 3px #4e301f;
}
.tools { display: flex; gap: 7px; }
.iconbtn, #sound {
  background: linear-gradient(#fff, #ffedb8); color: #74401d;
  border: 2px solid #c98b37; box-shadow: 0 3px #865023;
}
.iconbtn { width: 42px; height: 42px; border-radius: 50%; font-size: 21px; position: relative; }
#sound { width: 72px; border-radius: 18px; font-size: 14px; font-weight: 900; }

/* ---------- 3. レイアウト・左側（PC表示のみ） ---------- */
.layout {
  display: grid; grid-template-columns: 380px 450px; gap: 70px;
  justify-content: center; padding: 20px 28px 36px;
}
.companion { padding-top: 23px; position: relative; }
.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: #245276; }
h1 { font-size: 47px; line-height: 1.38; letter-spacing: -1.5px; margin: 25px 0 8px; color: #55361f; text-shadow: 0 2px #fff9; }
h1 span { color: #f41882; }
.mascot { overflow: hidden; border-radius: 80px 80px 30px 30px; margin-top: 18px; height: 215px; }
.mascot img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; }
.side-note { margin: 30px 20px 0; }
.side-note b { font-size: 17px; }
.side-note p { font-size: 14px; line-height: 1.85; color: #245276; margin: 8px 0; }
.chapter {
  display: flex; justify-content: space-between; margin: 25px 20px; padding-top: 18px;
  font-size: 12px; letter-spacing: .6px; color: #245276; border-top: 1px solid #4a9cbd;
}
.chapter b { font-size: 12px; }

/* ---------- 4. プレイパネル・HUD ---------- */
.play {
  max-width: 450px; width: 100%; border-radius: 30px; padding: 19px 20px 17px;
  background: linear-gradient(#fffdf2, #fff7e0); border: 2px solid #fff4c8;
  box-shadow: 0 6px 0 #b8762c, 0 18px 45px #13609044;
}
.stagebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.stagebtn { display: flex; align-items: center; gap: 7px; background: transparent; font-size: 14px; font-weight: 700; padding: 3px; color: #81471e; }
.stagebtn strong { font-size: 20px; }
.gridicon { font-size: 24px; color: #81471e; }
.textbtn { background: transparent; color: #81471e; font-size: 14px; padding: 8px 0; }

/* スマホ表示のみのキャラクター帯（PCでは非表示） */
.mobile-dogs { display: none; }

.hud {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-radius: 18px; margin-bottom: 15px; padding: 13px 18px;
  background: linear-gradient(#fff2b4, #ffe378); box-shadow: inset 0 2px #fff, 0 2px #dba040;
}
.hudlabel { font-size: 14px; font-weight: 700; color: #75471e; display: block; margin-bottom: 6px; }
.goals { flex: 1; }
#targets { display: flex; gap: 15px; }
.target { display: flex; align-items: center; gap: 5px; font-size: 19px; font-weight: 900; }
.target.done { opacity: .45; }
.mini {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  border: 1px solid #fff6; box-shadow: inset 0 -3px 0 #0002;
}
.mini .dogface { width: 100%; height: 100%; }
.moves { border-left: 1px solid #d4a343; padding-left: 19px; min-width: 65px; text-align: center; }
.moves strong { font-size: 32px; line-height: 1; font-weight: 900; color: #cc3760; }
.moves > span:last-child { font-size: 12px; margin-left: 3px; }
.moves .hudlabel { margin-bottom: 4px; }
.moves.low strong { color: #d91830; }

/* ---------- 5. 盤面・ピース ---------- */
.boardwrap {
  position: relative; aspect-ratio: 1; border-radius: 20px; padding: 9px; isolation: isolate;
  background: #593486; outline: 2px solid #9756cc;
  box-shadow: inset 0 3px 5px #26103c88, 0 5px 0 #362059;
}
#board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; width: 100%; height: 100%; }

/* 1マス = <button class="tile cN [special 種類]"> */
.tile {
  padding: 0; border-radius: 10px; position: relative; display: grid; place-items: center;
  border: 1px solid #ffffff65;
  box-shadow: inset 0 2px 1px #fff6, inset 0 -3px #0001, 0 2px 1px #210e3633;
  touch-action: manipulation; overflow: hidden;
  transition: filter .1s, transform .18s cubic-bezier(.34, 1.56, .64, 1); /* 離したときに少し弾んで戻る */
}
.tile:hover { filter: brightness(1.08); }

/* 色（c0=ピンク肉球 / c1=黄色骨 / c2=青フード皿 / c3=紫クッキー / c4=緑・現在どのステージでも未使用） */
.c0 { background: linear-gradient(#efa0bf, #df749f); }
.c1 { background: linear-gradient(#f4df91, #e5c264); }
.c2 { background: linear-gradient(#99d5ed, #64add3); }
.c3 { background: linear-gradient(#c8abe6, #a481cc); }
.c4 { background: #25d47d; }

/* 特殊ピースのマス（色番号は保持しているが、背景は種類ごとの共通色） */
.tile.special {
  background: linear-gradient(#fffce6, #ffda69); border: 2px solid #fff;
  box-shadow: inset 0 -3px #eaae3033, 0 1px 3px #584e3744;
}
.tile.rainbow { background: conic-gradient(#ff4486, #ffca16, #25d47d, #20b9ff, #a651ff, #ff4486); }
.tile.plane { background: linear-gradient(#e2ffff, #64d7ff); border-color: #fff; }
/* ドッキングできる特殊ピース（クウ・ラン・リン・レインボー）：指で隣へ動かせるよう、画面のスクロールより先にピースが動きを受け取る */
.tile.special { touch-action: none; }

/* 通常ピースの絵 */
.dogface {
  width: 86%; height: 86%; display: block; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  filter: saturate(.78) drop-shadow(0 1px 1px #49213933);
}
.dog0 { background-image: url('paw-v3.webp'); }
.dog1 { background-image: url('bone-v3.webp'); }
.dog2 { background-image: url('food-v3.webp'); }
.dog3 { background-image: url('cookie-round-v4.webp'); }

/* 特殊ピースの絵（盤面・案内・演出で共通） */
.special-art {
  width: 95%; height: 95%; display: block; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; background-position: center;
  filter: drop-shadow(0 2px 1px #0003);
}
.art-row, .art-col { background-image: url('kuu-rocket-v3.webp'); }
.art-row { transform: rotate(90deg); }
.art-plane { background-image: url('ran-plane-v3.webp'); }
.art-bomb { background-image: url('rin-bomb-v3.webp'); }
.art-rainbow { background-image: url('rainbow.webp'); }

/* ---------- 6. ピースの状態アニメーション ----------
   落下・補充・シャッフル後の出現は app.mjs の settle() / appear()（Web Animations）で付ける。
   押している間：.pressing。通常消去：.pop（沈んだ形から短くつぶれて消える）。
   同じマスに重なった場合は後に書いたものが勝つ（.nudge → .pop、created/converted → shuffle → quartet → power-pop）。 */
.tile.pressing { transform: translateY(1px) scale(.91); transition-duration: .07s; transition-timing-function: ease-out; }
.tile.nudge { animation: nudge .25s; }
.tile.pop { animation: soft-pop .18s cubic-bezier(.3, 0, .6, 1) forwards; }
/* 通常消し：一瞬ふくらむ → ポンッと弾ける → 消える（波の遅れは app.mjs の popWave() が animation-delay で指定） */
.tile.n-pop { animation: n-pop .15s cubic-bezier(.3, 0, .6, 1) both; }
/* 通常消しの小さな粒（少しだけ、短く） */
.n-bit {
  position: absolute; z-index: 5; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 1.5px;
  pointer-events: none; box-shadow: 0 0 3px #fff9; opacity: 0;
  animation: n-bit .26s ease-out both;
}
/* 落下中だけ、盤面の上端から入ってくるピースを枠の内側で隠す（左右・下の影は切らない） */
#board.settling { clip-path: inset(-3px -30px -30px -30px); }
.created-glow { animation: create-piece .48s ease-out both !important; }
.converted-glow { animation: convert-piece .38s ease-out both !important; }
.ran-convert { animation: ran-convert .32s ease-out both !important; }
/* クウ・ランのライン消去：1マスずつ「ポン！」と弾ける（一瞬膨らむ → パッと弾ける → 消える）。通常消去の .pop とは別の動き */
.line-pop { animation: line-pop .26s cubic-bezier(.25, .6, .4, 1) forwards !important; }
/* 弾けたマスから広がる小さな輪 */
.pop-ring {
  position: absolute; z-index: 6; border-radius: 22%; pointer-events: none; transform: translate(-50%, -50%) scale(.6);
  border: 2px solid #fffbe6; box-shadow: 0 0 6px #fff3b8b0;
  animation: pop-ring .3s ease-out forwards;
}
.boardwrap.line-thud { animation: line-thud .16s both; }
/* ランの横一列消去：通過したマス・GO！の風が届いたマスが光って砕ける */
.ran-break { animation: ran-break .26s cubic-bezier(.3, 0, .7, 1) forwards !important; }
/* レインボーのパァーン！：全マスの四角い縁（外周の線）だけが一斉にキラッと光る。マスの中は明るくしない */
.tile.rb-edge { animation: rb-edge .09s ease-out forwards !important; }
.tile.rb-edge-out { animation: rb-edge-out .2s ease-out both !important; }
.shuffle-cell { animation: shuffle-cell .24s ease-in both !important; }
.quartet-glow { animation: quartet-glow .46s ease-out both !important; }
.power-pop { animation: power-crush .38s ease-out forwards !important; }
.kuu-break { animation: kuu-break .26s cubic-bezier(.3, 0, .7, 1) forwards !important; }

/* ---------- 7. 下部（スコア・特殊ピース案内） ---------- */
.scoreline {
  display: flex; justify-content: space-between; align-items: center; gap: 5px;
  margin: 18px 2px 17px; font-size: 12px; color: #745435; letter-spacing: 1px;
}
.scoreline b { font-size: 17px; letter-spacing: 0; color: #93431e; margin-left: 5px; }
#feedback { font-size: 12px; letter-spacing: 0; text-align: right; color: #745435; }
.powerguide {
  display: flex; justify-content: space-around; padding: 11px 7px; border-radius: 14px;
  background: linear-gradient(#ffeebd, #ffdf83); box-shadow: inset 0 2px #fff;
}
.powerguide > div { display: grid; grid-template-columns: 27px auto; column-gap: 3px; align-items: center; }
.powerguide b { font-size: 14px; line-height: 1.2; }
.powerguide small { font-size: 12px; color: #69431f; grid-column: 2; }
.power {
  display: grid; place-items: center; grid-row: span 2; width: 27px; height: 30px;
  border-radius: 9px; background: #ffbf39; box-shadow: inset 0 -3px 0 #0002;
}
.power.plane { background: #37baff; }
.power.bomb { background: #ffba3c; }
.power.rainbow { background: conic-gradient(#f5827a, #f4d061, #7cd5af, #66bce9, #ad8cec, #f5827a); }
.powerguide .special-art { filter: none; }
.savehint { display: block; text-align: center; font-size: 12px; color: #766650; }

/* ---------- 8. モーダル ---------- */
dialog {
  border: 3px solid #ffc74d; border-radius: 27px; padding: 32px 25px;
  max-width: 390px; width: calc(100% - 38px); max-height: 90svh; text-align: center;
  color: #69401e; background: linear-gradient(#fffdf4, #fff2cd);
  box-shadow: 0 6px #b97928, 0 25px 90px #12365d66;
}
dialog::backdrop { background: #15325288; backdrop-filter: blur(5px); }
.close {
  position: absolute; right: 12px; top: 9px; width: 35px; height: 35px;
  font-size: 26px; background: transparent; color: #795737;
}
dialog h2 { font-size: 26px; margin: 14px 0; }
dialog p { font-size: 15px; line-height: 1.8; color: #795737; }
dialog .primary {
  display: block; width: 100%; margin-top: 20px; padding: 15px 20px; border-radius: 15px;
  font-weight: 800; font-size: 17px; color: #fff;
  background: linear-gradient(#ff63af, #f31981); box-shadow: inset 0 2px #ffa9d3, 0 4px #b40a59;
}
dialog .secondary {
  width: 100%; margin-top: 13px; padding: 12px; border-radius: 13px; font-size: 14px;
  background: #ffe4a1; color: #744b26; box-shadow: 0 2px #d8a249;
}
.medal { font-size: 48px; color: #e8ae30; letter-spacing: 4px; }
.modalimg {
  width: 240px; height: 125px; border-radius: 20px; margin-top: 5px;
  object-fit: contain; object-position: center; background: transparent;
}
.resultscore { font-size: 33px; font-weight: 900; margin: 5px 0; }

/* ステージ選択 */
.levelgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 25px; }
.levelgrid button {
  border-radius: 13px; padding: 12px 0; font-size: 20px; font-weight: 900;
  background: #ffdf7c; color: #7e411b; box-shadow: inset 0 2px #fff7, 0 3px #c88b28;
}
.levelgrid button small { display: block; font-size: 10px; letter-spacing: -2px; color: #a75500; }
.levelgrid button:disabled { opacity: .35; }
.levelgrid button.current { background: #f42d8d; color: white; }
.levelgrid button.current small { color: #fff19a; }

/* 遊び方と設定 */
.sound-settings { padding: 15px; background: #ffe9a8; border-radius: 15px; text-align: left; }
.sound-settings > label:first-child { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; }
.sound-settings input[type=range] { width: 100%; accent-color: #f31981; margin-top: 15px; }
.sound-settings .secondary { margin-top: 8px; }
.effect-label { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; margin-top: 17px; }
.effect-label input { width: 18px; height: 18px; accent-color: #f31981; }
.help-list { text-align: left; padding: 0; list-style: none; }
.help-list li { font-size: 14px; line-height: 1.8; border-bottom: 1px solid #ecc58b; padding: 12px 0; }
.help-list b { display: block; color: #91441f; }

/* ---------- 9. 演出レイヤー ----------
   #fx は盤面に重なる層。app.mjs が要素を足して、アニメーション後に消す。 */
#fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }

/* パネル・盤面の揺れ */
.play.special-kick { animation: special-kick .42s both; }
.play.combo-kick { animation: combo-kick .5s both; }
.boardwrap.shake { animation: bigshake .36s both; }
.boardwrap.combo-shake { animation: combo-shake .4s both; }
.boardwrap.kuu-shake { animation: kuu-shake .32s both; }
.boardwrap.rin-shake { animation: rin-shake .26s both; }

/* 消去の破片（通常 / 特殊発動時） */
.particle {
  position: absolute; border-radius: 3px; width: 8px; height: 8px;
  border: 1px solid #fff9; box-shadow: 0 0 5px #fff9;
  animation: burst .55s ease-out forwards;
}
.heavy-particle { width: 12px; height: 10px; border-width: 2px; }

/* 特殊ピースの溜め・発射（.single-launch）とラン飛行（.ran-flight） */
.ran-flight, .single-launch { position: absolute; z-index: 8; pointer-events: none; transform: translate(-50%, -50%); }
.single-launch { width: 104px; height: 96px; }
/* ラン：大きさは app.mjs の fly() が指定（マス幅の約0.95倍）。位置・向きは Web Animations の transform。
   回転の中心は機体の胴体（絵の縦68%）。影は盤面に落とす .ran-shadow で表し、絵には filter を掛けない。 */
.ran-flight { left: 0; top: 0; width: 44px; height: 42px; transform-origin: 50% 68%; will-change: transform, opacity; }
.ran-flight .special-art { width: 100%; height: 100%; filter: none; }
/* 飛行機雲：尾翼の後ろに付いた細い筋（機体と一緒に回る） */
.ran-trail {
  position: absolute; z-index: -1; right: 88%; top: 63%; width: 75%; height: 6%; min-height: 2px;
  border-radius: 99px; background: linear-gradient(90deg, #fff0, #ffffffc0); opacity: 0;
}
/* プロペラの回転（絵のプロペラの上に重ねた、明滅するぼかし） */
.ran-prop {
  position: absolute; left: 85%; top: 40%; width: 11%; height: 50%; border-radius: 50%;
  background: radial-gradient(ellipse, #fff8dcd0 0 30%, #ffe27a70 58%, #fff0 72%);
  animation: ran-prop .08s linear infinite alternate;
}
/* GO！：発進の瞬間に機体の後ろへ流れる風の筋と、空気の輪 */
.ran-go {
  position: absolute; z-index: 7; height: 3px; margin-top: -1.5px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #ffffff00, #ffffffd0, #ffffff00); transform: translate(-50%, 0);
  animation: ran-go .34s ease-out both;
}
.ran-go-ring {
  position: absolute; z-index: 7; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.3);
  border: 2px solid #ffffffc0; animation: ran-go-ring .34s ease-out forwards;
}
/* 盤面に落ちる影（高く飛ぶほど小さく薄く） */
.ran-shadow {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse, #1b2f5c52, #1b2f5c00 70%); will-change: transform, opacity;
}
/* クウ（単独発動）：大きさ・位置・向きは app.mjs の kuuLaunch() が Web Animations の transform で指定（マス幅の約1.15倍）。
   絵は縦向き（.art-col）。横のクウは盤面と同じ90°から始め、グッと沈む間に真上へ向き直る（発射は常に上）。
   グッ → ブルブル（炎と噴射口の光が育つ）→ 一瞬の間 → ドンッ！の順。 */
.kuu-rocket { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; will-change: transform, opacity; }
.kuu-rocket .special-art { width: 100%; height: 100%; filter: none; }
/* 噴射：ロケットの噴射口（絵の下側）から後ろへ伸びる炎。長さは transform、ゆらぎは中の i */
.kuu-flame {
  position: absolute; left: 50%; top: 68%; width: 30%; height: 85%; z-index: -1;
  transform-origin: 50% 0; opacity: 0; will-change: transform, opacity;
}
.kuu-flame i {
  position: absolute; inset: 0; border-radius: 45% 45% 50% 50% / 22% 22% 78% 78%;
  background: linear-gradient(#fffbe6, #ffe066 22%, #ff9a2e 55%, #ff5a1f00);
  transform-origin: 50% 0; animation: kuu-flicker .06s linear infinite alternate;
}
/* 噴射口の光：溜めの間に強く・大きくなり、ドンッ！で弾けて消える（大きさと濃さは Web Animations） */
.kuu-glow {
  position: absolute; left: 65%; top: 72%; width: 70%; height: 62%; z-index: -1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #ffffff 0 16%, #fff3a0e6 30%, #ffb238a6 50%, #ff7a2a00 72%);
  will-change: transform, opacity;
}
/* 溜めの火の粉 */
.kuu-ember {
  position: absolute; z-index: 9; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  pointer-events: none; background: #fff4b8; box-shadow: 0 0 4px #ffb536;
  animation: kuu-ember .3s ease-out forwards;
}
/* ドンッ！：発射地点の衝撃波（地面に広がる楕円）、噴射口の閃光、下へ散る火花 */
.kuu-ring {
  position: absolute; z-index: 7; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.2);
  border: 3px solid #fff3c4; box-shadow: 0 0 8px #ffc75a, inset 0 0 6px #ffe9a3;
  animation: kuu-ring .34s cubic-bezier(.1, .7, .3, 1) forwards;
}
.kuu-blast {
  position: absolute; z-index: 9; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffef4 0 14%, #fff0a0e6 28%, #ffae3a99 46%, #ff7a2a00 68%);
  animation: kuu-blast .28s ease-out forwards;
}
.kuu-spark {
  position: absolute; z-index: 10; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 3px;
  pointer-events: none; background: linear-gradient(90deg, #ffb53600, #fff3b0 60%, #fff);
  animation: kuu-spark .3s cubic-bezier(.1, .8, .3, 1) forwards;
}
/* バンッ：壊れるマスの閃光 */
.kuu-hit {
  position: absolute; z-index: 8; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffef0 0 18%, #ffe98acc 34%, #ffb3408c 52%, #ff8a2a00 70%);
  animation: kuu-hit .22s ease-out forwards;
}
/* 光の尾：発射点から上昇するロケットの噴射口まで伸びる（長さは scaleY、基準の高さ 100px。app.mjs の kuuLaunch() が指定） */
.kuu-trail {
  position: absolute; left: 0; top: 0; z-index: 7; height: 100px; pointer-events: none; opacity: 0;
  transform-origin: 50% 100%; will-change: transform, opacity; border-radius: 50% 50% 40% 40% / 12% 12% 6% 6%;
  background: linear-gradient(to top, #ffb54700, #ffd27a99 35%, #fff3c4dd 80%, #fffef4);
  box-shadow: 0 0 8px #ffd27a88;
}
/* パァン！：盤面の上端を抜ける瞬間の小さな打ち上げの光 */
.kuu-top {
  position: absolute; z-index: 10; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffef4 0 12%, #fff3b0d9 26%, #ffc2578c 44%, #ff9a3a00 64%);
  animation: kuu-top .26s ease-out forwards;
}
/* 後ろ側のマスへ走る噴射 */
.kuu-exhaust {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 18%, #ffc445cc 40%, #ff7a2a66 58%, #ff7a2a00 72%);
  will-change: transform, opacity;
}
/* 発射点と壊れたマスから上がる煙 */
.kuu-smoke {
  position: absolute; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #ffffffd9 0 32%, #e8edf4a6 55%, #e8edf400 72%);
  animation: kuu-smoke .45s ease-out both;
}
/* リンボム（単独発動）：位置・震え・膨張は app.mjs の rinBomb() が Web Animations の transform で指定。
   大きさは盤面の絵と同じ（マス幅の95%）。 */
.rin-bomb { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; will-change: transform; }
.rin-bomb .special-art { width: 100%; height: 100%; filter: none; }
/* 熱のにじみ：爆発が近づくと本体の球が赤く光る */
.rin-heat {
  position: absolute; left: 14%; top: 42%; width: 72%; height: 56%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #ff8a3dcc 0 30%, #ff4d2a66 55%, #ff4d2a00 72%); mix-blend-mode: screen;
}
/* 導火線の火：導火線の先から付け根へ進む（位置は transform）。中の i が明滅する */
.rin-spark { position: absolute; left: 0; top: 0; width: 30%; height: 30%; opacity: 0; }
.rin-spark i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 14%, #fff3a0 26%, #ffb52ecc 44%, #ff6a1f55 60%, #ff6a1f00 72%);
  animation: rin-flicker .05s linear infinite alternate;
}
/* 導火線から散る火の粉 */
.rin-ember {
  position: absolute; z-index: 9; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  pointer-events: none; background: #fff6c2; box-shadow: 0 0 4px #ffb536;
  animation: rin-ember .3s ease-out forwards;
}
/* 破裂：爆発光・火の玉・煙・火花・ボムの破片 */
.rin-flash, .rin-fire {
  position: absolute; z-index: 9; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
}
.rin-flash {
  background: radial-gradient(circle, #fffef2 0 12%, #fff3a6e6 24%, #ffc24ab3 40%, #ff7a2a55 56%, #ff7a2a00 70%);
  animation: rin-flash .4s cubic-bezier(.1, .7, .3, 1) forwards;
}
.rin-fire {
  background: radial-gradient(circle, #fff7c8 0 18%, #ffcf3f 34%, #ff8a2a 52%, #e8431ecc 64%, #e8431e00 72%);
  animation: rin-fire .44s ease-out forwards;
}
/* 爆風：中心から広がる熱い輪 */
.rin-wave {
  position: absolute; z-index: 9; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.15);
  border: 5px solid #ffe7a3; box-shadow: 0 0 14px #ff9d3a, inset 0 0 12px #ffd27a;
  animation: rin-wave .42s cubic-bezier(.1, .75, .3, 1) forwards;
}
.rin-smoke {
  position: absolute; z-index: 8; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #f4f1eecc 0 30%, #b9b4b199 52%, #b9b4b100 72%);
  animation: rin-smoke .7s cubic-bezier(.15, .7, .3, 1) both;
}
.rin-streak {
  position: absolute; z-index: 10; width: 16px; height: 3px; margin: -1.5px 0 0 -8px; border-radius: 3px;
  pointer-events: none; background: linear-gradient(90deg, #ffb53600, #fff3b0 60%, #fff);
  animation: rin-streak .34s cubic-bezier(.1, .8, .3, 1) forwards;
}
.rin-debris {
  position: absolute; z-index: 9; width: 9px; height: 7px; margin: -3.5px 0 0 -4.5px; pointer-events: none;
  border-radius: 2px 5px 3px 4px; background: linear-gradient(135deg, #5b5f6b, #16171b 60%); box-shadow: inset 1px 1px #ffffff40;
  animation: rin-debris .52s cubic-bezier(.15, .6, .45, 1) forwards;
}
/* レインボー（単独発動）：位置・回転・大きさは app.mjs の rainbowSweep() が Web Animations の transform で指定。 */
.rb-orb { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; will-change: transform, opacity; }
.rb-orb .special-art { position: relative; width: 100%; height: 100%; filter: none; }
/* 後光：虹色の光の輪と白い芯（光を溜める間に強くなる） */
.rb-halo {
  position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #ffffffee 0 18%, #fff7d6a0 30%, #ffffff00 58%),
    conic-gradient(#ff5f8680, #ffa33d80, #ffe04a80, #5ee28c80, #4cc4ff80, #b67cff80, #ff5f8680);
  -webkit-mask: radial-gradient(circle, #000 42%, #0000 70%); mask: radial-gradient(circle, #000 42%, #0000 70%);
}
/* 静寂の幕：盤面を少し暗くして、レインボーの光を際立たせる */
.rb-veil {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 16px;
  background: radial-gradient(ellipse at center, #2a1152cc, #12062bee);
}
/* 盤面の上から降り注ぐキラキラ（星形と丸い光の粒）。落ちる距離・横ゆれ・時間は要素ごとに指定 */
.rb-fall {
  position: absolute; z-index: 11; pointer-events: none; transform: translate(-50%, -50%);
  animation-name: rb-fall; animation-timing-function: cubic-bezier(.35, .1, .6, 1); animation-fill-mode: forwards;
}
.rb-fall-star { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.rb-fall-dot { border-radius: 50%; box-shadow: 0 0 6px #fff; }
/* パーン！の画面いっぱいの層（body 直下、画面全体に固定。盤面の枠や画面の端に収めない） */
.rb-screen { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
/* 虹の輪（1つだけ）：グルグルの始まりからパーン！まで、同じ要素が回りながら大きくなり続けて画面いっぱいになり、そのまま砕ける */
.rbx-vortex {
  position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; opacity: 0;
  /* 一周つながった虹色の帯に、白く光る頭が2つ（回ると頭が輪を追いかけて回転が見える） */
  background: conic-gradient(from 0deg, #fff0 0 17%, #fffbe8d0 24%, #ffffff 26%, #fff0 28%, #fff0 67%, #fffbe8d0 74%, #ffffff 76%, #fff0 78%),
    conic-gradient(#ff5f86, #ffa33d, #ffe04a, #5ee28c, #4cc4ff, #6f8dff, #b67cff, #ff5f86);
  -webkit-mask: radial-gradient(circle, #0000 0 47%, #000 54% 64%, #0000 71%); mask: radial-gradient(circle, #0000 0 47%, #000 54% 64%, #0000 71%);
}
/* 輪からこぼれ、輪が砕けてできるキラキラ：回転の向きへ渦を描いて飛ぶ。外側（.rbx-fling）が渦の動き、中（.rbx-glint）が瞬きと舞い落ち */
.rbx-fling {
  position: absolute; width: 0; height: 0;
  transform: rotate(var(--a0)) translateX(var(--r0)) rotate(calc(var(--a0) * -1));
  animation: rbx-fling cubic-bezier(.12, .75, .3, 1) both;
}
.rbx-glint {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  animation-name: rbx-glint; animation-timing-function: linear; animation-fill-mode: both;
}
.rbx-star { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.rbx-dot { border-radius: 50%; box-shadow: 0 0 8px #fff; }
/* パーン！直前の「キラッ」：本体の位置に白い光の十字（位置・大きさ・透明度は rainbowSweep() が指定） */
.rb-kira {
  position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #fff 0 8%, #fffbe6cc 16%, #fff3b800 40%);
  clip-path: polygon(50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%);
}
/* 最後の短いキラッ */
.rb-star.rb-final { animation-duration: .3s; }
/* レインボー＋相棒のドッキング：盤面へ広がる虹の輪（位置・大きさ・回転は app.mjs の dockCombo() が指定） */
.cb-wave {
  position: absolute; left: 0; top: 0; z-index: 9; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: conic-gradient(#ff5f86, #ffa33d, #ffe04a, #5ee28c, #4cc4ff, #6f8dff, #b67cff, #ff5f86);
  -webkit-mask: radial-gradient(circle, #0000 0 60%, #000 65% 71%, #0000 76%); mask: radial-gradient(circle, #0000 0 60%, #000 65% 71%, #0000 76%);
}
/* 特殊ピースが現れる瞬間の小さな虹の輪 */
.cb-spark {
  position: absolute; z-index: 9; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.3);
  background: conic-gradient(#ff5f86, #ffe04a, #5ee28c, #4cc4ff, #b67cff, #ff5f86);
  -webkit-mask: radial-gradient(circle, #0000 0 55%, #000 62% 70%, #0000 76%); mask: radial-gradient(circle, #0000 0 55%, #000 62% 70%, #0000 76%);
  animation: cb-spark .34s ease-out forwards;
}
/* レインボー同士：渦が届いたマスが強く弾ける（遅れは app.mjs の rainbowFusion() が animation-delay で指定） */
.tile.cb-pop { animation: cb-pop .24s cubic-bezier(.3, 0, .6, 1) both; }
/* ダブルレインボー：左右からかかる2本の半円の虹（SVG。盤面と同じ大きさで、盤面の中央を中心に回る） */
.dr-arcs { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; overflow: visible; transform-origin: 50% 50%; will-change: transform, opacity; filter: drop-shadow(0 0 4px #ffffffb0); }
/* ダブルレインボーのプレゼント箱：大きさに合わせて font-size（app.mjs が箱の幅÷6 を指定）を基準にした em で影や艶の太さを決める。
   上面は明るく、側面と下側ははっきり暗く、角に薄い反射、下に柔らかい影。リボンは厚み（両端が濃く中央に柔らかい艶）。マット＋上品な艶 */
.gift { position: absolute; left: 0; top: 0; z-index: 13; pointer-events: none; will-change: transform, opacity; }
.gift-shadow { position: absolute; left: 6%; right: 6%; bottom: -9%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, #2a0d3a80, #2a0d3a40 55%, #2a0d3a00); }
.gift-body { position: absolute; left: 8%; right: 8%; top: 40%; bottom: 0; border-radius: 0.55em; overflow: hidden;
  background: linear-gradient(180deg, #ffc2d8 0, #ff8db6 22%, #f9679c 62%, #d9447e 100%);
  box-shadow: inset 0 0.16em 0.1em #ffe3ee, inset 0.14em 0 0.12em #ffd0e2b0, inset -0.3em 0 0.35em #b02e6699, inset 0 -0.38em 0.4em #9f245c99, 0 0.18em 0.35em #4a143066; }
.gift-body::after { content: ''; position: absolute; left: 7%; top: 9%; width: 30%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, #ffffffc0, #ffffff00); }
/* 右の側面を少し暗く（箱の角が立って見える） */
.gift-side { position: absolute; right: 0; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg, #a92a6000, #a92a6055); }
.gift-ribbon { position: absolute; left: 42%; width: 16%; top: 40%; bottom: 0;
  background: linear-gradient(90deg, #c7860a 0, #f2b51f 14%, #ffe37a 40%, #fff6c8 50%, #ffe37a 60%, #f2b51f 86%, #c7860a 100%);
  box-shadow: 0.08em 0 0.12em #7a4a0040, -0.08em 0 0.12em #7a4a0040, inset 0 -0.3em 0.3em #a86e0055; }
.gift-lid { position: absolute; left: 1%; right: 1%; top: 23%; height: 21%; border-radius: 0.5em; will-change: transform, opacity;
  background: linear-gradient(180deg, #ffd6e5 0, #ffa3c5 30%, #fa79a8 75%, #e25a91 100%);
  box-shadow: inset 0 0.16em 0.1em #fff0f6, inset 0.12em 0 0.1em #ffe2ed, inset -0.25em 0 0.3em #c0377299, inset 0 -0.18em 0.2em #b0306a88, 0 0.22em 0.3em #5a1f3a55; }
.gift-lid::before { content: ''; position: absolute; left: 42%; width: 16%; top: 0; bottom: 0;
  background: linear-gradient(90deg, #c7860a 0, #f2b51f 14%, #ffe37a 40%, #fff6c8 50%, #ffe37a 60%, #f2b51f 86%, #c7860a 100%); }
.gift-bow { position: absolute; left: 50%; top: -108%; width: 58%; height: 122%; transform: translateX(-50%); }
.gift-bow::before, .gift-bow::after { content: ''; position: absolute; bottom: 4%; width: 49%; height: 90%; border-radius: 50% 50% 44% 44%;
  background: radial-gradient(70% 60% at 50% 35%, #fff9d0 0, #ffe36b 32%, #f7bb27 70%, #cf8d0c 100%);
  box-shadow: inset 0 -0.18em 0.2em #a8700a88, inset 0 0.12em 0.1em #ffffffcc, 0 0.08em 0.15em #6a4a0055; }
.gift-bow::before { left: 0; transform: rotate(-28deg); }
.gift-bow::after { right: 0; transform: rotate(28deg); }
/* パッカーン！：箱の中から出る暖かい光線（細く短く、数本だけ） */
.gift-beams { position: absolute; left: 0; top: 0; z-index: 12; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, #fff1b8cc 0 7deg, #fff1b800 7deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, #000a 40%, #0000 68%); mask: radial-gradient(circle, #000 0 18%, #000a 40%, #0000 68%); }
/* ダブルレインボー：虹の先頭の光の玉（と短い光の尾）、交点の光・光線・輪、全消しの太い虹色の衝撃リングと光の輪 */
.dr-tip { position: absolute; left: 0; top: 0; z-index: 13; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #ffffff 0 16%, #fff7d6dd 30%, #fff0b000 66%); }
.dr-flare { position: absolute; left: 0; top: 0; z-index: 14; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #ffffff 0 12%, #fffbe2e0 24%, #ffe9f400 62%); }
.dr-rays { position: absolute; left: 0; top: 0; z-index: 13; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, #ffffffee 0 4deg, #ffffff00 4deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, #0008 34%, #0000 62%); mask: radial-gradient(circle, #000 0 10%, #0008 34%, #0000 62%); }
.dr-ring { position: absolute; left: 0; top: 0; z-index: 14; border-radius: 50%; pointer-events: none; opacity: 0; border: 3px solid #fffbe6; box-shadow: 0 0 10px #fff3b8, inset 0 0 8px #fff3b8; }
.dr-wave { position: absolute; left: 0; top: 0; z-index: 12; border-radius: 50%; pointer-events: none; will-change: transform, opacity; opacity: 0;
  background: conic-gradient(#ff4f7e, #ff9838, #ffd23f, #3fcc7c, #33a9ee, #8d66e6, #ff4f7e);
  -webkit-mask: radial-gradient(circle, #0000 0 55%, #000 59% 67%, #0000 71%); mask: radial-gradient(circle, #0000 0 55%, #000 59% 67%, #0000 71%);
  filter: drop-shadow(0 0 6px #ffffffcc); }
.dr-shock { position: absolute; left: 0; top: 0; z-index: 11; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #ffffff00 0 50%, #fffbe8aa 56%, #ffffffee 62%, #fff6dc88 68%, #ffffff00 76%); }
/* 全消し：衝撃リングが通ったブロックが、ぷくっと膨らんで光り、小さく弾けて消える */
.tile.dr-hit { animation: dr-hit .3s cubic-bezier(.3, 0, .6, 1) both; }
.boardwrap.dr-shake { animation: dr-shake .44s both; }
/* パッカーン！の光（小さめ。画面を覆わない） */
.gift-light { position: absolute; left: 0; top: 0; z-index: 12; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fffef0 0 16%, #fff3b0cc 32%, #ffe08a00 66%); }
/* 替わったマスに残って、ゆっくり消えるキラキラ */
.rb-linger { animation: rb-linger 1.2s ease-out both; }
.boardwrap.rb-shake { animation: rb-shake .24s both; }
/* 集まる光の粒 */
.rb-gather {
  position: absolute; z-index: 11; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  pointer-events: none; box-shadow: 0 0 6px #fff; opacity: 0;
  animation: rb-gather .42s ease-in forwards;
}
/* 軌跡に残る星と光の粒 */
.rb-star {
  position: absolute; z-index: 11; pointer-events: none; transform: translate(-50%, -50%) scale(0);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: rb-twinkle .7s ease-out both;
}
.rb-dot {
  position: absolute; z-index: 11; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  pointer-events: none; box-shadow: 0 0 5px #fff; animation: rb-dot .68s ease-out both;
}
.combo-charge { animation: power-charge .36s ease-in both; }
.rainbow-charge { animation: prism-charge .36s ease-in both; }

/* 発動位置の輪・ロケットの帯 */
.shockwave {
  position: absolute; width: 55px; height: 55px; border-radius: 50%;
  border: 5px solid #ffe65d; box-shadow: 0 0 20px #ffcd52, inset 0 0 15px #fff9;
  transform: translate(-50%, -50%); animation: shock .55s ease-out both;
}
.combo-ring { border-color: #ffb82c; animation-duration: .6s; }
.rockettrail {
  position: absolute; transform: translate(-50%, -50%); border-radius: 20px;
  background: linear-gradient(90deg, transparent, #ffe165, #fff6c7, #ffe165, transparent);
  box-shadow: 0 0 15px #ffbb2c; animation: trail .38s ease-out both;
}
.rockettrail.row { width: 110%; height: 30px; left: 50% !important; }
.rockettrail.col {
  height: 110%; width: 30px; top: 50% !important;
  background: linear-gradient(transparent, #ffe165, #fff6c7, #ffe165, transparent);
}

/* 衝撃の輪（.power-flare）と破片（.power-shard） */
.power-flare {
  position: absolute; width: 220px; height: 220px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, #fffbd9 0 10%, #ffd359bb 20%, #ff842e77 35%, transparent 65%);
  border: 6px solid #ffd780; box-shadow: 0 0 35px #ffb43f88;
  animation: power-wave .65s ease-out both;
}
.power-flare.mega { width: 340px; height: 340px; border-width: 11px; }
.power-flare.jet { background: radial-gradient(#fff8d5, #ffe36388 25%, transparent 65%); }
.power-flare.prism { background: conic-gradient(#ff7899aa, #ffe777aa, #72ffceaa, #6acfffaa, #be89ffaa, #ff7899aa); border-color: #edcfff; }
.power-flare.assist {
  width: 66px; height: 66px; background: radial-gradient(#fff9, #7ae5ff88, transparent);
  border: 3px solid #b1faff; animation-duration: .4s;
}
.power-shard {
  position: absolute; width: 13px; height: 9px; pointer-events: none; z-index: 5;
  background: #ffe88c; border: 2px solid #fff5d5; box-shadow: 0 0 9px #ffd45c;
  animation: power-debris .65s ease-out forwards;
}
.power-shard.assist { width: 5px; height: 5px; background: #95f5ff; border: 0; }
.power-shard.prism { background: #d798ff; }

/* 盤面全体の光（レインボー・コンボ） */
.board-burst {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  animation: board-burst .5s ease-out both;
}
.rainbow-burst {
  background: conic-gradient(#ff399977, #ffdb3477, #2affbb66, #3bcaff77, #a349ff77, #ff399977);
  box-shadow: inset 0 0 18px #fff7;
}
.combo-burst { background: radial-gradient(ellipse, #fff9a177, transparent 72%); box-shadow: inset 0 0 30px #ff962c; }

/* 全画面（レインボーシャッフル・クリア時の紙吹雪） */
.rainbow-screen {
  position: fixed; inset: 0; pointer-events: none; z-index: 25;
  background: conic-gradient(from 40deg at 50% 60%, #ff418088, #ffe04c99, #4aefbd77, #46bcff88, #bc67ff99, #ff418088);
  animation: rainbow-wash 1s ease-out both;
}
.rainbow-screen i {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fffde4; box-shadow: 0 0 22px 5px #fff9;
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
  animation: star-spark .7s ease-out both;
}
.confetti {
  position: fixed; width: 9px; height: 13px; top: -20px; z-index: 30; pointer-events: none;
  animation: confetti 2.1s linear forwards;
}

/* ---------- 10. キーフレーム ---------- */
/* ピース */
@keyframes nudge { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
@keyframes soft-pop {
  0% { transform: translateY(1px) scale(.91) }
  40% { transform: translateY(2px) scale(1.1, .74); opacity: 1 }
  100% { transform: translateY(2px) scale(.3, .22); opacity: 0 }
}
@keyframes power-crush {
  0% { transform: scale(1); filter: brightness(1) }
  20% { transform: scale(.75); filter: brightness(2.2) }
  45% { transform: translateY(-8px) scale(1.25) rotate(-8deg); filter: brightness(1.6) }
  100% { transform: translateY(14px) scale(.08) rotate(30deg); opacity: 0 }
}
@keyframes create-piece {
  0% { filter: brightness(1.8); transform: scale(.6) }
  45% { filter: brightness(1.2); transform: scale(1.15) }
  100% { filter: brightness(1); transform: scale(1) }
}
@keyframes convert-piece {
  0% { filter: brightness(1.7); transform: scale(.88) }
  55% { transform: scale(1.08) }
  100% { filter: brightness(1); transform: scale(1) }
}
@keyframes shuffle-cell { to { transform: scale(.55) rotate(18deg); opacity: .2 } }
@keyframes quartet-glow {
  0% { box-shadow: inset 0 0 0 2px #fff4; transform: scale(1) }
  40% { box-shadow: inset 0 0 0 3px #fffbd2, 0 0 6px #fff2a4; transform: translateY(-3px) }
  100% { box-shadow: inset 0 0 0 2px #fff0; transform: none }
}
/* 揺れ */
@keyframes bigshake {
  10% { transform: translate(0, 4px) } 25% { transform: translate(-5px, -3px) } 45% { transform: translate(5px, 3px) }
  65% { transform: translate(-3px, 1px) } 85% { transform: translate(2px, -1px) } 100% { transform: none }
}
@keyframes combo-shake {
  12% { transform: translate(-7px, 4px) } 28% { transform: translate(7px, -4px) } 46% { transform: translate(-5px, 3px) }
  65% { transform: translate(4px, -2px) } 84% { transform: translate(-2px, 1px) } 100% { transform: none }
}
@keyframes special-kick {
  0% { transform: scale(1) } 18% { transform: translate(-5px, 5px) scale(.98) }
  38% { transform: translate(5px, -3px) scale(1.012) } 60% { transform: translate(-3px, 2px) } 100% { transform: none }
}
@keyframes combo-kick {
  15% { transform: translate(-9px, 7px) scale(.97) } 30% { transform: translate(8px, -5px) scale(1.025) }
  50% { transform: translate(-6px, 4px) } 70% { transform: translate(4px, -2px) } 100% { transform: none }
}
/* 特殊ピース */
@keyframes kuu-flicker { from { transform: scale(1, 1) } to { transform: scale(.88, .78) } }
@keyframes kuu-smoke {
  0% { transform: translate(0, 0) scale(.35); opacity: .85 }
  100% { transform: translate(var(--dx, 0), var(--dy, -10px)) scale(1.5); opacity: 0 }
}
@keyframes kuu-break {
  0% { transform: scale(1); filter: brightness(1) }
  16% { transform: scale(1.24); filter: brightness(2.4) }
  100% { transform: scale(.1) rotate(24deg); opacity: 0; filter: brightness(1.3) }
}
/* 発射の一撃：まず下へ押し込まれ、細かく戻る */
@keyframes kuu-shake {
  10% { transform: translate(0, 7px) } 28% { transform: translate(-4px, -3px) }
  48% { transform: translate(3px, 2px) } 70% { transform: translate(-1.5px, .5px) } 100% { transform: none }
}
@keyframes kuu-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0 }
}
@keyframes kuu-ring {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0 }
}
@keyframes kuu-blast {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0 }
}
@keyframes kuu-spark {
  0% { transform: translate(0, 0) rotate(var(--a)) scaleX(.4); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--a)) scaleX(1.3); opacity: 0 }
}
@keyframes kuu-top {
  0% { transform: translate(-50%, -50%) scale(.25); opacity: 1 }
  35% { transform: translate(-50%, -50%) scale(1); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0 }
}
@keyframes kuu-hit {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0 }
}
@keyframes rin-flicker { from { transform: scale(1.1) rotate(0deg) } to { transform: scale(.8) rotate(35deg) } }
@keyframes rin-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0 }
}
@keyframes rin-flash {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 1 }
  45% { opacity: .9 }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0 }
}
@keyframes rin-fire {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1 }
  35% { transform: translate(-50%, -50%) scale(1); opacity: 1 }
  100% { transform: translate(-50%, -58%) scale(1.25); opacity: 0 }
}
@keyframes rin-smoke {
  0% { transform: translate(0, 0) scale(.4); opacity: 0 }
  12% { opacity: .9 }
  100% { transform: translate(var(--dx), var(--dy)) scale(2.1); opacity: 0 }
}
@keyframes rin-streak {
  0% { transform: translate(0, 0) rotate(var(--a)) scaleX(.4); opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--a)) scaleX(1.4); opacity: 0 }
}
@keyframes rin-debris {
  0% { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 1 }
  80% { opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(calc(var(--s) * .6)); opacity: 0 }
}
@keyframes rin-shake {
  12% { transform: translate(0, 7px) } 32% { transform: translate(-5px, -4px) }
  55% { transform: translate(3px, 2px) } 78% { transform: translate(-1.5px, -.5px) } 100% { transform: none }
}
@keyframes rin-wave {
  0% { transform: translate(-50%, -50%) scale(.15); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0 }
}
@keyframes rb-twinkle {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1 }
  30% { transform: translate(-50%, -50%) scale(1.25) rotate(25deg); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(0) rotate(70deg); opacity: .6 }
}
@keyframes rb-gather {
  0% { transform: translate(0, 0) scale(.6); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: .9 }
}
@keyframes rb-fall {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(0); opacity: 0 }
  12% { transform: translate(calc(-50% + var(--sway) * .3), calc(-50% + var(--fall) * .1)) scale(1) rotate(40deg); opacity: 1 }
  50% { transform: translate(calc(-50% - var(--sway) * .4), calc(-50% + var(--fall) * .5)) scale(.95) rotate(140deg); opacity: 1 }
  80% { opacity: .9 }
  100% { transform: translate(calc(-50% + var(--sway)), calc(-50% + var(--fall))) scale(.5) rotate(260deg); opacity: 0 }
}
@keyframes rbx-fling {
  0% { transform: rotate(var(--a0)) translateX(var(--r0)) rotate(calc(var(--a0) * -1)) }
  100% { transform: rotate(var(--a1)) translateX(var(--r1)) rotate(calc(var(--a1) * -1)) }
}
/* 飛び出した直後は大きく光り、瞬きながら下へ舞い落ちて消える */
@keyframes rbx-glint {
  0% { transform: translate(-50%, -50%) scale(1.2) rotate(0); opacity: 1 }
  15% { transform: translate(calc(-50% + var(--sway) * .3), calc(-50% + var(--fall) * .1)) scale(.75) rotate(50deg); opacity: .8 }
  35% { transform: translate(calc(-50% - var(--sway) * .3), calc(-50% + var(--fall) * .3)) scale(1.05) rotate(110deg); opacity: 1 }
  60% { transform: translate(calc(-50% + var(--sway) * .6), calc(-50% + var(--fall) * .6)) scale(.7) rotate(170deg); opacity: .8 }
  100% { transform: translate(calc(-50% + var(--sway)), calc(-50% + var(--fall))) scale(.2) rotate(240deg); opacity: 0 }
}
/* 縁の光：もとの影（内側のツヤと下の影）はそのまま、内側の細い線と外側の細い光だけを足す */
@keyframes rb-edge {
  from { border-color: #ffffff65; box-shadow: inset 0 2px 1px #fff6, inset 0 -3px #0001, 0 2px 1px #210e3633, inset 0 0 0 0 #fffbe600, 0 0 0 0 #fff3b800 }
  to { border-color: #ffffff; box-shadow: inset 0 2px 1px #fff6, inset 0 -3px #0001, 0 2px 1px #210e3633, inset 0 0 0 2.5px #fffbe6, 0 0 7px 1.5px #fff3b8e6 }
}
@keyframes rb-edge-out {
  from { border-color: #ffffff; box-shadow: inset 0 2px 1px #fff6, inset 0 -3px #0001, 0 2px 1px #210e3633, inset 0 0 0 2.5px #fffbe6, 0 0 7px 1.5px #fff3b8e6 }
  to { border-color: #ffffff65; box-shadow: inset 0 2px 1px #fff6, inset 0 -3px #0001, 0 2px 1px #210e3633, inset 0 0 0 0 #fffbe600, 0 0 0 0 #fff3b800 }
}
@keyframes rb-linger {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 1 }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(25deg); opacity: 1 }
  100% { transform: translate(-50%, -60%) scale(.2) rotate(90deg); opacity: 0 }
}
@keyframes rb-shake {
  20% { transform: translate(0, 3px) } 45% { transform: translate(-2px, -2px) } 70% { transform: translate(1px, 1px) } 100% { transform: none }
}
@keyframes rb-dot {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(0, var(--dy)) scale(.3); opacity: 0 }
}
@keyframes power-charge {
  0% { transform: translate(-50%, -50%) scale(.7) }
  55% { transform: translate(-50%, -58%) scale(1.7) }
  85% { transform: translate(-50%, -50%) scale(1.5); filter: brightness(1.4) }
  100% { transform: translate(-50%, -50%) scale(1.9); filter: brightness(2) }
}
@keyframes prism-charge {
  from { transform: translate(-50%, -50%) scale(.6) }
  to { transform: translate(-50%, -75%) scale(2.2) rotate(30deg); filter: brightness(1.6) drop-shadow(0 0 20px #e685ff) }
}
@keyframes ran-go {
  0% { transform: translate(-50%, 0) scaleX(.3); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translate(calc(-50% + var(--dx)), 0) scaleX(1.2); opacity: 0 }
}
@keyframes ran-go-ring {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0 }
}
@keyframes line-pop {
  0% { transform: scale(1); filter: brightness(1); opacity: 1 }
  38% { transform: scale(1.2); filter: brightness(1.35); opacity: 1 }
  52% { transform: scale(1.24); filter: brightness(1.7); opacity: 1 }
  100% { transform: scale(.12) rotate(14deg); filter: brightness(1.2); opacity: 0 }
}
@keyframes dr-hit {
  0% { transform: scale(1); filter: brightness(1) }
  30% { transform: scale(1.28); filter: brightness(1.9) saturate(1.2) }
  100% { transform: scale(.05) rotate(25deg); opacity: 0; filter: brightness(1.3) }
}
@keyframes dr-shake {
  10% { transform: translate(0, 6px) } 25% { transform: translate(-5px, -3px) } 40% { transform: translate(4px, 3px) }
  58% { transform: translate(-3px, -1px) } 76% { transform: translate(1.5px, 1px) } 100% { transform: none }
}
@keyframes cb-spark {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.3) rotate(-120deg); opacity: 0 }
}
@keyframes cb-pop {
  0% { transform: scale(1); filter: brightness(1) }
  35% { transform: scale(1.22); filter: brightness(1.6) }
  100% { transform: scale(.1) rotate(20deg); opacity: 0; filter: brightness(1.2) }
}
@keyframes n-pop {
  0% { transform: scale(1); filter: brightness(1) }
  38% { transform: scale(1.13); filter: brightness(1.22) }
  100% { transform: scale(.2); opacity: 0; filter: brightness(1.1) }
}
@keyframes n-bit {
  0% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0 }
}
@keyframes pop-ring {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0 }
}
@keyframes line-thud { 30% { transform: translate(0, 2px) } 65% { transform: translate(0, -1px) } 100% { transform: none } }
@keyframes ran-break {
  0% { transform: scale(1); filter: brightness(1) }
  22% { transform: scale(1.18); filter: brightness(1.9) }
  100% { transform: scale(.1) rotate(-22deg); opacity: 0; filter: brightness(1.2) }
}
@keyframes ran-prop { from { transform: scaleY(1); opacity: .95 } to { transform: scaleY(.6); opacity: .5 } }
@keyframes ran-convert {
  0% { filter: brightness(1.18); transform: scale(.94) }
  100% { filter: brightness(1); transform: scale(1) }
}
/* 演出レイヤー */
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(180deg); opacity: 0 } }
@keyframes shock {
  0% { transform: translate(-50%, -50%) scale(.25); opacity: 1 }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0 }
}
@keyframes trail { 0% { opacity: 1; scale: .2 } 100% { opacity: 0; scale: 1.1 } }
@keyframes power-wave {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.15) }
  35% { opacity: .8 }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) }
}
@keyframes power-debris {
  from { transform: translate(-50%, -50%) scale(1.5) }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(.2); opacity: 0 }
}
@keyframes board-burst { 0% { opacity: 0; transform: scale(.86) } 25% { opacity: .9 } 100% { opacity: 0; transform: scale(1.04) } }
@keyframes rainbow-wash { 0% { opacity: 0; transform: scale(.9) } 25%, 50% { opacity: 1 } 100% { opacity: 0; transform: scale(1.1) } }
@keyframes star-spark { 0% { transform: scale(0) } 40% { transform: scale(1.5) } 100% { transform: translateY(-40px) scale(0) } }
@keyframes confetti { to { transform: translate(var(--drift), 110vh) rotate(540deg) } }

/* ---------- 11. レスポンシブ ---------- */
@media (max-width: 920px) {
  .layout { gap: 28px; grid-template-columns: 290px minmax(320px, 430px); }
  h1 { font-size: 39px; }
  .topbar { padding: 0 25px; }
}
@media (max-width: 720px) {
  .topbar { height: 57px; padding: 0 18px; }
  .brand { font-size: 14px; gap: 6px; }
  .brand b { display: none; }
  .brandmark { width: 28px; height: 28px; font-size: 21px; }
  .iconbtn { width: 34px; height: 34px; font-size: 17px; } /* #sound は幅・文字サイズを維持 */
  .layout { display: block; padding: 2px 10px max(16px, env(safe-area-inset-bottom)); }
  .companion { display: none; }
  .play { margin: 0 auto; border-radius: 23px; padding: 11px 12px 12px; max-width: 444px; }
  .stagebar { margin-bottom: 3px; }
  .mobile-dogs {
    display: flex; align-items: center; gap: 10px; height: 69px; overflow: hidden;
    margin-bottom: 8px; border-radius: 13px;
    background: linear-gradient(#b4eeff, #66d1ff); box-shadow: inset 0 2px #fff9;
  }
  .mobile-dogs img { width: 125px; height: 69px; object-fit: contain; object-position: center; background: transparent; }
  .mobile-dogs span { display: block; font-size: 12px; color: #225483; letter-spacing: 1px; margin-bottom: 4px; }
  .mobile-dogs b { font-size: 14px; line-height: 1.45; color: #523a27; }
  .hud { padding: 9px 12px; margin-bottom: 10px; border-radius: 13px; }
  .moves { padding-left: 12px; min-width: 55px; }
  .moves strong { font-size: 28px; }
  #targets { gap: 9px; }
  .target { font-size: 17px; gap: 3px; }
  .boardwrap { padding: 7px; border-radius: 16px; }
  #board { gap: 4px; }
  .tile { border-radius: 8px; }
  .scoreline { margin: 13px 0 11px; }
  .powerguide { padding: 8px 3px; }
  .shockwave { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .scoreline { align-items: flex-start; gap: 8px; }
  #feedback { max-width: 61%; }
}
@media (max-width: 350px) {
  .target { font-size: 14px; }
}

/* ---------- 12. 動きを減らす設定 ----------
   app.mjs 側でも演出を出さないが、CSS 側でも止めておく。 */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; transition: none !important; }
  .shockwave, .rockettrail, .ran-flight, .ran-shadow, .ran-go, .ran-go-ring, .pop-ring, .single-launch,
  .kuu-rocket, .kuu-exhaust, .kuu-smoke, .kuu-ember, .kuu-ring, .kuu-blast, .kuu-spark, .kuu-hit,
  .rin-bomb, .rin-ember, .rin-flash, .rin-fire, .rin-wave, .rin-smoke, .rin-streak, .rin-debris,
  .rb-orb, .rb-star, .rb-dot, .rb-veil, .rb-gather, .rb-fall, .rb-screen,
  .power-flare, .power-shard, .board-burst, .rainbow-screen { display: none; }
  .boardwrap.shake { animation: none; }
  .kuu-trail, .kuu-top { display: none; }
  .n-bit { display: none; }
  .tile.n-pop { animation: none !important; }
  .cb-wave, .cb-spark { display: none; }
  .tile.cb-pop { animation: none !important; }
  .dr-arcs, .gift, .gift-light, .gift-beams, .dr-tip, .dr-flare, .dr-rays, .dr-ring, .dr-wave, .dr-shock { display: none; }
  .tile.dr-hit, .boardwrap.dr-shake { animation: none !important; }
  .boardwrap.combo-shake, .boardwrap.kuu-shake, .boardwrap.rin-shake, .boardwrap.rb-shake, .boardwrap.line-thud, .play.special-kick, .play.combo-kick,
  .tile.pop, .power-pop, .kuu-break, .ran-break, .line-pop, .created-glow, .converted-glow, .ran-convert, .tile.rb-edge, .tile.rb-edge-out, .shuffle-cell, .quartet-glow { animation: none !important; }
}

/* V36 visual review — surfaces only. V36 button structure, input and timing retained.
   Material direction: satin enamel, soft upper-left light, colored edge depth. */
:root { background: #359aa7; color: #513f38; }
body {
  background:
    radial-gradient(ellipse at 88% 0%, #f6ebbeaa 0%, transparent 40%),
    radial-gradient(ellipse at 0% 45%, #91dcd04d 0%, transparent 58%),
    linear-gradient(160deg, #3c9ba9 0%, #79c9ce 52%, #b3d6a7 100%);
}
.brand { color: #fff9e9; text-shadow: 0 2px 3px #275d6d70; }
.brandmark {
  color: #ffe2a2;
  background: radial-gradient(ellipse at 30% 12%, #e0b57077, transparent 68%), linear-gradient(#a47747, #785335);
  box-shadow: inset 0 1px 1px #fff2c7bb, inset 0 -3px 4px #5b3b3555, 0 3px 0 #5c493b, 0 5px 9px #285d6840;
}
.iconbtn, #sound {
  color: #6d4d39; border-color: #d1b17d;
  background: radial-gradient(ellipse at 25% 0%, #fffef6, transparent 74%), linear-gradient(#f9f0da, #eddbb4);
  box-shadow: inset 0 1px 1px #fffdf6, inset 0 -2px 3px #b9965c28, 0 3px 0 #aa8a60, 0 5px 9px #33697524;
}
.play {
  background: radial-gradient(ellipse at 0% 0%, #fffdf6, transparent 65%), linear-gradient(#fcf5e7, #f2e6cd);
  border-color: #fff9e9;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #a38b6240, 0 5px 0 #c2ad84, 0 9px 0 #618c8670, 0 18px 35px #21546333;
}
.stagebtn, .gridicon, .textbtn { color: #6c5544; }
.mobile-dogs {
  background: radial-gradient(ellipse at 22% 12%, #eefaf08c, transparent 70%), linear-gradient(130deg, #aedcd8, #7cbec6);
  border: 1px solid #649cae55;
  box-shadow: inset 0 1px 1px #fffdfac9, inset 0 -3px 6px #45809025, 0 2px 2px #96845b22;
}
.mobile-dogs span { color: #375f68; letter-spacing: .3px; }
.mobile-dogs b { color: #364d50; text-shadow: 0 1px #ffffff55; }
.mobile-dogs img { filter: drop-shadow(0 2px 2px #4a78854d); }
.hud {
  background: radial-gradient(ellipse at 22% 0%, #fff8dfaa, transparent 78%), linear-gradient(#f4deb0, #e9c78f);
  border: 1px solid #d2b385;
  box-shadow: inset 0 1px 1px #fff8e9, inset 0 -3px 6px #ae875b25, 0 3px 0 #c2a279, 0 5px 8px #80664418;
}
.hudlabel { color: #6c553b; font-weight: 800; }
.target { color: #604a32; font-variant-numeric: tabular-nums; text-shadow: 0 1px #fff9; }
.mini {
  border-color: #ffffff55; border-radius: 8px;
  box-shadow: inset 0 1px 2px #fff6, inset 0 -2px 3px #59394630, 0 2px 2px #9d6d3938;
}
.moves { border-left-color: #b9956859; }
.moves strong { color: #b74864; font-variant-numeric: tabular-nums; text-shadow: 0 1px #fff9, 0 2px 1px #8d5c3510; }
.boardwrap {
  background: radial-gradient(ellipse at 30% 8%, #615779, transparent 90%), linear-gradient(#4d4262, #3d334e);
  outline-color: #b0a0bb;
  box-shadow: inset 0 2px 2px #f6e7ff33, inset 0 5px 9px #211b3560, inset 0 -2px 1px #d5bfd93b, 0 5px 0 #30273f, 0 7px 0 #bfacc4, 0 12px 14px #5d4f592e;
}
.tile {
  border: 1px solid #ffffff36;
  background: radial-gradient(ellipse at 32% 8%, var(--tile-light) 0%, transparent 68%), linear-gradient(170deg, var(--tile-top) 5%, var(--tile-mid) 53%, var(--tile-bottom) 100%);
  box-shadow: inset 0 1px 2px #fff5, inset 1px 0 2px #ffffff1f, inset -1px -2px 3px var(--tile-edge), inset 0 -4px 4px #351c321b, 0 3px 0 var(--tile-edge), 0 4px 3px #18122965;
}
.c0 { --tile-light: #f5bbca66; --tile-top: #e8a1b7; --tile-mid: #dd86a4; --tile-bottom: #c36a8c; --tile-edge: #a65679; }
.c1 { --tile-light: #fff0c266; --tile-top: #efd894; --tile-mid: #e4c778; --tile-bottom: #cfad60; --tile-edge: #b18d48; }
.c2 { --tile-light: #c4edf466; --tile-top: #96cfe2; --tile-mid: #76b9d4; --tile-bottom: #569bbd; --tile-edge: #407e9e; }
.c3 { --tile-light: #decaed66; --tile-top: #bea5d8; --tile-mid: #ac8bc7; --tile-bottom: #926eaf; --tile-edge: #74548f; }
.c4 { --tile-light: #caf1d366; --tile-top: #91d4a1; --tile-mid: #76b88c; --tile-bottom: #569971; --tile-edge: #3d7756; }
.mini.c0, .mini.c1, .mini.c2, .mini.c3, .mini.c4 {
  background: radial-gradient(ellipse at 30% 5%,var(--tile-light),transparent 70%),linear-gradient(170deg,var(--tile-top),var(--tile-mid) 55%,var(--tile-bottom));
}
/* Keep V36's single button + passive icon structure: no extra painted child layers. */
/* Decorative art and transient effects must never become hit-test targets. */
.tile > [aria-hidden], #fx, #fx * { pointer-events: none; }
.dogface { width: 84%; height: 84%; }
.mini .dogface { width: 100%; height: 100%; }
.tile.special {
  background: radial-gradient(ellipse at 28% 3%, #fff7d0 0%, transparent 63%), linear-gradient(155deg, #efd39a, #d6b169 68%, #bd924d);
  border: 1.5px solid #fff1c5;
  box-shadow: inset 0 1px 2px #fff9, inset -1px -3px 4px #90663255, 0 3px 0 #a7783f, 0 4px 4px #1e132a70;
}
.tile.plane { background: radial-gradient(ellipse at 30% 0%,#e8f4df,transparent 75%),linear-gradient(150deg,#a6d5d0,#67b1bd 67%,#4b889f); border-color: #dcefe5; box-shadow: inset 0 1px 2px #fff8,inset -1px -3px 4px #37688755,0 3px 0 #38677f,0 4px 4px #1e132a70; }
.tile.rainbow {
  background: radial-gradient(ellipse at 26% 10%, #aaa1bd 0%, #716680 44%, #4b3b63 100%);
  border-color: #f1d8ab;
  box-shadow: inset 0 1px 2px #fff7, inset 0 -3px 5px #28163899, 0 3px 0 #ad8550, 0 4px 5px #15102485;
}
.art-rainbow { background-image: url('rainbow-premium.webp'); }
.tile .art-rainbow { width: 94%; height: 94%; filter: drop-shadow(0 2px 1px #21143099); }
.rb-orb .special-art { filter: drop-shadow(0 3px 2px #2b1c3e66); }
.powerguide {
  background: radial-gradient(ellipse at 40% 0%, #fff7dfaa, transparent 85%), linear-gradient(#eedcbc, #e2c99e);
  border: 1px solid #cab48f88;
  box-shadow: inset 0 1px 1px #fff9, inset 0 -2px 4px #ac885025, 0 2px 2px #8d734a20;
}
.power { background: linear-gradient(#f0d29a,#cca164); box-shadow: inset 0 1px 1px #fff8,inset 0 -2px 3px #805d3540,0 2px 2px #72513730; }
.power.plane { background: linear-gradient(#aad8d6,#659fae); }
.power.bomb { background: linear-gradient(#f1d8ab,#cda36d); }
.power.rainbow { background: linear-gradient(#8f819d,#5e4d76); box-shadow: inset 0 0 0 1px #f5dba077,0 2px 2px #72513730; }
.scoreline, #feedback, .savehint { color: #776250; }
.scoreline b { color: #77533b; }
dialog {
  border-color: #f5dfb0;
  background: radial-gradient(ellipse at 10% 0%,#fffdf6,transparent 70%),linear-gradient(#fcf5e7,#efdfbf);
  box-shadow: inset 0 1px 1px #fff,0 5px 0 #b99b6f,0 25px 90px #12365d66;
}
dialog .primary { background: linear-gradient(#d57596,#b84a75); box-shadow: inset 0 1px 2px #f5b9ce, inset 0 -2px 4px #79375440,0 4px #883853; }
dialog .secondary, .levelgrid button { background: linear-gradient(#edd6ad,#debd87); box-shadow: inset 0 1px #fff9,0 2px #b09268; }
.levelgrid button.current { background: linear-gradient(#d57596,#b84a75); }
.sound-settings { background: #eddabc; }

/* Real rendered gift art; existing body/lid children and animations are retained. */
.gift-body {
  display: block; left: 5%; right: auto; width: 90%; top: 34%; bottom: auto; height: 64%; border: 0; border-radius: 0;
  background: none;
  box-shadow: none; overflow: visible;
}
.gift-body::after, .gift-side, .gift-ribbon, .gift-lid::before, .gift-bow { display: none; }
.gift-lid {
  display: block; left: 3.8%; right: auto; width: 92.4%; top: 0%; height: 50.6%; border: 0; border-radius: 0;
  background: none;
  box-shadow: none; filter: drop-shadow(0 3px 2px #5b164a40);
}
.gift-shadow { left: 4%; right: 4%; bottom: -8%; height: 19%; background: radial-gradient(closest-side, #21182b99, #28173940 62%, transparent); }
.dr-arcs { filter: drop-shadow(0 4px 3px #29173755); }
.dr-ring { border-color: #fff0cc; box-shadow: 0 0 8px #f7c99e, inset 0 0 7px #f4cfb5; }
.dr-shock { box-shadow: 0 0 12px #d4b1e24d; }
@media (max-width: 350px) {
  .hud { padding-left: 10px; padding-right: 10px; gap: 6px; }
  #targets { gap: 6px; }
  .target { gap: 3px; font-size: 14px; }
  .mini { width: 22px; height: 22px; flex: 0 0 22px; }
  .moves { min-width: 45px; padding-left: 8px; flex-shrink: 0; }
  .moves strong { font-size: 26px; }
  .mobile-dogs img { width: 110px; }
  .powerguide > div { grid-template-columns: 24px auto; column-gap: 2px; }
  .power { width: 24px; height: 28px; }
}

/* Touch repair: the satin material is rasterized once and reused across cells.
   Keep V36's button, passive icon, hit area, hover/press and animation rules.
   No per-cell pseudo-elements, positioned icon layers, or live inset shadows. */
.tile.c0 { --piece-surface: url('satin-pink-v1.webp'); }
.tile.c1 { --piece-surface: url('satin-gold-v1.webp'); }
.tile.c2 { --piece-surface: url('satin-blue-v1.webp'); }
.tile.c3 { --piece-surface: url('satin-violet-v1.webp'); }
.tile.special { --piece-surface: url('satin-special-v1.webp'); }
.tile.plane { --piece-surface: url('satin-plane-v1.webp'); }
.tile.rainbow { --piece-surface: url('satin-rainbow-v1.webp'); }
.tile.c0, .tile.c1, .tile.c2, .tile.c3, .tile.special, .tile.plane, .tile.rainbow {
  background: var(--piece-surface) center / 100% 100% no-repeat;
  background-origin: border-box;
  border-color: transparent;
  box-shadow: 0 3px 0 var(--tile-edge), 0 4px 3px #18122965;
}
.tile.special { box-shadow: 0 3px 0 #a7783f, 0 4px 4px #1e132a70; }
.tile.plane { box-shadow: 0 3px 0 #38677f, 0 4px 4px #1e132a70; }
.tile.rainbow { box-shadow: 0 3px 0 #ad8550, 0 4px 5px #15102485; }

/* Final polish: cached surfaces; no new DOM, pseudo-elements, input or layer changes. */
.tile.c0 { --piece-surface: url('satin-pink-v2.webp'); --tile-edge:#a15276; }
.tile.c1 { --piece-surface: url('satin-gold-v2.webp'); --tile-edge:#ac8643; }
.tile.c2 { --piece-surface: url('satin-blue-v2.webp'); --tile-edge:#397793; }
.tile.c3 { --piece-surface: url('satin-violet-v2.webp'); --tile-edge:#705086; }
.tile.special { --piece-surface: url('satin-special-v2.webp'); }
.tile.plane { --piece-surface: url('satin-plane-v2.webp'); }
.tile.rainbow { --piece-surface: url('satin-rainbow-v2.webp'); }
body { background: radial-gradient(ellipse at 88% 0%,#eee5bd66,transparent 42%),linear-gradient(160deg,#428f9e,#83bfc2 55%,#b0c9ad); }
.mobile-dogs { background:linear-gradient(130deg,#b5d7d3,#88b6be); }
.hud { background:radial-gradient(ellipse at 25% 0%,#fff8df55,transparent 78%),linear-gradient(#eddbb7,#dfc295);box-shadow:inset 0 1px 1px #fff8e9,inset 0 -2px 4px #ae875b20,0 2px 0 #c2a279; }
.boardwrap { outline-color:#a495ae;box-shadow:inset 0 2px 2px #f6e7ff22,inset 0 5px 9px #211b3560,inset 0 -1px 1px #d5bfd92b,0 4px 0 #30273f,0 6px 0 #bfacc4,0 9px 12px #5d4f5926; }
.powerguide { box-shadow:inset 0 1px 1px #fff7,0 1px 1px #8d734a18; }
.tile.special { box-shadow:0 3px 0 #a7783f,0 4px 3px #1e132a60; }
.tile.rainbow { box-shadow:0 3px 0 #ae8752,0 4px 4px #15102470; }
.rin-wave { border-color:#ffe6a3;box-shadow:0 0 10px #ffac4d88,inset 0 0 8px #ffcd7a77;animation-timing-function:cubic-bezier(.08,.68,.22,1); }
.rin-fire { background:radial-gradient(circle,#fff7da 0 16%,#f5c866 35%,#e98a42 54%,#c7533377 66%,#c7533300 73%); }
.rin-smoke { background:radial-gradient(circle,#e7d6cbb0 0 26%,#ae99916b 52%,#ae999100 72%); }
@keyframes rin-wave {
  0% { transform:translate(-50%,-50%) scale(.14);opacity:1 }
  35% { opacity:.85 }
  100% { transform:translate(-50%,-50%) scale(1.28);opacity:0 }
}
@keyframes rin-flash {
  0% { transform:translate(-50%,-50%) scale(.22);opacity:1 }
  30% { opacity:.8 }
  100% { transform:translate(-50%,-50%) scale(1.22);opacity:0 }
}
.rb-veil { background:none; }
.rbx-vortex {
 background:radial-gradient(circle,transparent 50%,#140d3538 54%,#ffffff18 59%,#170d3438 64%,transparent 70%),conic-gradient(from 0deg,#fff0 0 18%,#fff8d991 24%,#fffbe6b3 26%,#fff0 29%,#fff0 68%,#fff8d991 74%,#fffbe6b3 76%,#fff0 79%),conic-gradient(#e8668a,#e79b4f,#eed270,#6bc395,#61b8de,#788ad5,#a47dce,#e8668a);
}
.rb-kira { background:radial-gradient(circle,#fff 0 10%,#fffbe9db 18%,#fff5d469 33%,#fff3b800 68%);clip-path:polygon(50% 0,53% 38%,82% 18%,62% 47%,100% 50%,62% 53%,82% 82%,53% 62%,50% 100%,47% 62%,18% 82%,38% 53%,0 50%,38% 47%,18% 18%,47% 38%); }
.kuu-flame i { background:linear-gradient(#fff2ce,#efcb72 24%,#ed9748 58%,#c96a3000);animation-timing-function:ease-in-out; }
.kuu-glow { background:radial-gradient(circle,#fff6dc 0 14%,#f7d28ad9 31%,#e79a4691 50%,#d17b3500 72%); }
.rin-heat { background:radial-gradient(circle,#f5a85fbb 0 26%,#dd783b55 53%,#d9713600 72%); }

/* ⑦: less paint, earlier disappearance, one clear prism peak. Existing hit layers stay intact. */
.tile.n-pop { animation-duration:.10s;animation-timing-function:cubic-bezier(.2,.65,.4,1); }
@keyframes n-pop {
  0% { transform:scale(1);opacity:1 }
  20% { transform:scale(.95);opacity:.75 }
  100% { transform:scale(.18);opacity:0 }
}
.n-bit { animation-duration:.16s; }
.tile.dr-hit { animation-duration:.11s; }
@keyframes dr-hit {
  0% { transform:scale(1);opacity:1 }
  20% { transform:scale(1.04);opacity:.8 }
  100% { transform:scale(.12);opacity:0 }
}
.art-rainbow { background-image:url('rainbow-refined-v1.webp'); }
.tile .art-rainbow { width:90%;height:90%;filter:none; }
.dr-arcs { filter:none; }
.rb-halo { background:radial-gradient(circle,#f4eef4a6 0 12%,#d3dced66 32%,#c6dfda33 48%,transparent 68%); }
.rbx-vortex, .dr-wave, .cb-wave, .cb-spark {
  background:conic-gradient(from 25deg,#a5c6d0,#e2e9ee 12%,#e4d6e9 24%,#eae3d3 36%,#bdcddc 49%,#edf1eb 62%,#c4b9d7 76%,#dae7e4 88%,#a5c6d0);
  filter:none;
}
.rb-kira { background:radial-gradient(circle,#fffdf8 0 10%,#f3ecf3c0 20%,#d7e6ed55 38%,transparent 68%);clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%); }
.rb-gather { animation-duration:.16s; }
.rb-edge, .rb-edge-out { animation-duration:.16s; }
.rbx-dot { box-shadow:none; }
.rin-flash { animation-duration:.25s; }
.rin-fire { animation-duration:.28s; }
.rin-wave { animation-duration:.26s; }
.rin-smoke { animation-duration:.36s; }
.gift-beams { background:conic-gradient(from 15deg,#fff2c4aa 0 8deg,transparent 8deg 82deg,#fff2c4aa 82deg 90deg,transparent 90deg 172deg,#fff2c4aa 172deg 180deg,transparent 180deg 262deg,#fff2c4aa 262deg 270deg,transparent 270deg); }
/* The wave carries the light; avoid repainting 64 animated glow shadows. */
@keyframes rb-edge { from { opacity:1 } to { opacity:.88 } }
@keyframes rb-edge-out { from { opacity:.88 } to { opacity:1 } }
.tile.rb-edge-out { animation-duration:.10s !important; }
.created-glow { animation-duration:.22s !important; }

/* Seasonal artwork and surfaces: only the initial sound-choice modal.
   Keep its existing dimensions, DOM, controls and all game styles intact. */
#modal:has(#playWithSound) {
  color: #533b61;
  border-color: #e3bd87;
  background:
    radial-gradient(ellipse at 15% 0%, #e7dcf5 0%, transparent 53%),
    radial-gradient(ellipse at 90% 13%, #ffdba5 0%, transparent 47%),
    linear-gradient(165deg, #fffaf1 30%, #fff2de 100%);
  box-shadow: inset 0 1px 2px #fff, 0 5px 0 #99759c, 0 25px 90px #24294666;
}
#modal:has(#playWithSound)::backdrop { background: #28344c88; }
#modal:has(#playWithSound) .modalimg { content: url('dogs-halloween-v1.webp'); }
#modal:has(#playWithSound) h2 { color: #684274; }
#modal:has(#playWithSound) p { color: #72586a; }
#modal:has(#playWithSound) .close { color: #745680; }
#modal:has(#playWithSound) .primary {
  color: #51280f;
  background: linear-gradient(165deg, #ffc46d, #f2a348 72%, #e99037);
  box-shadow: inset 0 1px 2px #fff0c4, inset 0 -2px 4px #b6652c30, 0 4px #b56834;
}
#modal:has(#playWithSound) .secondary {
  color: #644c77;
  background: linear-gradient(#ebe1f2, #dfd0e9);
  box-shadow: inset 0 1px #fff9, 0 2px #b7a2c3;
}

/* Two-step seasonal introduction. No selectors apply to the game board. */
#modal:has(#playWithSound) #modalBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}
#modal:has(#playWithSound) .modalimg { grid-column: 1 / -1; justify-self: center; max-width: 100%; }
#modal:has(#playWithSound) .primary,
#modal:has(#playWithSound) .secondary { margin-top: 20px; font-size: 22px; font-weight: 800; }
#modal:has(#titleStart) {
  width: min(calc(100% - 24px), calc(100svh - 36px), 500px);
  max-width: 500px;
  max-height: calc(100svh - 24px);
  padding: 0;
  border-color: #f0c58c;
  border-radius: 22px;
  background: #56466d;
  box-shadow: 0 5px 0 #735071, 0 25px 90px #202e4f88;
}
#modal:has(#titleStart)::backdrop { background: #202b46bb; }
.halloween-title { position: relative; overflow: hidden; border-radius: 18px; }
.halloween-title > img { display: block; width: 100%; height: auto; }
.halloween-start {
  position: absolute;
  left: 27%; top: 83%; width: 47%; height: 11.5%; min-height: 44px;
  border-radius: 26px;
  color: transparent;
  font-size: 0;
  background: transparent;
}
.halloween-start:focus-visible { outline: 2px solid #fff4c4; outline-offset: 2px; }
.halloween-start:active { background: #ffffff22; }

/* Halloween surrounds only. Piece art, geometry, input and motion stay intact. */
body {
  background:
    radial-gradient(ellipse at 95% 0%, #d9955640, transparent 39%),
    radial-gradient(ellipse at 0% 42%, #9b77b338, transparent 58%),
    linear-gradient(160deg, #293b55, #3b3458 55%, #54436a);
}
.brand { color: #fff1da; text-shadow: 0 2px 3px #1c213e80; }
.brandmark {
  color: #fff2cc;
  background: radial-gradient(ellipse at 30% 12%, #fff1c84d, transparent 68%), linear-gradient(#dba15a, #a76537);
  box-shadow: inset 0 1px 1px #ffdeb5, inset 0 -3px 4px #81463f40, 0 3px 0 #6c4258;
}
.iconbtn, #sound {
  color: #674d72; border-color: #d4b695;
  background: linear-gradient(#fff6e8, #eee0cd);
  box-shadow: inset 0 1px 1px #fff9, 0 3px 0 #876580;
}
.companion h1 { color: #fff1dd; text-shadow: 0 2px 3px #19253b66; }
.companion h1 span { color: #f2b46a; }
.eyebrow, .side-note p, .chapter { color: #ded0e3; }
.side-note b { color: #fff1dc; }
.chapter { border-top-color: #d7bbcf44; }
.mascot img, .mobile-dogs img, #modal:not(:has(#titleStart)) .modalimg {
  content: url('dogs-halloween-v1.webp');
}
.play {
  background: radial-gradient(ellipse at 0% 0%, #fffdf5, transparent 65%), linear-gradient(#fcf4e5, #eee0d5);
  border-color: #ead2b2;
  box-shadow: inset 0 1px 1px #fff, inset 0 -2px 4px #a28a6230, 0 5px 0 #bd987a, 0 9px 0 #735773, 0 18px 35px #151b343b;
}
.stagebtn, .gridicon, .textbtn { color: #725177; }
.stagebtn strong { color: #a65b2c; }
.mobile-dogs {
  background: radial-gradient(ellipse at 15% 0%, #fff3da70, transparent 67%), linear-gradient(130deg, #e8d5e7, #cbb9da);
  border-color: #b39bc5;
  box-shadow: inset 0 1px 1px #fff9, inset 0 -2px 4px #77598515, 0 2px 2px #71506920;
}
.mobile-dogs span { color: #866343; }
.mobile-dogs b { color: #614b70; }
.mobile-dogs img { filter: drop-shadow(0 2px 2px #73527622); }
.hud {
  background: radial-gradient(ellipse at 25% 0%, #fff8e080, transparent 78%), linear-gradient(#f8e0b7, #ebc99b);
  border-color: #dab287;
  box-shadow: inset 0 1px 1px #fff9, inset 0 -2px 4px #ae875b20, 0 2px 0 #b89a7b;
}
.hudlabel { color: #755474; }
.target { color: #634967; }
.moves { border-left-color: #ad789142; }
.moves strong { color: #b45a2e; }
.boardwrap {
  outline-color: #d5a46a;
  box-shadow: inset 0 2px 2px #f6e7ff22, inset 0 5px 9px #211b3560, inset 0 -1px 1px #d5bfd92b, 0 4px 0 #30273f, 0 6px 0 #bc8b60, 0 9px 12px #26193444;
}
.scoreline, #feedback, .savehint { color: #765a76; }
.scoreline b { color: #a85d30; }
.powerguide {
  background: radial-gradient(ellipse at 40% 0%, #fff7dfaa, transparent 85%), linear-gradient(#f1dfc7, #e3c7aa);
  border-color: #cab091;
}
.powerguide b, .powerguide small { color: #70556f; }

/* Secondary dialogs/results: same wardrobe and quiet seasonal palette. */
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) {
  border-color: #dfbe93;
  background: radial-gradient(ellipse at 10% 0%, #eee1f3, transparent 65%), linear-gradient(#fff8eb, #f2e2cf);
  box-shadow: inset 0 1px 1px #fff, 0 5px 0 #a27f9e, 0 25px 90px #22294066;
}
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) h2 { color: #704975; }
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) p { color: #745f70; }
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) .close { color: #775a83; }
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) .primary {
  color: #5a2c14;
  background: linear-gradient(#ffc676, #efa24c);
  box-shadow: inset 0 1px 2px #fff0c4, inset 0 -2px 4px #b6652c30, 0 4px #b76d39;
}
#modal:not(:has(#playWithSound)):not(:has(#titleStart)) .secondary,
.levelgrid button {
  color: #70557d;
  background: linear-gradient(#e9dfed, #d8c9e1);
  box-shadow: inset 0 1px #fff9, 0 2px #ad94bc;
}
.levelgrid button.current { color: #5a2c14; background: linear-gradient(#ffc676, #efa24c); }
.levelgrid button.current small, .levelgrid button small { color: #73556d; }
.medal { color: #cc8738; }
.resultscore { color: #a86337; }
.sound-settings { background: #ebdce8; }
#modal:has(#choose) #modalBody {
  padding-top: 108px;
  background: url('dogs-halloween-v1.webp') center top / 200px 100px no-repeat;
}

/* Smaller sound controls let the portrait lead; keep a 44px touch height. */
#modal:has(#playWithSound) #modalBody {
  grid-template-columns: repeat(2, minmax(0, 96px));
  justify-content: center;
  column-gap: 22px;
}
#modal:has(#playWithSound) .modalimg {
  width: 260px; height: 142px; max-width: none;
}
#modal:has(#playWithSound) .primary,
#modal:has(#playWithSound) .secondary {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;
}
#modal:has(#playWithSound) .secondary {
  color: #66616b;
  background: linear-gradient(#f0eef0, #ddd9df);
  box-shadow: inset 0 1px #fff9, 0 2px #b4aeba;
}
@media (max-width: 350px) {
  #modal:has(#playWithSound) .modalimg { width: 238px; height: 136px; }
}
/* Keep result actions visible on compact phones, without changing their flow. */
@media (max-height: 600px) {
  #modal:has(#next), #modal:has(#choose) { padding: 12px 20px; }
  #modal:has(#next) .modalimg { width: 160px; height: 70px; }
  #modal:has(#choose) #modalBody { padding-top: 84px; background-size: 160px 80px; }
  #modal:has(#next) .medal, #modal:has(#choose) .medal { font-size: 28px; }
  #modal:has(#next) h2, #modal:has(#choose) h2 { font-size: 22px; margin: 6px 0; }
  #modal:has(#next) p, #modal:has(#choose) p { font-size: 13px; line-height: 1.5; margin: 4px 0; }
  #modal:has(#next) .resultscore, #modal:has(#choose) .resultscore { font-size: 28px; margin: 3px 0; }
  #modal:has(#next) .primary, #modal:has(#choose) .primary { min-height: 44px; padding: 10px; margin-top: 12px; }
  #modal:has(#next) .secondary, #modal:has(#choose) .secondary { min-height: 44px; padding: 10px; margin-top: 8px; }
}

/* One short anticipation, one impact, one clean tail. Existing effect nodes only. */
.rin-heat {
  background: radial-gradient(circle, #fff7c8dd 0 9%, #ffc465bb 27%, #ef803b66 48%, transparent 70%);
}
.rin-flash { animation-duration: .22s; }
.rin-fire {
  background: radial-gradient(circle, #fffdf1 0 19%, #ffe7aa 30%, #f5b64de6 45%, #e9803990 58%, transparent 73%);
  animation-duration: .26s;
}
.rin-wave {
  border-width: 4px;
  border-color: #fff0bd;
  box-shadow: 0 0 8px #ffbc6399, inset 0 0 6px #ffd68866;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.12,.75,.25,1);
}
.rin-smoke { animation-duration: .30s; }
.rin-streak { animation-duration: .24s; }
.rin-debris { animation-duration: .30s; }
.boardwrap.rin-shake { animation-duration: .18s; }
@keyframes rin-flash {
  0% { transform: translate(-50%,-50%) scale(.36); opacity: 1 }
  18% { transform: translate(-50%,-50%) scale(.82); opacity: 1 }
  100% { transform: translate(-50%,-50%) scale(1.2); opacity: 0 }
}
@keyframes rin-fire {
  0% { transform: translate(-50%,-50%) scale(.28); opacity: 1 }
  20% { transform: translate(-50%,-50%) scale(1); opacity: 1 }
  100% { transform: translate(-50%,-56%) scale(1.12); opacity: 0 }
}
@keyframes rin-wave {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: 1 }
  38% { opacity: .95 }
  100% { transform: translate(-50%,-50%) scale(1.08); opacity: 0 }
}
@keyframes rin-shake {
  0% { transform: none }
  14% { transform: translate(0,6px) }
  32% { transform: translate(-4px,-3px) }
  51% { transform: translate(3px,1px) }
  76% { transform: translate(-1px,0) }
  100% { transform: none }
}
.dr-wave {
  background: conic-gradient(from 25deg, #ee7199, #f5a45d, #f0d46e, #77d5ad, #62c5e8, #7c96e5, #ad83da, #ee7199);
}
.dr-flare { background: radial-gradient(circle, #fff 0 16%, #fff9e8eb 28%, #f5dbf27a 44%, transparent 68%); }

/* Halloween review: colour index 2 keeps its existing rules and passive icon.
   Only the ordinary piece/goal paint changes; special surfaces stay untouched. */
.tile.c2:not(.special), .mini.c2 {
  --tile-light: #fff0d066;
  --tile-top: #f9cc95;
  --tile-mid: #f2b17a;
  --tile-bottom: #df9863;
  --tile-edge: #b77948;
}
.tile.c2:not(.special) { --piece-surface: url('satin-orange-halloween-v1.webp'); background: linear-gradient(165deg, #fff1d538, #fff0d82b), var(--piece-surface) center / 100% 100% no-repeat; }
.dog2 { background-image: url('pumpkin-jack-v3.webp'); }