:root {
  --bg: #0f1226;
  --panel: #f8f4e8;
  --ink: #1d1d2b;
  --muted: #6b6b80;
  --accent: #f5c542;
  --accent-2: #ff6b57;
  --border: #1d1d2b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
}

.hud-money { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.hud-money img { width: 18px; height: 18px; }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon img { width: 22px; height: 22px; margin: -6px 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }

#toast {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  z-index: 5;
  width: max-content;
  max-width: 90%;
}
.toast-line {
  background: rgba(15, 18, 38, 0.92);
  color: #fff;
  border: 2px solid var(--accent);
  padding: 4px 10px;
  border-radius: 4px;
  animation: pop 0.2s ease-out;
}
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }

#panel {
  position: absolute;
  inset: 10px;
  background: var(--panel);
  border: 4px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 0 0 4px #fff inset;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
#panel[hidden] { display: none; }

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 6px;
}
.panel-head h2 {
  margin: 0;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.4;
}
.panel-body {
  padding: 4px 14px 14px;
  overflow-y: auto;
  flex: 1;
}
.panel-body p { margin: 6px 0; }
.panel-body h3 {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  margin: 14px 0 8px;
}

.btn {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 3px 0 var(--border);
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover:not([disabled]) { background: #fff6d6; }
.btn:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); }
.btn-primary:hover:not([disabled]) { background: #ffd966; }
.btn-small { padding: 5px 8px; font-size: 12px; margin-top: 6px; }
.btn-close { padding: 4px 8px; }

.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tab.active, .tab.active:hover:not([disabled]) { background: var(--ink); color: #fff; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.grid-small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

img { display: block; max-width: 100%; }

/* Cards: art-first, like a real trading card */
.card {
  --theme: #999;
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, color-mix(in srgb, var(--theme) 35%, #fff), #fff 45%);
  border: 4px solid color-mix(in srgb, var(--theme) 80%, #000);
  border-radius: 10px;
  padding: 6px;
  font-size: 17px;
  line-height: 1.05;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28), 0 2px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.32); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 0 2px 4px; }
.card-name { font-weight: bold; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-rarity { color: color-mix(in srgb, var(--theme) 70%, #000); font-size: 15px; flex: none; }
.card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow: hidden;
  background: #1d1d2b;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-set { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; padding: 4px 2px 0; }
.card-price { margin-top: auto; padding: 4px 2px 0; font-weight: bold; }
.card-tag {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  background: var(--accent-2);
  color: #fff;
  padding: 3px 5px;
  border-radius: 3px;
  margin-top: 4px;
}
.card .btn-small { width: 100%; }

/* Holo: moving light sweep over the art */
.card.rarity-H .card-art::after,
.card.rarity-S .card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, rgba(160, 220, 255, 0.35) 52%, transparent 65%);
  background-size: 250% 250%;
  mix-blend-mode: overlay;
  animation: sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
.card.rarity-H { box-shadow: 0 0 0 2px #fff, 0 0 16px 3px color-mix(in srgb, var(--theme) 70%, #fff), 0 8px 16px rgba(0, 0, 0, 0.3); }
/* Secret: animated rainbow foil frame */
.card.rarity-S {
  border-color: transparent;
  background:
    linear-gradient(170deg, #fffbe8, #fff 50%) padding-box,
    linear-gradient(120deg, #ff6b6b, #ffd93d, #6bff95, #6bc7ff, #b06bff, #ff6b6b) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: foil 4s linear infinite;
  box-shadow: 0 0 18px 4px rgba(245, 197, 66, 0.75), 0 8px 18px rgba(0, 0, 0, 0.3);
}
@keyframes sweep { 0% { background-position: 100% 100%; } 60%, 100% { background-position: 0% 0%; } }
@keyframes foil { to { background-position: 0 0, 300% 0; } }
.card.faded { opacity: 0.45; filter: grayscale(0.6); }

.card-back { padding: 0; border-color: #1d1d2b; cursor: pointer; background: #1d1d2b; aspect-ratio: 5 / 7; overflow: hidden; }
.card-back img { width: 100%; height: 100%; object-fit: cover; }
.card-back:hover { transform: translateY(-4px) rotate(-1deg); }
.card-unknown { background: #e9e4d6; border-color: #b9b2a0; box-shadow: none; }
.card-unknown .card-art { background: #cfc8b6; }
.card-unknown small { color: var(--muted); padding-top: 4px; text-align: center; }
.card-unknown .card-art img { opacity: 0.55; filter: grayscale(0.4); }
.unknown-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #f5c542;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.flip { perspective: 800px; }
.flip.revealed { animation: flip 0.45s ease-out; }
@keyframes flip { from { transform: rotateY(90deg) scale(0.9); } }
.flip.hit-H .card { animation: pulse 0.8s ease-in-out 2; }
.flip.hit-S .card { animation: foil 4s linear infinite, pulse 0.9s ease-in-out 4; }
@keyframes pulse { 50% { transform: scale(1.07); } }

.pack-row { display: flex; gap: 18px; align-items: center; }
.pack-img {
  flex: 0 0 auto;
  width: 110px;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease;
}
.pack-img:hover { transform: rotate(-4deg) scale(1.05); }

.list { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dashed #d8d0bc;
  padding: 4px 0;
}
.row > span:first-of-type { flex: 1; }
.row-icon { width: 32px; height: 32px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.row-end { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }

.pinhall { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.pin-big { width: 120px; filter: grayscale(1) opacity(0.45) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3)); }
.pin-big.got { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)); animation: pulse 1.2s ease-in-out 2; }
.pinwall { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pin { margin: 0; width: 76px; text-align: center; }
.pin img { width: 56px; height: 56px; object-fit: contain; margin: 0 auto; filter: grayscale(1) opacity(0.35); }
.pin figcaption { font-size: 12px; color: var(--muted); line-height: 1.1; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin.got img { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35)); }
.pin.got figcaption { color: var(--ink); font-weight: bold; }
.pin-mini { width: 26px; height: 26px; filter: grayscale(1) opacity(0.4); }
span.row-icon { display: inline-block; }
.pin-mini.got { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.trophy { width: 140px; margin: 0 auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); }

.binder-set h3 { margin-top: 18px; }

.minimap-wrap { overflow: auto; max-height: 58vh; margin-bottom: 10px; border: 3px solid var(--ink); border-radius: 8px; background: #4a86c0; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.minimap { display: block; max-width: none; }

.title { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; text-align: center; }
.title .field { display: flex; flex-direction: column; gap: 6px; }
.title input[type='range'] { width: 100%; accent-color: var(--accent-2); }
.title .big { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; font-size: 20px; }
.title .help { color: var(--muted); font-size: 18px; }

@media (max-width: 560px) {
  .pinhall { grid-template-columns: 1fr; }
  #panel { inset: 6px; }
}

/* ---------- Handheld console shell ---------- */
html, body { overflow: hidden; }
body { background: #14162b; }

#game {
  --shell: #6d52c4;
  --shell-dark: #523aa3;
  --shell-light: #8f78e0;
  --label: #2b2a6b;
  position: relative;
  height: 100vh;
  height: 100dvh;
  /* Measured in JS: viewport units go stale on some phones when entering fullscreen. */
  height: var(--app-h, 100dvh);
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(165deg, var(--shell-light), var(--shell) 40%, var(--shell-dark));
  border-radius: 26px 26px 70px 26px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  /* Portrait: screen on top, controls below. */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: 'screen screen' 'dpad ab' 'pills pills';
}
#bar { display: contents; }

.screen-area {
  grid-area: screen;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  container-type: size;
}
.bezel {
  /* A classic squarish handheld screen; leftover space stays shell. */
  width: min(100cqw, (100cqh - 34px) * 0.95);
  flex: 1 1 auto;
  max-height: calc(100cqh - 34px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #3a3c4c, #2b2c39);
  border-radius: 14px 14px 46px 14px;
  padding: 8px 18px 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bezel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  font: 600 9px/1 'Fredoka', sans-serif;
  letter-spacing: 1.5px;
  color: #9ea3c9;
  overflow: hidden;
  white-space: nowrap;
}
.led {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 6px 2px rgba(255, 77, 77, 0.7);
}
#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #1d3a1f;
  box-shadow: inset 0 0 0 2px #15161f;
}
#screen { display: block; }

#hud {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  pointer-events: none;
  font: 600 12px 'Fredoka', sans-serif;
  color: #fff;
}
#hud > span {
  background: rgba(15, 18, 38, 0.72);
  padding: 3px 9px;
  border-radius: 999px;
}
.hud-money img { width: 14px; height: 14px; }

.logo {
  flex: none;
  height: 26px;
  font: italic 700 20px/26px 'Fredoka', sans-serif;
  color: var(--label);
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* D-pad */
.dpad {
  grid-area: dpad;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  grid-template-areas: '. u .' 'l c r' '. d .';
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.dpad button, .dpad-center {
  border: 0;
  padding: 0;
  background: #2a2a35;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.dpad [data-dir='up'] { grid-area: u; border-radius: 6px 6px 0 0; }
.dpad [data-dir='down'] { grid-area: d; border-radius: 0 0 6px 6px; }
.dpad [data-dir='left'] { grid-area: l; border-radius: 6px 0 0 6px; }
.dpad [data-dir='right'] { grid-area: r; border-radius: 0 6px 6px 0; }
.dpad-center { grid-area: c; cursor: default; }
.dpad-center::after {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a3a48, #22222c);
}
.dpad button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border: 7px solid transparent;
  transform: translate(-50%, -50%);
}
.dpad [data-dir='up']::after { border-bottom-color: #4a4a5a; margin-top: -4px; }
.dpad [data-dir='down']::after { border-top-color: #4a4a5a; margin-top: 4px; }
.dpad [data-dir='left']::after { border-right-color: #4a4a5a; margin-left: -4px; }
.dpad [data-dir='right']::after { border-left-color: #4a4a5a; margin-left: 4px; }
.dpad button:active { background: #1f1f28; }

/* A / B */
.ab {
  grid-area: ab;
  justify-self: center;
  align-self: center;
  display: flex;
  gap: 16px;
  transform: rotate(-22deg);
}
.ab-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ab-btn.b { margin-top: 22px; }
.ab-btn button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 38% 32%, #e2557f, #a8244c 70%);
  color: rgba(255, 255, 255, 0.55);
  font: 700 18px 'Fredoka', sans-serif;
  box-shadow: 0 4px 0 #6e1430, 0 6px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}
.ab-btn button:active { transform: translateY(3px); box-shadow: 0 1px 0 #6e1430; }
.ab-btn small, .pill-btn small {
  font: italic 700 11px 'Fredoka', sans-serif;
  color: var(--label);
  letter-spacing: 1px;
}

/* START / SELECT */
.pills {
  grid-area: pills;
  justify-self: center;
  display: flex;
  gap: 26px;
  padding-bottom: 6px;
}
.pill-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; transform: rotate(-22deg); }
.pill-btn button {
  width: 50px;
  height: 13px;
  border-radius: 999px;
  border: 0;
  background: #3b3b48;
  box-shadow: 0 2px 0 #1f1f28;
  cursor: pointer;
  touch-action: manipulation;
}
.pill-btn button:active { transform: translateY(2px); box-shadow: none; }
.pill-btn:has(button[hidden]) { visibility: hidden; }

.speaker {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: flex;
  gap: 6px;
  transform: rotate(-30deg);
  pointer-events: none;
}
.speaker i { display: block; width: 5px; height: 44px; border-radius: 3px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); }

/* Menus open over the whole handheld. */
#panel { z-index: 20; }

/* Landscape / desktop: controls either side of a wide screen. */
@media (min-aspect-ratio: 1/1) {
  #game {
    grid-template-columns: 170px minmax(0, 1fr) 170px;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 'dpad screen ab' 'dpad pills ab';
    border-radius: 36px;
  }
  .bezel { width: min(100cqw, (100cqh - 34px) * 1.6); border-radius: 14px; }
  .speaker { right: 34px; bottom: 30px; }
  .pills { padding-bottom: 0; }
  #hud { font-size: 14px; }
}
/* Short landscape phones: smaller controls. */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  #game { grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); }
  .ab-btn button { width: 46px; height: 46px; }
  .logo, .speaker { display: none; }
  .bezel { max-height: 100cqh; width: min(100cqw, 100cqh * 1.6); }
}
/* Small phones */
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); }
  .ab-btn button { width: 46px; height: 46px; }
  .speaker i { height: 34px; }
}

/* ---------- Spectacle layer ---------- */
.fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

.bezel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sound-btn {
  flex: none;
  border: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  padding: 2px 0 2px 6px;
  cursor: pointer;
  filter: grayscale(0.3);
}

/* Money chip flashes when it changes */
.hud-money.up { animation: chipUp 0.6s ease-out; }
.hud-money.down { animation: chipDown 0.6s ease-out; }
@keyframes chipUp { 30% { background: rgba(60, 170, 90, 0.95); transform: scale(1.12); } }
@keyframes chipDown { 30% { background: rgba(200, 70, 60, 0.95); transform: scale(0.94); } }
#hud > span { transition: transform 0.2s; }

/* ---------- Title screen over the orbiting 3D town ---------- */
.title-screen {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 14, 40, 0.15), rgba(10, 14, 40, 0.65));
  overflow: hidden;
}
.title-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.88;
  transform: perspective(500px) rotateX(12deg);
  animation: logoIn 1s cubic-bezier(.2, 1.4, .4, 1) both, logoFloat 4s ease-in-out 1s infinite;
}
.title-logo span {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6c9 0%, #f5c542 45%, #e07a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #6b2f0f) drop-shadow(0 6px 0 #3a1a08) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}
.tl-a { font-size: clamp(26px, 9cqw, 64px); }
.tl-b { font-size: clamp(36px, 13cqw, 92px); }
.screen-area { container-type: size; }
@keyframes logoIn { from { transform: perspective(500px) rotateX(60deg) scale(0.3); opacity: 0; } }
@keyframes logoFloat { 50% { transform: perspective(500px) rotateX(12deg) translateY(-6px); } }
.title-sub {
  font: 700 clamp(9px, 2.6cqw, 15px) 'Fredoka', sans-serif;
  letter-spacing: 3px;
  color: #e8ecff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  animation: fadeUp 0.8s 0.5s both;
}
.title-cards { position: absolute; inset: 0; pointer-events: none; }
.title-card {
  position: absolute;
  width: clamp(54px, 17cqw, 130px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  border: 3px solid #fff;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.6), 0 10px 20px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}
.title-card img { width: 100%; height: 100%; object-fit: cover; }
.title-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.6) 48%, transparent 62%);
  background-size: 250% 250%;
  animation: sweep 3s ease-in-out infinite;
}
.tc0 { left: 4%; top: 10%; transform: rotate(-14deg); animation: cardFloat 6s ease-in-out infinite; }
.tc1 { right: 4%; top: 14%; transform: rotate(12deg); animation: cardFloat 7s ease-in-out -2s infinite; }
.tc2 { left: 8%; bottom: 8%; transform: rotate(8deg); animation: cardFloat 6.5s ease-in-out -4s infinite; }
@keyframes cardFloat { 50% { translate: 0 -10px; rotate: 6deg; } }
.title-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: min(330px, 92%);
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(14, 18, 44, 0.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: fadeUp 0.8s 0.8s both;
}
.title-menu .btn { font-size: 14px; padding: 8px 10px; }
.title-field { display: flex; align-items: center; gap: 10px; color: #e8ecff; font: 600 13px 'Fredoka', sans-serif; white-space: nowrap; }
.title-field input { flex: 1; accent-color: #f5c542; }
.title-help { color: #b8bee0; text-align: center; font-size: 12px; line-height: 1.25; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Location banner ---------- */
#locsign {
  position: absolute;
  left: 10px;
  top: 40px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: 6px 16px 7px 12px;
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(90deg, #2b2140, #3d2f5c);
  border-left: 5px solid #f5c542;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: translateX(-120%);
  pointer-events: none;
}
#locsign b { font: 700 18px 'Fredoka', sans-serif; letter-spacing: 1px; }
#locsign small { font-size: 11px; color: #cfc6ff; }
#locsign.show { animation: signIn 2.6s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes signIn {
  0% { transform: translateX(-120%); }
  14%, 82% { transform: translateX(0); }
  100% { transform: translateX(-120%); }
}

/* ---------- Ferry crossing fade ---------- */
#fade { position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0; background: linear-gradient(#2a5f93, #163a5e); transition: opacity 0.6s ease; }
#fade.on { opacity: 1; pointer-events: auto; }

/* ---------- Encounter flash & wipe ---------- */
#wipe { position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0; }
#wipe.go {
  opacity: 1;
  background: repeating-linear-gradient(-35deg, #10111c 0 22px, transparent 22px 44px);
  background-size: 300% 300%;
  animation: flash 0.75s steps(1) 1, wipe 0.75s ease-in 1 forwards;
}
@keyframes flash { 0%, 20%, 40% { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.85); } 10%, 30% { box-shadow: none; } 50% { box-shadow: none; } }
@keyframes wipe { 0% { background-position: 100% 0; } 100% { background-position: 0 0; box-shadow: inset 0 0 0 999px #10111c; } }

/* ---------- Pack opening ---------- */
.rip-wrap { display: flex; flex-direction: column; min-height: 100%; }
.rip-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  perspective: 900px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #3a2f6a, #15142a 70%);
  padding: 16px 8px;
}
.rip-hint { color: #e8e4ff; font: 600 15px 'Fredoka', sans-serif; text-align: center; animation: pulseText 1.4s ease-in-out infinite; }
@keyframes pulseText { 50% { opacity: 0.55; } }
.rip-pack {
  position: relative;
  width: min(170px, 42vw);
  aspect-ratio: 0.62;
  cursor: pointer;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
  animation: packIdle 2.4s ease-in-out infinite;
  outline: none;
}
.rip-pack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pack-top, .pack-bottom { position: absolute; inset: 0; transition: transform 0.55s cubic-bezier(.3, 1.4, .5, 1), opacity 0.5s; }
.pack-top { clip-path: inset(0 0 80% 0); }
.pack-bottom { clip-path: inset(20% 0 0 0); }
.pack-shine {
  position: absolute;
  inset: 4% 8%;
  border-radius: 8px;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 48%, transparent 60%);
  background-size: 250% 250%;
  animation: sweep 2.4s ease-in-out infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes packIdle { 50% { transform: translateY(-8px) rotate(2deg); } }
.rip-pack:hover, .rip-pack:focus-visible { animation-duration: 0.8s; }
.rip-pack.torn .pack-top { transform: translate(40px, -120px) rotate(35deg); opacity: 0; }
.rip-pack.torn .pack-bottom { transform: translateY(40px) scale(0.92); opacity: 0; }
.wobble { animation: wobble 0.45s ease-in-out !important; }
@keyframes wobble { 20% { transform: rotate(-6deg) scale(1.05); } 40% { transform: rotate(6deg) scale(1.08); } 60% { transform: rotate(-4deg) scale(1.1); } 80% { transform: rotate(3deg) scale(1.05); } }

.rip-fan { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.flip3d { width: clamp(110px, 18vw, 150px); perspective: 900px; cursor: pointer; opacity: 0; }
.flip3d.deal { animation: deal 0.55s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes deal { from { opacity: 0; transform: translateY(80px) rotate(-12deg) scale(0.6); } to { opacity: 1; transform: none; } }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.3, 1.3, .5, 1); }
.flip3d.flipped .flip-inner { transform: rotateY(180deg); }
.face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.face.back img { width: 100%; height: 100%; object-fit: cover; }
.face.front { transform: rotateY(180deg); }
.flip3d:not(.flipped):hover .flip-inner { transform: translateY(-6px) rotate(-2deg); }
.flip3d.rarity-H.flipped .card { animation: holoPulse 1.2s ease-in-out 2; }
.flip3d.rarity-S.flipped { position: relative; }
.flip3d.rarity-S.flipped::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 140, 0.55) 0 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  animation: spin 6s linear infinite;
  mask: radial-gradient(circle, #000 30%, transparent 70%);
}
@keyframes holoPulse { 50% { transform: scale(1.06); box-shadow: 0 0 30px 8px rgba(143, 208, 255, 0.8); } }
@keyframes spin { to { transform: rotate(360deg); } }
.rip-controls { margin-top: 10px; }

/* ---------- Pin celebration ---------- */
.celebrate {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(circle, rgba(40, 20, 80, 0.75), rgba(5, 5, 20, 0.92));
  animation: fadeIn 0.3s ease-out;
  cursor: pointer;
}
.celebrate.out { animation: fadeOut 0.5s ease-in forwards; }
.celebrate .rays {
  position: absolute;
  width: 140vmax;
  height: 140vmax;
  background: repeating-conic-gradient(rgba(245, 197, 66, 0.22) 0 8deg, transparent 8deg 16deg);
  animation: spin 14s linear infinite;
  mask: radial-gradient(circle, #000 10%, transparent 45%);
}
.celebrate-pin {
  position: relative;
  width: min(46vmin, 220px);
  filter: drop-shadow(0 0 30px rgba(245, 197, 66, 0.9)) drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5));
  animation: pinIn 1.1s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes pinIn { from { transform: perspective(600px) rotateY(720deg) scale(0.1); opacity: 0; } }
.celebrate-text { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; animation: fadeUp 0.6s 0.7s both; }
.celebrate-text small { font: 700 13px 'Fredoka', sans-serif; letter-spacing: 4px; color: #f5c542; }
.celebrate-text b { font: 700 34px 'Fredoka', sans-serif; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

/* ---------- Screen shake ---------- */
.shake { animation: shake 0.6s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); }
  40%, 60% { transform: translate(6px, -1px); }
}

/* ---------- Cards tilt towards the pointer ---------- */

.card.tilting {
  transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px) scale(1.03);
  transition: transform 0.05s linear;
  z-index: 2;
}
.card.tilting::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.45), transparent 45%);
  mix-blend-mode: overlay;
}
.card.rarity-H.tilting::after, .card.rarity-S.tilting::after {
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), transparent 40%),
    linear-gradient(115deg, rgba(255, 107, 107, 0.25), rgba(255, 217, 61, 0.25), rgba(107, 255, 149, 0.25), rgba(107, 199, 255, 0.25), rgba(176, 107, 255, 0.25));
  mix-blend-mode: color-dodge;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Trader encounter banner */
.trader-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(100deg, #2b2140, #4a3a7a);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: slideIn 0.5s cubic-bezier(.2, 1.2, .4, 1) both;
}
.trader-head b { display: block; font: 700 20px 'Fredoka', sans-serif; }
.trader-head small { color: #d8d0ff; }
.trader-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 20px 'Fredoka', sans-serif;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 70% 65%), hsl(var(--hue) 60% 38%));
  border: 3px solid #f5c542;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.25);
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-30px); } }

/* Touch controls: no long-press menus, selection, callouts or tap flashes. */
#game {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game img { -webkit-touch-callout: none; pointer-events: auto; }
#panel input, #panel textarea { -webkit-user-select: text; user-select: text; }
.dpad, .dpad *, .ab-btn button, .pill-btn button { touch-action: none; }
/* Highlight the pressed direction (the buttons themselves no longer take touches). */
.dpad button { pointer-events: none; }
.dpad[data-pressed='up'] [data-dir='up'],
.dpad[data-pressed='down'] [data-dir='down'],
.dpad[data-pressed='left'] [data-dir='left'],
.dpad[data-pressed='right'] [data-dir='right'] { background: #1a1a22; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); }
.dpad { cursor: pointer; }

/* ---------- Portrait phones: a shorter, classic-shaped screen so the controls always fit ---------- */
@media (max-aspect-ratio: 1/1) {
  #game { grid-template-rows: auto minmax(0, 1fr) auto; }
  .screen-area { container-type: inline-size; justify-content: flex-start; }
  .bezel {
    flex: none;
    max-height: none;
    /* Screen is 10:10.8 (20% taller than the classic 10:9). Its width is capped so screen + bezel +
       logo + controls always fit the measured height; short phones shrink the screen, not the controls. */
    width: min(100%, calc((var(--app-h, 100dvh) - 310px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.883));
  }
  #stage { flex: none; aspect-ratio: 10 / 10.8; }
  .dpad, .ab { align-self: center; }
}

/* Keep the title screen readable when the game screen is small. */
#stage { container-type: size; container-name: screen; }
@container screen (max-height: 360px) {
  .title-screen { gap: 3px; padding: 6px; }
  .title-sub, .title-help, .title-cards { display: none; }
  .title-menu { gap: 5px; padding: 7px 9px; margin-top: 2px; }
  .title-menu .btn { padding: 6px 8px; font-size: 13px; }
  #locsign { top: 34px; }
  #locsign b { font-size: 15px; }
}

/* ===================== Trading cards ===================== */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

.tcard {
  --rx: 0deg;
  --ry: 0deg;
  --hyp: 0;
  --el: #999;
  --ink: #1b1e33;
  --gold: #d9b04a;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 63 / 88;
  width: 100%;
  border-radius: 4.6cqw;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  color: #1d1d2b;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.35), inset 0 0 0 0.6cqw #2c3155, inset 0 0 0 1cqw var(--gold);
  user-select: none;
  -webkit-user-select: none;
}
.tcard.tilting { transition: transform 0.06s linear; box-shadow: 0 4cqw 10cqw rgba(0, 0, 0, 0.45), inset 0 0 0 0.6cqw #2c3155, inset 0 0 0 1cqw var(--gold); z-index: 3; }
.tcard img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---- Element icons ---- */
.tc-ico { display: inline-grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ic) 65%, #fff), var(--ic) 70%); box-shadow: 0 0 0 0.35cqw rgba(0, 0, 0, 0.25); flex: none; }
.tc-ico svg { width: 72%; height: 72%; fill: #fff; filter: drop-shadow(0 0.2cqw 0.2cqw rgba(0, 0, 0, 0.35)); }

/* ---- Standard card ---- */
.tc-inner {
  position: absolute;
  inset: 2.4cqw;
  border-radius: 2.6cqw;
  padding: 2cqw 2.4cqw 1.6cqw;
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--el) 30%, #fff), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--el) 18%, #fbf6ea), #f5eedd 60%, color-mix(in srgb, var(--el) 12%, #efe6d0));
  overflow: hidden;
}
.tc-head { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.tc-stage { flex: none; font: 800 2.5cqw/1 'Nunito', sans-serif; letter-spacing: 0.3cqw; padding: 0.8cqw 1.4cqw; border-radius: 9cqw; background: linear-gradient(180deg, #fff, #ddd5c2); color: #3a3a4a; box-shadow: inset 0 0 0 0.3cqw rgba(0, 0, 0, 0.12); }
.tc-name { flex: 1; min-width: 0; font: 700 6.6cqw/1.05 'Fredoka', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.1cqw; }
.tc-ex { margin-left: 0.8cqw; font: italic 800 6cqw/1 'Fredoka', sans-serif; background: linear-gradient(180deg, #fff3b0, #e0a020 55%, #b06a10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0.25cqw 0 rgba(0, 0, 0, 0.45)); }
.tc-hp { flex: none; font: 800 6.4cqw/1 'Fredoka', sans-serif; color: #b83228; }
.tc-hp small { font-size: 2.6cqw; margin-right: 0.4cqw; color: #1d1d2b; }
.tc-elem { width: 6.4cqw; height: 6.4cqw; }
.tc-art { position: relative; flex: none; aspect-ratio: 1.42; border-radius: 1cqw; overflow: hidden; box-shadow: 0 0 0 0.8cqw #c9a24a, 0 0 0 1.2cqw #6d5320, 0 1cqw 2cqw rgba(0, 0, 0, 0.3); margin: 0.6cqw 0.8cqw 0; }
.tc-dex { font: italic 700 2.4cqw/1.2 'Nunito', sans-serif; text-align: center; padding: 0.7cqw 2cqw; margin: 0.4cqw 4cqw 0; border-radius: 3cqw; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--el) 35%, #d9c99a), transparent); color: #3d3424; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; min-height: 0; }
.tc-atk-row { display: flex; align-items: center; gap: 1.6cqw; }
.tc-cost { display: flex; gap: 0.4cqw; min-width: 17cqw; }
.tc-atk-name { flex: 1; font: 700 4.6cqw/1.1 'Fredoka', sans-serif; }
.tc-dmg { font: 800 5.6cqw/1 'Fredoka', sans-serif; }
.tc-atk-text { margin: 0.6cqw 0 0; font: 600 2.75cqw/1.3 'Nunito', sans-serif; color: #2e2e3a; }
.tc-wrr { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 1cqw; border-top: 0.3cqw solid rgba(0, 0, 0, 0.15); }
.tc-wrr span { display: flex; align-items: center; gap: 0.5cqw; min-height: 4.6cqw; }
.tc-wrr small { font: 700 2.2cqw/1 'Nunito', sans-serif; color: #5a5a68; margin-right: 0.6cqw; }
.tc-wrr em { font: 800 3cqw/1 'Fredoka', sans-serif; font-style: normal; }
.tc-wrr .tc-ico { width: 3.8cqw; height: 3.8cqw; }
.tc-flavor, .tc-rule { margin: 0; padding: 1cqw 1.6cqw; border-radius: 1.2cqw; font: italic 600 2.5cqw/1.3 'Nunito', sans-serif; color: #3a3a46; background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 0.3cqw rgba(0, 0, 0, 0.1); }
.tc-rule { font-style: normal; background: rgba(255, 255, 255, 0.6); }
.tc-rule b { font-family: 'Fredoka', sans-serif; text-transform: uppercase; color: #b06a10; margin-right: 0.8cqw; }
.tc-foot { display: flex; justify-content: space-between; align-items: center; font: 700 2.3cqw/1 'Nunito', sans-serif; color: #4a4a58; }
.tc-setmark { display: flex; align-items: center; gap: 0.8cqw; }
.tc-setico { width: 3.2cqw; height: 3.2cqw; }
.tc-rarity { font-size: 3cqw; color: #1d1d2b; letter-spacing: -0.2cqw; }
.tc-rarity.r-IR, .tc-rarity.r-SIR, .tc-rarity.r-HR { color: #e0b040; text-shadow: 0 0 0.6cqw rgba(0, 0, 0, 0.6); }
.tc-rarity.r-UR { color: #e8eef8; text-shadow: 0 0 0.6cqw rgba(0, 0, 0, 0.6); }

/* Double rares: chrome frame */
.tcard.is-ex.std { background: linear-gradient(135deg, #9aa3b5, #eef1f6 30%, #8a93a8 55%, #f6f8fb 80%, #a3abbc); box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.35), inset 0 0 0 0.6cqw #5a6178; }

/* ---- Full-art cards ---- */
.tc-fullart { position: absolute; inset: 0; }
.tc-fullart img { transform: scale(1.02); }
.tc-full-top { position: absolute; left: 0; right: 0; top: 0; padding: 3cqw 3.6cqw 8cqw; background: linear-gradient(180deg, rgba(10, 10, 25, 0.72), transparent); z-index: 2; }
.tcard.full .tc-name { color: #fff; text-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.7); }
.tcard.full .tc-hp { color: #fff; text-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.7); }
.tcard.full .tc-hp small { color: #fff; }
.tc-full-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10cqw 3.6cqw 2.6cqw; display: flex; flex-direction: column; gap: 1.4cqw; color: #fff; background: linear-gradient(0deg, rgba(8, 8, 22, 0.85) 55%, transparent); }
.tcard.full .tc-atk-text { color: #e9e6ff; }
.tcard.full .tc-wrr { border-color: rgba(255, 255, 255, 0.25); }
.tcard.full .tc-wrr small, .tcard.full .tc-foot { color: #d6d2f0; }
.tcard.full .tc-rarity { color: #fff; }

/* ---- Foil, texture and glare layers ---- */
.tc-foil, .tc-glare, .tc-art-foil { position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; }
.tc-glare { z-index: 4; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 25%, transparent 55%); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.3s; }
.tcard.tilting .tc-glare, .tcard.big .tc-glare { opacity: 1; }

/* Holo rare and double rare: rainbow foil in the art window */
.r-R .tc-art-foil, .r-RR .tc-art-foil {
  background:
    repeating-linear-gradient(115deg, #ff5e5e 0%, #ffd23f 4%, #5eff8f 8%, #4fd1ff 12%, #b45eff 16%, #ff5e5e 20%),
    var(--glitter);
  background-size: 300% 300%, 160px 160px;
  background-position: var(--mx) var(--my), center;
  mix-blend-mode: color-dodge;
  opacity: 0.42;
  filter: brightness(0.75) contrast(1.6) saturate(1.2);
  animation: idleFoil 7s ease-in-out infinite;
}
.r-RR .tc-art-foil { opacity: 0.5; }

/* Reverse holo: the frame shines, the art doesn't */
.tcard.reverse .tc-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, #ff7a7a 0%, #ffe066 5%, #7affa8 10%, #6fd8ff 15%, #c27aff 20%, #ff7a7a 25%),
    var(--glitter);
  background-size: 260% 260%, 160px 160px;
  background-position: var(--mx) var(--my), center;
  mix-blend-mode: color-dodge;
  opacity: 0.38;
  animation: idleFoil 8s ease-in-out infinite;
}
.tcard.reverse .tc-inner > * { position: relative; z-index: 1; }
.tcard.reverse .tc-art { z-index: 2; }

/* Full arts: etched texture + rainbow */
.tcard.full .tc-foil {
  background:
    repeating-linear-gradient(120deg, #ff6b6b 0%, #ffd93d 6%, #6bff95 12%, #6bc7ff 18%, #b06bff 24%, #ff6b6b 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='white' stroke-width='0.6' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 260% 260%, 5px 5px;
  background-position: var(--mx) var(--my), 0 0;
  mix-blend-mode: color-dodge;
  opacity: 0.28;
  animation: idleFoil 7s ease-in-out infinite;
}
.r-IR .tc-foil { background: var(--glitter), repeating-linear-gradient(120deg, #ffb3b3 0%, #fff0a8 8%, #b3ffd0 16%, #b3e6ff 24%, #ffb3b3 32%); background-size: 160px 160px, 300% 300%; background-position: center, var(--mx) var(--my); opacity: 0.35; }
.r-UR .tc-foil { opacity: 0.42; }
.r-SIR .tc-foil {
  background:
    var(--glitter),
    repeating-linear-gradient(120deg, #ff5e5e 0%, #ffd23f 5%, #5eff8f 10%, #4fd1ff 15%, #b45eff 20%, #ff5e5e 25%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1' fill='white' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px, 240% 240%, 7px 7px;
  background-position: center, var(--mx) var(--my), 0 0;
  opacity: 0.5;
}
.tcard.r-SIR { box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, 0.4), 0 0 4cqw rgba(255, 220, 120, 0.35); }

/* Hyper rare: gold */
.tcard.r-HR .tc-fullart img { filter: sepia(0.85) saturate(1.9) hue-rotate(-12deg) brightness(1.08) contrast(1.05); }
.r-HR .tc-foil {
  background:
    var(--glitter),
    linear-gradient(120deg, #7a5410 0%, #f8e08a 25%, #b8862a 45%, #fff2b8 60%, #a8781c 80%, #f0cf6a 100%);
  background-size: 160px 160px, 250% 250%;
  background-position: center, var(--mx) var(--my);
  mix-blend-mode: overlay;
  opacity: 0.75;
}
.tcard.r-HR .tc-name, .tcard.r-HR .tc-hp, .tcard.r-HR .tc-dmg, .tcard.r-HR .tc-atk-name { background: linear-gradient(180deg, #fff6c8, #e8b84a 60%, #b07a1a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.7)); }
.tcard.r-HR { box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, 0.4), inset 0 0 0 1cqw #e8c060; }

@keyframes idleFoil {
  0%, 100% { --mx: 30%; --my: 35%; }
  50% { --mx: 70%; --my: 65%; }
}
.tcard.tilting .tc-foil, .tcard.tilting .tc-art-foil, .tcard.tilting .tc-inner::before, .tcard.big .tc-foil, .tcard.big .tc-art-foil, .tcard.big .tc-inner::before { animation: none; }

/* ---- Card cells (card + price/buttons underneath) ---- */
.tcell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcell .tcard { cursor: zoom-in; }
.tcell-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tcell-meta .card-tag { align-self: flex-start; }
.tcell.faded .tcard { opacity: 0.45; filter: grayscale(0.7); }
.tcell .card-price { font-weight: 800; }

/* Unknown / back cards keep the card shape */
.card-unknown, .card-back { aspect-ratio: 63 / 88; min-height: 0 !important; border-radius: 10px; }

/* ---- Inspect view ---- */
.inspect {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(60, 40, 120, 0.85), rgba(5, 5, 18, 0.95));
  opacity: 0;
  transition: opacity 0.25s;
  touch-action: none;
}
.inspect.open { opacity: 1; }
.inspect-stage { width: min(78vw, 46vh, 420px); perspective: 1200px; }
.inspect .tcard { transition: transform 0.08s linear; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 0.6cqw #2c3155, inset 0 0 0 1cqw var(--gold); }
.inspect.open .inspect-stage { animation: inspectIn 0.5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes inspectIn { from { transform: scale(0.6) rotateY(-30deg); opacity: 0; } }
.inspect-info { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; font-size: 14px; gap: 2px; }
.inspect-info b { font: 700 22px 'Fredoka', sans-serif; }
.inspect-info span { color: #d8d0ff; }
.inspect-info small { color: #9a94c0; margin-top: 4px; }
.inspect-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 18px; cursor: pointer; }

/* ---- One-card-at-a-time pack reveal ---- */
.rip-count { color: #cfc8ff; font: 700 13px 'Fredoka', sans-serif; letter-spacing: 2px; }
.rip-pile { position: relative; width: min(270px, 62vw, 44vh); aspect-ratio: 63 / 88; cursor: pointer; }
.rip-pile .big-flip { position: absolute; inset: 0; width: 100%; opacity: 1; animation: dealIn 0.45s cubic-bezier(.2, 1.2, .4, 1); }
.rip-pile .big-flip .flip-inner { height: 100%; }
.rip-pile .big-flip .face { position: absolute; inset: 0; }
.rip-pile .big-flip .face.back { border-radius: 4.6%; }
.rip-pile .big-flip.leave { animation: dealOut 0.45s ease-in forwards; }
@keyframes dealIn { from { transform: translateY(40px) scale(0.85); opacity: 0; } }
@keyframes dealOut { to { transform: translate(-130%, -10px) rotate(-14deg); opacity: 0; } }
.rip-pile .big-flip.last:not(.flipped) .face.back { box-shadow: 0 0 30px 8px rgba(245, 197, 66, 0.6); animation: pulseGlow 1.2s ease-in-out infinite; }
@keyframes pulseGlow { 50% { box-shadow: 0 0 50px 16px rgba(245, 197, 66, 0.9); } }
.big-flip.hit .tcard { box-shadow: 0 0 40px 10px rgba(255, 255, 255, 0.45); }
.big-flip.hit-big::before { content: ''; position: absolute; inset: -45%; z-index: -1; background: repeating-conic-gradient(rgba(255, 220, 130, 0.5) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 7s linear infinite; mask: radial-gradient(circle, #000 25%, transparent 70%); }
.new-badge { position: absolute; top: -10px; right: -10px; z-index: 5; background: #ff6b57; color: #fff; font: 700 12px 'Fredoka', sans-serif; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); animation: pop 0.3s ease-out; }
.rip-stage.summary { justify-content: flex-start; }
.rip-summary-head { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; gap: 2px; }
.rip-summary-head b { font: 700 18px 'Fredoka', sans-serif; }
.rip-summary-head small { color: #cfc8ff; }
.grid-pull { width: 100%; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.grid-pull .tcell-meta { color: #e8e4ff; }
.binder-sub { margin: -4px 0 8px; color: var(--muted); font-size: 14px; }
.grid-small { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }