:root{
      --bg: #0b0f17;
      --panel: rgba(255,255,255,0.06);
      --panel2: rgba(255,255,255,0.10);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.65);
      --line: rgba(255,255,255,0.14);
      --shadow: 0 18px 60px rgba(0,0,0,0.55);
      --radius: 18px;
      --radius2: 14px;

      --slot: rgba(0,0,0,0.18);
      --slotHover: rgba(0,0,0,0.26);
      --accent: rgba(140,210,255,0.75);
      --accentBg: rgba(70,160,255,0.18);
      --page-background:
        radial-gradient(1000px 600px at 10% 10%, rgba(125, 83, 255, 0.16), transparent 60%),
        radial-gradient(900px 600px at 90% 30%, rgba(0, 208, 255, 0.14), transparent 55%),
        radial-gradient(900px 600px at 40% 90%, rgba(255, 80, 160, 0.12), transparent 60%),
        var(--bg);
      --location-texture: none;
      --location-texture-opacity: 0;
    }

    .combatPanel{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border-radius: var(--radius);
      padding:18px;
      box-shadow: var(--shadow);
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-bottom:0;
    }
    .combatPanelHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }
    .combatPanelHeader h2{
      margin:0;
      font-size:14px;
      letter-spacing:0.6px;
      text-transform:uppercase;
      color:var(--muted);
    }
    .combatStatus{
      font-size:12px;
      color:var(--muted);
      padding:6px 10px;
      border:1px solid rgba(255,255,255,0.12);
      border-radius:999px;
      background:rgba(0,0,0,0.2);
    }
    .combatLog{
      max-height:240px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:8px;
      padding-right:4px;
    }
    .logEntry{
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.22);
      border-radius: var(--radius2);
      padding:10px 12px;
      font-size:13px;
      line-height:1.35;
      color:var(--text);
    }
    .logEntry.player{ border-color: rgba(140,210,255,0.45); }
    .logEntry.opponent{ border-color: rgba(255,120,200,0.45); }
    .logEntry.direct{ border-color: rgba(255,200,140,0.45); }
    .logEntry.empty{
      text-align:center;
      color:var(--muted);
      background: rgba(0,0,0,0.16);
    }

    .slot.attackerOption{
      border-color: rgba(140,210,255,0.6);
      box-shadow: 0 0 0 2px rgba(140,210,255,0.25);
      cursor:pointer;
    }
    .slot.attackerSelected{
      border-color: rgba(140,210,255,0.9);
      box-shadow: 0 0 0 2px rgba(140,210,255,0.45), 0 14px 32px rgba(0,0,0,0.4);
      cursor:pointer;
    }
    .slot.targetOption{
      border-color: rgba(255,200,140,0.8);
      box-shadow: 0 0 0 2px rgba(255,200,140,0.35);
      cursor:pointer;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      min-height:100vh;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text);
      position:relative;
      background: var(--page-background);
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      background-image: var(--location-texture);
      background-repeat: repeat;
      background-size: auto;
      background-position: 0 0;
      opacity: var(--location-texture-opacity);
      transition: opacity 360ms ease;
      pointer-events:none;
      z-index:0;
    }

    body > *{
      position:relative;
      z-index:1;
    }

    body.location-bg-generic{
      --page-background:
        linear-gradient(180deg, rgba(10,13,20,0.62), rgba(5,7,12,0.78)),
        linear-gradient(120deg, rgba(140,210,255,0.18), transparent 62%),
        radial-gradient(860px 540px at 68% 84%, rgba(90,140,255,0.24), transparent 70%),
        var(--bg);
    }

    body.location-bg-city{
      --page-background:
        linear-gradient(180deg, rgba(12,15,24,0.58), rgba(8,10,18,0.76)),
        linear-gradient(115deg, rgba(255,180,90,0.24), transparent 58%),
        radial-gradient(960px 520px at 58% 88%, rgba(255,130,80,0.28), transparent 68%),
        var(--bg);
    }

    body.location-bg-darkcity{
      --page-background:
        linear-gradient(180deg, rgba(6,6,12,0.58), rgba(2,4,8,0.78)),
        linear-gradient(120deg, rgba(180,45,130,0.26), transparent 60%),
        radial-gradient(820px 520px at 45% 90%, rgba(90,0,140,0.32), transparent 70%),
        var(--bg);
    }

    body.location-bg-icetown{
      --page-background:
        linear-gradient(180deg, rgba(10,26,42,0.56), rgba(4,12,24,0.74)),
        linear-gradient(130deg, rgba(140,210,255,0.32), transparent 60%),
        radial-gradient(860px 520px at 50% 88%, rgba(180,240,255,0.36), transparent 68%),
        var(--bg);
    }

    body.location-bg-farm{
      --page-background:
        linear-gradient(180deg, rgba(14,26,18,0.58), rgba(6,14,10,0.76)),
        linear-gradient(135deg, rgba(120,200,90,0.32), transparent 58%),
        radial-gradient(880px 540px at 52% 86%, rgba(200,140,70,0.34), transparent 72%),
        var(--bg);
    }

    body.location-bg-stormcity{
      --page-background:
        linear-gradient(200deg, rgba(12,16,26,0.6), rgba(4,8,16,0.78)),
        linear-gradient(130deg, rgba(90,120,255,0.3), transparent 60%),
        radial-gradient(780px 520px at 58% 84%, rgba(180,200,255,0.28), transparent 68%),
        var(--bg);
    }

    body.location-bg-steampunkcity{
      --page-background:
        linear-gradient(180deg, rgba(24,16,8,0.6), rgba(10,6,4,0.8)),
        linear-gradient(120deg, rgba(255,170,70,0.3), transparent 62%),
        radial-gradient(880px 520px at 60% 86%, rgba(180,110,60,0.34), transparent 70%),
        var(--bg);
    }

    body.location-bg-darkfallback{
      --page-background:
        linear-gradient(200deg, rgba(6,8,12,0.6), rgba(2,2,6,0.82)),
        radial-gradient(840px 520px at 70% 92%, rgba(40,60,110,0.32), transparent 70%),
        radial-gradient(900px 520px at 30% 20%, rgba(20,30,60,0.26), transparent 65%),
        var(--bg);
    }

    body.has-location-texture{
      --location-texture-opacity: 1;
    }

    header{
      padding:22px 18px 10px;
      max-width:1200px;
      margin:0 auto;
      display:flex;
      gap:14px;
      align-items:flex-end;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    h1{
      margin:0;
      font-size:20px;
      letter-spacing:0.2px;
    }
    .subtitle{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
      max-width:720px;
    }

    .controls{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .btnCheat{
      border-color: rgba(255,200,140,0.45);
      background: linear-gradient(180deg, rgba(255,200,140,0.26), rgba(255,140,100,0.22));
      box-shadow: 0 10px 30px rgba(255,160,100,0.25);
    }
    .btnCheat:hover{
      border-color: rgba(255,200,140,0.7);
      background: linear-gradient(180deg, rgba(255,210,160,0.32), rgba(255,150,110,0.26));
    }
    .btnCheat.active{
      border-color: rgba(255,210,150,0.9);
      background: linear-gradient(180deg, rgba(255,210,150,0.42), rgba(255,160,110,0.36));
      box-shadow: 0 12px 32px rgba(255,160,110,0.32);
    }
    .cheatMenuPanel{
      display:none;
      width:100%;
      margin-top:16px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.32));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding:18px 20px;
      gap:14px;
      flex-direction:column;
      backdrop-filter: blur(10px);
      animation: cheatSlide 160ms ease;
    }
    .cheatMenuPanel.open{
      display:flex;
    }
    @keyframes cheatSlide{
      from{ opacity:0; transform: translateY(-6px); }
      to{ opacity:1; transform: translateY(0); }
    }
    .cheatMenuHeader{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .cheatMenuTitle{
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:0.6px;
      color:rgba(255,210,160,0.9);
      font-weight:750;
    }
    .cheatMenuHint{
      font-size:12px;
      color:var(--muted);
      max-width:520px;
      line-height:1.4;
    }
    .cheatSearchRow{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:flex-end;
    }
    .cheatInputWrap{
      flex:1 1 260px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .cheatLabel{
      font-size:11px;
      letter-spacing:0.4px;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:650;
    }
    .cheatInput{
      border:1px solid rgba(255,255,255,0.16);
      background: rgba(0,0,0,0.32);
      border-radius:999px;
      padding:10px 14px;
      font-size:13px;
      color:var(--text);
      outline:none;
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    .cheatInput:focus{
      border-color: rgba(255,200,140,0.65);
      box-shadow: 0 0 0 2px rgba(255,200,140,0.22);
    }
    .cheatAddBtn{
      flex:0 0 auto;
      padding:10px 16px;
    }
    .cheatQuickActions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .cheatQuickActions .tinyBtn{
      background: rgba(255,200,140,0.14);
      border-color: rgba(255,200,140,0.34);
      color: rgba(255,220,200,0.92);
    }
    .cheatQuickActions .tinyBtn:hover{
      border-color: rgba(255,200,140,0.48);
      background: rgba(255,200,140,0.22);
    }
    .cheatFeedback{
      min-height:18px;
      font-size:12px;
      color:var(--muted);
      transition: color 160ms ease;
    }
    .cheatFeedback[data-variant="success"]{
      color: rgba(140,210,255,0.92);
    }
    .cheatFeedback[data-variant="error"]{
      color: rgba(255,140,160,0.9);
    }
    .cheatResults{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
      gap:10px;
    }
    .cheatResultOption{
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.16);
      background: rgba(0,0,0,0.28);
      border-radius: var(--radius2);
      padding:12px 14px;
      font-size:12px;
      color:var(--text);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
    }
    .cheatResultOption:hover{
      border-color: rgba(255,200,140,0.45);
      background: rgba(255,200,140,0.18);
      transform: translateY(-1px);
    }
    .cheatResultName{
      font-weight:650;
      letter-spacing:0.2px;
    }
    .cheatResultMeta{
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:0.5px;
    }
    .cheatResultEmpty{
      border:1px dashed rgba(255,255,255,0.2);
      border-radius: var(--radius2);
      padding:14px;
      font-size:12px;
      color:var(--muted);
      text-align:center;
    }
    .btn{
      cursor:pointer;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
      color:var(--text);
      border-radius:999px;
      padding:10px 12px;
      font-size:13px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
      user-select:none;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.22);
      background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
    }
    .btn:active{ transform: translateY(0px); }

    .chip{
      padding:9px 10px;
      border:1px solid var(--line);
      background:var(--panel);
      border-radius:999px;
      font-size:12px;
      color:var(--muted);
      display:flex;
      align-items:center;
      gap:8px;
      user-select:none;
    }
    .chip strong{ color:var(--text); font-weight:650; }

    main{
      max-width:1200px;
      margin:0 auto;
      padding:12px 18px 260px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    /* Board */
    .board{
      position:relative;
      border:1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(200,255,255,0.03), transparent 40%),
        linear-gradient(25deg, rgba(255,180,255,0.05), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border-radius: var(--radius);
      padding:22px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .board::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0, transparent 10%, transparent 90%, rgba(0,0,0,0.25) 100%);
      opacity:0.28;
      pointer-events:none;
    }
    .boardInner{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:26px;
    }

    .boardHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .lifePanel{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .lifeRow{
      display:flex;
      align-items:baseline;
      gap:10px;
    }
    .lifeLabel{
      font-size:12px;
      letter-spacing:0.6px;
      color:var(--muted);
      text-transform:uppercase;
      font-weight:750;
    }
    .lifeValue{
      font-size:22px;
      font-weight:850;
      letter-spacing:0.4px;
    }
    .lifeValue.damageFlashOpp{
      animation: lifeDamageOpp 560ms ease-out;
    }
    .lifeValue.damageFlashPly{
      animation: lifeDamagePly 560ms ease-out;
    }
    @keyframes lifeDamageOpp{
      0%{
        color:var(--text);
        text-shadow:none;
        transform:scale(1);
      }
      32%{
        color:rgba(255,140,200,0.95);
        text-shadow:0 0 18px rgba(255,140,200,0.55);
        transform:scale(1.06);
      }
      100%{
        color:var(--text);
        text-shadow:none;
        transform:scale(1);
      }
    }
    @keyframes lifeDamagePly{
      0%{
        color:var(--text);
        text-shadow:none;
        transform:scale(1);
      }
      32%{
        color:rgba(140,210,255,0.95);
        text-shadow:0 0 18px rgba(140,210,255,0.45);
        transform:scale(1.05);
      }
      100%{
        color:var(--text);
        text-shadow:none;
        transform:scale(1);
      }
    }
    .hint{
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .sideLabel{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      margin:10px 2px 8px;
    }
    .sideLabel .name{
      font-weight:800;
      letter-spacing:0.2px;
      font-size:14px;
    }
    .sideLabel .meta{
      color:var(--muted);
      font-size:12px;
    }

    .boardArena{
      position:relative;
      border:1px solid rgba(255,255,255,0.18);
      background:
        radial-gradient(380px 220px at 50% 0%, rgba(140,210,255,0.12), transparent 70%),
        radial-gradient(420px 260px at 50% 100%, rgba(255,120,200,0.10), transparent 70%),
        rgba(0,0,0,0.25);
      border-radius:24px;
      padding:28px 22px 34px;
      display:flex;
      flex-direction:column;
      gap:26px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .boardArena::before{
      content:"";
      position:absolute;
      left:22px;
      right:22px;
      top:50%;
      height:1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.45) 55%, transparent 100%);
      opacity:0.5;
      pointer-events:none;
    }
    .boardArena::after{
      content:"";
      position:absolute;
      top:22px;
      bottom:22px;
      left:50%;
      width:1px;
      background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.22) 70%, transparent 100%);
      opacity:0.35;
      pointer-events:none;
    }
    .grid{
      display:grid;
      gap:10px;
    }
    .row{
      display:grid;
      grid-template-columns: repeat(5, 1fr);
      gap:10px;
    }
    @media (max-width: 700px){
      .row{ grid-template-columns: repeat(3, 1fr); }
    }

    .sideWrap{
      position:relative;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .slot{
      border:1px solid rgba(255,255,255,0.12);
      background: var(--slot);
      border-radius: 16px;
      min-height:132px;
      padding:10px;
      position:relative;
      cursor:pointer;
      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }
    .slot:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,0.22);
      background: var(--slotHover);
    }
    .slot.occupied{
      background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.16));
    }

    .slotEmpty{
      color: rgba(255,255,255,0.55);
      font-size:12px;
      line-height:1.2;
      text-align:center;
    }
    .slotPos{
      position:absolute;
      top:8px;
      right:10px;
      font-size:11px;
      color: rgba(255,255,255,0.55);
      background: rgba(0,0,0,0.20);
      border:1px solid rgba(255,255,255,0.10);
      padding:4px 7px;
      border-radius:999px;
      user-select:none;
    }

    /* Mini card */
    .miniTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .miniName{
      font-weight:850;
      font-size:12px;
      line-height:1.1;
      letter-spacing:0.2px;
    }
    .miniType{
      font-size:11px;
      color: rgba(255,255,255,0.72);
      white-space:nowrap;
      border:1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.18);
      padding:4px 7px;
      border-radius:999px;
    }

    .miniArt{
      width:100%;
      height:66px;
      border-radius:12px;
      background: rgba(0,0,0,0.20);
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.10);
    }
    .miniArt img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .miniStats{
      display:flex;
      gap:8px;
      margin-top:8px;
    }
    .miniStat{
      flex:1;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.18);
      border-radius: 12px;
      padding:6px 8px;
      text-align:center;
    }
    .miniStat .l{
      font-size:10px;
      letter-spacing:0.6px;
      color: rgba(255,255,255,0.62);
      text-transform:uppercase;
      margin-bottom:2px;
    }
    .miniStat .v{
      font-size:14px;
      font-weight:900;
      letter-spacing:0.2px;
    }

    .miniCard.supportCard{
      gap:8px;
    }
    .slotCard.supportCard{
      gap:8px;
    }

    .miniEffect{
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.18);
      border-radius: 12px;
      padding:6px 8px;
      font-size:11px;
      display:flex;
      flex-direction:column;
      gap:4px;
      line-height:1.35;
    }
    .miniEffect .label{
      text-transform:uppercase;
      letter-spacing:0.6px;
      color: rgba(255,255,255,0.62);
      font-weight:650;
    }
    .miniEffect .text{
      color: rgba(255,255,255,0.85);
    }
    .miniEffect.used{
      opacity:0.6;
    }

    .slotCardFrame{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .slotCard{
      width:100%;
      aspect-ratio: 63 / 88;
      border:1px solid rgba(255,255,255,0.16);
      border-radius:16px;
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      background: linear-gradient(160deg, rgba(0,0,0,0.45), rgba(0,0,0,0.22));
      box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    }
    .slotCard .miniTop{ margin-bottom:4px; }
    .slotCard .miniArt{
      flex:1;
      height:auto;
      min-height:0;
    }
    .slotCard .miniStats{
      margin-top:6px;
    }

    .slotActions{
      position:absolute;
      left:10px;
      bottom:10px;
      display:flex;
      gap:8px;
      opacity:0;
      transform: translateY(4px);
      transition: opacity 120ms ease, transform 120ms ease;
      pointer-events:none;
    }
    .slot:hover .slotActions,
    .slot.active .slotActions{
      opacity:1;
      transform: translateY(0);
      pointer-events:auto;
    }
    .tinyBtn{
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.22);
      color: rgba(255,255,255,0.85);
      border-radius:999px;
      padding:6px 9px;
      font-size:11px;
    }
    .tinyBtn:hover{
      border-color: rgba(255,255,255,0.22);
      background: rgba(0,0,0,0.28);
    }
    .tinyBtn:disabled{
      opacity:0.55;
      cursor:default;
    }

    .handDock{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      padding:24px 24px 32px;
      display:flex;
      justify-content:center;
      align-items:flex-end;
      flex-wrap:wrap;
      gap:18px;
      pointer-events:none;
      z-index:30;
      background: linear-gradient(180deg, transparent, rgba(11,15,23,0.75));
    }
    .handRail{
      width:min(960px, 90vw);
      border:1px solid rgba(255,255,255,0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.34));
      border-radius: 28px 28px 18px 18px;
      padding:18px 26px 28px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(255,255,255,0.06);
      backdrop-filter: blur(10px);
      pointer-events:auto;
      display:flex;
      flex-direction:column;
      gap:12px;
      position:relative;
    }
    .handLogModal{
      pointer-events:auto;
      z-index:32;
      display:flex;
    }
    .handLogModalInner{
      width:min(340px, 92vw);
      border-radius:22px;
      padding:20px 22px 22px;
      gap:14px;
    }
    .handLogModalInner .combatLog{
      max-height:260px;
    }
    .handLogMeta{
      font-size:11px;
      color:var(--muted);
      line-height:1.4;
    }
    .handActionsModal{
      pointer-events:auto;
      z-index:32;
      display:flex;
    }
    .handActionsModalInner{
      border:1px solid rgba(255,255,255,0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.38));
      border-radius:22px;
      padding:18px 20px 20px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      display:flex;
      flex-direction:column;
      gap:12px;
      min-width:210px;
    }
    .handActionsTitle{
      font-size:12px;
      letter-spacing:0.6px;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:750;
    }
    .handActionsModal .btn{
      width:100%;
      justify-content:center;
    }
    .handActionsModal .btnAccent{
      border-color: rgba(140,210,255,0.65);
      background: linear-gradient(180deg, rgba(140,210,255,0.28), rgba(70,160,255,0.22));
      box-shadow: 0 12px 32px rgba(64,160,255,0.32);
    }
    .handActionsModal .btnAccent:hover{
      border-color: rgba(140,210,255,0.85);
      background: linear-gradient(180deg, rgba(140,210,255,0.36), rgba(70,160,255,0.26));
    }
    .handActionsHint{
      font-size:11px;
      color:var(--muted);
      line-height:1.4;
    }
    @media (max-width: 720px){
      .handLogModal{
        width:100%;
        justify-content:center;
      }
      .handActionsModal{
        width:100%;
        justify-content:center;
      }
      .handActionsModalInner{
        width:min(420px, 100%);
      }
    }
    .handLabel{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }
    .handLabel .name{
      font-weight:800;
      font-size:16px;
      letter-spacing:0.4px;
    }
    .handLabel .meta{
      color:var(--muted);
      font-size:12px;
    }
    .hand{
      position:relative;
      height:220px;
    }
    .handEmpty{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%, -50%);
      border:1px dashed rgba(255,255,255,0.24);
      border-radius:18px;
      padding:26px 30px;
      text-align:center;
      color:var(--muted);
      font-size:13px;
      background: rgba(0,0,0,0.22);
      max-width:280px;
    }
    .miniCard{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .handCard{
      cursor:pointer;
      position:absolute;
      left:50%;
      bottom:0;
      border:1px solid rgba(255,255,255,0.16);
      background: linear-gradient(160deg, rgba(0,0,0,0.35), rgba(0,0,0,0.18));
      border-radius:18px;
      padding:12px;
      width:176px;
      min-height:228px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow: 0 12px 34px rgba(0,0,0,0.4);
      transform-origin: bottom center;
      transition: transform 180ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
      color:inherit;
      z-index:100;
      touch-action:none;
    }

    .handCard:hover,
    .handCard:focus-visible,
    .handCard.active{
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(140,210,255,0.2), 0 24px 48px rgba(0,0,0,0.55);
      transform: rotate(var(--fan-rotate, 0deg)) translateX(var(--fan-x, 0px)) translateY(calc(var(--fan-y, 0px) - 32px));
    }
    .handCard{
      transform: rotate(var(--fan-rotate, 0deg)) translateX(var(--fan-x, 0px)) translateY(var(--fan-y, 0px));
    }
    .handCard.dragging{
      opacity:0.5;
      box-shadow: 0 18px 60px rgba(0,0,0,0.6);
    }
    .handCard.entering{
      animation: handEnter 360ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    }
    .handCard .miniTop{ margin-bottom:10px; }
    .handCard .miniArt{ height:96px; }
    .handCard .miniStat .v{ font-size:16px; }
    .handCard .miniStat .l{ letter-spacing:0.8px; }

    @keyframes handEnter{
      0%{
        opacity:0;
        transform: rotate(var(--fan-rotate, 0deg)) translateX(var(--fan-x, 0px)) translateY(calc(var(--fan-y, 0px) + 140px)) scale(0.85);
      }
      100%{
        opacity:1;
        transform: rotate(var(--fan-rotate, 0deg)) translateX(var(--fan-x, 0px)) translateY(var(--fan-y, 0px));
      }
    }

    .slotCard.supportLinkFaded,
    .miniCard.supportLinkFaded{
      opacity:0.6;
      filter:saturate(0.4);
    }

    .slot.dropTarget{
      border-color: var(--accent);
      background: var(--accentBg);
      box-shadow: 0 0 0 2px rgba(140,210,255,0.22), 0 16px 46px rgba(0,0,0,0.4);
    }
    .slot.attackSlash::after{
      content:"";
      position:absolute;
      inset:-24%;
      border-radius:32px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 36%, var(--slash-color, rgba(255,255,255,0.85)) 50%, rgba(255,255,255,0) 64%, transparent 100%);
      mix-blend-mode:screen;
      opacity:0;
      pointer-events:none;
      animation: slotSlash var(--slash-duration, 560ms) cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
    }
    .slot.attackImpact::before{
      content:"";
      position:absolute;
      inset:-12%;
      border-radius:28px;
      background: radial-gradient(circle at center, var(--impact-color, rgba(255,255,255,0.85)) 0%, rgba(255,255,255,0) 70%);
      opacity:0;
      pointer-events:none;
      animation: slotImpact var(--impact-duration, 520ms) cubic-bezier(0.32, 0.74, 0.18, 1) forwards;
    }
    @keyframes slotSlash{
      0%{
        opacity:0;
        transform: rotate(var(--slash-angle, 0deg)) scaleX(0.25) scaleY(0.35);
        filter: blur(18px);
      }
      34%{
        opacity:0.95;
        filter: blur(6px);
      }
      100%{
        opacity:0;
        transform: rotate(var(--slash-angle, 0deg)) scaleX(1.35) scaleY(1.1);
        filter: blur(20px);
      }
    }
    @keyframes slotImpact{
      0%{
        opacity:0;
        transform: scale(0.45);
        filter: blur(12px);
      }
      40%{
        opacity:0.9;
        filter: blur(4px);
      }
      100%{
        opacity:0;
        transform: scale(1.15);
        filter: blur(16px);
      }
    }

    .dragPreview{
      position:fixed;
      pointer-events:none;
      width:176px;
      min-height:228px;
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,0.28);
      background: linear-gradient(160deg, rgba(0,0,0,0.45), rgba(0,0,0,0.26));
      box-shadow: 0 24px 60px rgba(0,0,0,0.55);
      transform: translate(-50%, -50%);
      z-index:90;
    }