/* Gacha Landed
 *
 * The look comes from the thing itself: a capsule is a two-tone sphere with a seam, the machines
 * are cherry red with a chrome dial, and the price is always a fat number on a yellow plate.
 * So the chrome here is candy-coloured and very round — and the numbers are not. Anything that
 * carries money stays flat, tabular and quiet, because the whole product is a claim about
 * arithmetic and a playful total would read as a guess.
 */

:root {
  color-scheme: light dark;

  --paper: #FFF7EE;          /* warm cream, the shop wall behind the machines */
  --card: #FFFFFF;
  --ink: #2A211C;
  --ink-soft: #7A6A61;
  --line: #EADFD2;

  --cherry: #E9503F;         /* the machine body */
  --cherry-ink: #FFFFFF;
  --lemon: #FFC53D;          /* the ¥300 price plate */
  --mint: #35BFA0;
  --sky: #3A7FC4;
  --plum: #8B6FD1;
  --mint-soft: #E1F6F0;
  --lemon-soft: #FFF3D4;
  --cherry-soft: #FDE8E4;

  /* Read by app.js when it paints the two route bars — renaming these blanks the chart. */
  --bar-us: #35BFA0;
  --bar-jp: #8B6FD1;
  --overlap: #C98A0F;

  --r-card: 20px;
  --r-field: 14px;
  --display: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #1B1613;
    --card: #241D19;
    --ink: #F3E9E0;
    --ink-soft: #B0A096;
    --line: #3A2F29;
    --cherry: #FF7A68;
    --cherry-ink: #24140F;
    --lemon: #FFD061;
    --mint: #4FD6B6;
    --sky: #74B4F0;
    --plum: #A98EE8;
    --mint-soft: #16332C;
    --lemon-soft: #33290F;
    --cherry-soft: #3A211C;
    --bar-us: #4FD6B6;
    --bar-jp: #A98EE8;
    --overlap: #E9BE55;
  }
}
:root[data-theme='dark'] {
  --paper: #1B1613; --card: #241D19; --ink: #F3E9E0; --ink-soft: #B0A096; --line: #3A2F29;
  --cherry: #FF7A68; --cherry-ink: #24140F; --lemon: #FFD061; --mint: #4FD6B6; --sky: #74B4F0;
  --plum: #A98EE8; --mint-soft: #16332C; --lemon-soft: #33290F; --cherry-soft: #3A211C;
  --bar-us: #4FD6B6; --bar-jp: #A98EE8; --overlap: #E9BE55;
}

* { box-sizing: border-box; }
/* `display: flex` on .fields and .pair outranks the browser default for [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 3%, var(--lemon-soft) 0 20%, transparent 20.5%),
    radial-gradient(circle at 94% 11%, var(--mint-soft) 0 14%, transparent 14.5%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.65 var(--body);
  padding: 0 16px calc(56px + env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; }

/* Hero ---------------------------------------------------------------------- */
.hero { padding: 34px 0 18px; text-align: center; }
.capsule-mark { width: 88px; margin: 0 auto 14px; }
.capsule-mark svg { display: block; width: 100%; height: auto; }
.cap-top { fill: var(--lemon); }
.cap-bottom { fill: var(--cherry); }
.cap-ring { fill: none; stroke: var(--ink); stroke-width: 4; }
.cap-seam { stroke: var(--ink); stroke-width: 4; }
.cap-shine { fill: #fff; opacity: .55; }

.kicker {
  font-family: var(--display);
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cherry); margin: 0 0 8px;
}
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 8vw, 38px); line-height: 1.16; letter-spacing: -.01em;
  margin: 0 0 12px; text-wrap: balance;
}
.sub { margin: 0 auto; max-width: 34em; color: var(--ink-soft); font-size: 15px; }

/* Panels -------------------------------------------------------------------- */
.step, .signal, .result {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 18px;
  margin: 16px 0;
}
h2 {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  margin: 0 0 16px; display: flex; align-items: center; gap: 11px;
}
/* Each step is its own capsule, in the colours the real ones come in. */
h2 .n {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: inset 0 -14px 0 -8px rgba(0, 0, 0, .12);
}
.n1 { background: var(--lemon); }
.n2 { background: var(--mint); }
.n3 { background: var(--sky); color: #fff; }
.n4 { background: var(--cherry); color: var(--cherry-ink); }
.n5 { background: var(--plum); color: #fff; }
h3 { font-family: var(--display); font-weight: 600; font-size: 16px; margin: 0 0 8px; }

.fields { display: flex; flex-direction: column; gap: 16px; }
.sub-fields { margin-top: 4px; padding-top: 16px; border-top: 2px dashed var(--line); }
label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.opt { font-size: 12px; font-weight: 400; opacity: .85; }

input[type='text'], input[type='url'], input[type='number'] {
  width: 100%; margin-top: 6px; padding: 13px 14px;
  font: 600 17px/1.2 var(--body);
  font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--r-field);
}
input::placeholder { font-weight: 400; color: var(--ink-soft); opacity: .6; }
input:focus-visible, button:focus-visible, a:focus-visible,
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible {
  outline: 3px solid var(--sky); outline-offset: 2px;
}
/* The yen field is the price plate on the machine. */
#jp-price { background: var(--lemon-soft); border-color: var(--lemon); }

.unit-wrap { position: relative; display: block; margin-top: 6px; }
.unit-wrap input { margin-top: 0; padding-left: 30px; }
.unit {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-weight: 700; pointer-events: none;
}
.pair { display: flex; align-items: center; gap: 9px; margin-top: 6px; }
.pair .unit-wrap { flex: 1; margin-top: 0; }
.dash { color: var(--ink-soft); font-weight: 700; }

fieldset { border: 2px solid var(--line); border-radius: var(--r-field); padding: 13px; margin: 0; }
legend { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 0 7px; }
label.radio {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  color: var(--ink); font-weight: 400;
}
input[type='radio'], input[type='checkbox'] {
  width: 20px; height: 20px; accent-color: var(--cherry); flex: none;
}

button, a.primary, a.secondary {
  font: 600 16px/1 var(--display); border-radius: 999px; padding: 15px 18px;
  cursor: pointer; border: 2px solid var(--ink); width: 100%;
}
a.primary, a.secondary {
  display: block; box-sizing: border-box; text-align: center; text-decoration: none;
}
button.primary, a.primary {
  background: var(--cherry); color: var(--cherry-ink);
  box-shadow: 0 4px 0 var(--ink);
}
button.primary:active, a.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
button.secondary, a.secondary { background: var(--card); color: var(--ink); }
button.big, a.big { padding: 18px; font-size: 18px; }
button.linky {
  background: none; border: none; color: var(--sky); text-decoration: underline;
  text-underline-offset: 4px; padding: 0; width: auto; text-align: left;
  font: 600 14px/1.4 var(--body);
}
.cta-wrap { margin: 22px 0; }

.note { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; }
.note.working { color: var(--cherry); font-weight: 600; }

.signal { background: var(--mint-soft); border-color: var(--mint); }
.signal p { margin: 0 0 6px; }

.interstitial {
  margin-top: 15px; padding: 15px; border-radius: var(--r-field);
  background: var(--lemon-soft); border: 2px solid var(--lemon);
}
.interstitial p { margin: 0 0 12px; font-size: 14px; }

/* Result — the one place that stops being playful ---------------------------- */
.verdict-line {
  font-family: var(--display); font-weight: 700; font-size: 23px; line-height: 1.2;
  margin: 0 0 8px; text-wrap: balance;
}
.verdict-why { margin: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; }
.result[data-verdict='importer_wins'] { border-color: var(--mint); background: var(--mint-soft); }
.result[data-verdict='proxy_may_win'] { border-color: var(--lemon); background: var(--lemon-soft); }
.result[data-verdict='no_decision'] { border-color: var(--cherry); background: var(--cherry-soft); }

.scale { margin: 16px 0 20px; }
.scale-row { margin-bottom: 18px; }
.scale-name { font-family: var(--display); font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.track { position: relative; height: 32px; }
.track .axis { position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--line); }
.track .band {
  position: absolute; top: 8px; height: 16px; min-width: 4px; border-radius: 999px;
  border: 2px solid var(--ink);
}
.track .cap {
  position: absolute; top: 4px; width: 3px; height: 24px;
  background: var(--ink); border-radius: 2px;
}
.ends {
  display: flex; justify-content: space-between; align-items: baseline;
  font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; margin-top: 4px;
}
.ends .detail { color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.overlap-note {
  background: repeating-linear-gradient(45deg, transparent, transparent 5px,
    color-mix(in srgb, var(--overlap) 22%, transparent) 5px,
    color-mix(in srgb, var(--overlap) 22%, transparent) 10px);
  border: 2px solid var(--overlap); border-radius: var(--r-field);
  padding: 10px 12px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.breakdown { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 16px; }
.breakdown th { text-align: left; font-size: 12px; color: var(--ink-soft); padding: 7px 0; }
.breakdown td { padding: 7px 0; border-top: 1px solid var(--line); }
.breakdown td.num {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.gap-list { margin: 0 0 16px; padding-left: 20px; font-size: 14.5px; }
.gap-list li { margin-bottom: 6px; }
.assumptions { font-size: 12.5px; color: var(--ink-soft); margin: 14px 0 0; padding-left: 18px; }
.assumptions li { margin-bottom: 6px; }
details { margin-top: 12px; }
summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sky); }

footer {
  margin-top: 36px; padding-top: 18px; border-top: 2px dashed var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
footer p { margin: 0 0 8px; }
footer a { color: var(--cherry); font-weight: 600; }
.disclaimer { line-height: 1.55; }

/* Guide pages ---------------------------------------------------------------- */
/* The tool is a form; the guides are prose. Same capsule, different insides. */
.step ul { margin: 0 0 12px; padding-left: 20px; }
.step li { margin: 0 0 8px; line-height: 1.6; }
.step li:last-child { margin-bottom: 0; }
.step h2 + p, .step h2 + ul, .step h2 + dl { margin-top: 0; }

/* Rule tables were tried and cut: four columns on a 390px screen scroll sideways, and the two
   columns that carry the answer are the ones off the edge. Stacked, every case reads whole. */
dl.rules { margin: 0 0 12px; }
dl.rules dt { font-family: var(--display); font-weight: 600; margin: 14px 0 5px; line-height: 1.45; }
dl.rules dt:first-child { margin-top: 0; }
dl.rules dd {
  margin: 0; padding-bottom: 14px; line-height: 1.6;
  border-bottom: 1px solid var(--line);
}
dl.rules dd:last-child { border-bottom: none; padding-bottom: 0; }

ul.sources { font-size: 13px; color: var(--ink-soft); }
ul.sources a { color: var(--sky); }

footer nav.guides { margin-bottom: 8px; }

/* Pinnable cards -------------------------------------------------------------- */
/* The site had nothing anybody would save, which is the whole reason it could not be shared
   anywhere visual. These are the two things worth saving, on the pages they belong to. */
figure.pin { margin: 26px 0 0; }
figure.pin img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--ink); border-radius: var(--r-card);
}
figure.pin figcaption { margin-top: 9px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* Ads ------------------------------------------------------------------------ */
/* Reserved, so a slot that fills late does not shove the sources down the page. The label is
   required by the reader, not by the network: a paid message beside a customs guide has to say
   which one it is. */
.ad-slot { margin: 22px 0 0; }
.ad-label {
  margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ad-mount { min-height: 250px; }

/* Consent -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  button.primary:active, a.primary:active { transform: none; }
}