@font-face {
  font-family: 'PixelTitle';
  src: url('../assets/fonts/PressStart2P.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'PixelNum';
  src: url('../assets/fonts/VT323.woff2') format('woff2');
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #14121c;
  --panel: #232330;
  --panel-2: #1a1a24;
  --line: #3a3a48;
  --text: #f0ece4;
  --dim: #a9a396;
  --gold: #ffd83d;
  --torch: #ff9a3d;
  --em: #4fd66a;
  --hp: #e04545;
  --danger: #ff5c5c;
  --t1: #b8b8c4;
  --t2: #5ecf5e;
  --t3: #4fa8ff;
  --t4: #c76bff;
  --t5: #ffab2e;
  --mana: #62a8ff;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,150,60,0.10), transparent 70%),
    radial-gradient(80% 60% at 50% 50%, transparent 45%, rgba(0,0,8,0.6) 100%);
}

#app {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  padding: 0 12px calc(16px + var(--safe-b));
}

.pixel { image-rendering: pixelated; }
.hidden { display: none !important; }

h1 {
  font-family: 'PixelTitle', monospace;
  font-size: 24px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255,160,60,0.45);
  margin: 6px 0;
}
h2.sec {
  font-family: 'PixelTitle', monospace;
  font-size: 12px;
  color: var(--torch);
  text-shadow: 1px 1px 0 #000;
  margin: 18px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
h2.sec::after {
  content: ''; flex: 1; height: 2px;
  background: linear-gradient(90deg, rgba(255,154,61,0.7), transparent);
}
h2.big-sec { font-size: 15px; justify-content: center; }
h2.big-sec::after { display: none; }
.sub { color: var(--dim); font-size: 13px; text-align: center; margin-bottom: 10px; }
.tagline { color: var(--dim); font-size: 13px; }

.btn {
  font-family: 'PixelTitle', monospace;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(#3d3d44, #26262d);
  border: 2px solid #55555f;
  border-radius: 6px;
  padding: 14px 16px;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.8);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.07), 0 4px 0 rgba(0,0,0,0.5);
  transition: filter .12s, transform .08s;
  width: 100%;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.07), 0 1px 0 rgba(0,0,0,0.5); }
.btn:disabled { opacity: .45; }
.btn.green {
  border: none;
  background: linear-gradient(#63c268, #3fa344 40%, #2f8235);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.22), inset 0 -6px 0 rgba(0,50,0,0.25), 0 4px 0 rgba(0,0,0,0.5);
  clip-path: polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,100% 3px,100% calc(100% - 6px),
                     calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),
                     calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,
                     6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px),0 3px,3px 3px,3px 0);
  text-shadow: 1px 2px 0 rgba(0,60,0,0.6);
}
.btn.big { font-size: 13px; padding: 17px; }
.btn.small { font-size: 13px; padding: 11px 12px; width: auto; flex: 1; }

.hex {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 25px; flex: 0 0 auto;
  font-family: 'PixelTitle', monospace; font-size: 9px;
  color: #14121c;
  background: var(--t1);
  clip-path: polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
}
.small-hex { width: 22px; height: 25px; font-size: 9px; }
.tier-1 .hex { background: var(--t1); }
.tier-2 .hex { background: var(--t2); }
.tier-3 .hex { background: var(--t3); }
.tier-4 .hex { background: var(--t4); }
.tier-5 .hex { background: var(--t5); box-shadow: 0 0 10px rgba(255,171,46,.8); }

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.card {
  --rar: var(--t1);
  background: linear-gradient(rgba(12,10,18,.4), rgba(12,10,18,.7)), var(--panel);
  border: 2px solid var(--line);
  border-top: 4px solid var(--rar);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 0 rgba(0,0,0,.45);
  transition: transform .12s, box-shadow .12s;
}
.card:active { transform: translateY(2px); }
.card.selected { outline: 2px solid var(--gold); }
.card.disabled { opacity: .5; }
.card.tier-1 { --rar: var(--t1); } .card.tier-2 { --rar: var(--t2); }
.card.tier-3 { --rar: var(--t3); } .card.tier-4 { --rar: var(--t4); }
.card.tier-5 { --rar: var(--t5); box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 22px rgba(255,171,46,.35); }
.card-name {
  font-family: 'PixelTitle', monospace; font-size: 9px; line-height: 1.6;
  color: var(--gold); min-height: 30px; text-shadow: 1px 1px 0 #000;
}
.item-img {
  height: 72px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--rar) 18%, transparent), transparent 72%), rgba(0,0,0,.4);
  border: 1px solid #000; border-radius: 4px; margin: 6px 0;
}
.item-img img { max-width: 60px; max-height: 60px; object-fit: contain; image-rendering: pixelated; }
.item-img.small { height: 46px; width: 46px; flex: 0 0 46px; margin: 0; }
.item-img.small img { max-width: 38px; max-height: 38px; }
.img-fallback { font-family: 'PixelTitle', monospace; font-size: 14px; color: var(--gold); }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.card-type { font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.card-desc { font-size: 13px; color: var(--text); margin-top: 6px; flex: 1; }
.card-foot { margin-top: 8px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.price { color: var(--em); font-weight: bold; }
.owned { color: var(--dim); }
.locked { color: var(--dim); font-size: 13px; }
.card-emeralds { --rar: var(--em); }
.card-emeralds .card-name { color: var(--em); }

.slot { width: 58px; cursor: pointer; user-select: none; }
.slot-frame {
  position: relative; width: 58px; height: 58px;
  background: linear-gradient(rgba(22,22,32,.7), rgba(8,8,14,.85));
  border: 2px solid #4c4c58; border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center;
}
.slot-frame img { max-width: 42px; max-height: 42px; object-fit: contain; image-rendering: pixelated; }
.slot-glyph { font-size: 20px; opacity: .35; }
.slot.empty .slot-frame {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #3d3d48 calc(50% - 1px), #3d3d48 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #3d3d48 calc(50% - 1px), #3d3d48 calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(0,0,0,.45);
}
.slot.active .slot-frame { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,200,80,.55); }
.slot.disabled { opacity: .45; }
.slot.disabled .slot-frame img { filter: grayscale(.9) brightness(.55); }
.slot-label {
  font-size: 13px; color: var(--dim); text-align: center; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-badge {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 13px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px #000;
}
.slot-cd {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,16,.75);
  font-family: 'PixelTitle', monospace; font-size: 16px; color: #9fb4ff;
  border-radius: 3px;
}
.slot.art .slot-frame { border-color: #a86fe8; }

.toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b));
  transform: translateX(-50%) translateY(12px);
  background: rgba(10,10,16,.95); border: 2px solid var(--gold); color: #fff;
  padding: 10px 16px; border-radius: 6px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 50; max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.notice { color: #ffb347; font-size: 13px; text-align: center; margin-top: 10px; }

.tint-gold { filter: sepia(.55) saturate(2.2) hue-rotate(-18deg) brightness(1.06); }
.tint-void { filter: hue-rotate(232deg) saturate(1.45) brightness(.94); }

.icon-btn {
  background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; width: 30px; height: 26px; font-size: 13px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn.off { color: #6a6a76; text-decoration: line-through; }
.icon-btn.on { color: var(--gold); border-color: var(--gold); }

.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5,4,9,.86);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fade .18s ease;
}
.sheet-box {
  position: relative; width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(70,50,110,.35), transparent 70%),
    linear-gradient(rgba(16,14,22,.98), rgba(22,20,30,.99));
  border: 2px solid #4a4658; border-radius: 10px;
  padding: 18px 18px calc(18px + var(--safe-b));
  box-shadow: 0 18px 60px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  animation: slideup .22s ease;
}
.sheet-box.modal-wide { max-width: 900px; }
@keyframes slideup { from { transform: translateY(22px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-close {
  position: absolute; right: 10px; top: 8px; z-index: 2;
  background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer;
}
.sec-hint { font-family: Arial, sans-serif; font-size: 13px; color: var(--dim); text-transform: none; letter-spacing: 0; }

.tip {
  position: fixed; z-index: 90; left: 0; top: 0;
  max-width: 280px; padding: 10px 13px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(rgba(38,32,52,.98), rgba(16,13,24,.98));
  border: 1px solid rgba(255,190,110,.35); border-top-color: rgba(255,190,110,.6);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.07);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.tip.on { opacity: 1; transform: translateY(0); }
.tip::after {
  content: ''; position: absolute; left: var(--arrow, 50%); bottom: -7px;
  margin-left: -6px; width: 0; height: 0;
  border: 6px solid transparent; border-top-color: rgba(255,190,110,.5);
}
.tip.below::after {
  bottom: auto; top: -7px;
  border-top-color: transparent; border-bottom-color: rgba(255,190,110,.5);
}
.tip-t {
  font-family: 'PixelTitle', monospace; font-size: 10px; color: var(--gold);
  letter-spacing: .5px; line-height: 1.5;
}
.tip-b { font-size: 13px; color: var(--text); line-height: 1.45; }

.full-btn {
  position: fixed; top: 12px; right: 12px; z-index: 55;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim);
  background: rgba(12,10,18,.72); border: 1px solid var(--line); border-radius: 8px;
  backdrop-filter: blur(3px);
  transition: color .14s, border-color .14s, background .14s, transform .1s;
}
.full-btn:hover { color: #fff; border-color: var(--gold); background: rgba(30,24,44,.9); }
.full-btn:active { transform: translateY(2px); }
.full-btn.docked {
  position: static; width: 30px; height: 26px; border-radius: 5px;
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14);
  backdrop-filter: none;
}
.full-btn.docked .ico { width: 15px; height: 15px; }
.full-btn .ico { width: 20px; height: 20px; }
.full-btn .ico svg { width: 100%; height: 100%; }
:fullscreen .full-btn { opacity: .25; }
:fullscreen .full-btn:hover { opacity: 1; }