@font-face { font-family: 'Yuji Boku'; src: url('../fonts/yuji-boku-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zen Old Mincho'; src: url('../fonts/zen-old-mincho-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zen Old Mincho'; src: url('../fonts/zen-old-mincho-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Brush-font numerals are hard to read, so digits fall back to the serif. */
@font-face { font-family: 'Brush Digits'; src: url('../fonts/zen-old-mincho-700.woff2') format('woff2'); unicode-range: U+0030-0039; font-display: swap; }

:root {
  --paper: #efe4cc;
  --paper-light: #f7f0e1;
  --paper-deep: #e2d3b2;
  --ink: #2a211c;
  --ink-soft: rgba(42, 33, 28, 0.62);
  --ink-faint: rgba(42, 33, 28, 0.14);
  --vermilion: #c0392b;
  --vermilion-dark: #962a1f;
  --jade: #3f8f88;
  --gold: #e3b23c;
  --panel: rgba(247, 240, 225, 0.94);
  --shadow: 0 12px 30px rgba(60, 40, 20, 0.28);
  --font-brush: 'Brush Digits', 'Yuji Boku', 'Zen Old Mincho', serif;
  --font-body: 'Zen Old Mincho', Georgia, serif;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #1d1e2b;
  --paper-light: #262838;
  --paper-deep: #15161f;
  --ink: #efe6d4;
  --ink-soft: rgba(239, 230, 212, 0.68);
  --ink-faint: rgba(239, 230, 212, 0.14);
  --vermilion: #e2584a;
  --vermilion-dark: #b8443a;
  --panel: rgba(32, 33, 48, 0.95);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--paper); overscroll-behavior: none; }
body { font-family: var(--font-body); color: var(--ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; }
kbd { font-family: var(--font-body); font-size: 0.72em; letter-spacing: 1px; padding: 1px 6px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.defs { position: absolute; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }

.screen { position: fixed; inset: 0; display: none; }
.screen.is-active { display: block; }

/* Shared pieces */
.seal { width: 54px; height: 54px; flex: none; display: grid; place-items: center; background: var(--vermilion); color: #f6efe4; font-family: var(--font-brush); font-size: 30px; border-radius: 6px; transform: rotate(-6deg); box-shadow: inset 0 0 0 3px #f6efe4, inset 0 0 0 5px var(--vermilion); filter: url(#rough); }
.seal-large { width: 84px; height: 84px; font-size: 48px; }
.stamp { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--vermilion); color: #f6efe4; font: 400 26px var(--font-brush); cursor: pointer; filter: url(#rough); transition: transform 0.2s; box-shadow: 0 4px 10px rgba(60, 20, 10, 0.25); }
.stamp:hover { transform: rotate(-10deg) scale(1.08); }
.button { border: none; border-radius: 999px; padding: 10px 22px; font-size: 16px; cursor: pointer; transition: transform 0.15s, background 0.15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--vermilion); color: #f6efe4; box-shadow: 0 4px 0 var(--vermilion-dark); }
.button-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-soft); }
.button-danger { background: #6e2a22; color: #f6efe4; box-shadow: 0 4px 0 #3f1712; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: inset 0 0 0 2px var(--ink-faint); }
.icon-button:hover { background: var(--ink-faint); }
.enso { display: grid; place-items: center; border: none; background: none; cursor: pointer; font: inherit; color: var(--ink); position: relative; }
.enso::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 5px solid var(--ink); border-right-color: transparent; transform: rotate(-30deg); filter: url(#rough); pointer-events: none; }

/* Title */
.title-backdrop { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 70% 30%, var(--paper-light), var(--paper) 60%, var(--paper-deep)); }
.title-sun { position: absolute; right: 12%; top: 12%; width: min(32vh, 260px); aspect-ratio: 1; border-radius: 50%; background: var(--vermilion); opacity: 0.88; filter: url(#rough); }
.title-mountains { position: absolute; left: -5%; right: -5%; bottom: 0; height: 52%; background:
  radial-gradient(ellipse 30% 70% at 18% 100%, rgba(42, 33, 28, 0.55) 60%, transparent 61%),
  radial-gradient(ellipse 26% 90% at 46% 100%, rgba(42, 33, 28, 0.35) 60%, transparent 61%),
  radial-gradient(ellipse 34% 60% at 80% 100%, rgba(42, 33, 28, 0.5) 60%, transparent 61%),
  radial-gradient(ellipse 60% 30% at 50% 100%, rgba(63, 143, 136, 0.45) 60%, transparent 61%);
  filter: url(#rough); }
[data-theme="dark"] .title-mountains { filter: url(#rough) brightness(1.8); }
.title-card { position: absolute; left: max(6vw, var(--safe-left)); top: 50%; transform: translateY(-50%); width: min(520px, 88vw); animation: brush-in 0.9s ease-out both; }
.title-name { font-family: var(--font-brush); font-weight: 400; font-size: clamp(54px, 11vh, 108px); line-height: 0.9; margin-top: 10px; }
.title-tagline { font-size: clamp(14px, 2.4vh, 18px); color: var(--ink-soft); margin: 8px 0 clamp(14px, 3vh, 28px); }
.title-menu { display: grid; gap: clamp(8px, 1.4vh, 12px); }
.title-row { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: none; cursor: pointer; padding: clamp(10px, 1.8vh, 14px) 22px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow), inset 0 0 0 2px var(--ink-faint); transition: transform 0.2s, box-shadow 0.2s; }
.menu-button span { font-family: var(--font-brush); font-size: clamp(20px, 3.4vh, 28px); }
.menu-button small { font-size: 13px; color: var(--ink-soft); }
.menu-button:hover { transform: translateX(6px); box-shadow: var(--shadow), inset 4px 0 0 var(--vermilion); }
.menu-button-small { flex: 1; padding: 10px 14px; align-items: center; }
.menu-button-small span { font-size: 16px; font-family: var(--font-body); font-weight: 700; }
#screen-title > .theme-toggle { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(22px, var(--safe-right)); }

/* Worlds */
#screen-worlds { background: radial-gradient(ellipse at 20% 10%, var(--paper-light), var(--paper) 55%, var(--paper-deep)); overflow-y: auto; padding: 22px max(28px, var(--safe-right)) 30px max(28px, var(--safe-left)); }
#screen-worlds.is-active { display: block; }
.worlds-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.worlds-head h2 { font-family: var(--font-brush); font-weight: 400; font-size: 38px; line-height: 1; }
.worlds-head .theme-toggle { margin-left: auto; }
.worlds-count { color: var(--ink-soft); font-size: 14px; }
.world-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.world-card { position: relative; min-height: 170px; padding: 20px 18px 16px; border-radius: 6px; background: linear-gradient(90deg, var(--paper-light), var(--paper) 50%, var(--paper-light)); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.world-card::before, .world-card::after { content: ''; position: absolute; left: -6px; right: -6px; height: 10px; border-radius: 5px; background: linear-gradient(#5b3a22, #2b1a10); }
.world-card::before { top: -4px; } .world-card::after { bottom: -4px; }
.world-card h3 { font-family: var(--font-brush); font-weight: 400; font-size: 26px; line-height: 1.05; word-break: break-word; }
.world-card p { font-size: 13px; color: var(--ink-soft); }
.world-card .special { color: var(--vermilion); font-weight: 700; }
.world-card-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.world-card-actions .button { padding: 7px 14px; font-size: 14px; }
.world-card.is-empty { align-items: center; justify-content: center; text-align: center; cursor: pointer; border: 3px dashed var(--ink-faint); background: transparent; box-shadow: none; }
.world-card.is-empty::before, .world-card.is-empty::after { display: none; }
.world-card.is-empty:hover { border-color: var(--vermilion); }
.world-card.is-empty strong { font-family: var(--font-brush); font-weight: 400; font-size: 24px; }
.worlds-tip { margin-top: 22px; font-size: 14px; color: var(--ink-soft); }

/* Modals and toasts */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(30, 20, 12, 0.45); backdrop-filter: blur(2px); animation: fade-in 0.18s ease-out; }
.modal-backdrop.is-leaving { animation: fade-out 0.18s ease-in forwards; }
.modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 26px 20px; background: linear-gradient(90deg, var(--paper-light), var(--paper) 50%, var(--paper-light)); border-radius: 6px; box-shadow: var(--shadow); animation: unroll 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); user-select: text; -webkit-user-select: text; }
.modal-wide { width: min(720px, 100%); }
.modal-title { font-family: var(--font-brush); font-weight: 400; font-size: 30px; line-height: 1.1; margin-bottom: 10px; padding-right: 30px; }
.modal-body { display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.modal-body h3 { font-family: var(--font-brush); font-weight: 400; font-size: 20px; margin-top: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.field-label { font-weight: 700; font-size: 14px; }
.text-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--ink-faint); background: var(--paper-light); color: var(--ink); font: inherit; font-size: 18px; user-select: text; }
.text-input:focus { border-color: var(--vermilion); outline: none; }
.field-hint { font-size: 13px; color: var(--ink-soft); }
.field-error { font-size: 13px; color: var(--vermilion); min-height: 1em; }
.choice-group { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--ink-faint); cursor: pointer; }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--vermilion); background: rgba(192, 57, 43, 0.08); }
.choice input { accent-color: var(--vermilion); width: 18px; height: 18px; }
.choice small { display: block; color: var(--ink-soft); font-size: 13px; }
.control-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-size: 15px; }
.menu-list { display: grid; gap: 10px; }
.menu-list .button { width: 100%; text-align: left; border-radius: 12px; }
.reward-card { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(192, 57, 43, 0.08); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.new-world-form { display: grid; gap: 8px; }
.new-world-form h3 { margin-top: 8px; }
.new-world-form .field-error:empty { display: none; }
.character-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.character-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 8px 12px; border: none; border-radius: 14px; background: var(--paper-light); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-faint); cursor: pointer; text-align: center; font: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.character-card:hover { transform: translateY(-2px); }
.character-card canvas { width: 72px; height: 72px; }
.character-card b { font-family: var(--font-brush); font-weight: 400; font-size: 22px; }
.character-card small { font-size: 12px; color: var(--ink-soft); line-height: 1.25; }
.character-card:has(input:checked), .character-card[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--vermilion); background: rgba(192, 57, 43, 0.08); }
.character-card:has(input:focus-visible) { outline: 3px solid var(--vermilion); outline-offset: 2px; }
.choice-row { grid-template-columns: 1fr 1fr; }
.world-card-portrait { position: absolute; top: 10px; right: 10px; width: 56px; height: 56px; }
.world-card h3 { padding-right: 58px; }
.reward-card canvas { width: 64px; height: 64px; flex: none; }
.game-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.shelf-item { display: grid; justify-items: center; gap: 6px; padding: 10px; border-radius: 12px; border: none; background: var(--paper-light); box-shadow: inset 0 0 0 2px var(--ink-faint); cursor: pointer; }
.shelf-item canvas { width: 56px; height: 56px; }
.shelf-item:disabled { opacity: 0.4; cursor: not-allowed; }
.shelf-item small { color: var(--ink-soft); }
#toast-root { position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 60; pointer-events: none; }
.toast { padding: 10px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; box-shadow: var(--shadow); animation: drop-in 0.25s ease-out; max-width: 80vw; text-align: center; }
.toast.is-leaving { animation: fade-out 0.3s ease-in forwards; }

@keyframes brush-in { from { opacity: 0; filter: blur(6px); transform: translate(-20px, -50%); } }
@keyframes unroll { from { transform: scaleY(0.1); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes drop-in { from { transform: translateY(-12px); opacity: 0; } }