@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
  color-scheme: dark;
  --ink: #101722;
  --paper: #f3e7c8;
  --soft: #b8bdba;
  --gold: #e6c77f;
  --tile: min(78px, max(44px, calc(20dvh - 64px)));
  --gap: 4px;
  --board-w: calc(var(--tile) * 9 + var(--gap) * 8);
  --board-h: calc(var(--tile) * 11 + var(--gap) * 10);
  --view-size: calc(var(--tile) * 5 + var(--gap) * 4);
  --sight-radius: 205px;
  --avatar-w: 100px;
  --avatar-h: calc(var(--avatar-w) * 724 / 543);
}

* { box-sizing: border-box; }
html { min-width: 320px; height: 100%; overscroll-behavior: none; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  color: var(--paper);
  background: #101722;
  font: 14px/1.6 'DotGothic16', 'MS Gothic', monospace;
}
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.site-shell { height: 100dvh; overflow: hidden; }

.site-header {
  width: min(960px, calc(100% - 32px));
  min-height: 68px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid #46515a;
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 19px; letter-spacing: .06em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid var(--gold); color: var(--gold); font-size: 18px; line-height: 1; }
.main-nav { display: flex; gap: 9px; }
.nav-button {
  min-width: 82px;
  min-height: 39px;
  padding: 4px 13px;
  border: 2px solid #83775e;
  background: #273742;
  box-shadow: 3px 3px 0 #070d13;
  color: var(--paper);
  cursor: pointer;
}
.nav-button:hover { background: #374b54; }
.nav-button.is-active { border-color: var(--gold); background: #62563f; }
.guide-open { min-height: 39px; padding: 4px 11px; border: 2px solid #83775e; background: #273742; color: var(--paper); white-space: nowrap; cursor: pointer; }
.settings-open { width: 39px; height: 39px; border: 2px solid #83775e; background: #273742; color: var(--paper); cursor: pointer; }

.main-layout { width: min(960px, calc(100% - 32px)); margin: 16px auto 0; }
.story-panel {
  min-height: 0;
  padding: 13px 20px 15px;
  border: 3px solid #bba679;
  background: #1b2933;
  box-shadow: 4px 4px 0 #080e15, inset 0 0 0 3px #394249;
}
#explorePanel { display: grid; grid-template-columns: minmax(0, 1fr) 274px; gap: 0 26px; }
.chapter-header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.chapter-number { margin: 0; color: var(--gold); font-size: 11px; letter-spacing: .07em; }
.chapter-track { display: flex; align-items: center; gap: 7px; }
.track-line { display: none; }
.track-step { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #56616a; background: #17242d; color: #77858b; font-size: 16px; cursor: pointer; touch-action: manipulation; }
.track-step.is-current { border-color: var(--gold); color: var(--gold); background: #4e4636; }
.track-step.is-done { border-color: #a99567; color: #d8c397; }
.track-step:disabled { cursor: default; }
.track-step:not(:disabled):hover { box-shadow: 0 0 9px rgba(239, 200, 111, .6); }
h1, h2, p { margin-top: 0; }
h1 { grid-column: 1; margin: 3px 0 0; font-size: clamp(21px, 2.5vw, 26px); font-weight: normal; line-height: 1.4; }
.story-copy { grid-column: 1; margin: 4px 0 0; color: var(--soft); font-size: 12px; }
.book-chooser { grid-column: 1; display: flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--soft); font-size: 11px; }
.book-chooser select { min-width: 145px; min-height: 28px; border: 1px solid #a78f62; background: #304048; color: var(--paper); font: inherit; }
.search-button { grid-column: 1; justify-self: start; min-height: 31px; margin-top: 7px; padding: 3px 12px; border: 2px solid var(--gold); background: #a88953; color: #101722; cursor: pointer; }
.search-button:disabled { border-color: #66716d; background: #47565a; color: #9ca7a3; cursor: not-allowed; }
.book-progress { grid-column: 2; grid-row: 2 / 6; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 4px 0 0 18px; border-left: 2px solid #54606a; }
.book-progress-label { color: #c2c4b7; font-size: 10px; white-space: nowrap; }
.fragment-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.letter-slots { display: flex; gap: 4px; }
.letter-slots:has(.letter-slot:nth-child(6)) .letter-slot { width: 29px; height: 34px; font-size: 17px; }
.letter-slot { width: 32px; height: 38px; display: grid; place-items: center; border: 2px solid #69716a; background: #101d27; color: #687276; font-size: 20px; }
.letter-slot.is-found { border-color: var(--gold); background: #62533a; color: #fff0bf; box-shadow: 0 0 11px rgba(239, 200, 111, .68); }
.letter-slot.is-smallified { font-size: 13px; box-shadow: 0 0 0 2px rgba(245, 213, 145, .55), 0 0 18px rgba(239, 200, 111, .9); }
.letter-slots:has(.letter-slot:nth-child(6)) .letter-slot.is-smallified { font-size: 11px; }
.letter-slot.is-pending { border-color: #c6a875; background: #4f493a; color: #e8d5a1; box-shadow: 0 0 6px rgba(239, 200, 111, .35); }
.return-fragment { min-height: 26px; padding: 2px 7px; border: 1px solid #a78f62; background: #304048; color: #e9d6ac; font-size: 10px; cursor: pointer; }
.return-fragment:hover:not(:disabled) { border-color: var(--gold); background: #40515a; }
.return-fragment:disabled { border-color: #4e595b; color: #738084; cursor: default; }
#magicPanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; align-items: center; }
#magicPanel .chapter-header { grid-column: 1 / -1; }
#magicPanel h1 { grid-column: 1; }
.teleport-button { min-height: 36px; padding: 4px 9px; border: 2px solid var(--gold); background: #a88953; color: #101722; cursor: pointer; white-space: nowrap; }
.teleport-button:disabled { border-color: #66716d; background: #47565a; color: #9ca7a3; cursor: not-allowed; }
.special-section { grid-column: 1 / -1; margin-top: 8px; padding-top: 7px; border-top: 1px solid #54606a; }
.special-toggle { width: 100%; min-height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; border: 1px solid #a78f62; background: #273742; color: var(--paper); text-align: left; cursor: pointer; }
.special-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.special-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.special-spell { min-height: 27px; padding: 2px 7px; border: 1px solid var(--gold); background: #475641; color: #fff0bf; cursor: pointer; font-size: 11px; }
.special-spell:disabled { border-color: #66716d; background: #304048; color: #8f9a99; cursor: not-allowed; }
.special-spell.is-active { border-color: #fff0b9; background: #806b40; color: #fff8de; box-shadow: inset 0 0 0 1px #f0d58a, 0 0 13px rgba(240, 213, 138, .78); }

.world-panel { min-width: 0; margin-top: 13px; display: flex; flex-direction: column; align-items: center; }
.board-outer {
  position: relative;
  width: calc(var(--view-size) + 6px);
  height: calc(var(--view-size) + 6px);
  overflow: hidden;
  border: 3px solid #6e6551;
  background: #030810;
  box-shadow: inset 0 0 0 3px #283640, 4px 4px 0 #080e15;
}
.board-outer::after { content: ''; position: absolute; z-index: 5; inset: 0; background: #030810; opacity: 0; pointer-events: none; transition: opacity 200ms linear; }
.board-outer.is-teleporting::after { opacity: 1; }
.board { position: absolute; top: 0; left: 0; width: var(--board-w); height: var(--board-h); opacity: 0; --glow-x: 0px; --glow-y: 0px; transform-origin: top left; transition: transform 240ms linear; }
.board.is-ready { opacity: 1; }
.board-floor { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 145px at var(--glow-x) var(--glow-y), rgba(240,198,108,.22), transparent); }
.rooms { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(9, var(--tile)); grid-template-rows: repeat(11, var(--tile)); gap: var(--gap); }
.room {
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  border: 1px solid #626a6d;
  background: #39434b;
  box-shadow: inset 0 1px #505a5e;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.room:hover { border-color: #d4c399; background: #4e5960; }
.room.is-visited:not(.is-route):not(.is-goal) { background: #48545a; }
.room.is-route { border-color: #a98e5d; background: #4b4b44; }
.room.is-goal { border-color: #ffe0a0; background: #725e3b; box-shadow: inset 0 0 0 1px #ddbb75, 0 0 0 2px #ad8a4d, 0 0 13px #eac67f; animation: goal-pulse 2s ease-in-out infinite; }
.room.is-book-hint { border-color: #fff0b9; background: #947348; box-shadow: inset 0 0 0 2px #f0d58a, 0 0 0 2px #eac67f, 0 0 24px #ffe2a1; animation: goal-pulse .56s ease-in-out 3; }
.room.is-secret { background: #303d48; border-color: #77808a; }
.room.is-a-dan:not(.is-route):not(.is-goal):not(.is-book-hint) {
  border-color: #080c10;
  background: #69737a;
  box-shadow: 0 0 0 1px #d3bc85;
}
.room.is-a-dan:hover:not(.is-route):not(.is-goal):not(.is-book-hint) { background: #7b868c; }
.board-light { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(circle var(--sight-radius) at var(--glow-x) var(--glow-y), transparent 0 27%, rgba(3,8,16,.32) 51%, rgba(3,8,16,.78) 76%, #030810 100%); }
.board.is-illuminated .board-light { opacity: 0; }
.board.is-illuminated .board-floor { background: rgba(240,198,108,.13); }
.board-outer.is-floating .board { cursor: crosshair; }
.edge-exit { position: absolute; z-index: 1; left: calc((var(--tile) + var(--gap)) * 8 + var(--tile) / 4); top: calc((var(--tile) + var(--gap)) * 10 + var(--tile) / 4); width: calc(var(--tile) / 2); height: calc(var(--tile) / 2); padding: 0; border: 1px solid #47535a; background: #111b23; color: #667179; font-size: calc(var(--tile) / 4); cursor: pointer; }
.edge-exit:hover, .edge-exit:focus-visible { border-color: #67747b; color: #8a969c; }
.avatar { position: absolute; z-index: 3; top: 0; left: 0; width: var(--avatar-w); height: var(--avatar-h); pointer-events: none; transition: left 240ms linear, top 240ms linear; filter: drop-shadow(2px 4px 0 rgba(0,0,0,.58)); }
.avatar-shadow { position: absolute; bottom: 15%; left: 28%; width: 44%; height: 5%; border-radius: 50%; background: rgba(5,7,11,.55); }
.avatar-sprite { position: absolute; inset: 0; display: block; background: url('./assets/protagonist-option-b-walk-v2.png') 0 0 / 400% 100% no-repeat; image-rendering: pixelated; }
.avatar.is-facing-up .avatar-sprite { background-image: url('./assets/protagonist-option-b-up-v2.png'); }
.avatar.is-facing-down .avatar-sprite { background-image: url('./assets/protagonist-option-b-down.png'); }
.avatar-fallback { position: absolute; inset: 14% 20% 8%; display: grid; place-items: center; border: 2px solid var(--gold); background: #253c50; color: var(--gold); font-size: 26px; }
.avatar.asset-ready .avatar-fallback { display: none; }
.avatar.is-walking .avatar-sprite { animation: wizard-walk .48s steps(1, end) infinite; }
.avatar.is-facing-left .avatar-sprite { transform: scaleX(-1); }
.avatar.is-teleporting { animation: teleport-pop .42s ease-in-out both; }
.world-footer { margin: 10px 0 0; color: #9ba6a6; font-size: 11px; text-align: center; }

.message-toast { position: fixed; z-index: 12; left: 50%; bottom: 20px; max-width: min(440px, calc(100vw - 30px)); padding: 9px 14px; border: 2px solid var(--gold); background: #263943; box-shadow: 4px 4px 0 #070d13; color: var(--paper); font-size: 12px; text-align: center; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.message-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.chapter-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(5,11,19,.84); }
.chapter-modal { width: min(390px, 100%); padding: 22px; border: 3px solid var(--gold); background: #263943; box-shadow: 6px 6px 0 #070d13; text-align: center; }
.modal-book { width: 49px; height: 57px; display: grid; place-items: center; margin: 0 auto 10px; border: 3px solid var(--gold); background: #6d5840; color: var(--gold); font-size: 20px; }
.modal-eyebrow { margin-bottom: 5px; color: var(--gold); font-size: 11px; }
.chapter-modal h2 { margin: 0; font-size: 21px; font-weight: normal; }
.chapter-modal p:not(.modal-eyebrow) { margin: 10px 0 18px; color: #c1c6b9; font-size: 12px; }
.chapter-modal button { width: 100%; min-height: 42px; border: 2px solid var(--gold); background: #b4925a; color: #101722; cursor: pointer; }
.chapter-modal .share-button { margin-top: 8px; background: #17242d; color: var(--paper); }
.game-dialog { width: min(390px, calc(100vw - 28px)); max-height: 90dvh; overflow-y: auto; padding: 17px; border: 3px solid var(--gold); background: #263943; color: var(--paper); box-shadow: 5px 5px 0 #070d13; }
.game-dialog::backdrop { background: rgba(4,9,16,.8); }
.guide-dialog { width: min(470px, calc(100vw - 28px)); }
.guide-section + .guide-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #66716d; }
.guide-section h3 { margin: 0 0 5px; color: var(--gold); font-size: 13px; font-weight: normal; }
.guide-section p { margin: 0; font-size: 12px; line-height: 1.85; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dialog-head h2 { margin: 0; font-size: 18px; font-weight: normal; }
.dialog-head button { width: 30px; height: 30px; border: 1px solid var(--gold); background: #17242d; color: var(--paper); cursor: pointer; }
.sound-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sound-row button { min-height: 31px; padding: 2px 9px; border: 1px solid var(--gold); background: #304048; color: var(--paper); cursor: pointer; }
.sound-row button[aria-pressed="true"] { background: #a88953; color: #101722; }
#seVolume { display: block; width: 100%; margin: 12px 0; accent-color: var(--gold); }
.settings-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.settings-links a { display: block; min-width: 0; padding: 8px 10px; border: 1px solid #83775e; color: var(--paper); text-align: center; text-decoration: none; }
.settings-links .settings-hint-link { text-align: left; }
.settings-hint-link span { display: block; }
.settings-hint-note { margin-top: 5px; color: var(--soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; text-wrap: balance; }
.settings-note { margin: 11px 0 0; color: var(--soft); font-size: 10px; }
.record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.record-grid div { display: grid; gap: 4px; padding: 8px 4px; border: 1px solid #83775e; text-align: center; }
.record-grid span { font-size: 10px; }
.record-grid strong { font-size: 17px; color: var(--gold); }

@keyframes goal-pulse { 50% { box-shadow: inset 0 0 0 1px #eacc8b, 0 0 0 2px #c49f5b, 0 0 20px #f1d38d; } }
@keyframes wizard-walk {
  0%, 24.99% { background-position-x: 0%; }
  25%, 49.99% { background-position-x: 33.3333%; }
  50%, 74.99% { background-position-x: 66.6667%; }
  75%, 100% { background-position-x: 100%; }
}
@keyframes teleport-pop { 50% { opacity: .18; transform: scale(.7); } }

@media (max-width: 680px) {
  :root { --tile: min(64px, max(34px, calc(20dvh - 62px))); --gap: 2px; --sight-radius: 177px; --avatar-w: 84px; }
  .site-header, .main-layout { width: calc(100% - 24px); }
  .site-header { min-height: 58px; }
  .brand { font-size: 15px; gap: 6px; }
  .brand-mark { width: 25px; height: 25px; font-size: 15px; }
  .main-nav { gap: 6px; }
  .nav-button { min-width: 60px; min-height: 34px; padding: 3px 7px; font-size: 12px; box-shadow: 2px 2px 0 #070d13; }
  .guide-open { min-height: 34px; padding: 3px 8px; font-size: 11px; }
  .settings-open { width: 34px; height: 34px; }
  .main-layout { margin-top: 11px; }
  .story-panel { min-height: 0; padding: 10px 12px 12px; border-width: 2px; }
  #explorePanel, #magicPanel { display: block; }
  .chapter-number { font-size: 10px; }
  .track-step { width: 30px; height: 30px; font-size: 14px; }
  h1 { margin-top: 5px; font-size: 20px; }
  .story-copy { margin-top: 3px; font-size: 11px; }
  .search-button { min-height: 29px; margin-top: 7px; font-size: 11px; }
  .book-progress { display: flex; flex-direction: row; gap: 6px 13px; align-items: center; justify-content: space-between; margin-top: 7px; padding: 6px 0 0; border-left: 0; border-top: 1px solid #556167; }
  .fragment-controls { margin-left: auto; align-items: flex-end; }
  .letter-slot { width: 28px; height: 31px; font-size: 17px; }
  .letter-slots:has(.letter-slot:nth-child(6)) .letter-slot { width: 24px; height: 27px; font-size: 14px; }
  .letter-slot.is-smallified { font-size: 11px; }
  .letter-slots:has(.letter-slot:nth-child(6)) .letter-slot.is-smallified { font-size: 9px; }
  .return-fragment { min-height: 25px; }
  .teleport-button { margin-top: 9px; }
  .world-panel { margin-top: 11px; }
  .board-outer { width: calc(var(--view-size) + 4px); height: calc(var(--view-size) + 4px); border-width: 2px; }
  .world-footer { margin-top: 6px; font-size: 10px; }
}
@media (max-width: 480px) {
  :root { --tile: min(60px, max(34px, calc(20dvh - 76px))); }
  .site-header { display: grid; grid-template-rows: auto auto; min-height: 82px; gap: 3px; padding-block: 5px; }
  .main-nav { justify-content: flex-end; }
}
@media (max-width: 360px) {
  :root { --tile: min(56px, max(34px, calc(20dvh - 62px))); --gap: 2px; --sight-radius: 157px; --avatar-w: 76px; }
  .site-header, .main-layout { width: calc(100% - 16px); }
  .world-footer { font-size: 9px; }
}
@media (max-height: 630px) {
  :root { --tile: min(56px, max(30px, calc(20dvh - 69px))); }
  .site-header { min-height: 48px; }
  .main-layout { margin-top: 6px; }
  .story-panel { padding-block: 7px; }
  .world-panel { margin-top: 7px; }
  .world-footer { display: none; }
}
@media (max-width: 480px) and (max-height: 630px) {
  :root { --tile: min(56px, max(30px, calc(20dvh - 76px))); }
  .site-header { min-height: 70px; padding-block: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}