/* TORIDORI - スタイル v2.0（予告棚＋圧力バー構成。仮グラフィック段階でも配色・書体・余白は保つ） */
:root{
  --paper:#F7F5F0;
  --ink:#26221C;
  --ink-soft:#5C564C;
  --card:#FFFFFF;
  --line:#E5E0D6;
  --accent:#F04E45;
  --blue:#3D8BF2;
  --yellow:#F5B818;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  /* スマホのスワイプバック・引っぱり更新・バウンスをロック */
  overscroll-behavior:none;
  overflow:hidden;
  position:fixed;width:100%;
  touch-action:none;
}
body{
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  background:var(--paper);
  transition:background-color 1s ease;
  color:var(--ink);
  display:flex;justify-content:center;align-items:flex-start;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
.en{font-family:'Plus Jakarta Sans',sans-serif}

/* 案C: メンフィスの幾何パターンは盤外（ページ背景）に限定する */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><path d='M20 60 l16-14 16 14 16-14 16 14' fill='none' stroke='%23F27BA9' stroke-width='6' stroke-linecap='round' opacity='.55'/><circle cx='300' cy='50' r='16' fill='none' stroke='%233D8BF2' stroke-width='6' opacity='.5'/><path d='M70 300 l16 -26 16 26 z' fill='%23F5B818' opacity='.55'/><circle cx='210' cy='160' r='7' fill='%239B5DE5' opacity='.5'/><path d='M270 310 q20 -24 40 0' fill='none' stroke='%234FB35C' stroke-width='6' stroke-linecap='round' opacity='.5'/><path d='M160 40 v22 M149 51 h22' stroke='%23F0762B' stroke-width='6' stroke-linecap='round' opacity='.5'/><circle cx='60' cy='180' r='5' fill='%233D8BF2' opacity='.45'/><path d='M320 210 l14-12 14 12' fill='none' stroke='%23F27BA9' stroke-width='5' stroke-linecap='round' opacity='.45'/></svg>");
  background-size:360px 360px;
  opacity:.5;
}

#app{
  position:relative;z-index:1;
  width:min(440px,100vw);
  height:100dvh;
  display:flex;flex-direction:column;
  padding:12px 16px calc(10px + env(safe-area-inset-bottom));
  gap:8px;
}

/* ---------- HUD ---------- */
#hud{flex-shrink:0;display:flex;justify-content:space-between;align-items:center}
#btn-pause{
  width:46px;height:38px;border-radius:14px;
  background:var(--card);border:1.5px solid #D8D4CB;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
#btn-pause i{display:block;width:3.5px;height:13px;border-radius:2px;background:var(--ink-soft)}
#btn-pause:active{transform:scale(.94)}
.hud-right{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
#level{font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}
#score{font-weight:800;font-size:24px}

/* ---------- 予告棚 + 圧力バー ---------- */
#shelf-wrap{flex-shrink:0;width:min(100%,calc((100dvh - 200px) * (7/9) * .96));margin:0 auto}
#shelf{
  display:grid;grid-template-columns:repeat(7,1fr);align-items:stretch;
  background:#FBFAF6;border:1.5px solid #D8D4CB;
  border-radius:16px;
  padding:4px 6px;height:calc(var(--cell,44px) + 8px); /* 空↔犬入りで高さを変えない（ズレ防止 §07） */
  overflow:hidden;
  transition:opacity .4s ease;
}
/* Lv1では棚を透明にするだけ（高さは常に確保 → レベルアップでレイアウトがズレない §07） */
#shelf.collapsed{opacity:0;visibility:hidden}
.shelf-bird{height:100%;aspect-ratio:1;margin:0 auto}
.shelf-bird svg{width:100%;height:100%;display:block;animation:shelfIn .3s ease-out}
@keyframes shelfIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
#pressure{height:6px;background:#EDE9DF;border-radius:3px;margin-top:6px;overflow:hidden}
#pressure i{display:block;height:100%;width:100%;background:var(--blue);border-radius:3px}
#pressure.warn i{background:var(--accent);animation:warnBlink .18s linear infinite alternate}
@keyframes warnBlink{from{opacity:1}to{opacity:.35}}

/* ---------- board ---------- */
#board-wrap{
  position:relative;
  width:min(100%,calc((100dvh - 200px) * (7/9) * .96));
  margin:0 auto;
  flex-shrink:0;
}
#board{
  position:relative;
  width:100%;
  aspect-ratio:7/9;
  background:#FBFAF6; /* 案C: クリーンな盤面。装飾は盤外のメンフィスパターンに限定 */
  border:1.5px solid #D8D4CB;
  border-radius:20px;
  overflow:hidden;
  touch-action:none;
}
#fx{position:absolute;inset:0;pointer-events:none;border-radius:20px;z-index:60}
#popups{position:absolute;inset:0;pointer-events:none;z-index:70;overflow:hidden;border-radius:20px}
#ghost{
  position:absolute;top:0;left:0;
  border:2.5px dashed var(--yellow);border-radius:30%;
  margin:2px;width:calc(var(--cell,44px) - 4px);height:calc(var(--cell,44px) - 4px);
  pointer-events:none;z-index:1;
  animation:ghostPulse .8s ease-in-out infinite;
}
@keyframes ghostPulse{0%,100%{opacity:.9}50%{opacity:.4}}

.shake{animation:shake .3s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}
  60%{transform:translate(-3px,-2px)}80%{transform:translate(2px,2px)}
}

/* ---------- birds ---------- */
.bird{
  position:absolute;top:0;left:0;
  width:var(--cell,44px);height:var(--cell,44px);
  padding:0; /* みちみちに詰める（ブロック間の隙間はSVG内マージンのみ） */
  transition-property:transform;
  transition-timing-function:cubic-bezier(.45,.02,.7,1);
  will-change:transform;
  z-index:2;
  cursor:grab;
}
.bird svg{width:100%;height:100%;display:block;overflow:visible}
.bird.dragging{z-index:50;cursor:grabbing}
.bird.dragging svg{
  transform:scale(1.18) rotate(-5deg);
  filter:drop-shadow(0 12px 14px rgba(38,34,28,.3));
}
.bird.land svg{animation:landSquash .16s ease-out}
@keyframes landSquash{0%{transform:scaleY(.78) scaleX(1.14)}100%{transform:scale(1)}}
.bird.matched,.bird.sparked,.bird.burned{z-index:40;pointer-events:none}
.bird.matched svg{animation:birdPop .25s ease-in forwards}
.bird.sparked svg{animation:birdSpark .3s ease-out forwards}
.bird.burned svg{animation:birdBurn .3s ease-in forwards}
@keyframes birdPop{
  0%{transform:scale(1);opacity:1}
  45%{transform:scale(1.28);opacity:.9}
  100%{transform:scale(0);opacity:0}
}
@keyframes birdSpark{
  0%{transform:scale(1);opacity:1;filter:brightness(2)}
  100%{transform:scale(1.5);opacity:0;filter:brightness(3)}
}
@keyframes birdBurn{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(.6) translateY(6px);opacity:0;filter:brightness(.4)}
}
.bird.charred svg{animation:charShiver .4s ease-in-out infinite}
@keyframes charShiver{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* 震え猶予（§04）— マッチ確定までの約1秒、小刻みに震える */
.bird.shaking svg{animation:dogShake .13s linear infinite}
@keyframes dogShake{
  0%,100%{transform:translate(-1.3px,.3px) rotate(-2.4deg)}
  50%{transform:translate(1.3px,-.3px) rotate(2.4deg)}
}

/* 檻付きバード（LOCKED BIRD §07） */
.bird.locked{cursor:default}
.bird.unlocking svg .cage{animation:cageBreak .4s ease-in forwards;transform-origin:30px 32px}
@keyframes cageBreak{
  0%{transform:scale(1) rotate(0);opacity:1}
  30%{transform:scale(1.08) rotate(-4deg)}
  100%{transform:scale(1.6) rotate(10deg);opacity:0}
}

/* オーラ（色付きバード＋属性エフェクト §05） */
.bird .aura-ring{position:absolute;inset:-4%;border-radius:50%;pointer-events:none}
/* white: やんわり白く光る */
.bird.aura-white .aura-ring{box-shadow:0 0 9px 3px rgba(255,255,255,.9),0 0 18px 9px rgba(255,255,255,.4);animation:glowWhite 1.6s ease-in-out infinite}
@keyframes glowWhite{0%,100%{opacity:.55}50%{opacity:1}}
.fx-white .halo{animation:haloPulse 1.6s ease-in-out infinite;transform-origin:30px 33px}
@keyframes haloPulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.75;transform:scale(1.04)}}
/* fire: メラメラ燃える */
.bird.aura-fire .aura-ring{box-shadow:0 0 11px 3px rgba(245,150,40,.95),0 0 22px 10px rgba(240,78,69,.5);animation:glowFire .45s steps(3,end) infinite}
@keyframes glowFire{0%{opacity:.7}33%{opacity:1}66%{opacity:.55}100%{opacity:.85}}
.fx-fire .flame{transform-origin:center bottom}
.fx-fire .f1{animation:flick .32s ease-in-out infinite alternate}
.fx-fire .f2{animation:flick .26s ease-in-out infinite alternate}
.fx-fire .f2b{animation:flick .2s ease-in-out infinite alternate}
.fx-fire .f3{animation:flick .3s ease-in-out infinite alternate .1s}
@keyframes flick{0%{transform:scaleY(.82) translateY(1px);opacity:.85}100%{transform:scaleY(1.12) translateY(-1px);opacity:1}}
/* thunder: ビリビリ帯電 */
.bird.aura-thunder .aura-ring{box-shadow:0 0 10px 3px rgba(245,220,60,.9),0 0 20px 9px rgba(245,184,24,.5);animation:glowThunder .12s steps(2,end) infinite}
@keyframes glowThunder{0%{opacity:.5}50%{opacity:1}100%{opacity:.65}}
.fx-thunder .bolt{transform-origin:center}
.fx-thunder .b1{animation:crackle .18s steps(1,end) infinite}
.fx-thunder .b2{animation:crackle .14s steps(1,end) infinite .05s}
.fx-thunder .b3{animation:crackle .22s steps(1,end) infinite .09s}
.fx-thunder .b4{animation:crackle .16s steps(1,end) infinite .13s}
@keyframes crackle{0%,100%{opacity:0}40%{opacity:1}70%{opacity:.3}}
/* mega: 黒く光り、目も白く光る */
.bird.aura-mega .aura-ring{box-shadow:0 0 12px 4px rgba(20,14,24,.85),0 0 26px 12px rgba(155,93,229,.55);animation:glowMega .9s ease-in-out infinite}
@keyframes glowMega{0%,100%{opacity:.7;box-shadow:0 0 10px 3px rgba(20,14,24,.8),0 0 22px 10px rgba(155,93,229,.45)}50%{opacity:1;box-shadow:0 0 16px 6px rgba(20,14,24,.95),0 0 30px 14px rgba(155,93,229,.7)}}
.fx-mega .mega-eye{animation:megaEye 1s ease-in-out infinite;transform-origin:center}
@keyframes megaEye{0%,100%{opacity:.8;filter:none}50%{opacity:1;filter:drop-shadow(0 0 3px #fff)}}
.bird .ring{
  position:absolute;inset:6%;border:3px solid #fff;border-radius:50%;
  pointer-events:none;
  animation:ringOut .5s ease-out forwards;
}
@keyframes ringOut{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.1);opacity:0}}

/* ---------- フローティングスコア・コールアウト ---------- */
.score-pop{
  position:absolute;transform:translate(-50%,-50%);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;color:var(--ink-soft);
  animation:scoreFloat 1s ease-out forwards;
  text-shadow:0 1px 0 #fff;
}
@keyframes scoreFloat{0%{opacity:0;translate:0 6px}15%{opacity:1}100%{opacity:0;translate:0 -26px}}
.callout{
  position:absolute;transform:translate(-50%,-50%) rotate(-6deg);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:20px;
  color:var(--blue);-webkit-text-stroke:1px #fff;
  animation:calloutIn 1.2s ease-out forwards;
}
@keyframes calloutIn{
  0%{opacity:0;scale:.4}12%{opacity:1;scale:1.15}22%{scale:1}
  75%{opacity:1}100%{opacity:0;translate:0 -14px}
}

/* ---------- バナー（LEVEL n / START!!） ---------- */
#banner{
  position:absolute;left:50%;top:26%;z-index:90;
  transform:translate(-50%,-50%);
  background:var(--ink);color:#fff;
  font-weight:800;font-size:24px;letter-spacing:.16em;
  padding:14px 40px;border-radius:999px;
  pointer-events:none;
}
#banner.in{animation:bannerIn .9s ease-out forwards}
@keyframes bannerIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  25%{transform:translate(-50%,-50%) scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}

/* ---------- 能力犬の発動エフェクト（種別差別化 §05） ---------- */
.shockwave{
  position:absolute;pointer-events:none;z-index:65;
  width:var(--sw-size);height:var(--sw-size);
  margin-left:calc(var(--sw-size) / -2);margin-top:calc(var(--sw-size) / -2);
  border-radius:50%;
  border:4px solid var(--sw-a);
  box-shadow:0 0 18px 4px var(--sw-b);
  animation:shockwaveOut var(--sw-dur) cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes shockwaveOut{
  0%{transform:scale(.1);opacity:1}
  70%{opacity:.8}
  100%{transform:scale(1);opacity:0}
}
.col-flash{position:absolute;pointer-events:none;z-index:64;border-radius:8px;animation:colFlash .48s ease-out forwards}
.screen-flash{position:absolute;inset:0;pointer-events:none;z-index:66;animation:screenFlash var(--sf-dur,260ms) ease-out forwards}
@keyframes screenFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.col-flash.flash-fire{background:linear-gradient(180deg,rgba(240,118,43,0) 0%,rgba(240,118,43,.5) 60%,rgba(181,64,14,.7) 100%)}
.col-flash.flash-thunder{background:linear-gradient(90deg,rgba(245,184,24,.15),rgba(255,229,138,.75),rgba(245,184,24,.15));box-shadow:0 0 14px 3px rgba(245,184,24,.6)}
@keyframes colFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---------- footer ---------- */
#foot{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
#btn-gold{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1.5px solid #D8D4CB;border-radius:999px;
  padding:5px 12px 5px 6px;cursor:pointer;opacity:.5;transition:opacity .2s,transform .1s;
}
#btn-gold:disabled{cursor:default}
#btn-gold.has{opacity:1;border-color:#E7B824;box-shadow:0 0 0 2px rgba(231,184,36,.25);animation:goldReady 1.4s ease-in-out infinite}
#btn-gold.has:active{transform:scale(.95)}
@keyframes goldReady{0%,100%{box-shadow:0 0 0 2px rgba(231,184,36,.2)}50%{box-shadow:0 0 0 4px rgba(231,184,36,.45)}}
#btn-gold .gold-ico{width:34px;height:34px;display:block;flex-shrink:0}
#btn-gold .gold-ico svg{width:100%;height:100%;display:block}
#btn-gold .gold-label{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:11px;letter-spacing:.06em;
  color:var(--ink);line-height:1.15;text-align:left;
}
#btn-gold .gold-label small{font-weight:700;font-size:8.5px;letter-spacing:0;color:var(--ink-soft);font-family:'Zen Kaku Gothic New',sans-serif}
#btn-gold .gold-count{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;color:#fff;
  background:#E7B824;border-radius:999px;min-width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
#foot button{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;
  color:var(--ink-soft);background:var(--card);border:1.5px solid #D8D4CB;
  border-radius:999px;padding:8px 18px;cursor:pointer;
}
#foot button:active{transform:scale(.96)}

/* ---------- overlays ---------- */
.overlay[hidden]{display:none}
.overlay{
  position:absolute;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(247,245,240,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-align:center;padding:24px;
}
.logo{
  font-family:'Zen Maru Gothic',sans-serif;font-weight:900;
  font-size:clamp(34px,11vw,50px);letter-spacing:.06em;line-height:1.1;
}
.logo span{display:inline-block} /* 案C: フラット。装飾は背後の幾何形状に任せる */
.logo .c0{color:#F04E45}.logo .c1{color:#3D8BF2}.logo .c2{color:#4FB35C}
.logo .c3{color:#F27BA9}.logo .c4{color:#9B5DE5}.logo .c5{color:#F0762B}
.logo-underline{display:block;margin:2px auto 0}
.ov-deco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.overlay > *:not(.ov-deco){position:relative;z-index:1}
.tagline{font-size:13px;color:var(--ink-soft);font-weight:500}
.ov-title-h{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:28px}
.btn-primary{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;letter-spacing:.14em;
  color:#fff;background:var(--ink);border:none;border-radius:999px;
  padding:16px 52px;cursor:pointer;margin-top:8px;
}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
}
.stat-block{display:flex;gap:34px;margin:6px 0}
.stat-block .hud-label{margin-bottom:2px}
.hud-label{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.16em;color:var(--ink-soft);display:block;
}
.stat-block b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px}

/* ポーズ中は盤面を見せる（すりガラスにしない）。うっすら暗くしてカードだけ浮かせる */
#ov-pause{background:rgba(38,34,28,.28);backdrop-filter:none;-webkit-backdrop-filter:none}
#ov-pause .ov-title-h,#ov-pause .btn-primary{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
#ov-pause .ov-title-h{color:#fff}
#ov-pause-card{
  background:rgba(255,255,255,.94);border:1.5px solid #D8D4CB;border-radius:22px;
  padding:22px 30px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
#ov-pause-card .ov-title-h{color:var(--ink);filter:none}

/* リザルト（§07） */
.result-card{
  background:var(--card);border:1.5px solid #D8D4CB;border-radius:22px;
  padding:22px 28px;min-width:240px;position:relative;
}
.result-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:28px;
  padding:5px 0;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ink-soft);
  font-family:'Plus Jakarta Sans',sans-serif;
}
.result-row b{font-size:16px;color:var(--ink)}
.result-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.result-row.total b{font-size:22px;color:var(--accent)}
.trophy{
  margin-top:12px;display:inline-block;
  font-weight:800;font-size:11px;letter-spacing:.2em;color:#fff;
  background:linear-gradient(135deg,#C98A3C,#A96A28);
  border-radius:999px;padding:5px 20px;
}

/* ---------- debug ---------- */
#debug{
  position:fixed;left:10px;bottom:10px;z-index:300;
  background:rgba(38,34,28,.92);color:#EDE7DA;border-radius:12px;
  padding:10px 12px;font:11px/1.7 ui-monospace,monospace;
}
#debug .dbg-row{display:flex;gap:6px;margin-top:6px}
#debug button{font:10px ui-monospace,monospace;padding:4px 8px;border-radius:6px;border:none;cursor:pointer}