/* ==========================================================================
   KTK v3 DECK COSMETICS (presentation only). War Chest screen polish +
   per-deck face-up frame skins driven by [data-deck-theme] (set on <html>
   and #app by applyCosmeticDeck; a preview stage can scope its own theme).
   No new art. Static paint, transform/opacity motion, reduced motion honored.
   ========================================================================== */

/* ---------- rarity palette ---------- */
.v3c-common{--rar:#b9a585;--rar-g:rgba(185,165,133,.25)}
.v3c-rare{--rar:#6fb6ff;--rar-g:rgba(90,170,255,.32)}
.v3c-epic{--rar:#c07cff;--rar-g:rgba(180,110,255,.34)}
.v3c-legendary{--rar:#ffb444;--rar-g:rgba(255,170,60,.38)}
.v3c-mythic{--rar:#ff5f7e;--rar-g:rgba(255,90,130,.38)}

/* ---------- grid + tiles ---------- */
#cosmetics-modal .cosmetics-card{position:relative}
#cosmetics-modal .cosmetics-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;gap:10px!important;max-height:min(68vh,640px);overflow:auto;padding:2px 2px 6px;overscroll-behavior:contain}
#cosmetics-modal .v3c-tile{position:relative;display:flex!important;flex-direction:column;padding:0!important;gap:0;opacity:1!important;filter:none!important;
  background:linear-gradient(180deg,rgba(32,20,14,.92),rgba(12,8,7,.95))!important;border:1px solid var(--rar)!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.08),0 0 0 1px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.45),0 0 12px var(--rar-g)!important;overflow:hidden;
  transition:transform .14s ease,box-shadow .2s ease}
#cosmetics-modal .v3c-tile:hover{transform:translateY(-2px)}
#cosmetics-modal .v3c-open{all:unset;cursor:pointer;display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:12px;
  padding:10px;box-sizing:border-box;width:100%;-webkit-tap-highlight-color:transparent}
#cosmetics-modal .v3c-open:focus-visible{outline:2px solid var(--v3h-gold-b,#fbe3a0);outline-offset:-3px;border-radius:12px}
#cosmetics-modal .v3c-tile .cosmetic-preview{grid-row:1 / 5;width:88px!important;aspect-ratio:2/3;position:relative;border:2px solid var(--deck-border,#7a5a22)!important;
  border-radius:7px!important;background:var(--deck-art) center/cover no-repeat!important;image-rendering:auto;
  box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 10px var(--deck-glow,rgba(212,168,75,.2))!important}
#cosmetics-modal .v3c-tile .cosmetic-copy b{font-family:'Cinzel',Georgia,serif;font-size:1rem!important;color:#fbe3a0!important;letter-spacing:.04em;text-shadow:0 1px 2px #000}
#cosmetics-modal .v3c-rarity{font-family:'Cinzel',Georgia,serif;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.6rem!important;color:var(--rar)!important}
#cosmetics-modal .v3c-req{font-size:.72rem!important;line-height:1.3;color:rgba(241,230,207,.86)!important;margin-top:6px;text-transform:none;letter-spacing:0;font-family:inherit}
#cosmetics-modal .v3c-tile.selected .v3c-req{color:#9fe6b4!important}
/* locked: art dimmed, still readable */
#cosmetics-modal .v3c-tile.locked .cosmetic-preview{filter:saturate(.45) brightness(.62)}
#cosmetics-modal .v3c-tile.locked{border-color:color-mix(in srgb,var(--rar) 55%,#3a2a1a)!important}
.v3c-lock{position:absolute;right:-6px;bottom:-6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#fbe3a0,#b8862f 70%,#7a5a22);border:1px solid #fbe3a0;box-shadow:0 2px 6px rgba(0,0,0,.7)}
.v3c-lock svg{width:16px;height:16px;fill:none;stroke:#2a1708;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* progress */
.v3c-progress{display:flex;align-items:center;gap:8px;margin-top:6px;align-self:end}
.v3c-bar{flex:1;height:7px;border-radius:99px;background:rgba(0,0,0,.6);border:1px solid rgba(233,197,116,.25);overflow:hidden}
.v3c-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,#b8862f,#fbe3a0);box-shadow:0 0 8px rgba(255,180,70,.5)}
.v3c-count{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:.66rem;color:#e9c574;white-space:nowrap;font-variant-numeric:tabular-nums}
/* equip */
.v3c-equip{margin:0 10px 10px;min-height:36px;border-radius:9px;font-family:'Cinzel',Georgia,serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;cursor:pointer;
  background:linear-gradient(180deg,#fbe3a0 0%,#e9c574 38%,#b8862f 72%,#7a5a22 100%);color:#2a1708;border:1px solid #fbe3a0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.5);transition:transform .12s ease}
.v3c-equip:active{transform:scale(.97)}
.v3c-equip.is-on{background:rgba(20,40,26,.9);color:#a6ecbc;border-color:rgba(140,230,170,.6);box-shadow:0 0 12px rgba(120,230,160,.25)}
/* equipped glow */
#cosmetics-modal .v3c-tile.selected{border-color:#a6ecbc!important;box-shadow:0 0 0 1px rgba(166,236,188,.6),0 0 22px rgba(120,230,160,.3),0 6px 16px rgba(0,0,0,.45)!important}
#cosmetics-modal .v3c-tile.selected .cosmetic-preview{box-shadow:0 0 0 2px rgba(166,236,188,.7),0 0 18px rgba(120,230,160,.45)!important}
/* NEW ribbon */
.v3c-new{position:absolute;top:10px;left:-30px;width:110px;transform:rotate(-38deg);text-align:center;z-index:3;
  font:800 .62rem/1.6 'Cinzel',Georgia,serif;letter-spacing:.2em;color:#2a1708;background:linear-gradient(180deg,#fff0bd,#e9b54a);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.v3c-tile.is-new{animation:v3c-pulse 2.4s ease-in-out 3}
@keyframes v3c-pulse{50%{transform:translateY(-2px)}}
#cosmetics-modal .cosmetics-note{font-size:.78rem!important;color:rgba(241,230,207,.78)!important}

/* ---------- large preview ---------- */
.v3c-big{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px;border-radius:inherit;
  background:radial-gradient(80% 70% at 50% 40%,rgba(60,26,12,.96),rgba(8,6,5,.98));animation:v3c-in .2s ease-out both}
.v3c-big-stage{position:relative;display:flex;gap:16px;align-items:center;perspective:900px}
.v3c-big-back{position:relative;display:block;width:min(30vw,240px);aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  background:var(--deck-art) center/cover no-repeat;border:2px solid var(--deck-border);box-shadow:0 18px 40px rgba(0,0,0,.7),0 0 30px var(--deck-glow);
  animation:v3c-tilt 7s ease-in-out infinite;transform-style:preserve-3d}
.v3c-big-face{display:block;width:min(22vw,170px);aspect-ratio:2/3;position:relative}
.v3c-big-face .card-face{position:absolute;inset:0;width:100%;height:100%}
.v3c-shine{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,250,230,.28) 50%,transparent 60%);transform:translateX(-60%);animation:v3c-shine 5s ease-in-out infinite;pointer-events:none}
.v3c-big.locked .v3c-big-back,.v3c-big.locked .v3c-big-face{filter:saturate(.5) brightness(.7)}
.v3c-big-copy{max-width:300px;color:#f1e6cf}
.v3c-big-copy h3{font:800 1.7rem/1.1 'Cinzel',Georgia,serif;color:#fbe3a0;margin:4px 0 8px;text-shadow:0 0 14px rgba(255,150,60,.35)}
.v3c-big-copy p{margin:0 0 10px;font-size:.92rem;line-height:1.4}
.v3c-big-actions{display:flex;gap:10px;margin-top:14px}.v3c-big-actions .v3c-equip{margin:0;padding:0 18px}
.v3c-back{min-height:36px;padding:0 16px;border-radius:9px;font-family:'Cinzel',Georgia,serif;font-weight:700;letter-spacing:.08em;cursor:pointer;
  background:linear-gradient(180deg,rgba(40,26,18,.92),rgba(14,9,8,.94));color:#fbe3a0;border:1px solid rgba(233,197,116,.42)}
@keyframes v3c-tilt{0%,100%{transform:rotateY(-9deg) rotateX(3deg)}50%{transform:rotateY(9deg) rotateX(-2deg)}}
@keyframes v3c-shine{0%,30%{transform:translateX(-60%)}70%,100%{transform:translateX(60%)}}
@keyframes v3c-in{from{opacity:0}to{opacity:1}}

/* ---------- fit ---------- */
@media (max-width:700px){
  #cosmetics-modal .cosmetics-grid{grid-template-columns:1fr!important;max-height:calc(100dvh - 190px)}
  #cosmetics-modal .v3c-open{grid-template-columns:72px minmax(0,1fr)}
  #cosmetics-modal .v3c-tile .cosmetic-preview{width:72px!important}
  .v3c-big{flex-direction:column;gap:14px;padding:14px;overflow:auto;justify-content:flex-start}
  .v3c-big-back{width:min(42vw,170px)}.v3c-big-face{width:min(32vw,124px)}
  .v3c-big-copy{text-align:center}.v3c-big-actions{justify-content:center}
}
@media (max-height:500px) and (orientation:landscape){
  #cosmetics-modal .cosmetics-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;max-height:calc(100dvh - 120px)}
  #cosmetics-modal .v3c-open{grid-template-columns:52px minmax(0,1fr);padding:7px}
  #cosmetics-modal .v3c-tile .cosmetic-preview{width:52px!important}
  #cosmetics-modal .v3c-req{font-size:.64rem!important;margin-top:3px}
  .v3c-equip{min-height:30px;margin:0 7px 7px}
  .v3c-big{padding:10px;gap:16px}.v3c-big-back{width:min(22vh,150px);width:110px}.v3c-big-face{width:84px}
  .v3c-big-copy h3{font-size:1.2rem}
}

/* ==========================================================================
   FACE-UP FRAME SKINS (one per deck). Variables only + a few layers, so the
   full-bleed art and readability stay intact.
   ========================================================================== */
[data-deck-theme]{--sk-rim:#7a5a22;--sk-rim-hi:#e9c574;--sk-plate:rgba(8,6,4,.8);--sk-plate-rim:rgba(217,178,90,.55);--sk-num:#fff;--sk-band:rgba(217,178,90,.6);--sk-glow:transparent;--sk-foil:none}
[data-deck-theme="soldier"]{--sk-rim:#6b5034;--sk-rim-hi:#b8956a;--sk-plate:rgba(24,16,9,.82);--sk-plate-rim:rgba(184,149,106,.6);--sk-band:rgba(184,149,106,.65)}
[data-deck-theme="knight"]{--sk-rim:#5f6b75;--sk-rim-hi:#d4dde4;--sk-plate:rgba(12,16,20,.82);--sk-plate-rim:rgba(190,205,215,.7);--sk-band:rgba(190,205,215,.7);--sk-glow:rgba(128,174,210,.25)}
[data-deck-theme="captain"]{--sk-rim:#7a2a1c;--sk-rim-hi:#d9a06a;--sk-plate:rgba(30,10,6,.82);--sk-plate-rim:rgba(217,150,100,.7);--sk-band:rgba(200,80,50,.7);--sk-glow:rgba(170,50,36,.25)}
[data-deck-theme="warlord"]{--sk-rim:#5a160b;--sk-rim-hi:#ff7a3c;--sk-plate:rgba(28,8,4,.84);--sk-plate-rim:rgba(255,120,60,.7);--sk-num:#ffe6d2;--sk-band:rgba(255,110,50,.75);--sk-glow:rgba(231,66,25,.3)}
[data-deck-theme="kingbreaker"]{--sk-rim:#6e1a12;--sk-rim-hi:#f2cd74;--sk-plate:rgba(26,8,6,.84);--sk-plate-rim:rgba(242,205,116,.75);--sk-band:rgba(242,205,116,.8);--sk-glow:rgba(216,68,42,.32)}
[data-deck-theme="iron"]{--sk-rim:#3d4246;--sk-rim-hi:#9aa3a9;--sk-plate:rgba(18,20,22,.86);--sk-plate-rim:rgba(154,163,169,.7);--sk-num:#eef1f2;--sk-band:rgba(154,163,169,.7)}
[data-deck-theme="enchanted-steel"]{--sk-rim:#2c5566;--sk-rim-hi:#9fe3ff;--sk-plate:rgba(6,18,26,.84);--sk-plate-rim:rgba(120,210,245,.8);--sk-num:#effaff;--sk-band:rgba(120,210,245,.8);--sk-glow:rgba(93,202,239,.32);
  --sk-foil:linear-gradient(125deg,transparent 30%,rgba(160,230,255,.14) 45%,transparent 60%)}
[data-deck-theme="royal-gold"]{--sk-rim:#8a6420;--sk-rim-hi:#ffe9a6;--sk-plate:linear-gradient(180deg,rgba(40,26,6,.88),rgba(16,10,2,.9));--sk-plate-rim:#f2cd74;--sk-num:#fff3cf;--sk-band:#f2cd74;--sk-glow:rgba(255,194,64,.38);
  --sk-foil:linear-gradient(120deg,transparent 25%,rgba(255,230,150,.18) 42%,transparent 52%,rgba(255,240,190,.10) 64%,transparent 74%)}
[data-deck-theme="elemental-mythic"]{--sk-rim:#4a2266;--sk-rim-hi:#d9a0ff;--sk-plate:rgba(20,8,30,.86);--sk-plate-rim:rgba(205,140,250,.85);--sk-num:#fbf0ff;--sk-band:rgba(205,140,250,.85);--sk-glow:rgba(196,86,246,.4);
  --sk-foil:linear-gradient(130deg,rgba(255,90,40,.10),transparent 30%,rgba(80,200,255,.12) 50%,transparent 70%,rgba(120,255,140,.10))}
[data-deck-theme="celestial"]{--sk-rim:#3a3f72;--sk-rim-hi:#eef0ff;--sk-plate:rgba(10,12,32,.86);--sk-plate-rim:rgba(220,224,255,.85);--sk-num:#ffffff;--sk-band:rgba(220,224,255,.85);--sk-glow:rgba(166,177,255,.45);
  --sk-foil:radial-gradient(circle at 20% 15%,rgba(255,255,255,.22) 0 1px,transparent 2px),radial-gradient(circle at 75% 40%,rgba(255,255,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 40% 80%,rgba(220,225,255,.2) 0 1px,transparent 2px),linear-gradient(125deg,transparent 30%,rgba(200,210,255,.14) 48%,transparent 62%)}

[data-deck-theme]:not([data-deck-theme="legacy"]) .card-face.v3.full{
  border-color:var(--sk-rim)!important;
  box-shadow:0 0 0 1px #000,inset 0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 3px var(--sk-rim-hi),0 4px 12px rgba(0,0,0,.6),0 0 14px var(--sk-glow)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .card-face.v3.full::after{
  background:var(--sk-foil),
    radial-gradient(ellipse 75% 70% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%),
    radial-gradient(circle at 0 0,rgba(0,0,0,.55),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.55),transparent 34%)!important;
  box-shadow:inset 0 0 0 1.4cqw var(--sk-rim),inset 0 0 0 2.1cqw var(--sk-rim-hi),inset 0 0 0 2.6cqw rgba(0,0,0,.55),inset 0 0 6cqw var(--sk-glow)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .card-face.v3.full .v3-idx{background:var(--sk-plate)!important;border-color:var(--sk-plate-rim)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .card-face.v3.full .v3-idx b{color:var(--sk-num)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .card-face.v3.full .v3-val{border-color:var(--sk-plate-rim)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .slot.castle .card-face.v3.full .v3-castle{border-top-color:var(--sk-band)!important}
[data-deck-theme]:not([data-deck-theme="legacy"]) .slot.castle .card-face.v3.full .v3-castle b{color:var(--sk-rim-hi)!important}
/* material character */
[data-deck-theme="iron"] .card-face.v3.full .v3-idx,[data-deck-theme="knight"] .card-face.v3.full .v3-idx{border-radius:2cqw!important}
[data-deck-theme="royal-gold"] .card-face.v3.full .v3-idx b{text-shadow:0 0 6px rgba(255,200,90,.7),0 2px 0 #000!important}
[data-deck-theme="celestial"] .card-face.v3.full .v3-idx b{text-shadow:0 0 8px rgba(200,210,255,.9),0 2px 0 #000!important}

@media (prefers-reduced-motion:reduce){
  .v3c-big-back,.v3c-shine,.v3c-tile.is-new,.v3c-big{animation:none!important}
  #cosmetics-modal .v3c-tile{transition:none}
}
@media (max-width:940px),(pointer:coarse){.v3c-big{-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- preview: numbered + court sample ---------- */
.v3c-big-stage .v3c-big-face{width:min(16vw,140px)}
@media (max-width:700px){.v3c-big-stage{gap:8px}.v3c-big-stage .v3c-big-face{width:min(26vw,104px)}.v3c-big-back{width:min(34vw,140px)}}
@media (max-height:500px) and (orientation:landscape){.v3c-big-stage .v3c-big-face{width:76px}}

/* ---------- results: UNLOCKED reward card / nudge ---------- */
.v3u-reward{display:flex;align-items:center;gap:14px;margin:10px auto 4px;padding:10px 14px;max-width:440px;border-radius:12px;
  background:radial-gradient(120% 90% at 0% 50%,var(--rar-g,rgba(255,170,60,.25)),transparent 60%),linear-gradient(180deg,rgba(32,20,14,.94),rgba(12,8,7,.96));
  border:1px solid var(--rar,#e9c574);box-shadow:0 0 18px var(--rar-g,rgba(255,170,60,.3)),inset 0 1px 0 rgba(255,236,190,.1);
  animation:v3u-in .5s cubic-bezier(.2,.9,.3,1.2) both .4s;text-align:left}
.v3u-back{flex:0 0 auto;width:54px;aspect-ratio:2/3;border-radius:6px;background:var(--deck-art) center/cover no-repeat;border:2px solid var(--deck-border);
  box-shadow:0 4px 12px rgba(0,0,0,.6),0 0 14px var(--deck-glow);animation:v3u-flip .7s ease-out both .5s}
.v3u-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.v3u-copy em{font:800 .7rem/1 'Cinzel',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#fbe3a0;font-style:normal}
.v3u-copy b{font:800 1.15rem/1.15 'Cinzel',Georgia,serif;color:#fff1c8;margin-top:3px}
.v3u-copy small{color:rgba(241,230,207,.8);font-size:.72rem}
.v3u-more{margin-top:2px}
.v3u-actions{display:flex;flex-direction:column;gap:6px}
.v3u-actions .v3c-equip{margin:0;padding:0 12px;min-height:32px}.v3u-actions .v3c-back{min-height:30px}
.v3u-nudge{--rar:#e9c574;--rar-g:rgba(233,197,116,.18)}
.v3u-nudge .v3u-back{width:38px;filter:saturate(.6) brightness(.75);animation:none}
.v3u-nudge .v3u-copy b{font-size:.92rem}
@keyframes v3u-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes v3u-flip{from{transform:perspective(400px) rotateY(90deg)}to{transform:none}}
@media (max-width:420px){.v3u-reward{gap:10px;padding:8px 10px}.v3u-back{width:44px}.v3u-copy b{font-size:1rem}}
@media (max-height:500px) and (orientation:landscape){.v3u-reward{margin:6px auto 2px;padding:6px 10px}.v3u-back{width:36px}.v3u-actions{flex-direction:row}}
@media (prefers-reduced-motion:reduce){.v3u-reward,.v3u-back{animation:none!important}}

/* results scoreboard: your castle thumb uses the equipped deck's restyled art */
[data-deck-theme="soldier"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/soldier/castle-fire.jpg?v=da2')}
[data-deck-theme="iron"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/iron/castle-fire.jpg?v=da2')}
[data-deck-theme="knight"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/knight/castle-fire.jpg?v=da2')}
[data-deck-theme="captain"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/captain/castle-fire.jpg?v=da2')}
[data-deck-theme="enchanted-steel"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/enchanted-steel/castle-fire.jpg?v=da2')}
[data-deck-theme="warlord"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/warlord/castle-fire.jpg?v=da2')}
[data-deck-theme="kingbreaker"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/kingbreaker/castle-fire.jpg?v=da2')}
[data-deck-theme="royal-gold"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/royal-gold/castle-fire.jpg?v=da2')}
[data-deck-theme="elemental-mythic"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/elemental-mythic/castle-fire.jpg?v=da2')}
[data-deck-theme="celestial"] .res-side.is-you .res-castle{background-image:url('../../assets/art/decks-v1/celestial/castle-fire.jpg?v=da2')}

/* ---------- per-player decks: each board side shows its owner's backs ---------- */
.side[data-deck-theme="legacy"],.v3-tip-thumb[data-deck-theme="legacy"]{--deck-art:image-set(url("../../assets/art/backs/skull-240.jpg?v=bk1") 1x,url("../../assets/art/backs/skull-480.jpg?v=bk1") 2x);--deck-border:#7a5a22;--deck-glow:rgba(212,168,75,.2)}
.board-2d .side[data-deck-theme] .card-back,
.board-2d .side[data-deck-theme] .card-back-mini,
.board-2d .side[data-deck-theme] .pile-stack.card-back-mini{background-image:var(--deck-art)!important;background-size:cover!important;background-position:center!important;border-color:var(--deck-border)!important}