/* Full-art collection cards. Mechanical state and card-depth transforms stay owned
   by their existing controllers; these layers are purely visual. */
.game-shell :is(.collection-grid,.deck-card-grid,.tools-grid) {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
  align-items:stretch;
  gap:22px 18px;
}
.game-shell :is(.monster-card,.tool-card).relic-card {
  --frame-bright:#c6a56c;
  --frame-mid:#806444;
  --frame-dark:#2f2922;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  min-height:382px;
  height:100%;
  padding:8px;
  gap:0;
  overflow:hidden;
  text-align:left;
  color:#ede8dd;
  border:1px solid #a48a608c;
  border-top-width:1px;
  border-left-width:1px;
  border-radius:11px 4px 11px 4px;
  background:linear-gradient(135deg,#ad8d59 0%,#3a332a 12%,#817052 20%,#171d20 45%,#675438 76%,#ac8954 89%,#242a2a);
  box-shadow:inset 0 0 0 1px #ebd8a336,inset 0 0 0 4px #0b1111,0 4px 0 #070c0e,0 12px 22px #0008;
}
.game-shell .relic-card .relic-frame {
  position:absolute;
  z-index:5;
  inset:4px;
  border:1px solid #c4a26980;
  border-radius:8px 2px 8px 2px;
  box-shadow:inset 0 0 0 2px #1a2421,inset 0 0 0 3px #c2a27538;
  background:linear-gradient(135deg,#e5c289 0 6px,transparent 6px) top left,
    linear-gradient(225deg,#e5c289 0 6px,transparent 6px) top right,
    linear-gradient(45deg,#b68a4f 0 6px,transparent 6px) bottom left,
    linear-gradient(315deg,#b68a4f 0 6px,transparent 6px) bottom right;
  background-size:19px 19px;
  background-repeat:no-repeat;
  pointer-events:none;
}
.game-shell .relic-card .card-art {
  position:absolute;
  z-index:0;
  inset:8px;
  width:auto;
  height:auto;
  flex:none;
  border-radius:5px 0 5px 0;
  overflow:hidden;
  background:#18221f;
}
.game-shell .relic-card .card-art .portrait {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 27%;
}
.game-shell .relic-card .card-art::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#070e14a1,transparent 19%,transparent 43%,#081015b3 69%,#080e12 91%),
    linear-gradient(90deg,#03090e66,transparent 19%,transparent 85%,#03090e55);
}
.game-shell .relic-card .relic-topline {
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
  padding:4px;
  min-width:0;
}
.game-shell .relic-card .relic-topline .card-race,
.game-shell .relic-card .relic-topline .card-stars {
  position:static;
  display:flex;
  padding:0;
  border:0;
  background:none;
  letter-spacing:0;
  min-width:0;
}
.game-shell .relic-card .card-race .race-badge {
  gap:4px;
  padding:5px 6px;
  border:1px solid rgba(var(--race-rgb),.65);
  border-radius:4px 0 4px 0;
  background:linear-gradient(140deg,var(--race-dark),#0a1113ed);
  font-size:9px;
  line-height:1;
  text-shadow:0 1px 2px #000;
  box-shadow:0 2px 5px #0007,inset 0 1px 0 rgba(var(--race-rgb),.2);
}
.game-shell .relic-card .card-race .race-emblem { width:14px; height:14px; }
.game-shell .relic-card .card-stars .star-pips {
  border:0;
  border-radius:0;
  gap:3px;
  padding:3px 0;
  background:none;
  filter:drop-shadow(0 2px 2px #000);
}
.game-shell .relic-card .card-stars .star-pips .symbol-star {
  width:17px;
  height:17px;
  padding:3px;
  overflow:visible;
  color:#f9d17b;
  border:1px solid #caa364;
  border-radius:50%;
  background:radial-gradient(circle,#755b30,#2b2519 67%);
  box-shadow:inset 0 1px 2px #eddba344,0 1px 2px #0009;
}
.game-shell .relic-card.monster-card .card-body,
.game-shell .relic-card.tool-card .card-body {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
  flex:1;
  min-width:0;
  min-height:326px;
  padding:112px 7px 5px;
  background:none;
}
.game-shell .relic-card .card-stats {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  padding:0;
  margin:0 -1px 7px;
  border:0;
}
.game-shell .relic-card .card-stats>span {
  display:grid;
  grid-template-columns:14px auto;
  align-items:center;
  justify-content:center;
  align-content:center;
  gap:0 2px;
  position:relative;
  min-width:53px;
  min-height:58px;
  padding:6px 6px 8px;
  border:1px solid #bd9c6399;
  border-radius:8px 8px 18px 18px;
  background:linear-gradient(135deg,#c4a77a3b,transparent 36%),linear-gradient(180deg,#243036,#111d23 70%,#101616);
  box-shadow:inset 0 0 0 2px #171e21,inset 0 0 0 3px #b99c6555,0 3px 0 #151512,0 5px 7px #0009;
}
.game-shell .relic-card .card-stats>span:last-child { border-radius:18px 18px 7px 7px; }
.game-shell .relic-card .card-stats .icon { width:14px; height:14px; }
.game-shell .relic-card .card-stats b { font:800 29px/.95 var(--font-display,system-ui,sans-serif); letter-spacing:-1px; text-shadow:0 2px 1px #000; }
.game-shell .relic-card .card-stats small { display:block; grid-column:1/-1; padding-top:4px; font:700 7px/1 system-ui,sans-serif; color:#c8c5bb; text-align:center; letter-spacing:1px; }
.game-shell .relic-card .relic-nameplate {
  position:relative;
  display:grid;
  align-items:center;
  min-height:51px;
  padding:9px 7px 10px;
  border-top:1px solid #bda3719c;
  border-bottom:1px solid rgba(var(--race-rgb),.65);
  background:linear-gradient(115deg,#36403fed,#172125f5 45%,#273132ed);
  box-shadow:0 2px 0 #0009,inset 0 1px 0 #dbc89d12;
  text-align:center;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
}
.game-shell .relic-card .card-body h3 {
  min-height:0;
  margin:0;
  color:#f5ecd9;
  font:750 16px/1.16 var(--font-display,system-ui,sans-serif);
  letter-spacing:.15px;
  text-wrap:balance;
  overflow-wrap:break-word;
  text-shadow:0 2px 2px #000;
}
.game-shell .relic-card.monster-card .card-effect,
.game-shell .relic-card.tool-card .card-effect {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:62px;
  margin:0;
  padding:9px 0 5px;
  text-align:center;
}
.game-shell .relic-card .card-effect>small:not(.warning) {
  display:block;
  margin:0 0 5px;
  color:#b5ab91;
  font:650 7px/1 system-ui,sans-serif;
  letter-spacing:1.7px;
}
.game-shell .relic-card .card-effect .keyword-list { justify-content:center; gap:4px; }
.game-shell .relic-card .card-effect .keyword {
  justify-content:center;
  gap:4px;
  padding:3px 5px;
  font-size:10px;
  line-height:1.3;
  border-color:rgba(var(--effect-rgb),.25);
  background:#080f17c4;
}
.game-shell .relic-card .card-effect .keyword>.icon { width:12px; height:12px; flex-basis:12px; }
.game-shell .relic-card .card-id {
  position:static;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:5px;
  margin:3px 0 0;
  font:550 7px/1.4 system-ui,sans-serif;
  color:#b0aa99;
  letter-spacing:.7px;
}
.game-shell .relic-card .card-id>span { display:flex; align-items:center; gap:2px; font-size:7px; text-align:right; }
.game-shell .relic-card .card-id .icon { width:9px; height:9px; }
.game-shell .relic-card.monster-card .selected-check,
.game-shell .relic-card.tool-card .selected-check {
  position:absolute;
  z-index:6;
  inset:49px 12px auto auto;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid #fff0c1;
  border-radius:4px 0 4px 0;
  background:linear-gradient(135deg,#f5de9b,#bea268);
  color:#172123;
  box-shadow:0 2px 5px #000a;
}
.game-shell .relic-card .selected-check .icon { width:18px; height:18px; }
.game-shell :is(.monster-card,.tool-card).relic-card.selected {
  border-color:#f0d595;
  background:linear-gradient(135deg,#eed19a,#7a6543 40%,#a98954);
  box-shadow:inset 0 0 0 1px #ffe7ab,0 0 0 2px #e9c47733,0 4px 0 #1c1912,0 12px 25px #0009;
}
.game-shell .relic-card.selected .card-id>span { color:#f2d797; }
.game-shell .relic-card.collection-locked .card-art { filter:grayscale(.8); opacity:.6; }
.game-shell .relic-card.collection-locked .card-id>span { color:#c5beb0; font-size:6px; }
.game-shell .relic-card .exhausted-label { z-index:6; top:45%; bottom:auto; color:#e9dbc4; border:1px solid #9e8762; background:#192020ee; }
.game-shell .relic-card .relic-tool-mark { display:grid; place-items:center; padding:4px; width:26px; height:26px; color:#d1b987; background:#172024dc; border:1px solid #a9905d88; border-radius:3px; }
.game-shell .relic-card .relic-tool-mark .icon { width:15px; height:15px; }
.game-shell .relic-tool .tool-art .portrait { object-fit:cover; object-position:center 22%; }
.game-shell .relic-tool .tool-art::after { background:linear-gradient(180deg,#07101b80,transparent 18%,transparent 39%,#071017aa 66%,#080e12 88%); }
.game-shell .relic-tool .relic-tool-charge {
  align-self:center;
  display:grid;
  grid-template-columns:18px auto;
  align-items:center;
  justify-content:center;
  gap:0 3px;
  min-width:65px;
  margin-bottom:7px;
  padding:8px 10px;
  background:linear-gradient(145deg,#483c4a,#191c28 65%);
  border:1px solid #baa57a;
  border-radius:5px 14px 5px 14px;
  box-shadow:inset 0 0 0 2px #1b2229,0 3px 8px #0009;
}
.game-shell .relic-tool .relic-tool-charge .icon { width:18px; height:18px; }
.game-shell .relic-tool .relic-tool-charge b { font:800 25px/1 var(--font-display,system-ui,sans-serif); }
.game-shell .relic-tool .relic-tool-charge small { grid-column:1/-1; margin-top:4px; font:650 7px/1 system-ui,sans-serif; text-align:center; letter-spacing:1px; }
.game-shell .relic-tool .card-effect .warning { display:block; margin-top:6px; font-size:9px; line-height:1.3; }
@media (min-width:1200px) {
  .game-shell .collection-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .game-shell .deck-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .game-shell .tools-grid { grid-template-columns:repeat(auto-fill,minmax(195px,1fr)); }
}
@media (max-width:700px) {
  .game-shell :is(.collection-grid,.deck-card-grid,.tools-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
  .game-shell :is(.monster-card,.tool-card).relic-card { min-height:337px; padding:7px; }
  .game-shell .relic-card .card-art { inset:7px; }
  .game-shell .relic-card .relic-topline { padding:3px; gap:3px; }
  .game-shell .relic-card .card-race .race-badge { padding:4px; gap:3px; font-size:8px; }
  .game-shell .relic-card .card-race .race-emblem { width:12px; height:12px; }
  .game-shell .relic-card .card-stars .star-pips { gap:2px; padding:3px 0; }
  .game-shell .relic-card .card-stars .star-pips .symbol-star { width:14px; height:14px; padding:2px; }
  .game-shell .relic-card.monster-card .card-body,
  .game-shell .relic-card.tool-card .card-body { min-height:291px; padding:83px 4px 4px; }
  .game-shell .relic-card .card-stats { margin:0 0 7px; padding:0; gap:7px; }
  .game-shell .relic-card .card-stats>span { min-width:46px; min-height:51px; grid-template-columns:12px auto; padding:5px 5px 7px; }
  .game-shell .relic-card .card-stats .icon { width:12px; height:12px; }
  .game-shell .relic-card .card-stats b { font-size:25px; }
  .game-shell .relic-card .card-stats small { font-size:6px; letter-spacing:.8px; }
  .game-shell .relic-card .relic-nameplate { min-height:48px; padding:8px 4px; }
  .game-shell .relic-card .card-body h3 { font-size:14px; line-height:1.14; min-height:0; }
  .game-shell .relic-card.monster-card .card-effect,
  .game-shell .relic-card.tool-card .card-effect { min-height:60px; padding:8px 0 4px; }
  .game-shell .relic-card .card-effect .keyword { font-size:9px; padding:3px; gap:3px; }
  .game-shell .relic-card .card-effect .keyword>.icon { width:11px; height:11px; flex-basis:11px; }
  .game-shell .relic-card .card-id { font-size:6px; letter-spacing:.4px; }
  .game-shell .relic-card .card-id>span { font-size:6px; }
  .game-shell .relic-card.monster-card .selected-check,
  .game-shell .relic-card.tool-card .selected-check { top:42px; right:10px; width:24px; height:24px; }
  .game-shell .relic-tool .relic-tool-charge { padding:7px 9px; min-width:58px; }
  .game-shell .relic-tool .relic-tool-charge b { font-size:23px; }
}
@media (max-width:390px) {
  .game-shell :is(.collection-grid,.deck-card-grid,.tools-grid) { gap:14px 9px; }
  .game-shell .relic-card .card-race .race-badge>span { display:none; }
  .game-shell .relic-card .card-body h3 { font-size:13px; }
  .game-shell .relic-card .card-effect .keyword { font-size:9px; }
}
@media (hover:hover) and (pointer:fine) {
  .game-shell :is(.monster-card,.tool-card).relic-card:hover:not(:disabled) { border-color:#e1c18a; box-shadow:inset 0 0 0 1px #ffe7ab44,0 4px 0 #0a1012,0 17px 27px #000b,0 0 18px rgba(var(--race-rgb),.1); }
}
.game-shell :is(.monster-card,.tool-card).relic-card:focus-visible { outline:3px solid #f7dda8; outline-offset:4px; }