/* フォントは同梱（オフラインでも同じ見た目になるように）。いずれも SIL Open Font License。
   欧文・数字 = Nunito、和文 = M PLUS Rounded 1c（画面で使う文字だけのサブセット）。
   数字の「1」だけは足のない M PLUS Rounded 1c の字形を使う（Round One）。 */
@font-face{font-family:"Nunito";font-weight:800 900;font-display:swap;src:url(./fonts/nunito-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:700;font-display:swap;src:url(./fonts/mplus-ui-700.woff2) format("woff2");}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:800;font-display:swap;src:url(./fonts/mplus-ui-800.woff2) format("woff2");}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:900;font-display:swap;src:url(./fonts/mplus-ui-900.woff2) format("woff2");}
@font-face{font-family:"Round One";font-weight:800;src:url(./fonts/one-800.woff2) format("woff2");unicode-range:U+31;}
@font-face{font-family:"Round One";font-weight:900;src:url(./fonts/one-900.woff2) format("woff2");unicode-range:U+31;}
:root{
  --cell:35px;
  --bg:#2451c4; --bg-hi:#2e60d6;
  --line:rgba(150,192,255,.78);           /* ピル・丸ボタン・トレイ枠の線 */
  --plate:#1a3eae; --well:#0b163f; --well-rim:#4b71cf;
  --text:#fff; --dim:rgba(255,255,255,.62);
  --gold:#ffd54a; --goal:#3fd6e0; --goal-text:#8ef1f8;
  /* 文字の影はすべてこれ（光源は宝石と同じ上から。ふち取りや光のにじみは付けない） */
  --ts:0 3px 3px rgba(0,0,0,.18); --ts-s:0 2px 2px rgba(0,0,0,.18);
  /* 宝石の色: --col 本体 / --hi 上面の明るい面 / --lo 下側の濃い色 / --rim 上側のふち */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  color:var(--text); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none;   /* 長押しでメニューや拡大鏡を出さない */
  font-family:"Round One","Nunito","M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",-apple-system,system-ui,sans-serif;
  background:var(--bg) radial-gradient(90% 55% at 50% 30%,var(--bg-hi),var(--bg) 75%);
  display:flex; justify-content:center;
}
button{font-family:inherit;cursor:pointer;}
#app{position:relative;width:100%;max-width:560px;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:max(15px,env(safe-area-inset-top)) 8px max(14px,env(safe-area-inset-bottom));}

/* ---- HUD ---- */
.top{position:relative;width:100%;height:36px;flex-shrink:0;display:flex;justify-content:center;align-items:flex-start;}
.best-pill{position:relative;left:min(0px,calc(50% - 168px));   /* 狭い画面では右のボタンに重ならないよう左へ */
  height:33px;min-width:132px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;border-radius:17px;
  border:1.5px solid var(--line);background:none;}
.crown{width:23px;height:20px;flex-shrink:0;margin-top:-1px;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.25));}
.best-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1;padding-left:2px;}
.best-label{font-family:"M PLUS Rounded 1c",sans-serif;font-size:8px;font-weight:800;letter-spacing:.02em;margin-bottom:2px;}
#best{font-size:17px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums;transform:scaleX(.87);transform-origin:0 50%;}
.top-btns{position:absolute;right:10px;top:0;display:flex;gap:10px;}
.top-left{position:absolute;left:10px;top:0;display:flex;gap:10px;}
.round-btn{width:36px;height:36px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:rgba(120,160,255,.13);color:#fff;}
.round-btn svg{width:21px;height:21px;fill:#fff;}
#btnSound svg{width:25px;height:25px;margin-left:1.5px;}
.round-btn.off{opacity:.45;}
/* 学習モードのボタン（電球）: オンのときは金色に灯る */
.learn-btn svg{fill:rgba(255,255,255,.9);}
.learn-btn.on{border-color:var(--gold);background:rgba(255,213,74,.2);}
.learn-btn.on svg{fill:var(--gold);}
.score-wrap{position:relative;}
.mode-badge{position:absolute;left:50%;top:100%;translate:-50% 2px;font-family:"Nunito",sans-serif;font-size:10.5px;font-weight:900;
  letter-spacing:.18em;color:var(--gold);padding:1px 8px 1px 10px;border:1.5px solid rgba(255,213,74,.65);border-radius:99px;
  background:rgba(20,40,130,.35);}
.mode-badge.hidden{display:none;}
.score-wrap{display:flex;flex-direction:column;align-items:center;margin-top:14px;flex-shrink:0;}
.score{font-size:64px;font-weight:900;letter-spacing:0;line-height:1;height:66px;
  text-shadow:var(--ts);font-variant-numeric:tabular-nums;}

/* ---- 盤面 ---- */
.stage{flex:1;min-height:0;width:calc(100% + 16px);margin:0 -8px;display:flex;align-items:center;justify-content:center;}   /* 盤面は画面の端まで使う */
.rot-wrap{position:relative;flex-shrink:0;}
.playfield{position:absolute;transform:rotate(225deg);}   /* 実際の transform は renderer.layout が設定 */
.upright{display:inline-block;rotate:-225deg;}
.layer{position:absolute;inset:0;pointer-events:none;}
#wellLayer{filter:drop-shadow(0 0 1px rgba(80,130,255,.9)) drop-shadow(0 0 5px rgba(0,8,50,.35));}
.cell{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);}
.well{background:none;}
/* 土台（マス同士の継ぎ目が見えないよう、少しだけはみ出させる） */
.well::before{content:'';position:absolute;inset:-.6px;background:var(--plate);border-radius:inherit;}
/* 盤面は 225° 回転して表示するので、ローカルの 右・下 = 画面の上側、左・上 = 画面の下側 */
.well::after{content:'';position:absolute;inset:6%;border-radius:14%;
  background:#1f3285;
  box-shadow:inset -3px -3px 7px 1px rgba(4,12,60,.7),inset .8px .8px 0 rgba(4,12,60,.45),
             0 0 0 .7px rgba(96,140,245,.8),-.9px -.9px 0 .2px rgba(150,186,255,.95);}
.well.tl{border-top-left-radius:22%;} .well.tr{border-top-right-radius:22%;}
.well.bl{border-bottom-left-radius:22%;} .well.edge-r{border-bottom-right-radius:22%;}
.lane{position:absolute;pointer-events:none;}
.lane-nums{position:absolute;inset:0;pointer-events:none;}
.lane-num{position:absolute;isolation:isolate;left:0;top:0;translate:-50% -50%;font-size:calc(var(--cell) * .5);font-weight:800;line-height:1;color:#eef3ff;
  text-shadow:var(--ts-s);transition:scale 160ms cubic-bezier(.3,1.6,.5,1),color 160ms;}
/* 発動するラインの番号 */
.lane-num.lit{scale:1.3;color:#fff;}
/* 番号の後ろにピースの色の丸（どの色でも背景の青に埋もれないよう白いふち。光のにじみは付けない） */
.lane-num::before{content:'';position:absolute;left:50%;top:50%;width:1.55em;height:1.55em;translate:-50% -50%;z-index:-1;border-radius:50%;
  background:var(--col);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 2px 2px rgba(0,0,0,.18);opacity:0;scale:.4;
  transition:opacity 140ms,scale 180ms cubic-bezier(.3,1.6,.5,1);}
.lane-num.lit::before{opacity:1;scale:1;}
.goal{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:26%;
  border:3px solid var(--goal);background:rgba(10,30,120,.22);
  color:var(--goal-text);font-size:calc(var(--cell) * .415);font-weight:900;letter-spacing:.01em;
  transition:background-color 160ms;}
.goal .upright{position:relative;text-shadow:var(--ts-s);}
/* ゴールの中の面: 入ったブロックの色で満ちて引く（ベタ塗り + マスと同じ内側の影） */
.goal-fill{position:absolute;inset:2px;border-radius:20%;opacity:0;pointer-events:none;
  background:var(--col,#3fd6e0);box-shadow:inset -2px -2px 5px rgba(4,12,60,.35),inset 1px 1px 0 rgba(255,255,255,.35);}
/* 置けば消えるとき: 光らせず、ゴールの面が少し明るくなって弾む */
.goal.ready{background:rgba(63,214,224,.2);animation:goalReady 560ms ease-in-out infinite alternate;}
@keyframes goalReady{to{scale:1.07}}

/* ---- ブロック（宝石） ----
   光源は画面の「左上」ひとつに統一して陰影をつける。
   本体 = ::before（四方のふちの面をそれぞれの明るさで塗り分け、左上の面に細長い映り込み）、
   テーブル面 = ::after（左上ほど明るい、なだらかな面）。
   盤面は 225° 回転しているので、ローカルの 右 = 画面の左上、下 = 右上、上 = 左下、左 = 右下。
   要素そのものは位置だけを持つ透明な箱なので、拡大縮小のアニメは疑似要素に掛ける。 */
.block,.ghost,.hi,.tray-cell,.drag-cell{
  --f1:color-mix(in srgb,var(--col),#fffbe8 48%);   /* 左上の面: 光を正面から受ける（暖かい白へ） */
  --f2:color-mix(in srgb,var(--col),#fff 16%);      /* 右上の面: 少し明るい */
  --f3:color-mix(in srgb,var(--col),var(--lo) 62%); /* 左下の面: 影側 */
  --f4:color-mix(in srgb,var(--lo),#160b48 10%);    /* 右下の面: 一番暗い（影は彩度を保ったまま寒色寄りへ） */
  --t1:color-mix(in srgb,var(--col),var(--lo) 34%);
  --t2:color-mix(in srgb,var(--col),#fff8e0 14%);}
.block::before,.ghost::before,.hi::before,.tray-cell::before,.drag-cell::before{
  content:'';position:absolute;inset:1.5%;border-radius:18%;
  background:
    radial-gradient(circle at 90% 70%,rgba(255,255,255,.95) 0 2.5%,rgba(255,255,255,0) 7%),
    radial-gradient(ellipse 6% 26% at 91% 56%,rgba(255,255,255,.7),rgba(255,255,255,0) 100%),
    conic-gradient(var(--f3) 0 44deg,var(--f1) 46deg 134deg,var(--f2) 136deg 224deg,var(--f4) 226deg 314deg,var(--f3) 316deg);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.28),
             inset 1px 0 0 rgba(255,255,255,.12),
             -2.5px 0 4px rgba(4,14,64,.38),0 0 1.5px rgba(4,14,64,.45);}
.block::after,.ghost::after,.hi::after,.tray-cell::after,.drag-cell::after{
  content:'';position:absolute;inset:18%;border-radius:14%;
  background:
    radial-gradient(ellipse 55% 70% at 88% 58%,rgba(255,255,255,.3),rgba(255,255,255,0) 70%),
    linear-gradient(to right,var(--t1),var(--col) 55%,var(--t2));
  box-shadow:inset -.8px 0 0 rgba(255,255,255,.3),inset .8px 0 0 rgba(0,0,0,.08),inset 0 .8px 0 rgba(0,0,0,.06);}
.block{transition:transform var(--t,0ms) var(--e,ease),filter 160ms;will-change:transform;}
.block::before,.block::after{transition:opacity 180ms,scale 200ms ease-in,filter 160ms;}
.block.pop-in::before,.block.pop-in::after{animation:land 340ms cubic-bezier(.25,1.4,.5,1) var(--d,0ms) both;}
@keyframes land{0%{scale:1.22}45%{scale:.9}72%{scale:1.04}100%{scale:1}}
/* 全消し: 空いたマスに宝石がぽんと満ち、しばらく並んでから砕けて小さくなる（renderer.allClearBlast。濃さは変えず大きさだけ） */
.ac-gem{pointer-events:none;}
.ac-gem::before,.ac-gem::after{animation:acGem var(--life) linear var(--d) both;}
@keyframes acGem{
  0%{scale:0;animation-timing-function:cubic-bezier(.3,1.6,.5,1)}
  16%{scale:1.14;animation-timing-function:ease-out}
  26%{scale:1}
  64%{scale:1;animation-timing-function:ease-out}
  72%{scale:1.2;animation-timing-function:ease-in}
  100%{scale:0}}
.block.travel{z-index:5;}
/* 発動したラインの空いたマス・全消しの盤面: マスの中にブロックの色が満ちて引く。
   マスと同じ形・同じ内側の影（くぼみの底に色が溜まって見える）。光のにじみは付けない */
.well-tint{scale:0;}
.well-tint::after{content:'';position:absolute;inset:14%;border-radius:18%;
  background:var(--col);
  box-shadow:inset -2.5px -2.5px 5px rgba(4,12,60,.4),inset .8px .8px 0 rgba(255,255,255,.35);}
/* ゴールから飛び散る宝石のかけら（shards.js。色ごとに1回だけ描いた絵を貼り、transform だけで動かす） */
.shard{position:absolute;left:0;top:0;pointer-events:none;background:center/100% 100% no-repeat;}
.block.fly::before,.block.fly::after{opacity:0;scale:.4;}
.ghost{opacity:.38;filter:saturate(.8);animation:ghostIn 140ms ease-out;}
/* 学習モードのおすすめの場所: 白い枠 + 中にピースの色の小さな面（ベタ塗り。半透明にすると背景の紺と混ざって濁るので）。
   大きさだけで脈打つ（手順どおりの手は金色の枠） */
.hint{border-radius:20%;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.95);animation:hintPulse 900ms ease-in-out infinite alternate;}
.hint::after{content:'';position:absolute;inset:27%;border-radius:22%;background:var(--col);
  box-shadow:inset -1.5px -1.5px 3px rgba(4,12,60,.35),inset 1px 1px 0 rgba(255,255,255,.35);}
.hint.plan{box-shadow:inset 0 0 0 2.5px var(--gold);}
@keyframes hintPulse{from{scale:.88}to{scale:1}}
/* おすすめのピース（トレイ側）は、ピースそのものがゆっくり弾む（枠の四角は出さない） */
.slot.hinted .piece{animation:trayHint 900ms ease-in-out infinite alternate;}
@keyframes trayHint{from{scale:.94}to{scale:1.08}}
.ghost.strong{opacity:.72;filter:saturate(1) brightness(1.08);}
/* 穴・凹みにはまる場所: 吸い込まれるようにきゅっと縮んで収まる（光らせず、動きだけ）。ぴったり・長方形はさらに濃く */
.ghost.fit{animation:ghostFit 260ms cubic-bezier(.3,1.6,.5,1);}
.ghost.perfect,.ghost.rect{opacity:.8;filter:saturate(1);}
@keyframes ghostFit{0%{scale:1.2;opacity:.2}55%{scale:.9}100%{scale:1}}
@keyframes ghostIn{from{scale:1.12;opacity:.15}}
/* 仮置き中に消える列: 既存ブロックの上に持っているピースの色を重ね、斜辺側から順に入ってから脈打つ（光らせず、濃さだけ） */
.hi{opacity:1;animation:hiPulse 620ms ease-in-out infinite alternate;}
.hi.enter{animation:hiIn 240ms cubic-bezier(.3,1.5,.5,1) var(--d,0ms) both,hiPulse 620ms ease-in-out calc(var(--d,0ms) + 240ms) infinite alternate;}
@keyframes hiIn{0%{scale:.5;opacity:0}100%{scale:1;opacity:1}}
@keyframes hiPulse{from{opacity:.78}to{opacity:1}}
.hi::after{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset -.8px 0 0 rgba(255,255,255,.3);}
/* 白いふちが脈打つので、元と同じ色のブロックでも「消える」と分かる */
.hi::before{outline:2px solid rgba(255,255,255,.75);outline-offset:-1px;}
/* --col 本体 / --hi テーブル上面 / --tb テーブル下側 / --lo 下のふち / --rim 上のふち */
.c-red{--col:#ff3f5c;--hi:#ffa9c1;--tb:#f5294f;--lo:#c80a3a;--rim:#ffc4d2}
.c-orange{--col:#ff8c06;--hi:#ffca7c;--tb:#fb7b00;--lo:#dc5500;--rim:#ffd9a2}
.c-yellow{--col:#ffe214;--hi:#fff5a0;--tb:#ffd40a;--lo:#efae00;--rim:#fff8c4}
.c-green{--col:#22e545;--hi:#8ef8a6;--tb:#16d63a;--lo:#0ca42c;--rim:#c2ffd2}
.c-cyan{--col:#12e0ff;--hi:#7af3ff;--tb:#08c8fb;--lo:#0590e2;--rim:#bdf8ff}
.c-blue{--col:#3f6dff;--hi:#a8bfff;--tb:#2f5cf8;--lo:#1c38cc;--rim:#cbd8ff}
.c-purple{--col:#a849fe;--hi:#ddbcfe;--tb:#983cfb;--lo:#600cf0;--rim:#e7ccfe}
.c-debug,.c-x{--col:#9fb0cc;--hi:#dde4f0;--tb:#93a4c2;--lo:#6c7c99;--rim:#e6ebf5}

/* ---- 中央テキスト ----
   文字はスコアと同じ見え方にそろえる: ベタ塗り + 真下への薄い影（--ts）だけ。
   ふち取り・光のにじみ・グラデーションの文字は使わない（盤面の陰影と合わず浮いて見えるので）。
   段階の色はブロックの色を明るくしたもの。ふち取りが無くてもブロックに埋もれないよう、盤面の上の空いた所に出す */
.pop{position:absolute;left:50%;top:34%;z-index:8;translate:-50% 0;white-space:nowrap;pointer-events:none;text-align:center;
  font-weight:900;font-size:32px;line-height:1.05;opacity:0;color:#fff;letter-spacing:.01em;text-shadow:var(--ts);}
.pop small{display:block;font-size:21px;margin-top:2px;color:var(--tc,#fff);}
.pop.show{animation:popText 820ms cubic-bezier(.2,.9,.3,1);}
/* 大きい文字は1文字ずつ上から落ちてきて弾む。説明の小さい文字はそのあと下からせり上がる */
.pop .ch{display:inline-block;animation:chDrop 380ms cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 32ms) both;}
@keyframes chDrop{from{opacity:0;translate:0 -.55em;scale:.5}}
.pop small{animation:subIn 320ms cubic-bezier(.3,1.4,.5,1) calc(var(--n,0) * 32ms + 60ms) both;}
@keyframes subIn{from{opacity:0;translate:0 .5em}}
@keyframes popText{0%{opacity:0;scale:.3;rotate:-8deg}16%{opacity:1;scale:1.25;rotate:3deg}28%{scale:.95;rotate:0deg}38%{scale:1.03}
  75%{opacity:1;scale:1}100%{opacity:0;scale:1.08;translate:-50% -28px}}
/* 段階ごとの色（t1 = Good … t5 = Unbelievable / NEW BEST） */
.pop.t1{--tc:#7ff0a4;}
.pop.t2{--tc:#7fe6ff;}
.pop.t3{--tc:var(--gold);font-size:35px;}
.pop.t4{--tc:#ff9ad6;font-size:38px;}
/* 最高段階は、主な文字の色がブロックの7色を順に移っていく（説明の小さい文字は白） */
/* 色の移り変わりは1周だけ（文字は popText の 1000ms で消えるので、それより後は見えない。
   infinite にすると、消えた後も毎フレーム色の計算と描き直しが続いて全体が重くなる） */
.pop.t5{--tc:#fff;font-size:40px;animation:popText 1000ms cubic-bezier(.2,.9,.3,1),rainbow 1400ms linear;}
@keyframes rainbow{0%,100%{color:#ff7a92}16%{color:#ffb35a}33%{color:#ffe45c}50%{color:#7ff0a4}66%{color:#7fe6ff}83%{color:#c29bff}}

/* 連続発動（COMBO）: 盤面の上に白と金の文字 */
.combo-pop{position:absolute;left:50%;top:27%;z-index:9;translate:-50% 0;pointer-events:none;white-space:nowrap;opacity:0;
  display:flex;align-items:baseline;gap:6px;font-weight:900;font-size:24px;font-style:italic;color:#fff;text-shadow:var(--ts);}
.combo-pop b{font-size:40px;color:var(--gold);}
.combo-pop.show{animation:comboIn 1000ms cubic-bezier(.2,.9,.3,1);}
.combo-pop.hot b{color:#ffa55a;}
@keyframes comboIn{0%{opacity:0;scale:2.2}14%{opacity:1;scale:.9}24%{scale:1.08}34%{scale:1}80%{opacity:1}100%{opacity:0;translate:-50% -14px}}

/* ---- 発動・ゴールの演出 ----
   盤面の中の演出は動き（弾む・揺れる・寄る）だけにし、光の粒・輪・フレアは出さない */
.fx2{z-index:7;overflow:visible;}
/* 得点: 白（3連鎖〜 金 / 5連鎖〜 桃）のベタ塗り + 薄い影 */
.float-score{position:absolute;translate:-50% -50%;font-weight:900;font-size:calc(var(--cell) * .62);color:#fff;white-space:nowrap;
  text-shadow:var(--ts-s);animation:floatUp 880ms cubic-bezier(.2,.8,.3,1) forwards;pointer-events:none;}
.float-score.warm{color:var(--gold);font-size:calc(var(--cell) * .75);}
.float-score.hot{color:#ff9ad6;font-size:calc(var(--cell) * .9);}
@keyframes floatUp{0%{opacity:0;scale:.5}15%{opacity:1;scale:1.25}30%{scale:1}75%{opacity:1}100%{opacity:0;translate:-50% calc(-50% - var(--cell) * 1.2)}}
/* コンボが続くほど背景がほんのり明るくなって脈打つ。背景と同じ青〜青紫の中で色を移す（ほかの色を足すと濁るので）。
   毎フレーム画面全体を描き直さないよう、動かすのは opacity と scale だけ（filter や box-shadow は動かさない） */
#fever{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 500ms;
  background:radial-gradient(70% 45% at 50% 45%,rgba(110,160,255,.3),rgba(90,110,255,.16) 55%,transparent 80%),
             radial-gradient(120% 55% at 50% 110%,rgba(90,200,255,.18),transparent 60%);
  animation:feverPulse 900ms ease-in-out infinite alternate;}
#fever::before,#fever::after{content:"";position:absolute;inset:0;opacity:0;animation:feverHue 6s linear infinite;}
#fever::before{background:radial-gradient(70% 45% at 50% 45%,rgba(140,130,255,.3),rgba(120,90,240,.16) 55%,transparent 80%),
             radial-gradient(120% 55% at 50% 110%,rgba(120,170,255,.18),transparent 60%);}
#fever::after{animation-delay:-3s;
  background:radial-gradient(70% 45% at 50% 45%,rgba(100,200,255,.28),rgba(80,150,255,.16) 55%,transparent 80%),
             radial-gradient(120% 55% at 50% 110%,rgba(150,140,255,.18),transparent 60%);}
#fever.max{animation-duration:450ms;}
#fever.max::before,#fever.max::after{animation-duration:4s;}
#fever.max::after{animation-delay:-2s;}
@keyframes feverHue{0%,100%{opacity:0}35%,50%{opacity:1}}
@keyframes feverPulse{from{scale:1}to{scale:1.05}}
/* ピンチ: 画面の縁が暖色でゆっくり脈打つ（発動で空くと消える）。影は固定で、濃さ(opacity)だけを動かす */
#danger{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 600ms;}
#danger::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px 16px rgba(255,90,60,.55);
  animation:danger 1.4s ease-in-out infinite alternate;}
@keyframes danger{from{opacity:.65}to{opacity:1}}
/* 見えていない間は動かさない */
#fever.off,#fever.off::before,#fever.off::after,#danger.off::before{animation-play-state:paused;}
#app{z-index:1;}
/* ---- 画面全体の演出（scenes.js） ----
   奥（盤面の後ろ）: 色の変化 #sceneTint / 手前（盤面の前）: 新記録の風船 #sceneFront
   全消しは画面を覆う演出を使わない（盤面の中だけ）。色の変化は1回だけ描いた 400px の絵を拡大し、opacity と transform だけで動かす */
#sceneFront{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:24;}
/* 色の変化は 400px の絵を拡大して使う（画面より大きい絵をそのまま作ると、高解像度の画面で描く量が桁違いに増える） */
#sceneTint{position:fixed;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;z-index:0;pointer-events:none;opacity:0;}
/* 背景の青の上に半透明で重ねるので、色は青と混ざっても濁らない水色・青紫・桃紫の範囲にする
   （黄・橙を薄く重ねると灰色に濁る）。大きな絵（200vmax）の中で、画面は縦 25%〜75% の範囲に当たる */
#sceneTint.t-gold{background:radial-gradient(closest-side,rgba(150,230,255,.92),rgba(120,170,255,.66) 22%,rgba(190,130,255,.42) 40%,transparent 58%);}
#sceneTint.t-amazing{background:radial-gradient(closest-side,rgba(255,150,225,.9),rgba(190,90,255,.55) 42%,rgba(90,80,255,.3) 72%,transparent);}
#sceneTint.t-warm{background:linear-gradient(to top,transparent 23%,rgba(255,120,200,.9) 25%,rgba(190,100,255,.62) 38%,rgba(120,120,255,.28) 52%,transparent 64%);}
#sceneTint.t-rainbow{background:center/100% 100% no-repeat;}   /* 絵は scenes.rainbowImage */
.best-pill.beat{border-color:var(--gold);background:rgba(255,213,74,.14);animation:beat 1.2s ease-in-out infinite;}
@keyframes beat{50%{scale:1.04}}
@media (prefers-reduced-motion: reduce){#fever,#fever::before,#fever::after,#danger::before,.hi,.goal.ready,.hint,.pop .ch,.pop small,.slot.hinted .piece{animation:none}}

/* ---- トレイ ----
   リスタートボタンを無くして浮いた分の高さをここへ回し、枠を無くした代わりに手駒がなるべく
   盤面と同じ大きさ（trayCellSize の min(renderer.cell, …)）で収まるよう、枠（3列ぶん）を広くとる */
.tray{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 6px;
  height:min(178px,21vh);flex-shrink:0;}
.slot{position:relative;display:flex;align-items:center;justify-content:center;}   /* 枠の四角は描かない（ピースだけを見せる） */
.slot .piece{position:relative;rotate:225deg;transition:transform 160ms,opacity 160ms;}
.slot.dragging .piece{opacity:0;}
.slot.enter .piece{animation:trayIn 260ms cubic-bezier(.3,1.5,.5,1) both;}
@keyframes trayIn{from{transform:translateY(40px) scale(.4);opacity:0}}
.tray-cell{position:absolute;}
.tray-cell::before{inset:3.5%;}
.tray-cell::before{box-shadow:inset -1px 0 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.28),
  inset 1px 0 0 rgba(255,255,255,.12),-4px 0 7px rgba(4,14,64,.3),0 0 1.5px rgba(4,14,64,.4);}
.drag-layer{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:20;transform:rotate(225deg);}   /* 実際は盤面と同じ transform を main.js が設定 */
.drag-cell{position:absolute;width:var(--cell);height:var(--cell);animation:pickUp 200ms cubic-bezier(.3,1.6,.5,1);}
@keyframes pickUp{from{scale:.6}}

/* ---- フッター ---- */
.round-btn:active{background:rgba(120,160,255,.22);}
/* リスタートボタンは無し（ゲームオーバー時の「もう一度」だけで再開する）。debug は #app の隅に直接置く */
.debug-link{position:absolute;right:8px;bottom:max(6px,env(safe-area-inset-bottom));}
.link{background:none;border:none;color:var(--dim);font-size:11px;text-decoration:underline;}
.debug{position:absolute;left:8px;right:8px;bottom:30px;z-index:15;border-radius:12px;padding:8px;
  background:rgba(10,16,50,.92);}
.debug pre{margin:0;font-size:10.5px;line-height:1.4;font-family:ui-monospace,monospace;}
.debug-row{display:flex;gap:6px;margin-top:6px;}
.debug-row input{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:8px;padding:5px;font-size:12px;}
.debug-row button{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:8px;padding:5px 10px;}
.hint{margin:6px 0 0;font-size:10px;color:var(--dim);}
.hidden{display:none !important;}
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(20,45,140,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.overlay-box{text-align:center;animation:trayIn 360ms cubic-bezier(.3,1.4,.5,1) both;}
.over-title{margin:0 0 20px;font-family:"M PLUS Rounded 1c",sans-serif;font-size:26px;font-weight:900;text-shadow:var(--ts);}
.over-label{margin:0;font-size:14px;color:var(--dim);letter-spacing:.2em;}
.over-score{margin:0;font-size:64px;font-weight:900;text-shadow:var(--ts);}
.over-best{margin:4px 0 26px;color:var(--gold);font-weight:800;}
.primary{border:1.5px solid var(--line);border-radius:24px;padding:12px 40px;font-family:"M PLUS Rounded 1c",sans-serif;
  font-size:18px;font-weight:900;color:#fff;background:rgba(120,160,255,.16);}
.primary:active{background:rgba(120,160,255,.3);}
.boot-error{position:fixed;left:16px;right:16px;top:40%;z-index:50;padding:16px;border-radius:14px;
  background:rgba(10,16,50,.92);color:#fff;font-size:14px;line-height:1.5;white-space:pre-wrap;text-align:center;}

/* ---- チュートリアル（はじめて遊ぶ人向け。盤面とトレイの間に説明、指の絵がピースを運んで見せる） ---- */
/* 説明はスコアの場所に出す（チュートリアル中の点数はベストスコアの枠に出ている） */
body.tutorial-on .score-wrap{visibility:hidden;}
.tutorial{position:fixed;left:50%;top:0;z-index:22;width:min(calc(100% - 32px),380px);translate:-50% 0;
  padding:8px 12px;border-radius:16px;border:1.5px solid var(--line);background:#1d44b4;text-align:center;
  box-shadow:0 3px 0 rgba(8,24,90,.35);animation:trayIn 300ms cubic-bezier(.3,1.4,.5,1) both;}
.tut-text{margin:0;font-size:14px;font-weight:800;line-height:1.45;text-shadow:var(--ts);}
.tut-text b{color:var(--gold);font-weight:900;}
.tut-start{display:block;margin:10px auto 2px;}
.tut-skip{position:fixed;right:14px;bottom:max(8px,env(safe-area-inset-bottom));z-index:22;padding:6px 4px;font-size:12px;font-weight:700;}
.tut-hand{position:fixed;left:0;top:0;z-index:25;width:44px;height:53px;pointer-events:none;
  filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.3));}
.tut-hand svg{width:100%;height:100%;fill:#fff;stroke:#1d3a9e;stroke-width:2.4;stroke-linejoin:round;}
.howto{display:block;margin:18px auto 0;font-size:14px;font-weight:700;}

/* ---- ゲームオーバー・一時停止の記録 ---- */
.over-stats{display:flex;justify-content:center;gap:28px;margin:-10px 0 26px;}
.stat{min-width:104px;display:flex;flex-direction:column;align-items:center;}
.stat-label{font-size:11px;font-weight:800;color:var(--dim);}
.stat-val{font-size:28px;font-weight:900;line-height:1.15;text-shadow:var(--ts);}
.stat-rec{font-size:11px;font-weight:800;color:var(--dim);min-height:1.3em;}
.stat-rec.new{color:var(--gold);}
.pause-rec{margin:-8px 0 22px;font-size:13px;font-weight:800;color:var(--dim);line-height:1.6;}