:root {
  --bg0:#0b1220; --bg1:#101a2e; --panel:#16233c; --panel2:#1c2c4a;
  --gold:#e8b954; --red:#e2574c; --blue:#4c9fe2; --green:#5fbf77;
  --ink:#e8edf6; --dim:#8fa0bb; --brad:#2f7bff; --chow:#ff7a2f;
  --card-w:132px; --card-h:186px;
  --pixfont:"Pixelify Sans","Press Start 2P",monospace;
}
* { box-sizing:border-box; margin:0; padding:0; user-select:none; }
html,body { height:100%; }
body {
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, #1a2a4a 0%, transparent 60%),
    linear-gradient(180deg,var(--bg0) 0%, var(--bg1) 100%);
  color:var(--ink); overflow:hidden;
}
.hidden { display:none !important; }
img.pix { image-rendering:pixelated; }

/* ---------- pixel skyline backdrop ---------- */
#skyline {
  position:fixed; inset:auto 0 0 0; height:26vh; pointer-events:none; opacity:.16; z-index:0;
  background:
    linear-gradient(transparent 0 40%, #7b96c4 40%) left 4% bottom 0/9px 60% no-repeat,   /* CN tower mast */
    radial-gradient(circle at 4.45% 44%, #7b96c4 0 22px, transparent 23px) no-repeat,
    linear-gradient(#5f7bb0,#5f7bb0) left 10% bottom 0/70px 46% no-repeat,
    linear-gradient(#54709f,#54709f) left 17% bottom 0/48px 68% no-repeat,
    linear-gradient(#6784b8,#6784b8) left 24% bottom 0/86px 38% no-repeat,
    linear-gradient(#4d6693,#4d6693) left 33% bottom 0/60px 78% no-repeat,
    linear-gradient(#5f7bb0,#5f7bb0) left 41% bottom 0/44px 52% no-repeat,
    linear-gradient(#54709f,#54709f) left 47% bottom 0/92px 62% no-repeat,
    linear-gradient(#6784b8,#6784b8) left 58% bottom 0/56px 44% no-repeat,
    linear-gradient(#4d6693,#4d6693) left 65% bottom 0/74px 72% no-repeat,
    linear-gradient(#5f7bb0,#5f7bb0) left 74% bottom 0/50px 56% no-repeat,
    linear-gradient(#54709f,#54709f) left 81% bottom 0/88px 40% no-repeat,
    linear-gradient(#6784b8,#6784b8) left 91% bottom 0/62px 66% no-repeat;
}

/* =========================================================
   TITLE SCREEN
========================================================= */
#screen-title {
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; text-align:center;
  background:
    radial-gradient(900px 420px at 50% 8%, rgba(232,185,84,.10), transparent 60%),
    linear-gradient(180deg,#070d1a 0%, #0d1730 100%);
}
#screen-title h1 {
  font-family:var(--pixfont); font-size:56px; letter-spacing:4px; color:var(--gold);
  text-shadow:0 4px 0 #6b4e0e, 0 8px 24px rgba(0,0,0,.6);
}
#screen-title .tag { color:var(--dim); font-size:15px; font-style:italic; margin-top:-16px; }
.hero-pick { display:flex; gap:38px; }
.pick-card {
  width:230px; border-radius:16px; padding:18px 16px 20px; cursor:pointer; position:relative;
  border:3px solid #33507f; background:linear-gradient(180deg,#1b2b4a,#121e38);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.pick-card:hover { transform:translateY(-8px) scale(1.03); }
.pick-card.brad:hover { border-color:var(--brad); box-shadow:0 0 34px rgba(47,123,255,.4); }
.pick-card.chow:hover { border-color:var(--chow); box-shadow:0 0 34px rgba(255,122,47,.4); }
.pick-card img { width:170px; height:170px; border-radius:12px; object-fit:cover; background:#0a1226; }
.pick-card .pname { font-family:var(--pixfont); font-size:19px; margin-top:10px; color:var(--ink); }
.pick-card .psub { font-size:12px; color:var(--dim); margin-top:4px; min-height:32px; }
.pick-card .side-chip {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:800; letter-spacing:1px; padding:3px 12px; border-radius:20px; color:#0b1220;
}
.pick-card.brad .side-chip { background:var(--brad); }
.pick-card.chow .side-chip { background:var(--chow); }
#title-opts { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
#title-opts button, #title-opts .diff {
  background:var(--panel2); color:var(--ink); border:2px solid #33507f; border-radius:8px;
  padding:8px 18px; cursor:pointer; font-size:13px; font-weight:700;
}
#title-opts button:hover { background:#26529c; }
.diff .lv { color:var(--gold); }
#title-foot { color:#4b5f83; font-size:11px; max-width:640px; }

/* =========================================================
   GAME BOARD
========================================================= */
#screen-game { position:fixed; inset:0; display:flex; flex-direction:column; z-index:1; }
header {
  display:flex; align-items:center; gap:14px;
  padding:5px 14px; background:rgba(8,13,26,.9); border-bottom:1px solid #24365c; z-index:5;
}
header .logo { font-family:var(--pixfont); font-size:16px; letter-spacing:2px; color:var(--gold); white-space:nowrap; }
#pollbar-wrap { flex:1; max-width:430px; }
#pollbar {
  height:16px; border-radius:9px; overflow:hidden; display:flex; border:1px solid #33507f;
  font-size:9px; font-weight:800; line-height:14px;
}
#poll-p { background:linear-gradient(90deg,#2f7bff,#5a9bff); color:#04162e; padding-left:7px; transition:width .6s ease; white-space:nowrap; }
#poll-e { background:linear-gradient(90deg,#ff9a52,#ff7a2f); color:#2e1204; text-align:right; padding-right:7px; transition:width .6s ease; flex:1; white-space:nowrap; }
#ticker {
  flex:2; overflow:hidden; height:22px; border-radius:6px; background:#0a1124; border:1px solid #223458;
  font-size:11.5px; line-height:20px; color:#ffd98a; padding:0 10px; white-space:nowrap; text-overflow:ellipsis;
}
#ticker b { color:#fff; }
header .hbtns { display:flex; gap:6px; }
header .hbtns button {
  background:var(--panel2); color:var(--ink); border:1px solid #33507f; border-radius:6px;
  padding:3px 10px; cursor:pointer; font-size:12px;
}
header .hbtns button:hover { background:#26529c; }

#board { flex:1; display:flex; flex-direction:column; min-height:0; padding:2px 12px; }

/* ---------- hero rows ---------- */
.hero-row { display:flex; align-items:center; gap:12px; padding:2px 6px; }
.hero {
  display:flex; align-items:center; gap:10px; background:var(--panel);
  border:2px solid #2c4470; border-radius:12px; padding:4px 12px 4px 6px;
  transition:box-shadow .15s, border-color .15s; position:relative;
}
.hero.targetable { border-color:var(--red); box-shadow:0 0 16px rgba(226,87,76,.75); cursor:pointer; }
.hero .portrait {
  width:52px; height:52px; border-radius:10px; overflow:hidden; background:#0d1830;
  border:2px solid #3a5788; flex-shrink:0;
}
.hero .portrait img { width:100%; height:100%; object-fit:cover; }
.hero.pblue .portrait { border-color:var(--brad); }
.hero.porange .portrait { border-color:var(--chow); }
.hero .hname { font-weight:800; font-size:13.5px; }
.hero .hsub { font-size:10px; color:var(--dim); }
.hero .meta { font-size:10px; color:var(--dim); }
.hero .hp {
  font-size:19px; font-weight:800; color:#fff; background:var(--red); border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:2px solid #8f2f28; box-shadow:0 2px 6px rgba(0,0,0,.5); flex-shrink:0;
}
.hero .cap { font-size:12px; color:#7fd4ff; font-weight:700; white-space:nowrap; }
.hero .crystals { display:flex; gap:2px; }
.hero .crystals i {
  width:9px; height:13px; border-radius:3px; background:#173257; border:1px solid #2c4c7f;
}
.hero .crystals i.full { background:linear-gradient(180deg,#8fd2ff,#2f7bd8); border-color:#bfe6ff; }
.hero.hit { animation:shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 60%{transform:translateX(7px)} 80%{transform:translateX(-3px)} }

.powerbtn {
  margin-left:6px; width:56px; height:56px; border-radius:50%; cursor:pointer; position:relative;
  border:2px solid #6b5416; background:radial-gradient(circle at 35% 30%,#f7d372,#a9791c);
  color:#241a05; font-size:10px; font-weight:800; line-height:1.05; text-align:center; padding:4px;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.powerbtn:disabled { filter:grayscale(1) brightness(.55); cursor:not-allowed; }
.powerbtn.armed { border-color:#fff; box-shadow:0 0 16px rgba(247,211,114,.9); }
.powerbtn .pcost {
  position:absolute; top:-7px; left:-7px; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8fd2ff,#1f6db3); color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center; border:2px solid #d4ecff;
}
#ehandback { display:flex; }
.cardback {
  width:36px; height:50px; border-radius:5px; margin-left:-18px;
  background:
    repeating-linear-gradient(45deg, rgba(232,185,84,.14) 0 4px, transparent 4px 8px),
    linear-gradient(135deg,#28406e,#152341);
  border:1px solid #40609a;
}

/* ---------- battle fields ---------- */
.fieldrow {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:calc(var(--card-h) * .74); padding:2px 0;
}
.fieldrow.empty::before { content:attr(data-empty); color:#3d5378; font-size:12px; font-style:italic; }

#midbar {
  display:flex; align-items:center; gap:12px; padding:2px 8px;
  border-top:1px dashed #2a3f68; border-bottom:1px dashed #2a3f68;
}
#endturn {
  background:linear-gradient(180deg,#e8b954,#c99432); color:#241a05; font-weight:800;
  border:2px solid #f5d98c; border-radius:8px; padding:9px 18px; cursor:pointer; font-size:13px;
  letter-spacing:1px; white-space:nowrap; font-family:var(--pixfont);
}
#endturn:disabled { filter:grayscale(1) brightness(.6); cursor:not-allowed; }
#turnlabel { font-size:11px; color:var(--dim); white-space:nowrap; text-align:center; }
#log {
  flex:1; height:52px; overflow-y:auto; font-size:11px; color:#b8c6de;
  background:rgba(8,13,26,.6); border-radius:6px; padding:3px 8px; line-height:1.45;
}
#log .sys { color:var(--gold); }
#log .dmg { color:#ff9d94; }
#log .quip { color:#8fd0a0; font-style:italic; }

/* ---------- hand ---------- */
#hand {
  display:flex; justify-content:center; align-items:flex-end; gap:5px;
  padding:4px 8px 8px; min-height:calc(var(--card-h) + 14px); z-index:4;
}
#hand .card { transition:transform .12s, box-shadow .12s, border-color .12s, margin .12s; }
#hand .card:hover { transform:translateY(-14px) scale(1.05); z-index:30; }

/* =========================================================
   CARD COMPONENT
========================================================= */
.card {
  width:var(--card-w); height:var(--card-h); border-radius:10px; position:relative;
  background:linear-gradient(180deg,#223458,#182741); border:2px solid #3a5788;
  display:flex; flex-direction:column; padding:4px 5px; cursor:pointer; flex-shrink:0;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.card.spell { background:linear-gradient(180deg,#3a2c58,#241c3e); }
.card.sideL { border-bottom:3px solid #a04f1f; }
.card.sideR { border-bottom:3px solid #21529e; }
.card.legend { border-color:var(--gold); box-shadow:0 0 12px rgba(232,185,84,.4); }
.card .cost {
  position:absolute; top:-8px; left:-8px; width:27px; height:27px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8fd2ff,#1f6db3); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  border:2px solid #d4ecff; z-index:3; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.card .artbox {
  height:64px; border-radius:6px; overflow:hidden; background:#0c1526; position:relative; flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
}
.card .artbox img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; display:block; position:relative; z-index:1; }
.card .artbox .mono {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--pixfont); font-size:30px; color:rgba(232,185,84,.55);
  background:repeating-linear-gradient(45deg,#101c33 0 8px,#0c1526 8px 16px);
}
.card .cname { font-size:9.5px; font-weight:700; text-align:center; line-height:1.12; min-height:21px;
  display:flex; align-items:center; justify-content:center; padding:1px 1px 0; }
.card .ctext { flex:1; font-size:8px; color:#c9d6ea; text-align:center; line-height:1.22; overflow:hidden; padding:0 1px; }
.card .ctext b { color:var(--gold); }
.card .flav { font-size:6.8px; color:#7d8fae; font-style:italic; text-align:center; line-height:1.2; max-height:18px; overflow:hidden; }
.card .stats { position:absolute; bottom:-7px; left:-7px; right:-7px; display:flex; justify-content:space-between; pointer-events:none; z-index:3; }
.card .atk, .card .hp2 {
  width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; color:#fff; border:2px solid rgba(255,255,255,.6);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.card .atk { background:radial-gradient(circle at 35% 30%,#ffd27a,#c76b1d); }
.card .hp2 { background:radial-gradient(circle at 35% 30%,#ff8f86,#b7332a); }
.card .hp2.hurt { color:#ffd9d6; background:radial-gradient(circle at 35% 30%,#e2574c,#7e1812); }
.card .atk.buffed, .card .hp2.buffed { border-color:#8bf7a2; }
.card .kwbadges { position:absolute; top:-9px; right:-7px; display:flex; gap:2px; z-index:3; font-size:14px; }
.card .kwbadges span { filter:drop-shadow(0 0 3px rgba(0,0,0,.8)); }

#hand .card.playable { border-color:var(--green); box-shadow:0 0 12px rgba(95,191,119,.6); }
#hand .card.playable.legend { border-color:var(--gold); box-shadow:0 0 14px rgba(232,185,84,.8); }
.card.selected { border-color:#fff !important; box-shadow:0 0 18px rgba(255,255,255,.85) !important; }
.card.ready { border-color:var(--green); box-shadow:0 0 12px rgba(95,191,119,.65); }
.card.targetable { border-color:var(--red) !important; box-shadow:0 0 16px rgba(226,87,76,.85) !important; }
.card.sick .artbox::after {
  content:"📋 filing papers"; position:absolute; bottom:0; left:0; right:0; text-align:center;
  font-size:7.5px; color:#cdd9ee; background:rgba(4,8,18,.62); padding:1px 0;
}
.card.dmg-flash { animation:dmgflash .3s; }
@keyframes dmgflash { 0%{filter:brightness(2.2) saturate(.2) sepia(1) hue-rotate(-50deg)} 100%{filter:none} }
.card.dying { animation:die .45s forwards; }
@keyframes die { to { transform:scale(.1) rotate(20deg); opacity:0; } }
.card.entering { animation:enter .3s; }
@keyframes enter { from { transform:scale(.4); opacity:0; } }

/* field cards smaller */
.fieldrow .card { width:calc(var(--card-w)*.82); height:calc(var(--card-h)*.76); }
.fieldrow .card .artbox { height:52px; }
.fieldrow .card .flav { display:none; }
.fieldrow .card:hover { transform:scale(1.07); z-index:20; }

/* =========================================================
   OVERLAYS
========================================================= */
.modal {
  position:fixed; inset:0; background:rgba(4,8,18,.85); display:flex; align-items:center; justify-content:center;
  z-index:100; flex-direction:column; gap:16px;
}
.modal .box {
  background:var(--panel); border:2px solid var(--gold); border-radius:14px; padding:24px 30px;
  max-width:720px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.8); max-height:88vh; overflow-y:auto;
}
.modal h2 { color:var(--gold); letter-spacing:2px; margin-bottom:10px; font-family:var(--pixfont); }
.modal p { color:#c6d2e6; font-size:13px; line-height:1.6; margin-bottom:10px; }
.modal .rules { text-align:left; font-size:12.5px; }
.modal .rules li { margin:6px 0 6px 18px; }
.modal button.primary {
  background:linear-gradient(180deg,#e8b954,#c99432); border:none; border-radius:8px; padding:10px 26px;
  font-weight:800; font-size:14px; cursor:pointer; color:#241a05; margin-top:8px; letter-spacing:1px;
  font-family:var(--pixfont);
}
.modal button.ghost {
  background:transparent; border:1px solid #33507f; color:var(--dim); border-radius:8px;
  padding:8px 18px; cursor:pointer; font-size:12px; margin-top:8px;
}
.cardrow { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cardrow .card { cursor:pointer; }
.cardrow .card.tossing { opacity:.35; outline:3px dashed var(--red); }

/* discover */
#discover .cardrow .card:hover { transform:translateY(-10px) scale(1.1); }

/* gallery */
#gallery .box { max-width:1100px; width:92vw; }
#gallery .tabs { display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
#gallery .tabs button {
  background:var(--panel2); border:1px solid #33507f; color:var(--ink); border-radius:20px;
  padding:5px 16px; cursor:pointer; font-size:12px;
}
#gallery .tabs button.on { background:var(--gold); color:#241a05; font-weight:800; }
#gallery .grid {
  display:flex; flex-wrap:wrap; gap:14px 10px; justify-content:center; max-height:62vh; overflow-y:auto; padding:10px 2px;
}

/* hover preview */
#preview {
  position:fixed; z-index:200; pointer-events:none; display:none;
  transform:scale(1.55); transform-origin:top left; filter:drop-shadow(0 12px 30px rgba(0,0,0,.8));
}
#preview .card { cursor:default; }

/* floating combat text */
#fxlayer { position:fixed; inset:0; pointer-events:none; z-index:150; }
.floatnum {
  position:absolute; font-family:var(--pixfont); font-size:30px; font-weight:800;
  text-shadow:0 2px 0 rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.6);
  animation:floatup 1s forwards;
}
.floatnum.d { color:#ff6b5e; }
.floatnum.h { color:#7df79a; }
@keyframes floatup { 0%{opacity:0; transform:translateY(6px) scale(.6)} 15%{opacity:1; transform:translateY(0) scale(1.15)} 30%{transform:scale(1)} 100%{opacity:0; transform:translateY(-44px)} }

/* headline banner */
#headline-banner {
  position:fixed; top:34%; left:50%; transform:translate(-50%,-50%) rotate(-2deg); z-index:160;
  background:#f4ecd8; color:#191512; border:4px solid #191512; padding:16px 34px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.75); text-align:center; pointer-events:none;
  animation:slam .5s cubic-bezier(.2,2.2,.4,1), fadeout .6s 2.6s forwards; max-width:78vw;
}
#headline-banner .paper { font-family:Georgia,serif; font-size:11px; letter-spacing:3px; border-bottom:1px solid #191512; padding-bottom:3px; margin-bottom:6px; }
#headline-banner .head { font-family:Georgia,serif; font-weight:900; font-size:26px; line-height:1.15; }
#headline-banner .sub { font-family:Georgia,serif; font-style:italic; font-size:13px; margin-top:5px; color:#3d362e; }
@keyframes slam { from { transform:translate(-50%,-50%) scale(2.4) rotate(-14deg); opacity:0; } }
@keyframes fadeout { to { opacity:0; transform:translate(-50%,-58%) rotate(-2deg); } }

/* toast */
.toast {
  position:fixed; top:46%; left:50%; transform:translate(-50%,-50%);
  background:rgba(10,16,32,.94); border:1px solid var(--gold); color:var(--gold);
  padding:10px 26px; border-radius:10px; font-weight:700; letter-spacing:1.5px; z-index:210;
  animation:toast 1.4s forwards; pointer-events:none; font-size:14px; text-align:center;
}
@keyframes toast { 0%{opacity:0; transform:translate(-50%,-30%)} 15%{opacity:1; transform:translate(-50%,-50%)} 80%{opacity:1} 100%{opacity:0} }

/* end screen + confetti */
#endscreen .big { font-family:var(--pixfont); font-size:40px; color:var(--gold); margin-bottom:8px; }
#endscreen .votes { font-family:var(--pixfont); font-size:15px; color:var(--dim); margin-bottom:10px; }
.confetti { position:fixed; top:-12px; width:10px; height:16px; z-index:99; pointer-events:none; animation:confall linear forwards; }
@keyframes confall { to { transform:translateY(110vh) rotate(720deg); } }

/* screen shake */
#screen-game.quake { animation:quake .4s; }
@keyframes quake {
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-8px,4px)} 40%{transform:translate(7px,-5px)}
  60%{transform:translate(-5px,-4px)} 80%{transform:translate(4px,5px)}
}

@media (max-width:1360px) { :root { --card-w:118px; --card-h:168px; } }

/* intro video */
#intro-modal video { width:min(1120px, 88vw); border-radius:12px; border:2px solid var(--gold); box-shadow:0 30px 90px rgba(0,0,0,.9); background:#000; }
#title-opts button.gold { background:linear-gradient(180deg,#e8b954,#c99432); color:#241a05; border-color:#f5d98c; font-weight:800; }

/* tutorial coach */
#coach {
  position:fixed; right:18px; bottom:18px; z-index:180; width:330px;
  background:linear-gradient(180deg,#1d2c4c,#141f38); border:2px solid var(--gold); border-radius:12px;
  padding:14px 16px 12px; box-shadow:0 16px 44px rgba(0,0,0,.75);
  animation:coachin .3s;
}
@keyframes coachin { from { transform:translateY(24px); opacity:0; } }
#coach::before { content:"🎓 CAMPAIGN MANAGER"; display:block; font-family:var(--pixfont); font-size:11px; color:var(--gold); letter-spacing:1px; margin-bottom:6px; }
#coach-text { font-size:13px; line-height:1.5; color:#dbe5f4; }
#coach-text b { color:var(--gold); }
#coach-btns { display:flex; justify-content:space-between; margin-top:10px; }
#coach-btns button {
  background:var(--panel2); color:var(--ink); border:1px solid #33507f; border-radius:6px;
  padding:5px 12px; cursor:pointer; font-size:12px;
}
#coach-next { background:linear-gradient(180deg,#e8b954,#c99432) !important; color:#241a05 !important; font-weight:800; }