/* SHARDWAKE ALPHA 07 — premium battle surface + card hierarchy */
:root{
  --sw-gold-2:#f2d69a;
  --sw-gold-3:#a87a42;
  --sw-ink:#07101a;
  --sw-panel:#101d2c;
  --sw-line:#d6b6795e;
}

/* Global polish */
.panel,.hero,.chapter-card,.pack-stage,.modal,.collection-tools{border-color:#b99a6852}
.btn{border-radius:8px}
.btn-primary{background:linear-gradient(135deg,#f6dfa8 0%,#c59658 58%,#9b6b37 100%);box-shadow:0 7px 22px #9f6d2f3f,inset 0 1px #fff7;}
.btn-secondary{background:linear-gradient(135deg,#20364b,#112131);border-color:#7a91a26b}
.btn-ghost{background:#0d1825cc}

/* Cards — stronger identity at small sizes */
.tcg-card{background:#0d1722;border-color:color-mix(in srgb,var(--accent) 82%,#fff 18%);box-shadow:0 10px 26px #000c,inset 0 0 0 2px #101d2b;transform-origin:center bottom}
.tcg-card:before{border-color:#f4e3bf47;box-shadow:inset 0 0 15px #0009}
.tcg-card .tcg-art{filter:saturate(1.14) contrast(1.06);transform:scale(1.01)}
.tcg-card .tcg-art-shade{background:linear-gradient(0deg,#08111bf5 8%,#08111bd2 36%,#08111b2b 72%,transparent 100%)}
.tcg-card .card-top{z-index:4}
.tcg-card .card-bottom{z-index:3}
.tcg-card .card-cost{border:1px solid #ffe2aa9c}
.tcg-card .faction-token{backdrop-filter:blur(8px);box-shadow:0 2px 10px #0006}
.tcg-card .card-rule{color:#c9d5dc}
.tcg-card .rarity-glyph{color:var(--accent);font-weight:800}
.tcg-card.rare,.tcg-card.mythic{isolation:isolate}
.tcg-card.rare:after,.tcg-card.mythic:after{background:linear-gradient(112deg,transparent 36%,#fff4d17a 47%,#95d9ff50 51%,transparent 60%);mix-blend-mode:screen}
.tcg-card.mythic{box-shadow:0 0 0 1px #cf9bf0b0,0 10px 30px #6f3d9855,inset 0 0 18px #8a4ea52e}
.tcg-card.rare{box-shadow:0 0 0 1px #e4c47f78,0 10px 28px #000c,inset 0 0 13px #d7a85a1c}
.card-interactive:not(.exhausted):hover{transform:translateY(-4px)}

/* Collection feels more like a binder */
.collection-tools{position:sticky;top:8px;z-index:12;backdrop-filter:blur(18px);box-shadow:0 10px 30px #0008}
.card-grid{align-items:start}
.card-grid .card-wrap{position:relative;border-radius:12px;padding:5px;background:linear-gradient(145deg,#ffffff08,#0000);transition:transform .18s ease,background .18s ease}
.card-grid .card-wrap:hover{transform:translateY(-3px);background:#d9b7760d}
.card-grid .card-qty{box-shadow:0 4px 14px #0008}

/* Battle frame */
.battle-phase-bar{position:relative;overflow:hidden;border:1px solid #d2b47772;background:linear-gradient(105deg,#182b3c 0%,#102131 48%,#1a2a36 100%);box-shadow:inset 0 1px #fff1,0 8px 24px #0005}
.battle-phase-bar:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,#e9c78312,transparent);transform:translateX(-100%);animation:swPhaseScan 6s linear infinite}
.phase-dot{box-shadow:0 0 0 4px #d6a85e13,0 0 12px #f1c8797b}
.turn-steps span{border-radius:8px;background:#0d1a28;border-color:#5b71855f}
.turn-steps span.current{background:linear-gradient(110deg,#c69a5f,#f0d49a);box-shadow:0 0 18px #dfb15f31}
.turn-steps span.done{background:linear-gradient(120deg,#163a33,#122d29);border-color:#5d8f7b7a}
.battle-guide{backdrop-filter:blur(14px);box-shadow:0 6px 20px #0004}

.arena{border-color:#e4c8919d;background:
  radial-gradient(circle at 50% 50%,#e8c48328 0%,transparent 27%),
  linear-gradient(180deg,#06101bdc 0%,#1627399c 48%,#07111ce8 100%),
  url('assets/art/world.webp') center 43%/cover no-repeat!important;
  box-shadow:inset 0 0 80px #000b,0 22px 65px #000b,0 0 0 1px #1e3345}
.arena:before{border-color:#f1d7a344;box-shadow:inset 0 0 0 1px #ffffff0a}
.arena:after{background:radial-gradient(circle,#e8c1781d 0%,#89c3d110 30%,transparent 64%);box-shadow:inset 0 0 0 1px #d6b46f38,0 0 0 20px #caa05d08,0 0 58px #d6a75c1a}
.arena-ornament{color:#f3d59c15;text-shadow:0 0 90px #e3b35f62}

.arena-head{position:relative}
.hero-box{position:relative;overflow:hidden;background:linear-gradient(115deg,#0b1624f0,#192b3ee5);border-color:#e1c2898c;box-shadow:0 7px 28px #0009,inset 0 1px #fff2}
.hero-box:after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(#f0d497,transparent)}
.hero-box.enemy:after{background:linear-gradient(#d88e7c,transparent)}
.hero-crest{background-size:cover!important;box-shadow:0 0 0 1px #dec38d70,0 5px 15px #000b,inset 0 0 15px #0008}
.health{font-variant-numeric:tabular-nums;text-shadow:0 0 18px #f0c8792e}

.arena-lane{border-color:#cfb98d43}
.arena-lane:before{padding:2px 7px;border-radius:20px;background:#07111cc4;border:1px solid #cdb27d2d;backdrop-filter:blur(9px)}
.empty-slot{position:relative;background:linear-gradient(160deg,#26384b28,#0b162420);border:1px dashed #d8c18d42;color:#d8c49b52;box-shadow:inset 0 0 22px #0006}
.empty-slot:after{content:'';position:absolute;inset:17%;border:1px solid #d4bc8a17;transform:rotate(45deg)}
.board-unit{transition:transform .16s ease,filter .16s ease}
.board-unit:hover{transform:translateY(-2px)}
.board-unit.queued{transform:translateY(-4px)}
.arena-lane .tcg-card{box-shadow:0 9px 19px #000d,inset 0 0 0 1px #e2c68644}
.arena-lane .tcg-card.selected,.arena-lane .board-unit.queued .tcg-card{outline-color:#ffe0a1;box-shadow:0 0 0 2px #f0cd8c5c,0 0 24px #e3b7676b,0 10px 24px #000c}
.unit-information{border-color:#f0ce918d;background:#0a1724ef;box-shadow:0 4px 12px #000b}

.arena-mid .rift-status{backdrop-filter:blur(14px);border-color:#d6b77880;background:linear-gradient(90deg,#0a1422d6,#17283ad4,#0a1422d6);box-shadow:0 6px 20px #0008,0 0 24px #c4994c1f}

/* Hand — wider art, clearer selected state */
.arena-hand{position:relative}
.hand-caption{position:relative;z-index:5}
.hand-view-button{border-radius:8px;background:linear-gradient(135deg,#55442b9c,#2d291f9c);box-shadow:inset 0 1px #fff1}
.hand-scroll{scroll-padding-inline:12px}
.arena-hand .tcg-card{transition:transform .17s ease,filter .17s ease,box-shadow .17s ease;box-shadow:0 11px 24px #000d,inset 0 0 0 1px #e1c48642}
.arena-hand .tcg-card:not(.exhausted){box-shadow:0 0 0 1px #e2c78928,0 11px 24px #000d}
.arena-hand .tcg-card.exhausted{filter:saturate(.58) brightness(.74)}
.arena-hand .tcg-card.selected{filter:brightness(1.1) saturate(1.08);box-shadow:0 0 0 2px #ffe0a4,0 0 28px #e6b86772,0 15px 31px #000e}

.mobile-card-inspector{position:relative;overflow:hidden;border-color:#d4b67975;background:linear-gradient(120deg,#1b3042f0,#0b1826f5);box-shadow:0 10px 28px #0007,inset 0 1px #fff1}
.mobile-card-inspector.has-card:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(#f2d59a,#8c6636)}
.inspector-art{box-shadow:0 5px 16px #000b}
.inspector-copy h3{color:#fff0d7}
.inspector-expand{background:linear-gradient(145deg,#172a3d,#0c1725)}

/* Primary actions should look like game controls, not form buttons */
.combat-dock{border-top-color:#e4c7896f;background:linear-gradient(180deg,#1b3041f2,#07121dfc);box-shadow:0 -14px 40px #000d,inset 0 1px #fff1}
.dock-actions .btn{border-radius:10px}
.dock-actions .btn-primary{box-shadow:0 5px 18px #b67f3445,inset 0 1px #fff8}
.dock-actions .dock-mini{background:#0d1b29e8}
.mobile-log{border-radius:9px;overflow:hidden}
.mobile-log-toggle{background:linear-gradient(100deg,#122334,#0b1724)}

/* Pack reveal */
.pack-stage{background:radial-gradient(circle at 50% 43%,#d0a16031,transparent 42%),linear-gradient(#101c2a,#08121d)}
.booster{border:1px solid #e2c58f77;box-shadow:0 26px 58px #000d,0 0 44px #d8a65b32}
.reveal-grid>div{animation:swCardReveal .34s ease both;animation-delay:calc(var(--i) * .07s)}

/* Mobile battle is the hero of the product */
@media(max-width:760px){
  .battle-page{background:#050d15}
  .battle-page .content{padding-left:6px;padding-right:6px}
  .battle-phase-bar{min-height:35px;border-radius:10px;padding:6px 9px}
  .battle-guide{margin-bottom:6px;border-radius:10px;padding:6px 8px}
  .turn-steps{gap:4px;margin-bottom:6px}
  .turn-steps span{min-height:25px;border-radius:7px}
  .arena{border-radius:15px;padding:6px 6px 7px}
  .arena:before{inset:3px;border-radius:12px}
  .arena-head{min-height:44px}
  .hero-box{border-radius:9px;padding:4px 6px;gap:6px;max-width:73%}
  .hero-crest{width:34px;height:34px;border-radius:7px}
  .hero-box h4{font-size:.57rem;letter-spacing:.09em}
  .health{font-size:1.08rem}
  .arena-lane{gap:4px;padding:10px 0 5px}
  .arena-lane:before{font-size:.44rem;letter-spacing:.12em;padding:1px 5px}
  .arena-lane .tcg-card,.arena-lane .empty-slot{width:min(17.1vw,70px);max-width:70px}
  .board-unit{max-width:70px;flex-basis:70px}
  .arena-mid{height:26px}
  .arena-mid .rift-status{font-size:.48rem;padding:5px 9px;max-width:87%}
  .arena-hand{min-height:164px;max-height:174px;padding-top:3px}
  .hand-scroll{height:140px;flex-basis:140px;gap:8px;padding:9px 7px 6px}
  .arena-hand .tcg-card{width:84px;flex-basis:84px}
  .arena-hand .tcg-card.selected{transform:translateY(-8px) scale(1.025)}
  .mobile-card-inspector{border-radius:10px;margin-top:6px}
  .combat-dock{gap:6px;padding-top:7px}
  .dock-meta{letter-spacing:.075em}
  .dock-actions .btn{min-height:47px}
  .mobile-nav{background:linear-gradient(180deg,#0a1622f5,#050c13fc);backdrop-filter:blur(18px)}
  .mobile-nav .nav-btn.active{background:linear-gradient(180deg,#c69b5430,#92714017);box-shadow:inset 0 2px #e5c784,0 0 18px #d0a15c17}
  .collection-tools{top:4px;margin-top:8px}
  .card-grid{gap:10px}
  .card-grid .card-wrap{padding:3px}
}

@media(max-width:380px){
  .arena-hand{min-height:157px;max-height:167px}
  .hand-scroll{height:134px;flex-basis:134px;gap:7px;padding-inline:5px}
  .arena-hand .tcg-card{width:80px;flex-basis:80px}
  .arena-lane .tcg-card,.arena-lane .empty-slot{width:16.6vw}
  .board-unit{max-width:16.6vw;flex-basis:16.6vw}
  .dock-actions .btn{font-size:.59rem}
}

@media(min-width:761px){
  .arena{min-height:690px}
  .arena-hand .tcg-card:hover{transform:translateY(-8px) scale(1.025);z-index:8}
  .battle-side{position:sticky;top:18px;align-self:start}
  .card-grid .tcg-card:hover{transform:translateY(-6px) scale(1.01);z-index:3}
}

@keyframes swPhaseScan{0%{transform:translateX(-110%)}45%,100%{transform:translateX(110%)}}
@keyframes swCardReveal{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.battle-phase-bar:after,.reveal-grid>div{animation:none!important}.card-grid .card-wrap,.board-unit,.arena-hand .tcg-card{transition:none!important}}