/* ============================================================
   CARD DEPOT — REDESIGN V2 · PHASE 1 FOUNDATION
   "The Depot" GBA chunky-plastic token system
   Source: design/redesign-v2/ handoff (canonical option 1b shell)
   Authored clean for upload (web-editor corruption workaround).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Press+Start+2P&family=VT323&display=swap');

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* palette */
  --v2-sky: #2eb2e6;
  --v2-sky-deep: #1a8fc4;
  --v2-navy: #10456b;
  --v2-navy-ink: #072c47;
  --v2-cream: #fff7df;
  --v2-panel: #dff1fb;
  --v2-gold: #ffd23e;
  --v2-gold-deep: #e6a817;
  --v2-orange: #f4823c;
  --v2-orange-deep: #c9560f;
  --v2-green: #7be36b;
  --v2-green-deep: #1d6b2a;
  --v2-red: #e2543e;
  --v2-white: #ffffff;
  --v2-shadow: rgba(16, 69, 107, .9);

  /* shape system */
  --v2-border: 4px solid var(--v2-navy);
  --v2-radius: 20px;
  --v2-radius-sm: 12px;
  --v2-radius-hero: 28px;
  --v2-hard-shadow: 0 7px 0 var(--v2-shadow);
  --v2-hard-shadow-pressed: 0 2px 0 var(--v2-shadow);

  /* type */
  --v2-font-body: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --v2-font-8bit: 'Press Start 2P', monospace;
  --v2-font-led: 'VT323', monospace;
}

/* ------------------------------------------------------------
   2. PAGE CANVAS
   ------------------------------------------------------------ */
.v2-body,
body.v2-body {
  background: linear-gradient(180deg, var(--v2-sky) 0%, var(--v2-sky-deep) 100%);
  min-height: 100vh;
  font-family: var(--v2-font-body);
  color: var(--v2-navy-ink);
  margin: 0;
}

/* floating cloud decorations */
.v2-cloud {
  position: absolute;
  background: var(--v2-white);
  border-radius: 999px;
  opacity: .85;
  pointer-events: none;
  animation: v2-floaty 7s ease-in-out infinite;
}
.v2-cloud::before,
.v2-cloud::after {
  content: '';
  position: absolute;
  background: var(--v2-white);
  border-radius: 999px;
}
.v2-cloud::before { width: 55%; height: 120%; left: 12%; top: -55%; }
.v2-cloud::after  { width: 45%; height: 100%; right: 12%; top: -35%; }

/* ------------------------------------------------------------
   3. CHUNKY PLASTIC PRIMITIVES
   ------------------------------------------------------------ */
.v2-panel {
  background: var(--v2-panel);
  border: var(--v2-border);
  border-radius: var(--v2-radius);
  box-shadow: var(--v2-hard-shadow);
}
.v2-panel--cream { background: var(--v2-cream); }
.v2-panel--white { background: var(--v2-white); }
.v2-panel--hero  { border-radius: var(--v2-radius-hero); }
.v2-panel--sm    { border-radius: var(--v2-radius-sm); }

/* ------------------------------------------------------------
   4. GLOSSY PILL BUTTONS
   ------------------------------------------------------------ */
.v2-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v2-font-body);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  color: var(--v2-white);
  background: var(--v2-sky);
  border: var(--v2-border);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: var(--v2-hard-shadow);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
  overflow: hidden;
}
/* cellophane sheen */
.v2-pill::before {
  content: '';
  position: absolute;
  inset: 0 0 45% 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .12) 70%,
    transparent 100%);
  pointer-events: none;
}
.v2-pill:hover  { filter: brightness(1.05); }
.v2-pill:active,
.v2-pill.is-pressed {
  transform: translateY(5px);
  box-shadow: var(--v2-hard-shadow-pressed);
}
.v2-pill:disabled,
.v2-pill.is-disabled {
  filter: saturate(.4) brightness(.9);
  cursor: not-allowed;
  transform: none;
}

/* variants */
.v2-pill--gold   { background: var(--v2-gold);   color: var(--v2-navy-ink); }
.v2-pill--green  { background: var(--v2-green); }
.v2-pill--orange { background: var(--v2-orange); }
.v2-pill--sky    { background: var(--v2-sky); }
.v2-pill--navy   { background: var(--v2-navy); }
.v2-pill--red    { background: var(--v2-red); }

/* active nav state */
.v2-pill.is-active {
  background: var(--v2-gold);
  color: var(--v2-navy-ink);
}

/* small pill */
.v2-pill--sm { font-size: 14px; padding: 8px 16px; border-width: 3px; box-shadow: 0 5px 0 var(--v2-shadow); }
.v2-pill--sm:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--v2-shadow); }

/* ------------------------------------------------------------
   5. TYPOGRAPHY ACCENTS
   ------------------------------------------------------------ */
.v2-8bit {
  font-family: var(--v2-font-8bit);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
}
.v2-8bit--xs { font-size: 10px; }
.v2-8bit--lg { font-size: 14px; }

.v2-led {
  font-family: var(--v2-font-led);
  font-size: 28px;
  line-height: 1;
  color: var(--v2-navy-ink);
  text-shadow: 0 0 6px rgba(46, 178, 230, .55);
}

.v2-display {
  font-family: var(--v2-font-body);
  font-weight: 800;
  color: var(--v2-white);
  text-shadow:
    -2px -2px 0 var(--v2-navy), 2px -2px 0 var(--v2-navy),
    -2px  2px 0 var(--v2-navy), 2px  2px 0 var(--v2-navy),
    0 5px 0 var(--v2-shadow);
}

/* ------------------------------------------------------------
   6. HEADER — CANONICAL OPTION 1b
   ------------------------------------------------------------ */
.v2-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px 10px;
  position: relative;
  z-index: 5;
}

.v2-logo-tile {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--v2-gold);
  border: var(--v2-border);
  border-radius: 16px;
  box-shadow: var(--v2-hard-shadow);
  font-family: var(--v2-font-8bit);
  font-size: 26px;
  color: var(--v2-navy-ink);
}

.v2-wordmark-wrap { display: flex; flex-direction: column; gap: 2px; }
.v2-wordmark {
  font-family: var(--v2-font-body);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--v2-white);
  text-shadow:
    -2px -2px 0 var(--v2-navy), 2px -2px 0 var(--v2-navy),
    -2px  2px 0 var(--v2-navy), 2px  2px 0 var(--v2-navy),
    0 5px 0 var(--v2-shadow);
}
.v2-subtitle {
  font-family: var(--v2-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--v2-navy-ink);
  opacity: .85;
}

.v2-header .v2-spacer { flex: 1 1 auto; }

/* coin pill (D1 — display-layer currency) */
.v2-coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--v2-gold);
  border: var(--v2-border);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: var(--v2-hard-shadow);
  color: var(--v2-navy-ink);
}
.v2-coin-pill .v2-coin { font-size: 20px; line-height: 1; }
.v2-coin-pill .v2-coin-amt {
  font-family: var(--v2-font-led);
  font-size: 26px;
  line-height: 1;
}

/* identity block (franchise · record) */
.v2-identity {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--v2-white);
  border: var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: 8px 14px;
  box-shadow: var(--v2-hard-shadow);
}
.v2-identity .v2-club { font-weight: 800; font-size: 15px; color: var(--v2-navy-ink); }
.v2-identity .v2-record { font-family: var(--v2-font-led); font-size: 22px; line-height: 1; color: var(--v2-navy-ink); }

/* account cluster */
.v2-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--v2-navy-ink);
}

/* ------------------------------------------------------------
   7. NAV PILL ROW
   ------------------------------------------------------------ */
.v2-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 24px 18px;
  position: relative;
  z-index: 5;
}
.v2-nav .v2-pill { font-size: 16px; padding: 10px 20px; }

/* Task C -- nav row = page title + mode pills + the green add-a-card action.
   One header language on binder / shop / play ball / lineup. */
.v2-nav-title {
  font-family: var(--v2-font-body);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--v2-white);
  margin-right: 4px;
  white-space: nowrap;
  text-shadow:
    -2px -2px 0 var(--v2-navy), 2px -2px 0 var(--v2-navy),
    -2px 2px 0 var(--v2-navy), 2px 2px 0 var(--v2-navy),
    0 4px 0 var(--v2-shadow);
}
/* the shell marks the live tab with aria-current; give it the v2 gold state */
.v2-nav .v2-pill[aria-current="true"] {
  background: var(--v2-gold);
  color: var(--v2-navy-ink);
}
.v2-nav .v2-nav-add { text-decoration: none; }
/* the game page paints its chrome in the 8-bit font/navy; keep the page title
   legible there without touching the in-game visuals. */
html.depot-game .depot-nav .v2-nav-title {
  font-family: var(--v2-font-body) !important;
  font-size: 22px !important;
  letter-spacing: 0 !important;
  color: var(--v2-white) !important;
}

/* ------------------------------------------------------------
   8. CARD & BANNER PRIMITIVES (shell-reach only, Phase 1)
   ------------------------------------------------------------ */
.v2-card-frame {
  background: var(--v2-white);
  border: var(--v2-border);
  border-radius: var(--v2-radius-sm);
  box-shadow: var(--v2-hard-shadow);
  overflow: hidden;
}

.v2-banner {
  display: inline-block;
  background: var(--v2-gold);
  border: var(--v2-border);
  border-radius: var(--v2-radius-sm);
  box-shadow: var(--v2-hard-shadow);
  font-weight: 800;
  padding: 10px 18px;
  color: var(--v2-navy-ink);
  animation: v2-bannerpop .45s cubic-bezier(.2, 1.6, .4, 1) both;
}

.v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--v2-panel);
  border: 3px solid var(--v2-navy);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--v2-navy-ink);
  box-shadow: 0 4px 0 var(--v2-shadow);
}

/* ------------------------------------------------------------
   9. ANIMATION VOCABULARY
   ------------------------------------------------------------ */
@keyframes v2-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes v2-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@keyframes v2-bannerpop {
  0%   { transform: scale(.6) rotate(-3deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes v2-outshake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1.5deg); }
  40% { transform: translateX(6px) rotate(1.2deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
@keyframes v2-ripshake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2deg); }
  75% { transform: rotate(-1.2deg); }
}
@keyframes v2-tearoff {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(-90px) rotate(-14deg); opacity: 0; }
}
@keyframes v2-cardpop {
  0%   { transform: translateY(26px) scale(.82); opacity: 0; }
  70%  { transform: translateY(-6px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes v2-starburst {
  0%   { transform: scale(0) rotate(0); opacity: 1; }
  80%  { transform: scale(1.25) rotate(18deg); opacity: 1; }
  100% { transform: scale(1.4) rotate(24deg); opacity: 0; }
}
@keyframes v2-pitchfly {
  0%   { transform: translate(0, 0) scale(.55); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--v2-pitch-x, 0px), var(--v2-pitch-y, 190px)) scale(1); opacity: 1; }
}
@keyframes v2-windup {
  0%   { transform: rotate(0); }
  40%  { transform: rotate(-9deg); }
  70%  { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}
@keyframes v2-baselight {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 217, 74, 0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 217, 74, .95)); }
}
@keyframes v2-flipIn {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}

/* helper classes to invoke */
.v2-anim-floaty    { animation: v2-floaty 6s ease-in-out infinite; }
.v2-anim-twinkle   { animation: v2-twinkle 1.8s ease-in-out infinite; }
.v2-anim-outshake  { animation: v2-outshake .5s ease both; }
.v2-anim-ripshake  { animation: v2-ripshake .6s ease infinite; }
.v2-anim-tearoff   { animation: v2-tearoff .55s ease both; }
.v2-anim-cardpop   { animation: v2-cardpop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.v2-anim-starburst { animation: v2-starburst .7s ease both; }
.v2-anim-windup    { animation: v2-windup .8s ease both; }
.v2-anim-baselight { animation: v2-baselight 1.6s ease-in-out infinite; }
.v2-anim-flip      { animation: v2-flipIn .45s ease both; backface-visibility: hidden; }

/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .v2-header { padding: 12px 14px 6px; gap: 10px; }
  .v2-wordmark { font-size: 26px; }
  .v2-logo-tile { width: 48px; height: 48px; font-size: 20px; }
  .v2-subtitle { font-size: 12px; }
  .v2-nav { padding: 6px 14px 12px; gap: 8px; }
  .v2-nav .v2-pill { font-size: 14px; padding: 9px 16px; }
  .v2-nav-title { font-size: 20px; width: 100%; margin: 0 0 2px; }
  .v2-coin-pill { padding: 6px 14px; }
  .v2-coin-pill .v2-coin-amt { font-size: 22px; }
  .v2-identity .v2-record { font-size: 18px; }
}

/* accessibility: honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v2-anim-floaty, .v2-anim-twinkle, .v2-anim-ripshake, .v2-anim-baselight,
  .v2-cloud { animation: none; }
}


/* ============================================================
   PHASE 2 — BINDER + CARD DETAIL (additive; data-path selectors untouched)
   ============================================================ */

/* --- Binder grid card frames --- */
.v2-body #binderGrid.grid,
.v2-body .v2-binder-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:18px;
  padding:8px 2px 4px;
}
.v2-body #binderGrid .card,
.v2-body .v2-binder-grid .card{
  position:relative;
  border:3px solid var(--v2-navy);
  border-radius:var(--v2-radius-sm);
  background:var(--v2-white);
  box-shadow:var(--v2-hard-shadow);
  padding:0;
  overflow:visible;
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.v2-body #binderGrid .card:hover,
.v2-body #binderGrid .card:focus-visible,
.v2-body .v2-binder-grid .card:hover,
.v2-body .v2-binder-grid .card:focus-visible{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--v2-navy-ink);
  outline:none;
}
.v2-body #binderGrid .card:active,
.v2-body .v2-binder-grid .card:active{
  transform:translate(1px,1px);
  box-shadow:var(--v2-hard-shadow-pressed);
}
.v2-body #binderGrid .card .frame,
.v2-body .v2-binder-grid .card .frame{ border-radius:calc(var(--v2-radius-sm) - 3px) calc(var(--v2-radius-sm) - 3px) 0 0; overflow:hidden; }
.v2-body #binderGrid .card .nameplate,
.v2-body .v2-binder-grid .card .nameplate{
  font-family:var(--v2-font-body);
  color:var(--v2-navy-ink);
  border-top:2px solid var(--v2-navy);
  background:var(--v2-cream);
  padding:6px 8px;
}
.v2-body #binderGrid .card .nameplate .pos,
.v2-body .v2-binder-grid .card .nameplate .pos{ color:var(--v2-navy); opacity:.75; }

/* rare-pin reskinned to v2 gold pin */
.v2-body #binderGrid .card .rare-pin,
.v2-body .v2-binder-grid .card .rare-pin{
  position:absolute; top:-8px; right:-8px; z-index:3;
  background:var(--v2-gold); color:var(--v2-navy-ink);
  border:2px solid var(--v2-navy); border-radius:50%;
  width:26px; height:26px; display:grid; place-items:center;
  box-shadow:2px 2px 0 var(--v2-navy-ink); font-size:13px;
}

/* --- Star badge (is_star) on binder card frames --- */
.v2-body .v2-star-badge{
  position:absolute; top:-9px; left:-9px; z-index:4;
  width:28px; height:28px; display:grid; place-items:center;
  background:var(--v2-gold); color:var(--v2-navy-ink);
  border:2px solid var(--v2-navy); border-radius:50%;
  box-shadow:2px 2px 0 var(--v2-navy-ink);
  font-size:15px; line-height:1;
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-star-badge--inline{ position:static; display:inline-grid; vertical-align:middle; }

/* --- Era rail + Group By as v2 pills --- */
.v2-body #eraTabs button, .v2-body #eraTabs .era-tab{
  font-family:var(--v2-font-body); font-weight:700;
  border:2px solid var(--v2-navy); border-radius:999px;
  background:var(--v2-white); color:var(--v2-navy-ink);
  padding:6px 14px; margin:4px 0; cursor:pointer;
  box-shadow:2px 2px 0 var(--v2-navy-ink); transition:transform .1s;
}
.v2-body #eraTabs button:hover{ transform:translateY(-1px); }
.v2-body #eraTabs button.active, .v2-body #eraTabs .era-tab.active{
  background:var(--v2-gold); color:var(--v2-navy-ink);
}
.v2-body .group-by{ display:flex; align-items:center; gap:8px; }
.v2-body .group-by label{ font-family:var(--v2-font-body); font-weight:700; color:var(--v2-navy-ink); text-transform:uppercase; font-size:12px; letter-spacing:.5px; }
.v2-body #groupBy{
  font-family:var(--v2-font-body); font-weight:700;
  border:2px solid var(--v2-navy); border-radius:999px;
  background:var(--v2-white); color:var(--v2-navy-ink);
  padding:5px 12px; box-shadow:2px 2px 0 var(--v2-navy-ink); cursor:pointer;
}

/* --- By-Set view + Add-a-Card --- */
.v2-body .set-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.v2-body .set-picker button, .v2-body .set-picker .set-chip{
  font-family:var(--v2-font-body); font-weight:700;
  border:2px solid var(--v2-navy); border-radius:999px;
  background:var(--v2-white); color:var(--v2-navy-ink);
  padding:5px 12px; box-shadow:2px 2px 0 var(--v2-navy-ink); cursor:pointer;
}
.v2-body .set-picker .active{ background:var(--v2-sky); }
.v2-body #m-add, .v2-body .add-card-btn{
  font-family:var(--v2-font-body); font-weight:800;
  border:3px solid var(--v2-navy); border-radius:var(--v2-radius-sm);
  background:var(--v2-green); color:var(--v2-white);
  padding:8px 16px; box-shadow:var(--v2-hard-shadow); cursor:pointer;
}
.v2-body #m-add:active, .v2-body .add-card-btn:active{ box-shadow:var(--v2-hard-shadow-pressed); transform:translate(1px,1px); }

/* --- Card detail (evolved spotlight) D4 surfaces --- */
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4{
  margin-top:12px; padding-top:12px;
  border-top:2px dashed var(--v2-navy);
  display:flex; flex-direction:column; gap:10px;
  font-family:var(--v2-font-body);
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-lab{
  font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:.6px;
  color:var(--v2-navy); min-width:64px;
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-grade-val{
  font-family:var(--v2-font-8bit); font-size:13px;
  background:var(--v2-gold); color:var(--v2-navy-ink);
  border:2px solid var(--v2-navy); border-radius:6px;
  padding:2px 8px; box-shadow:2px 2px 0 var(--v2-navy-ink);
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-grade-val.is-blank{ background:var(--v2-panel); color:var(--v2-navy); opacity:.7; box-shadow:none; }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) select.v2-grade-sel,
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) input.v2-cond-input,
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) textarea.v2-cond-input{
  font-family:var(--v2-font-body); font-size:13px;
  border:2px solid var(--v2-navy); border-radius:6px;
  background:var(--v2-white); color:var(--v2-navy-ink);
  padding:5px 8px; width:100%; box-sizing:border-box;
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) textarea.v2-cond-input{ min-height:52px; resize:vertical; }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-cond-input::placeholder{ color:var(--v2-navy); opacity:.45; }

/* star toggle */
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-star-toggle{
  font-family:var(--v2-font-body); font-weight:800; cursor:pointer;
  border:2px solid var(--v2-navy); border-radius:999px;
  padding:5px 12px; box-shadow:2px 2px 0 var(--v2-navy-ink);
  background:var(--v2-white); color:var(--v2-navy-ink);
  display:inline-flex; align-items:center; gap:6px;
}
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-star-toggle[aria-pressed="true"]{ background:var(--v2-gold); }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-star-toggle:active{ box-shadow:var(--v2-hard-shadow-pressed); transform:translate(1px,1px); }

/* save state */
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-status{ font-size:11px; font-weight:700; min-height:14px; }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-status.ok{ color:var(--v2-green-deep); }
:is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-status.err{ color:var(--v2-red); }

/* card flip already provided by v2-anim-flip; ensure spotCard uses 3d */
.v2-body #spotCard{ transform-style:preserve-3d; }

/* --- Mobile ~390px --- */
@media (max-width:430px){
  .v2-body #binderGrid.grid, .v2-body .v2-binder-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  :is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-row{ gap:6px; }
  :is(.v2-body #spotMeta, .v2-body .v2-card-detail) .v2-d4-lab{ min-width:100%; }
  .v2-body .set-picker{ overflow-x:auto; flex-wrap:nowrap; }
}




/* ============================================================
   11. HEADER 10a — team box + spinning coin (option 10a)
   Additive over the 1b header. Restyles the identity plate + coin pill
   the shell renders and the wallet chip mounts. Data hooks unchanged.
   ============================================================ */

/* the white two-section plate */
.v2-header .v2-identity.v2-plate-10a {
     flex-direction: row;
     align-items: stretch;
     gap: 0;
     padding: 0;
     overflow: hidden;
     background: var(--v2-white);
     border: 3px solid var(--v2-navy-ink);
     border-radius: 14px;
     box-shadow: 0 5px 0 var(--v2-navy-ink);
     white-space: nowrap;
}

/* record section (left half of the plate) */
.v2-plate-10a .dc-record {
     display: flex;
     flex-direction: column;
     gap: 3px;
     padding: 8px 14px;
     border-right: 2px solid var(--v2-panel);
}
.v2-plate-10a .dc-team {
     font-family: var(--v2-font-8bit);
     font-size: 10px;
     line-height: 1.4;
     color: var(--v2-navy-ink);
}
.v2-plate-10a .dc-line {
     display: flex;
     align-items: baseline;
     gap: 8px;
}
.v2-plate-10a .dc-wl {
     font-family: var(--v2-font-led);
     font-size: 22px;
     line-height: 1;
     color: var(--v2-green-deep);
}
.v2-plate-10a .dc-season {
     font-family: var(--v2-font-body);
     font-weight: 700;
     font-size: 11px;
     color: var(--v2-navy);
     opacity: .7;
}
.v2-plate-10a .dc-streak {
     font-family: var(--v2-font-body);
     font-weight: 800;
     font-size: 11px;
     color: var(--v2-orange-deep);
}
.v2-plate-10a .dc-streak.is-empty { display: none; }

/* coins pill (right half of the plate) */
.v2-plate-10a .v2-coin-pill,
.v2-plate-10a .depot-wallet-chip {
     align-self: center;
     margin: 6px 8px 6px 10px;
     padding: 6px 14px;
     background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0) 45%), var(--v2-gold);
     border: 3px solid var(--v2-navy-ink);
     border-radius: 999px;
     box-shadow: 0 4px 0 var(--v2-navy-ink);
     color: #7a5b00;
     gap: 8px;
}
.v2-plate-10a .v2-coin-amt,
.v2-plate-10a .dw-amt {
     font-family: var(--v2-font-led);
     font-size: 26px;
     line-height: 1;
     color: #7a5b00;
}
.v2-plate-10a .dw-cur {
     font-family: var(--v2-font-body);
     font-weight: 700;
     font-size: 12px;
     color: #7a5b00;
}

/* the Mario-style spinning coin (two-face preserve-3d) */
.dw-coin {
     display: inline-block;
     width: 30px;
     height: 30px;
     perspective: 200px;
}
.dw-coin .dw-coin-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
     animation: dc-coinspin 4.5s ease-in-out infinite;
}
.dw-coin .dw-coin-face {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     backface-visibility: hidden;
     background: radial-gradient(circle at 34% 30%, #ffe98a 0 22%, #ffd23e 40%, #f0b41c 62%, #cf8f0a 82%, #a86f06 100%);
     border: 2.5px solid #6b4a00;
     box-shadow: inset 0 0 0 2px #ffe98a, inset 0 -3px 0 rgba(122,74,0,.35);
     display: grid;
     place-items: center;
}
.dw-coin .dw-coin-back { transform: rotateY(180deg); }
.dw-coin .dw-coin-face::before {
     content: "";
     position: absolute;
     inset: 5px;
     border-radius: 50%;
     border: 2px solid #b97e08;
}
.dw-coin .dw-coin-face::after {
     content: "";
     position: absolute;
     top: 4px;
     left: 4px;
     width: 4px;
     height: 4px;
     background: #fff8dc;
     box-shadow: 5px 3px 0 -0.5px #fff8dc;
}
.dw-coin .dw-coin-sym {
     position: relative;
     font-family: var(--v2-font-8bit);
     font-size: 11px;
     color: #8a5c00;
     text-shadow: 1px 1px 0 #ffe98a;
}
.dw-coin .dw-coin-glint {
     position: absolute;
     top: 3px;
     right: 4px;
     width: 5px;
     height: 5px;
     background: #ffffff;
     border-radius: 1px;
     opacity: 0;
     animation: dc-coinglint 4.5s infinite;
     pointer-events: none;
}

@keyframes dc-coinspin {
     0%, 72% { transform: rotateY(0); }
     86% { transform: rotateY(180deg); }
     100% { transform: rotateY(360deg); }
}
@keyframes dc-coinglint {
     0%, 70%, 100% { opacity: 0; }
     78%, 92% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
     .dw-coin .dw-coin-inner { animation: none; }
     .dw-coin .dw-coin-glint { animation: none; opacity: 0; }
}

/* mobile: keep the plate coherent, allow the header to stack */
@media (max-width: 760px) {
     .v2-header .v2-identity.v2-plate-10a { flex-wrap: nowrap; }
     .v2-plate-10a .dc-wl { font-size: 19px; }
     .v2-plate-10a .v2-coin-amt, .v2-plate-10a .dw-amt { font-size: 22px; }
}

/* Task C -- the game page turns .depot-nav into a fixed bottom tab bar under
   600px; the title and the add-card action would crowd it out. */
@media (max-width: 600px) {
  html.depot-game .depot-nav .v2-nav-title,
  html.depot-game .depot-nav .v2-nav-add { display: none; }
}