/* Copyright (c) 2026 Charles KWON OhJun. All rights reserved.
   DECKFALL — pure-DOM/CSS front end. No engine, no per-frame work: instant load,
   smooth CSS transitions, crisp scalable cards. */

:root {
  --gold: #f5b942; --gold-lite: #ffe08a; --teal: #35e0d0; --crimson: #ff4d6d;
  --violet: #a679ff; --blue: #5aa9ff; --green: #49dd93;
  --ink: #070b16; --panel: #131f39; --panel2: #1b2a4c; --line: #33477a;
  --text: #eef4ff; --dim: #93a6cc; --faint: #5f7196;
  --cardH: clamp(196px, 29vh, 296px);
  --cardW: calc(var(--cardH) * 0.7);
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden;
  font-family: "Rubik", system-ui, sans-serif; color: var(--text);
  background: #05070e; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hidden { display: none !important; }
b { font-weight: 700; }

/* ── animated backdrop ─────────────────────────────────────── */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, #17284c 0%, transparent 60%),
    linear-gradient(180deg, #0a1226 0%, #05070e 100%); }
#bg span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
#bg span:nth-child(1) { width: 620px; height: 620px; left: -8%; top: -12%;
  background: radial-gradient(circle, rgba(53,224,208,.30), transparent 70%); animation: drift1 26s ease-in-out infinite; }
#bg span:nth-child(2) { width: 680px; height: 680px; right: -10%; bottom: -16%;
  background: radial-gradient(circle, rgba(166,121,255,.26), transparent 70%); animation: drift2 32s ease-in-out infinite; }
#bg span:nth-child(3) { width: 520px; height: 520px; left: 40%; top: 30%;
  background: radial-gradient(circle, rgba(245,185,66,.16), transparent 70%); animation: drift1 38s ease-in-out infinite reverse; }
#bg::after { content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 240px 60px rgba(0,0,0,.7); pointer-events: none; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,40px); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-30px); } }
@media (prefers-reduced-motion: reduce) { #bg span { animation: none; } }

/* ── top HUD ────────────────────────────────────────────────── */
#hud { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 6;
  display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,17,34,.92), rgba(10,17,34,.55));
  backdrop-filter: blur(10px); border-bottom: 1px solid rgba(51,71,122,.5); }
#hud .brand { font-family: "Cinzel", serif; font-weight: 900; font-size: 22px;
  color: var(--gold-lite); letter-spacing: .06em; text-shadow: 0 0 18px rgba(245,185,66,.35); }
#hud .stat { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 18px; }
#hud .hp { color: #ff9db2; } #hud .gold { color: var(--gold-lite); }
#hud .pips { margin-left: auto; display: flex; gap: 7px; align-items: center; }
#hud .pip { font-size: 15px; color: var(--line); transition: .3s; }
#hud .pip.done { color: var(--faint); opacity: .55; }
#hud .pip.cur { color: var(--gold); font-size: 21px; text-shadow: 0 0 12px rgba(245,185,66,.8); transform: translateY(-1px); }
#hud .help { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
  background: rgba(4,8,14,.5); border: 1px solid var(--teal); color: var(--teal); font-weight: 800; font-size: 16px; }
#hud .help:hover { background: rgba(53,224,208,.18); }

/* ── battlefield ───────────────────────────────────────────── */
#battle { position: fixed; top: 56px; left: 0; right: 0; bottom: calc(var(--cardH) * 0.62 + 24px);
  z-index: 2; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); }
.enemy { position: relative; width: clamp(150px, 18vw, 210px); display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 14px 10px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(27,42,76,.55), rgba(10,17,34,.35));
  border: 1px solid rgba(51,71,122,.5); transition: transform .12s, box-shadow .2s; }
.enemy.dead { opacity: .35; filter: grayscale(.7); }
.enemy.hit { animation: hitShake .32s; }
@keyframes hitShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.enemy .intent { position: absolute; top: -22px; padding: 5px 14px; border-radius: 20px;
  font-weight: 800; font-size: 18px; background: rgba(13,22,44,.96); border: 2px solid;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); animation: bob 2.4s ease-in-out infinite; white-space: nowrap; }
.enemy .intent.atk { color: #ff9a9a; border-color: #ff6b6b; }
.enemy .intent.buff { color: #ffdf9b; border-color: #ffcf5a; }
.enemy .intent.def { color: #bcdcff; border-color: #6fb7ff; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.enemy .portrait { font-size: clamp(56px, 8vw, 88px); line-height: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.enemy .ename { font-weight: 700; font-size: 16px; color: var(--text); text-align: center; }
.enemy .hpbar { position: relative; width: 100%; height: 20px; border-radius: 11px;
  background: #2a1420; border: 1px solid #50202f; overflow: hidden; }
.enemy .hpbar i { position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(90deg, #ff4d6d, #ff7a6d); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.enemy .hpbar span { position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 12px "Rubik"; color: #fff; text-shadow: 0 1px 2px #000; }
.enemy .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 4px; }
.chip { font: 700 11px "Rubik"; padding: 3px 9px; border-radius: 8px; border: 1px solid; }
.chip.blue { color: var(--blue); border-color: var(--blue); background: rgba(90,169,255,.12); }
.chip.gold { color: var(--gold); border-color: var(--gold); background: rgba(245,185,66,.12); }
.chip.vio  { color: var(--violet); border-color: var(--violet); background: rgba(166,121,255,.12); }
.chip.red  { color: var(--crimson); border-color: var(--crimson); background: rgba(255,77,109,.12); }
/* targetable */
body.targeting .enemy:not(.dead) { cursor: crosshair; border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal), 0 0 26px rgba(53,224,208,.5); animation: tglow 1s ease-in-out infinite; }
@keyframes tglow { 0%,100% { box-shadow: 0 0 0 2px var(--teal), 0 0 20px rgba(53,224,208,.4); }
  50% { box-shadow: 0 0 0 3px var(--teal), 0 0 34px rgba(53,224,208,.75); } }
body.targeting .enemy:not(.dead):hover { transform: translateY(-6px) scale(1.04); }

/* ── dock (energy · hand · end turn) ───────────────────────── */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(var(--cardH) * 0.9);
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
#dock > * { pointer-events: auto; }
.energy { position: absolute; left: 22px; bottom: 28px; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; color: #3a2600;
  background: radial-gradient(circle at 38% 30%, #fff0c4, var(--gold) 58%, #b8791d 100%);
  box-shadow: 0 0 30px rgba(245,185,66,.55), inset 0 -6px 14px rgba(120,70,10,.5), inset 0 4px 8px rgba(255,255,255,.5); }
.energy .val { font: 800 34px "Rubik"; line-height: 1; }
.energy .val small { font-size: 15px; opacity: .8; }
.energy .lab { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font: 700 11px "Rubik"; letter-spacing: .14em; color: var(--dim); }
.pstat { position: absolute; left: 130px; bottom: 40px; display: flex; gap: 10px; }

.hand { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 14px; height: 100%;
  perspective: 1400px; }
.card { position: relative; width: var(--cardW); height: var(--cardH); margin: 0 -14px; cursor: pointer;
  border-radius: 16px; flex: 0 0 auto; transform-origin: bottom center;
  transform: translateY(var(--ty,0)) rotate(var(--rot,0deg));
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .18s;
  animation: dealIn .4s backwards; }
.card:hover { transform: translateY(-40px) scale(1.12) rotate(0deg) !important; z-index: 60;
  box-shadow: 0 26px 46px rgba(0,0,0,.6); }
.card.unaffordable { filter: grayscale(.55) brightness(.7); }
@keyframes dealIn { from { transform: translateY(120px) rotate(0); opacity: 0; } }

.card .face { position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  border: 2.5px solid var(--edge); box-shadow: 0 12px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  background: linear-gradient(165deg, var(--c1), var(--c2)); display: flex; flex-direction: column; }
.card.attack { --c1:#5a1a2e; --c2:#240a12; --edge:#ff6b8b; }
.card.skill  { --c1:#153a5c; --c2:#0a1a2c; --edge:#5ab6ff; }
.card.power  { --c1:#5a4012; --c2:#241905; --edge:#f5c542; }
.card .cost { position: absolute; top: 8px; left: 8px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #1a2540, #070c18);
  border: 2px solid var(--gold-lite); color: var(--gold-lite); font: 800 18px "Rubik"; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.card .ticon { position: absolute; top: 9px; right: 10px; font-size: 20px; z-index: 2; }
.card .cname { margin: 12px 8px 4px; text-align: center; font-family: "Cinzel", serif; font-weight: 800;
  font-size: clamp(13px, 1.5vh, 17px); color: #fdf4e2; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.card .art { flex: 1; display: grid; place-items: center; font-size: clamp(34px, 6vh, 52px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.card .ctext { margin: 0 8px 8px; padding: 7px 6px; border-radius: 9px; text-align: center;
  background: rgba(6,12,22,.5); border: 1px solid rgba(255,255,255,.08);
  font-size: clamp(10.5px, 1.35vh, 13px); color: #e8f0fb; line-height: 1.28; min-height: 30%;
  display: flex; align-items: center; justify-content: center; }

.endturn { position: absolute; right: 24px; bottom: 30px; padding: 0 30px; height: 62px; border: none;
  border-radius: 15px; cursor: pointer; color: #2a1c00; font: 800 20px "Rubik"; letter-spacing: .03em;
  background: linear-gradient(135deg, var(--gold-lite), var(--gold)); box-shadow: 0 8px 22px rgba(245,185,66,.45);
  transition: transform .1s, box-shadow .2s; }
.endturn:hover { box-shadow: 0 10px 30px rgba(245,185,66,.7); }
.endturn:active { transform: translateY(2px); }
.endturn small { display: block; font-size: 10px; font-weight: 600; opacity: .7; margin-top: 1px; }
.piles { position: absolute; right: 26px; bottom: 100px; text-align: right;
  font: 500 12px "Courier New", monospace; color: var(--dim); line-height: 1.5; }

.target-banner { position: absolute; left: 50%; bottom: calc(var(--cardH) + 6px); transform: translateX(-50%);
  padding: 9px 20px; border-radius: 12px; background: var(--teal); color: #04222b; font-weight: 800; cursor: pointer;
  box-shadow: 0 0 24px rgba(53,224,208,.6); animation: bob 1.4s ease-in-out infinite; z-index: 7; }

/* ── overlays / modals ─────────────────────────────────────── */
#overlay { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 26px; text-align: center;
  background: rgba(5,8,16,.82); backdrop-filter: blur(6px); animation: fade .3s; }
#overlay.title { background: transparent; backdrop-filter: none; }
@keyframes fade { from { opacity: 0; } }
#overlay h1 { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(58px, 13vw, 136px);
  color: #ffe08a; letter-spacing: .02em; text-shadow: 0 10px 34px rgba(0,0,0,.7), 0 0 60px rgba(245,185,66,.3);
  animation: rise .8s cubic-bezier(.16,1,.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
#overlay .rule { width: min(340px, 66vw); height: 2px; margin: 2px 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
#overlay .sub { color: #86ecdf; font-weight: 500; font-size: clamp(13px, 2vw, 20px); letter-spacing: .02em; }
#overlay .tag { color: var(--dim); font-size: clamp(13px, 1.6vw, 17px); max-width: 640px; }
#overlay .lead { color: var(--dim); font-size: clamp(16px, 2vw, 21px); max-width: 700px; }
#overlay .meta { color: var(--faint); font: 500 15px "Courier New", monospace; }
#overlay .bigemoji { font-size: clamp(60px, 10vw, 92px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
#overlay .foot { position: absolute; bottom: 20px; color: var(--faint); font: 500 12px "Courier New", monospace; }
.banner { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(40px, 7vw, 66px);
  text-shadow: 0 4px 16px rgba(0,0,0,.7); }
.banner.gold { color: var(--gold-lite); } .banner.green { color: var(--green); } .banner.red { color: var(--crimson); }

.cardrow { display: flex; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.cardrow .card { position: relative; margin: 0; animation: rise .5s backwards; }
.cardrow .card:nth-child(2) { animation-delay: .07s; }
.cardrow .card:nth-child(3) { animation-delay: .14s; }

/* ── buttons ───────────────────────────────────────────────── */
.btn { cursor: pointer; border: 2px solid; border-radius: 14px; padding: 13px 30px;
  font: 800 18px "Rubik"; background: rgba(0,0,0,.22); color: var(--text);
  transition: background .15s, transform .1s, box-shadow .2s; }
.btn:active { transform: translateY(2px); }
.btn.big { font-size: 22px; padding: 16px 46px; }
.btn.gold { border-color: var(--gold); color: #fff6df; background: rgba(245,185,66,.16); box-shadow: 0 0 24px rgba(245,185,66,.25); }
.btn.gold:hover { background: rgba(245,185,66,.34); box-shadow: 0 0 34px rgba(245,185,66,.5); }
.btn.teal { border-color: var(--teal); background: rgba(53,224,208,.12); }
.btn.teal:hover { background: rgba(53,224,208,.26); }
.btn.green { border-color: var(--green); background: rgba(73,221,147,.14); }
.btn.green:hover { background: rgba(73,221,147,.3); }
.btn.line { border-color: var(--line); background: rgba(51,71,122,.2); }
.btn.line:hover { background: rgba(51,71,122,.4); }
.btn:disabled { opacity: .55; cursor: default; }

/* ── how to play ───────────────────────────────────────────── */
.howto { position: fixed; inset: 0; z-index: 30; background: rgba(5,8,16,.97); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; animation: fade .3s; }
.howto h2 { font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(30px, 5vw, 44px); color: #ffe08a; margin-bottom: 8px; }
.howto .row { max-width: 780px; display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: baseline; }
.howto .row b { color: var(--gold); font-size: clamp(15px, 2vw, 18px); }
.howto .row span { color: #cfe0f7; font-size: clamp(13px, 1.7vw, 16px); line-height: 1.45; }
.howto .btn { margin-top: 18px; }

/* ── toast ─────────────────────────────────────────────────── */
#toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 40;
  padding: 10px 22px; border-radius: 12px; background: rgba(13,22,44,.96); border: 1px solid var(--line);
  font-weight: 600; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }