:root{
  --bg:#0f1020; --panel:#1a1c33; --ink:#eef0ff; --muted:#9aa0c7;
  --atk:#ff6b6b; --def:#4dabf7; --heal:#51cf66; --sp:#cc8bff;
  --line:#2a2d4a;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#23264a,#0f1020 60%);
  color:var(--ink); min-height:100vh;
}
.wrap{max-width:880px;margin:0 auto;padding:20px 16px 48px}
.view{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ホーム */
.logo{font-size:2.6rem;text-align:center;margin:32px 0 8px;letter-spacing:.04em}
.logo span{display:block;font-size:1.3rem;color:var(--sp)}
.lead{text-align:center;color:var(--muted);line-height:1.7}
.primary{
  display:block;margin:24px auto;padding:14px 30px;font-size:1.1rem;font-weight:700;
  border:0;border-radius:14px;cursor:pointer;color:#1a1030;
  background:linear-gradient(135deg,#ffd86b,#ff9f6b);box-shadow:0 8px 22px rgba(255,160,90,.35);
}
.primary:active{transform:translateY(1px)}
.ghost{display:block;margin:10px auto 0;padding:10px 22px;background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:12px;cursor:pointer}
.rules{max-width:520px;margin:24px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 16px}
.rules summary{cursor:pointer;padding:8px 0;font-weight:700}
.rules ul{color:var(--muted);line-height:1.7;padding-left:1.1em}

/* バトル盤面 */
.board{display:grid;gap:12px}
.side{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;position:relative;overflow:hidden}
.side .avatar{font-size:2rem;width:48px;text-align:center}
.side .info{flex:1;min-width:0}
.side .name{font-weight:700;margin-bottom:4px}
.side .stats{font-size:.82rem;color:var(--muted);margin-top:4px}
.handcount{font-size:.8rem;color:var(--muted)}
.hpbar{height:12px;background:#0c0d1c;border-radius:6px;overflow:hidden}
.hpfill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#51cf66,#94e36b);transition:width .4s ease}
.cpu .hpfill{background:linear-gradient(90deg,#ff6b6b,#ff9f6b)}

.stage{background:linear-gradient(135deg,#191b32,#22254a);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center}
.now{line-height:1.6}

/* 手札 */
.hand{display:flex;gap:10px;overflow-x:auto;padding:16px 2px 6px;scroll-snap-type:x proximity}
.card{
  flex:0 0 116px;scroll-snap-align:center;background:var(--panel);border:2px solid var(--line);
  border-radius:14px;padding:10px 8px;cursor:pointer;color:var(--ink);text-align:center;
  transition:transform .12s ease,box-shadow .12s ease;
}
.card:not(:disabled):hover{transform:translateY(-6px);box-shadow:0 10px 20px rgba(0,0,0,.4)}
.card:disabled{opacity:.55;cursor:default}
.card-cat{font-size:.72rem;color:var(--muted)}
.card-kanji{font-size:2.6rem;line-height:1.2;margin:2px 0}
.card-yomi{font-size:.78rem;color:var(--muted)}
.card-fx{font-size:.72rem;margin-top:6px;min-height:2.4em;line-height:1.2}
.cat-atk{border-color:var(--atk)} .cat-atk .card-kanji{color:var(--atk)}
.cat-def{border-color:var(--def)} .cat-def .card-kanji{color:var(--def)}
.cat-heal{border-color:var(--heal)} .cat-heal .card-kanji{color:var(--heal)}
.cat-sp{border-color:var(--sp)} .cat-sp .card-kanji{color:var(--sp)}

/* 履歴 */
.log-wrap{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px 14px}
.log-wrap summary{cursor:pointer;padding:8px 0;font-weight:700}
.log{max-height:200px;overflow:auto;font-size:.85rem;color:var(--muted);line-height:1.7;margin:0;padding-left:1.4em}
.log-you{color:#bfe3ff} .log-cpu{color:#ffd0c4}

/* 結果 */
.result-emoji{font-size:4rem;text-align:center;margin-top:40px}
#result-title{text-align:center;font-size:1.8rem;margin:6px 0}

/* 演出 */
.fx-hit{animation:shake .4s}
.fx-heal{box-shadow:inset 0 0 0 2px var(--heal)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.float{position:absolute;right:18px;top:8px;font-weight:800;font-size:1.4rem;pointer-events:none;animation:floatUp .9s ease forwards}
.float-dmg{color:var(--atk)} .float-heal{color:var(--heal)} .float-shield{color:var(--def);font-size:1.1rem}
@keyframes floatUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .view,.float,.fx-hit{animation:none}
  .card:not(:disabled):hover{transform:none}
}