/* FLYWEIGHT — paper-white manga trading show. No external fonts or images. Original character sheets are cropped with CSS. */
:root {
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --ink: #0b0b0f;
  --ink-2: #3a3a42;
  --ink-3: #8a8a94;
  --rule: #0b0b0f;
  --cobalt: #1a37f0;
  --violet: #6b2bd9;
  --red: #d1232a;
  --sig: var(--cobalt);
  --line: 2px;
  --gap: 16px;
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules (grid/flex) must never resurrect hidden panels or the drawer */
html { font-size: 16px; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.4; color: var(--ink); background: var(--paper); }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; }
h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1.25rem; }
p { margin: 0 0 0.75rem; }
ul, ol { margin: 0; padding-left: 1.25rem; }
a { color: var(--cobalt); }
button, input, select { font: inherit; color: inherit; }
.small { font-size: 0.875rem; color: var(--ink-2); margin: 0; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.wordmark { font-weight: 900; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pos { color: var(--cobalt); }
.neg { color: var(--red); }
.na { color: var(--ink-3); font-weight: 400; }

/* Masthead */
.masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--gap); padding: 8px var(--gap); border-bottom: var(--line) solid var(--rule); }
.masthead__brand { display: flex; flex-direction: column; }
.masthead__sub { font-size: 0.875rem; color: var(--ink-2); }
.masthead__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.modebar { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 4px 8px; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: var(--line) solid var(--ink); background: var(--paper); line-height: 1.2; min-height: 28px; }
.chip--src { background: var(--ink); color: var(--paper); }
.chip--live { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.chip--warn { background: var(--red); border-color: var(--red); color: var(--paper); }
.banner { padding: 10px var(--gap); font-size: 0.875rem; font-weight: 700; border-bottom: var(--line) solid var(--rule); background: var(--paper-2); }
.banner--error { background: var(--red); color: var(--paper); }
.status-detail { padding: 6px var(--gap); font-size: 0.875rem; color: var(--ink-2); border-bottom: 1px solid #d8d8d6; }
.status-detail summary { cursor: pointer; font-weight: 700; color: var(--ink); min-height: 32px; }

/* Buttons */
.btn { min-height: 44px; padding: 8px 14px; border: var(--line) solid var(--ink); background: var(--paper); cursor: pointer; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; }
.btn:hover { background: var(--paper-2); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.btn--primary:hover { background: #1029c0; }
.btn--ghost { border-color: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

main { padding: var(--gap); max-width: 1200px; margin: 0 auto; }

/* Round strip */
.strip { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 6px 0; border-bottom: var(--line) solid var(--rule); }
.strip__k { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.strip__round { display: flex; align-items: baseline; gap: 10px; }
.strip__num { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.strip__status { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.strip__tape { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.strip__price { font-size: 1.5rem; font-weight: 900; }
.strip__at, .strip__refresh { font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 720px) { .strip { grid-template-columns: auto 1fr; align-items: end; } }

/* Hero: one protagonist, one account */
.hero { display: grid; grid-template-columns: 1fr; gap: var(--gap); padding: 24px 0 20px; border-bottom: var(--line) solid var(--rule); }
@media (min-width: 720px) { .hero { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } }
.hero__art { position: relative; }
/* Character sheets: 1536x1024, three panels. Crops are done with background-size/position only; files untouched.
   composed  : x 0..540,    y 0..1020  (whole body + antennae)
   distressed: x 520..1060, y 0..1020
   chibi     : x 1120..1510, y 540..980
   position % = cropX / (1536 - cropW), cropY / (1024 - cropH); size % = 1536 / cropW. */
:root { --fly-sheet: url("assets/one-fly-layered-shirt.png"); }

.artslot { border: var(--line) solid var(--ink); background-color: var(--paper); background-image: var(--fly-sheet); background-repeat: no-repeat; overflow: hidden; }
.artslot__tag { display: none; }
.artslot--main, .artslot--card { aspect-ratio: 540 / 1020; background-size: 284.45% auto; background-position: 0% 0%; }
.artslot--main { width: 100%; }
[data-mood="dismayed"] .artslot--main, [data-mood="dismayed"] .artslot--card { background-position: 52.21% 0%; }
.artslot--chibi { position: absolute; right: 10px; bottom: 10px; width: 88px; aspect-ratio: 390 / 440; background-size: 393.85% auto; background-position: 97.73% 92.47%; }
.hero[data-preview="chibi"] .artslot--main { background-size: 393.85% auto; background-position: 97.73% 92.47%; aspect-ratio: 390 / 440; max-width: 220px; }
.hero[data-preview="chibi"] .artslot--chibi { display: none !important; }
.hero[data-mood="composed"] .artslot--main { border-color: var(--cobalt); box-shadow: inset 0 0 0 3px var(--cobalt); }
.hero[data-mood="dismayed"] .artslot--main { border-color: var(--red); box-shadow: inset 0 0 0 3px var(--red); }
.hero__id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero__name { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; }
.hero__mood { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 8px; border: var(--line) solid var(--ink); }
.hero[data-mood="composed"] .hero__mood { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.hero[data-mood="dismayed"] .hero__mood { background: var(--red); border-color: var(--red); color: var(--paper); }
.hero__account { font-family: var(--mono); margin-top: 6px; }
.hero__premise { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 10px 0 4px; }
.hero__moment { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ink-2); min-height: 1.5em; }
.hero__equity { font-size: 2.25rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero__equity small { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
.hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .hero__stats { grid-template-columns: repeat(3, 1fr); } }
.hero__stat { min-width: 0; }
.hero__stat dd { overflow-wrap: anywhere; }
.hero__stats dt { color: var(--ink-2); }
.hero__stats dd { margin: 0 0 6px; font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Panels */
.grid2 { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: var(--gap); }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.panel { border: var(--line) solid var(--rule); padding: 12px; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.panel__note { font-size: 0.875rem; color: var(--ink-2); }
.empty { color: var(--ink-2); font-size: 0.875rem; }

.chart__svg { width: 100%; height: auto; display: block; background: var(--paper-2); }
.chart__svg text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
.chart__svg .grid { stroke: #d8d8d6; stroke-width: 1; }
.chart__svg .axis { stroke: var(--ink); stroke-width: 1.5; }
.chart__svg .line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart__svg .dot { stroke: var(--paper); stroke-width: 2; }

.moves__list { list-style: none; padding: 0; margin: 0; }
.move { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; width: 100%; text-align: left; padding: 10px 8px; border: 0; border-bottom: 1px solid #d8d8d6; background: none; cursor: pointer; min-height: 44px; font: inherit; }
.move:hover { background: var(--paper-2); }
.move__r { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; font-family: var(--mono); }
.move__what { font-variant-numeric: tabular-nums; }
.move__what .small { display: block; }
.move--rejected .move__what { color: var(--red); }
.move--hold .move__what { color: var(--ink-2); }

.predict__title { font-size: 1.375rem; letter-spacing: -0.01em; text-transform: none; }
.predict__invite { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
.predict__q { font-size: 1.125rem; font-weight: 700; }
.predict__choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.predict__state { font-weight: 700; margin: 6px 0; }
.predict__practice, .predict__account { margin-top: 12px; border-top: 1px solid #d8d8d6; padding-top: 8px; }
.predict__practice summary, .predict__account summary { cursor: pointer; font-weight: 700; font-size: 0.875rem; min-height: 32px; }
.predict__practice .predict__q { margin-top: 8px; }
.predict__referral { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; border-top: 1px solid #d8d8d6; padding-top: 10px; }
.route { display: inline-grid; gap: 2px; justify-items: start; }

.replay { display: grid; gap: 10px; }
.replay__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.replay__btns .btn { min-width: 44px; }
.replay__pos input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--cobalt); }
.live { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; font-size: 0.875rem; }
.field input, .field select { min-height: 44px; padding: 8px 10px; border: var(--line) solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: 0.875rem; }
.field select { font-family: var(--font); }

/* Strategy runs (comparison) */
.compare__table { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 720px) { .compare__table { grid-template-columns: 1fr 1fr; } }
.run { border: var(--line) solid var(--ink); padding: 12px; --sig: var(--cobalt); }
.run--selected { box-shadow: inset 0 0 0 3px var(--sig); }
.run__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.run__label { font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sig); }
.run__id { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-2); }
.run__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 10px 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.run__stats dt { color: var(--ink-2); }
.run__stats dd { margin: 0; font-weight: 700; }
.run__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Recap / moment card preview. One DOM card, three aspect presets; the PNG export is drawn separately on a canvas from the same pinned data. */
.recap { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .recap { grid-template-columns: 300px auto; align-items: start; } }
.recap__tools { display: grid; gap: 10px; align-content: start; }
.card916 { aspect-ratio: 9 / 16; width: min(100%, 405px); border: 3px solid var(--ink); background: var(--paper); display: grid; grid-template-rows: auto minmax(50%, 1fr) auto auto auto auto auto; padding: 20px; gap: 6px; }
.card916[data-format="4:5"] { aspect-ratio: 4 / 5; width: min(100%, 440px); }
.card916[data-format="1:1"] { aspect-ratio: 1 / 1; width: min(100%, 480px); grid-template-columns: minmax(42%, 1fr) 1fr; grid-template-rows: auto minmax(50%, 1fr) auto auto auto auto; }
.card916[data-format="1:1"] .card916__top { grid-column: 1 / -1; }
.card916[data-format="1:1"] .artslot--card { grid-row: 2 / span 5; }
.card916__top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--ink); padding-bottom: 8px; }
.card916__round { font-weight: 900; font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.card916 .artslot--card { height: 100%; width: auto; max-width: 100%; min-height: 50%; justify-self: center; }
.card916__name { font-size: 1.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.card916__mood { font-size: 0.75rem; letter-spacing: 0.08em; padding: 2px 6px; border: 2px solid var(--ink); }
.card916[data-mood="composed"] .card916__mood { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.card916[data-mood="dismayed"] .card916__mood { background: var(--red); border-color: var(--red); color: var(--paper); }
.card916__mood:empty { display: none; }
.card916__kicker { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.card916__num { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.card916__caption { font-size: 0.9375rem; font-weight: 700; line-height: 1.2; color: var(--ink-2); }
.card916__move { font-size: 0.8125rem; border-top: 2px solid var(--ink); padding-top: 8px; font-variant-numeric: tabular-nums; display: grid; gap: 2px; }
.card916__user { font-size: 1.25rem; font-weight: 900; line-height: 1.15; color: var(--cobalt); overflow-wrap: anywhere; }
.card916__user:empty { display: none; }
.card916__foot { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-2); border-top: 2px solid var(--ink); padding-top: 6px; display: grid; gap: 2px; }

/* About */
.about { margin-top: 32px; padding-top: 16px; border-top: var(--line) solid var(--rule); }
.about__cols { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: 12px; }
@media (min-width: 900px) { .about__cols { grid-template-columns: 1fr 1fr; } }
.about p, .about li { font-size: 1rem; color: var(--ink-2); }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(11, 11, 15, 0.45); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 560px); background: var(--paper); border-left: 3px solid var(--ink); overflow: auto; display: flex; flex-direction: column; }
.drawer__head { display: flex; align-items: center; gap: 8px; padding: 12px var(--gap); border-bottom: var(--line) solid var(--rule); position: sticky; top: 0; background: var(--paper); }
.drawer__head h2 { flex: 1; }
.drawer__body { padding: var(--gap); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 0 12px; font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 700; word-break: break-word; }
.kv dd.na { font-weight: 400; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.tbl th, .tbl td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #d8d8d6; vertical-align: top; }
.tbl th { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: var(--ink-2); }
.tbl td.num, .tbl th.num { text-align: right; }
.decisions { list-style: none; padding: 0; margin: 0; }
.decision { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 12px; align-items: center; width: 100%; text-align: left; padding: 10px 6px; border: 0; border-bottom: 1px solid #d8d8d6; background: none; cursor: pointer; min-height: 44px; font: inherit; }
.decision:hover { background: var(--paper-2); }
.receipt__section { border: var(--line) solid var(--ink); padding: 10px; margin-bottom: 12px; }
.receipt__section h3 { margin-top: 0; font-size: 0.875rem; }
.receipt__flag { display: inline-block; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border: var(--line) solid var(--ink); margin-right: 6px; }
.receipt__flag--reject { border-color: var(--red); color: var(--red); }
pre.raw { font-family: var(--mono); font-size: 0.8125rem; white-space: pre-wrap; word-break: break-word; background: var(--paper-2); padding: 8px; margin: 0; }

/* Motion: mood changes are static state swaps. Only the hover tint animates, and only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .move, .decision { transition: background-color 120ms ease; }
  .hero .artslot--main { transition: border-color 200ms ease, box-shadow 200ms ease; }
}
@media print { .masthead, .banner, .recap__tools, .about, .drawer { display: none !important; } }

@media (max-width: 719px) { .artslot--main { max-width: 220px; margin-inline: auto; } }

/* Keep the character cutaway in the same frame, including with reduced motion. */
.hero__art { aspect-ratio: 540 / 1020; display: grid; align-content: center; justify-items: center; }
@media (max-width: 719px) { .hero__art { width: min(100%, 220px); margin-inline: auto; } }

.detail-modebar { margin: 8px 0; }
.hero__actions #hero-preview { min-width: 255px; }

/* ---- Responsive hardening (first-glance study carried into the main show) ----
   Targets: desktop 1440, iPad 768/1024 portrait+landscape, iPhone 390, narrow 360. Safe areas, 44 px targets, no hover-only
   information, reduced motion respected, chart/card never clipped, type readable. Art crops and sheets untouched. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.masthead, .banner, .status-detail, main, .foot { padding-left: max(var(--gap), env(safe-area-inset-left, 0px)); padding-right: max(var(--gap), env(safe-area-inset-right, 0px)); }
.masthead { padding-top: max(8px, env(safe-area-inset-top, 0px)); }
.drawer__panel { padding-bottom: env(safe-area-inset-bottom, 0px); }
.status-detail summary, .predict__practice summary, .predict__account summary { min-height: 44px; display: flex; align-items: center; }
.btn--ghost { border-bottom-color: var(--ink-3); } /* ghost controls read as controls without hover */
/* First glance: kicker, one big name, plain money. Sizes clamp so 360 px never overflows and 1440 px is not timid. */
.hero__kicker { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 6px; }
.hero__name { font-size: clamp(2.5rem, 8vw, 4rem); }
.hero__premise { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.hero__equity { font-size: clamp(2rem, 6vw, 3rem); }
@media (min-width: 720px) and (max-width: 1099px) { .hero { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } }
@media (min-width: 1100px) { .hero { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); padding: 32px 0 24px; } }
/* Narrow screens: full-width tap targets, nav that wraps without clipping, smaller round numeral. */
.hero__actions .btn, .predict__choices .btn, .seg .btn { flex: 1 1 auto; }
@media (min-width: 720px) { .hero__actions .btn, .predict__choices .btn, .seg .btn { flex: 0 1 auto; } }
@media (max-width: 719px) { .hero__actions #hero-preview { min-width: 0; } .strip__num { font-size: 2rem; } .masthead__nav { width: 100%; } .masthead__nav .btn { flex: 1 1 auto; } }
/* Charts and cards: never clipped. */
.chart__svg { max-width: 100%; }
.card916 { max-width: 100%; }
@media (max-width: 400px) { .card916 { padding: 14px; } .card916[data-format="1:1"] { grid-template-columns: minmax(38%, 1fr) 1fr; } }
/* Recorded-snapshot offer inside the error banner, receipt permalink, footer. */
.banner__link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 4px 0; }
.receipt__link { display: inline-block; padding: 10px 0; min-height: 44px; overflow-wrap: anywhere; }
.foot { margin: 32px auto 0; padding-top: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); border-top: var(--line) solid var(--rule); max-width: 1200px; display: grid; gap: 4px; }
.foot__social { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; margin: 0; }
.foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; display: inline-block; }
/* Reduced motion: every transition off, including the mood tint and any future animation. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }