:root{
  --ink:#c8c2b4;          /* dirty bone text */
  --ink-dim:#7d7869;
  --blood:#7a1d12;
  --blood-bright:#a83323;
  --rust:#6b4a2b;
  --frame:#2a2622;
  --panel:rgba(14,13,12,0.78);
  --essence:#5a93a8;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%; overflow:hidden;
  background:#000;
  color:var(--ink);
  font-family:"Georgia","Times New Roman",serif;
  cursor:default;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  z-index:1;
}

/* ---------- CRT / grain overlay ---------- */
#crt{ position:fixed; inset:0; z-index:50; pointer-events:none; mix-blend-mode:normal; }
#crt .scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.22) 3px,
    rgba(0,0,0,0.22) 4px);
  opacity:0.5;
}
#crt .vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0.55) 78%,
    rgba(0,0,0,0.92) 100%);
}
#crt .aberration{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(40,60,70,0.05), transparent 60%);
  mix-blend-mode:screen;
}
#crt .grain{
  position:absolute; inset:-50%;
  width:200%; height:200%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:0.06;
  animation:grain 0.5s steps(3) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-6%,4%); }
  66%{ transform:translate(5%,-3%); }
  100%{ transform:translate(-3%,-5%); }
}

/* ---------- HUD ---------- */
#hud{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
}
.strip{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; }
.enemy-strip{ justify-content:flex-start; }
.player-strip{ align-items:flex-end; padding-bottom:14px; }

/* portraits */
.portrait{
  display:flex; gap:8px; align-items:center;
  background:var(--panel);
  border:1px solid var(--frame);
  box-shadow:inset 0 0 24px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.6);
  padding:6px 10px;
  pointer-events:auto;
}
.portrait-face{
  width:42px; height:42px;
  border:1px solid #000;
  background:#0a0a0a;
  filter:grayscale(0.4) contrast(1.1);
  image-rendering:pixelated;
}
.pname{ font-size:11px; letter-spacing:3px; color:var(--ink-dim); text-transform:uppercase; }
.pbars{ font-size:20px; font-weight:bold; letter-spacing:1px; }
.pbars .hp{ color:var(--blood-bright); text-shadow:0 0 8px rgba(168,51,35,0.6); }
.pbars .sep{ color:var(--ink-dim); margin:0 4px; font-size:14px; }
.pbars .deckcount{ color:var(--ink-dim); font-size:14px; }
.hp.flash{ animation:hpflash 0.4s; }
@keyframes hpflash{ 0%{ color:#fff; text-shadow:0 0 16px #fff; } 100%{} }

/* mana */
.mana-track,.enemy-mana{ display:flex; gap:3px; flex-wrap:wrap; max-width:200px; align-items:center; padding:4px 6px; }
.crystal{
  width:13px; height:13px;
  transform:rotate(45deg);
  border:1px solid #04141a;
  background:#10242b;
  box-shadow:inset 0 0 4px #000;
}
.crystal.full{
  background:radial-gradient(circle at 40% 35%, #9fd6e6, var(--essence) 70%);
  box-shadow:0 0 6px rgba(90,147,168,0.8), inset 0 0 3px #fff;
}
.crystal.spent{ background:#0c1316; box-shadow:inset 0 0 5px #000; opacity:0.55; }

.enemy-mana .crystal{ width:9px; height:9px; }

/* enemy hand (face-down) */
.enemy-hand{ display:flex; gap:-14px; margin-left:6px; }
.enemy-card-back{
  width:30px; height:44px; margin-left:-12px;
  background:linear-gradient(160deg,#1c1814,#0a0908);
  border:1px solid #000;
  box-shadow:inset 0 0 8px #000;
  position:relative;
}
.enemy-card-back::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(122,29,18,0.4);
}

/* ---------- player hand ---------- */
.player-left{ display:flex; flex-direction:column; gap:6px; pointer-events:auto; }
.player-right{ pointer-events:auto; }

.hand{
  flex:1;
  display:flex; justify-content:center; align-items:flex-end;
  gap:6px; padding:0 8px;
  min-height:150px;
  pointer-events:none;
}
.card{
  position:relative;
  width:104px; height:148px;
  flex:0 0 auto;
  pointer-events:auto;
  cursor:pointer;
  transform-origin:bottom center;
  transition:transform 0.14s ease, filter 0.14s ease, margin 0.14s ease;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.7));
}
.card canvas{ display:block; width:100%; height:100%; image-rendering:auto; }
.card:hover{ transform:translateY(-26px) scale(1.12); z-index:5; }
.card.playable::after{
  content:""; position:absolute; inset:-2px;
  border:1px solid rgba(159,214,230,0.5);
  box-shadow:0 0 12px rgba(90,147,168,0.45);
  pointer-events:none;
  animation:breathe 2.2s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:0.35; } 50%{ opacity:0.85; } }
.card.unplayable{ filter:drop-shadow(0 6px 10px rgba(0,0,0,0.7)) grayscale(0.7) brightness(0.6); }
.card.unplayable:hover{ transform:translateY(-10px) scale(1.04); }
.card.dragging{ opacity:0.3; }
.card.playing{ animation:cardplay 0.5s forwards; }
@keyframes cardplay{
  0%{ transform:translateY(-26px) scale(1.12); opacity:1; }
  100%{ transform:translateY(-220px) scale(0.4); opacity:0; }
}

/* end turn */
.end-turn{
  pointer-events:auto;
  width:74px; height:74px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #2a2017, #0c0a08);
  color:var(--ink);
  border:2px solid var(--rust);
  font-family:inherit; font-weight:bold; font-size:12px; letter-spacing:2px;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 0 18px rgba(0,0,0,0.8), inset 0 0 12px #000;
  text-shadow:0 0 6px #000;
  transition:all 0.15s;
}
.end-turn:hover{ color:#fff; border-color:var(--blood-bright); box-shadow:0 0 24px rgba(168,51,35,0.5), inset 0 0 12px #000; }
.end-turn.ready{ animation:pulse 1.6s ease-in-out infinite; }
.end-turn.waiting{ opacity:0.4; pointer-events:none; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 18px rgba(0,0,0,0.8), inset 0 0 12px #000; } 50%{ box-shadow:0 0 26px rgba(159,214,230,0.45), inset 0 0 12px #000; } }

/* banner */
#banner{
  position:absolute; top:46%; left:0; right:0;
  text-align:center; pointer-events:none;
  z-index:21;
}
#banner span{
  display:inline-block;
  font-size:34px; letter-spacing:10px; text-transform:uppercase;
  color:var(--ink);
  text-shadow:0 0 20px #000, 0 0 40px rgba(122,29,18,0.5);
  opacity:0;
}
#banner span.show{ animation:bannerShow 1.8s ease-out forwards; }
@keyframes bannerShow{
  0%{ opacity:0; letter-spacing:30px; filter:blur(6px); }
  20%{ opacity:1; }
  70%{ opacity:1; letter-spacing:10px; filter:blur(0); }
  100%{ opacity:0; letter-spacing:8px; }
}

/* targeting hint */
#hint{
  position:fixed; bottom:172px; left:0; right:0; text-align:center;
  z-index:22; pointer-events:none;
  font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--blood-bright);
  text-shadow:0 0 10px #000; opacity:0; transition:opacity 0.2s;
}
#hint.on{ opacity:1; }
body.targeting #gl{ cursor:crosshair; }

/* ---------- title & gameover ---------- */
#title,#gameover{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(8,8,8,0.85), #000 80%);
  text-align:center;
}
#gameover{ display:none; }
.title-inner h1{
  font-size:64px; letter-spacing:18px; font-weight:normal;
  color:var(--ink);
  text-shadow:0 0 30px rgba(122,29,18,0.7), 0 4px 0 #000;
  animation:flicker 5s infinite;
}
@keyframes flicker{
  0%,100%{ opacity:1; } 7%{ opacity:0.55; } 8%{ opacity:1; }
  41%{ opacity:1; } 42%{ opacity:0.35; } 43%{ opacity:1; }
  78%{ opacity:0.85; } 79%{ opacity:0.4; } 80%{ opacity:1; }
}
.title-inner .sub{ color:var(--ink-dim); letter-spacing:6px; font-style:italic; margin:10px 0 22px; }
.title-inner .flavor{ color:var(--blood); font-style:italic; letter-spacing:1px; min-height:22px; margin-bottom:26px; max-width:420px; margin-left:auto; margin-right:auto; }
#startBtn,#againBtn{
  font-family:inherit; font-size:18px; letter-spacing:6px;
  background:transparent; color:var(--ink);
  border:1px solid var(--rust); padding:14px 34px; cursor:pointer;
  transition:all 0.2s;
}
#startBtn:hover,#againBtn:hover{ color:#fff; border-color:var(--blood-bright); letter-spacing:9px; box-shadow:0 0 24px rgba(122,29,18,0.4); }
.howto{ margin-top:34px; color:var(--ink-dim); font-size:12px; line-height:1.9; letter-spacing:1px; max-width:440px; }
.howto b{ color:var(--essence); font-weight:normal; }
.go-inner h2{ font-size:40px; letter-spacing:10px; color:var(--ink); margin-bottom:26px; text-shadow:0 0 24px rgba(122,29,18,0.6); }

/* floating combat numbers */
.float-num{
  position:fixed; z-index:40; pointer-events:none;
  font-size:26px; font-weight:bold; letter-spacing:1px;
  text-shadow:0 0 8px #000, 0 2px 0 #000;
  animation:floatup 1s ease-out forwards;
}
.float-num.dmg{ color:var(--blood-bright); }
.float-num.heal{ color:#7fae6a; }
@keyframes floatup{
  0%{ transform:translate(-50%,0) scale(0.6); opacity:0; }
  20%{ transform:translate(-50%,-14px) scale(1.2); opacity:1; }
  100%{ transform:translate(-50%,-54px) scale(1); opacity:0; }
}

/* ---------- creature nameplates (projected over 3D) ---------- */
#plates{ position:fixed; inset:0; z-index:30; pointer-events:none; }
.plate{
  position:absolute; top:0; left:0;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  pointer-events:auto; cursor:pointer;
  font-family:Georgia, serif;
  padding:2px 4px;
  filter:drop-shadow(0 2px 3px #000);
}
.plate .pn{
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  color:#b9b2a2; background:rgba(8,8,8,0.7); padding:1px 5px;
  border:1px solid #000; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis;
}
.plate .ps{ display:flex; gap:3px; }
.plate .ps b{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; font-size:13px; font-weight:bold;
  background:#0a0807; border:1px solid #000; color:#fff;
}
.plate .ps .pa{ color:#d8543f; box-shadow:inset 0 0 6px rgba(168,51,35,0.5); }
.plate .ps .ph{ color:#8fce76; box-shadow:inset 0 0 6px rgba(60,110,40,0.5); }
.plate.taunt .ps{ padding:0 4px; border-left:2px solid #6a6052; border-right:2px solid #6a6052; }
.plate.ready .pn{ color:#bfeaff; box-shadow:0 0 8px rgba(120,200,230,0.5); }
.plate.ready::after{
  content:""; position:absolute; inset:-3px;
  border:1px solid rgba(159,214,230,0.6); animation:breathe 1.8s ease-in-out infinite;
}
.plate.selected .pn{ color:#fff; background:rgba(40,80,100,0.9); }
.plate.selected::after{
  content:""; position:absolute; inset:-4px;
  border:2px solid rgba(159,214,230,0.9); box-shadow:0 0 14px rgba(120,200,230,0.7);
}
.plate.targetable{ cursor:crosshair; }
.plate.targetable::before{
  content:""; position:absolute; inset:-5px;
  border:1px dashed rgba(216,84,63,0.9);
  animation:tflicker 0.7s steps(2) infinite;
}
@keyframes tflicker{ 0%{ opacity:0.4; } 100%{ opacity:1; } }

/* portrait as targetable core */
.portrait.targetable{ cursor:crosshair; box-shadow:inset 0 0 24px rgba(168,51,35,0.5), 0 0 18px rgba(168,51,35,0.7); }
.portrait.targetable::after{
  content:"✛"; position:absolute; color:#d8543f; font-size:18px; right:6px; top:4px;
  animation:tflicker 0.6s steps(2) infinite;
}
.enemy-portrait, .player-portrait{ position:relative; }

.card.selected{ transform:translateY(-30px) scale(1.14); }
.card.selected::after{
  content:""; position:absolute; inset:-2px;
  border:1px solid rgba(216,84,63,0.8); box-shadow:0 0 14px rgba(168,51,35,0.6);
}

@media (max-width:680px){
  .card{ width:82px; height:116px; }
  .hand{ min-height:120px; gap:3px; }
  .title-inner h1{ font-size:42px; letter-spacing:10px; }
  .portrait-face{ width:34px; height:34px; }
  #banner span{ font-size:24px; letter-spacing:6px; }
}