/* Stat check: a pearl trade-card form, and a readout dressed like the game's own Stat Cube screen.
   The readout is the one dark panel on the site, by the owner's request that it look like the game. */

.checker {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 560px);
  justify-content: center;
  align-items: start;
  gap: clamp(16px, 2.2vw, 36px);
  padding: 8px clamp(12px, 2.5vw, 36px) 32px;
}

/* How to use: one strip across the page, folded away with its summary. Small on a phone on purpose. */
.guide {
  --on-ground: var(--navy);
  --ground: var(--pearl);
  grid-column: 1 / -1;
  width: 100%;
  max-width: calc(420px + 560px + clamp(16px, 2.2vw, 36px));
  justify-self: center;
  border-radius: 16px;
  background: var(--pearl);
  box-shadow: var(--lift-small);
  color: var(--navy);
}
.guide summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  cursor: pointer;
  font: 900 1.25rem/1 var(--font-display);
  font-stretch: 125%;
  list-style: none;
}
.guide summary::-webkit-details-marker { display: none; }
.guide summary span { font: 700 .8125rem var(--font-text); }
.guide summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: auto;
  align-self: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%230b1147' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s var(--ease-out);
}
.guide[open] summary::after { transform: rotate(180deg); }
.guide summary:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; border-radius: 16px; }

.guide-body {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 0 18px 16px;
}
.guide-shot { position: relative; margin: 0; }
.guide-shot img { width: 100%; height: auto; border-radius: 10px; }
.guide-box { position: absolute; border: 2.5px dashed var(--gold); border-radius: 8px; }
.guide-box-name { left: 5%; top: 8%; width: 70%; height: 30%; }
.guide-box-stats { left: 2%; top: 71%; width: 96%; height: 27%; }
.guide-box i { position: absolute; top: -10px; left: -10px; }

.guide i {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font: 900 .8125rem/1 var(--font-text);
  font-style: normal;
  box-shadow: 0 0 0 2px var(--navy);
}
.guide-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.guide-steps li { display: flex; gap: 10px; align-items: baseline; }
.guide-steps b { font-weight: 800; }
.guide-try { width: auto; background: var(--navy); box-shadow: none; color: var(--pearl); }
@media (hover: hover) { .guide-try:hover:not(:disabled) { background: var(--cobalt); color: var(--pearl); } }

@media (max-width: 760px) {
  .guide summary { padding: 12px 14px; font-size: 1.125rem; }
  .guide-body { grid-template-columns: 132px minmax(0, 1fr); gap: 10px 12px; padding: 0 12px 12px; }
  .guide-steps { gap: 7px; font-size: .8125rem; }
  .guide-steps li { gap: 7px; }
  .guide i { width: 19px; height: 19px; font-size: .75rem; }
  .guide-box i { top: -8px; left: -8px; }
  .guide-try { grid-column: 1 / -1; width: 100%; min-height: 42px; justify-content: center; }
}

.trade { --ground: var(--pearl); grid-area: auto; display: grid; gap: 10px; max-height: none; } /* pearl ground: Clear's hover inverts to navy/pearl */
.trade .sheet-head { margin-bottom: 0; }
.trade .sheet-sub { margin-bottom: 4px; }
.trade-clear { width: auto; min-height: 36px; padding: 0 4px; }
.trade label { display: grid; gap: 4px; }
.trade-hint { padding: 6px 10px; border-radius: 8px; background: var(--magenta); font-size: .8125rem; font-weight: 700; }

.trade input, .trade select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  background: var(--pearl);
  color: var(--navy);
  font: 800 1rem var(--font-text);
}

.trade input:focus-visible, .trade select:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.trade input::placeholder { color: rgb(11 17 71 / .32); } /* owner: example numbers stay faint so they never read as typed */

.trade-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 6.5em;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
  border-top: 1.5px solid var(--rule);
}

.trade-curse, .trade-curse-rows { display: grid; gap: 8px; }
.trade-curse { padding-top: 6px; border-top: 1.5px solid var(--rule); }
.trade-curse-rows[hidden] { display: none; }
.trade-curse-toggle, .trade-curse-toggle:hover:not(:disabled) { min-height: 40px; padding: 0; background: none; box-shadow: none; color: var(--navy); }
.trade-curse-toggle small { font-weight: 600; }
.trade-curse-toggle:hover .switch { background: rgb(11 17 71 / .32); }
.trade-curse-toggle[aria-pressed="true"]:hover .switch { background: var(--cobalt); }
.trade-curse-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em; gap: 10px; }
.trade-curse-note { font-size: .8125rem; font-weight: 600; }

.trade-icon { width: 30px; height: 30px; margin-bottom: 7px; padding: 3px; border-radius: 8px; background: #161616; }

.readout {
  --ink: #fff;
  --quiet: #b8b8b8;
  --cell: #1d1d1d;
  position: relative;
  isolation: isolate;
  margin: 4px;
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: #121212;
  color: var(--ink);
}

/* The rarity rim, as the game frames its unit cards: a gradient plate under the panel, 4px larger. */
.readout::before, .readout::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
}
.readout::before { inset: -4px; border-radius: 24px; background: linear-gradient(135deg, #4fe3ff, #a46bff, #ff4fb4, #ffd23f); box-shadow: var(--lift); }
.readout::after { inset: 0; background: #121212; }

.readout[data-state="empty"] .ro-unit, .readout[data-state="unit"] .ro-empty { display: none; }

.ro-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-stretch: 112%;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.ro-sub { margin-top: 10px; color: var(--quiet); font-weight: 700; }
.ro-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 8px 0 18px; }
.ro-base { color: var(--quiet); font-weight: 800; }
.ro-curse { flex-basis: 100%; color: #ff5c93; font-weight: 800; } /* the game's Cursed! pink */

.ro-rarity { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: #fff; }
.ro-rarity[data-rarity="Mythic"], .ro-rarity[data-rarity="Secret"] {
  background: linear-gradient(90deg, #ff6b8a, #ffd23f, #5cf08a, #4fd8ff, #b57bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ro-rarity[data-rarity="Secret"] { background-image: linear-gradient(90deg, #fff, #9ae8ff, #fff, #d8a8ff); }
.ro-rarity[data-rarity="Legendary"] { color: #ffd23f; }
.ro-rarity[data-rarity="Epic"] { color: #c58bff; }
.ro-rarity[data-rarity="Rare"] { color: #6ab8ff; }
.ro-rarity[data-rarity="Exclusive"] { color: #ff8ad1; }

.ro-rows { display: grid; gap: 12px; }
.ro-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.2em; gap: 6px 10px; }
.ro-row[hidden] { display: none; }

.ro-cell, .ro-grade {
  display: flex;
  align-items: center;
  min-height: 76px;
  border: 2px solid #2a2a2a;
  border-radius: 12px;
  background: var(--cell);
}

.ro-cell { gap: 12px; padding: 10px 14px; }
.ro-icon { flex: none; width: 40px; height: 40px; }

.ro-pct, .ro-grade {
  font-family: var(--font-text);
  font-weight: 900;
  line-height: 1;
}
/* Zero specificity, so the shared grade ink in style.css wins once a grade is read. */
:where(.ro-pct, .ro-grade) { color: var(--quiet); }

.ro-pct { font-size: clamp(1.375rem, 3.4vw, 2.25rem); letter-spacing: -.01em; white-space: nowrap; }
.ro-pct.is-range { font-size: clamp(1.125rem, 2.6vw, 1.625rem); }
.ro-grade { justify-content: center; padding: 0 6px; font-size: clamp(1.75rem, 4.4vw, 2.75rem); text-align: center; }
.ro-grade.is-range { font-size: clamp(1.125rem, 2.4vw, 1.5rem); white-space: nowrap; } /* e.g. A+~S+ when the card can't tell them apart */
.ro-row[data-state="none"] .ro-pct { font-family: var(--font-text); font-size: 1.125rem; color: #ff6b6b; }
.ro-disclaimer { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .14); color: var(--quiet); font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.ro-disclaimer b { color: #fff; font-weight: 800; }
.ro-note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-inline: 4px; color: var(--quiet); font-size: .8125rem; font-weight: 700; }

.peek { display: none; } /* desktop: the readout sits beside the form */
@media (max-width: 760px) {
  .checker { grid-template-columns: minmax(0, 1fr); }
  .page-stats .trade { order: 0; } /* form first, so the readout growing never shifts the field being typed in */
  .readout { padding: 18px 16px 20px; }
  .page-stats .credit { padding-bottom: 96px; } /* room for the result bar */

  .peek:not([hidden]) {
    position: fixed;
    z-index: 20;
    inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 10px;
    border: 3px solid transparent;
    border-radius: 16px;
    background: linear-gradient(#121212, #121212) padding-box, linear-gradient(90deg, #4fd8ff, #d946ef, #ffb02e) border-box;
    box-shadow: 0 8px 24px rgb(0 0 0 / .4);
    color: #fff;
    text-decoration: none;
  }
  .peek-chip { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 3px; }
  .peek-chip img { flex: none; width: 22px; height: 22px; }
  .peek-chip b { overflow: hidden; font: 900 .9375rem/1 var(--font-text); letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
  :where(.peek-chip b) { color: #b8b8b8; } /* the shared grade ink wins once a grade is read */
  .peek-go { display: flex; flex: none; align-items: center; gap: 3px; padding: 8px; border-radius: 10px; background: #fff; color: #121212; font: 800 .8125rem/1 var(--font-text); }
  .peek-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .peek:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .peek:not([hidden]) { animation: peek-in .2s var(--ease-out); }
  }
}
@keyframes peek-in { from { transform: translateY(20px); opacity: 0; } }