:root{
  --bg:#0f1220; --panel:#171a2b; --text:#e9ecff; --muted:#a8b0d9;
  --accent:#7aa2ff; --win:#22c55e; --lose:#ef4444; --draw:#eab308; --glow:#6ea8ff;
}
html,body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#1b2349 0%,#0b0e1a 60%,#0f1220 100%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif}
.wrap{max-width:1000px;margin:auto;padding:28px}
.card{background:linear-gradient(180deg,#141939,#0f132e);border:1px solid #2a3152;border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
h1{font-size:30px;margin:0 0 6px;text-shadow:0 0 24px rgba(122,162,255,.25)}
.lead{color:#cbd5ff;line-height:1.7}
.muted{color:var(--muted);font-size:14px}

.screen{display:none}
.screen.active{display:block}

.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
@media (min-width:860px){ .grid{grid-template-columns:1fr 1fr} }
.row{display:flex;gap:14px;flex-wrap:wrap}

.stat{flex:1 1 240px;background:#101437;border:1px solid #2a3152;border-radius:14px;padding:14px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:-2px;pointer-events:none;border-radius:14px;box-shadow:0 0 0 1px rgba(110,168,255,.15),0 0 36px rgba(110,168,255,.08) inset}
.stat b{display:block;font-size:18px;margin-bottom:6px}
.big{font-size:38px;letter-spacing:.5px}

.panel{margin-top:16px;background:#0f142f;border:1px solid #2a3152;border-radius:14px;padding:14px}

select,button{border-radius:12px;border:1px solid #36406a;background:#0f142a;color:var(--text);font-size:16px}
select{padding:12px 14px}
button{padding:14px 18px;cursor:pointer;transition:transform .03s ease,box-shadow .2s ease,background .2s ease}
button:active{transform:translateY(1px)}
.cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.cta .primary{font-size:20px;padding:16px 28px;background:linear-gradient(180deg,#233774,#1a2a5a);border-color:#4157a3;box-shadow:0 10px 24px rgba(110,168,255,.25)}

.hand{font-size:22px;padding:18px 22px;border-radius:16px;background:linear-gradient(180deg,#18224d,#121a3b);border:1px solid #4157a3;min-width:200px;text-align:center;box-shadow:0 10px 20px rgba(0,0,0,.25)}
.hand:hover{box-shadow:0 18px 40px rgba(110,168,255,.25)}

.modal{position:fixed;inset:0;display:none;place-items:start center;padding-top:25vh;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.modal.open{display:grid}
.modal .box{width:min(620px,92vw);background:linear-gradient(180deg,#11152a,#0f1326);border:1px solid #2a3152;border-radius:16px;padding:18px 18px 22px;margin:0}

.result{margin:10px 0 14px;padding:12px;border-radius:12px}
.win{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35)}
.lose{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}
.draw{background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35)}

.ad{margin-top:16px;background:#0e1330;border:1px dashed #2a3152;border-radius:12px;padding:12px;color:#94a3b8}
#fx{position:fixed;inset:0;pointer-events:none;z-index:999}
.tick{display:inline-block;transition:transform .25s ease}
.tick.bump{transform:scale(1.12)}

/* ===== 称号の豪華演出（常時キラキラ＋新規は強めフラッシュ） ===== */
#badgeList{
  font-size:20px; font-weight:600; line-height:1.6em;
  text-align:left; margin-top:6px;
}
.badge-line{
  display:block;
  padding:8px 12px;
  margin:6px 0;
  border-radius:10px;
  background:linear-gradient(90deg,#2a2e55,#1d1f3b);
  border:1px solid #5b63c7;
  box-shadow:0 0 14px rgba(122,162,255,.25);
  opacity:0; transform:translateY(8px) scale(.98);
  animation:badgeFade .6s ease forwards;
}

/* 1行ずつディレイしてフェードイン */
.badge-line:nth-child(1){ animation-delay:.15s }
.badge-line:nth-child(2){ animation-delay:.45s }
.badge-line:nth-child(3){ animation-delay:.75s }
.badge-line:nth-child(4){ animation-delay:1.05s }

@keyframes badgeFade{
  to{ opacity:1; transform:translateY(0) scale(1) }
}

/* 常時キラキラ（控えめの周回シャイン + ほのかな鼓動） */
.badge-line.sparkle{
  position:relative; overflow:hidden;
  animation: badgeFade .6s ease forwards, pulseGlow 4s ease-in-out infinite alternate;
}
.badge-line.sparkle::after{
  content:"";
  position:absolute; inset:-1px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 45%, transparent 60%);
  background-size:200% 100%;
  animation: shimmer 6s linear infinite;
  pointer-events:none;
}

/* 新規獲得分は最初だけ強めのフラッシュ（上乗せ） */
.badge-line.celebrate{
  border-color:#8aa3ff;
  box-shadow:0 0 22px rgba(126,168,255,.55), inset 0 0 18px rgba(110,168,255,.25);
}
.badge-line.celebrate::before{
  content:"";
  position:absolute; inset:-1px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 35%, transparent 70%);
  transform:translateX(-120%);
  animation: shine 1.8s ease-out 1 forwards .15s;
  pointer-events:none;
}

@keyframes shimmer{ 
  0%{ background-position:200% 0 } 
  100%{ background-position:-200% 0 } 
}
@keyframes shine{ to{ transform:translateX(120%); } }
@keyframes pulseGlow{
  0%{ box-shadow:0 0 14px rgba(122,162,255,.25) }
  100%{ box-shadow:0 0 22px rgba(122,162,255,.45) }
}

/* アニメ控えめ設定の人に配慮 */
@media (prefers-reduced-motion: reduce){
  .badge-line,
  .badge-line.sparkle,
  .badge-line.celebrate,
  .badge-line::after,
  .badge-line::before{
    animation: none !important;
  }
}

.victory-cta{display:flex;flex-direction:column;align-items:center;gap:14px}
.victory-cta .hand{width:min(340px,92%)}