:root {
  color-scheme: dark;
  --ink: #111412;
  --ink-soft: #1c201d;
  --panel: rgba(39, 36, 31, .88);
  --panel-deep: rgba(23, 25, 23, .95);
  --line: rgba(211, 186, 131, .32);
  --line-bright: rgba(239, 215, 162, .66);
  --gold: #d8ba77;
  --gold-pale: #f3dda9;
  --ivory: #f2eadb;
  --muted: #b8b7ad;
  --violet: #9b879f;
  --cyan: #8eaaa5;
  --rose: #bd8f8a;
  --success: #76d4a1;
  --shadow: 0 26px 70px rgba(0, 0, 0, .34);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Yu Gothic UI", "Hiragino Sans", system-ui, sans-serif;
  background: var(--ink);
  color: var(--ivory);
}

* { box-sizing: border-box; }
html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    linear-gradient(to bottom, rgba(15, 18, 17, .24) 0, rgba(15, 18, 17, .78) 45%, rgba(10, 13, 14, .94) 100%),
    repeating-linear-gradient(120deg, transparent 0 52px, rgba(255,255,255,.018) 53px 54px),
    url("assets/fantasy-atlas.jpg") center / cover fixed no-repeat,
    var(--ink);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px);
  background-size: 83px 83px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
  animation: star-drift 24s linear infinite;
}
.world-glow {
  position: absolute;
  width: min(420px, 100%);
  height: 420px;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(233,192,108,.17);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(134,105,200,.22), inset 0 0 80px rgba(233,192,108,.08);
  animation: world-breathe 7s ease-in-out infinite;
}
.shell {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: max(42px, calc(var(--safe-top) + 22px)) 0 max(70px, calc(var(--safe-bottom) + 54px));
  position: relative;
}
.hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 180px; }
.brand-mark {
  width: 76px; height: 76px; display: grid; place-items: center; position: relative;
  border: 1px solid var(--line-bright); transform: rotate(45deg); background: rgba(9,12,20,.7);
  box-shadow: 0 0 35px rgba(233,192,108,.1);
  animation: crest-float 6s ease-in-out infinite;
}
.brand-mark::before { content:""; position:absolute; inset:7px; border:1px solid var(--line); }
.brand-mark span { transform: rotate(-45deg); color: var(--gold); font: 700 34px Georgia, serif; }
.eyebrow, .section-kicker, .action-kicker, .result-label {
  margin: 0 0 8px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .2em;
}
h1, h2 { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif; font-weight: 600; }
h1 { font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: .04em; }
h2 { font-size: clamp(24px, 3.4vw, 36px); }
.hero-lead { margin: 14px 0 0; color: #ded8ca; font-size: 16px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-action {
  min-width: 250px; padding: 18px 20px; border: 1px solid var(--line-bright); color: var(--ivory); text-decoration: none;
  display: grid; grid-template-columns: 1fr auto; gap: 3px 20px; align-items: center;
  background: linear-gradient(135deg, rgba(233,192,108,.14), rgba(134,105,200,.12));
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition: border-color .2s, transform .2s, background .2s;
}
.hero-action:hover { border-color: var(--gold); transform: translateY(-2px); background: rgba(233,192,108,.18); }
.hero-action .action-kicker { grid-column: 1 / -1; margin: 0; }
.ornate-panel { position: relative; border: 1px solid var(--line); background: linear-gradient(145deg, var(--panel), var(--panel-deep)); box-shadow: var(--shadow); }
.ornate-panel::before, .ornate-panel::after { content:""; position:absolute; width: 17px; height:17px; pointer-events:none; }
.ornate-panel::before { top:7px; left:7px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.ornate-panel::after { right:7px; bottom:7px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); }
.camp-status { display:grid; grid-template-columns: 1.1fr 1fr auto; align-items:center; gap:26px; padding:22px 26px; }
.camp-status h2 { font-size: 22px; }
.build-status { min-height: 42px; display:flex; align-items:center; gap:12px; color: var(--muted); font-size:13px; line-height:1.5; }
.build-status strong { color:var(--ivory); font-size:15px; }
.status-orb { width:11px; height:11px; flex:none; border-radius:50%; background:var(--success); box-shadow:0 0 18px var(--success); }
.status-orb.loading { background:var(--gold); animation:pulse 1.4s infinite; }
.quick-actions { display:flex; gap:10px; }
.button { min-height:46px; padding:12px 18px; display:inline-grid; place-items:center; border:1px solid transparent; color:var(--ivory); text-decoration:none; font:700 13px inherit; cursor:pointer; transition:.2s ease; }
.button:hover { transform:translateY(-2px); filter:brightness(1.08); }
.button-primary { background:linear-gradient(135deg,#7252ad,#4c3877); border-color:#9b81ce; }
.button-quiet { background:#171d2b; border-color:#333b4d; }
.button-gold { background:linear-gradient(135deg,#d5a84f,#8e6428); color:#141018; border-color:var(--gold-pale); }
.wayfinder { margin:28px 0 54px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.wayfinder a { padding:14px; color:var(--muted); text-align:center; text-decoration:none; font-size:13px; letter-spacing:.12em; border-right:1px solid var(--line); }
.wayfinder a:last-child { border-right:0; }
.wayfinder a:hover { color:var(--gold-pale); background:rgba(233,192,108,.05); }
.wayfinder span { color:var(--gold); margin-right:8px; font-family:Georgia,serif; }
.field-command { margin:-34px 0 54px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.field-command-card {
  min-height:82px; padding:14px 16px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  border:1px solid #30384a; color:var(--ivory); text-align:left; text-decoration:none; background:rgba(14,19,29,.84);
  font:inherit; cursor:pointer; transition:transform .2s,border-color .2s,background .2s;
}
.field-command-card:hover { transform:translateY(-3px); border-color:var(--gold); background:rgba(44,38,42,.92); }
.field-command-card.is-quest { border-color:rgba(216,186,119,.52); background:linear-gradient(135deg,rgba(89,67,103,.72),rgba(20,24,35,.92)); }
.command-rune { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-bright); border-radius:50%; color:var(--gold); }
.field-command-card small,.field-command-card strong,.field-command-card em { display:block; }
.field-command-card small { color:var(--gold); font:800 8px/1.2 Georgia,serif; letter-spacing:.14em; }
.field-command-card strong { margin:4px 0 3px; font:600 16px "Yu Mincho","Hiragino Mincho ProN",serif; }
.field-command-card em { color:var(--muted); font-size:10px; font-style:normal; }
.field-command-card > b { color:var(--gold); font-weight:400; }
.section-block { margin: 0 0 72px; scroll-margin-top:16px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-heading > p { margin:0 0 4px; color:var(--muted); font-size:13px; }
.section-heading.compact { align-items:center; margin-bottom:24px; }
.genre-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.genre-card {
  min-height:218px; padding:23px; position:relative; overflow:hidden; text-align:left; color:var(--ivory); cursor:pointer;
  border:1px solid #2d3548; background:linear-gradient(155deg,rgba(29,35,52,.95),rgba(13,17,28,.95));
  transition:transform .2s,border-color .2s,box-shadow .2s; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
.genre-card::after { content:""; position:absolute; width:130px; height:130px; border:1px solid currentColor; border-radius:50%; opacity:.08; right:-45px; bottom:-50px; }
.genre-card:hover, .genre-card.is-selected { transform:translateY(-4px); border-color:var(--gold); box-shadow:0 14px 35px rgba(0,0,0,.28); }
.genre-card.is-selected { background:linear-gradient(155deg,rgba(76,58,105,.9),rgba(17,20,33,.96)); }
.genre-rune { display:grid; place-items:center; width:48px; height:48px; margin-bottom:25px; border:1px solid currentColor; border-radius:50%; color:var(--gold); font-size:20px; }
.genre-number { position:absolute; top:20px; right:20px; color:#657087; font:italic 16px Georgia,serif; }
.genre-card strong, .genre-card small, .genre-card > span:last-child { display:block; }
.genre-card strong { font:600 22px "Yu Mincho","Hiragino Mincho ProN",serif; }
.genre-card small { margin:5px 0 17px; color:var(--gold); letter-spacing:.16em; }
.genre-card > span:last-child { color:var(--muted); font-size:13px; line-height:1.6; }
.forge-console { margin-top:14px; padding:22px 24px; }
.forge-console label { display:block; margin-bottom:10px; color:var(--gold-pale); font-size:13px; font-weight:700; }
.forge-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.forge-row textarea { width:100%; min-width:0; min-height:58px; resize:vertical; padding:12px 14px; border:1px solid #343c4f; outline:none; background:#0d111d; color:var(--ivory); font:16px/1.55 inherit; }
.forge-row textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(233,192,108,.08); }
.idea-result { margin-top:18px; padding:18px; border-left:2px solid var(--gold); background:rgba(233,192,108,.055); }
.idea-result p { margin:0; line-height:1.8; }
.idea-result .result-label { margin-bottom:4px; }
.text-button { margin-top:12px; padding:0; border:0; border-bottom:1px solid currentColor; background:none; color:var(--gold-pale); cursor:pointer; font:700 13px inherit; }
.game-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.game-card { min-height:340px; position:relative; overflow:hidden; border:1px solid #30384c; background:var(--panel); box-shadow:var(--shadow); }
.game-card:hover .game-card-inner { transform:translateY(-3px); }
.game-card-inner { transition:transform .3s ease; }
.game-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 5%,var(--card-glow),transparent 48%); pointer-events:none; }
.game-card[data-accent="cyan"] { --card-glow:rgba(77,190,188,.3); }
.game-card[data-accent="violet"] { --card-glow:rgba(134,105,200,.36); }
.game-card[data-accent="rose"] { --card-glow:rgba(198,109,131,.3); }
.game-cover { height:168px; position:relative; z-index:2; display:block; overflow:hidden; border-bottom:1px solid #4a4058; background:#0c0d17; }
.game-cover::after { content:""; position:absolute; inset:auto 0 0; height:55%; background:linear-gradient(transparent,rgba(10,10,16,.82)); }
.game-cover img { width:120%; height:100%; display:block; object-fit:cover; object-position:center; transform:translateX(-16%); filter:saturate(.84) contrast(1.05); transition:transform .45s ease,filter .45s ease; }
.game-card:hover .game-cover img { transform:translateX(-16%) scale(1.025); filter:saturate(1) contrast(1.05); }
.game-cover span { position:absolute; right:13px; bottom:10px; z-index:1; color:var(--gold-pale); font:800 8px Georgia,serif; letter-spacing:.16em; }
.game-card-inner { position:relative; z-index:1; min-height:230px; padding:22px 26px 26px; display:flex; flex-direction:column; }
.game-meta { display:flex; justify-content:space-between; gap:10px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; }
.game-card h3 { margin:22px 0 9px; font:600 clamp(24px,4vw,34px) "Yu Mincho","Hiragino Mincho ProN",serif; }
.game-card p { margin:0 0 24px; color:var(--muted); font-size:13px; line-height:1.7; }
.game-actions { margin-top:auto; display:flex; gap:10px; }
.game-actions a { flex:1; }
.game-actions .button-disabled { flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid #3b4255; color:#7f899e; background:#161b27; cursor:not-allowed; }
.game-cover.is-pending img { filter:grayscale(.55) saturate(.5) brightness(.65); }
.game-facts { display:grid; gap:7px; margin:0 0 20px; color:var(--muted); font-size:11px; }
.game-facts div { display:grid; grid-template-columns:42px 1fr; gap:9px; }
.game-facts dt { color:var(--gold); font-weight:800; letter-spacing:.1em; }
.game-facts dd { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.new-quest-card { min-height:240px; display:grid; place-items:center; padding:26px; border:1px dashed rgba(233,192,108,.36); color:var(--muted); text-align:center; text-decoration:none; background:rgba(16,21,34,.5); transition:.2s; }
.new-quest-card:hover { color:var(--gold-pale); border-color:var(--gold); background:rgba(233,192,108,.06); }
.new-quest-card b { display:block; color:var(--gold); font:300 40px Georgia,serif; }
.new-quest-card strong { display:block; margin:10px 0 6px; color:var(--ivory); font:600 20px "Yu Mincho",serif; }
.loading-card { grid-column:1/-1; padding:30px; border:1px solid var(--line); color:var(--muted); text-align:center; }
.pocket-tools { margin-top:-18px; }
.tool-drawers { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tool-drawer { overflow:hidden; }
.tool-drawer summary { min-height:94px; padding:18px 20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; list-style:none; cursor:pointer; }
.tool-drawer summary::-webkit-details-marker { display:none; }
.tool-drawer summary:hover { background:rgba(216,186,119,.06); }
.tool-drawer summary strong, .tool-drawer summary small { display:block; }
.tool-drawer summary strong { font:600 20px "Yu Mincho","Hiragino Mincho ProN",serif; }
.tool-drawer summary small { margin-top:4px; color:var(--muted); font-size:11px; }
.tool-drawer summary b { color:var(--gold); font-size:11px; font-weight:700; }
.tool-close-label { display:none; }
.tool-drawer[open] .tool-open-label { display:none; }
.tool-drawer[open] .tool-close-label { display:inline; }
.tool-rune { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-bright); border-radius:50%; color:var(--gold); font-size:18px; }
.drawer-body { padding:0 20px 20px; border-top:1px solid var(--line); }
.drawer-body label, .order-sheet > label:not(.check-row) { display:block; margin:18px 0 8px; color:var(--gold-pale); font-size:12px; font-weight:800; }
.drawer-body textarea, .order-sheet textarea { width:100%; resize:vertical; padding:13px; border:1px solid #514a3e; outline:none; color:var(--ivory); background:rgba(12,15,14,.78); font:14px/1.7 inherit; }
.drawer-body textarea:focus, .order-sheet textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,186,119,.08); }
.input-hint { margin:8px 0 0; color:#8f918a; font-size:10px; line-height:1.6; }
.drawer-actions { margin-top:13px; display:flex; gap:9px; }
.drawer-actions .button { flex:1; }
.journal-drawer { overflow:hidden; }
.journal-drawer > summary { min-height:94px; padding:18px 22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; list-style:none; cursor:pointer; }
.journal-drawer > summary::-webkit-details-marker { display:none; }
.journal-drawer > summary strong,.journal-drawer > summary small { display:block; }
.journal-drawer > summary strong { font:600 22px "Yu Mincho","Hiragino Mincho ProN",serif; }
.journal-drawer > summary small { margin-top:4px; color:var(--muted); font-size:11px; }
.journal-drawer > summary b { color:var(--gold); font-size:11px; }
.journal-drawer[open] .tool-open-label { display:none; }
.journal-drawer[open] .tool-close-label { display:inline; }
.journal-body { border-top:1px solid var(--line); }
.journal-compose { padding:22px; }
.journal-label-row { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:9px; }
.journal-label-row label { color:var(--gold-pale); font-size:12px; font-weight:800; }
.journal-label-row > span { color:#777d78; font-size:9px; }
.journal-compose textarea { width:100%; min-height:146px; resize:vertical; padding:15px; border:1px solid #514a3e; outline:none; color:var(--ivory); background:rgba(12,15,14,.78); font:16px/1.75 inherit; }
.journal-compose textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(216,186,119,.08); }
.journal-footer { margin-top:13px; display:flex; justify-content:space-between; align-items:end; gap:18px; }
.journal-kinds { margin:0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:6px; }
.journal-kinds legend { width:100%; margin-bottom:4px; color:#85887f; font-size:9px; }
.journal-kinds label { padding:7px 10px; border:1px solid #3a403d; color:var(--muted); cursor:pointer; font-size:11px; background:rgba(11,15,14,.5); }
.journal-kinds label:has(input:checked) { color:var(--gold-pale); border-color:var(--gold); background:rgba(216,186,119,.1); }
.journal-kinds input { margin:0 4px 0 0; accent-color:var(--gold); }
.journal-footer .button { min-width:220px; }
.journal-history { border-top:1px solid var(--line); }
.journal-history > summary { padding:16px 22px; display:flex; justify-content:space-between; gap:18px; align-items:center; list-style:none; cursor:pointer; background:rgba(9,12,13,.34); }
.journal-history > summary::-webkit-details-marker { display:none; }
.journal-history > summary strong,.journal-history > summary small { display:block; }
.journal-history > summary strong { font-size:13px; }
.journal-history > summary small { margin-top:3px; color:var(--muted); font-size:9px; }
.journal-history > summary > b { padding:6px 9px; border:1px solid rgba(216,186,119,.45); color:var(--gold); font-size:10px; }
.journal-list { max-height:440px; overflow:auto; padding:0 22px; }
.journal-entry { border-bottom:1px solid var(--line); }
.journal-entry > summary { padding:14px 0; display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center; list-style:none; cursor:pointer; }
.journal-entry > summary::-webkit-details-marker { display:none; }
.journal-entry time { color:var(--gold-pale); font-size:11px; }
.journal-entry summary b { margin-left:8px; color:var(--gold); font-size:9px; }
.journal-entry summary small { min-width:0; overflow:hidden; color:var(--muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.journal-entry summary em { color:#777d78; font-size:9px; font-style:normal; }
.journal-entry > div { padding:0 0 16px 164px; }
.journal-entry p { margin:0; color:#c4c0b5; font-size:12px; line-height:1.75; }
.journal-empty { margin:0; padding:22px 0; color:var(--muted); font-size:11px; text-align:center; }
.journal-notion-link { margin:4px 22px 18px; display:inline-block; color:var(--gold-pale); font-size:10px; text-decoration:none; }
.roadmap-compact { min-height:160px; }
.roadmap-tabs { display:flex; gap:6px; margin:-4px 0 18px; overflow-x:auto; scrollbar-width:none; }
.roadmap-tab { flex:0 0 auto; padding:9px 13px; border:1px solid #333a44; color:var(--muted); background:rgba(12,17,22,.62); cursor:pointer; font:700 11px inherit; }
.roadmap-tab:hover { color:var(--gold-pale); border-color:var(--line-bright); }
.roadmap-tab.is-active { color:#211b12; border-color:var(--gold); background:var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.roadmap-summary { display:flex; justify-content:space-between; align-items:end; gap:16px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.roadmap-summary small, .roadmap-summary strong { display:block; }
.roadmap-summary small { color:var(--gold); font-size:10px; letter-spacing:.12em; }
.roadmap-summary strong { margin-top:5px; font:600 18px "Yu Mincho","Hiragino Mincho ProN",serif; }
.roadmap-summary a { color:var(--gold-pale); font-size:11px; text-decoration:none; }
.roadmap-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:16px; background:var(--line); }
.roadmap-step { min-width:0; padding:15px; color:var(--ivory); text-decoration:none; background:rgba(17,20,18,.94); }
.roadmap-step:hover { background:rgba(216,186,119,.1); }
.roadmap-step small, .roadmap-step strong, .roadmap-step span { display:block; }
.roadmap-step small { color:var(--gold); font:800 9px/1 Georgia,serif; letter-spacing:.16em; }
.roadmap-step strong { margin:7px 0 6px; font-size:13px; }
.roadmap-step span { color:var(--muted); font-size:10px; line-height:1.55; }
.roadmap-step.is-now { box-shadow:inset 0 2px var(--gold); }
.roadmap-step.is-goal { background:linear-gradient(145deg,rgba(142,170,165,.15),rgba(17,20,18,.94)); }
.sync-note { margin:12px 0 0; color:#777b75; font-size:9px; }
.loading-copy { color:var(--muted); font-size:12px; }
.quest-layout { display:grid; grid-template-columns:1.5fr .9fr; gap:16px; }
.quest-board, .archive-panel { padding:28px; }
.live-badge { padding:5px 9px; border:1px solid rgba(118,212,161,.4); color:var(--success); font-size:10px; letter-spacing:.15em; }
.quest-path { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); }
.quest-path li { position:relative; min-width:0; color:#656d7f; }
.quest-path li::after { content:""; position:absolute; height:1px; top:17px; left:39px; right:4px; background:#353c4c; }
.quest-path li:last-child::after { display:none; }
.quest-path li > span { width:34px; height:34px; display:grid; place-items:center; position:relative; z-index:1; border:1px solid #41495b; border-radius:50%; background:#121724; font:13px Georgia,serif; }
.quest-path li div { padding:13px 8px 0 0; }
.quest-path strong, .quest-path small { display:block; }
.quest-path strong { color:#959bab; font-size:13px; }
.quest-path small { margin-top:5px; line-height:1.4; }
.quest-path .is-complete > span { border-color:var(--success); color:var(--success); }
.quest-path .is-complete::after { background:linear-gradient(to right,var(--success),#353c4c); }
.quest-path .is-current > span { border-color:var(--gold); color:var(--ink); background:var(--gold); box-shadow:0 0 22px rgba(233,192,108,.34); }
.quest-path .is-current strong { color:var(--gold-pale); }
.archive-panel > p:not(.section-kicker):not(.privacy-note) { margin:8px 0 18px; color:var(--muted); font-size:13px; }
.archive-links { display:grid; gap:8px; }
.archive-links a { padding:12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; border:1px solid #30384a; color:var(--ivory); text-decoration:none; background:#111725; transition:.2s; }
.archive-links a:hover { border-color:var(--gold); transform:translateX(3px); }
.link-glyph { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line-bright); color:var(--gold); font:700 13px Georgia,serif; transform:rotate(45deg); }
.link-glyph + span { padding-left:3px; }
.archive-links strong, .archive-links small { display:block; }
.archive-links strong { font-size:13px; }
.archive-links small { margin-top:3px; color:var(--muted); font-size:10px; }
.archive-links b { color:var(--gold); font-weight:400; }
.privacy-note { margin:13px 0 0; color:#787f90; font-size:10px; }
.wisdom-deck { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,30%); gap:12px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity; scrollbar-color:rgba(216,186,119,.35) transparent; }
.wisdom-card { min-height:285px; padding:21px; position:relative; scroll-snap-align:start; border:1px solid rgba(100,87,63,.58); background:linear-gradient(155deg,rgba(31,31,27,.94),rgba(13,18,20,.96)); box-shadow:var(--shadow); }
.wisdom-card::after { content:""; position:absolute; width:68px; height:68px; right:16px; top:18px; border:1px solid rgba(216,186,119,.12); transform:rotate(45deg); }
.wisdom-card header { display:flex; justify-content:space-between; color:var(--gold); font:italic 13px Georgia,serif; }
.wisdom-card header small { font:800 8px inherit; letter-spacing:.12em; }
.wisdom-card h3 { margin:30px 0 16px; font:600 18px "Yu Mincho","Hiragino Mincho ProN",serif; }
.wisdom-card blockquote { min-height:58px; margin:0 0 16px; color:var(--gold-pale); font:600 18px/1.65 "Yu Mincho","Hiragino Mincho ProN",serif; }
.wisdom-card p { color:var(--muted); font-size:11px; line-height:1.75; }
.wisdom-card a { position:absolute; left:21px; bottom:19px; color:#999483; font-size:9px; text-decoration:none; }
.wisdom-card a:hover { color:var(--gold); }
footer { padding-top:25px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#606879; font-size:10px; letter-spacing:.16em; }
footer a { color:var(--gold); text-decoration:none; letter-spacing:0; }
.studio-page { background-position:top center; }
.studio-shell { max-width:1020px; }
.studio-topbar {
  min-height:56px; padding:0 12px; position:sticky; top:max(8px,var(--safe-top)); z-index:60;
  display:flex; justify-content:space-between; align-items:center; color:var(--gold); font-size:10px; letter-spacing:.16em;
  border:1px solid rgba(216,186,119,.18); background:rgba(10,14,20,.84); backdrop-filter:blur(14px);
}
.studio-topbar a { color:var(--gold-pale); text-decoration:none; letter-spacing:0; }
.studio-hero { min-height:245px; padding:40px; display:flex; justify-content:space-between; align-items:end; gap:28px; background:linear-gradient(100deg,rgba(31,30,25,.96),rgba(40,45,41,.72)); }
.studio-hero > div:first-child { max-width:660px; }
.studio-hero h1 { font-size:clamp(34px,6vw,60px); }
.studio-tabs { position:sticky; top:8px; z-index:8; margin:18px 0; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:rgba(23,25,23,.92); backdrop-filter:blur(14px); }
.studio-tab { min-height:50px; border:0; border-right:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; font:700 13px inherit; }
.studio-tab:last-child { border-right:0; }
.studio-tab.is-active { color:var(--gold-pale); background:linear-gradient(to bottom,rgba(216,186,119,.14),transparent); box-shadow:inset 0 -2px var(--gold); }
.studio-panel { display:none; }
.studio-panel.is-active { display:block; }
.document-sheet { padding:clamp(24px,5vw,52px); border:1px solid rgba(91,77,53,.52); color:#2d2922; background:linear-gradient(rgba(245,236,215,.95),rgba(224,211,184,.96)),radial-gradient(circle at top right,rgba(142,170,165,.34),transparent 42%); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.document-sheet .section-kicker { color:#80642e; }
.document-sheet h2 { color:#332b20; }
.document-lead { max-width:720px; color:#655d50; line-height:1.7; }
.document-grid, .spec-columns { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:25px; background:rgba(82,68,45,.2); }
.document-grid article, .spec-columns article { padding:22px; background:rgba(250,245,232,.66); }
.document-grid small { color:#927340; font-size:9px; font-weight:800; letter-spacing:.14em; }
.document-grid h3, .spec-columns h3, .question-box h3 { margin:6px 0 10px; font:600 18px "Yu Mincho","Hiragino Mincho ProN",serif; }
.document-grid p, .spec-columns li, .question-box li { color:#5b5449; font-size:13px; line-height:1.75; }
.spec-columns ul, .question-box ul { margin:0; padding-left:1.2em; }
.question-box { margin-top:24px; padding:20px 22px; border-left:3px solid #9a8060; background:rgba(143,170,165,.14); }
.order-sheet fieldset { margin:24px 0 18px; padding:0; border:0; }
.order-sheet legend { margin-bottom:10px; color:#6c5938; font-size:12px; font-weight:800; }
.order-scope { display:flex; flex-wrap:wrap; gap:8px; }
.order-scope label { padding:10px 12px; border:1px solid rgba(74,61,42,.25); background:rgba(255,255,255,.36); color:#4f493e; font-size:12px; cursor:pointer; }
.order-scope input { accent-color:#826c3e; }
.order-sheet textarea { color:#2d2922; background:rgba(255,252,243,.72); }
.check-row { display:flex; gap:8px; align-items:center; margin:14px 0; color:#514a3f; font-size:12px; }
.check-row input { accent-color:#826c3e; }
.full-button { width:100%; }
.order-sheet .input-hint { color:#766f64; }
.toast { position:fixed; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); z-index:20; padding:12px 18px; color:#151018; background:var(--gold-pale); font-weight:800; font-size:13px; box-shadow:var(--shadow); transform:translate(-50%,30px); opacity:0; pointer-events:none; transition:.25s; }
.toast.is-visible { transform:translate(-50%,0); opacity:1; }
.install-guide { width:min(520px,calc(100% - 32px)); padding:30px; color:var(--ivory); }
.install-guide::backdrop { background:rgba(4,7,9,.76); backdrop-filter:blur(5px); }
.install-guide h2 { margin-bottom:14px; }
.install-guide p { color:var(--muted); line-height:1.7; }
.dialog-close { position:absolute; top:10px; right:12px; border:0; color:var(--muted); background:none; font-size:24px; cursor:pointer; }
.focus-page { background-position:center; }
.focus-shell { max-width:760px; }
.ledger-shell { max-width:1120px; }
.focus-hero { min-height:210px; margin-bottom:18px; padding:34px; display:flex; align-items:end; justify-content:space-between; gap:24px; background:linear-gradient(105deg,rgba(48,39,49,.94),rgba(25,30,31,.78)); }
.focus-hero h1 { font-size:clamp(36px,7vw,62px); }
.focus-hero p:not(.section-kicker) { margin:12px 0 0; color:var(--muted); line-height:1.7; }
.text-link { color:var(--gold-pale); text-decoration:none; white-space:nowrap; }
.today-quest,.walk-capture { margin-bottom:18px; padding:clamp(22px,5vw,38px); }
.today-quest h2 { max-width:620px; margin:22px 0 12px; font-size:clamp(28px,5vw,42px); }
.quest-date { display:flex; justify-content:space-between; color:var(--gold); font:700 11px Georgia,serif; letter-spacing:.12em; }
.quest-date b,.experiment-status { padding:5px 9px; border:1px solid rgba(216,186,119,.45); font:700 10px inherit; }
.quest-objective { color:var(--ivory); font-size:16px; line-height:1.8; }
.quest-tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0; }
.quest-tags span { padding:6px 9px; border:1px solid #384052; color:var(--muted); font-size:10px; background:#121722; }
.quest-checkpoints { margin:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quest-checkpoints summary { padding:14px 0; color:var(--gold-pale); cursor:pointer; }
.quest-checkpoints summary b { float:right; }
.quest-checkpoints ol { margin:0 0 18px; padding-left:1.5em; color:var(--muted); line-height:1.8; }
.today-quest blockquote { margin:18px 0; padding:14px 17px; border-left:2px solid var(--gold); color:#d8d0c0; background:rgba(216,186,119,.06); line-height:1.7; }
.walk-capture h2 { margin-bottom:22px; }
.walk-capture label { display:block; margin-bottom:9px; color:var(--gold-pale); font-size:12px; }
.ledger-rule { padding:8px 12px; border:1px solid var(--line-bright); color:var(--gold); font:800 9px Georgia,serif; letter-spacing:.14em; white-space:nowrap; }
.ledger-guide { margin:0 0 18px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:rgba(13,18,24,.72); }
.ledger-guide span { padding:12px 16px; color:var(--muted); font-size:11px; border-right:1px solid var(--line); }
.ledger-guide span:last-child { border-right:0; }
.ledger-guide b { margin-right:8px; color:var(--gold); }
.experiment-list { display:grid; gap:18px; }
.experiment-card { padding:28px; }
.experiment-card > header { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:16px; }
.experiment-number { color:var(--gold); font:italic 25px Georgia,serif; }
.experiment-card header small { color:var(--gold); font-size:9px; letter-spacing:.14em; }
.experiment-card header h2 { margin-top:5px; }
.experiment-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:24px; background:var(--line); }
.experiment-columns section { min-width:0; padding:20px; background:rgba(16,21,28,.94); }
.experiment-columns section > small { color:var(--gold); font:800 9px Georgia,serif; letter-spacing:.14em; }
.experiment-columns h3 { margin:7px 0 10px; font:600 17px "Yu Mincho","Hiragino Mincho ProN",serif; }
.experiment-columns p,.experiment-columns li { color:var(--muted); font-size:12px; line-height:1.7; }
.experiment-columns ul { padding-left:1.2em; }
.experiment-columns .next-experiment { background:linear-gradient(145deg,rgba(82,61,94,.7),rgba(18,22,29,.96)); }
.next-experiment .button { width:100%; margin-top:10px; }
.experiment-links { padding:16px 0 0; justify-content:flex-end; border:0; }
.experiment-links a { color:var(--gold-pale); }
.review-shell { max-width:980px; }
.review-topbar { min-height:54px; padding:0 12px; position:sticky; top:max(8px,var(--safe-top)); z-index:60; display:flex; justify-content:space-between; align-items:center; color:var(--gold); font-size:10px; letter-spacing:.16em; border:1px solid rgba(216,186,119,.18); background:rgba(10,14,20,.84); backdrop-filter:blur(14px); }
.review-topbar a { color:var(--gold-pale); text-decoration:none; letter-spacing:0; }
.review-hero { margin:8px 0 52px; padding:30px; display:flex; justify-content:space-between; align-items:end; gap:28px; }
.review-hero h1 { font-size:clamp(36px,7vw,58px); }
.review-hero p:not(.section-kicker) { max-width:620px; margin:14px 0 0; color:var(--muted); line-height:1.7; }
.review-hero-actions { min-width:min(100%,320px); display:grid; gap:10px; }
.review-heading { align-items:end; }
.review-delivery-note { margin:-30px 0 22px; padding:12px 15px; color:var(--gold-pale); font-size:12px; line-height:1.7; border-left:2px solid var(--gold); background:rgba(213,168,79,.07); }
.review-list { display:grid; gap:18px; }
.review-card { overflow:hidden; display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; }
.review-shot { min-height:260px; display:block; background:#090d14; border-right:1px solid var(--line); }
.review-shot img { width:100%; height:100%; display:block; object-fit:cover; }
.review-shot.is-empty { display:grid; place-items:center; color:#61685f; letter-spacing:.16em; }
.review-copy { min-width:0; padding:25px 27px; }
.review-copy header { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.review-copy header small { color:var(--gold); font-size:10px; letter-spacing:.14em; }
.review-copy h2 { margin-top:7px; font-size:24px; }
.review-state { padding:7px 10px; flex:none; border:1px solid var(--gold); color:var(--gold-pale); font-size:10px; }
.review-state.is-done { border-color:#426c59; color:var(--success); }
.review-comment { min-height:54px; margin:22px 0; color:var(--ivory); font-size:14px; line-height:1.8; }
.review-meta { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.review-meta div { min-width:0; padding:11px 12px; background:rgba(12,16,22,.92); }
.review-meta dt { color:var(--gold); font-size:9px; }
.review-meta dd { margin:5px 0 0; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.review-actions { margin-top:19px; display:flex; flex-wrap:wrap; gap:16px; }
.review-actions a,.review-actions button { padding:0; color:var(--gold-pale); font:inherit; font-size:11px; text-decoration:none; border:0; background:none; cursor:pointer; }
.review-empty { padding:48px 26px; text-align:center; }
.review-empty > span { color:var(--gold); font:300 38px Georgia,serif; }
.review-empty h2 { margin:12px 0; }
.review-empty p { max-width:560px; margin:0 auto 22px; color:var(--muted); line-height:1.7; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.75); } }
@keyframes star-drift { to { background-position:83px 83px; } }
@keyframes world-breathe { 50% { opacity:.6; transform:translateX(-50%) scale(1.06); } }
@keyframes crest-float { 50% { translate:0 -4px; box-shadow:0 8px 45px rgba(233,192,108,.18); } }

@media (max-width: 840px) {
  body {
    /* iOS Safari repaints fixed cover backgrounds as the browser bars resize.
       Keeping the artwork in normal page space prevents the rhythmic zoom. */
    background-attachment: scroll, scroll, scroll, scroll;
  }
  body::before { animation: none; }
  .world-glow { animation: none; }
  .brand-mark { animation: none; }
  .shell {
    width:min(100% - 32px,680px);
    padding-top:max(34px, calc(var(--safe-top) + 20px));
    padding-bottom:max(78px, calc(var(--safe-bottom) + 58px));
  }
  .hero { grid-template-columns:auto 1fr; min-height:150px; }
  .hero-action { grid-column:1/-1; width:100%; }
  .camp-status { grid-template-columns:1fr 1fr; }
  .quick-actions { grid-column:1/-1; }
  .quick-actions .button { flex:1; }
  .genre-grid { grid-template-columns:1fr; }
  .genre-card { min-height:0; padding:19px 20px 19px 84px; }
  .genre-rune { position:absolute; left:20px; top:22px; margin:0; }
  .genre-card small { margin-bottom:7px; }
  .game-grid, .quest-layout { grid-template-columns:1fr; }
  .tool-drawers { grid-template-columns:1fr; }
  .field-command { grid-template-columns:1fr; }
  .experiment-columns { grid-template-columns:1fr; }
  .studio-hero { align-items:start; flex-direction:column; }
}

@media (max-width: 560px) {
  .shell {
    width:calc(100% - 32px);
    padding-top:max(34px, calc(var(--safe-top) + 20px));
    padding-bottom:max(90px, calc(var(--safe-bottom) + 68px));
  }
  .hero { min-height:0; gap:17px; padding:6px 2px 24px; }
  .hero-copy { min-width:0; }
  .brand-mark { width:54px; height:54px; }
  .brand-mark span { font-size:25px; }
  h1 { font-size:42px; }
  .hero-lead { font-size:13px; line-height:1.6; }
  .hero-action { min-height:92px; padding:20px 22px; }
  .camp-status { grid-template-columns:1fr; gap:22px; padding:24px 22px; }
  .build-status { gap:14px; }
  .quick-actions { grid-column:auto; }
  .quick-actions { gap:12px; }
  .wayfinder { position:sticky; top:max(8px, var(--safe-top)); z-index:10; margin:18px 0 48px; background:rgba(12,16,27,.92); backdrop-filter:blur(14px); }
  .wayfinder a { min-height:64px; padding:13px 4px; display:grid; place-content:center; font-size:11px; letter-spacing:.04em; }
  .wayfinder span { display:block; margin:0 0 3px; }
  .field-command { margin-top:-25px; gap:14px; }
  .field-command-card { min-height:96px; padding:17px 18px; gap:14px; }
  .section-block { margin-bottom:60px; }
  .section-heading { align-items:start; margin-bottom:20px; }
  .section-heading > p { max-width:120px; text-align:right; }
  .forge-console { padding:19px; }
  .forge-row { grid-template-columns:1fr; }
  .forge-row textarea { min-height:86px; max-height:38vh; scroll-margin:18vh 0; font-size:16px; }
  .forge-row .button { width:100%; }
  .game-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
  .game-card, .new-quest-card { min-width:88%; scroll-snap-align:center; }
  .game-cover { height:150px; }
  .quest-board, .archive-panel { padding:22px 19px; }
  .roadmap-summary { align-items:start; flex-direction:column; }
  .roadmap-steps { grid-template-columns:1fr; }
  .roadmap-step { min-height:92px; }
  .roadmap-tabs { margin-right:-3px; }
  .wisdom-deck { grid-auto-columns:84%; }
  .tool-drawers { gap:16px; }
  .tool-drawer summary { min-height:100px; padding:18px; gap:16px; }
  .drawer-body { padding:0 18px 18px; }
  .drawer-actions { flex-direction:column; }
  .journal-drawer > summary { min-height:100px; padding:18px; gap:16px; }
  .journal-compose { padding:20px 18px; }
  .journal-compose textarea { min-height:170px; max-height:44vh; font-size:16px; }
  .journal-footer { align-items:stretch; flex-direction:column; }
  .journal-footer .button { width:100%; min-width:0; }
  .journal-history > summary { padding:17px 18px; }
  .journal-list { padding:0 18px; }
  .journal-entry > summary { grid-template-columns:1fr auto; gap:6px 10px; }
  .journal-entry summary small { grid-column:1/-1; grid-row:2; }
  .journal-entry > div { padding:0 0 15px; }
  .journal-notion-link { margin-left:18px; }
  .studio-shell {
    width:calc(100% - 32px);
    padding-top:max(30px, calc(var(--safe-top) + 18px));
  }
  .studio-topbar span { display:none; }
  .studio-hero { min-height:0; padding:27px 20px; }
  .studio-hero .quick-actions { width:100%; }
  .studio-tabs { top:6px; }
  .studio-tab { font-size:11px; }
  .document-sheet { padding:25px 18px; }
  .document-grid, .spec-columns { grid-template-columns:1fr; }
  .order-scope { display:grid; grid-template-columns:repeat(2,1fr); }
  .order-scope label { display:flex; align-items:center; gap:5px; }
  .quest-path { grid-template-columns:1fr; gap:0; }
  .quest-path li { display:grid; grid-template-columns:38px 1fr; min-height:60px; }
  .quest-path li::after { width:1px; height:auto; top:36px; bottom:0; left:17px; right:auto; }
  .quest-path li div { padding:7px 0 14px 10px; }
  .quest-path small { margin-top:2px; }
  footer { flex-direction:column; }
  .focus-hero { min-height:0; padding:26px 20px; align-items:start; flex-direction:column; }
  .focus-hero .text-link { align-self:flex-end; }
  .ledger-guide { grid-template-columns:1fr; }
  .ledger-guide span { border-right:0; border-bottom:1px solid var(--line); }
  .experiment-card { padding:20px 16px; }
  .experiment-card > header { grid-template-columns:auto 1fr; }
  .experiment-status { grid-column:2; justify-self:start; }
  .review-topbar { padding-bottom:10px; }
  .review-hero { margin-top:6px; padding:24px 20px; align-items:stretch; flex-direction:column; }
  .review-hero .button { width:100%; }
  .review-hero-actions { width:100%; }
  .review-card { grid-template-columns:1fr; }
  .review-shot { min-height:0; aspect-ratio:16/10; border-right:0; border-bottom:1px solid var(--line); }
  .review-copy { padding:22px 19px; }
  .review-meta { grid-template-columns:1fr; }
  .review-heading > p { max-width:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.flow-page { background:#080c12; color:var(--paper); }
.flow-shell { width:min(1500px, calc(100% - 48px)); padding-top:max(36px, calc(var(--safe-top) + 24px)); }
.flow-hero { margin:20px 0 28px; padding:28px 32px; background:linear-gradient(120deg, rgba(55,42,72,.96), rgba(16,22,34,.96)); }
.flow-hero h1 { margin:4px 0 10px; font-size:clamp(34px,5vw,64px); line-height:1.14; }
.flow-hero > p:last-of-type { max-width:760px; color:var(--muted); }
.flow-legend { display:flex; gap:20px; margin-top:18px; font-size:12px; color:var(--muted); }
.flow-legend span { display:flex; align-items:center; gap:7px; }
.flow-dot { width:9px; height:9px; border-radius:50%; background:#707887; }
.flow-dot.is-proposed { background:var(--gold); box-shadow:0 0 12px rgba(214,166,80,.7); }
.flow-board { display:grid; grid-template-columns:minmax(270px,1fr) 64px minmax(270px,1fr) 64px minmax(270px,1fr) 64px minmax(270px,1fr); align-items:center; overflow-x:auto; padding:4px 2px 24px; scroll-snap-type:x mandatory; }
.flow-card { min-width:270px; padding:17px; border:1px solid var(--line); background:rgba(16,21,32,.96); scroll-snap-align:center; }
.flow-card > header { display:flex; gap:13px; align-items:center; min-height:58px; }
.flow-card > header > span { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:11px; }
.flow-card h2 { margin:2px 0; font-size:20px; }
.flow-card small { color:var(--gold); letter-spacing:.14em; }
.screen-mock { position:relative; aspect-ratio:9/14; overflow:hidden; border:1px solid rgba(218,180,109,.38); background:#111827 center/cover no-repeat; }
.title-mock, .license-mock { background-image:url('assets/stardust-item-shop-v2.jpg'); }
.story-mock, .morning-mock { background-image:url('assets/otherworld-item-shop.jpg'); }
.mock-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,10,15,.05),rgba(7,10,15,.88)); }
.mock-copy, .mock-dialog, .mock-paper { position:absolute; inset:auto 7% 7%; padding:15px; background:rgba(7,12,18,.90); border:1px solid rgba(218,180,109,.42); }
.mock-dialog { inset:auto 6% 6%; }
.mock-paper { inset:9%; color:#2a241b; background:rgba(229,213,179,.95); border-color:#aa8142; }
.screen-mock h3 { margin:6px 0 8px; font-family:serif; font-size:20px; }
.screen-mock p { min-height:54px; margin:0 0 12px; font-size:11px; line-height:1.7; }
.screen-mock button, .mock-actions b { width:100%; padding:9px; border:1px solid #b88a43; color:#f4ead5; background:#795025; font-size:10px; }
.mock-input { margin:10px 0; padding:9px; border-bottom:1px solid #795025; color:#786b57; font-size:10px; }
.mock-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.mock-actions b { display:block; background:#172032; font-weight:400; }
.transition-rule { min-height:50px; margin:14px 2px 10px; color:var(--gold); font-size:11px; line-height:1.6; }
.flow-card label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
.flow-card textarea { min-height:82px; resize:vertical; font-size:16px; }
.flow-arrow { display:grid; gap:5px; justify-items:center; color:var(--gold); font-size:26px; }
.flow-arrow span { font-size:9px; writing-mode:vertical-rl; color:var(--muted); }
.flow-feedback { display:grid; grid-template-columns:minmax(220px,.7fr) 1.3fr; gap:22px; margin:26px 0 70px; padding:28px; }
.flow-feedback h2 { margin:4px 0 6px; }
.flow-feedback textarea { min-height:130px; font-size:16px; }
.flow-actions { grid-column:2; display:flex; justify-content:flex-end; gap:10px; }
.flow-feedback .input-hint { grid-column:2; margin:0; }

@media (max-width: 760px) {
  .flow-shell { width:calc(100% - 24px); padding-top:max(24px, calc(var(--safe-top) + 16px)); }
  .flow-hero { padding:22px 18px; }
  .flow-board { grid-template-columns:82vw 38px 82vw 38px 82vw 38px 82vw; margin-right:-12px; }
  .flow-card { min-width:0; }
  .flow-arrow { font-size:20px; }
  .flow-feedback { grid-template-columns:1fr; padding:21px 17px; }
  .flow-actions, .flow-feedback .input-hint { grid-column:1; }
  .flow-actions { flex-direction:column; }
}

.flow-v2 {
  background:
    linear-gradient(180deg, rgba(229,235,229,.74), rgba(135,151,157,.40) 40%, rgba(18,25,34,.96) 84%),
    radial-gradient(circle at 18% 12%, rgba(208,180,190,.72), transparent 34%),
    radial-gradient(circle at 80% 5%, rgba(210,225,190,.74), transparent 30%),
    url('assets/fantasy-atlas.jpg') center top/cover fixed no-repeat,
    #101722;
}
.flow-v2 .flow-hero { background:linear-gradient(122deg,rgba(40,48,61,.93),rgba(69,57,77,.84),rgba(51,66,67,.89)); backdrop-filter:blur(7px); }
.macro-loop { display:grid; grid-template-columns:minmax(240px,.7fr) 1.3fr; gap:28px; margin:0 0 24px; padding:25px 28px; background:rgba(15,23,31,.91); }
.macro-loop h2 { margin:4px 0; }
.macro-loop ol { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; padding:0; list-style:none; counter-reset:macro; }
.macro-loop li { position:relative; min-height:78px; padding:13px 12px 10px 40px; border:1px solid rgba(205,217,204,.25); background:rgba(166,183,177,.08); }
.macro-loop li::before { counter-increment:macro; content:counter(macro); position:absolute; left:12px; top:13px; color:#bed0c5; font-family:serif; }
.macro-loop b,.macro-loop span { display:block; }
.macro-loop span { margin-top:5px; color:#bac5c1; font-size:11px; line-height:1.5; }
.flow-chapter { margin:0 0 17px; border:1px solid rgba(220,226,210,.28); background:rgba(10,16,24,.91); box-shadow:0 14px 44px rgba(7,11,18,.25); }
.flow-chapter > summary { display:grid; grid-template-columns:110px minmax(220px,1fr) auto; align-items:center; gap:18px; min-height:90px; padding:20px 24px; cursor:pointer; list-style:none; background:linear-gradient(90deg,rgba(89,73,100,.33),rgba(119,143,137,.13)); }
.flow-chapter > summary::-webkit-details-marker { display:none; }
.flow-chapter > summary::after { content:'＋'; grid-column:4; color:#d6c3c8; font-size:22px; }
.flow-chapter[open] > summary::after { content:'−'; }
.flow-chapter > summary span { color:#c8d9ce; font-size:10px; letter-spacing:.16em; }
.flow-chapter > summary strong { color:#f2ede3; font-family:serif; font-size:25px; font-weight:500; }
.flow-chapter > summary small { max-width:300px; color:#aebbb7; }
.flow-chapter > .flow-board,.flow-chapter > .command-spec-grid,.flow-chapter > .progression-path,.flow-chapter > .long-loop { padding:24px; }
.flow-v2 .flow-card { border-color:rgba(190,207,199,.25); background:linear-gradient(155deg,rgba(20,29,40,.97),rgba(37,34,49,.94)); }
.flow-v2 .screen-mock { border-color:rgba(201,214,204,.34); }
.title-mock-v2 { background-image:linear-gradient(140deg,rgba(235,236,222,.22),rgba(128,108,147,.18)),url('assets/stardust-item-shop-v2.jpg'); filter:saturate(.75) brightness(1.06); }
.watercolor-wash { position:absolute; inset:0; background:radial-gradient(circle at 25% 25%,rgba(231,219,228,.75),transparent 30%),linear-gradient(180deg,rgba(230,237,226,.13),rgba(19,28,37,.42)); mix-blend-mode:screen; }
.title-cast { position:absolute; inset:17% 7% 25%; }
.title-cast i { position:absolute; display:grid; place-items:center; border:1px solid rgba(250,245,230,.58); border-radius:48% 48% 12px 12px; background:linear-gradient(180deg,rgba(231,218,229,.72),rgba(77,88,104,.88)); color:#2d3542; font-size:10px; font-style:normal; box-shadow:0 18px 34px rgba(15,24,34,.28); }
.title-cast i:nth-child(1) { width:42%; height:70%; right:12%; bottom:0; z-index:2; }
.title-cast i:nth-child(2) { width:29%; height:50%; left:4%; bottom:2%; }
.title-cast i:nth-child(3) { width:50%; height:25%; left:26%; top:3%; opacity:.68; }
.please-click { position:absolute; left:20%; right:20%; bottom:10%; padding:8px; text-align:center; color:#f7f0e5; background:rgba(22,30,43,.46); letter-spacing:.22em; font-size:11px; animation:flowPulse 2.2s ease-in-out infinite; }
@keyframes flowPulse { 50% { opacity:.48; } }
.menu-mock,.dialogue-mock,.shop-home-mock,.sales-mock { background-image:linear-gradient(rgba(15,25,32,.1),rgba(14,21,30,.72)),url('assets/otherworld-item-shop.jpg'); }
.menu-portrait,.portrait-chip,.customer-dot { display:grid; place-items:center; border-radius:50%; border:1px solid rgba(234,226,213,.65); background:linear-gradient(135deg,#d9c7d4,#7a7288); color:#26303c; font-family:serif; }
.menu-portrait { position:absolute; left:10%; top:15%; width:34%; aspect-ratio:1; }
.menu-lines { position:absolute; top:17%; right:8%; width:45%; display:grid; gap:8px; }
.menu-lines b,.response-mock b { padding:10px; border:1px solid rgba(222,225,212,.55); background:rgba(23,31,42,.82); color:#efeae1; font-size:11px; font-weight:400; }
.menu-mock > p { position:absolute; left:8%; right:8%; bottom:8%; min-height:0; padding:12px; background:rgba(27,35,44,.86); color:#f0ece3; }
.cutin { position:absolute; top:8%; left:8%; right:8%; height:38%; display:grid; place-items:center; background:linear-gradient(135deg,rgba(188,208,208,.75),rgba(139,124,153,.8)); color:#263242; font-size:11px; }
.portrait-chip { position:absolute; left:7%; bottom:7%; width:23%; aspect-ratio:1; }
.dialogue-copy { position:absolute; left:33%; right:6%; bottom:7%; min-height:23%; padding:13px; background:rgba(245,239,226,.92); color:#29313c; font-size:11px; line-height:1.7; }
.shop-home-mock .command-row { position:absolute; top:4%; left:4%; right:4%; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.command-row b { padding:7px 2px; border:1px solid rgba(227,230,218,.56); background:rgba(31,42,52,.83); color:#f4eee5; text-align:center; font-size:9px; font-weight:400; }
.shelf-mini { position:absolute; top:24%; right:6%; width:45%; height:37%; padding:12px; border:1px solid rgba(224,217,193,.52); background:rgba(216,217,202,.73); color:#39434c; font-size:10px; }
.shop-home-mock > small { position:absolute; left:5%; right:5%; bottom:1%; color:#d8ded6; }
.command-spec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.command-spec { min-width:0; min-height:250px; display:flex; flex-direction:column; }
.command-spec p { flex:1; color:#c3cbc7; line-height:1.8; }
.command-spec em { margin:8px 0 16px; color:#a9c2b8; font-size:11px; font-style:normal; }
.door-glow { position:absolute; top:15%; left:30%; right:10%; padding:28px 10px; text-align:center; color:#f6eedc; letter-spacing:.3em; background:rgba(202,185,144,.28); box-shadow:0 0 55px rgba(218,206,169,.32); }
.customer-dot { position:absolute; left:10%; top:13%; width:30%; aspect-ratio:1; }
.offer { position:absolute; left:8%; right:8%; bottom:14%; padding:16px; background:rgba(242,236,223,.92); color:#333a42; font-size:12px; }
.sales-mock > small { position:absolute; left:8%; right:8%; bottom:5%; color:#e6e8df; }
.response-mock { display:grid; align-content:center; gap:10px; padding:12%; background-image:linear-gradient(rgba(18,27,36,.76),rgba(27,25,39,.88)),url('assets/otherworld-item-shop.jpg'); }
.response-mock .locked { opacity:.52; }
.result-mock { display:grid; align-content:center; justify-items:center; gap:12px; padding:12%; background-image:radial-gradient(circle,rgba(198,216,195,.28),rgba(19,28,38,.88)),url('assets/otherworld-item-shop.jpg'); }
.result-mock strong { color:#dce7d7; font-size:32px; }
.result-mock span { color:#e9e4dc; }
.result-mock p { padding:12px; background:rgba(240,235,223,.9); color:#333b42; }
.progression-path { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.progression-path .flow-card { min-width:0; position:relative; }
.progression-path .flow-card:not(:last-child)::after { content:'→'; position:absolute; right:-19px; top:44%; z-index:2; color:#b9cbc2; }
.progression-path p { min-height:110px; color:#c4cec9; line-height:1.8; }
.long-loop { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.long-loop article { min-height:100px; padding:15px; border:1px solid rgba(200,214,205,.25); background:rgba(39,47,56,.72); }
.long-loop b,.long-loop span { display:block; }
.long-loop span { margin-top:8px; color:#bcc8c2; font-size:11px; line-height:1.6; }
.chapter-feedback { margin:0 24px 24px; min-width:0; }
.slice-card { display:grid; grid-template-columns:.7fr 1.3fr; gap:24px; margin:26px 0; padding:28px; background:linear-gradient(120deg,rgba(53,66,67,.94),rgba(61,48,71,.93)); }
.slice-card h2 { margin:4px 0; }
.slice-card ul { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 22px; margin:0; padding-left:20px; color:#e5e9e2; }
.slice-card > p { grid-column:2; margin:0; color:#bdc9c3; }

@media (max-width: 760px) {
  .macro-loop,.slice-card { grid-template-columns:1fr; padding:20px 17px; }
  .macro-loop ol { grid-template-columns:repeat(2,1fr); }
  .flow-chapter > summary { grid-template-columns:1fr auto; gap:7px 12px; min-height:84px; padding:17px; }
  .flow-chapter > summary span { grid-column:1; }
  .flow-chapter > summary strong { grid-column:1; font-size:20px; }
  .flow-chapter > summary small { grid-column:1; }
  .flow-chapter > summary::after { grid-column:2; grid-row:1/4; }
  .flow-chapter > .flow-board,.flow-chapter > .command-spec-grid,.flow-chapter > .progression-path,.flow-chapter > .long-loop { padding:16px; }
  .command-spec-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .command-spec { min-width:80vw; scroll-snap-align:center; }
  .progression-path { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .progression-path .flow-card { min-width:80vw; scroll-snap-align:center; }
  .progression-path .flow-card::after { display:none; }
  .long-loop { grid-template-columns:1fr 1fr; }
  .chapter-feedback { margin:0 16px 16px; }
  .slice-card ul { grid-template-columns:1fr; }
  .slice-card > p { grid-column:1; }
}