/* minigames.css — ミニゲーム共通＋各試練 */

#screen-game{padding:0;background:#161a2e}
.game-head{
  position:relative;flex:0 0 auto;
  display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;
  padding:10px 52px 10px 14px;
  background:rgba(10,13,26,.85);
  border-bottom:2px solid var(--gold-dim);
  color:var(--paper);
}
.game-title{font-weight:800;font-size:.92rem;letter-spacing:.04em;flex:0 1 auto;min-width:0}
/* 狭い画面ではHUDごと次の行に落とす（切れて数字が読めなくなるより良い） */
.game-hud{
  margin-left:auto;font-size:.9rem;font-variant-numeric:tabular-nums;
  display:flex;gap:12px;align-items:center;white-space:nowrap;flex:0 0 auto;
}
.hud-item b{color:var(--gold)}
.hud-warn{color:#ff7b6b;animation:blink .7s steps(2,start) infinite}
.game-area{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;user-select:none;
}
.game-rule{
  flex:0 0 auto;padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  font-size:.78rem;line-height:1.55;color:#b9c0dd;
  background:rgba(10,13,26,.85);border-top:1px solid rgba(255,255,255,.1);
}

/* カウントダウン */
.countdown{
  position:absolute;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(8,10,20,.7);color:var(--gold);
  font-size:4rem;font-weight:900;text-shadow:0 4px 0 #000;
}
.countdown span{animation:cdPop .8s ease-out}
@keyframes cdPop{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ 1. 於兎：神経衰弱 ============ */
.memory-grid{
  display:grid;gap:8px;padding:10px;
  width:100%;max-width:420px;
}
.mcard{
  position:relative;aspect-ratio:3/4;
  border:none;background:none;padding:0;cursor:pointer;
  perspective:600px;
}
.mcard-inner{
  position:absolute;inset:0;border-radius:10px;
  transition:transform .3s;transform-style:preserve-3d;
}
.mcard.flipped .mcard-inner,.mcard.matched .mcard-inner{transform:rotateY(180deg)}
.mcard-face{
  position:absolute;inset:0;border-radius:10px;
  display:grid;place-items:center;backface-visibility:hidden;
  border:2px solid #8b6d22;
}
.mcard-back{
  background:#232945 url(../assets/game/card_back.png) center/contain no-repeat;
  color:var(--gold);font-size:1.5rem;
}
.mcard-front{
  background:linear-gradient(#fffdf2,#f0e5cb);
  transform:rotateY(180deg);
  font-size:2rem;line-height:1;
  flex-direction:column;
}
.mcard-front img{width:88%;height:88%;object-fit:contain;display:block}
.mcard.matched{animation:matchPop .4s ease-out}
.mcard.matched .mcard-front{background:linear-gradient(#e6f7dd,#c9ecb9);border-color:#4f8f4a}
@keyframes matchPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.usagi{display:flex;flex-direction:column;align-items:center;gap:2px}
.usagi-ear{display:flex;gap:3px}
.usagi-ear i{display:block;width:6px;height:20px;border-radius:4px 4px 2px 2px}
.usagi-body{
  width:38px;height:34px;border-radius:50% 50% 46% 46%;
  position:relative;display:grid;place-items:center;
}
.usagi-body::before,.usagi-body::after{
  content:"";position:absolute;top:12px;width:4px;height:4px;border-radius:50%;background:#2b2617;
}
.usagi-body::before{left:9px}.usagi-body::after{right:9px}
.usagi-item{font-size:.85rem;margin-top:1px}

/* ============ 2. 宇迦：焔回避 ============ */
.dodge-field{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 60%,#4a2410,#1d0e06)}
.dodge-nushi{
  position:absolute;width:52px;height:52px;
  margin:-26px 0 0 -26px;
  display:grid;place-items:center;font-size:1.1rem;
  transition:transform .05s linear;z-index:5;
}
.dodge-nushi img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.dodge-nushi.no-img{background:#fff;border:3px solid #1b1a24;border-radius:50% 50% 46% 46%}
.dodge-nushi.hit{animation:hitFlash .5s}
@keyframes hitFlash{0%,100%{opacity:1}25%,75%{opacity:.25;background:#ffb0a0}}
.flame{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;
  filter:drop-shadow(0 0 10px rgba(255,140,40,.85));
}
.flame img{width:100%;height:100%;object-fit:contain;display:block}
.flame.no-img{
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:radial-gradient(circle at 40% 40%,#fff3b0,#ff8a2b 55%,#c2340f);
  box-shadow:0 0 14px rgba(255,140,40,.9);
}
.hearts{letter-spacing:2px;display:flex;align-items:center;gap:3px}
.hearts .heart{width:20px;height:20px;object-fit:contain;display:block}

/* ============ 3. ネム：色あつめ ============ */
.color-field{position:relative;width:100%;height:100%;background:linear-gradient(#3b2a55,#1a1128)}
.lane-guide{position:absolute;inset:0;display:flex;pointer-events:none}
.lane-guide i{flex:1;border-right:1px dashed rgba(255,255,255,.12)}
.lane-guide i:last-child{border:none}
.paint{
  position:absolute;width:38px;height:38px;margin-left:-19px;
}
.paint img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.paint.no-img{
  width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:var(--paint-color);
  border:3px solid rgba(0,0,0,.35);
  box-shadow:0 0 12px rgba(255,255,255,.25) inset;
}
.catcher{
  position:absolute;bottom:10px;width:86px;height:38px;margin-left:-43px;
  transition:left .08s ease-out;display:grid;place-items:end center;font-size:.7rem;
}
.catcher img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.catcher.no-img{
  width:74px;height:26px;margin-left:-37px;
  background:linear-gradient(#f6efdf,#d9c9a5);
  border:3px solid #1b1a24;border-radius:6px 6px 12px 12px;
  place-items:center;
}
.order-bar{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;align-items:center;
  background:rgba(10,13,26,.8);border:2px solid var(--gold-dim);
  border-radius:999px;padding:.35em .9em;color:var(--paper);font-size:.82rem;
  white-space:nowrap;z-index:5;
}
.order-chip{
  width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  display:inline-block;
}
.order-chip.got{box-shadow:0 0 0 3px var(--gold)}
.canvas-preview{
  position:absolute;right:8px;top:8px;width:52px;height:52px;border-radius:8px;
  border:3px solid #f6efdf;background:#2b2340;overflow:hidden;z-index:5;
}
.canvas-preview i{display:block;height:25%;width:100%}

/* ============ 4. おえん：糸脈迷路 ============ */
.maze-field{position:relative;width:100%;height:100%;background:linear-gradient(#2b3d27,#131c11)}
.thread{position:absolute;background:linear-gradient(90deg,#eaffd0,#9fe07a);box-shadow:0 0 8px rgba(180,255,140,.8);border-radius:2px}
.maze-nushi{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;z-index:6;
}
.maze-nushi img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.maze-nushi.no-img{background:#fff;border:3px solid #1b1a24;border-radius:50%}
.maze-nushi.hit{animation:hitFlash .4s}
.maze-goal{
  position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;
  display:grid;place-items:center;font-size:.7rem;color:#2a2110;font-weight:800;
  filter:drop-shadow(0 0 12px rgba(255,215,110,.85));
}
.maze-goal img{width:100%;height:100%;object-fit:contain;display:block}
.maze-goal.no-img{
  width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,110,.9),rgba(255,215,110,.15));
  border:3px dashed var(--gold);
}
.maze-cp{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
}
.maze-cp.on{background:var(--gold);border-color:#fff}

/* ============ 5. イズナ：料理 ============ */
.cook-field{position:relative;width:100%;height:100%;background:linear-gradient(#43272a,#1b0f11);display:flex;flex-direction:column}
.order-card{
  margin:10px auto 0;background:linear-gradient(#fffdf2,#f0e5cb);color:#2b2617;
  border:3px solid #8b6d22;border-radius:8px;padding:.6em 1em;text-align:center;
  box-shadow:var(--shadow);max-width:92%;
}
.order-card b{display:block;font-size:.78rem;color:var(--red);letter-spacing:.15em;margin-bottom:.25em}
.order-steps{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;font-size:1.4rem}
.order-steps span{opacity:.35;transition:opacity .2s,transform .2s;display:grid;place-items:center}
.order-steps span.done{opacity:1;transform:scale(1.15)}
.order-steps span.next{opacity:1;filter:drop-shadow(0 0 8px var(--gold))}
.order-steps span.step-arrow{opacity:.35;font-size:1.1rem}
.order-steps img{width:36px;height:36px;object-fit:contain;display:block}
.belt{position:relative;flex:1;min-height:0;overflow:hidden}
/* 動いているものを指で押すので、見た目より少し大きめの当たり面をとる */
.food{
  position:absolute;width:64px;height:64px;margin-top:-32px;border-radius:14px;
  background:linear-gradient(#fffdf2,#e6d9b8);border:3px solid #1b1a24;
  display:grid;place-items:center;font-size:1.6rem;cursor:pointer;
}
.food img{width:80%;height:80%;object-fit:contain;display:block;pointer-events:none}
.food:active{transform:scale(.92)}
.food.good{animation:foodOk .35s ease-out forwards}
.food.bad{animation:foodNg .35s ease-out forwards}
@keyframes foodOk{to{transform:scale(1.4) translateY(-30px);opacity:0}}
@keyframes foodNg{50%{background:#ffb0a0}to{transform:scale(.6);opacity:0}}
.dish-row{display:flex;gap:8px;justify-content:center;padding:6px;font-size:1.5rem}
.dish-row span{opacity:.25;display:grid;place-items:center}
.dish-row span.done{opacity:1}
.dish-row img{width:38px;height:38px;object-fit:contain;display:block}

/* ============ 6. シャオラン：押し返し ============ */
.push-field{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#6b5310,#221a05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px}
.panda{
  width:min(46vw,190px);transition:transform .18s ease-out;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));
}
.panda img{width:100%;display:block}
.panda-fallback{
  width:min(46vw,190px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,#ddd 60%,#bbb);
  border:5px solid #1b1a24;display:grid;place-items:center;font-size:3.4rem;
}
.push-gauge{
  width:100%;max-width:420px;height:26px;border-radius:999px;
  background:rgba(0,0,0,.5);border:3px solid var(--gold-dim);overflow:hidden;position:relative;
}
.push-gauge i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#ffd97a,#e0b552);transition:width .12s ease-out;
}
.push-btn{
  width:min(58vw,220px);aspect-ratio:1;border-radius:50%;
  border:5px solid #8b6d22;background:radial-gradient(circle at 50% 35%,#4a5178,#252b49);
  color:var(--paper);font-size:1.1rem;font-weight:900;font-family:inherit;
  cursor:pointer;transition:transform .07s, background .12s, box-shadow .12s;
}
.push-btn.ready{background:radial-gradient(circle at 50% 35%,#ffe89a,#e0b552);color:#2a2110;box-shadow:0 0 40px rgba(255,220,120,.9)}
.push-btn.fake{background:radial-gradient(circle at 50% 35%,#ff9a8a,#b4443c);color:#fff;box-shadow:0 0 30px rgba(255,80,60,.8)}
.push-btn:active{transform:scale(.95)}

/* ============ 7. コンガ：影分身 ============ */
.shadow-field{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 45%,#4d5726,#141807)}
.clone{
  position:absolute;width:74px;margin:-52px 0 0 -37px;cursor:pointer;
  transition:left .44s ease-in-out, top .44s ease-in-out;
  text-align:center;
}
.clone .clone-body{width:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
/* 影になるのは体だけ。目印は影の中でも見えていないと当てられない */
.clone.is-clone .clone-body{filter:brightness(0) opacity(.72) drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.clone-fallback{
  width:74px;height:74px;border-radius:50%;background:#3b3b3b;border:3px solid #1b1a24;
  display:grid;place-items:center;font-size:2rem;
}
.clone.is-clone .clone-fallback{background:#141414;color:#555}
.clone-tag{
  display:block;font-size:.62rem;color:var(--gold);margin-top:2px;font-weight:800;
}
.clone-tag img{
  width:26px;height:26px;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
/* 散らばっているあいだは目印を伏せ、止まった瞬間に現れる */
.clone-tag{transition:opacity .22s ease-out}
.clone.hide-mark .clone-tag{opacity:0}
.mark-chip{display:inline-flex;align-items:center;gap:.25em;vertical-align:-.35em}
.mark-chip img{width:1.5em;height:1.5em;object-fit:contain;display:block}
.clone.picked-ok{animation:matchPop .4s ease-out}
.clone.picked-ng{animation:hitFlash .45s}
.memorize-note{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(10,13,26,.85);border:2px solid var(--gold-dim);border-radius:999px;
  color:var(--paper);font-size:.82rem;padding:.35em 1em;white-space:nowrap;z-index:6;
}

/* ============ 8. 岩爺：順番記憶 ============ */
.seq-field{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 45%,#4a2338,#150a11);display:flex;align-items:center;justify-content:center}
.seq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px;width:100%;max-width:360px}
.sigil{
  aspect-ratio:1;border-radius:14px;border:3px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  display:grid;place-items:center;font-size:2rem;cursor:pointer;
  transition:transform .3s ease, box-shadow .18s, background .18s;
  color:#fff;
}
.sigil img{width:74%;height:74%;object-fit:contain;display:block;pointer-events:none}
.sigil.lit{background:rgba(255,255,255,.95);color:#1b1a24;box-shadow:0 0 30px rgba(255,255,255,.85);transform:scale(1.06)}
.sigil.ok{box-shadow:0 0 24px var(--green);border-color:var(--green)}
.sigil.ng{box-shadow:0 0 24px var(--red);border-color:var(--red)}
.sigil.disabled{pointer-events:none;opacity:.75}
.seq-note{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(10,13,26,.85);border:2px solid var(--gold-dim);border-radius:999px;
  color:var(--paper);font-size:.82rem;padding:.35em 1em;white-space:nowrap;
}

/* ============ エンディング神経衰弱 ============ */
.ending-table{
  width:100%;height:100%;display:flex;flex-direction:column;
  background:linear-gradient(#fff0cd,#e0ab6f);
}
.ending-players{
  display:flex;justify-content:space-around;align-items:flex-end;
  padding:6px 4px 0;flex:0 0 auto;
}
.eplayer{text-align:center;font-size:.72rem;color:#4a3a1c;font-weight:800;transition:transform .2s}
.eplayer img{height:64px;display:block;margin:0 auto 2px;object-fit:contain}
.eplayer.turn{transform:translateY(-6px) scale(1.06)}
.eplayer.turn .ep-name{background:var(--gold);border-radius:999px;padding:.1em .6em}
.ending-msg{
  text-align:center;font-size:.86rem;color:#4a3a1c;font-weight:700;
  min-height:1.6em;padding:2px 8px;
}
.ending-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:6px 10px 12px;flex:1;min-height:0;align-content:center;
  max-width:400px;margin:0 auto;width:100%;
}
.ending-grid .mcard-back{background-color:#2b2f52}

/* 影分身：入れかわる2体だけ、少し浮かせて手前に出す */
.clone.swapping{z-index:8}
.clone.swapping .clone-body{transform:scale(1.06)}
.clone .clone-body{transition:transform .22s ease-out}