@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=Kanit:wght@300;400;500;600;700&family=Metal+Mania&display=swap');
:root{--bg:#070707;--panel:#101010;--panel2:#151515;--line:#28231a;--gold:#d9ad52;--gold2:#f2d48a;--text:#eee9df;--muted:#8e897f}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 0%,#19130a 0,#070707 38%);color:var(--text);font-family:'Metal Mania','Chonburi','Kanit',Arial,sans-serif;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;border-right:1px solid var(--line);background:#090909;padding:24px 18px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 32px}.brand-mark{width:42px;height:42px;border:1px solid var(--gold);color:var(--gold2);display:grid;place-items:center;font-family:'Metal Mania';font-weight:700;transform:rotate(45deg)}.brand-mark::first-letter{transform:rotate(-45deg)}.brand b{display:block;font-family:'Metal Mania';letter-spacing:1.5px}.brand small{font-size:8px;color:var(--muted);letter-spacing:1.3px}.nav{width:100%;border:0;background:transparent;color:#817b71;text-align:left;padding:13px 12px;margin:3px 0;border-radius:7px;cursor:pointer;font-size:14px}.nav span{margin-left:9px}.nav:hover,.nav.active{background:#18140d;color:var(--gold2)}.sidebar-bottom{margin-top:auto;color:#514c45;font-size:10px;padding:8px}.version{border-top:1px solid #1c1915;padding-top:14px}main{margin-left:245px;min-height:100vh;padding:28px 42px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow,.hero-kicker{font-size:10px;letter-spacing:2.5px;color:var(--gold);font-weight:700}h1{font:600 29px 'Metal Mania';margin:6px 0 0}.stats{font-size:11px;color:var(--muted);letter-spacing:1px}.stats span{color:var(--gold2);font-size:19px;font-weight:700;margin-right:7px}.hero{min-height:0;border:1px solid var(--line);background:linear-gradient(110deg,#16110a,#0e0d0b 58%,#17110a);position:relative;overflow:hidden;padding:36px 40px;margin-bottom:22px}.hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid #4d3b1d;right:-120px;top:-100px;border-radius:50%;box-shadow:0 0 0 35px #211a0e,0 0 0 36px #3a2c18}.hero h2{font:600 34px 'Metal Mania';margin:9px 0;line-height:1.15}.hero h2 em{color:var(--gold2);font-style:normal}.hero p{max-width:510px;color:#8f8a80;font-size:13px;line-height:1.7}.sigil{position:absolute;right:120px;top:60px;font-size:75px;color:#6b5125;opacity:.35}.toolbar{display:flex;gap:10px;margin-bottom:20px}.search-wrap{flex:1;display:flex;align-items:center;background:#101010;border:1px solid #28241d;padding:0 13px}.search-wrap span{color:var(--gold);font-size:22px}.search-wrap input{background:none;border:0;outline:0;color:white;padding:13px;width:100%;font-size:13px}.toolbar select{background:#101010;color:#c8c1b5;border:1px solid #28241d;padding:0 14px;min-width:145px;outline:none}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.card{background:#101010;border:1px solid #28241d;cursor:pointer;transition:.2s;overflow:hidden}.card:hover{transform:translateY(-4px);border-color:#745a2b;box-shadow:0 12px 35px #000}.card-art{aspect-ratio:0.72;background:radial-gradient(circle at 50% 35%,#5b4520,#211a10 30%,#0d0d0d 70%);position:relative;display:grid;place-items:center;overflow:hidden}.card-art:before{content:"";position:absolute;width:72%;height:72%;border:1px solid #8a692e;transform:rotate(45deg);opacity:.3}.card-symbol{font:700 54px 'Metal Mania';color:#d6b25e;text-shadow:0 0 25px #9a711e;z-index:1}.card-info{padding:13px 14px 15px}.tag-row{display:flex;gap:6px}.tag{font-size:8px;letter-spacing:1px;padding:4px 6px;border:1px solid #45371f;color:var(--gold2)}.tag.rarity{color:#c7c0b4;border-color:#35312b}.card h3{font:600 17px 'Metal Mania';margin:10px 0 4px}.card p{margin:0;color:#777168;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{text-align:center;color:var(--muted);padding:60px}.hidden{display:none!important}.section{display:none}.active-section{display:block}.placeholder{min-height:500px;border:1px dashed #30291e;display:grid;place-content:center;text-align:center;color:var(--muted)}.placeholder span{font-size:40px;color:var(--gold);display:block}.placeholder h2{font-family:'Metal Mania';color:#ddd}.modal{position:fixed;inset:0;background:#000b;backdrop-filter:blur(8px);z-index:20;display:grid;place-items:center;padding:20px}.modal-card{width:min(800px,100%);background:#101010;border:1px solid #46371f;display:grid;grid-template-columns:330px 1fr;position:relative;box-shadow:0 25px 90px #000}.detail-image{min-height:470px;background:radial-gradient(circle at 50% 40%,#80602a,#251d10 32%,#0b0b0b 72%);display:grid;place-items:center}.detail-image:after{content:none;display:none}.detail{padding:38px}.close{position:absolute;right:13px;top:10px;border:0;background:none;color:#aaa;font-size:28px;cursor:pointer}.detail h2{font:600 20px 'Metal Mania';margin:16px 0 5px;color:var(--gold2)}.subtitle{color:#817b72;font-size:12px}.divider{height:1px;background:#29231a;margin:25px 0}.detail h3{font-size:9px;letter-spacing:2px;color:var(--gold)}.detail p{font-size:13px;line-height:1.7;color:#b0aaa0}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:30px}.detail-grid div{border:1px solid #28231a;padding:10px}.detail-grid small{display:block;color:#625d54;font-size:8px}.detail-grid b{display:block;color:#ddd;margin-top:4px;font-size:11px}.mobile-menu{display:none;background:none;color:var(--gold);border:0;font-size:23px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:translateX(0)}
  main{margin-left:0;padding:20px 14px}
  .mobile-menu{display:block}
  .topbar{gap:10px}
  .topbar>div:nth-child(2){margin-right:auto}
  .hero{padding:27px 23px}
  .hero h2{font-size:26px}
.hero:after{
  display:none;
}
  /* ลบวงแหวนบนมือถือ */
  .sigil{
    display:none;
  }

  .toolbar{flex-wrap:wrap}
  ...
}
@media(max-width:420px){.grid{grid-template-columns:1fr 1fr}.card-art{aspect-ratio:.75}}

/* ===== DECK BUILDER ===== */
.deck-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:25px}
.deck-header h2{font:600 31px 'Metal Mania';margin:7px 0}
.deck-header p{font-size:12px;color:var(--muted)}
.gold-btn,.danger-btn{border:1px solid #795d29;background:#1a140b;color:var(--gold2);padding:11px 15px;font-size:10px;font-weight:700;letter-spacing:1px;cursor:pointer}
.gold-btn:hover{background:#2a200f;border-color:var(--gold)}
.danger-btn{color:#bd8d82;border-color:#50302b;background:#170e0d}
.deck-empty{text-align:center;border:1px dashed #30291e;padding:90px 20px}
.empty-symbol{font:60px 'Metal Mania';color:#755827}
.deck-empty h3{font:20px 'Metal Mania';color:#ddd}
.deck-empty p{color:var(--muted);font-size:12px;margin-bottom:22px}
.deck-workspace{border:1px solid #28231a;background:#0c0c0c;padding:22px}
.deck-top{display:flex;gap:22px;border-bottom:1px solid #28231a;padding-bottom:22px}
.deck-cover-wrap{width:150px}.deck-cover{height:190px;border:1px solid #51401f;display:grid;place-items:center;position:relative;overflow:hidden}
.deck-cover span{font:700 70px 'Metal Mania';color:#d9ad52;text-shadow:0 0 30px #000}
.deck-cover:after{content:"";position:absolute;inset:12px;border:1px solid #d9ad52;opacity:.35;transform:rotate(45deg)}
.cover-btn{width:100%;margin-top:8px;background:#111;border:1px solid #2e291f;color:#aaa;padding:9px;font-size:10px;cursor:pointer}
.deck-meta{flex:1;display:flex;flex-direction:column;justify-content:center}
.deck-name{background:transparent;border:0;border-bottom:1px solid #3a3123;color:#f0eadf;font:600 29px 'Metal Mania';padding:9px 0;outline:0;margin-bottom:20px}
.deck-summary{display:flex;gap:25px;color:#716b61;font-size:9px;letter-spacing:1px}.deck-summary b{color:var(--gold2);font-size:15px;margin-left:5px}.deck-actions{margin-top:25px;display:flex;gap:8px}
.deck-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;padding-top:22px}
.deck-section-title{display:flex;justify-content:space-between;color:var(--gold2);font-size:10px;letter-spacing:2px;border-bottom:1px solid #28231a;padding:12px 0}.deck-section-title small{color:#625b51}
.special-slot{margin:10px 0 20px;min-height:70px}
.empty-slot{height:70px;border:1px dashed #3a3020;display:grid;place-items:center;color:#6b645a;font-size:10px;letter-spacing:1px}
.special-card{display:flex;align-items:center;background:#121212;border:1px solid #332a1d;padding:8px;gap:12px}
.special-art{width:54px;height:54px;display:grid;place-items:center;font:22px 'Metal Mania';color:#e2c06c;border:1px solid #5b4723}
.special-card b{font:15px 'Metal Mania';color:#ddd;display:block}.special-card small{color:#777;font-size:9px}.remove-card{margin-left:auto;background:none;border:0;color:#777;font-size:20px;cursor:pointer}.deck-list{display:flex;flex-direction:column;gap:5px}.deck-row{display:flex;align-items:center;background:#111;border:1px solid #211e19;padding:7px;gap:10px}.mini-art{width:38px;height:45px;display:grid;place-items:center;color:#e0bc66;font:15px 'Metal Mania';border:1px solid #48381f}.row-name{flex:1}.row-name b{font-size:10px;display:block}.row-name small{font-size:8px;color:#706a60}.qty{display:flex;align-items:center;gap:9px}.qty button{width:24px;height:24px;background:#18140e;border:1px solid #3c301d;color:#d7b662;cursor:pointer}.qty b{font-size:11px}.empty-main{padding:25px;color:#5f5a52;font-size:11px;border:1px dashed #28231a;text-align:center}
.card-picker{background:#101010;border:1px solid #28231a;padding:14px;height:max-content;position:sticky;top:15px}.picker-title{font:600 13px 'Metal Mania';color:var(--gold2);letter-spacing:1px;margin-bottom:12px}.card-picker input,.card-picker select{width:100%;height:38px;background:#090909;border:1px solid #29251f;color:#aaa;padding:0 9px;margin-bottom:8px;outline:0}.picker-row{display:flex;align-items:center;gap:8px;border-top:1px solid #211e19;padding:8px 0}.picker-art{width:35px;height:43px;display:grid;place-items:center;color:#d8b25d;font:13px 'Metal Mania';border:1px solid #4a3a20}.picker-name{flex:1;min-width:0}.picker-name b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-name small{display:block;color:#69645c;font-size:8px}.picker-qty{font-size:8px;color:#797269}.picker-row button{border:1px solid #48381f;background:#17130c;color:#d9b85e;width:27px;height:27px;cursor:pointer}.picker-row button:disabled{opacity:.25;cursor:not-allowed}
.rarity-legendary{background:radial-gradient(circle at 50% 30%,#a06c1b,#38250e 36%,#090909 75%)!important}.rarity-epic{background:radial-gradient(circle at 50% 30%,#693a91,#241334 38%,#090909 75%)!important}.rarity-rare{background:radial-gradient(circle at 50% 30%,#235f91,#11243a 38%,#090909 75%)!important}.rarity-common{background:radial-gradient(circle at 50% 30%,#626262,#292929 38%,#090909 75%)!important}.rarity-orb{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:50%;border:1px solid #caa65a;background:#0c0c0caa;color:#d9b85e;font-size:8px;display:grid;place-items:center}
.cover-picker-modal{width:min(700px,100%);background:#101010;border:1px solid #46371f;padding:30px;position:relative}.cover-picker-modal h2{font:600 25px 'Metal Mania';color:#e5d5af}.cover-picker-modal p{font-size:11px;color:#777}.cover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.cover-option{height:150px;border:1px solid #39301f;color:#ddd;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.cover-option span{font:35px 'Metal Mania';color:#e1bd67}.cover-option b{font-size:10px;margin-top:8px}.cover-option small{font-size:8px;color:#777;margin-top:3px}
@media(max-width:850px){.deck-layout{grid-template-columns:1fr}.card-picker{position:static}.cover-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.deck-header{align-items:flex-start;gap:10px}.deck-header h2{font-size:24px}.deck-top{align-items:center}.deck-cover-wrap{width:105px}.deck-cover{height:135px}.deck-cover span{font-size:45px}.deck-name{font-size:22px}.deck-summary{gap:10px;flex-wrap:wrap}.deck-workspace{padding:12px}.cover-grid{grid-template-columns:repeat(2,1fr)}}

.create-big{font-size:12px;padding:14px 22px;box-shadow:0 0 25px rgba(160,120,40,.12)}
.deck-empty .empty-symbol{margin-bottom:5px}
.deck-header .gold-btn{white-space:nowrap}

/* ===== MULTI DECK LIBRARY ===== */
.deck-library{margin-bottom:20px}.library-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.library-head h3{font:600 20px 'Metal Mania';margin:5px 0;color:#ddd}.deck-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.deck-library-card{min-height:110px;background:#101010;border:1px solid #28231a;display:flex;align-items:center;gap:12px;padding:10px;cursor:pointer;position:relative;transition:.18s}.deck-library-card:hover,.deck-library-card.active{border-color:#785d2c;background:#15120d}.library-cover{width:68px;height:88px;display:grid;place-items:center;border:1px solid #4a3a21;flex-shrink:0}.library-cover span{font:30px 'Metal Mania';color:#d9b85e}.library-info{min-width:0;padding-right:20px}.library-info h4{font:600 15px 'Metal Mania';color:#e4ded3;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-info div{display:flex;flex-wrap:wrap;gap:5px}.library-info div span{font-size:7px;color:#777066;border:1px solid #2c2821;padding:4px}.library-delete{position:absolute;right:5px;top:3px;background:none;border:0;color:#5e5850;font-size:18px;cursor:pointer}.library-delete:hover{color:#bd766c}
@media(max-width:900px){.deck-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.deck-cards{grid-template-columns:1fr}.library-cover{width:58px;height:76px}.library-info h4{font-size:13px}}

/* ===== PLAYTEST — EXACT REFERENCE PLAYMAT ===== */
.draw-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:15px}
.draw-header h2{font:600 31px 'Metal Mania';margin:6px 0}
.draw-header p{font-size:12px;color:var(--muted)}
.draw-controls{display:flex;gap:6px;flex-wrap:wrap}
.draw-controls select{background:#101010;color:#ccc;border:1px solid #322b20;padding:10px 12px;min-width:170px}
.playtest-info{display:flex;gap:20px;flex-wrap:wrap;border:1px solid #28231a;background:#101010;padding:10px 14px;margin-bottom:12px;font-size:9px;color:#716b62;letter-spacing:1px}
.playtest-info b{color:var(--gold2);font-size:11px}

/* The supplied playmat is the actual visual base.
   2048 × 1194 = exact reference aspect ratio. */
.playmat{
  position:relative;
  width:100%;
  aspect-ratio:2048 / 1194;
  min-height:0;
  padding:0;
  overflow:hidden;
  border:0;
  background:#fff;
}
.playmat:before{display:none}

/* Transparent overlay zones: their only job is to receive real cards. */
.mat-slot{
  position:absolute;
  display:block;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.slot-title{display:none}

/* Exact zones measured from the 2048 × 1194 reference image. */
.energy-slot{left:1.758%;top:.921%;width:10.449%;height:25.377%}
.soul1{left:35.059%;top:0;width:14.648%;height:5.779%}
.soul2{left:50.146%;top:0;width:14.697%;height:5.779%}

.c1{left:33.691%;top:11.474%;width:10.645%;height:19.430%}
.c2{left:55.762%;top:11.809%;width:10.645%;height:19.513%}
.master-slot{left:44.824%;top:17.504%;width:10.156%;height:19.430%;transform:none}
.c3{left:22.900%;top:31.993%;width:10.693%;height:19.430%}
.c4{left:66.699%;top:31.490%;width:10.645%;height:19.598%}
.zone-slot{left:44.824%;top:37.604%;width:10.156%;height:19.262%;transform:none}

/* U / Deck / Tomb are already drawn by the reference image. */
.unit-label{left:80.908%;top:2.345%;width:11.230%;height:13.400%;background:transparent!important;color:transparent!important;font-size:0!important}
.unit-label:after{display:none!important}

.deck-pile{left:84.766%;top:17.001%;width:7.373%;height:19.430%;right:auto}
.tomb-pile{left:84.766%;top:37.688%;width:7.373%;height:19.430%;right:auto}
.mat-pile{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  cursor:pointer;
}
.mat-pile span,.mat-pile b{display:none}

/* Pocket is already painted in the reference image. */
.pocket-area{
  left:1.758%;top:57.454%;width:84.766%;height:19.430%;
  right:auto;bottom:auto;
  border:0!important;
  background:transparent!important;
  padding:0;
  display:block;
}
.pocket-title{display:none!important}
.pocket-area #pocketCards{
  position:absolute;
  inset:5% 1% 5% 1%;
  height:auto;
  display:flex;
  gap:6px;
  align-items:center;
  overflow:hidden;
}
.pocket-area .test-card{
  width:5.5%;
  height:90%;
  flex:0 0 auto;
}

/* Real cards cover the placeholder art only when a card is actually present. */
.mat-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.test-card{
  width:100%;
  height:100%;
  border:1px solid rgba(40,30,10,.65);
  border-radius:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  box-shadow:0 3px 8px #0005;
  overflow:hidden;
}
.test-card span{font:700 2.4vw 'Metal Mania';color:#111;text-shadow:none}
.test-card b{font-size:8px;color:#111;padding:4px}
.test-card small{font-size:7px;color:#111}
.test-card.clickable{cursor:pointer}
.test-hand .test-card{cursor:pointer;transition:.15s}
.test-hand .test-card:hover{transform:translateY(-12px)}

.hand-area{
  position:absolute;
  left:4%;right:4%;bottom:20px;
  min-height:125px;
  border-top:1px solid #3c3528;
  padding-top:9px;
}
.hand-title{font:600 10px 'Metal Mania';color:#9c8c69;letter-spacing:1.5px}
.hand-title small{font:normal 8px Inter;color:#615c53;margin-left:8px}
.test-hand{display:flex;justify-content:center;gap:7px;margin-top:8px;min-height:100px}
.hand-empty{color:#514d46;font-size:10px;align-self:center;padding-top:35px}

/* Rarity remains available for real cards placed over the zones. */
.rarity-legendary{background:radial-gradient(circle at 50% 30%,#a06c1b,#38250e 36%,#090909 75%)!important}
.rarity-epic{background:radial-gradient(circle at 50% 30%,#693a91,#241334 38%,#090909 75%)!important}
.rarity-rare{background:radial-gradient(circle at 50% 30%,#235f91,#11243a 38%,#090909 75%)!important}
.rarity-common{background:radial-gradient(circle at 50% 30%,#626262,#292929 38%,#090909 75%)!important}
@media(max-width:900px){.playmat{min-height:690px}.mat-card,.soul1,.soul2,.char-slot,.master-slot,.zone-slot{width:72px;height:100px}.test-card{font-size:7px}.c1{left:18%}.c2{left:33%}.c3{left:56%}.c4{left:71%}.deck-pile,.tomb-pile{right:12px;width:70px;height:100px}.energy-slot{left:12px;width:70px}.pocket-area{bottom:145px}.hand-area{bottom:12px}}
@media(max-width:650px){.draw-header{display:block}.draw-controls{margin-top:12px}.playmat{min-width:720px}.playtest-wrap{overflow:auto}.playmat{transform-origin:top left}.section#drawtest{overflow-x:auto}.playtest-info{min-width:720px}.playtest-help{min-width:720px}}

.save-rule{font-size:8px;color:#8b6b39;align-self:center;margin-left:5px;white-space:nowrap}
#pocketCount.invalid{color:#c77868!important}
#pocketCount.valid{color:#86b875!important}
@media(max-width:700px){.save-rule{width:100%;margin-left:0}.deck-actions{flex-wrap:wrap}}

.soul-builder-slot{margin-bottom:18px}
.soul-builder-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #28231a;padding:10px 0;margin-bottom:8px;color:var(--gold2);font-size:10px;letter-spacing:1.5px}
.soul-builder-title small{color:#756d61;font-size:8px}
#soulCoreCount.invalid{color:#c77868!important}
#soulCoreCount.valid{color:#86b875!important}

@media(max-width:900px){
  .playmat{min-width:760px}
  .playtest-info{min-width:760px}
}
@media(max-width:650px){
  .draw-header{display:block}.draw-controls{margin-top:12px}
  .section#drawtest{overflow-x:auto}
  .playmat{min-width:760px}
  .playtest-info{min-width:760px}
  .playtest-help{min-width:760px}
}

@media(max-width:900px){
  .playmat{min-width:760px}
  .playtest-info{min-width:760px}
}
@media(max-width:650px){
  .section#drawtest{overflow-x:auto}
  .playmat{min-width:760px}
  .playtest-info{min-width:760px}
  .playtest-help{min-width:760px}
}

/* ===== HAND FIX: outside the playmat, never overlaps the board ===== */
.playmat{overflow:hidden!important}
.hand-area{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-height:130px!important;
  margin-top:12px!important;
  border:1px solid #28231a!important;
  background:#0d0d0d!important;
  padding:12px!important;
}
.hand-title{
  display:block!important;
  position:relative!important;
  color:#9c8c69!important;
  margin-bottom:8px!important;
}
.test-hand{
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:100px!important;
  height:100px!important;
  margin:0!important;
}
.test-hand .test-card{
  position:relative!important;
  width:70px!important;
  min-width:70px!important;
  max-width:70px!important;
  height:98px!important;
  min-height:98px!important;
  max-height:98px!important;
  flex:0 0 70px!important;
  inset:auto!important;
}
.hand-empty{padding-top:30px!important}

/* Never let overlay card containers inherit board-sized dimensions. */
.mat-slot>.mat-card{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.mat-slot>.mat-card>.test-card{position:relative!important;width:100%!important;height:100%!important;inset:auto!important}

/* Keep the large Pocket area clean; only actual Pocket cards appear inside it. */
.pocket-area #pocketCards .test-card{
  position:relative!important;
  width:70px!important;
  min-width:70px!important;
  height:98px!important;
  min-height:98px!important;
  flex:0 0 70px!important;
  inset:auto!important;
}
@media(max-width:650px){
  .hand-area{min-width:760px!important}
  .test-hand{justify-content:flex-start!important;padding-left:15px!important}
}

/* ===== CARD FIT: every card exactly fills its own playmat slot ===== */
.playmat .mat-slot{
  overflow:hidden!important;
  box-sizing:border-box!important;
  padding:0!important;
  margin:0!important;
}
.playmat .mat-slot > .mat-card{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.playmat .mat-slot > .mat-card > .test-card{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(30,25,15,.65)!important;
  overflow:hidden!important;
}

/* Exact card slots */
.playmat .energy-slot,
.playmat .soul1,
.playmat .soul2,
.playmat .c1,
.playmat .c2,
.playmat .c3,
.playmat .c4,
.playmat .master-slot,
.playmat .zone-slot{
  overflow:hidden!important;
}

/* Cards must not change the size of the slot according to their content. */
.playmat .test-card span,
.playmat .test-card b,
.playmat .test-card small{
  max-width:92%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  box-sizing:border-box;
}

/* Do not use the hand/pocket card dimensions for board cards. */
.playmat .mat-slot .test-card{
  width:100%!important;
  height:100%!important;
  flex:0 0 auto!important;
}

/* Pocket cards are separate cards, not stretched across the pocket zone. */
.playmat .pocket-area #pocketCards{
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
}
.playmat .pocket-area #pocketCards .test-card{
  position:relative!important;
  inset:auto!important;
  width:70px!important;
  height:98px!important;
  min-width:70px!important;
  min-height:98px!important;
  max-width:70px!important;
  max-height:98px!important;
  flex:0 0 70px!important;
}

/* Hand cards are separate from the playmat. */
.hand-area .test-hand .test-card{
  position:relative!important;
  inset:auto!important;
  width:70px!important;
  height:98px!important;
  min-width:70px!important;
  min-height:98px!important;
  max-width:70px!important;
  max-height:98px!important;
  flex:0 0 70px!important;
}

.unit-slot{
  left:80.908%!important;
  top:2.345%!important;
  width:11.230%!important;
  height:13.400%!important;
  background:transparent!important;
  overflow:hidden!important;
}
.unit-slot .mat-card:empty{display:none}

/* ===== ORIENTATION / CARD SIZE ===== */
/* Soul Core cards use the exact dimensions of the two horizontal Soul Core slots. */
.playmat .soul1 > .mat-card,
.playmat .soul2 > .mat-card{
  width:100%!important;
  height:100%!important;
}
.playmat .soul1 > .mat-card > .test-card,
.playmat .soul2 > .mat-card > .test-card{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
}

/* Pocket cards are portrait/vertical and line up left-to-right inside Pocket. */
.playmat .pocket-area #pocketCards{
  left:1%!important;
  right:1%!important;
  top:4%!important;
  bottom:4%!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:hidden!important;
}
.playmat .pocket-area #pocketCards .test-card{
  position:relative!important;
  width:6.5%!important;
  min-width:6.5%!important;
  max-width:6.5%!important;
  height:92%!important;
  min-height:92%!important;
  max-height:92%!important;
  aspect-ratio:7 / 10!important;
  flex:0 0 6.5%!important;
}

/* Keep the cards vertical even when rarity styles are applied. */
.playmat .pocket-area #pocketCards .test-card span{
  font-size:1.8vw!important;
}
.playmat .pocket-area #pocketCards .test-card b{
  font-size:6px!important;
}
.playmat .pocket-area #pocketCards .test-card small{
  font-size:5px!important;
}

/* ===== UNIVERSAL CARD SIZE: 6.3 × 8.8 cm ===== */
.test-card{
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
  aspect-ratio:63 / 88!important;
  box-sizing:border-box!important;
}

/* Board cards keep the requested physical size and are centered in their zones. */
.playmat .mat-slot > .mat-card > .test-card{
  position:absolute!important;
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}

/* Soul Core is horizontal: 8.8 cm wide × 6.3 cm high. */
.playmat .soul1 > .mat-card > .test-card,
.playmat .soul2 > .mat-card > .test-card{
  width:88mm!important;
  height:63mm!important;
  min-width:88mm!important;
  min-height:63mm!important;
  max-width:88mm!important;
  max-height:63mm!important;
  aspect-ratio:88 / 63!important;
}

/* Pocket remains portrait and each card is 6.3 × 8.8 cm. */
.playmat .pocket-area #pocketCards .test-card{
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
}

/* Hand cards are also exactly 6.3 × 8.8 cm. */
.hand-area .test-hand .test-card{
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
}

.simple-draw-header{align-items:center}
.simple-draw-info{margin-top:12px}
.draw-area{
  display:flex;
  gap:28px;
  align-items:flex-start;
  background:#0c0c0c;
  border:1px solid #29241d;
  padding:28px;
  min-height:520px;
}
.draw-deck-panel{
  width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  position:sticky;
  top:20px;
}
.draw-deck{
  width:126px;
  height:176px;
  background:linear-gradient(145deg,#172b40,#08111d);
  border:1px solid #8d6e34;
  box-shadow:0 12px 28px #0009;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  user-select:none;
}
.draw-deck span{
  font:600 22px 'Metal Mania';
  color:#caa85b;
  letter-spacing:2px;
}
.draw-deck b{font-size:11px;color:#9a9388;margin-top:10px}
.draw-pile-btn{font-size:9px;padding:10px 12px}
.draw-hand-panel{
  flex:1;
  min-width:0;
  border-left:1px solid #29241d;
  padding-left:28px;
}
.draw-hand-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:#c8a65b;
  font:600 12px 'Metal Mania';
  letter-spacing:1.5px;
  margin-bottom:15px;
}
.draw-hand-title small{font:normal 9px Inter;color:#686158;letter-spacing:0}
.draw-test-hand{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:12px!important;
  min-height:400px!important;
  height:auto!important;
  margin:0!important;
}
.draw-test-hand .test-card{
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
  position:relative!important;
  inset:auto!important;
  cursor:pointer;
}
.draw-test-hand .test-card:hover{
  transform:translateY(-7px);
  border-color:#c5a65d;
}
.draw-tomb{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
  padding:10px 14px;
  border:1px solid #29241d;
  background:#101010;
  color:#6d665d;
  font-size:9px;
}
.draw-tomb b{color:#c8a65b;font-size:11px}
@media(max-width:800px){
  .draw-area{display:block;min-height:0}
  .draw-deck-panel{position:relative;width:auto;flex-direction:row;justify-content:flex-start;margin-bottom:25px}
  .draw-hand-panel{border-left:0;border-top:1px solid #29241d;padding-left:0;padding-top:20px}
}

/* ===== DRAWED CARDS MUST ALWAYS BE VISIBLE ===== */
#drawtest #testHand{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:20!important;
  overflow:visible!important;
}
#drawtest #testHand .test-card{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:21!important;
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
  background-color:#171717!important;
  color:#ddd!important;
  border:1px solid #8f7137!important;
  box-sizing:border-box!important;
}
#drawtest #testHand .test-card span,
#drawtest #testHand .test-card b,
#drawtest #testHand .test-card small{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
#drawtest #testHand .test-card span{
  font-size:28px!important;
  color:#d7b45f!important;
}
#drawtest #testHand .test-card b{
  color:#e4ded2!important;
  font-size:11px!important;
  margin-top:8px!important;
}
#drawtest #testHand .test-card small{
  color:#9b9388!important;
  font-size:8px!important;
}
#drawtest .draw-hand-panel{
  min-height:430px!important;
  overflow:visible!important;
}

/* ===== DRAW TEST: FACE-UP CARDS ===== */
#drawtest #testHand{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-height:430px!important;
  height:auto!important;
  overflow:visible!important;
  padding:4px!important;
}
#drawtest #testHand .test-card{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  width:63mm!important;
  height:88mm!important;
  min-width:63mm!important;
  min-height:88mm!important;
  max-width:63mm!important;
  max-height:88mm!important;
  flex:0 0 63mm!important;
  box-sizing:border-box!important;
  border:1px solid #a7833e!important;
  background:#171717!important;
  color:#eee!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
#drawtest #testHand .test-card span{
  display:block!important;
  font-size:30px!important;
  color:#d6b25b!important;
}
#drawtest #testHand .test-card b{
  display:block!important;
  color:#eee!important;
  font-size:11px!important;
  margin-top:10px!important;
}
#drawtest #testHand .test-card small{
  display:block!important;
  color:#aaa!important;
  font-size:8px!important;
  margin-top:5px!important;
}
#drawtest #testHand .test-card:hover{
  transform:translateY(-8px)!important;
  border-color:#d4b35f!important;
}

/* Card detail popup */
.draw-card-detail{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.draw-card-detail-inner{
  display:flex;
  align-items:center;
  gap:30px;
  max-width:760px;
  background:#111;
  border:1px solid #6f572c;
  padding:24px;
  position:relative;
}
.draw-card-close{
  position:absolute;
  right:8px;
  top:5px;
  border:0;
  background:none;
  color:#c9a75a;
  font-size:28px;
  cursor:pointer;
}
.draw-preview-card{
  width:63mm!important;
  height:88mm!important;
  flex:0 0 63mm;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border:1px solid #9a793a;
}
.draw-preview-card span{font:700 35px 'Metal Mania';color:#d7b45f}
.draw-preview-card b{font-size:13px;color:#eee;margin-top:12px}
.draw-preview-card small{font-size:9px;color:#aaa;margin-top:6px}
.draw-detail-text{max-width:360px}
.draw-detail-text h3{font:600 24px 'Metal Mania';color:#ddd;margin:7px 0 12px}
.draw-detail-text p{font-size:12px;color:#aaa;line-height:1.7}
@media(max-width:650px){
  #drawtest #testHand{min-height:300px!important}
  .draw-card-detail-inner{display:block}
  .draw-detail-text{margin-top:18px}
}

/* ===== DRAW TEST — SMALLER HAND CARDS ===== */
#drawtest #testHand .test-card{
  width:45mm!important;
  height:63mm!important;
  min-width:45mm!important;
  min-height:63mm!important;
  max-width:45mm!important;
  max-height:63mm!important;
  flex:0 0 45mm!important;
}
#drawtest #testHand .test-card span{
  font-size:24px!important;
}
#drawtest #testHand .test-card b{
  font-size:10px!important;
}
#drawtest #testHand .test-card small{
  font-size:7px!important;
}

/* ===== SUPPLY ===== */
.supply-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.supply-header h1{font:600 32px 'Metal Mania';margin:6px 0}.supply-header p{font-size:12px;color:var(--muted)}
.supply-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;border-bottom:1px solid #2a251e;padding-bottom:12px}
.supply-tabs{display:flex;gap:5px}.supply-tab{background:#111;color:#777;border:1px solid #30291f;padding:10px 18px;font:600 9px 'Metal Mania';letter-spacing:1px;cursor:pointer}
.supply-tab.active{color:#d0ad59;border-color:#82662f;background:#18140e}.supply-search{width:260px;background:#0e0e0e;border:1px solid #30291f;color:#ddd;padding:11px 13px;font-size:11px}
.supply-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.supply-card{background:#101010;border:1px solid #29241d;overflow:hidden;transition:.18s}.supply-card:hover{border-color:#8b6b32;transform:translateY(-3px)}
.supply-image{height:220px;position:relative;background:#090909;overflow:hidden}.supply-image img{width:100%;height:100%;object-fit:cover;display:block}
.supply-type{position:absolute;top:10px;left:10px;background:#0b0b0bdd;border:1px solid #7b602e;color:#d4b25e;padding:6px 9px;font:600 8px 'Metal Mania';letter-spacing:1px}
.supply-art{position:absolute;inset:0;display:grid;place-items:center}.supply-art span{font:600 50px 'Metal Mania';color:#c9a85c}.playmat-art{background:radial-gradient(circle at 50% 35%,#7a5420,#17120c 35%,#050505 70%)}.sleeve-art{background:radial-gradient(circle at 50% 30%,#54236a,#17101e 40%,#050505 72%)}
.supply-body{padding:15px}.supply-body h3{font:600 17px 'Metal Mania';color:#e5dfd2;margin:0 0 7px}.supply-body p{font-size:10px;color:#716c63;line-height:1.6;min-height:34px;margin:0}
.supply-footer{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:12px;border-top:1px solid #25211b}.supply-footer strong{font:600 13px 'Metal Mania';color:#cba75a}
.supply-detail{background:transparent;border:1px solid #5c4927;color:#ad8b49;padding:7px 10px;font:600 8px 'Metal Mania';cursor:pointer}
.supply-empty{text-align:center;padding:80px 20px;border:1px dashed #302a20;color:#777}.supply-empty div{font:30px 'Metal Mania';color:#8c6b34}
.supply-modal{position:fixed;inset:0;z-index:1000;background:#000b;display:flex;align-items:center;justify-content:center;padding:20px}.supply-modal-box{position:relative;width:min(560px,100%);background:#111;border:1px solid #6c542a;padding:25px}
.supply-close{position:absolute;right:10px;top:5px;background:none;border:0;color:#b28e4a;font-size:28px}.supply-modal-box h2{font:600 25px 'Metal Mania';color:#ddd;margin:6px 0 20px}
.supply-form{display:grid;gap:12px}.supply-form label{display:grid;gap:6px;color:#8f877b;font-size:10px}.supply-form input,.supply-form select,.supply-form textarea{background:#0b0b0b;border:1px solid #322b21;color:#ddd;padding:10px;font:inherit}
.supply-save{margin-top:16px;width:100%}
@media(max-width:900px){.supply-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.supply-header{display:block}.supply-toolbar{display:block}.supply-search{width:100%;margin-top:10px}.supply-grid{grid-template-columns:1fr}}


.set-tag{color:#d4b25e!important;border-color:#6b5228!important}#setFilter,#deckSetFilter{min-width:110px}


/* Collection wishlist */
.collection-header{align-items:center}
.collection-progress{
  min-width:150px;
  padding:14px 18px;
  border:1px solid rgba(197,158,74,.35);
  background:rgba(197,158,74,.05);
  text-align:center;
  color:#d8b866;
  font-size:22px;
}
.collection-progress small{display:block;color:#8e8069;font-size:11px;margin-top:3px}
.collection-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) 150px 170px 170px;
  gap:10px;
  margin:22px 0;
}
.collection-toolbar select,
.collection-toolbar input{min-height:44px}
.collection-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.collection-card{
  border:1px solid rgba(255,255,255,.10);
  background:#11100f;
  transition:.18s ease;
  overflow:hidden;
}
.collection-card:hover{border-color:rgba(197,158,74,.55);transform:translateY(-2px)}
.collection-card.wanted{border-color:rgba(197,158,74,.8);box-shadow:0 0 0 1px rgba(197,158,74,.12)}
.collection-card-art{
  height:230px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.collection-card-art .card-symbol{font-size:68px}
.collection-set{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:4px 7px;
  border:1px solid rgba(212,178,94,.55);
  color:#d4b25e;
  font-size:10px;
}
.collection-card-info{padding:14px}
.collection-card-info h3{margin:10px 0 4px}
.collection-card-info p{margin:0 0 12px;color:#827968;font-size:12px}
.wanted-btn{
  width:100%;
  padding:10px 8px;
  border:1px solid #5e4a27;
  background:transparent;
  color:#cdb16b;
  cursor:pointer;
}
.wanted-btn:hover,.wanted-btn.checked{background:rgba(197,158,74,.12);border-color:#b9954d}
@media(max-width:1000px){
  .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .collection-toolbar{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-toolbar{grid-template-columns:1fr}
  .collection-progress{min-width:0}
}


.collection-add-btn{
  width:100%;
  margin-top:10px;
  padding:9px 8px;
  border:1px solid #5e4a27;
  background:rgba(197,158,74,.05);
  color:#cdb16b;
  cursor:pointer;
  font-size:11px;
}
.collection-add-btn:hover,
.collection-add-btn.added{
  border-color:#b9954d;
  background:rgba(197,158,74,.14);
}
.collection-card-info .wanted-btn{
  margin-top:6px;
}

.deck-add-btn{
  width:100%;
  margin-top:7px;
  padding:9px 8px;
  border:1px solid #765d2c;
  background:rgba(120,92,35,.10);
  color:#e0c273;
  cursor:pointer;
  font-size:11px;
}
.deck-add-btn:hover{background:rgba(197,158,74,.18);border-color:#c19b4d}
.add-deck-modal-inner{max-width:520px}
.add-deck-modal-inner h3{margin:8px 0}
.add-deck-modal-inner p{color:#8f8371}
.deck-choice-list{display:grid;gap:8px;margin-top:18px;max-height:55vh;overflow:auto}
.deck-choice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:13px 15px;
  border:1px solid #4e4028;
  background:#11100e;
  color:#e0c273;
  cursor:pointer;
  text-align:left;
}
.deck-choice:hover{border-color:#c19b4d;background:rgba(197,158,74,.10)}
.deck-choice small{color:#8e806d}
.no-decks{padding:20px;border:1px dashed #4e4028;color:#8e806d}

.add-deck-quantity{
  margin:16px 0 4px;
  padding:14px;
  border:1px solid #3e3424;
  background:#0d0c0b;
}
.add-deck-quantity label{
  display:block;
  color:#d7b865;
  font-size:12px;
  margin-bottom:8px;
}
.quantity-control{
  display:flex;
  align-items:center;
  gap:6px;
}
.quantity-control button{
  width:42px;
  height:40px;
  border:1px solid #765d2c;
  background:#15120d;
  color:#e0c273;
  cursor:pointer;
  font-size:18px;
}
.quantity-control button:hover{background:rgba(197,158,74,.15)}
.quantity-control input{
  width:90px;
  height:40px;
  text-align:center;
  border:1px solid #765d2c;
  background:#090909;
  color:#eee;
  font-size:16px;
}
.add-deck-quantity small{
  display:block;
  margin-top:7px;
  color:#80745f;
}

/* Redesigned add-to-deck modal */
.deck-add-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(7px);
}
.deck-add-modal{
  width:min(900px,94vw);
  max-height:90vh;
  overflow:auto;
  background:#0d0d0c;
  border:1px solid rgba(205,168,83,.55);
  box-shadow:0 24px 80px rgba(0,0,0,.65);
  padding:30px;
  position:relative;
}
.deck-add-close{
  position:absolute;
  top:14px;
  right:17px;
  border:0;
  background:none;
  color:#d6b35e;
  font-size:27px;
  cursor:pointer;
}
.deck-add-top{padding-right:45px;border-bottom:1px solid #29251d;padding-bottom:18px}
.deck-add-top h2{margin:3px 0 5px;font-size:30px}
.deck-add-top p{margin:0;color:#8c806c}
.deck-add-card-preview{
  display:flex;
  gap:18px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid #29251d;
}
.deck-mini-card{
  width:82px;
  height:114px;
  flex:none;
  border:1px solid #b89449;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#15120e;
}
.deck-mini-card span{font-size:40px;color:#d7b35b}
.deck-card-type{font-size:10px;letter-spacing:.12em;color:#a98a4a;text-transform:uppercase}
.deck-add-card-preview h3{font-size:22px;margin:5px 0}
.deck-add-card-preview p{margin:0;color:#77705f;font-size:12px}
.deck-add-body{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  gap:20px;
  padding-top:22px;
}
.section-label{
  font-size:11px;
  letter-spacing:.12em;
  color:#d4b05a;
  text-transform:uppercase;
  margin-bottom:9px;
}
.deck-select-list{display:grid;gap:8px;max-height:300px;overflow:auto;padding-right:3px}
.deck-select-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  text-align:left;
  border:1px solid #332c20;
  background:#13120f;
  color:#e0c274;
  cursor:pointer;
  transition:.15s;
}
.deck-select-card:hover{border-color:#8f7035;background:#191711}
.deck-select-card.selected{
  border-color:#c5a04f;
  background:linear-gradient(90deg,rgba(197,160,79,.14),rgba(197,160,79,.04));
  box-shadow:inset 3px 0 #c5a04f;
}
.deck-select-main{display:flex;flex-direction:column;gap:4px}
.deck-select-main strong{font-size:15px}
.deck-select-main small{font-size:10px;color:#827763}
.deck-selected-mark{font-size:19px;color:#d7b45e}
.deck-quantity-box{
  border:1px solid #332c20;
  background:#11100e;
  padding:18px;
  align-self:start;
}
.quantity-control.large{display:grid;grid-template-columns:42px 1fr 42px;gap:6px}
.quantity-control.large button{width:auto}
.quantity-control.large input{width:100%}
.quantity-limit{font-size:11px;color:#827763;margin-top:8px}
.confirm-deck-add{
  width:100%;
  margin-top:18px;
  min-height:44px;
  border:1px solid #a88239;
  background:#b28b40;
  color:#100e0a;
  font-weight:600;
  cursor:pointer;
}
.confirm-deck-add:disabled{opacity:.35;cursor:not-allowed}
.no-decks{padding:22px;border:1px dashed #4a3b25;color:#817663}
.app-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10000;
  padding:13px 18px;
  background:#17140f;
  border:1px solid #a9863e;
  color:#e3c475;
  box-shadow:0 10px 35px #000;
}
@media(max-width:700px){
  .deck-add-overlay{padding:10px}
  .deck-add-modal{padding:20px;width:96vw}
  .deck-add-body{grid-template-columns:1fr}
  .deck-select-list{max-height:220px}
}

/* Real card artwork */
.card-real-image,.collection-real-image,.detail-real-image,.mini-real-image,.special-real-image,.picker-real-image,.test-real-image,.draw-real-image{
  width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2;
}
.card-art .rarity-orb,.collection-card-art .rarity-orb{z-index:3}
.detail-real-image{min-height:470px;object-fit:contain;background:#080808}
.detail-placeholder{font-size:120px;color:#d6b25e;text-shadow:0 0 50px #9a711e}
.mini-real-image,.special-real-image,.picker-real-image{object-fit:cover}
.test-real-image{position:absolute;inset:0}
.draw-real-image{object-fit:contain;background:#080808}

/* Real deck cover/card images */
.deck-cover-real-image{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}.cover-option-image{width:100%;height:92px;object-fit:cover;display:block;margin-bottom:6px}.cover-option:has(.cover-option-image){justify-content:flex-start;padding:6px;overflow:hidden}.cover-option:has(.cover-option-image) b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== BLACK SELECT DROPDOWNS ===== */
select{
  background:#101010!important;
  color:#eee!important;
  color-scheme:dark;
}
select option,
select optgroup{
  background:#101010!important;
  color:#eee!important;
}
select option:checked,
select option:hover{
  background:#1b1710!important;
  color:#f2d48a!important;
}
/* เว้นบรรทัดในข้อความ Ability */
#detailAbility {
  white-space: pre-line !important;
  line-height: 1.8;
}
.ability-icon-Counter {
  width: 50px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-E {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.ability-icon-Pocket {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  position: relative;
  top: -2px; /* ขยับขึ้น */
  margin: 0 4px;
}
.ability-icon-Dot {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.siteLogo{
   width: 50px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-OpenZone {
  width: 70px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-Forever {
  width: 50px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-Activat{
  width: 46px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-PerTurn {
  width: 44px;
  height: 45px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-Block {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-Enter {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-Peek {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}

#detailAbilityRight {
  position: relative;
  padding-top: 20px;
}

.ability-icon-ZoneOpen1 {
  width: 150px;
  height: 150px;
  object-fit: contain;
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 1;
}
.ability-icon-ES {
  width: 80px;
  height: 80px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px;
}
.ability-icon-ZoneOpen2 {
  width: 150px;
  height: 150px;
  object-fit: contain;
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 1;
}
/* ===== REAL LOGO ===== */
.brand{min-height:72px}
.brand #siteLogo{display:block;width:300px;max-width:100%;height:auto;max-height:100px;object-fit:contain}
.brand.logo-fallback::before{content:"SOULVAULT";display:block;font:700 20px 'Metal Mania';letter-spacing:1.8px;color:#eee9df}
.brand.logo-fallback::after{content:"CARD GAME";display:block;font:8px Inter;letter-spacing:2px;color:#8e897f;margin-top:3px}

/* ===== REAL DECK COVERS ===== */
.deck-cover{position:relative}
.deck-cover-real-image{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;z-index:2}
.cover-symbol-overlay{position:absolute!important;z-index:4;bottom:8px;left:8px;font:700 18px 'Metal Mania'!important;color:#fff!important;text-shadow:0 2px 8px #000!important}
.library-cover{position:relative;overflow:hidden}
.library-cover-real-image{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
/* ===== SAVED DECK COVER RARITY SHINE ===== */

.library-cover::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-100%;
  width:45%;
  height:220%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );

  transform:skewX(-20deg);
  z-index:10;
  pointer-events:none;
  mix-blend-mode:screen;

  animation:rainbowShine 2.5s ease-in-out infinite;
}


@keyframes rainbowShine{
  0%{left:-100%}
  55%,100%{left:150%}
}
}

/* LEGENDARY — ทอง */
.library-cover.rarity-legendary::before{
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,190,40,.08) 42%,
    rgba(255,245,180,.8) 50%,
    rgba(255,170,20,.2) 58%,
    transparent 70%
  );
}
.leader-ability-box p{
  position: relative;
}
/* EPIC — ม่วง */
.library-cover.rarity-epic::before{
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(170,80,255,.08) 42%,
    rgba(245,190,255,.8) 50%,
    rgba(120,60,255,.2) 58%,
    transparent 70%
  );
}

/* RARE — น้ำเงิน */
.library-cover.rarity-rare::before{
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(50,150,255,.08) 42%,
    rgba(190,235,255,.8) 50%,
    rgba(40,120,255,.2) 58%,
    transparent 70%
  );
}

/* COMMON — แสงอ่อน */
.library-cover.rarity-common::before{
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.03) 42%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.04) 58%,
    transparent 70%
  );
}
.cover-option-image{width:100%;height:125px;object-fit:cover;display:block;margin-bottom:7px}
.cover-option:has(.cover-option-image){justify-content:flex-start;padding:6px;overflow:hidden}
.cover-option:has(.cover-option-image) b{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-empty{grid-column:1/-1;border:1px dashed #3a3020;padding:35px;text-align:center;color:#777}

/* ===== MANUAL PLAYTEST ===== */
.manual-playtest{background:#090909;border:1px solid #29241d;padding:14px}
.manual-playmat{position:relative;width:100%;aspect-ratio:16/8.5;min-height:560px;overflow:hidden;border:1px solid #4a3b23;background:
  radial-gradient(circle at 50% 45%,#17130d 0,#0b0b0b 55%,#070707 100%);
}
.manual-playmat:before{content:"";position:absolute;inset:18px;border:1px solid #2e271d;border-radius:12px;pointer-events:none}
.playmat-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5c554c;font-size:12px;letter-spacing:1px;pointer-events:none;text-align:center}
.board-piles{position:absolute;right:22px;top:22px;z-index:5;display:flex;gap:10px}
.board-pile{width:88px;height:124px;border:1px solid #70572a;background:linear-gradient(145deg,#151515,#0a0a0a);display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 8px 24px #000}
.board-pile span{font:600 15px 'Metal Mania';color:#c9a85c;letter-spacing:1px}
.board-pile b{font-size:10px;color:#777;margin-top:8px}
.tomb-pile-manual{border-color:#493b2a}
.test-board-cards{position:absolute;inset:0;z-index:3}
.test-board-cards .test-card{position:absolute!important;width:96px!important;height:134px!important;min-width:96px!important;min-height:134px!important;max-width:96px!important;max-height:134px!important;transform:none!important;cursor:grab;box-shadow:0 8px 22px #000;user-select:none}
.test-board-cards .test-card:active{cursor:grabbing}
.test-board-cards .test-card.board-horizontal{
  transform:rotate(90deg)!important;
  transform-origin:center center!important;
}
.test-board-cards .board-rotate-btn{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  z-index:20!important;
  width:25px!important;
  height:25px!important;
  padding:0!important;
  border:1px solid rgba(217,173,82,.8)!important;
  border-radius:50%!important;
  background:rgba(8,8,8,.82)!important;
  color:#f2d48a!important;
  font-size:16px!important;
  line-height:23px!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:0 2px 8px #000!important;
}
.test-board-cards .board-rotate-btn:hover{
  background:#241b0c!important;
  border-color:#f2d48a!important;
}

.manual-hand-panel{border-top:1px solid #29241d;margin-top:14px;padding:14px 4px 2px;min-height:190px}
.manual-hand-panel .draw-test-hand{display:flex!important;flex-wrap:wrap!important;gap:10px!important;min-height:145px!important;align-items:flex-end!important}
.manual-hand-panel .draw-test-hand .test-card{position:relative!important;inset:auto!important;width:76px!important;height:106px!important;min-width:76px!important;min-height:106px!important;max-width:76px!important;max-height:106px!important;flex:0 0 76px!important;cursor:grab}
.manual-hand-panel .draw-test-hand .test-card:hover{transform:translateY(-8px)!important}
.playtest-actions{display:flex;align-items:center;gap:15px;margin-top:12px;color:#70695f;font-size:9px}
@media(max-width:900px){
  .manual-playmat{min-height:500px}
  .test-board-cards .test-card{width:82px!important;height:114px!important;min-width:82px!important;min-height:114px!important}
}
@media(max-width:650px){
  .manual-playmat{min-width:760px;min-height:500px}
  .manual-hand-panel{min-width:760px}
  .manual-playtest{overflow-x:auto}
}
.home-logo{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:14px;
}

.home-logo img{
  width:300px;
  height:auto;
  object-fit:contain;
}
.home-logo2{
  width:100%;
  min-height:175px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  margin-top:0;
  margin-bottom:18px;
}

.home-logo2 img{
  width:132px;
  height:132px;
  object-fit:contain;
  display:block;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.8)) drop-shadow(0 0 12px rgba(214,178,94,.22));
  transform:translateY(4px);
}

.home-logo2 span{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:auto;
  max-width:90%;
  margin-top:8px;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:16px;
  line-height:1.4;
  text-shadow:0 2px 8px #000, 0 0 4px #000;
  z-index:3;
}

/* ===== CARD VARIANTS + DECK CARD DETAILS ===== */
.variant-switch{
  display:flex;
  align-items:center;
  gap:6px;
  margin:9px 0 7px;
  color:#817b71;
  font-size:8px;
  letter-spacing:.5px;
}
.variant-switch span{white-space:nowrap}
.variant-select{
  flex:1;
  min-width:0;
  height:28px;
  background:#090909;
  border:1px solid #3a3020;
  color:#d9c58f;
  padding:0 7px;
  font-size:9px;
  outline:none;
}
.variant-select:focus{border-color:#80632d}
.deck-card-clickable{cursor:pointer}
.deck-row.deck-card-clickable:hover,
.special-card.deck-card-clickable:hover{
  border-color:#765a2b;
  background:#17130d;
}
.deck-row.deck-card-clickable .qty{cursor:default}
.deck-row.deck-card-clickable .mini-art,
.special-card.deck-card-clickable .special-art{pointer-events:none}
@media(max-width:600px){
  .variant-switch{font-size:7px}
  .variant-select{font-size:8px;height:27px}
}

/* ===== CARD DETAIL STATS + ROUNDED CARD ART ===== */
.detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.detail-grid div{min-width:0;}
.detail-grid b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.card-real-image,.collection-real-image,.detail-real-image,.mini-real-image,.special-real-image,.picker-real-image,.test-real-image,.draw-real-image{
  border-radius:10px;
}
.card-art,.collection-card-art,.detail-image,.mini-art,.special-art,.picker-art,.test-card,.draw-preview-card,.cover-option{
  overflow:hidden;
  border-radius:10px;
}

@media(max-width:600px){
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ===== MASTER: TWO ABILITIES ===== */
.master-abilities{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:0;}
.master-ability-box{border:1px solid #28231a;background:#0d0d0d;padding:14px;min-width:0;}
.master-ability-box h3{margin:0 0 10px;font-size:9px;letter-spacing:1.8px;color:var(--gold);}
.master-ability-box p{margin:0;min-height:70px;white-space:pre-line;line-height:1.8;}
@media(max-width:600px){.master-abilities{grid-template-columns:1fr;}}


/* ===== MASCOT HERO: CENTRAL LOGO REMOVED ===== */
.home-logo{display:none!important;}
.hero{padding-top:28px;padding-bottom:24px;}
.home-logo2{min-height:175px;margin-top:0;margin-bottom:10px;}
.home-logo2 img{width:150px;height:150px;transform:none;}
.home-logo2 span{margin-top:6px;}
@media(max-width:720px){
  .hero{padding-top:24px;padding-bottom:20px;}
  .home-logo2{min-height:155px;}
  .home-logo2 img{width:130px;height:130px;}
}

/* ===== BALANCED HERO RING ===== */
.hero:after{
  display:none;
}
@media(max-width:720px){
  .hero:after{
    width:145px;
    height:145px;
    right:-45px;
    top:50%;
    transform:translateY(-50%);
    box-shadow:0 0 0 14px #211a0e,0 0 0 15px #3a2c18;
  }
}

/* ===== PLAY TEST INITIAL SPECIAL CARD LAYOUT ===== */
.test-special-card{
  position:absolute!important;
  z-index:4!important;
  pointer-events:auto;
}
.test-special-card .test-card{
  position:relative!important;
  width:96px!important;
  height:134px!important;
  min-width:96px!important;
  min-height:134px!important;
  max-width:96px!important;
  max-height:134px!important;
  box-shadow:0 8px 22px #000!important;
  cursor:pointer!important;
}
/* Master: centered on the battlefield. */
.test-master-card{
  left:50%!important;
  top:47%!important;
  transform:translate(-50%,-50%)!important;
}
/* Zone: directly below Master. */
.test-zone-card{
  left:50%!important;
  top:73%!important;
  transform:translate(-50%,-50%)!important;
}
/* Soul Core: horizontal row centered above Master. */
.test-soul-core-cards{
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:12%!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:max-content!important;
  max-width:78%!important;
  pointer-events:auto!important;
}
.test-soul-core-cards .test-card{
  position:relative!important;
  width:82px!important;
  height:59px!important;
  min-width:82px!important;
  min-height:59px!important;
  max-width:82px!important;
  max-height:59px!important;
  flex:0 0 82px!important;
  transform:none!important;
  box-shadow:0 6px 16px #000!important;
  cursor:pointer!important;
}
@media(max-width:900px){
  .test-special-card .test-card{width:82px!important;height:114px!important;min-width:82px!important;min-height:114px!important;max-width:82px!important;max-height:114px!important}
  .test-soul-core-cards{gap:5px!important;max-width:82%!important}
  .test-soul-core-cards .test-card{width:68px!important;height:49px!important;min-width:68px!important;min-height:49px!important;max-width:68px!important;max-height:49px!important;flex-basis:68px!important}
}

/* ===== PLAY TEST SPECIAL CARD INTERACTIONS ===== */
.special-rotate-btn{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  z-index:30!important;
  width:25px!important;
  height:25px!important;
  padding:0!important;
  border:1px solid rgba(217,173,82,.8)!important;
  border-radius:50%!important;
  background:rgba(8,8,8,.82)!important;
  color:#f2d48a!important;
  font-size:16px!important;
  line-height:23px!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:0 2px 8px #000!important;
}
.special-rotate-btn:hover{
  background:#241b0c!important;
  border-color:#f2d48a!important;
}

/* Soul Core is a single horizontal pile. Click it to place one card under Zone. */
.test-soul-core-cards{
  width:110px!important;
  height:78px!important;
  left:50%!important;
  top:10%!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
}
.test-soul-core-cards .test-card{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:96px!important;
  height:68px!important;
  min-width:96px!important;
  min-height:68px!important;
  max-width:96px!important;
  max-height:68px!important;
  transform:translate(-50%,-50%)!important;
  flex:none!important;
  cursor:pointer!important;
  border-radius:8px!important;
}
.soul-core-pile-count{
  position:absolute!important;
  right:-18px!important;
  bottom:-4px!important;
  z-index:20!important;
  padding:4px 8px!important;
  border:1px solid #6f572b!important;
  border-radius:12px!important;
  background:rgba(8,8,8,.9)!important;
  color:#e3c46f!important;
  font-size:9px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.soul-core-empty{
  width:96px!important;
  height:68px!important;
  border:1px dashed #4b3b22!important;
  border-radius:8px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  color:#756b5b!important;
  font-size:8px!important;
  text-align:center!important;
}
.soul-core-empty b{color:#4e493f!important;font-size:9px!important;margin-top:3px!important}

/* Soul Core cards placed under Zone form a compact visible stack. */
.test-soul-core-under-zone{
  position:absolute!important;
  left:50%!important;
  top:82%!important;
  transform:translateX(-50%)!important;
  width:110px!important;
  min-height:100px!important;
  z-index:4!important;
  pointer-events:auto!important;
}
.test-soul-core-under-zone .test-card{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  width:72px!important;
  height:100px!important;
  min-width:72px!important;
  min-height:100px!important;
  max-width:72px!important;
  max-height:100px!important;
  transform:translateX(-50%)!important;
  box-shadow:0 5px 14px #000!important;
  cursor:pointer!important;
}
.test-soul-core-under-zone .test-card:nth-of-type(2){top:4px!important}
.test-soul-core-under-zone .test-card:nth-of-type(3){top:8px!important}
.test-soul-core-under-zone .test-card:nth-of-type(4){top:12px!important}
.test-soul-core-under-zone .test-card:nth-of-type(5){top:16px!important}
.test-soul-core-under-zone .test-card:nth-of-type(6){top:20px!important}
.test-soul-core-under-zone .test-card:nth-of-type(7){top:24px!important}
.soul-under-count{
  position:absolute!important;
  left:50%!important;
  top:106px!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
  padding:5px 9px!important;
  border:1px solid #6f572b!important;
  border-radius:12px!important;
  background:rgba(8,8,8,.92)!important;
  color:#e3c46f!important;
  font-size:9px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
@media(max-width:900px){
  .test-soul-core-cards{top:9%!important;width:92px!important;height:66px!important}
  .test-soul-core-cards .test-card{width:82px!important;height:58px!important;min-width:82px!important;min-height:58px!important;max-width:82px!important;max-height:58px!important}
  .test-soul-core-under-zone{top:82%!important}
  .test-soul-core-under-zone .test-card{width:62px!important;height:86px!important;min-width:62px!important;min-height:86px!important;max-width:62px!important;max-height:86px!important}
  .soul-under-count{top:92px!important}
}


/* ===== DECK SHARING / IMPORT ===== */
.deck-actions{flex-wrap:wrap;align-items:center}
.deck-actions .gold-btn,.deck-actions .danger-btn{white-space:nowrap}
.deck-link-modal{width:min(720px,100%)}
.deck-link-input{
  width:100%;resize:vertical;min-height:105px;margin-top:15px;
  background:#090909;border:1px solid #33291b;color:#eee;
  padding:12px;font:12px Inter,Arial,sans-serif;outline:none;
}
.deck-link-input:focus{border-color:#8a6b31;box-shadow:0 0 0 1px #8a6b31}
.deck-link-actions{display:flex;gap:8px;margin-top:12px}
@media(max-width:600px){
  .deck-actions .gold-btn,.deck-actions .danger-btn{flex:1;min-width:140px}
}


/* ===== SOUL CORE STACKED UNDER ZONE ===== */
.test-zone-card{
  z-index:10!important;
}
.test-soul-core-under-zone{
  left:50%!important;
  top:73%!important;
  transform:translate(-50%,-50%)!important;
  width:96px!important;
  height:134px!important;
  min-height:134px!important;
  z-index:5!important;
  pointer-events:none!important;
}
.test-soul-core-under-zone .test-card{
  width:96px!important;
  height:134px!important;
  min-width:96px!important;
  min-height:134px!important;
  max-width:96px!important;
  max-height:134px!important;
  border-radius:8px!important;
  pointer-events:none!important;
  opacity:.98!important;
}
.test-soul-core-under-zone .test-card:nth-of-type(2){top:3px!important}
.test-soul-core-under-zone .test-card:nth-of-type(3){top:6px!important}
.test-soul-core-under-zone .test-card:nth-of-type(4){top:9px!important}
.test-soul-core-under-zone .test-card:nth-of-type(5){top:12px!important}
.test-soul-core-under-zone .test-card:nth-of-type(6){top:15px!important}
.test-soul-core-under-zone .test-card:nth-of-type(7){top:18px!important}
.zone-soulcore-badge{
  position:absolute!important;
  left:50%!important;
  bottom:-12px!important;
  transform:translateX(-50%)!important;
  z-index:40!important;
  padding:4px 9px!important;
  border:1px solid #6f572b!important;
  border-radius:12px!important;
  background:rgba(8,8,8,.94)!important;
  color:#e3c46f!important;
  font-size:9px!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
.zone-soulcore-info{
  position:absolute!important;
  left:50%!important;
  top:calc(100% + 16px)!important;
  transform:translateX(-50%)!important;
  z-index:50!important;
  min-width:120px!important;
  padding:8px 12px!important;
  border:1px solid #6f572b!important;
  border-radius:8px!important;
  background:rgba(8,8,8,.96)!important;
  box-shadow:0 8px 20px #000!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
  pointer-events:none!important;
}
.zone-soulcore-info b{font-size:9px!important;color:#c9a85c!important;letter-spacing:1px!important}
.zone-soulcore-info span{font-size:12px!important;color:#fff!important;font-weight:700!important}
@media(max-width:900px){
  .test-soul-core-under-zone{width:82px!important;height:114px!important;min-height:114px!important}
  .test-soul-core-under-zone .test-card{width:82px!important;height:114px!important;min-width:82px!important;min-height:114px!important;max-width:82px!important;max-height:114px!important}
  .zone-soulcore-badge{bottom:-11px!important}
}
.tag.rarity-common{
  color:#bdbdbd;
  border-color:#666;
}

.tag.rarity-rare{
  color:#4da6ff;
  border-color:#2675b8;
}

.tag.rarity-epic{
  color:#c56cff;
  border-color:#8235a8;
}

.tag.rarity-legendary{
  color:#ffd45c;
  border-color:#a87818;
}
.tag.rarity-secret-rare{
  color:#fff;
  border-color:#fff;
  background:linear-gradient(
    90deg,
    #ff3b3b,
    #ff9f3b,
    #ffe14a,
    #4dff88,
    #4db8ff,
    #9b5cff,
    #ff4fd8
  );
  background-size:300% 100%;
  animation:rainbowRarity 3s linear infinite;
}

@keyframes rainbowRarity{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.tag.rarity-art-rare{
   color:#ff4d4d;
  border-color:#c93636;
  background:linear-gradient(
    135deg,
    rgba(255,60,60,.22),
    rgba(120,0,0,.08)
  );
  box-shadow:
    0 0 8px rgba(255,50,50,.18),
    inset 0 0 8px rgba(255,50,50,.08);
  font-weight:700;
}
/* ===== CARD HOLOGRAPHIC SHINE ===== */

.card-art{
  position:relative;
  overflow:hidden;
}

.card-art{
  position:relative;
  overflow:hidden;
}

.card-art .card-real-image{
  position:relative;
  z-index:1;
}
/* ===== CARD FOIL SHINE ===== */

.card-art{
  position:relative;
  overflow:hidden;
}

.card-art img{
  position:relative;
  z-index:1;
}

.card-art::after,
.collection-card-art::after,
.special-art::after,
.picker-art::after,
.test-card::after,
.draw-preview-card::after,
.cover-option::after,
.detail-image::after,
.mini-art::after{
 content:"";
  position:absolute;
  top:-60%;
  left:-100%;
  width:45%;
  height:220%;

  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );

  transform:skewX(-20deg);
  z-index:10;
  pointer-events:none;
  mix-blend-mode:screen;

  animation:rainbowShine 2.5s ease-in-out infinite;
}

@keyframes rainbowShine{
  0%{left:-100%}
  55%,100%{left:150%}
}
/* ปิดแสงทุกระดับก่อน */
.card-art::after,
.collection-card-art::after,
.special-art::after,
.picker-art::after,
.test-card::after,
.draw-preview-card::after,
.cover-option::after,
.detail-image::after,
.mini-art::after{
  display:none;
}

/* ระดับที่ให้มีแสง */
.card-art.rarity-legendary::after,
.collection-card-art.rarity-legendary::after,
.special-art.rarity-legendary::after,
.picker-art.rarity-legendary::after,
.test-card.rarity-legendary::after,
.draw-preview-card.rarity-legendary::after,
.cover-option.rarity-legendary::after,
.detail-image.rarity-legendary::after,
.mini-art.rarity-legendary::after,

.card-art.rarity-art-rare::after,
.collection-card-art.rarity-art-rare::after,
.special-art.rarity-art-rare::after,
.picker-art.rarity-art-rare::after,
.test-card.rarity-art-rare::after,
.draw-preview-card.rarity-art-rare::after,
.cover-option.rarity-art-rare::after,
.detail-image.rarity-art-rare::after,
.mini-art.rarity-art-rare::after,

.card-art.rarity-secret-rare::after,
.collection-card-art.rarity-secret-rare::after,
.special-art.rarity-secret-rare::after,
.picker-art.rarity-secret-rare::after,
.test-card.rarity-secret-rare::after,
.draw-preview-card.rarity-secret-rare::after,
.cover-option.rarity-secret-rare::after,
.detail-image.rarity-secret-rare::after,
.mini-art.rarity-secret-rare::after,

.card-art.rarity-epic::after,
.collection-card-art.rarity-epic::after,
.special-art.rarity-epic::after,
.picker-art.rarity-epic::after,
.test-card.rarity-epic::after,
.draw-preview-card.rarity-epic::after,
.cover-option.rarity-epic::after,
.detail-image.rarity-epic::after,
.mini-art.rarity-epic::after,

.card-art.rarity-rare::after,
.collection-card-art.rarity-rare::after,
.special-art.rarity-rare::after,
.picker-art.rarity-rare::after,
.test-card.rarity-rare::after,
.draw-preview-card.rarity-rare::after,
.cover-option.rarity-rare::after,
.detail-image.rarity-rare::after,
.mini-art.rarity-rare::after{
    display:block;
}

/* ===== UNIVERSAL CARD SHINE ===== */

.card-art,
.collection-card-art,
.special-art,
.picker-art,
.test-card,
.draw-preview-card,
.cover-option,
.detail-image,
.mini-art{
  position:relative;
  overflow:hidden;
}

/* รูปจริงอยู่ด้านล่าง */
.card-art img,
.collection-card-art img,
.special-art img,
.picker-art img,
.test-card img,
.draw-preview-card img,
.cover-option img,
.detail-image img,
.mini-art{
  position:relative;
  z-index:1;
}



/* ===== ZONE FLIP: front/back instead of rotation ===== */
.special-flip-btn{position:absolute;right:5px;top:5px;z-index:8;width:28px;height:28px;border:1px solid rgba(220,190,120,.65);background:rgba(8,8,8,.82);color:#e0bd68;border-radius:50%;font-size:15px;line-height:26px;cursor:pointer;box-shadow:0 3px 10px #000;}
.special-flip-btn:hover{background:#211a0e;color:#fff0b0}
.zone-card-back{background:radial-gradient(circle at 50% 35%,#6a5228,#21190d 42%,#080808 78%)!important;border:1px solid #9a7736!important;}
.zone-back-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 40%,#3b2b14 0,#15110b 42%,#060606 80%);overflow:hidden;}
.zone-back-face:before{content:"";position:absolute;width:68%;height:68%;border:1px solid rgba(205,168,83,.55);transform:rotate(45deg);box-shadow:0 0 0 14px rgba(205,168,83,.06),0 0 28px rgba(205,168,83,.16);}
.zone-back-face span,.zone-back-face small{position:relative;z-index:1;color:#d8b55f;font-family:'Metal Mania';text-align:center;letter-spacing:2px;}
.zone-back-face span{font-size:20px;font-weight:700}.zone-back-face small{font-size:7px;color:#8e7750;}

/* ===== PLAY TEST CARD ACTION BUTTONS ===== */
.test-card .test-tomb-btn,
.test-card .soul-core-place-btn{
  position:absolute;
  z-index:30;
  border:1px solid rgba(220,190,120,.7);
  background:rgba(8,8,8,.9);
  color:#e4c46d;
  border-radius:5px;
  font:700 7px Inter,Arial,sans-serif;
  letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.55);
}
.test-card .test-tomb-btn{right:3px;bottom:3px;padding:4px 5px;}
.test-card .soul-core-place-btn{left:50%;bottom:-31px;transform:translateX(-50%);padding:5px 8px;white-space:nowrap;}
.test-card .test-tomb-btn:hover,
.test-card .soul-core-place-btn:hover{background:#211a0e;color:#fff0b0;border-color:#d7b45e;}
.test-card .soul-core-place-btn:disabled{opacity:.35;cursor:not-allowed;}
.board-tomb-btn{bottom:4px!important;right:4px!important;}
/* Soul Core action button sits outside the card so it is never clipped by card overflow. */
.test-soul-core-cards .soul-core-place-btn{
  position:absolute!important;
  left:50%!important;
  top:calc(50% + 42px)!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:50!important;
  display:block!important;
  min-width:58px!important;
  padding:6px 9px!important;
  white-space:nowrap!important;
}
.test-soul-core-cards .soul-core-place-btn:disabled{opacity:.4!important;pointer-events:none!important}
/* ===== DECK COVER RARITY SHINE ===== */

.deck-cover{
  position:relative;
  overflow:hidden;
}

.deck-cover::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-100%;
  width:45%;
  height:220%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );

  transform:skewX(-20deg);
  z-index:10;
  pointer-events:none;
  mix-blend-mode:screen;

  animation:rainbowShine 3s ease-in-out infinite;
}


@keyframes rainbowShine{
  0%{left:-100%}
  55%,100%{left:150%}
}
.deck-cover.rarity-art-rare::before{
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );
}
.deck-cover.rarity-sceret-rare::before{
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );
}
/* Legendary */
.deck-cover.rarity-legendary::before{
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );
}

/* Epic */
.deck-cover.rarity-epic::before{
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );
}

/* Rare */
.deck-cover.rarity-rare::before{
 background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,0,0,.15) 30%,
    rgba(255,180,0,.25) 40%,
    rgba(0,255,100,.25) 50%,
    rgba(0,180,255,.3) 60%,
    rgba(180,0,255,.25) 70%,
    transparent 100%
  );
}

/* Common */
.deck-cover.rarity-common::before{
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.04) 42%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.05) 58%,
    transparent 70%
  );
}
/* ===== LOGO SHINE ===== */
.brand{
  position:relative;
  overflow:hidden;
}

.brand::after{
  content:"";
  position:absolute;
  top:-80%;
  left:-120%;
  width:35%;
  height:260%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 60%,
    transparent 100%
  );
  transform:skewX(-20deg);
  pointer-events:none;
  animation:logoShine 3.5s ease-in-out infinite;
  z-index:5;
}

@keyframes logoShine{
  0%{
    left:-120%;
  }
  55%,100%{
    left:150%;
  }
}
/* ===== SOUL ENERGY NAV EFFECT ===== */

.nav{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

/* แสงด้านในปุ่ม */
.nav::before{
  content:"";
  position:absolute;
  left:-35%;
  top:50%;
  width:75%;
  height:2px;
  transform:translateY(-50%);
   background:linear-gradient(
    90deg,
    transparent,
    rgba(180,120,220,.12),
    #d6a85a,
    #b98bd4,
    rgba(160,100,200,.18),
    transparent
  );
  filter:blur(2px);
}

/* ลำแสงพุ่งออกด้านขวา */
.nav::after{
  content:"";
  position:absolute;
  left:35%;
  top:50%;
  width:100%;
  height:3px;
  transform:translateY(-50%) skewX(-25deg);
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(190,140,220,.15),
    rgba(210,175,100,.75),
    rgba(170,115,210,.5),
    transparent
  );
  filter:blur(3px);
}

/* ตอนกดปุ่ม */
.nav:active::before,
.nav.active::before{
  animation:soulNavCore .7s ease-out;
}

.nav:active::after,
.nav.active::after{
  animation:soulNavBeam .7s ease-out;
}

.nav:active,
.nav.active{
  background:
    linear-gradient(
      90deg,
      rgba(40,70,150,.28),
      rgba(30,40,100,.12),
      transparent
    ),
    #18140d;

  color:#ffffff;

  box-shadow:
  0 0 7px rgba(190,140,220,.35),
  0 0 16px rgba(170,110,210,.2);
}

/* แสงหลักวิ่ง */
@keyframes soulNavCore{
  0%{
    left:-40%;
    opacity:0;
  }

  15%{
    opacity:1;
  }

  55%{
    opacity:1;
  }

  100%{
    left:110%;
    opacity:0;
  }
}

/* ลำแสงยาวพุ่งไปทางขวา */
@keyframes soulNavBeam{
  0%{
    left:20%;
    width:20%;
    opacity:0;
  }

  20%{
    opacity:1;
  }

  60%{
    width:110%;
    opacity:.8;
  }

  100%{
    left:105%;
    width:100%;
    opacity:0;
  }
}
/* ===== MOBILE DECK BUILDING FIX ===== */
@media (max-width: 720px){

  /* ส่วนหัว Deck */
  .deck-header{
    display:block;
  }

  .deck-header .gold-btn{
    margin-top:15px;
    width:100%;
  }

  /* กล่องสร้าง Deck */
  .deck-workspace{
    width:100%;
    max-width:100%;
    padding:14px;
    overflow:hidden;
  }

  /* รูปหน้าปก + ข้อมูล Deck */
  .deck-top{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
  }

  .deck-cover-wrap{
    width:120px;
    margin:0 auto;
  }

  .deck-cover{
    width:120px;
    height:155px;
  }

  .deck-cover span{
    font-size:48px;
  }

  /* ชื่อ Deck */
  .deck-meta{
    width:100%;
    min-width:0;
  }

  .deck-name{
    width:100%;
    font-size:24px;
  }

  /* ตัวเลข MAIN / MASTER / ZONE */
  .deck-summary{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:10px;
    width:100%;
  }

  .deck-summary span{
    min-width:0;
  }

  /* ปุ่ม SAVE / SHARE / IMPORT / DELETE */
  .deck-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }

  .deck-actions .gold-btn,
  .deck-actions .danger-btn{
    width:100%;
    min-width:0;
  }

  .save-rule{
    line-height:1.6;
    word-break:break-word;
  }

  /* ส่วนเลือกการ์ด */
  .deck-layout{
    display:block;
    width:100%;
  }

  .card-picker{
    width:100%;
    max-width:100%;
    margin-top:20px;
    position:static;
  }

}
/* ===== FIX DECK MOBILE OVERFLOW ===== */
@media (max-width: 720px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  main{
    width:100%;
    max-width:100%;
    min-width:0 !important;
    box-sizing:border-box;
  }

  .deck-header,
  .deck-workspace,
  .deck-top,
  .deck-meta,
  .deck-summary,
  .deck-actions,
  .deck-layout,
  .card-picker,
  .deck-list,
  .deck-section{
    width:100%;
    max-width:100%;
    min-width:0 !important;
    box-sizing:border-box;
  }

  .deck-workspace{
    padding:14px !important;
    overflow:hidden !important;
  }

  .deck-top{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }

  .deck-cover-wrap{
    width:120px !important;
    max-width:120px !important;
    margin:0 auto !important;
  }

  .deck-cover{
    width:120px !important;
    height:155px !important;
  }

  .deck-meta{
    display:block !important;
    overflow:hidden;
  }

  .deck-name{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
    font-size:24px !important;
  }

  .deck-summary{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .deck-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .deck-actions button{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }

  .save-rule{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .deck-layout{
    display:block !important;
  }

  .card-picker{
    overflow:hidden;
  }

  img{
    max-width:100%;
  }
}
/* ===== DECK MOBILE LAYOUT ===== */
@media (max-width:720px){

  .deck-workspace{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .deck-top{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }

  .deck-cover-wrap{
    width:120px !important;
    margin:0 auto !important;
  }

  .deck-cover{
    width:120px !important;
    height:155px !important;
  }

  .deck-meta{
    width:100% !important;
    min-width:0 !important;
  }

  .deck-name{
    font-size:24px !important;
    width:100% !important;
    overflow-wrap:anywhere !important;
  }

  .deck-summary{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .deck-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .deck-actions button{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .deck-layout{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
  }

  .card-picker{
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .deck-section{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .deck-list{
    width:100% !important;
    min-width:0 !important;
  }

  .deck-list > *{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  img{
    max-width:100%;
  }
}
/* ===== FIX DECK BUTTONS MOBILE ===== */
@media (max-width:720px){

  .deck-actions{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  .deck-actions .gold-btn,
  .deck-actions .danger-btn{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

}
.clear-filter-btn{
  height:38px;
  padding:0 14px;
  border:1px solid #49391f;
  background:#15110b;
  color:var(--gold2);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  white-space:nowrap;
}

.clear-filter-btn:hover{
  background:#2a200f;
  border-color:var(--gold);
}

@media(max-width:720px){
  .clear-filter-btn{
    width:100%;
  }
}
.clear-filter-btn{
  height:38px;
  padding:0 14px;
  border:1px solid #49391f;
  background:#15110b;
  color:var(--gold2);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  cursor:pointer;
  white-space:nowrap;
}

.clear-filter-btn:hover{
  background:#2a200f;
  border-color:var(--gold);
}

@media(max-width:720px){
  .clear-filter-btn{
    width:100%;
  }
}
/* ===== DECK STATISTICS ===== */

.deck-statistics{
  margin:20px 0;
  padding:16px;
  border:1px solid #3a2b18;
  background:#0d0b08;
  box-sizing:border-box;
}

.deck-stat-title{
  color:var(--gold2);
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:14px;
}

.deck-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.deck-stat-box{
  min-width:0;
  padding:12px;
  border:1px solid #302516;
  background:#15110b;
  text-align:center;
  box-sizing:border-box;
}

.deck-stat-box small{
  display:block;
  color:#8d806c;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:6px;
}

.deck-stat-box b{
  display:block;
  color:#e5c76b;
  font-size:16px;
}

@media(max-width:720px){
  .deck-statistics{
    width:100%;
    max-width:100%;
  }

  .deck-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
.zone-back-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:1;
}
.detail-grid{
  display:grid;
  grid-template-columns: auto max-content 1fr 1fr max-content auto;
  gap:8px;
  margin-top:30px;
}

.detail-grid div{
  border:1px solid #28231a;
  padding:10px;
  min-width:0;
  box-sizing:border-box;
}

.detail-grid div:nth-child(2),
.detail-grid div:nth-child(5){
  white-space:nowrap;
  width:max-content;
}
.deck-picker-modal{
  width:min(900px,92vw);
  max-height:85vh;
  overflow:auto;
}

.deck-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:14px;
  margin-top:20px;
}

.deck-picker-card{
  position:relative;
  aspect-ratio:6.3 / 8.8;
  border:1px solid #4b3a20;
  background:#0d0b08;
  cursor:pointer;
  overflow:hidden;
  transition:.2s;
}

.deck-picker-card:hover{
  transform:translateY(-5px);
  border-color:#d6b45a;
  box-shadow:0 0 18px rgba(180,130,255,.35);
}

.deck-picker-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.deck-picker-count{
  position:absolute;
  right:5px;
  bottom:5px;
  padding:3px 7px;
  border:1px solid #9b7b2f;
  background:#090806;
  color:#e8c866;
  font-size:10px;
  font-weight:bold;
}

@media(max-width:600px){
  .deck-picker-grid{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .deck-picker-modal{
    width:94vw;
  }
}
.deck-card-choice{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.75);
}

.deck-card-choice-box{
  position:relative;
  width:min(420px,90vw);
  padding:30px;
  border:1px solid #6b5425;
  background:#100e0b;
  box-shadow:0 0 40px rgba(0,0,0,.8);
  text-align:center;
}

.deck-card-choice-box h3{
  margin:0 0 8px;
  color:#e5c66a;
  font-size:18px;
}

.deck-card-choice-box p{
  margin:0 0 25px;
  color:#aaa;
  font-size:12px;
}

.deck-choice-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}

.deck-choice-actions button{
  min-width:140px;
}

.deck-card-choice .deck-choice-close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:none;
  color:#aaa;
  font-size:24px;
  cursor:pointer;
}
.tomb-viewer-modal{
  width:min(900px,92vw);
  max-height:85vh;
  overflow:auto;
}

.tomb-viewer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:14px;
  margin-top:20px;
}

.tomb-viewer-card{
  position:relative;
  aspect-ratio:6.3 / 8.8;
  border:1px solid #49391f;
  background:#0d0b08;
  cursor:pointer;
  overflow:hidden;
  transition:.2s;
}

.tomb-viewer-card:hover{
  transform:translateY(-5px);
  border-color:#d6b45a;
  box-shadow:0 0 18px rgba(180,130,255,.35);
}

.tomb-viewer-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tomb-card-index{
  position:absolute;
  right:5px;
  bottom:5px;
  min-width:20px;
  padding:3px 5px;
  text-align:center;
  background:#080706;
  border:1px solid #80652d;
  color:#e5c66a;
  font-size:9px;
}

.tomb-empty{
  grid-column:1/-1;
  padding:60px 20px;
  text-align:center;
  color:#777;
  letter-spacing:2px;
}

@media(max-width:600px){
  .tomb-viewer-grid{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }

  .tomb-viewer-modal{
    width:94vw;
  }
}
.zone-soulcore-badge{
  display:block;
  width:max-content;
  margin:8px auto 0;
  padding:4px 10px;
  border:1px solid #80652d;
  border-radius:12px;
  background:#0b0906;
  color:#e5c66a;
  font-size:10px;
  font-weight:bold;
  cursor:pointer;
  z-index:20;
}

.zone-soulcore-badge:hover{
  border-color:#d6b45a;
  box-shadow:0 0 10px rgba(214,180,90,.3);
}

.zone-soulcore-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:5px;
  padding:5px 12px;
  border:1px solid #49391f;
  background:#0d0b08;
  color:#aaa;
  font-size:9px;
}

.zone-soulcore-info b{
  color:#e5c66a;
  font-size:9px;
}

.zone-soulcore-info span{
  color:#fff;
}
/* ===== GOLD LIGHT WAVE UNDER MASCOT ===== */

.home-logo2{
  position:relative;
}

.home-logo2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:25px;
  width:180px;
  height:35px;
  transform:translateX(-50%);

  background:radial-gradient(
    ellipse,
    rgba(255,210,80,.75) 0%,
    rgba(255,180,40,.35) 35%,
    rgba(255,180,40,.12) 55%,
    transparent 75%
  );

  filter:blur(5px);
  opacity:.8;
  animation:goldLightWave 2.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes goldLightWave{
  0%,100%{
    transform:translateX(-50%) scaleX(.75);
    opacity:.35;
  }

  50%{
    transform:translateX(-50%) scaleX(1.25);
    opacity:1;
  }
}

/* ===== ZONE TWO-SIDED ON ALL PAGES ===== */
.zone-page-flippable{position:relative!important;overflow:hidden!important;}
.zone-page-flip-btn{position:absolute;right:5px;top:5px;z-index:40;width:28px;height:28px;border:1px solid rgba(220,190,120,.75);background:rgba(8,8,8,.88);color:#e0bd68;border-radius:50%;font-size:15px;line-height:26px;cursor:pointer;box-shadow:0 3px 10px #000;}
.zone-page-flip-btn:hover{background:#211a0e;color:#fff0b0;}
.zone-page-back-active{background:radial-gradient(circle at 50% 35%,#6a5228,#21190d 42%,#080808 78%)!important;border:1px solid #9a7736!important;}
.zone-page-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 10px;background:radial-gradient(circle at 50% 40%,#3b2b14 0,#15110b 42%,#060606 80%);overflow:hidden;text-align:center;}
.zone-page-back:before{content:"";position:absolute;width:68%;height:68%;border:1px solid rgba(205,168,83,.55);transform:rotate(45deg);box-shadow:0 0 0 14px rgba(205,168,83,.06),0 0 28px rgba(205,168,83,.16);}
.zone-page-back b,.zone-page-back p{position:relative;z-index:2;text-align:center;}
.zone-page-back b{color:#d8b55f;font:700 10px 'Metal Mania',serif;letter-spacing:1.5px;}
.zone-page-back p{max-width:88%;margin:0;color:#d8d0c1;font:500 9px/1.55 Inter,Arial,sans-serif;}
.detail-image .zone-page-flip-btn{width:32px;height:32px;line-height:30px;}
.library-cover.zone-page-flippable .zone-page-back b{font-size:7px;}
.library-cover.zone-page-flippable .zone-page-back p{font-size:6px;line-height:1.35;}
.mini-art.zone-page-flippable .zone-page-flip-btn,
.picker-art.zone-page-flippable .zone-page-flip-btn{width:22px;height:22px;font-size:12px;line-height:20px;right:3px;top:3px;}
.special-art.zone-page-flippable .zone-page-flip-btn{width:24px;height:24px;font-size:13px;line-height:22px;}
@media(max-width:900px){
  .zone-page-flip-btn{width:25px;height:25px;font-size:13px;line-height:23px;}
}


/* ===== ZONE DETAIL FIX ===== */
.modal{z-index:1000!important;}
.modal-card{z-index:1001!important;}
#detailAbilityDual .master-ability-box.hidden{display:none!important;}


/* ===== ZONE DETAIL ABILITY: REMOVE FRONT/BACK BOX FRAMES ===== */
.zone-detail-abilities .master-ability-box{
  border:none!important;
  background:transparent!important;
  padding:0!important;
}

/* ===== ZONE BACK SIDE: NO FOIL / RAINBOW SHINE ===== */
.detail-image.zone-page-back-active::after,
.zone-page-back-active::after,
.zone-card-back::after,
.zone-back-face::after{
  display:none!important;
  animation:none!important;
  background:none!important;
  mix-blend-mode:normal!important;
}

/* ===== ZONE BACK: ABSOLUTELY NO HOLOGRAPHIC SHINE ===== */
.zone-back-no-shine::before,
.zone-back-no-shine::after,
.zone-back-no-shine img,
.zone-page-back-active::before,
.zone-page-back-active::after{
  animation:none!important;
}
.zone-back-no-shine::after,
.zone-page-back-active::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  mix-blend-mode:normal!important;
}
/* ===== PLAY TEST ZONE BACK IMAGE ===== */
.playmat .zone-card-back .zone-back-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  z-index:2!important;
}

.playmat .zone-card-back{
  background:#080808!important;
  overflow:hidden!important;
}

.playmat .zone-card-back::after,
.playmat .zone-card-back::before{
  display:none!important;
  content:none!important;
}
.zone-page-back{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#080808 !important;
}

.zone-back-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  z-index:5 !important;
}
/* =========================================
   CARD DETAIL GRID - FINAL
   ========================================= */

.modal-card .detail-grid{
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  display:grid;
  gap:8px;
  margin-top:30px;

  /* 6 ช่อง */
  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.3fr)
    minmax(0, .7fr)
    minmax(0, .7fr)
    minmax(0, 1.3fr)
    minmax(0, .7fr);
}

/* ทุกช่องห้ามดัน Grid ออก */
.modal-card .detail-grid > div{
  width:100% !important;
  min-width:0 !important;
  max-width:100%;
  box-sizing:border-box;
  padding:10px;
  overflow:hidden;
}

/* Label */
.modal-card .detail-grid small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ค่า */
.modal-card .detail-grid b{
  display:block;
  min-width:0;
  max-width:100%;

  font-size:11px;
  line-height:1.35;

  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word;
}
/* =========================================
   CARD DETAIL PREVIOUS / NEXT
   ========================================= */

.detail-navigation{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:18px;
}

.detail-navigation button{
  flex:1;
  height:38px;

  background:#0d0d0d;
  border:1px solid #3b3324;
  color:#d6b86a;

  font-family:inherit;
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;

  cursor:pointer;
  transition:.2s ease;
}

.detail-navigation button:hover{
  background:#18140d;
  border-color:#b99543;
  color:#f0d889;
}

.detail-navigation button:active{
  transform:scale(.98);
}
/* Power / Steal ไม่ให้ตัวเลขแตกเป็นแนวตั้ง */
.modal-card .detail-grid #detailPowerBox b,
.modal-card .detail-grid #detailStealBox b,
.modal-card .detail-grid #detailCostBox b{
  text-align:center;
}

/* =========================================
   GEAR / CARD ที่ไม่มี POWER + STEAL
   ========================================= */

.modal-card .detail-grid:has(#detailPowerBox.hidden){
  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.2fr)
    minmax(0, 1.8fr)
    minmax(0, .8fr);
}
/* ================================
   SUPPLY DETAIL MODAL
================================ */

.supply-detail-modal{
  position:fixed;
  inset:0;
  z-index:2000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:25px;

  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
}

.supply-detail-modal.hidden{
  display:none!important;
}

.supply-detail-box{
  width:min(900px,100%);
  max-height:90vh;

  display:grid;
  grid-template-columns:45% 55%;

  background:#101010;
  border:1px solid #6b5228;

  box-shadow:
    0 30px 100px rgba(0,0,0,.8);

  position:relative;

  overflow:hidden;
}

/* รูป Supply */

.supply-detail-image{
  min-height:500px;

  background:
    radial-gradient(
      circle at 50% 40%,
      #6b4d1e,
      #1c160d 38%,
      #080808 75%
    );

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.supply-detail-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.supply-detail-placeholder{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 50% 40%,
      #6b4d1e,
      #1b150c 40%,
      #080808 75%
    );
}

.supply-detail-placeholder span{
  font:700 80px 'Metal Mania';
  color:#d9ad52;

  text-shadow:
    0 0 35px #8d641e;
}

/* เนื้อหา */

.supply-detail-content{
  padding:45px 40px;
}

.supply-detail-type{
  display:inline-block;

  padding:6px 10px;

  border:1px solid #72572b;

  color:#d9ad52;

  font:600 9px 'Metal Mania';

  letter-spacing:2px;
}

.supply-detail-content h2{
  font:600 30px 'Metal Mania';

  color:#eee9df;

  margin:18px 0 8px;
}

.supply-detail-line{
  height:1px;

  background:#2d261b;

  margin:25px 0;
}

.supply-detail-content h3{
  font-size:9px;

  letter-spacing:2px;

  color:#d9ad52;

  margin-bottom:10px;
}

.supply-detail-content p{
  color:#aaa39a;

  font-size:13px;

  line-height:1.8;
}

/* ราคา */

.supply-detail-price-box{
  margin-top:35px;

  padding:18px;

  border:1px solid #342b1d;

  background:#0b0b0b;

  display:flex;

  justify-content:space-between;

  align-items:center;
}

.supply-detail-price-box span{
  font-size:9px;

  letter-spacing:2px;

  color:#777066;
}

.supply-detail-price-box strong{
  font:600 22px 'Metal Mania';

  color:#d9ad52;
}

/* ปุ่มปิด */

.supply-detail-close{
  position:absolute;

  right:12px;
  top:8px;

  width:38px;
  height:38px;

  border:0;

  background:rgba(0,0,0,.55);

  color:#d9ad52;

  font-size:30px;

  cursor:pointer;

  z-index:5;
}

.supply-detail-close:hover{
  color:#fff;

  background:#241b0d;
}


/* Mobile */

@media(max-width:700px){

  .supply-detail-box{
    grid-template-columns:1fr;

    max-height:92vh;

    overflow:auto;
  }

  .supply-detail-image{
    min-height:300px;
    height:300px;
  }

  .supply-detail-content{
    padding:25px;
  }

  .supply-detail-content h2{
    font-size:24px;
  }

}
/* ===== SUPPLY DETAIL — AUTO IMAGE SIZE ===== */

.supply-detail-box{
  width:auto;
  max-width:90vw;
  max-height:90vh;

  display:grid;
  grid-template-columns:auto minmax(420px, 530px);

  background:#101010;
  border:1px solid #6b5228;

  position:relative;
  overflow:hidden;
}

/* ให้พื้นที่รูปปรับตามรูปจริง */
.supply-detail-image{
  width:auto;
  height:auto;
  min-height:0;

  max-width:45vw;
  max-height:85vh;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#080808;
  overflow:hidden;
}

/* รูปไม่ถูก crop */
.supply-detail-image img{
  display:block;

  width:auto;
  height:auto;

  max-width:45vw;
  max-height:85vh;

  object-fit:contain;
}

/* ถ้าไม่มีรูป */
.supply-detail-placeholder{
  width:350px;
  height:500px;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 50% 40%,
      #6b4d1e,
      #1b150c 40%,
      #080808 75%
    );
}
.deck-mini-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.deck-mini-card .deck-add-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
/* Click card in Deck Builder picker to view details */
.picker-card-clickable{cursor:pointer;transition:.16s}
.picker-card-clickable:hover{background:#17130d;border-top-color:#5b4725}
.picker-card-clickable:hover .picker-name b{color:var(--gold2)}
.picker-card-clickable .picker-art{transition:.16s}
.picker-card-clickable:hover .picker-art{border-color:#765b2a;box-shadow:0 0 12px rgba(217,173,82,.12)}

/* ===== FINAL ABILITY ICON SPACING FIX ===== */
/* Keep the original icon artwork visible, but stop oversized CSS boxes from
   creating extra vertical space between lines. */
#detailAbility,
#detailAbilityLeft,
#detailAbilityRight,
.master-ability-box p{
  line-height:2 !important;
  white-space:pre-line !important;
  min-height:0 !important;
}

#detailAbilityRight{
  padding-top:0 !important;
}

.ability-icon{
  display:inline-block !important;
  object-fit:contain !important;
  vertical-align:middle !important;
  position:relative !important;
  margin:0 1px !important;
  padding:0 !important;
  line-height:1 !important;
  box-sizing:content-box !important;
}

/* Wide label-style icons: preserve their natural aspect ratio instead of
   forcing them into tall 40–80px boxes. */
.ability-icon-Counter,
.ability-icon-OpenZone,
.ability-icon-Forever,
.ability-icon-Activat,
.ability-icon-PerTurn,
.ability-icon-Block,
.ability-icon-Peek,
.ability-icon-Enter,
.ability-icon-ES,
.ability-icon-ZoneOpen1,
.ability-icon-ZoneOpen2,
.ability-icon-ZoneOpen3{
  width:auto !important;
  height:20px !important;
  max-width:160px !important;
}
.ability-icon-Peek{
  width:auto !important;
  height:20px !important;
}

.ability-icon-E{
  width:auto !important;
  height:27px !important;
  top: -2px !important;
}

.ability-icon-Pocket{
  width:auto !important;
  height:25px !important;
  top:-2 !important;
  margin:0 1px !important;
}

.ability-icon-Dot{
  width:12px !important;
  height:12px !important;
  margin:0 1px !important;
}
.ability-icon-ES{
  width:auto !important;
  height:19px !important;
}
/* Zone icons are normal inline icons now; they must not reserve a 150px
   absolute-positioned area. */
 .ability-icon-ZoneOpen1{
  position:relative !important;
  top:0 !important;
  left:1 !important;
  z-index:1 !important;
  width:auto !important;
  height:22px !important;
}
.ability-icon-ZoneOpen2{
  position:relative !important;
  top:0 !important;
  left:0 !important;
  z-index:1 !important;
  
}

.ability-icon-ZoneOpen3{
  position:relative !important;
  top:0 !important;
  left:0 !important;
  z-index:1 !important;
  width:auto !important;
  height:22px !important;
}
/* Remove inherited image spacing in all ability text containers. */
#detailAbility img,
#detailAbilityLeft img,
#detailAbilityRight img,
.master-ability-box p img{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* ขนาดไอคอน Keyword ในหน้า HOW TO PLAY */
.howtoplay-keyword-grid img {
  width: 80px !important;
  height: 60px !important;
  max-width: none !important;
  object-fit: contain;
  flex-shrink: 0;
}
.howtoplay-keyword-grid img.keyword-counter {
  width: 60px !important;
  height: 40px !important;
}

.howtoplay-keyword-grid img.keyword-Peek {
  width: 60px !important;
  height: 40px !important;
}

.howtoplay-keyword-grid img.keyword-perTurn {
  width: 60px !important;
  height: 40px !important;
}

.howtoplay-keyword-grid img.keyword-OpenZone {
  width: 80px !important;
  height: 60px !important;
}

.howtoplay-keyword-grid img.keyword-Pocket {
  width: 60px !important;
  height: 40px !important;
}

.howtoplay-keyword-grid img.keyword-EnergySoul  {
  width: 100px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-ZoneOpen {
  width: 100px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-Energy {
  width: 60px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-Enter {
  width: 60px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-Block {
  width: 60px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-Activat {
  width: 60px !important;
  height: 40px !important;
}
.howtoplay-keyword-grid img.keyword-forever {
  width: 60px !important;
  height: 40px !important;
}
/* ===== HOW TO PLAY PAGE (additive only) ===== */
.howtoplay-section{max-width:1180px;margin:0 auto;padding-bottom:50px}
.howtoplay-hero{position:relative;overflow:hidden;text-align:center;padding:48px 24px 38px;border:1px solid rgba(202,165,82,.35);background:radial-gradient(ellipse at 50% 0%,rgba(115,76,155,.22),transparent 58%),linear-gradient(135deg,#15120e,#090909 65%,#17110a);}
.howtoplay-kicker{font:600 11px 'Metal Mania',serif;letter-spacing:4px;color:#b89a5c}
.howtoplay-hero h2{margin:12px 0 8px;color:#f0d79a;font:700 clamp(30px,5vw,52px) 'Metal Mania',serif;letter-spacing:3px;text-shadow:0 0 22px rgba(211,171,83,.18)}
.howtoplay-hero p{color:#c0b5a0;margin:0;font-size:14px}
.howtoplay-ruleline{width:min(260px,70%);height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,#c9a55a,transparent)}
.howtoplay-note{color:#887c68;font-size:11px}
.howtoplay-navcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 28px}
.howtoplay-navcards a{display:flex;gap:10px;align-items:center;justify-content:center;min-height:56px;border:1px solid #393022;background:#12110f;color:#d9b86d;text-decoration:none;font:600 12px 'Metal Mania',serif;transition:.2s}
.howtoplay-navcards a span{color:#c9c1b2;font:500 12px Inter,sans-serif}
.howtoplay-navcards a:hover{border-color:#c9a55a;background:#211a0f}
.howtoplay-panel{scroll-margin-top:20px;margin:0 0 18px;padding:25px;border:1px solid rgba(202,165,82,.22);background:linear-gradient(145deg,rgba(24,22,19,.96),rgba(12,12,12,.98))}
.howtoplay-section-label{font:600 10px 'Metal Mania',serif;letter-spacing:2px;color:#a58a50}
.howtoplay-panel h3{margin:8px 0 10px;color:#ead5a1;font-size:23px}
.howtoplay-panel>p{color:#b8b0a2;line-height:1.8;font-size:13px}
.howtoplay-callout{display:flex;gap:14px;margin-top:18px;padding:15px;border-left:2px solid #b99a58;background:rgba(197,158,74,.07);font-size:12px;line-height:1.8;color:#c8c0b2}
.howtoplay-callout b{flex:0 0 auto;color:#e0c477}
.howtoplay-deckgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.howtoplay-deckgrid>div{display:flex;flex-direction:column;gap:8px;padding:17px 14px;border:1px solid #393022;background:#0d0d0c}
.howtoplay-deckgrid strong{font:600 11px 'Metal Mania',serif;letter-spacing:1px;color:#b89a5c}
.howtoplay-deckgrid b{font-size:19px;color:#eee1c1}
.howtoplay-deckgrid small{font-size:11px;color:#928979;line-height:1.5}
.howtoplay-type-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.howtoplay-type-list>div{display:flex;gap:13px;align-items:flex-start;padding:14px;border:1px solid #302a20;background:#0d0d0c}
.howtoplay-type-icon{display:grid;place-items:center;flex:0 0 38px;height:42px;border:1px solid #705a31;color:#e0c477;background:#17130d;font:700 12px 'Metal Mania',serif}
.howtoplay-type-list b{color:#e0c477;font-size:14px}
.howtoplay-type-list p{margin:5px 0 0;color:#aaa294;font-size:12px;line-height:1.7}
.howtoplay-keyword-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.howtoplay-keyword-grid>div{padding:14px;border:1px solid #302a20;background:#0d0d0c}
.howtoplay-keyword-grid b{display:block;color:#e0c477;font:600 13px 'Metal Mania',serif;margin-bottom:7px}
.howtoplay-keyword-grid span{color:#aaa294;font-size:11px;line-height:1.6}
.howtoplay-footer-note{margin-top:20px;padding-top:16px;border-top:1px solid #302a20;color:#928979;font-size:11px;line-height:1.8}
@media(max-width:760px){.howtoplay-hero{padding:34px 16px 28px}.howtoplay-navcards{grid-template-columns:repeat(2,minmax(0,1fr))}.howtoplay-deckgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.howtoplay-type-list{grid-template-columns:1fr}.howtoplay-keyword-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.howtoplay-panel{padding:18px}}
@media(max-width:380px){.howtoplay-deckgrid{grid-template-columns:1fr 1fr}.howtoplay-keyword-grid{grid-template-columns:1fr}.howtoplay-navcards a{gap:6px;font-size:11px}.howtoplay-navcards a span{font-size:11px}}


/* ===== MOBILE PLAY TEST: PORTRAIT LAYOUT ===== */
@media (max-width: 650px) {
  #drawtest { min-width: 0; width: 100%; }
  .draw-header { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .draw-header h2 { font-size:25px; }
  .draw-header p { font-size:11px; line-height:1.5; }
  .draw-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:100%; }
  .draw-controls select { grid-column:1 / -1; width:100%; min-width:0; min-height:40px; }
  .draw-controls button { min-width:0; padding:10px 7px; font-size:10px; }
  .playtest-info { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; font-size:9px; }
  .manual-playtest { min-width:0; width:100%; padding:8px; overflow:visible; }
  .manual-playmat {
    width:100%; min-width:0; min-height:0; height: min(70vh, 650px);
    aspect-ratio:auto; overflow:hidden; border-radius:8px;
  }
  .manual-playmat:before { inset:7px; border-radius:7px; }
  .playmat-hint { width:80%; font-size:9px; letter-spacing:.4px; }
  .board-piles { right:8px; top:8px; gap:5px; }
  .board-pile { width:43px; height:61px; box-shadow:0 3px 10px #000; }
  .board-pile span { font-size:9px; letter-spacing:0; }
  .board-pile b { font-size:8px; margin-top:4px; }
  .test-board-cards .test-card {
    width:48px!important; height:67px!important; min-width:48px!important; min-height:67px!important;
    max-width:48px!important; max-height:67px!important; border-radius:3px!important;
  }
  .test-board-cards .board-rotate-btn,
  .special-rotate-btn { width:19px!important; height:19px!important; font-size:12px!important; line-height:17px!important; }
  .test-special-card .test-card {
    width:54px!important; height:75px!important; min-width:54px!important; min-height:75px!important;
    max-width:54px!important; max-height:75px!important; border-radius:3px!important;
  }
  .test-master-card { top:46%!important; }
  .test-zone-card { top:68%!important; }
  .test-soul-core-cards { top:10%!important; max-width:90%!important; gap:3px!important; }
  .test-soul-core-cards .test-card {
    width:35px!important; height:25px!important; min-width:35px!important; min-height:25px!important;
    max-width:35px!important; max-height:25px!important; flex:0 0 35px!important;
  }
  .test-soul-core-under-zone { max-width:90%; }
  .manual-hand-panel { min-width:0; width:100%; margin-top:10px; padding:10px 2px 2px; min-height:0; }
  .manual-hand-panel .draw-hand-title { display:flex; flex-direction:column; gap:4px; }
  .manual-hand-panel .draw-hand-title small { font-size:9px; line-height:1.4; }
  .manual-hand-panel .draw-test-hand {
    min-width:0!important; width:100%!important; min-height:0!important;
    align-items:start!important; justify-items:stretch!important;
    display:grid!important; grid-template-columns:repeat(auto-fit,minmax(42px,1fr))!important;
    gap:6px!important; overflow:visible!important;
  }
  .manual-hand-panel .draw-test-hand .test-card {
    position:relative!important; inset:auto!important;
    width:100%!important; height:auto!important; aspect-ratio:48 / 67!important;
    min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important;
    flex:none!important; margin:0!important; transform:none!important; box-sizing:border-box!important;
  }
  .manual-hand-panel .draw-test-hand .test-card:hover {
    transform:translateY(-3px)!important;
  }
  .playtest-actions { flex-wrap:wrap; gap:8px; line-height:1.5; }
  .playtest-actions span { flex:1 1 100%; }
}


/* ===== MOBILE TOUCH DRAG FROM HAND TO PLAY TEST BOARD ===== */
#testHand .test-card{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#testHand .test-card.mobile-drag-source{opacity:.28!important}
.mobile-drag-ghost{border-radius:8px;overflow:hidden;outline:2px solid rgba(221,183,91,.95)}

/* Mobile play-test: tap a card, then tap a destination on the playmat. */
@media (pointer: coarse) {
  .test-card.mobile-place-selected {
    outline: 3px solid #e8c66a !important;
    outline-offset: 3px;
    filter: drop-shadow(0 0 8px rgba(185, 119, 255, .95));
    z-index: 100 !important;
  }
  #playBoard.mobile-place-target {
    cursor: crosshair;
    box-shadow: inset 0 0 0 2px rgba(232, 198, 106, .75), 0 0 14px rgba(153, 90, 255, .28);
  }
}

/* ===== MOBILE PLAY TEST HAND: FIT EVERY CARD ON SCREEN ===== */
@media (max-width: 650px){
  #drawtest .manual-hand-panel{
    min-width:0!important;
    width:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    padding:10px 6px!important;
    overflow:visible!important;
  }
  #drawtest .manual-hand-panel #testHand,
  #drawtest #testHand.draw-test-hand{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(0,1fr))!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:4px!important;
    box-sizing:border-box!important;
    align-items:start!important;
    justify-content:stretch!important;
    overflow:visible!important;
  }
  #drawtest .manual-hand-panel #testHand .test-card,
  #drawtest #testHand.draw-test-hand .test-card{
    width:100%!important;
    height:auto!important;
    aspect-ratio:63 / 88!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:none!important;
    flex:none!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:2px!important;
    overflow:hidden!important;
    transform:none!important;
  }
  #drawtest .manual-hand-panel #testHand .test-card img,
  #drawtest #testHand.draw-test-hand .test-card img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  #drawtest .manual-hand-panel #testHand .test-card span,
  #drawtest #testHand.draw-test-hand .test-card span{font-size:clamp(9px,2.5vw,14px)!important}
  #drawtest .manual-hand-panel #testHand .test-card b,
  #drawtest #testHand.draw-test-hand .test-card b{font-size:clamp(5px,1.7vw,8px)!important;margin-top:2px!important;overflow-wrap:anywhere!important}
  #drawtest .manual-hand-panel #testHand .test-card small,
  #drawtest #testHand.draw-test-hand .test-card small{font-size:clamp(4px,1.3vw,6px)!important;margin-top:1px!important;overflow-wrap:anywhere!important}
}
@media (max-width: 380px){
  #drawtest .manual-hand-panel #testHand,
  #drawtest #testHand.draw-test-hand{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important;padding:2px!important}
}


/* ===== SOULVAULT HOME LANDING PAGE (isolated styles) ===== */
.sv-home-section{width:100%;max-width:1500px;margin:0 auto}
.sv-home-banner{min-height:490px;height:clamp(440px,57vw,650px);max-height:650px;position:relative;isolation:isolate;overflow:hidden;margin:0 0 32px;border:1px solid #4c3a72;background:radial-gradient(ellipse at 50% 45%,#573d91 0%,#29204f 38%,#0b0918 78%);box-shadow:0 18px 55px #0008}
.sv-home-banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:0;opacity:1;filter:none;transition:opacity .25s ease;cursor:pointer;user-select:none}
.sv-home-banner{cursor:pointer}
.sv-home-banner .sv-home-arrow,.sv-home-banner .sv-home-dots{z-index:2}
.sv-home-banner:before,.sv-home-banner:after{pointer-events:none}
.sv-home-banner:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 10%,#b9a0ff0a 10.2% 10.5%,transparent 10.8% 20%),linear-gradient(180deg,#100b25a8,#100b2570 58%,#07060c)}
.sv-home-banner:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-17%;height:34%;z-index:-1;background:linear-gradient(180deg,#a58be8,#4b3377 22%,#171020 60%,#08070b);border-top:5px solid #d6c2ff;box-shadow:0 -10px 35px #b79cff80}
.sv-home-topline{position:absolute;z-index:3;left:24px;right:24px;top:20px;display:flex;justify-content:space-between;gap:12px;color:#f1eaff;font-size:10px;font-weight:800;letter-spacing:2px}
.sv-home-edition{padding:8px 12px;background:#1b1330d9;border:1px solid #a78adf}
.sv-home-art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sv-home-orbit{position:absolute;left:50%;top:45%;border:2px solid #c6b1ffb0;transform:translate(-50%,-50%) rotate(-18deg);width:95%;height:46%;border-radius:50%;box-shadow:0 0 30px #9c7bff70,inset 0 0 25px #9c7bff50}
.sv-orbit-two{width:78%;height:63%;transform:translate(-50%,-50%) rotate(24deg);border-color:#fff0a6a8}
.sv-home-glyph{position:absolute;right:14%;top:20%;font-size:clamp(44px,7vw,90px);color:#fff2a5;text-shadow:0 0 25px #fff1a5}
.sv-home-card-silhouette{position:absolute;left:50%;top:47%;width:clamp(145px,20vw,260px);aspect-ratio:.7;transform:translate(-50%,-50%) rotate(7deg);border:4px solid #fff0bd;border-radius:14px;background:linear-gradient(145deg,#ffbd5d,#7a45bd 43%,#211338 80%);box-shadow:0 0 0 10px #211634,0 0 0 13px #d4baff,0 25px 65px #000b;display:grid;place-items:center}
.sv-home-card-silhouette:before{content:"";position:absolute;inset:12px;border:2px solid #fff2be;border-radius:7px}
.sv-home-card-silhouette span{font:700 clamp(52px,8vw,100px) 'Metal Mania',serif;color:#fff1b2;text-shadow:0 6px 0 #59367e,0 0 30px #fff}
.sv-home-sparks{position:absolute;left:10%;top:33%;font-size:clamp(20px,3vw,42px);color:#fff2a6;text-shadow:0 0 20px #fff}
.sv-home-copy{position:absolute;z-index:2;left:8%;right:8%;top:49%;transform:translateY(-50%);text-align:center;text-shadow:0 5px 20px #160c28}
.sv-home-kicker{font-size:clamp(9px,1.1vw,13px);font-weight:800;letter-spacing:4px;color:#e7d8ff;margin-bottom:10px}
.sv-home-copy h2{font:900 clamp(44px,8.5vw,112px)/.95 Inter,Arial,sans-serif;letter-spacing:-4px;margin:0;color:#ffe779;-webkit-text-stroke:1px #fff6c7;text-shadow:4px 5px 0 #a45d31,8px 10px 0 #28143e,0 0 35px #d9b7ff70}
.sv-home-copy h2 span{color:#fff3a4}
.sv-home-copy p{font-size:clamp(11px,1.4vw,16px);color:#fff;margin:22px auto 18px;max-width:570px;line-height:1.7}
.sv-home-cta{border:2px solid #fff0a6;background:linear-gradient(180deg,#ffdf78,#f6a849);color:#241334;font-weight:900;letter-spacing:1px;padding:13px 22px;cursor:pointer;box-shadow:0 6px 0 #3b2459;transition:transform .18s}
.sv-home-cta span{margin-left:18px;font-size:16px}
.sv-home-cta:hover{transform:translateY(-2px)}
.sv-home-footer{position:absolute;z-index:2;left:25px;right:25px;bottom:20px;display:flex;justify-content:space-between;color:#fff;font-size:9px;letter-spacing:2px;font-weight:800}
.sv-home-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#fff;color:#211332;font-size:31px;line-height:1;cursor:pointer;box-shadow:0 4px 18px #0006}
.sv-home-prev{left:15px}.sv-home-next{right:15px}
.sv-home-dots{position:absolute;z-index:4;bottom:54px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.sv-home-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#ffffff70;cursor:pointer}
.sv-home-dots button.active{background:#fff4a6;box-shadow:0 0 10px #fff}
.sv-home-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px;padding:0 2px}
.sv-home-intro h2{font:600 clamp(22px,3vw,30px) 'Metal Mania',serif;margin:8px 0;color:#f4eaff}
.sv-home-intro p{margin:0;color:#9c94ab;font-size:12px;line-height:1.7}
.sv-home-outline{flex-shrink:0;background:transparent;border:1px solid #77619d;color:#e8dcff;padding:12px 16px;cursor:pointer;font-weight:700;font-size:11px}
.sv-home-outline span{margin-left:16px}
.sv-home-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.sv-home-shortcut{position:relative;min-height:145px;text-align:left;padding:18px;background:linear-gradient(135deg,#171222,#0c0b10);border:1px solid #302442;color:#eee7ff;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:7px;transition:.2s}
.sv-home-shortcut:hover{transform:translateY(-3px);border-color:#9274c5;background:linear-gradient(135deg,#211832,#0c0b10)}
.sv-shortcut-icon{position:absolute;right:17px;top:14px;font-size:31px;color:#c5a7ff}
.sv-home-shortcut small{font-size:8px;letter-spacing:2px;color:#b69ae7;font-weight:800}
.sv-home-shortcut b{font:600 18px 'Metal Mania',serif}
.sv-home-shortcut>span:last-child{font-size:11px;color:#8d849d;margin-top:3px}
@media(max-width:900px){.sv-home-banner{height:500px;min-height:430px}.sv-home-copy{left:10%;right:10%}.sv-home-orbit{width:120%}.sv-home-shortcuts{gap:9px}.sv-home-shortcut{padding:14px}}
@media(max-width:600px){.sv-home-banner{height:500px;min-height:0;margin-bottom:24px}.sv-home-topline{left:13px;right:13px;top:13px;font-size:8px;letter-spacing:1px}.sv-home-edition{padding:6px 8px}.sv-home-copy{top:48%;left:12%;right:12%}.sv-home-copy h2{font-size:clamp(39px,12vw,66px);letter-spacing:-2px}.sv-home-copy p{font-size:11px;margin:17px auto}.sv-home-card-silhouette{top:43%;width:150px}.sv-home-arrow{width:34px;height:34px;font-size:25px}.sv-home-prev{left:7px}.sv-home-next{right:7px}.sv-home-footer{left:13px;right:13px;bottom:15px;font-size:7px;letter-spacing:1px}.sv-home-dots{bottom:40px}.sv-home-intro{align-items:flex-start;flex-direction:column}.sv-home-shortcuts{grid-template-columns:1fr}.sv-home-shortcut{min-height:118px}.sv-home-outline{align-self:flex-start}}


/* ===== ARTIST DIRECTORY (isolated styles; does not alter existing card/deck rules) ===== */
.artist-toolbar{display:flex;gap:12px;margin:18px 0 22px;flex-wrap:wrap}
.artist-toolbar .search-wrap{min-width:220px}
.artist-toolbar select{background:#101010;color:#c8c1b5;border:1px solid #28241d;padding:0 14px;min-width:200px;outline:none}
.artist-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}
.artist-profile-card{display:flex;align-items:flex-start;gap:0;padding:17px;background:#101010;border:1px solid #28231a;min-width:0;flex-wrap:wrap}
.artist-profile-copy{flex:1;min-width:130px}
.artist-profile-copy h3{margin:0 0 7px;color:var(--gold2);font:600 16px 'Metal Mania';overflow-wrap:anywhere}
.artist-profile-copy p{margin:0 0 8px;color:#a29b90;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.artist-profile-copy small,.artist-contact-missing{display:block;color:#746d62;font-size:10px;margin-bottom:9px}
.artist-contact-link{display:inline-block;color:var(--gold2);font-size:11px;text-decoration:none;border-bottom:1px solid #6d5428;padding:5px 0;overflow-wrap:anywhere}
.artist-contact-link:hover{color:#fff0bd}
.artist-view-cards{align-self:flex-end;background:#17130c;border:1px solid #49391f;color:#d9bd73;padding:9px 11px;font-size:10px;cursor:pointer}
.artist-view-cards:hover{border-color:var(--gold)}
.artist-cards-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #28231a;margin:15px 0;padding-bottom:10px}
.artist-cards-heading h3{font:600 18px 'Metal Mania';margin:0;color:#e5d5af}
.artist-cards-heading span{font-size:11px;color:var(--muted)}
.detail-artist-contact{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px;border:1px solid #302719;background:#0c0c0c}
.detail-artist-contact small{display:block;color:#7e7669;font-size:8px;letter-spacing:1.3px;margin-bottom:5px}
.detail-artist-contact b{font-size:12px;color:#e8dfce;overflow-wrap:anywhere}
.detail-artist-contact .artist-contact-link{margin-left:auto}
@media(max-width:850px){.artist-profile-grid{grid-template-columns:1fr}}
@media(max-width:600px){.artist-profile-card{gap:10px;padding:12px}.artist-view-cards{width:100%}.artist-toolbar select{width:100%;height:40px}.detail-artist-contact{align-items:flex-start;flex-direction:column}.detail-artist-contact .artist-contact-link{margin-left:0}}


/* Artist directory: use each artist's first available card artwork as the profile-card background */
.artist-profile-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#101010;
}
.artist-profile-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--artist-bg-image);
  background-size:cover;
  background-position:center 35%;
  opacity:.42;
  transition:transform .35s ease, opacity .25s ease;
}
.artist-profile-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.82) 58%,rgba(10,10,10,.52) 100%);
  pointer-events:none;
}
.artist-profile-card:hover::before{transform:scale(1.04);opacity:.55}
.artist-profile-copy,.artist-view-cards{position:relative;z-index:1}

/* Banner is image-first: promotional text and CTA removed; carousel controls remain. */
.sv-home-banner:before,.sv-home-banner:after{display:none}
.sv-home-copy,.sv-home-topline,.sv-home-footer{display:none!important}

/* ===== SOULVAULT HOME: supplied spirit frame overlay ===== */
.sv-home-banner{border:0!important;background:#050406!important;overflow:hidden;isolation:isolate}
.sv-home-banner-image{z-index:0!important;inset:5.5% 5.5%!important;width:89%!important;height:89%!important;object-fit:cover!important;object-position:center!important}
.sv-home-banner-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;pointer-events:none;user-select:none}
.sv-home-banner .sv-home-arrow,.sv-home-banner .sv-home-dots{z-index:3!important}
.sv-home-banner:before,.sv-home-banner:after{z-index:0!important;pointer-events:none}


/* ===== HOME SHORTCUT BUTTONS: supplied silver spirit frame ===== */
.sv-home-banner-image{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 35%!important}
.sv-home-shortcut{
  position:relative;
  z-index:0;
  isolation:isolate;
  overflow:visible;
  border:0!important;
  border-image-source:url("/public/images/logo/soulvault-shortcut-frame.png");
  border-image-slice:18% 16% 18% 16%;
  border-image-width:30px 34px 30px 34px;
  border-image-outset:7px 8px 7px 8px;
  border-image-repeat:stretch;
  background:#080808!important;
  color:#eee7ff;
  padding:18px 28px;
  transition:transform .2s ease,filter .2s ease;
}
.sv-home-shortcut:hover{
  transform:translateY(-3px);
  border-color:transparent!important;
  background:#080808!important;
  filter:brightness(1.12) drop-shadow(0 0 7px rgba(178,205,230,.22));
}
.sv-home-shortcut:focus-visible{outline:2px solid #c6d5e5;outline-offset:5px}
@media(max-width:900px){.sv-home-shortcut{padding:16px 25px;border-image-width:26px 29px 26px 29px;border-image-outset:6px}}
@media(max-width:600px){.sv-home-shortcut{padding:16px 25px;min-height:118px;border-image-width:24px 26px 24px 26px;border-image-outset:5px}}


/* ===== HOW TO PLAY: use the same silver spirit frame on section shortcut buttons only ===== */
.howtoplay-navcards a{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border:0!important;
  border-image-source:url("/public/images/logo/soulvault-shortcut-frame.png");
  border-image-slice:18% 16% 18% 16%;
  border-image-width:22px 27px 22px 27px;
  border-image-outset:4px 5px 4px 5px;
  border-image-repeat:stretch;
  background:#080808!important;
  color:#d9b86d;
  padding:12px 24px;
  transition:transform .2s ease,filter .2s ease;
}
.howtoplay-navcards a:hover{
  border-color:transparent!important;
  background:#080808!important;
  color:#f0d79a;
  transform:translateY(-2px);
  filter:brightness(1.12) drop-shadow(0 0 7px rgba(178,205,230,.22));
}
.howtoplay-navcards a:focus-visible{outline:2px solid #c6d5e5;outline-offset:5px}
.howtoplay-navcards a span{position:relative;z-index:1}
@media(max-width:760px){.howtoplay-navcards a{padding:12px 22px;border-image-width:20px 24px 20px 24px;border-image-outset:3px 4px}}
@media(max-width:380px){.howtoplay-navcards a{padding:10px 20px;border-image-width:18px 22px 18px 22px;border-image-outset:3px}}


/* ===== TARGETED FIX: remove arrow controls and improve mobile banner touch ===== */
.sv-home-arrow{display:none!important}
.sv-home-banner{touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv-home-banner-image,.sv-home-banner-frame{pointer-events:none!important}
.sv-home-banner .sv-home-dots{z-index:10!important;pointer-events:auto!important}
.sv-home-dots button{position:relative;z-index:11;min-width:14px;min-height:14px;touch-action:manipulation;pointer-events:auto}
@media(max-width:600px){
  .sv-home-banner{cursor:pointer;touch-action:pan-y}
  .sv-home-banner .sv-home-dots{bottom:max(18px,env(safe-area-inset-bottom));gap:12px;padding:10px 14px}
  .sv-home-dots button{width:10px;height:10px;min-width:18px;min-height:18px;background-clip:content-box;padding:4px}
}


/* ซ่อนรายการการ์ดของนักวาดไว้ จนกว่าจะกดปุ่มดูการ์ดของนักวาดคนนั้น */
#artists .artist-cards-heading[hidden],
#artists #artistCardGrid[hidden] { display: none !important; }


/* ซ่อนข้อความแจ้งว่าไม่พบการ์ดในหน้า Artists โดยไม่กระทบส่วนอื่น */
#artists #artistEmpty { display: none !important; }


/* ===== NEWS PAGE (isolated) ===== */
.news-section .deck-header { margin-bottom: 24px; }
.news-empty {
  min-height: 280px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #100e0b, #090909);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
}
.news-empty-symbol { color: var(--gold); font-size: 34px; margin-bottom: 12px; }
.news-empty h3 { color: var(--gold2); font-size: 20px; margin: 0 0 10px; }
.news-empty p { color: var(--muted); font-size: 12px; margin: 0; }

/* ===== COLLAPSIBLE LEFT MENU ON ALL SCREEN SIZES ===== */
.sidebar {
  transform: translateX(-100%);
  transition: transform .22s ease;
  box-shadow: 16px 0 40px #0008;
}
.sidebar.open { transform: translateX(0); }
main { margin-left: 0; padding: 72px 42px 60px; }
.mobile-menu {
  display: block;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border: 1px solid #5c4724;
  border-radius: 6px;
  background: #100e0b;
  color: var(--gold2);
  box-shadow: 0 4px 18px #0009;
  cursor: pointer;
}
.mobile-menu:hover { background: #21190d; }
@media(max-width:720px) {
  main { margin-left: 0; padding: 70px 14px 60px; }
}


/* ===== NEWS CARDS (bounded images; scoped to News only) ===== */
#newsGrid.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
#newsGrid .news-card{min-width:0;max-width:100%;background:#101010;border:1px solid #302719;overflow:hidden;transition:border-color .2s,transform .2s}
#newsGrid .news-card:hover{border-color:#8b692f;transform:translateY(-3px)}
#newsGrid .news-card-media{width:100%;height:180px!important;max-height:180px;min-height:0;background:linear-gradient(135deg,#21190d,#090909);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
#newsGrid .news-card-image{width:100%!important;height:100%!important;max-width:100%!important;max-height:180px!important;object-fit:contain!important;display:block!important;flex:0 1 auto}
#newsGrid .news-card-no-image{color:var(--gold);font:24px 'Metal Mania';letter-spacing:2px}
#newsGrid .news-image-missing{background:linear-gradient(135deg,#21190d,#090909)}
#newsGrid .news-card-body{padding:18px}
#newsGrid .news-card-date{font:11px 'Kanit',sans-serif;color:var(--gold);letter-spacing:1px;margin-bottom:9px}
#newsGrid .news-card h3{font:600 19px 'Chonburi','Kanit',sans-serif;color:var(--gold2);margin:0 0 10px;line-height:1.5}
#newsGrid .news-card p{font:13px/1.8 'Kanit',sans-serif;color:#b2aa9c;margin:0;white-space:pre-line}
@media(max-width:1000px){#newsGrid.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#newsGrid.news-grid{grid-template-columns:1fr}#newsGrid .news-card-media{height:160px!important;max-height:160px}#newsGrid .news-card-image{max-height:160px!important}#newsGrid .news-card-body{padding:15px}}


/* ===== NEWS DETAIL VIEW (scoped to News page only) ===== */
#newsGrid .news-card{cursor:pointer}
#newsGrid .news-read-more{display:inline-block;margin-top:14px;color:var(--gold);font:12px 'Kanit',sans-serif}
#newsGrid .news-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.news-detail{margin-top:10px}
.news-back-btn{border:1px solid #5c4724;background:#100e0b;color:var(--gold2);padding:10px 14px;font:13px 'Kanit',sans-serif;cursor:pointer;margin-bottom:18px}
.news-back-btn:hover{background:#21190d;border-color:var(--gold)}
.news-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;border:1px solid #302719;background:#101010;padding:22px}
.news-detail-media{min-width:0;min-height:220px;max-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#21190d,#090909)}
.news-detail-image{display:block;max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain}
.news-detail-no-image{font:28px 'Metal Mania';letter-spacing:2px;color:var(--gold)}
.news-detail-content{min-width:0;padding:8px 4px}
.news-detail-content h2{font:600 28px 'Chonburi','Kanit',sans-serif;color:var(--gold2);line-height:1.5;margin:8px 0 0;overflow-wrap:anywhere}
.news-detail-divider{height:1px;background:#302719;margin:20px 0}
.news-detail-content p{font:15px/2 'Kanit',sans-serif;color:#c3bbae;white-space:pre-line;overflow-wrap:anywhere;margin:0}
@media(max-width:800px){.news-detail-layout{grid-template-columns:1fr;padding:14px;gap:16px}.news-detail-media{max-height:360px;min-height:160px}.news-detail-image{max-height:360px}.news-detail-content h2{font-size:23px}}


/* ===== NEWS DETAIL SLIDESHOW + LINKS (scoped to news page) ===== */
#newsDetailMedia{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px;min-height:220px}
#newsDetailMedia .news-detail-image{max-width:100%;max-height:500px;width:auto;height:auto;object-fit:contain;margin:auto}
#newsDetailMedia .news-detail-image.news-image-broken{display:none}
.news-slideshow-controls{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:5px 0}
.news-slide-arrow{width:32px;height:30px;border:1px solid #5c4724;background:#100e0b;color:var(--gold2);font-size:23px;line-height:1;cursor:pointer}
.news-slide-arrow:disabled{opacity:.35;cursor:default}
.news-slide-counter{font:12px 'Kanit',sans-serif;color:#b7a477;min-width:45px;text-align:center}
.news-detail-links{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:22px}
.news-links-heading{margin:0;color:var(--gold);font:600 13px 'Kanit',sans-serif}
.news-detail-link{display:inline-block;color:var(--gold2);font:13px/1.7 'Kanit',sans-serif;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.news-detail-link:hover{color:#fff}
@media(max-width:800px){#newsDetailMedia{min-height:160px;padding:8px}#newsDetailMedia .news-detail-image{max-height:330px}}

/* ===== UNIFIED CARD FILTER PANELS — isolated visual update ===== */
/* Shared panel treatment for card filters on List Card, Collection, Artists and Deck Building. */
#roster .toolbar,
#collection .collection-toolbar,
#artists .artist-toolbar,
#deck .card-picker{
  border:1px solid #3b3326;
  border-radius:16px;
  background:linear-gradient(145deg,#15130f 0%,#0d0d0c 100%);
  box-shadow:0 5px 0 rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.025);
  padding:16px;
}

/* Main card list: search takes a full row; filters align in a clean grid below it. */
#roster .toolbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 22px;
}
#roster .toolbar .search-wrap{
  grid-column:1 / -1;
  min-width:0;
  min-height:48px;
  border:1px solid #40372a;
  border-radius:10px;
  background:#090909;
}
#roster .toolbar .search-wrap input{min-width:0;padding:13px 10px}
#roster .toolbar select,
#collection .collection-toolbar select,
#artists .artist-toolbar select,
#deck .card-picker select,
#deck .card-picker input{
  width:100%;
  min-width:0;
  min-height:46px;
  border:1px solid #40372a;
  border-radius:10px;
  background:#090909;
  color:#e7dfd1;
  padding:0 13px;
  outline:none;
  font:400 13px 'Kanit','Chonburi',Arial,sans-serif;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
#roster .toolbar select:focus,
#collection .collection-toolbar select:focus,
#artists .artist-toolbar select:focus,
#deck .card-picker select:focus,
#deck .card-picker input:focus,
#roster .toolbar .search-wrap:focus-within,
#collection .collection-toolbar .search-wrap:focus-within,
#artists .artist-toolbar .search-wrap:focus-within{
  border-color:#a8833d;
  box-shadow:0 0 0 2px rgba(217,173,82,.12);
}
#roster .clear-filter-btn,
#collection .clear-filter-btn,
#deck .card-picker .clear-filter-btn{
  min-height:42px;
  height:auto;
  border-radius:9px;
  padding:10px 14px;
  font:600 11px 'Kanit','Chonburi',Arial,sans-serif;
}

/* Collection: keep the existing controls and IDs, only improve their layout and appearance. */
#collection .collection-toolbar{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:20px 0 22px;
}
#collection .collection-toolbar .search-wrap{
  grid-column:1 / -1;
  min-width:0;
  min-height:48px;
  border:1px solid #40372a;
  border-radius:10px;
  background:#090909;
}
#collection .collection-toolbar .search-wrap input{min-width:0;padding:13px 10px}
#collection .collection-toolbar .clear-filter-btn{grid-column:1 / -1;justify-self:start}

/* Artists: visually match the card-filter panels without changing artist selection logic. */
#artists .artist-toolbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:10px;margin:18px 0 22px}
#artists .artist-toolbar .search-wrap{min-width:0;min-height:46px;border-radius:10px;background:#090909;border:1px solid #40372a}
#artists .artist-toolbar .search-wrap input{min-width:0}

/* Deck builder: keep its picker sticky and functional, with a matching filter group. */
#deck .card-picker{border-radius:14px}
#deck .card-picker .picker-title{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #302719}
#deck .card-picker input,#deck .card-picker select{margin-bottom:9px}
#deck .card-picker .clear-filter-btn{width:100%;margin:1px 0 12px}

@media(max-width:900px){
  #roster .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  #collection .collection-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  #roster .toolbar,
  #collection .collection-toolbar,
  #artists .artist-toolbar{grid-template-columns:minmax(0,1fr);padding:12px;gap:9px}
  #roster .toolbar .search-wrap,
  #collection .collection-toolbar .search-wrap,
  #collection .collection-toolbar .clear-filter-btn{grid-column:1}
  #collection .collection-toolbar .clear-filter-btn{justify-self:stretch}
  #roster .toolbar select,
  #collection .collection-toolbar select,
  #artists .artist-toolbar select{min-height:44px}
}


/* ===== Numeric card filters: cost and power, isolated from existing controls ===== */
.numeric-filter-group{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;padding:12px;border:1px solid #342b1d;border-radius:11px;background:rgba(0,0,0,.24)}
.numeric-filter-group>label{display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--gold2,#d8b25d);font:600 12px 'Kanit','Chonburi',Arial,sans-serif}
.numeric-filter-group>label>span{color:#81796c;font-size:10px;font-weight:400}
.numeric-filter-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.numeric-filter-inputs input{width:100%;min-width:0;height:38px;border:1px solid #40372a;border-radius:8px;background:#090909;color:#eee5d4;padding:0 9px;font:400 12px 'Kanit','Chonburi',Arial,sans-serif;outline:none}
.numeric-filter-inputs input:focus{border-color:#a8833d;box-shadow:0 0 0 2px rgba(217,173,82,.12)}
.numeric-filter-inputs>span{color:#8d8069;font-size:12px}
#deck .numeric-filter-group{margin:2px 0 10px}
#artists .numeric-filter-group{grid-column:1/-1}
@media(max-width:600px){.numeric-filter-group{grid-template-columns:minmax(0,1fr)}.numeric-filter-inputs input{height:42px}}


/* Initial home view: show the actual center of the banner image */
.sv-home-banner-image {
  object-position: center center;
}


/* Logo replaces the Home menu item as the way back to the Home section */
#siteLogo {
  cursor: pointer;
}
#siteLogo:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 5px;
  border-radius: 4px;
}


/* Show the Official / Welcome heading only on Home and List Card */
.topbar .page-welcome-heading { display: none; }
body.show-page-welcome-heading .topbar .page-welcome-heading { display: block; }
.text-red {
    color: #ff3333;
	-webkit-text-stroke: 0.05px white;
}


/* How To Play: enlarge only the detailed rules in the basics section */
#ht-start > p {
  font-size: 16px;
  line-height: 1.9;
}
@media (max-width: 720px) {
  #ht-start > p { font-size: 15px; }
}