:root{
    --bg:#fff6e6; --ink:#3b2a1a; --line:#e8d5b5;
    --fish:#3aa0ff; --catnip:#ff7a4a; --box:#b88a4a;
    --ally:#5ab0ff; --enemy:#ff6b6b; --gold:#ffd23f;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:14px}
  h1{font-size:18px;margin:2px 0}
  .sub{font-size:12px;opacity:.65;margin-bottom:8px}
  .ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;font-size:13px}
  .ctrl button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit}
  .ctrl button:hover{background:#ffeccc}
  .ctrl label{display:flex;align-items:center;gap:6px}

  /* ───────── 무대 ───────── */
  #stage{position:relative;width:min(760px,100%);height:1100px;border-radius:20px;overflow:hidden;color:#fff;
    background:
      radial-gradient(ellipse at 50% 0%,#5b3a7a66,transparent 55%),
      radial-gradient(ellipse at 50% 100%,#2c5a8a66,transparent 55%),
      linear-gradient(#1c1731,#2a2145 50%,#1c2a45);
    box-shadow:0 10px 34px #0004;display:flex;flex-direction:column;padding:10px 14px 12px}
  #stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:20px;
    box-shadow:inset 0 0 70px #0008}

  /* 상단/하단 HUD */
  .hud{display:flex;align-items:center;gap:10px;height:64px;position:relative;z-index:2}
  .who{font-size:12px;font-weight:800;letter-spacing:.08em;min-width:70px}
  .who small{display:block;font-weight:500;opacity:.6;letter-spacing:0}
  .team-hp{flex:1;height:14px;border-radius:8px;background:#0006;border:1px solid #fff2;overflow:hidden;position:relative}
  .team-hp i{display:block;height:100%;width:100%;transition:width .45s}
  .enemy-side .team-hp i{background:linear-gradient(90deg,#ff5a5a,#ff9a7a)}
  .ally-side .team-hp i{background:linear-gradient(90deg,#3a9aff,#7ad8ff)}
  .team-hp span{position:absolute;inset:0;font-size:10px;text-align:center;line-height:14px;text-shadow:0 1px 2px #000a}

  /* ───────── 덱 더미 ───────── */
  .pile{position:relative;width:46px;height:64px;flex:none}
  .pile .back{position:absolute;inset:0;border-radius:7px;border:2px solid #fff6;
    background:repeating-linear-gradient(45deg,#6a4a9a 0 6px,#7a5aaa 6px 12px);display:grid;place-items:center;font-size:20px}
  .pile .back:nth-child(1){transform:translate(-4px,4px);opacity:.55}
  .pile .back:nth-child(2){transform:translate(-2px,2px);opacity:.8}
  .pile .cnt{position:absolute;right:-8px;bottom:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--gold);color:#3b2a1a;
    font-size:11px;font-weight:800;display:grid;place-items:center;z-index:3;border:2px solid #fff8}
  .enemy-side .pile .lbl{top:auto;bottom:-14px}
  .enemy-side{margin-bottom:8px}
  .slot .num{display:none}
  .pile.bump{animation:bump .3s}
  @keyframes bump{50%{transform:scale(1.18)}}
  .pile.empty .back{opacity:.18}
  .pile .lbl{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:9px;opacity:.65;white-space:nowrap}

  /* ───────── 필드 ───────── */
  .field{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:22px;
    margin:2px 0;border-radius:18px;z-index:1}
  .field::before{content:"";position:absolute;inset:0;border-radius:18px;
    background:
      repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 34px),
      repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 34px),
      linear-gradient(var(--tint),transparent);
    border:1px solid #ffffff1c}
  .enemy-field{--tint:#ff6b6b26}
  .ally-field{--tint:#5ab0ff26}
  .enemy-field::before{background-blend-mode:normal;background:
      repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 34px),
      repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 34px),
      linear-gradient(#ff6b6b30,transparent 80%)}
  .ally-field::before{background:
      repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 34px),
      repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 34px),
      linear-gradient(transparent 20%,#5ab0ff30)}

  /* 슬롯: 카드가 올라가는 자리 */
  .slot{position:relative;width:min(132px,27%);aspect-ratio:132/178;border-radius:14px;
    border:2px dashed #ffffff30;background:radial-gradient(circle at 50% 60%,#ffffff12,transparent 70%);display:grid;place-items:center}
  .slot::before{content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:14px;border-radius:50%;
    background:radial-gradient(ellipse,#000a,transparent 70%)}
  .slot .rune{position:absolute;inset:-5px;border-radius:17px;border:2px solid transparent;opacity:.0;transition:.3s}
  .slot[data-el=fish]  {--c:var(--fish)}
  .slot[data-el=catnip]{--c:var(--catnip)}
  .slot[data-el=box]   {--c:var(--box)}
  .slot .num{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);font-size:9px;background:#2a2145;
    padding:0 7px;border-radius:8px;color:#fff9;border:1px solid #ffffff22;z-index:0}
  .slot.ready .rune{opacity:1;border-color:var(--gold);box-shadow:0 0 18px var(--gold),inset 0 0 12px #ffd23f66;animation:pulse .7s infinite alternate}
  @keyframes pulse{to{box-shadow:0 0 28px var(--gold),inset 0 0 18px #ffd23f99}}
  .slot.dead{border-color:#ffffff10;background:none}

  /* 중앙 레인 */
  .lane{height:150px;display:flex;align-items:center;gap:12px;position:relative;z-index:2}
  .lane::before,.lane::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,#ffd23f99,transparent)}
  .vs{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:15px;color:#3b2a1a;
    background:radial-gradient(circle at 35% 30%,#fff2b0,var(--gold));box-shadow:0 0 18px #ffd23f88}
  .queue{position:absolute;left:50%;transform:translate(-50%,0);top:46px;font-size:10px;opacity:0}

  /* ───────── 유닛(카드 자리 — 그림은 비움) ───────── */
  .unit{position:absolute;inset:0;will-change:transform}
  .card{position:absolute;inset:0;border-radius:12px;border:3px solid var(--c);overflow:hidden;
    background:linear-gradient(#fff,#f4ead6);color:#3b2a1a;display:flex;flex-direction:column;transition:filter .6s,opacity .6s}
  .card.r-legendary{background:linear-gradient(#fff7dc,#f3e2a8)} .card.r-rare{background:linear-gradient(#f4f8ff,#d9e8ff)}
  .card{box-shadow:0 0 0 2px var(--rc,transparent) inset}
  .card .rar{position:absolute;top:0;right:0;font-size:9px;font-weight:800;color:#fff;background:var(--rc);padding:1px 7px 2px;border-radius:0 0 0 8px;z-index:2}
  .card .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #0003)}
  .card .stats{display:flex;justify-content:center;gap:8px;font-size:9px;font-weight:700;opacity:.75;margin-top:1px}
  .card .art{flex:1;margin:6px 6px 0;border-radius:8px;display:grid;place-items:center;font-size:30px;opacity:.9;
    background:repeating-linear-gradient(45deg,#00000008 0 8px,#00000000 8px 16px),linear-gradient(135deg,#ffffff,#e9dcc4);
    color:#0003;font-size:11px;font-weight:700;letter-spacing:.1em}
  .card .art{background:radial-gradient(circle at 50% 70%,#fff,#efe3cc);overflow:hidden}
  .card .nm{font-size:11px;font-weight:800;text-align:center;margin-top:4px}
  .card .el{z-index:2;position:absolute;top:0;left:0;font-size:9px;font-weight:800;color:#fff;background:var(--c);padding:1px 8px 2px;border-radius:0 0 8px 0}
  .card .bars{padding:3px 8px 7px}
  .bar{height:6px;border-radius:3px;background:#0001;overflow:hidden;margin-top:3px}
  .bar i{display:block;height:100%}
  .hp i{width:100%;background:linear-gradient(90deg,#3ecf6a,#9be564);transition:width .35s}
  .atb i{width:0;background:linear-gradient(90deg,#ffb020,#ffe066)}
  .atb.full i{background:#fff;box-shadow:0 0 8px #ffd23f}
  .hptxt{font-size:9px;opacity:.6;text-align:center}
  .unit.ko .card{filter:grayscale(1) brightness(.7)}
  .unit.hidden{visibility:hidden}

  /* 효과 */
  .fx{position:absolute;pointer-events:none;z-index:20;font-size:34px;line-height:1;will-change:transform,opacity}
  .dmg{position:absolute;pointer-events:none;z-index:30;font-weight:900;font-size:30px;color:#fff;
    -webkit-text-stroke:2px #c0262b;paint-order:stroke fill;text-shadow:0 3px 0 #7a1216}
  .ring{position:absolute;pointer-events:none;z-index:19;border-radius:50%;border:4px solid #fff}
  .flycard{position:absolute;z-index:25;pointer-events:none;border-radius:10px;border:2px solid #fff8;
    background:repeating-linear-gradient(45deg,#6a4a9a 0 6px,#7a5aaa 6px 12px)}

  /* ───────── 하단 덱 트레이 ───────── */
    .tray{height:176px;border-radius:16px;padding:0 12px;display:flex;align-items:center;gap:10px;position:relative;z-index:2;
    background:linear-gradient(#ffffff14,#ffffff06);border:1px solid #ffffff22;margin-top:6px}
  .ad{flex:none;width:150px;height:150px;border-radius:12px;border:2px dashed #ffffff44;background:#ffffff0d;color:#fff9;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;text-align:center}
  .ad b{font-size:13px;color:#ffd23f} .ad small{opacity:.6;font-size:10px}
  .hand{flex:1;min-width:0;height:100%;display:flex;justify-content:center;align-items:flex-end;padding-bottom:14px;position:relative}
  .hcard{width:62px;height:88px;margin:0 -5px;border-radius:9px;border:2px solid #fff8;position:relative;flex:none;cursor:default;
    background:repeating-linear-gradient(45deg,#6a4a9a 0 6px,#7a5aaa 6px 12px);display:grid;place-items:center;font-size:20px;
    box-shadow:0 4px 10px #0006;transform-origin:50% 140%;transition:transform .25s,filter .3s,opacity .3s}
  .hcard.ready{animation:idle 1.8s ease-in-out infinite alternate}
  @keyframes idle{to{box-shadow:0 4px 16px #b48aff99}}
  .hcard.out{opacity:.25;filter:grayscale(.7)}
  .hcard .rc{position:absolute;inset:0;display:none;place-items:center;font-size:14px;font-weight:900;text-shadow:0 2px 4px #000}
  .hcard.out .rc{display:grid}
  .hcard .no{position:absolute;top:2px;left:4px;font-size:9px;opacity:.7}
  .next{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:10px;opacity:.75}
.trayLbl{position:absolute;top:-9px;left:16px;font-size:10px;background:#2a2145;padding:0 8px;border-radius:8px;border:1px solid #ffffff22;opacity:.85}

  #banner{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:44px;font-weight:900;
    background:#000a;z-index:50;text-shadow:0 4px 0 #0008}

  /* 스킬 덱 + 스킬 카드 */
  .pile.skilldeck .back{background:repeating-linear-gradient(45deg,#1f8a6a 0 6px,#2aa07e 6px 12px)}
  .pile.cool .back{filter:grayscale(.8) brightness(.7)}
  .xx{position:absolute;inset:0;display:none;place-items:center;font-weight:900;font-size:18px;z-index:4;text-shadow:0 2px 4px #000}
  .pile.cool .cd{display:grid}
  .skill{position:absolute;z-index:40;width:92px;height:128px;border-radius:14px;cursor:pointer;padding:5px;
    background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#ffffff33 0);box-shadow:0 0 20px #ffd23f88;will-change:transform,opacity}
  .skill.go{cursor:default;box-shadow:none}
  .skill .in{width:100%;height:100%;border-radius:10px;background:linear-gradient(#fff,#e5f6ee);color:#16463a;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
  .skill .ic{font-size:36px;line-height:1}
  .skill b{font-size:12px} .skill small{font-size:9px;opacity:.7;padding:0 4px}
  .skill .tip{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:#fffc;white-space:nowrap}
  .buffed .card{box-shadow:0 0 0 3px #ff9a3a,0 0 18px #ff7a1a}
  #skillMsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:35;font-size:20px;font-weight:900;pointer-events:none;
    text-shadow:0 3px 0 #0008;opacity:0;white-space:nowrap}
  .ally-field.smoky::after{content:"";position:absolute;inset:-6px;border-radius:20px;pointer-events:none;z-index:6;
    background:radial-gradient(ellipse at 30% 40%,#ddd9 0,transparent 55%),radial-gradient(ellipse at 70% 60%,#ccce 0,transparent 55%),#9994;
    backdrop-filter:blur(2px);animation:smk 2.4s ease-in-out infinite alternate}
  @keyframes smk{to{transform:translateX(10px) scale(1.02);opacity:.8}}
  .boosted .card{box-shadow:0 0 0 3px #6ad0ff,0 0 18px #3aa0ff}

  /* ── 경기장 바닥 그림 (Codex 생성 assets/arena.png): 슬롯 6칸 위치에 필드를 맞춘다 ── */
  .arena{position:relative;flex:none;width:100%;aspect-ratio:1/1;border-radius:18px;margin:4px 0;z-index:1;
    background:url(assets/arena.png) center/100% 100% no-repeat;box-shadow:0 6px 22px #0006}
  .arena .field{position:absolute;left:19.6%;width:60.8%;height:20.6%;margin:0;gap:0;justify-content:space-between;border-radius:0}
  .arena .field::before{display:none}
  .arena .enemy-field{top:19%} .arena .ally-field{top:58.6%}
  .arena .slot{width:26.3%;height:100%;aspect-ratio:auto;border:none;background:none}
  .arena .slot::before{display:none}
  .arena .lane{position:absolute;left:0;right:0;top:44%;height:12%;z-index:3}
  .arena .lane::before,.arena .lane::after{display:none}
  .arena .vs{margin:0 auto;width:40px;height:40px;font-size:14px}
  .ally-field.smoky::after{inset:-30px -20px}

  /* ── 나무 바닥 경기장 + 펠트 덱 트레이 (Codex 생성: assets/arena.png · assets/felt.png) ── */
  #stage{background:radial-gradient(ellipse at 50% 0%,#5a3d2a55,transparent 60%),linear-gradient(#251b14,#2f2218 50%,#251b14)}
  .arena{background:url(assets/arena.png) center/cover no-repeat;box-shadow:0 6px 22px #0007,inset 0 0 0 3px #5a381c}
  .arena .slot{border-radius:14px;background:rgba(40,22,8,.14);box-shadow:inset 0 2px 8px #3a1f0a55;border:2px solid rgba(70,40,15,.45)}
  .arena .enemy-field .slot{border-color:rgba(190,70,50,.75)}
  .arena .ally-field .slot{border-color:rgba(60,120,200,.75)}
  .arena .slot.dead{background:none;box-shadow:none;border-color:rgba(70,40,15,.25)}
  .arena .vs{background:radial-gradient(circle at 35% 30%,#fff7e6,#e8d3a6);color:#4a3320;box-shadow:0 2px 8px #0005;border:2px solid #8a6238}
  .arena .lane::before,.arena .lane::after{display:block;height:2px;background:#6a4524aa;opacity:.8}
  .tray{background:url(assets/felt.png) center/100% 100% no-repeat;border:none;box-shadow:0 4px 16px #0006}
  .trayLbl{background:#e9dcc0;color:#4a3320;border-color:#8a6238;opacity:1;font-weight:700}
  .ad{border-color:#f4efe288;background:#ffffff1a}

  :root{--paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='40%25' cy='30%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23ffe3ef'/%3E%3Cstop offset='.55' stop-color='%23ff9fc6'/%3E%3Cstop offset='1' stop-color='%23ec6aa0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23b8487c' stroke-width='1.8'%3E%3Cpath d='M50 46C67 46 81 62 81 75C81 88 66 90 50 84C34 90 19 88 19 75C19 62 33 46 50 46Z'/%3E%3Cellipse cx='21' cy='43' rx='9' ry='12' transform='rotate(-22 21 43)'/%3E%3Cellipse cx='39' cy='27' rx='9.5' ry='13'/%3E%3Cellipse cx='61' cy='27' rx='9.5' ry='13'/%3E%3Cellipse cx='79' cy='43' rx='9' ry='12' transform='rotate(22 79 43)'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.65'%3E%3Cellipse cx='40' cy='60' rx='7' ry='3.5' transform='rotate(-25 40 60)'/%3E%3Cellipse cx='35' cy='22' rx='3' ry='4.5'/%3E%3Cellipse cx='57' cy='22' rx='3' ry='4.5'/%3E%3Cellipse cx='17' cy='37' rx='2.8' ry='4' transform='rotate(-22 17 37)'/%3E%3Cellipse cx='75' cy='37' rx='2.8' ry='4' transform='rotate(22 75 37)'/%3E%3C/g%3E%3C/svg%3E")}
  .hcard,.flycard,.pile .back:nth-child(3){background-image:var(--paw),repeating-linear-gradient(45deg,#6a4a9a 0 6px,#7a5aaa 6px 12px)!important;background-size:62% auto,auto;background-position:center,0 0;background-repeat:no-repeat,repeat;font-size:0}
  .pile .back:nth-child(3){font-size:0}
  /* ── 우리 카드(앞면 그림) ── */
  .arena .slot{aspect-ratio:4/5;height:auto;width:29.5%}
  .card{background:none!important;border:none!important;box-shadow:none!important;overflow:visible;border-radius:7%/5.6%}
  .card .face{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 6px #0006)}
  .card .bars{position:absolute;left:4%;right:4%;top:calc(100% + 3px);padding:3px 5px 4px;background:#2a1a0eaa;border-radius:7px}
  .card .hptxt{color:#fff;opacity:.85;line-height:1.1}
  .buffed .card{box-shadow:0 0 0 3px #ff9a3a,0 0 18px #ff7a1a!important}
  .boosted .card{box-shadow:0 0 0 3px #6ad0ff,0 0 18px #3aa0ff!important}

  /* ── 크림 종이 질감 (Codex 생성: assets/paper.png) — 무대 바탕 + 덱 트레이 ── */
  #stage{color:#4a3320;background:url(assets/paper.png) center/cover no-repeat;box-shadow:0 10px 30px #5a381c33}
  #stage::after{box-shadow:inset 0 0 60px #8a623833}
  .who small{opacity:.65}
  .team-hp{background:#7a6a5a66;border:1px solid #8a6a4a55}
  .team-hp span{color:#fff;text-shadow:0 1px 2px #0008}
  .pile .lbl,.pile .cnt{color:#4a3320}
  .pile .lbl{opacity:.8}
  .pile .cnt{color:#3b2a1a}
  .tray{background:#00000008;border:2px solid #c9b48f;box-shadow:inset 0 2px 10px #8a62381f,0 2px 0 #fff8}
  .trayLbl{background:#e9dcc0;color:#4a3320;border:1.5px solid #a98b5c}
  .next{color:#4a3320;opacity:.85;font-weight:600}
  .ad{border:2px dashed #b9a380;background:#ffffff40;color:#6a5238}
  .ad b{color:#4a3320} .ad small{opacity:.55}
  .hcard{border-color:#fff9;box-shadow:0 4px 10px #5a381c55}
  .hcard.out{opacity:.35}
  .hcard .no{color:#fff}