/* Material kit, iteration 1. Decorative layers never own input or game state. */
.shell-frame{display:none}
.cv-faction,.cv-stat-label,.cv-meta-label,.shell-xp,.shell-strip-nav{display:none}

body.pc{
  --shell-trim:url('shell/materials/panel.svg');
  --shell-trim-active:url('shell/materials/panel-active.svg');
  --shell-steel:url('shell/materials/steel.webp');
}
body.pc::before{background:linear-gradient(180deg,#0b142426,#08132152)}

/* Nine-slice edges retain their bevels at every supported desktop size. */
body.pc .screen{
  position:relative;border-color:transparent;
  background-image:linear-gradient(125deg,#263044f2,#121b2af9 75%),var(--shell-steel);
  background-size:auto,360px 360px;
  box-shadow:0 2px 0 #050c17,0 12px 30px #0008;
}
body.pc .screen::after{
  content:'';position:absolute;inset:0;z-index:20;pointer-events:none;
  border:14px solid transparent;border-image:var(--shell-trim) 24 stretch;
}
body.pc .screen .shead{border-bottom:1px solid #8291ab22;margin-bottom:3px}
body.pc .shead h1{text-shadow:0 2px 2px #050b15;font-weight:600}
body.pc .shell-subtitle{color:#9daecb}

body.pc .nav,
body.pc .top .center{
  border-color:transparent;
  border-image:var(--shell-trim) 24 / 13px stretch;
  background-image:linear-gradient(145deg,#263347ed,#111b2af5),var(--shell-steel);
  background-size:auto,300px 300px;
  box-shadow:0 4px 0 #09101c,0 8px 16px #0007;
}
body.pc .nav{padding:6px 5px}
body.pc .nav button.active{
  border-color:transparent;
  border-image:var(--shell-trim-active) 24 / 12px stretch;
  background:linear-gradient(130deg,#344d58,#1b2b39 58%,#152430);
  box-shadow:inset 0 0 18px #7abfc20c,0 3px 6px #0005;
}
body.pc .nav button img.ng{filter:drop-shadow(0 3px 2px #000a);opacity:1}

body.pc .ucard:has(>.shell-frame){
  padding:10px;border:0;border-radius:8px;isolation:isolate;
  background:linear-gradient(120deg,#263244,#0d1725 70%);
  box-shadow:0 5px 0 #070e19,0 9px 12px #02071099;
}
body.pc .ucard:has(>.shell-frame)::after{display:none}
body.pc .shell-frame{
  display:block;position:absolute;inset:0;z-index:7;pointer-events:none;
  border:22px solid transparent;border-image:var(--shell-frame-image) 32 stretch;
}
.shell-frame[data-rarity="common"]{--shell-frame-image:url('shell/materials/frame-common.svg')}
.shell-frame[data-rarity="uncommon"]{--shell-frame-image:url('shell/materials/frame-uncommon.svg')}
.shell-frame[data-rarity="rare"]{--shell-frame-image:url('shell/materials/frame-rare.svg')}
.shell-frame[data-rarity="heroic"]{--shell-frame-image:url('shell/materials/frame-heroic.svg')}
.shell-frame[data-rarity="legendary"]{--shell-frame-image:url('shell/materials/frame-legendary.svg')}

body.pc .ucard .art{
  border:0;border-radius:1px;
  box-shadow:0 0 0 1px #07101e,0 1px 0 #a8b6c033;
}
body.pc .ucard .artimg{filter:saturate(.86) brightness(.98)}
body.pc .shell-name{
  margin-top:0;padding:8px 2px 7px;
  background-image:linear-gradient(#283449ee,#141e2bf7),var(--shell-steel);
  background-size:auto,240px 240px;
  border-top:1px solid color-mix(in srgb,var(--r) 65%,#e3e4dd);
  border-bottom:1px solid #6f7b8e66;
  color:#f1eee6;text-shadow:0 2px 2px #030914;
  font-family:var(--font-display);font-weight:500;
}
body.pc .shell-stats{
  margin-top:3px;padding:6px 3px;
  border:1px solid #66748a77;border-radius:3px;
  background:linear-gradient(#0b1524,#1b283a);
  box-shadow:inset 0 1px 2px #0008,0 1px 0 #e3e8ee09;
  color:#f1f2f5;
}
body.pc .shell-stats b{font-weight:500;text-shadow:0 1px 2px #000}
body.pc .ucard .lvbar{padding:5px 3px 2px;background:#142032}
body.pc .ucard .lvbar .lvfill{opacity:.25}
body.pc .ucard .lvbar .potential-stars{color:#6d819d}
body.pc .ucard .lvbar .potential-stars .on{filter:drop-shadow(0 1px 1px #080d16)}

body.pc .shell-badge,body.pc .shell-mana{
  z-index:8;top:-9px;width:44px;height:49px;
  filter:drop-shadow(0 3px 2px #0008);
}
body.pc .shell-badge{left:-9px}
body.pc .shell-mana{
  right:-9px;clip-path:none;
  background:transparent url('shell/materials/mana-socket.svg') center/contain no-repeat;
  color:#f3f8ff;font-size:25px;font-weight:600;padding-bottom:2px;box-sizing:border-box;
  text-shadow:0 2px 2px #112c4e;
}
body.pc .shell-ability{
  right:4px;bottom:5px;border-color:#a6b2bf99;
  background:linear-gradient(#243346ed,#101c2bed);
  border-radius:3px;box-shadow:inset 0 1px #e4e8ee22,0 2px 3px #0007;
}
body.pc .manabar{
  height:35px;border-color:#68748a;border-radius:4px;
  background:linear-gradient(#111b2a,#1c2738);
  box-shadow:inset 0 1px 3px #0006,0 1px 0 #d7e3ec14;
}
body.pc .manabar .mtrack{border-radius:3px;background:#0e1825}
body.pc .manabar .mtrack i{background:linear-gradient(#83bfca,#4c96a4);box-shadow:inset 0 1px #d0edf075}
body.pc .modes{gap:12px}
body.pc .mode{
  height:46px;border-color:transparent;border-radius:3px;
  border-image:var(--shell-trim) 24 / 11px stretch;
  background-image:linear-gradient(#30354aef,#182333f7),var(--shell-steel);
  background-size:auto,220px 220px;
  box-shadow:0 3px 0 #09111c,0 5px 7px #0004;
  transition:background-color .14s ease,filter .14s ease;
}
body.pc .mode.on{
  border-image-source:var(--shell-trim-active);
  background-image:linear-gradient(#36515af2,#1b303df7),var(--shell-steel);
  box-shadow:0 3px 0 #09151f,0 5px 8px #0004;
}
body.pc .mode:hover{filter:brightness(1.1)}
body.pc .mode:active{filter:brightness(.92)}
body.pc .work{
  border-top:1px solid #96a5bb66;border-radius:0;
  background:linear-gradient(125deg,#313c4d55,#101a2966);
  box-shadow:inset 0 1px #080f1c;
}
body.pc .shell-reserve{font-weight:500;text-shadow:0 1px 2px #07101c}

body.pc #deck .strip .ucard:has(>.shell-frame){padding:6px}
body.pc .strip .shell-badge,body.pc .strip .shell-mana{width:28px;height:31px;top:-6px;font-size:16px}
body.pc .strip .shell-badge{left:-6px}
body.pc .strip .shell-mana{right:-6px;padding-bottom:1px}
body.pc .strip .shell-stats{margin-top:2px;padding:3px 1px}
body.pc .strip .ucard .lvbar{padding:3px 1px 1px}
body.pc .strip .ucard .artimg{filter:saturate(.86) brightness(.98)}

/* A populated workshop slot shows the card's rarity, with no second coloured frame. */
body.pc .ritual-shell:has(.shell-frame)>.ritual-frame{display:none}
body.pc #top-fuse .ritual-shell:has(.shell-frame),
body.pc #top-burn .ritual-shell:has(.shell-frame){background:#121d2b;box-shadow:none}
body.pc .bslot.hot .ritual-shell:has(.shell-frame){outline:2px solid var(--teal);outline-offset:2px}
/* The engine's inline height reserves the old compact card height. Let filled desktop slots fit. */
body.pc #top-fuse:has(.shell-frame),body.pc #top-burn:has(.shell-frame){height:auto!important;padding-bottom:60px}

@media(min-width:1000px) and (max-height:800px){
  body.pc .shell-name{padding:5px 1px}
  body.pc .shell-stats{padding:4px 2px}
  body.pc .ucard .lvbar{padding:3px 2px 1px}
  body.pc .strip .shell-stats{padding:3px 1px}
}
@media(min-width:1000px) and (max-width:1199px){
  body.pc .shell-badge,body.pc .shell-mana{width:35px;height:40px;font-size:21px}
  body.pc .strip .shell-badge,body.pc .strip .shell-mana{width:25px;height:28px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){body.pc .mode{transition:none}}

/* Small metal objects have the same light direction as card frames and panels. */
body.pc .nav button img.ng{width:64px;height:64px}
body.pc .nav button:not(.active) img.ng{filter:saturate(.65) drop-shadow(0 3px 2px #000b)}
body.pc .nav button:hover img.ng{filter:brightness(1.12) drop-shadow(0 3px 2px #000b)}
body.pc .mode .mimg{filter:drop-shadow(0 2px 1px #000b)}
body.pc .top .res-ic{width:33px;height:33px;filter:drop-shadow(0 2px 1px #0009)}
body.pc .nav button:focus-visible,body.pc .mode:focus-visible,body.pc .ico-btn:focus-visible{
  outline:2px solid #b3e1df;outline-offset:3px;
}
body.pc .mode:disabled{opacity:.5;filter:saturate(.2);cursor:not-allowed}
body.pc .nav button:active img.ng{transform:translateY(1px)}

/* A temporary, centred card dialog. The underlying section keeps its full width. */
body.pc #cardview{
  position:fixed;inset:0;padding:32px;box-sizing:border-box;
  align-items:center;justify-content:center;overflow-y:auto;
  background:#060e1bd9;backdrop-filter:blur(8px);
}
body.pc #cardview .cv-card{
  position:relative;flex:none;display:grid;
  grid-template-columns:minmax(240px,.95fr) minmax(280px,1fr);
  grid-template-rows:auto auto auto auto auto minmax(0,1fr);
  gap:16px 28px;width:min(900px,100%);max-width:900px;
  height:min(670px,calc(100dvh - 64px));min-height:500px;
  padding:26px;box-sizing:border-box;margin:0;
  border:1px solid transparent;border-image:var(--shell-trim) 24 / 15px stretch;
  background-image:linear-gradient(130deg,#2a3548f5,#142132fa),var(--shell-steel);
  background-size:auto,350px 350px;
  box-shadow:0 20px 70px #000b;
}
body.pc #cardview .cv-head{grid-column:2;grid-row:1;gap:10px;margin:0;align-items:flex-start}
body.pc #cardview .cv-back{
  order:3;width:36px;height:38px;border-radius:3px;
  border:1px solid #7d8da077;background:linear-gradient(#344257,#192738);
  color:#e1e8ec;box-shadow:0 2px 3px #0005;
}
body.pc #cardview .cv-name{
  order:1;padding:2px 0;background:none;border:0;box-shadow:none;
  font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);
  font-weight:500;line-height:1.2;white-space:normal;text-align:left;overflow:visible;color:#ede9dc;
}
body.pc #cardview .cv-patt{order:2;width:38px;height:42px;background:none;border:0;box-shadow:none}
body.pc #cardview .cv-patt .cv-sigil{width:38px;height:42px}
body.pc #cardview .cv-faction{
  display:block;grid-column:2;grid-row:2;color:#a8b9cc;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid #8d9ab140;
}
body.pc #cardview .cv-art{
  grid-column:1;grid-row:1 / 7;margin:0;border:0;border-radius:0;
  min-height:0;background:#142132;box-shadow:0 5px 12px #0008;
}
body.pc #cardview .cv-bigart{inset:9px;filter:none}
body.pc #cardview .artclip{border-radius:0}
body.pc #cardview .artimg{object-fit:cover;object-position:50% 24%}
body.pc #cardview .cv-arrows{position:absolute;inset:0;z-index:8}
body.pc #cardview .cv-rar{grid-column:2;grid-row:3;margin:0;flex-wrap:wrap}
body.pc #cardview .cv-rname{font-size:20px;font-weight:500}
body.pc #cardview .cv-pips{align-items:center;gap:4px}
body.pc #cardview .cv-meta-label{display:inline;color:#9dafc2;font-size:15px;margin-right:5px}
body.pc #cardview .cv-pip{font-size:15px;color:#56647a}
body.pc #cardview .cv-pip.on{color:#cfb479;text-shadow:0 1px 2px #0009}
body.pc #cardview .cv-lvl{grid-column:2;grid-row:4;margin:0;gap:12px;flex-wrap:wrap}
body.pc #cardview .cv-star{font-size:16px;filter:none}
body.pc #cardview .cv-lvtxt{color:#d0d9e1}
body.pc #cardview .cv-xp{flex-basis:100%;height:6px;background:#101c2b;border-color:#5c6b8055;border-radius:2px}
body.pc #cardview .cv-xp i{background:linear-gradient(90deg,#7e7254,#c6b782)}
body.pc #cardview .cv-stats{
  grid-column:2;grid-row:5;margin:3px 0 0;gap:0;padding:14px 3px;
  background:linear-gradient(#101c2c,#213148);border:1px solid #8193a45c;border-radius:3px;
  box-shadow:inset 0 1px 3px #0006;
}
body.pc #cardview .cv-stat{display:grid;grid-template-columns:26px auto;gap:5px;justify-content:center;flex:1}
body.pc #cardview .cv-stat+.cv-stat{border-left:1px solid #8291a133}
body.pc #cardview .cv-stat b{font-size:25px;font-weight:500;color:#edf0ef;align-self:center}
body.pc #cardview .cv-ic{width:26px;height:30px}
body.pc #cardview .cv-stat-label{display:block;grid-column:1 / 3;text-align:center;color:#a6b8cb;font-size:15px;font-weight:400}
body.pc #cardview .cv-desc{
  grid-column:2;grid-row:6;margin:0;padding:15px 0 0;border-top:1px solid #8d9ab140;
  text-align:left;color:#d4dee6;font-family:inherit;font-style:normal;font-size:16px;line-height:1.65;
  overflow-y:auto;scrollbar-width:thin;
}
body.pc #cardview .cv-desc::before{content:attr(data-label);display:block;margin-bottom:7px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#9eb1c5}
@media(prefers-reduced-motion:reduce){
  body.pc #cardview.open,body.pc #cardview .cv-card{animation:none}
}