@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

:root{
    --bg1:#0b0f1a; --bg2:#10182b; --ink:#e6edf6; --muted:#9fb0ca; --accent:#8b5cf6; --good:#34d399; --bad:#f43f5e; --warn:#f59e0b;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--ink);
    background: radial-gradient(1000px 700px at 15% 10%, #1a2446 0, transparent 60%),
                radial-gradient(900px 600px at 85% 90%, #24163f 0, transparent 60%),
                linear-gradient(180deg, var(--bg1), var(--bg2));
    overflow:hidden;
  }

  /* glow blobs */
  .glow{position:fixed; inset:-25vmax; pointer-events:none; filter:blur(80px) saturate(120%); opacity:.55;
    background:
      radial-gradient(closest-side, #60a5fa 0, transparent 70%) -15vmax -10vmax/60vmax 60vmax no-repeat,
      radial-gradient(closest-side, #a78bfa 0, transparent 70%) 30vmax 10vmax/60vmax 60vmax no-repeat,
      radial-gradient(closest-side, #34d399 0, transparent 70%) 0 30vmax/60vmax 60vmax no-repeat;
  }

  header{position:fixed; inset:0 0 auto 0; z-index:40; padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:12px;
    background:linear-gradient(180deg, rgba(10,14,24,.5), rgba(10,14,24,.2), transparent); backdrop-filter: blur(8px);
  }
  .brand{display:flex; align-items:center; gap:10px}
  .logo{width:34px; aspect-ratio:1; border-radius:12px; background:conic-gradient(from 180deg, #8b5cf6, #60a5fa, #34d399, #f472b6, #8b5cf6); box-shadow:0 8px 30px rgba(139,92,246,.35)}
  h1{margin:0; font-size:clamp(18px,3.6vw,22px)}
  .hud{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .chip{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border-radius:14px; padding:8px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .chip.chip-mod{background:rgba(59,130,246,.18); box-shadow:inset 0 1px 0 rgba(191,219,254,.4); font-size:18px;}
  .btn{appearance:none; border:0; border-radius:14px; padding:10px 14px; font-weight:800; letter-spacing:.3px; cursor:pointer;
    color:#0b0f1a; background:linear-gradient(180deg,#f8fafc,#e5e7eb); box-shadow:0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.7)}
  .btn:active{transform:translateY(0)}

  main{position:fixed; inset:70px 0 0 0; display:grid; grid-template-rows:auto 1fr auto; padding:16px}

  /* board */
  .board{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; height:100%;}
  @media (max-width: 960px){ .board{grid-template-columns:1fr; grid-auto-rows:minmax(0,auto)} }

  /* combat panel */
  .combat{position:relative; border-radius:20px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); overflow:hidden;}
  .arena{position:relative; height:52%; min-height:260px; border-radius:16px; background:rgba(255,255,255,.04);
    display:grid; grid-template-columns:1fr 1fr; place-items:center; overflow:hidden}

  /* player & enemy */
  .unit{position:relative; width:min(380px, 90%); height:160px; border-radius:18px; background:rgba(0,0,0,.25);
    display:grid; grid-template-columns: auto 1fr; gap:10px; align-items:center; padding:12px 14px; backdrop-filter: blur(4px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08); --pulse-start:rgba(139,92,246,.45); --pulse-end:rgba(165,180,252,.95);}
  .unit.drop-target{outline:2px dashed var(--pulse-start); outline-offset:6px; animation:targetPulse 1.1s ease-in-out infinite;}
  #enemy.drop-target{--pulse-start:rgba(248,113,113,.45); --pulse-end:rgba(239,68,68,.9);}
  #player.drop-target{--pulse-start:rgba(52,211,153,.45); --pulse-end:rgba(16,185,129,.9);}
  .avatar{width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,.05)),
    conic-gradient(from 0turn, var(--accent), #60a5fa, #34d399, #f472b6, var(--accent)); filter:saturate(120%); box-shadow:0 12px 30px rgba(0,0,0,.35)}
  .bar{height:10px; background:rgba(255,255,255,.15); border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.15)}
  .hp{height:100%; background: linear-gradient(90deg, #ef4444, #f59e0b);}
  .shield{height:100%; background: linear-gradient(90deg, #60a5fa, #22d3ee)}
  .row{display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center}
  .title{font-weight:800; letter-spacing:.3px}
  .intent{font-weight:700; color:var(--warn)}

  /* feed */
  .feed{position:absolute; inset:auto 16px 16px 16px; height:40%; min-height:150px; display:flex; gap:8px; align-items:flex-end}
  .pile{flex:1; border-radius:14px; padding:10px; background:rgba(255,255,255,.04); display:grid; grid-template-rows:auto 1fr; gap:6px}
  .pile h3{margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted)}
  .pile .cards{display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; overflow:auto}

  /* hand */
  .hand{display:flex; gap:10px; align-items:flex-end; justify-content:center; height:220px; margin-top:10px}
  .card{width:160px; aspect-ratio:2/3; border-radius:18px; position:relative; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 40px rgba(0,0,0,.35); padding:12px; display:flex; align-items:center; justify-content:center;
    transform-origin: bottom center; cursor:grab; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    overflow:hidden; backdrop-filter: blur(6px);}
  .card:hover{transform: translateY(-12px) rotate(-2deg) scale(1.02); filter:saturate(115%); box-shadow:0 26px 60px rgba(0,0,0,.5)}
  .card.card-attack{background:linear-gradient(180deg, rgba(248,113,113,.35), rgba(127,29,29,.42)); border-color:rgba(248,113,113,.45);}
  .card.card-heal{background:linear-gradient(180deg, rgba(74,222,128,.35), rgba(21,128,61,.42)); border-color:rgba(74,222,128,.45);}
  .card.card-skill{background:linear-gradient(180deg, rgba(96,165,250,.33), rgba(30,64,175,.4)); border-color:rgba(96,165,250,.4);}
  .card.card-modifier{background:linear-gradient(180deg, rgba(129,200,255,.44), rgba(37,99,235,.52)); border-color:rgba(191,219,254,.55); box-shadow:0 22px 48px rgba(59,130,246,.45);}
  .card .glimmer{position:absolute; inset: -100% -50%; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 15%, transparent 30%);
    transform:translateX(-100%);}
  .card:hover .glimmer{animation:glimmer 1.2s ease-in-out}
  .card-value{position:relative; z-index:2; font-family:'UnifrakturMaguntia','Old English Text MT','Cinzel',serif;
    font-size:clamp(52px, 9vw, 96px); font-weight:700; letter-spacing:.04em; color:rgba(248,250,252,.96);
    text-shadow:0 6px 24px rgba(15,23,42,.55);}
  .card.is-dragging{cursor:grabbing; pointer-events:none; position:fixed; left:0; top:0; transform:translate3d(0,0,0) scale(1.05); z-index:300;
    opacity:.35;
    box-shadow:0 24px 65px rgba(139,92,246,.55), 0 0 28px rgba(79,70,229,.75);}
  .card.is-dragging::after{content:''; position:absolute; inset:-12px; border-radius:22px; border:2px solid rgba(139,92,246,.7);
    box-shadow:0 0 25px rgba(129,140,248,.75);}
  .card.drag-origin{opacity:.25;}
  @keyframes glimmer{to{transform:translateX(100%)}}
  @keyframes targetPulse{0%,100%{outline-color:var(--pulse-start)}50%{outline-color:var(--pulse-end)}}

  /* victory overlay */
  .victory{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(8,11,20,.82); backdrop-filter:blur(12px); z-index:160;}
  .victory.show{display:flex;}
  .victory-inner{position:relative; z-index:2; text-align:center; padding:28px 36px; border-radius:26px; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); box-shadow:0 26px 70px rgba(0,0,0,.55);}
  .victory-inner h2{margin:0 0 10px; font-size:clamp(32px,5.5vw,46px);}
  .victory-inner p{margin:0 0 20px; color:var(--muted); font-size:16px;}
  .victory-btn{padding:12px 26px; font-size:16px;}
  .confetti-wrap{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
  .confetti{position:absolute; top:-12vh; left:var(--x); width:10px; height:18px; border-radius:2px; background:hsl(var(--hue), 88%, 62%); opacity:0; transform:translate3d(0,0,0) rotate(var(--rotate)); animation:confettiFall var(--duration) linear infinite; animation-delay:var(--delay);}
  @keyframes confettiFall{
    0%{transform:translate3d(0,-12vh,0) rotate(var(--rotate)); opacity:0;}
    10%{opacity:1;}
    100%{transform:translate3d(0,120vh,0) rotate(calc(var(--rotate) + 240deg)); opacity:0;}
  }

  .zone{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:8px}
  .end{padding:10px 16px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); cursor:pointer; font-weight:800}
  .end:hover{background:rgba(255,255,255,.12)}
  .energy{display:flex; gap:6px}
  .orb{width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, #fde68a); box-shadow:0 0 10px #fde68a}

  /* sidebar map */
  .side{border-radius:20px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); overflow:hidden; display:grid; grid-template-rows:auto 1fr}
  .map{position:relative; border-radius:16px; background:rgba(255,255,255,.04); overflow:hidden; padding:12px}
  .nodes{position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); align-items:center; padding:10px}
  .node{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-weight:900; color:#0b0f1a;
    background:linear-gradient(180deg,#f8fafc,#e5e7eb); box-shadow:0 10px 18px rgba(0,0,0,.35)}
  .node.done{background:linear-gradient(180deg,#bbf7d0,#86efac)}
  .node.boss{background:linear-gradient(180deg,#fecaca,#fda4af)}
  .node:hover{transform:translateY(-3px)}
  .path{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none}

  /* fly / hit numbers */
  .fly{position:fixed; left:0; top:0; translate: -50% -50%; pointer-events:none; z-index:60}
  .dmg{position:absolute; transform:translate(-50%,-50%); font-weight:900; text-shadow:0 6px 18px rgba(0,0,0,.5)}

  body::after{content:''; position:fixed; inset:0; pointer-events:none; background:transparent; transition:background .2s ease; z-index:200; mix-blend-mode:screen;}
  body.pulse-red::after{background:rgba(248,113,113,.22);}
  body.pulse-green::after{background:rgba(74,222,128,.22);}

  .spark{position:fixed; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, #fef3c7 0, rgba(251,191,36,.4) 70%, transparent 100%);
    pointer-events:none; z-index:210; opacity:0; animation:sparkPop .45s ease-out forwards;}
  .spark.spark-heal{background:radial-gradient(circle, #bbf7d0 0, rgba(74,222,128,.45) 70%, transparent 100%);}
  @keyframes sparkPop{
    0%{transform:scale(.4) translate3d(0,0,0); opacity:0;}
    10%{opacity:1;}
    100%{transform:scale(1.4) translate3d(var(--dx), var(--dy), 0); opacity:0;}
  }

  #player.heal-glow{animation:healPulse .6s ease-out;}
  @keyframes healPulse{
    0%{box-shadow:0 0 0 rgba(134,239,172,.0);}
    30%{box-shadow:0 0 35px rgba(134,239,172,.45);}
    100%{box-shadow:0 0 0 rgba(134,239,172,.0);}
  }

  .flash{animation:flash .28s ease}
  @keyframes flash{ 50%{ filter:brightness(1.8)} }
  .shake{animation:shake .25s cubic-bezier(.36,.07,.19,.97)}
  @keyframes shake{10%,90%{transform:translate3d(-2px,0,0)} 20%,80%{transform:translate3d(4px,0,0)} 30%,50%,70%{transform:translate3d(-6px,0,0)} 40%,60%{transform:translate3d(6px,0,0)} }

  /* modal reward */
  .modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(5,8,14,.5); backdrop-filter: blur(8px); z-index:70; visibility:hidden; opacity:0; transition:.3s}
  .modal[open]{visibility:visible; opacity:1}
  .dialog{width:min(860px,94vw); border-radius:20px; padding:16px; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow:0 20px 60px rgba(0,0,0,.45)}
  .reward-columns{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:12px;}
  .reward-section h3{margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted);}
  .reward-section.is-hidden{display:none;}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .modifier-grid{grid-template-columns:repeat(2,1fr);}
  @media (max-width:840px){
    .reward-columns{grid-template-columns:1fr;}
    .modifier-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:720px){
    .grid{grid-template-columns:1fr}
  }
  @media (max-width:600px){
    .modifier-grid{grid-template-columns:1fr;}
  }
  .modifier-empty{margin:0; padding:16px; text-align:center; color:var(--muted); font-size:13px; background:rgba(255,255,255,.05); border-radius:14px;}

  .stats-dialog{width:min(860px,94vw); display:flex; flex-direction:column; gap:18px;}
  .stats-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px;}
  .stats-header h2{margin:0; font-size:24px;}
  .stats-close{padding-inline:18px;}
  .stats-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; flex:1;}
  .stat-card{border-radius:16px; padding:16px; background:rgba(255,255,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
  .stat-card h3{margin:0 0 12px; text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--muted);}
  .stat-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:14px;}
  .stat-row strong{font-size:16px;}
  .stat-total{margin-bottom:14px; font-weight:600; color:var(--muted);}
  .stat-bars{display:flex; flex-direction:column; gap:8px;}
  .stat-bar{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:14px;}
  .bar-track{height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12);}
  .bar-fill{height:100%; background:linear-gradient(90deg, #38bdf8, #8b5cf6);}
  .stat-bar .count{font-weight:700;}
  .stat-empty{margin:0; color:var(--muted); font-size:13px;}
  .stat-slider{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
  .stat-slider label{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;}
  .stat-slider input[type="range"]{width:100%; accent-color:#8b5cf6;}
  .stat-slider-secondary{accent-color:#f472b6;}
  .stat-slider-values{display:flex; justify-content:space-between; font-size:13px; color:var(--muted);}
  .balance-pill{display:flex; border-radius:999px; overflow:hidden; border:1px solid rgba(148,163,184,.2); margin:10px 0 14px; height:24px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
  .balance-pill span{display:flex; align-items:center; justify-content:center; flex:1;}
  .balance-attack{background:rgba(248,113,113,.45); color:rgba(15,23,42,.9); min-width:32px;}
  .balance-heal{background:rgba(74,222,128,.45); color:rgba(15,23,42,.9); min-width:32px;}

.skull-link {
    position: fixed;
    bottom: 18px;
    right: 18px;
    font-size: 38px;
    text-decoration: none;
    z-index: 200;
    color: #f8fafc;
    text-shadow: 0 0 10px #f472b6, 0 0 20px #a78bfa;
    border-radius: 50%;
    padding: 10px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
    box-shadow: 0 0 20px rgba(244,114,182,.4);
    animation: skullPulse 2.6s ease-in-out infinite, skullFloat 5s ease-in-out infinite;
    transition: transform .25s ease, box-shadow .25s ease;
    backdrop-filter: blur(6px);
  }
  .skull-link:hover {
    transform: scale(1.25) rotate(-5deg);
    box-shadow: 0 0 30px #f9a8d4, 0 0 60px #a78bfa;
    text-shadow: 0 0 20px #f9a8d4, 0 0 40px #a78bfa;
  }

  @keyframes skullPulse {
    0%, 100% { text-shadow: 0 0 10px #f472b6, 0 0 20px #a78bfa; }
    50% { text-shadow: 0 0 20px #f9a8d4, 0 0 40px #c084fc; }
  }
  @keyframes skullFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(2deg); }
  }
  .vamp-link {
    position: fixed;
    bottom: 18px;
    left: 18px;
    font-size: 38px;
    text-decoration: none;
    z-index: 200;
    color: #f8fafc;
    text-shadow: 0 0 10px #60a5fa, 0 0 20px #38bdf8;
    border-radius: 50%;
    padding: 10px;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
    box-shadow: 0 0 20px rgba(96,165,250,.4);
    animation: skullPulse 2.6s ease-in-out infinite, skullFloat 5s ease-in-out infinite;
    transition: transform .25s ease, box-shadow .25s ease;
    backdrop-filter: blur(6px);
  }
  .vamp-link:hover {
    transform: scale(1.25) rotate(5deg);
    box-shadow: 0 0 30px #93c5fd, 0 0 60px #60a5fa;
    text-shadow: 0 0 20px #93c5fd, 0 0 40px #60a5fa;
  }
.chip-mod{background:rgba(96,165,250,.25);}