/* ==========================================================
   バグ猫マージ : styles
   テーマ = 「ふわふわバグ猫のゆるマージパズル」
     淡い空色とラベンダーの背景に、白い雲クッションと
     ステッカーのような猫タイルを置く。発光よりも、紙吹雪・ぷにっとした
     影・肉球スタンプの気配で、へんてこかわいい手触りにする。

   盤面内(#boardInner)の座標はすべて「論理px(1セル=100px)」。
   画面サイズへの追従は #boardInner の transform:scale() だけで行う。
   ========================================================== */

:root{
  /* 地：淡すぎると猫タイルが沈むので、彩度を上げてポップに寄せる */
  --bg:#efe6d8;
  --bg-soft:#f8f0e4;
  --bg-dot:#e2d4c2;
  --grid:transparent;

  /* 文字 */
  --ink:#674d39;
  --ink-dim:#9a8068;
  --stroke:#ffffff;        /* ステッカー風に文字を浮かせるための輪郭 */

  /* アクセント：はっきり見える濃さにする */
  --cyan:#79b8c8;
  --magenta:#f28f55;
  --amber:#f2a12f;
  --mint:#b9c77b;
  --grape:#7f7bcc;

  /* 面：モコモコは白い雲クッション。猫タイルはステッカーとして載せる。 */
  --blob:#fff8ed;
  --blob-shadow:#d7c3aa;
  --panel:#fffaf2;
  --panel-2:#f8e2bf;
  --line:rgba(146,106,66,.18);

  --app-max-w:520px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  /* 単色ベタ＋方眼だけ。色相をひとつに絞って盤面と猫タイルを最優先で立たせる */
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 12% 14%, rgba(226,212,194,.46) 0 34px, transparent 35px),
    radial-gradient(circle at 90% 22%, rgba(226,212,194,.42) 0 27px, transparent 28px),
    radial-gradient(circle at 30% 89%, rgba(226,212,194,.38) 0 32px, transparent 33px),
    radial-gradient(circle at 78% 93%, rgba(226,212,194,.34) 0 29px, transparent 30px),
    linear-gradient(180deg,var(--bg-soft),var(--bg));
  color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:800;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
/* ---------- 9:16 ステージ（Safe Area 対応） ---------- */
#stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
#app{
  position:relative;
  width:min(100%, calc((100dvh - var(--safe-t) - var(--safe-b)) * 9 / 16), var(--app-max-w));
  height:min(100%, calc((100vw - var(--safe-l) - var(--safe-r)) * 16 / 9), calc(var(--app-max-w) * 16 / 9));
  display:flex;flex-direction:column;
}
@supports not (height:100dvh){
  #app{width:min(100%, calc((100vh - var(--safe-t) - var(--safe-b)) * 9 / 16), var(--app-max-w))}
}

/* ================= 上部 HUD ================= */
#hud{
  position:relative;flex:0 0 auto;z-index:10;
  padding:clamp(8px,2.2vh,20px) 5% 0;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
}
.hud-best{display:flex;flex-direction:column;gap:3px;line-height:1}
.hud-label{
  font-size:clamp(10px,2.9vw,14px);letter-spacing:.14em;
  /* 濃い青地なので、白抜き＋濃い縁で読ませる */
  color:#ffffff;
  -webkit-text-stroke:3px rgba(40,60,120,.55);paint-order:stroke fill;
}
.hud-value{
  font-size:clamp(17px,4.8vw,25px);color:var(--ink);
  -webkit-text-stroke:4px var(--stroke);paint-order:stroke fill;
}
.gear{
  width:clamp(36px,9.5vw,50px);height:clamp(36px,9.5vw,50px);
  padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 5px 0 rgba(132,91,119,.18));
  transition:transform .12s ease;
}
.gear:active{transform:scale(.9) rotate(25deg)}
.gear svg{width:100%;height:100%;fill:#fffaf3;stroke:#845b77;stroke-width:1.6}

.hud-center{grid-column:1 / -1;text-align:center;margin-top:clamp(0px,1vh,10px)}
.score{
  font-size:clamp(38px,12vw,66px);line-height:1;letter-spacing:.02em;
  color:#6d5784;
  -webkit-text-stroke:9px var(--stroke);paint-order:stroke fill;
  text-shadow:0 5px 0 rgba(132,91,119,.14);
  transition:transform .13s cubic-bezier(.3,1.6,.5,1);
}
.score.bump{transform:scale(1.13)}

.hud-area{
  grid-column:1 / -1;text-align:center;
  font-size:clamp(10px,2.6vw,13px);letter-spacing:.14em;
  color:var(--ink-dim);margin-top:3px;
}
.hud-area .is-max{color:var(--amber);text-shadow:0 2px 0 rgba(255,255,255,.9)}

.fever-meter{
  grid-column:1 / -1;
  width:min(74%, 300px);
  margin:clamp(6px,1.2vh,10px) auto 0;
  opacity:.72;
  transition:opacity .2s, transform .2s;
}
.fever-meter.is-hot{opacity:1;transform:scale(1.03)}
.fever-track{
  height:clamp(8px,2vw,12px);
  padding:2px;
  border-radius:999px;
  background:rgba(255,250,246,.74);
  box-shadow:inset 0 0 0 1px rgba(132,91,119,.12), 0 4px 0 rgba(132,91,119,.1);
  overflow:hidden;
}
.fever-track i{
  display:block;height:100%;width:0%;
  border-radius:999px;
  background:var(--magenta);
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
.fever-label{
  margin-top:4px;
  text-align:center;
  font-size:clamp(9px,2.5vw,12px);
  letter-spacing:.12em;
  color:#ffffff;
  -webkit-text-stroke:3px rgba(40,60,120,.5);paint-order:stroke fill;
}
body.is-fever .fever-meter{opacity:1}
body.is-fever .fever-label{color:#ff7f9e}
body.is-fever #app{animation:feverGlow 1.1s ease-in-out infinite}
@keyframes feverGlow{50%{filter:saturate(1.12) brightness(1.02)}}

.rescue-btn{
  position:absolute;
  right:5%;
  bottom:-10px;
  width:clamp(44px,11vw,58px);
  height:clamp(44px,11vw,58px);
  border:0;
  border-radius:50%;
  background:#fffaf6;
  color:#8b69c9;
  font:inherit;
  cursor:pointer;
  box-shadow:0 5px 0 rgba(132,91,119,.2), 0 0 0 3px rgba(255,255,255,.82);
}
.rescue-btn span{
  display:block;
  font-size:clamp(24px,6vw,32px);
  line-height:1;
}
.rescue-btn b{
  position:absolute;
  right:-3px;top:-4px;
  min-width:20px;height:20px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#ff8db7;
  color:#fff;
  font-size:12px;
}
.rescue-btn:disabled{opacity:.38;cursor:default;filter:grayscale(.35)}

/* 置ける手がなくなったとき、シャッフルが残っていれば強調して促す */
.rescue-btn.is-urgent{
  color:#fff;
  background:#ff8db7;
  animation:rescuePulse .8s ease-in-out infinite;
}
.rescue-btn.is-urgent b{background:#fff;color:#ff5f92}
@keyframes rescuePulse{
  0%,100%{box-shadow:0 5px 0 rgba(132,91,119,.2), 0 0 0 3px rgba(255,141,183,.5)}
  50%{box-shadow:0 5px 0 rgba(132,91,119,.2), 0 0 0 11px rgba(255,141,183,0)}
}
@media (prefers-reduced-motion:reduce){
  .rescue-btn.is-urgent{animation:none}
}

/* ---------- コンボバッジ（コンボが伸びるほど派手になる） ---------- */
.combo-badge{
  position:relative;
  height:clamp(18px,4.6vw,26px);
  margin-top:3px;
  font-size:clamp(13px,4vw,20px);letter-spacing:.1em;
  opacity:0;transform:translateY(-5px) scale(.9);
  transition:opacity .2s,transform .2s;
}
.combo-badge.is-visible{opacity:1;transform:none}
/* 1コンボ：通常表示 */
.combo-lv1{color:#b9d4ff;-webkit-text-stroke:4px var(--stroke);paint-order:stroke fill}
/* 2コンボ：ミントのはずみ */
.combo-lv2{
  color:var(--cyan);-webkit-text-stroke:4px var(--stroke);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(117,201,238,.22);
}
/* 3コンボ：ピンクのはずみ */
.combo-lv3{
  color:var(--magenta);-webkit-text-stroke:4px var(--stroke);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(255,141,183,.24);
  animation:comboPulse .7s ease-in-out infinite;
}
/* 4コンボ以上：紙吹雪カラー */
.combo-lv4{
  color:var(--magenta);
  -webkit-text-stroke:4px var(--stroke);paint-order:stroke fill;
  animation:comboPulse .8s ease-in-out infinite;
  filter:drop-shadow(0 4px 0 rgba(132,91,119,.16));
}
@keyframes comboPulse{50%{transform:scale(1.08)}}
@keyframes rainbowSlide{to{background-position:300% 0}}
@keyframes glitchShift{
  0%{transform:translate(0,0)}
  50%{transform:translate(1.5px,-1px)}
  100%{transform:translate(-1.5px,1px)}
}

/* ================= 盤面 ================= */
#boardStage{
  position:relative;flex:1 1 auto;min-height:0;
  z-index:1;
}
/*
  #boardInner は論理サイズ(900x1200)固定で、盤面エリアより大きくはみ出す。
  そのままだと HUD やオーバーレイのクリックを奪ってしまうため、
  盤面レイヤーは一切ポインタを受け取らない（操作はトレイと window で処理する）。
*/
#boardInner{
  position:absolute;left:0;top:0;
  width:900px;   /* GRID_W(9) × 論理セル100px */
  height:1200px; /* GRID_H(12) × 論理セル100px */
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
}
.layer{position:absolute;inset:0;pointer-events:none}
#layerFx{overflow:visible}
/* モコモコ全体をひとつのグローで包む（セル個別に影を付けない）。
   1つ目は輪郭を締めるリム、2つ目は外側へ広がる発光。 */
#layerBlob{filter:drop-shadow(0 10px 0 rgba(132,91,119,.12))}

/* ---------- モコモコ（角丸の白いマスを重ねて雲の形にする） ---------- */
.blob-cell{
  position:absolute;
  background:
    radial-gradient(55% 42% at 35% 26%, rgba(255,255,255,.95), transparent 72%),
    linear-gradient(180deg,#fffefd,var(--blob));
  border:1px solid rgba(255,255,255,.85);
}
.blob-shadow{position:absolute;background:var(--blob-shadow);opacity:.45}

/* 追加予定セルの予告（小さな光の泡） */
.blob-pending{
  position:absolute;
  background:rgba(255,255,255,.78);
  box-shadow:0 0 0 8px rgba(255,141,183,.18);
  animation:pendingPulse 1s ease-in-out infinite;
}
@keyframes pendingPulse{
  0%,100%{transform:scale(.36);opacity:.5}
  50%{transform:scale(.52);opacity:1}
}
/* 弾むように膨らむ */
.blob-grow{animation:blobGrow .32s cubic-bezier(.22,1.7,.4,1)}
@keyframes blobGrow{
  0%{transform:scale(.2);opacity:.35}
  60%{transform:scale(1.14)}
  100%{transform:scale(1);opacity:1}
}
/* 追加直後のほのかな点滅 */
.blob-blink{animation:blobBlink .5s ease-in-out 2}
@keyframes blobBlink{50%{background:#ffe2ef}}

/* ---------- 猫タイル ---------- */
.tile{
  position:absolute;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 6px 0 rgba(132,91,119,.14));
}
.tile-drop{animation:tileDrop .26s cubic-bezier(.25,1.7,.5,1)}
@keyframes tileDrop{
  0%{transform:scale(.5) translateY(-14px);opacity:.2}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.tile-flash{
  filter:brightness(1.08) drop-shadow(0 7px 0 rgba(132,91,119,.16)) drop-shadow(0 0 12px rgba(255,255,255,.95));
  animation:tileFlash .26s ease-out;
}
@keyframes tileFlash{50%{transform:scale(1.1)}}

/* ---------- 配置プレビュー ---------- */
.ghost{position:absolute;object-fit:contain;pointer-events:none}
.ghost-ok{opacity:.66;filter:drop-shadow(0 0 8px rgba(34,227,255,.5))}
.ghost-ng{opacity:.4}
/* 離す前に「揃う」と分かるレインボープレビュー */
.ghost-match{
  opacity:.9;
  filter:drop-shadow(0 6px 0 rgba(132,91,119,.12)) drop-shadow(0 0 12px rgba(255,255,255,.95));
  animation:matchPulse .6s ease-in-out infinite;
}
/* 揃う対象になった既存タイル */
.tile-match-preview{
  filter:drop-shadow(0 6px 0 rgba(132,91,119,.14)) drop-shadow(0 0 14px rgba(255,255,255,1)) brightness(1.08);
  animation:matchPulse .6s ease-in-out infinite;
}
@keyframes matchPulse{50%{transform:scale(1.06)}}

/* ---------- チュートリアルのお手本 ---------- */
.target-hint{
  position:absolute;
  border:6px dashed var(--magenta);
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 8px rgba(255,141,183,.16) inset;
  animation:hintPulse .9s ease-in-out infinite;
}
@keyframes hintPulse{50%{opacity:.45;transform:scale(1.04)}}

/* ---------- ピクセル分解 ---------- */
.dissolve{position:absolute;pointer-events:none}
.dissolve-px{
  position:absolute;
  background-repeat:no-repeat;
  animation:pxFly .42s ease-in forwards;
}
@keyframes pxFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  35%{opacity:1;transform:translate(calc(var(--dx) * .3),calc(var(--dy) * .3)) scale(1.25)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0)}
}

/* ================= ピース（トレイ / ドラッグ中） ================= */
.piece{position:relative}
.piece-tile{position:absolute;object-fit:contain;pointer-events:none;display:block}

#tray{
  position:relative;z-index:10;
  flex:0 0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;justify-items:center;
  /* 盤面とピースの間に十分な余白を確保する */
  height:clamp(98px,18.5vh,190px);
  padding:clamp(6px,1.6vh,14px) 3% clamp(8px,2.4vh,22px);
}
/* スロットのどこを触ってもそのピースを掴める（当たり判定を広く取る） */
.tray-slot{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
  cursor:grab;
}
.tray-piece{
  cursor:grab;touch-action:none;
  filter:drop-shadow(0 7px 0 rgba(132,91,119,.16));
  animation:pieceIn .3s cubic-bezier(.25,1.5,.5,1) backwards;
  transition:opacity .2s, transform .2s;
}
@keyframes pieceIn{from{opacity:0;transform:translateY(20px) scale(.7)}to{opacity:1;transform:none}}
.tray-piece.is-dragging{opacity:0}
.tray-piece.is-spent{opacity:0;transform:scale(.4);pointer-events:none}
@keyframes bugCatPulse{50%{transform:translateY(-4px) rotate(-2deg) scale(1.04)}}
.tray-piece.shake{animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
/* ゲームオーバー：待機ピースがどこにも置けない状態 */
#tray.is-dead{opacity:.6;filter:none}
#tray.is-dead .tray-piece{cursor:default;filter:none}

#dragLayer{position:fixed;inset:0;pointer-events:none;z-index:60}
.drag-piece{
  position:absolute;left:0;top:0;
  filter:drop-shadow(0 10px 0 rgba(132,91,119,.16));
  will-change:transform;
}
/* 揃う位置にかざしている間 */
.drag-piece.drag-match{
  filter:drop-shadow(0 10px 0 rgba(132,91,119,.16)) drop-shadow(0 0 16px rgba(255,255,255,1));
}

/* ================= 画面演出 ================= */
#fxScreen{position:absolute;inset:0;pointer-events:none;z-index:55;overflow:hidden}

.banner{
  position:absolute;left:50%;top:29%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-size:clamp(24px,7.5vw,42px);letter-spacing:.1em;
  -webkit-text-stroke:8px var(--stroke);paint-order:stroke fill;
  animation:bannerIn 1.2s cubic-bezier(.2,1.4,.4,1) forwards;
}
.banner-small{font-size:clamp(13px,3.8vw,19px);-webkit-text-stroke:5px var(--stroke);top:34%}
.banner-match{color:var(--magenta);text-shadow:0 5px 0 rgba(132,91,119,.14)}
.banner-combo{color:#8b69c9;text-shadow:0 5px 0 rgba(132,91,119,.14)}
.banner-area{color:var(--mint);font-size:clamp(18px,5.4vw,30px);text-shadow:0 5px 0 rgba(132,91,119,.14)}
.banner-max{color:var(--amber);font-size:clamp(18px,5.4vw,30px);top:23%;text-shadow:0 5px 0 rgba(132,91,119,.14)}
.banner-lost{color:#9c8cae}
.banner-fever{
  color:#ff7f9e;
  font-size:clamp(26px,8vw,46px);
  text-shadow:0 6px 0 rgba(132,91,119,.18);
}
.banner-glitch{
  color:var(--magenta);
  filter:drop-shadow(0 5px 0 rgba(132,91,119,.15));
  animation:bannerIn 1.2s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes bannerIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  30%{transform:translate(-50%,-50%) scale(1)}
  75%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-78%) scale(.95)}
}

.score-pop{
  position:absolute;transform:translate(-50%,-50%);
  font-size:clamp(16px,4.8vw,26px);color:var(--amber);white-space:nowrap;
  -webkit-text-stroke:6px var(--stroke);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(132,91,119,.13);
  animation:scorePop .95s ease-out forwards;
}
@keyframes scorePop{
  0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(1)}
}

.spark{
  position:absolute;width:10px;height:10px;border-radius:50% 50% 45% 45%;
  transform:translate(-50%,-50%);
  animation:sparkFly .6s ease-out forwards;
  box-shadow:0 0 0 2px rgba(255,255,255,.8);
}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2)}
}

/* はじけた瞬間の閃光。白い芯＋色のにじみで淡い背景でも一拍が立つ */
.impact-flash{
  position:absolute;
  width:var(--size);height:var(--size);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.9) 16%,
    var(--flash-color) 34%,
    transparent 70%);
  transform:translate(-50%,-50%) scale(.15);
  animation:impactFlash .44s cubic-bezier(.1,.92,.3,1) forwards;
}
@keyframes impactFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}
}

.burst-pop,
.burst-ribbon{
  position:absolute;
  left:0;top:0;
  transform:translate(-50%,-50%) scale(.3) rotate(0deg);
  pointer-events:none;
  /* 淡い盤面の上でも粒が沈まないよう、白ではなく淡い影で縁取る */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 0 3.5px rgba(124,84,112,.22),
    0 4px 7px rgba(124,84,112,.24);
  will-change:transform, opacity;
}
.burst-pop{
  width:clamp(12px,3.2vw,19px);
  height:clamp(12px,3.2vw,19px);
  border-radius:50%;
  animation:burstPop .88s cubic-bezier(.14,.86,.3,1) forwards;
}
.burst-ribbon{
  width:clamp(10px,2.8vw,16px);
  height:clamp(22px,5.4vw,34px);
  border-radius:8px 8px 4px 4px;
  animation:burstRibbon .95s cubic-bezier(.14,.88,.3,1) forwards;
}
.burst-ring{
  position:absolute;
  width:20px;height:20px;
  border:6px solid var(--ring-color);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  opacity:.9;
  box-shadow:0 0 0 3px rgba(255,255,255,.75), 0 0 16px var(--ring-color);
  animation:burstRing .9s cubic-bezier(.15,.85,.3,1) forwards;
}
/* 飛び出してから重力で落ちる（--gy）。頂点で一度ためを作る */
@keyframes burstPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  14%{opacity:1;transform:translate(calc(-50% + var(--dx) * .34),calc(-50% + var(--dy) * .34)) scale(1.45)}
  46%{opacity:1;transform:translate(calc(-50% + var(--dx) * .92),calc(-50% + var(--dy) * .92)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + var(--gy))) scale(.5)}
}
@keyframes burstRibbon{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  14%{opacity:1;transform:translate(calc(-50% + var(--dx) * .3),calc(-50% + var(--dy) * .3)) scale(1.3) rotate(calc(var(--rot) * .3))}
  46%{opacity:1;transform:translate(calc(-50% + var(--dx) * .9),calc(-50% + var(--dy) * .9)) scale(1) rotate(calc(var(--rot) * .7))}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + var(--gy))) scale(.6) rotate(var(--rot))}
}
@keyframes burstRing{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.25)}
  70%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,-50%) scale(8.5)}
}

.paw-stamp{
  position:absolute;
  width:clamp(38px,9vw,54px);
  height:clamp(34px,8vw,50px);
  transform:translate(-50%,-50%) rotate(var(--rot)) scale(.4);
  opacity:0;
  animation:pawPop .72s cubic-bezier(.2,1.55,.4,1) forwards;
}
.paw-stamp::before{
  content:"";
  position:absolute;
  left:50%;top:54%;
  width:42%;height:42%;
  transform:translate(-50%,-50%);
  border-radius:50% 50% 45% 45%;
  background:rgba(255,141,183,.75);
  box-shadow:
    -13px -14px 0 -5px rgba(255,141,183,.75),
    -4px -20px 0 -6px rgba(255,141,183,.75),
    7px -20px 0 -6px rgba(255,141,183,.75),
    15px -13px 0 -6px rgba(255,141,183,.75);
}
@keyframes pawPop{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scale(.4)}
  28%{opacity:.95;transform:translate(-50%,-50%) rotate(var(--rot)) scale(1.12)}
  72%{opacity:.75}
  100%{opacity:0;transform:translate(-50%,-64%) rotate(var(--rot)) scale(.96)}
}

.confetti{
  position:absolute;
  top:-18px;
  width:11px;height:17px;border-radius:3px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85), 0 2px 5px rgba(124,84,112,.22);
  transform:translateX(0) rotate(0deg);
  animation:confettiFall 1.15s ease-in forwards;
}
@keyframes confettiFall{
  to{opacity:0;transform:translate(var(--drift), var(--fall)) rotate(var(--rot))}
}

body.combo-jolt #app{animation:comboJolt .38s cubic-bezier(.2,1.5,.4,1)}
body.combo-jolt.combo-jolt-hard #app{animation:comboJoltHard .46s cubic-bezier(.2,1.5,.4,1)}
body.is-fever-pop #app{animation:feverPop .8s cubic-bezier(.2,1.45,.4,1)}
@keyframes comboJolt{
  0%,100%{transform:scale(1)}
  30%{transform:scale(1.02) rotate(-.45deg)}
  62%{transform:scale(1.012) rotate(.45deg)}
}
@keyframes comboJoltHard{
  0%,100%{transform:scale(1) translateX(0)}
  18%{transform:scale(1.035) translateX(-5px) rotate(-.8deg)}
  42%{transform:scale(1.025) translateX(5px) rotate(.8deg)}
  70%{transform:scale(1.012) translateX(-2px) rotate(-.3deg)}
}
@keyframes feverPop{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.03)}
}

/* ================= チュートリアル ================= */
.tutorial{
  position:absolute;inset:0;z-index:70;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(60px,14vh,140px) 7% 0;
  background:rgba(120,102,150,.18);
  transition:opacity .22s, background .22s;
}
.tutorial.hidden{opacity:0;pointer-events:none}
/* 実際に置いてもらう段階では盤面を触れるようにする */
.tutorial.tutorial-compact{
  background:transparent;pointer-events:none;
  padding-top:clamp(40px,9vh,90px);
}
.tutorial-card{
  width:100%;max-width:340px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;border-bottom:6px solid #e3cce1;
  box-shadow:0 16px 0 rgba(132,91,119,.12), 0 20px 32px rgba(132,91,119,.14);
  padding:clamp(14px,4.5vw,22px);text-align:center;
  animation:panelIn .28s cubic-bezier(.25,1.5,.5,1);
}
.tutorial-step{
  font-size:clamp(11px,3vw,14px);color:var(--magenta);letter-spacing:.16em;margin-bottom:8px;
}
.tutorial-title{
  font-size:clamp(16px,4.8vw,23px);color:var(--ink);line-height:1.35;
}
.tutorial-body{
  font-size:clamp(12px,3.4vw,16px);color:var(--ink-dim);margin-top:8px;line-height:1.5;
}
.tutorial-card .btn{margin-top:14px}
.tutorial-compact .tutorial-card{
  background:rgba(255,250,246,.96);pointer-events:auto;max-width:300px;
}

/* ================= オーバーレイ ================= */
.overlay{
  position:absolute;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:8%;
  transition:opacity .22s;
}
/* 暗転はアプリ枠ではなく画面全体を覆う（レターボックス部分も含める） */
.overlay::before{
  content:"";position:fixed;inset:0;
  background:rgba(109,87,132,.18);
  backdrop-filter:blur(3px);
}
.overlay > *{position:relative}
.overlay.hidden{opacity:0;pointer-events:none}
.panel{
  width:100%;max-width:340px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:24px;border-bottom:7px solid #e3cce1;
  box-shadow:0 16px 0 rgba(132,91,119,.12), 0 22px 34px rgba(132,91,119,.14);
  padding:clamp(16px,5vw,26px);text-align:center;
  animation:panelIn .28s cubic-bezier(.25,1.5,.5,1);
}
@keyframes panelIn{from{transform:scale(.82) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.panel-title{
  margin:0 0 16px;font-size:clamp(19px,5.6vw,26px);
  color:#8b69c9;letter-spacing:.1em;
  text-shadow:0 2px 0 rgba(255,255,255,.95);
}
.panel-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.panel-rows .row{
  display:flex;justify-content:space-between;align-items:baseline;
  background:#f6f0ff;
  border:1px solid rgba(132,91,119,.1);
  border-radius:12px;padding:8px 14px;
  font-size:clamp(12px,3.5vw,16px);color:var(--ink-dim);
}
.panel-rows b{font-size:clamp(17px,5vw,22px);color:var(--ink)}


.btn{
  display:block;width:100%;margin-top:10px;
  padding:13px;border:0;border-radius:14px;
  background:var(--panel-2);color:var(--ink);
  font:inherit;font-size:clamp(14px,4vw,17px);
  border-bottom:5px solid #d7c5ef;cursor:pointer;
  transition:transform .1s;
}
.btn.primary{
  background:#8bd9c8;color:#42546a;border-bottom-color:#5fb9a6;
  box-shadow:0 10px 18px rgba(95,185,166,.2);
}
.btn:active{transform:translateY(3px);border-bottom-width:2px}
.btn.hidden{display:none}
.btn.with-icon{display:flex;align-items:center;justify-content:center;gap:8px}
.btn-icon{width:1.15em;height:1.15em;fill:currentColor;flex:0 0 auto}

.toggle{
  display:flex;align-items:center;justify-content:space-between;
  background:#f6f0ff;
  border:1px solid rgba(132,91,119,.1);
  border-radius:12px;padding:10px 14px;margin-bottom:10px;
  font-size:clamp(13px,3.7vw,16px);color:var(--ink-dim);cursor:pointer;
}
.toggle input{display:none}
.toggle i{
  width:46px;height:26px;border-radius:13px;background:#d7c5ef;
  position:relative;transition:background .18s, box-shadow .18s;flex:0 0 auto;
}
.toggle i::after{
  content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fffaf6;
  transition:transform .18s, background .18s;
}
.toggle input:checked + i{background:#8bd9c8;box-shadow:0 6px 12px rgba(95,185,166,.22)}
.toggle input:checked + i::after{transform:translateX(20px);background:#fffaf6}


/* ==========================================================
   タイトル画面
   ========================================================== */
.title-screen{
  position:absolute;inset:0;z-index:75;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(10px,2.5vh,22px) 6% clamp(14px,3vh,28px);
  /* タイトルも地は body の単色をそのまま見せる（にじみは置かない） */
  background:transparent;
  transition:opacity .25s;
}
.title-screen.hidden{opacity:0;pointer-events:none}
/* タイトル表示中は盤面まわりを隠す */
body.is-title #hud,
body.is-title #boardStage,
body.is-title #tray{visibility:hidden}

/* ---- 背景を漂うへんてこ猫 ---- */
.title-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.drift-cat{
  position:absolute;opacity:.34;
  filter:drop-shadow(0 8px 0 rgba(132,91,119,.12));
  animation:drift 8s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-16px) rotate(6deg)}
}

/* ---- 上部のボタン列 ---- */
.title-top{
  position:relative;z-index:1;
  width:100%;display:flex;align-items:center;justify-content:space-between;
}
.circle-btn{
  width:clamp(48px,13vw,68px);height:clamp(48px,13vw,68px);
  border-radius:50%;border:3px solid #fffaf6;
  background:#fffaf6;color:var(--ink);
  font:inherit;font-size:clamp(13px,3.6vw,17px);
  cursor:pointer;
  box-shadow:0 5px 0 rgba(132,91,119,.22);
  transition:transform .1s,box-shadow .1s;
}
.circle-btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(132,91,119,.22)}

/* ---- ロゴ（4枚重ねでステッカー感を作る） ---- */
.title-logo{
  position:relative;z-index:1;
  margin-top:clamp(6px,2vh,20px);
  height:clamp(72px,22vw,124px);
  width:100%;
}
.logo-layer{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(38px,12.5vw,70px);
  font-weight:900;letter-spacing:0;line-height:1;
  white-space:nowrap;
  font-family:"Hiragino Maru Gothic ProN","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
}
.logo-layer span{display:inline-block}
/* 1枚目: ふんわり落ち影 */
.logo-glow{filter:none;opacity:1;transform:translateY(10px)}
.logo-glow span{color:#c6a8cf;-webkit-text-stroke:13px #c6a8cf;paint-order:stroke fill}
/* 2枚目: 白いステッカーフチ */
.logo-halo span{color:#fffaf6;-webkit-text-stroke:18px #fffaf6;paint-order:stroke fill}
/* 3枚目: 色面 */
.logo-tube span.ink-a{color:#ff7f9e;-webkit-text-stroke:8px #ff7f9e;paint-order:stroke fill}
.logo-tube span.ink-b{color:#67bfae;-webkit-text-stroke:8px #67bfae;paint-order:stroke fill}
/* 4枚目: 明るい文字芯 */
.logo-fill span{color:#fffaf6}

.title-tagline{
  position:relative;z-index:1;
  margin-top:clamp(6px,1.8vh,14px);
  font-size:clamp(12px,3.6vw,17px);
  color:#ffffff;letter-spacing:.06em;
  -webkit-text-stroke:4px rgba(40,60,120,.55);paint-order:stroke fill;
}

/* ---- スコア ---- */
.title-scores{
  position:relative;z-index:1;
  margin-top:clamp(10px,3.5vh,34px);text-align:center;
}
.title-best-label{
  font-size:clamp(11px,3.1vw,15px);color:#ffffff;letter-spacing:.16em;
  -webkit-text-stroke:3px rgba(40,60,120,.5);paint-order:stroke fill;
}
.title-best{
  font-size:clamp(34px,11vw,60px);line-height:1.15;color:#6d5784;
  -webkit-text-stroke:8px var(--stroke);paint-order:stroke fill;
  text-shadow:0 5px 0 rgba(132,91,119,.14);
}
.title-sub{
  margin-top:2px;font-size:clamp(11px,3vw,15px);color:#e9f0ff;
  -webkit-text-stroke:3px rgba(40,60,120,.5);paint-order:stroke fill;
}
.title-sub b{color:#ffffff}

/* ---- 遊び方の3行 ---- */
.title-howto{
  position:relative;z-index:1;
  list-style:none;margin:clamp(14px,4vh,34px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(6px,1.4vh,10px);
  width:100%;max-width:330px;
}
.title-howto li{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,250,246,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  padding:clamp(6px,1.4vh,9px) 14px;
  font-size:clamp(11px,3.1vw,15px);
  color:var(--ink);
}
.title-howto b{
  flex:0 0 auto;
  width:20px;height:20px;border-radius:50%;
  background:#ff7f9e;color:#fff;
  display:grid;place-items:center;font-size:12px;
}
.title-howto em{font-style:normal;color:#67bfae}

/* ---- あそびかた / はじめから ---- */
.title-actions{
  position:relative;z-index:1;
  margin-top:auto;margin-bottom:clamp(10px,3vh,26px);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
}
.chip-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;border:0;border-radius:999px;
  background:#ff8db7;color:#fff;
  border-bottom:5px solid #d96c97;
  box-shadow:0 8px 16px rgba(217,108,151,.2);
  font:inherit;font-size:clamp(12px,3.4vw,16px);cursor:pointer;
  transition:transform .1s;
}
.chip-btn:active{transform:translateY(3px);border-bottom-width:2px}
.chip-btn.hidden{display:none}
.chip-icon{
  width:22px;height:22px;border-radius:50%;
  background:#fffaf6;color:#ff7f9e;
  display:grid;place-items:center;font-size:15px;
}
/* 「はじめから」は控えめに */
.chip-ghost{
  background:#fffaf6;color:var(--ink-dim);
  border-bottom-color:#e3cce1;box-shadow:none;
}
.chip-ghost .chip-icon{background:#f2e8ff;color:#8b69c9}

/* ---- ▶ はじめる ---- */
.play-arrow{
  position:relative;z-index:1;
  width:clamp(96px,28vw,150px);
  padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 0 rgba(132,91,119,.18));
  animation:arrowNudge 1.5s ease-in-out infinite;
  transition:transform .1s;
}
.play-arrow svg{width:100%;height:auto;display:block}
.play-arrow:active{transform:translateY(4px) scale(.96);animation:none}
@keyframes arrowNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(9px)}
}
.play-label{
  position:relative;z-index:1;
  margin-top:8px;
  font-size:clamp(12px,3.4vw,16px);color:#8b69c9;letter-spacing:.14em;
  text-shadow:0 2px 0 rgba(255,255,255,.9);
}
.play-label.hidden{display:none}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  #boardInner{transition:none !important}
  .drift-cat,.play-arrow{animation:none !important}
}

/* ==========================================================
   データバブル：猫タイルがデータへ分解される演出
   ========================================================== */

/* 粒子を描くcanvas。盤面より前・オーバーレイより後ろ */
#fxCanvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:40;
}

/* --- 2. 0.1秒の小刻みな振動 --- */
.tile-jitter{animation:tileJitter .1s steps(2) 2}
@keyframes tileJitter{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,-2px)}
  100%{transform:translate(0,0)}
}

/* --- 3. RGB方向へのずれ --- */
.tile-rgb{
  filter:
    drop-shadow(-3px 0 0 rgba(34,227,255,.85))
    drop-shadow(3px 0 0 rgba(255,63,164,.85));
  animation:tileRgb .16s steps(3) infinite;
}
@keyframes tileRgb{
  0%{transform:translateX(0)}
  50%{transform:translateX(-1.5px)}
  100%{transform:translateX(1.5px)}
}

/* --- 4. 中央から潰れる --- */
.tile-squash{animation:tileSquash .14s cubic-bezier(.4,0,.7,.2) forwards}
@keyframes tileSquash{
  0%{transform:scale(1,1)}
  55%{transform:scale(1.22,.5)}
  100%{transform:scale(.15,.06);opacity:.2}
}

/* --- バグ表現：輪郭が一瞬ワイヤーフレーム風になる --- */
.tile-wire{
  filter:brightness(2.4) contrast(2.6) saturate(0);
  outline:2px dashed rgba(34,227,255,.9);
  outline-offset:-3px;
}

/* --- 未完成時：軽く沈むだけ（グレーアウトはしない） --- */
.tile-sink{animation:tileSink .22s ease-out}
@keyframes tileSink{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(3px) scale(.9,.86)}
  100%{transform:translateY(0) scale(1)}
}

/* --- 3コンボ以上：モコモコの輪郭が一瞬発光 --- */
.blob-surge{animation:blobSurge .32s ease-out}
@keyframes blobSurge{
  0%,100%{filter:none}
  40%{filter:drop-shadow(0 0 14px rgba(34,227,255,.95)) drop-shadow(0 0 26px rgba(255,63,164,.6))}
}

/* --- 4コンボ以上：0.2秒だけの薄い走査線 --- */
#scanline{
  position:absolute;inset:0;
  pointer-events:none;z-index:52;
  opacity:0;
  background:repeating-linear-gradient(
    180deg,
    rgba(242,161,47,.14) 0 2px,
    transparent 2px 5px);
}
#scanline.is-on{animation:scanFlash .2s linear}
@keyframes scanFlash{
  0%{opacity:0}
  30%{opacity:1}
  100%{opacity:0}
}

/* --- コンボ文字の後ろの半透明な猫耳バブル --- */
.combo-pop{
  /* バナー(29%)とぶつからないよう、はじけている盤面の上あたりに置く */
  position:absolute;left:50%;top:44%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  pointer-events:none;
  animation:comboPopIn .8s cubic-bezier(.2,1.4,.4,1) forwards;
}
.combo-pop .combo-pop-bubble{
  position:absolute;
  width:clamp(96px,30vw,150px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  box-shadow:0 0 26px rgba(34,227,255,.35);
}
.combo-pop .combo-pop-text{
  position:relative;
  white-space:nowrap;
  font-size:clamp(20px,6.4vw,34px);letter-spacing:.1em;
  font-weight:900;
  color:#ff3fa4;
  -webkit-text-stroke:7px #ffffff;paint-order:stroke fill;
  text-shadow:0 0 14px rgba(34,227,255,.55);
}
/*
  4コンボ以上は文字をRGBずれさせる。
  background-clip:text は白フチと併用すると塗りが消えてしまうので使わない。
*/
.combo-pop.is-rgb .combo-pop-text{
  color:#ffffff;
  -webkit-text-stroke:7px #3a2350;paint-order:stroke fill;
  text-shadow:none;
}
.combo-pop.is-rgb .combo-pop-text{
  filter:
    drop-shadow(-3px 0 0 rgba(34,227,255,.95))
    drop-shadow(3px 0 0 rgba(255,63,164,.95));
  animation:comboRgbShift .12s steps(2) infinite;
}
@keyframes comboRgbShift{
  0%{transform:translateX(-1.5px)}
  100%{transform:translateX(1.5px)}
}
@keyframes comboPopIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  32%{transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-72%) scale(.96)}
}

@media (prefers-reduced-motion:reduce){
  .tile-rgb,.combo-pop.is-rgb .combo-pop-text{animation:none}
}

/* --- ゲームオーバー：置かれたタイルが順に色を失う --- */
.tile-dim{animation:tileDim .32s ease-out both}
@keyframes tileDim{
  0%{transform:scale(1)}
  40%{transform:scale(.88)}
  100%{transform:scale(1);opacity:.72}
}

/* ==========================================================
   Beige x orange theme refresh
   ========================================================== */
body{
  background-color:#efe6d8;
  background-image:
    radial-gradient(circle at 12% 14%, rgba(226,212,194,.46) 0 34px, transparent 35px),
    radial-gradient(circle at 90% 22%, rgba(226,212,194,.42) 0 27px, transparent 28px),
    radial-gradient(circle at 30% 89%, rgba(226,212,194,.38) 0 32px, transparent 33px),
    radial-gradient(circle at 78% 93%, rgba(226,212,194,.34) 0 29px, transparent 30px),
    linear-gradient(180deg,#f8f0e4,#efe6d8);
}

.hud-label,
.fever-label,
.title-best-label,
.title-tagline,
.title-sub{
  color:#9a734d;
  -webkit-text-stroke:0;
  text-shadow:0 2px 0 rgba(255,255,255,.72);
}
.hud-value,
.score,
.title-best{
  color:#7b573b;
  text-shadow:0 5px 0 rgba(151,109,65,.13);
}
.gear svg{
  fill:#fffaf2;
  stroke:#b77732;
}
.fever-track{
  background:rgba(255,250,242,.86);
  box-shadow:inset 0 0 0 1px rgba(146,106,66,.14), 0 4px 0 rgba(146,106,66,.1);
}
.fever-track i{
  background:linear-gradient(90deg,#f8d7a9,#f2a12f,#f08b3e);
}
body.is-fever .fever-label,
.banner-fever{
  color:#e98528;
}
.rescue-btn,
.circle-btn{
  background:#fffaf2;
  color:#b77732;
  box-shadow:0 5px 0 rgba(146,106,66,.18), 0 0 0 3px rgba(255,255,255,.78);
}
.rescue-btn b,
.title-howto b,
.chip-btn{
  background:#f2a12f;
  color:#fff;
}
.combo-lv1{color:#c8ad8d}
.combo-lv2{color:#d99233;text-shadow:0 4px 0 rgba(217,146,51,.2)}
.combo-lv3,
.combo-lv4,
.banner-match,
.banner-combo,
.banner-glitch{
  color:#f08b3e;
  text-shadow:0 5px 0 rgba(151,109,65,.14);
}
.banner-area{color:#b9a94e}
.banner-max{color:#f2a12f}
.banner-lost{color:#a58d73}

.blob-cell{
  background:
    radial-gradient(55% 42% at 35% 26%, rgba(255,255,255,.96), transparent 72%),
    linear-gradient(180deg,#fffdf8,#fff6e9);
  border:1px solid rgba(255,255,255,.92);
}
.blob-shadow{
  background:#d7c3aa;
  opacity:.48;
}
.blob-pending{
  background:rgba(255,250,242,.78);
  box-shadow:0 0 0 8px rgba(242,161,47,.18);
}
.blob-blink{animation:blobBlinkBeige .5s ease-in-out 2}
@keyframes blobBlinkBeige{50%{background:#ffe5bd}}
.tile-flash,
.tile-match-preview,
.ghost-match{
  filter:drop-shadow(0 6px 0 rgba(146,106,66,.14)) drop-shadow(0 0 14px rgba(255,255,255,.98)) brightness(1.08);
}
.ghost-ok{filter:drop-shadow(0 0 8px rgba(242,161,47,.42))}
.target-hint{
  border-color:#f2a12f;
  background:rgba(255,250,242,.36);
  box-shadow:0 0 0 8px rgba(242,161,47,.16) inset;
}

.panel,
.tutorial-card{
  background:#fffaf2;
  border-color:rgba(146,106,66,.16);
  border-bottom-color:#dfc5a6;
  box-shadow:0 16px 0 rgba(146,106,66,.12), 0 22px 34px rgba(146,106,66,.13);
}
.panel-title{
  color:#b77732;
}
.panel-rows .row,
.tutorial-step{
  color:#e98528;
}
.btn{
  background:#f8e2bf;
  border-bottom-color:#d8b486;
}
.btn.primary{
  background:#f2a12f;
  color:#fff;
  border-bottom-color:#d9821e;
  box-shadow:0 10px 18px rgba(217,130,30,.22);
}
.toggle i{
  background:#dfc5a6;
}
.toggle input:checked + i{
  background:#f2a12f;
  box-shadow:0 6px 12px rgba(217,130,30,.24);
}

.drift-cat{
  opacity:.22;
  filter:drop-shadow(0 8px 0 rgba(146,106,66,.1)) sepia(.18) saturate(.82);
}
.logo-glow span{
  color:#dec6a8;
  -webkit-text-stroke-color:#dec6a8;
}
.logo-tube span.ink-a{
  color:#f2a12f;
  -webkit-text-stroke-color:#f2a12f;
}
.logo-tube span.ink-b{
  color:#b9a94e;
  -webkit-text-stroke-color:#b9a94e;
}
.title-howto li{
  background:rgba(255,250,242,.86);
  border-color:rgba(255,255,255,.9);
}
.title-howto em{
  color:#d99233;
}
.chip-btn{
  border-bottom-color:#d9821e;
  box-shadow:0 8px 16px rgba(217,130,30,.22);
}
.chip-icon{
  background:#fffaf2;
  color:#d9821e;
}
.chip-ghost{
  background:#fffaf2;
  color:#9a8068;
  border-bottom-color:#dfc5a6;
}
.chip-ghost .chip-icon{
  background:#f8e2bf;
  color:#b77732;
}
.play-label{
  color:#b77732;
}

/* Title logo: thicker, rounder, more pop */
.title-logo{
  height:clamp(88px,24vw,142px);
  margin-top:clamp(4px,1.5vh,16px);
  filter:drop-shadow(0 12px 0 rgba(159,108,53,.18));
}
.logo-layer{
  font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Noto Sans JP","Segoe UI",system-ui,sans-serif;
  font-size:clamp(46px,13.8vw,82px);
  font-weight:900;
  letter-spacing:.015em;
}
.logo-layer span{
  display:inline-block;
  transform-origin:50% 62%;
}
.logo-glow{
  transform:translate(8px,14px);
}
.logo-glow span{
  color:#d7bd98;
  -webkit-text-stroke:18px #d7bd98;
  paint-order:stroke fill;
}
.logo-halo span{
  color:#fffaf2;
  -webkit-text-stroke:24px #fffaf2;
  paint-order:stroke fill;
}
.logo-tube span.ink-a{
  color:#ff9f1c;
  -webkit-text-stroke:12px #ff9f1c;
  paint-order:stroke fill;
}
.logo-tube span.ink-b{
  color:#b7aa35;
  -webkit-text-stroke:12px #b7aa35;
  paint-order:stroke fill;
}
.logo-fill span{
  color:#fffef8;
  text-shadow:
    0 2px 0 rgba(255,255,255,.7),
    0 -2px 0 rgba(255,255,255,.45);
}
.logo-fill span.ink-a{
  color:#fff9e8;
}
.logo-fill span.ink-b{
  color:#fffde7;
}

/* ==========================================================
   ランキング
   ========================================================== */

/* タイトルの「今週の順位」 */
.title-rank{
  margin-top:4px;
  font-size:clamp(11px,3vw,15px);
  color:#ffffff;letter-spacing:.06em;
  -webkit-text-stroke:3px rgba(40,60,120,.5);paint-order:stroke fill;
  min-height:1.2em;
}
.title-rank b{color:#ffe9a8}

/* 設定の名前入力 */
.name-field{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:14px;padding:10px 14px;margin-bottom:10px;
  font-size:clamp(13px,3.7vw,16px);color:var(--ink-dim);
}
.name-field input{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;background:transparent;
  font:inherit;font-size:inherit;font-weight:800;
  color:var(--ink);text-align:right;
  outline:none;
}
.name-field input::placeholder{color:var(--ink-dim);opacity:.7;font-weight:700}

/* 自分の順位 */
.rank-me{
  margin-bottom:12px;
  font-size:clamp(13px,3.8vw,17px);color:var(--ink);
}
.rank-me b{font-size:clamp(20px,6vw,28px);color:var(--magenta)}

/* 一覧 */
.rank-list{
  display:flex;flex-direction:column;gap:5px;
  max-height:46vh;overflow-y:auto;
  margin-bottom:16px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.rank-row{
  display:grid;grid-template-columns:2.6em 1fr auto;
  align-items:baseline;gap:8px;
  background:rgba(255,255,255,.6);
  border-radius:11px;padding:7px 12px;
  font-size:clamp(12px,3.4vw,15px);color:var(--ink-dim);
}
.rank-row .rank-no{font-weight:900;color:var(--ink)}
.rank-row .rank-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);
}
.rank-row .rank-score{font-weight:900;color:var(--ink)}
/* 上位3人 */
.rank-row:nth-child(1) .rank-no{color:#e8a020}
.rank-row:nth-child(2) .rank-no{color:#9aa6bd}
.rank-row:nth-child(3) .rank-no{color:#c08457}
/* 自分の行 */
.rank-row.is-me{
  background:var(--magenta);
}
.rank-row.is-me .rank-no,
.rank-row.is-me .rank-name,
.rank-row.is-me .rank-score{color:#ffffff}

.rank-empty{
  padding:18px 8px;text-align:center;
  font-size:clamp(12px,3.4vw,15px);color:var(--ink-dim);
}

/* ---------- 初回の名前入力 ---------- */
.name-lead{
  margin:0 0 14px;
  font-size:clamp(12px,3.4vw,15px);line-height:1.6;
  color:var(--ink-dim);
}
.name-input{
  display:block;width:100%;
  padding:12px 14px;
  border:2px solid var(--line);border-radius:14px;
  background:#fff;
  font:inherit;font-size:clamp(16px,4.6vw,20px);font-weight:800;
  color:var(--ink);text-align:center;
  outline:none;
}
.name-input:focus{border-color:var(--magenta)}
.name-input::placeholder{color:var(--ink-dim);opacity:.6;font-weight:700}
.name-count{
  margin:6px 0 14px;
  font-size:clamp(11px,3vw,13px);color:var(--ink-dim);text-align:right;
}

/* ---------- コイン ---------- */
.coin{
  display:inline-block;
  width:1em;height:1em;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffe9a8, #f7c245 55%, #d99a1c);
  box-shadow:inset 0 0 0 .12em rgba(255,255,255,.55);
  vertical-align:-.12em;
}
.hud-coins{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:3px;
  font-size:clamp(12px,3.3vw,16px);
  color:#ffffff;
  -webkit-text-stroke:3px rgba(90,60,20,.45);paint-order:stroke fill;
}

/* 復活ボタン */
.btn.revive{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#ffd15c;color:#6a4a12;
  border-bottom-color:#d6a51f;
}
.btn.revive:disabled{
  opacity:.5;cursor:default;
  background:rgba(180,170,150,.45);color:#7a7266;border-bottom-color:#9a917f;
}
.btn.revive:disabled:active{transform:none;border-bottom-width:5px}
.revive-cost{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.86em;
}