/* Original block UI: readable Korean labels, beveled controls, separate settings. */
.voxel-stage {
  --block-ink: #264b45;
  --block-edge: #91afa0;
  --block-face: #fffdf5;
  --block-green: #32876d;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Dotum", sans-serif;
}
.voxel-stage .voxel-gate {
  background: linear-gradient(120deg, #e9f7edb8, #f9f6df80 50%, #d7f3f0a3);
  backdrop-filter: none;
}
.voxel-stage .voxel-gate-card {
  position: relative;
  width: min(740px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-content: center;
  column-gap: 48px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  scrollbar-color: #a3a69c #252b25;
}
.voxel-stage .voxel-gate-card > :not(.voxel-pause-world) { grid-column: 1; }
.voxel-stage .voxel-gate h2 {
  color: #214c43;
  font-size: 30px;
  line-height: 1.25;
  text-shadow: 0 2px #fff9;
  letter-spacing: -.04em;
  margin: 0 0 20px;
}
.voxel-stage .voxel-gate-tag { color: #2b6d5c; }
.voxel-stage .voxel-gate-card > p { color: #36584c; }
.voxel-stage .voxel-gate button,
.voxel-stage .voxel-controls-guide summary {
  appearance: none;
  border: 2px solid var(--block-edge);
  border-radius: 4px;
  background: var(--block-face);
  box-shadow: inset 0 2px #fff, inset 0 -4px #dce5d5, 0 3px 0 #65847235, 0 6px 14px #355a4210;
  color: var(--block-ink);
  text-shadow: none;
  min-height: 48px;
  padding: 10px 12px 14px;
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition: none;
}
.voxel-stage .voxel-gate button:hover:not(:disabled),
.voxel-stage .voxel-controls-guide summary:hover {
  background: #e5f5eb;
  color: #172212;
}
.voxel-stage .voxel-gate button:active:not(:disabled) {
  box-shadow: inset 0 3px #c6ddcc, inset 0 -2px #f4faf0;
  transform: translateY(2px);
}
.voxel-stage .voxel-gate :is(button,input,summary):focus-visible {
  outline: 3px solid #246a5a;
  outline-offset: 3px;
}
.voxel-stage .voxel-gate button:disabled {
  opacity: 1;
  color: #718476;
  background: #e2e9dd;
  box-shadow: inset 0 2px #f0f5eb, inset 0 -4px #cdd8c8;
  cursor: not-allowed;
}
.voxel-stage .voxel-gate .voxel-play,
.voxel-stage .voxel-gate .story-entry {
  margin: 0 0 8px;
  background: var(--block-green);
  color: #fff;
  border-color: #236c57;
  box-shadow: inset 0 3px #6bb79a, inset 0 -5px #246b56, 0 4px 0 #285b4125;
  text-shadow: 0 1px #235c4b;
  text-align: center;
  justify-content: center;
}
.voxel-stage .voxel-play:hover,
.voxel-stage .voxel-gate .story-entry:hover {
  background: #419b7c !important;
  color: white !important;
}
.voxel-stage .voxel-play > span { display: none; }
.voxel-stage .voxel-game-menu { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.voxel-stage .voxel-game-menu .tree-hud-actions { gap: 8px; }
.voxel-stage .voxel-menu-tools { order: 5; gap: 8px; }
.voxel-stage .voxel-menu-tools [data-voxel="build"],
.voxel-stage .voxel-menu-tools [data-voxel="fullscreen"],
.voxel-stage .voxel-menu-tools [data-art],
.voxel-stage .chapter-av-settings,
.voxel-stage .voxel-controls-guide,
.voxel-stage [data-voxel="menu-back"],
.voxel-stage .voxel-settings-title,
.voxel-stage .voxel-fullscreen-note { display: none; }
.voxel-stage .voxel-pause-world {
  grid-column: 2;
  grid-row: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #254c43;
  gap: 10px;
  text-align: center;
  min-width: 0;
  padding: 18px;
  border: 2px solid #fff9;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffff5ed, #e4f6e9e8);
  box-shadow: 0 12px 36px #2853451a, inset 0 1px #fff;
}
.voxel-stage:not(.voxel-entered) .voxel-pause-state { display: none; }
.voxel-world-label {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.06em;
  text-shadow: 0 2px #fff;
}
.voxel-pause-location { font-size: 16px; line-height: 1.5; word-break: keep-all; }
.voxel-pause-state { font-size: 12px; color: #526f62; }
.voxel-stage .voxel-pause-world .tree-growth-status {
  margin: 8px 0 0;
  width: 100%;
  background: #f9fcf2;
  color: #294f40;
  border: 1px solid #b8d0b6;
  box-shadow: inset 0 2px #fff, inset 0 -3px #e3edda;
  padding: 10px;
  text-align: left;
}
.voxel-stage .voxel-pause-world .tree-growth-status :is(small,i) { color: #526d4b; font-size: 12px; margin-top: 4px; }
.voxel-stage .tree-growth-status progress { border-radius: 0; accent-color: #65a878; }
.voxel-stage .tree-growth-status progress::-webkit-progress-bar { background: #dde9d6; }
.voxel-stage .tree-growth-status progress::-webkit-progress-value { background: #65a878; }
.voxel-stage .voxel-pixel-avatar { position: relative; width: 140px; height: 170px; margin: 12px 0; filter: drop-shadow(5px 7px #3e876322); }
.voxel-pixel-avatar::before { content: ""; position: absolute; inset: 18px -18px -4px; background: radial-gradient(ellipse, #fff8d2 25%, #c7ead180 65%, transparent 66%); }
.voxel-pixel-avatar::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -6px; height: 6px; background: #89bca25c; }
.voxel-pixel-avatar i { position: absolute; display: block; border: 2px solid #20271d; border-radius: 0; }
.pixel-head { top: 12px; left: 45px; width: 50px; height: 48px; background: #f1cf9b; box-shadow: inset -6px -4px #d8ad7c; }
.pixel-head::after { content: ""; position: absolute; width: 12px; height: 3px; background: #a96d48; left: 17px; top: 34px; box-shadow: -10px -5px #e9b18b, 10px -5px #e9b18b; }
.pixel-head::before { content: ""; position: absolute; width: 6px; height: 6px; left: 9px; top: 21px; background: #253326; box-shadow: 22px 0 #253326; }
.pixel-hair { top: 6px; left: 43px; width: 54px; height: 18px; background: #74543c; box-shadow: inset -8px 0 #563e2d, inset 0 4px #927047; }
.pixel-body { top: 61px; left: 43px; width: 54px; height: 59px; background: #467d70; box-shadow: inset -10px 0 #305d53; }
.pixel-body::after { content: ""; position: absolute; top: 36px; width: 50px; height: 7px; background: #b1a173; }
.pixel-arm { top: 62px; width: 22px; height: 59px; background: linear-gradient(#467d70 70%, #d2ab7d 70%); }
.pixel-arm.pixel-left { left: 20px; }
.pixel-arm.pixel-right { right: 20px; }
.pixel-leg { top: 120px; width: 25px; height: 47px; background: linear-gradient(#555c49 76%, #30382e 76%); }
.pixel-leg.pixel-left { left: 44px; }
.pixel-leg.pixel-right { right: 44px; }
/* Settings have their own page; closed controls cannot receive keyboard focus. */
.voxel-stage.voxel-settings-open .voxel-gate-card { display: block; width: min(520px, 100%); padding: 18px; background: #f6fbf0f5; border: 2px solid #a9c3ac; border-radius: 6px; box-shadow: inset 0 3px #fff, 0 16px 40px #294c3322; }
.voxel-stage.voxel-settings-open .voxel-gate-card > :not(.voxel-game-menu) { display: none; }
.voxel-stage.voxel-settings-open .voxel-game-menu > :is(.tree-hud-actions,[data-voxel="settings"],[data-story],[data-memory]) { display: none; }
.voxel-stage.voxel-settings-open [data-voxel="menu-back"] { display: block; order: -5; align-self: start; min-width: 88px; }
.voxel-stage.voxel-settings-open .voxel-settings-title { display: block; order: -4; color: #264e43; font-size: 24px; margin: 8px 0; }
.voxel-stage.voxel-settings-open .voxel-menu-tools { order: -3; }
.voxel-stage.voxel-settings-open .voxel-menu-tools :is([data-voxel="home"],[data-voxel="exit"]) { display: none; }
.voxel-stage.voxel-settings-open .voxel-menu-tools :is([data-voxel="build"],[data-voxel="fullscreen"],[data-art]) { display: block; }
.voxel-stage.voxel-settings-open .chapter-av-settings:not([hidden]) { display: grid; margin: 8px 0; background: #eaf3e3; border: 1px solid #b4cbae; border-radius: 4px; color: #2e5243; }
.voxel-stage.voxel-settings-open .chapter-av-settings small { color: #526b4e; }
.voxel-stage.voxel-settings-open .chapter-av-settings input { accent-color: #80b957; }
.voxel-stage.voxel-settings-open .voxel-controls-guide { display: block; color: #2e5243; }
.voxel-stage.voxel-settings-open .voxel-controls-guide p { color: #526b4e; padding: 10px 0; margin: 0; }
.voxel-stage.voxel-settings-open .voxel-fullscreen-note:not([hidden]) { display: block; color: #182811; }
/* HUD retains its compact placement; only its visual language changes. */
.voxel-stage :is(.voxel-toolbar button,.tree-objective,.story-compass-button,.voxel-context button,.voxel-toast,.chapter-shot,.chapter-shot button,.voxel-hotbar,.voxel-hotbar button,.voxel-touch-actions button) {
  border-radius: 0;
  border: 2px solid #131c12;
  box-shadow: inset 0 2px #ffffff30, inset 0 -3px #0005;
  backdrop-filter: none;
}
.voxel-stage :is(.voxel-toolbar button,.tree-objective,.story-compass-button,.voxel-toast,.chapter-shot) { background: #263025d9; color: white; }
.voxel-stage :is(.voxel-context button,.chapter-shot button) { background: #d7dacd; color: #253020; }
.voxel-stage .voxel-context button { font-size: 15px; font-weight: 800; }
.voxel-stage :is(.story-dialog,.tree-dialog) { border-radius: 0; border: 3px solid #263425; box-shadow: inset 0 3px #fff8, 5px 5px #13200e70; }
.voxel-stage :is(.story-dialog,.tree-dialog) button { border-radius: 0; }
.voxel-stage .voxel-hotbar button[aria-pressed="true"] { outline: 3px solid #f4f4e7; outline-offset: -3px; }
.voxel-stage:has(.voxel-gate:not([hidden])) :is(.voxel-top,.tree-objective,.story-compass-button,.voxel-toast) { visibility: hidden; }
.voxel-stage.chapter-directing :is(.tree-objective,.story-compass-button,.voxel-top,.voxel-hotbar) { visibility: hidden; }
.voxel-stage.chapter-directing .chapter-shot {
  width: min(660px, calc(100% - 32px));
  padding: 14px 16px 18px;
  gap: 16px;
  background: #fffdf2f2;
  color: #254c42;
  border: 2px solid #a2bfa5;
  border-radius: 5px;
  box-shadow: inset 0 2px #fff, 0 8px 28px #2c634328;
}
.chapter-caption { flex: 1; min-width: 0; display: grid; gap: 5px; }
.voxel-stage .chapter-caption small { margin: 0; color: #477956; font-size: 12px; font-weight: 800; opacity: 1; display: block; }
.chapter-caption > span { font-size: 17px; font-weight: 800; line-height: 1.5; word-break: keep-all; }
.chapter-caption > b { color: #61764f; font-size: 12px; font-weight: 600; }
.chapter-caption > b:empty { display: none; }
.voxel-stage .chapter-shot button { border: 1px solid #b3c7ae; background: #edf4e5; color: #355e48; box-shadow: inset 0 2px #fff, inset 0 -3px #d8e6cf; padding: 8px 12px; }
.chapter-shot-progress { position: absolute; bottom: 0; left: 0; width: var(--shot-progress, 0%); height: 3px; background: #69a482; }
.voxel-stage .chapter-shot[data-tone="gold"] { border-color: #ccb577; background: #fffbedf5; }
.voxel-stage .chapter-shot[data-tone="silver"] { border-color: #a5c3ce; background: #f4fcfff5; }
.voxel-stage .chapter-shot[data-tone="iron"] { border-color: #a6b9b0; background: #f7faf3f5; }
.chapter-shot[data-tone="gold"] .chapter-shot-progress { background: #b28d39; }
.chapter-shot[data-tone="silver"] .chapter-shot-progress { background: #6f9daa; }
@media (max-width: 600px) {
  .voxel-stage .chapter-shot { padding: 10px 12px 14px; gap: 8px; }
  .chapter-caption > span { font-size: 15px; }
  .voxel-stage .chapter-shot button { padding: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .voxel-stage .chapter-shot { bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px 12px 10px; }
  .chapter-caption { gap: 2px; }
  .chapter-caption > span { font-size: 14px; }
}
.voxel-stage [hidden] { display: none !important; }
/* Keep the workshop visible while its workbench is in use. */
.voxel-stage:has(.memory-in-workshop[open]) :is(.voxel-gate,.voxel-top,.tree-objective,.voxel-context,.voxel-crosshair,.voxel-toast) { visibility: hidden; pointer-events: none; }
.voxel-stage .memory-in-workshop {
  position: fixed; inset: auto auto 18px 18px; margin: 0;
  width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 36px);
  padding: 18px; border: 2px solid #a9c7b3; border-radius: 6px;
  background: #fffdf3f5; color: #294e42;
  box-shadow: 0 12px 35px #244d3520; overflow: auto;
}
.memory-in-workshop::backdrop { background: #23433318; backdrop-filter: none; }
.memory-in-workshop .story-dialog-head { margin-bottom: 10px; }
.memory-in-workshop .story-dialog-head h2 { font-size: 19px; line-height: 1.35; }
.memory-in-workshop .story-dialog-head small { font-size: 11px; }
.memory-in-workshop .story-dialog-head button { min-width: 44px; min-height: 44px; }
.memory-in-workshop .memory-glyph { font-size: 72px; margin: 6px 0; padding: 4px 0; line-height: 1.15; }
.memory-in-workshop .memory-hint-button { margin: 6px auto 0; min-height: 44px; }
.memory-in-workshop .story-choices { gap: 7px; }
.memory-in-workshop .story-choices button { min-height: 44px; padding: 8px; font-size: 16px; }
.memory-in-workshop .memory-scene-clue { margin: 0 0 10px; font-size: 13px; color: #557363; line-height: 1.5; }
.memory-in-workshop .memory-stamp { width: 76px; height: 76px; font-size: 22px; margin: 8px auto; }
.memory-in-workshop .memory-feedback { padding: 12px; }
.memory-in-workshop .memory-feedback p { margin: 8px 0; font-size: 14px; }
.memory-in-workshop .memory-note, .memory-in-workshop .memory-next { font-size: 12px; line-height: 1.5; }
.craft-dialog .craft-steps { font-size: 12px; color: #657c68; margin-bottom: 12px; letter-spacing: .03em; }
.craft-dialog p { font-size: 15px; line-height: 1.6; }
.craft-dialog > small { display: block; font-size: 12px; color: #586d60; line-height: 1.5; margin: 10px 0; }
.craft-dialog > button { width: 100%; min-height: 44px; margin-top: 8px; }
.craft-word { display: grid; justify-items: center; gap: 2px; padding: 8px; background: #edf3e7; border-radius: 6px; }
.craft-word b { font-family: "Noto Serif KR", "Batang", serif; font-size: 68px; line-height: 1.25; }
.craft-word span { color: #426b55; font-weight: 700; }
.craft-writing { display: block; width: min(230px, 100%); aspect-ratio: 1; margin: 0 auto 10px; background: #fffef9; border: 1px solid #c3d5bb; touch-action: none; user-select: none; }
.craft-writing polyline { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.craft-grid { stroke: #e1e7da; stroke-dasharray: 2 2; stroke-width: .5; }
.craft-guide { stroke: #e0e7d9; }
.craft-current { stroke: #c49c51; stroke-dasharray: 1 7; }
.craft-ink { stroke: #366b54; }
.craft-user { stroke: #28534a; opacity: .75; }
.craft-start { fill: #cb9841; stroke: white; stroke-width: 1; }
.craft-arrow { fill: #8d642d; font-size: 12px; text-anchor: middle; }
.craft-tools { display: flex; gap: 8px; }
.craft-tools button { flex: 1; min-height: 44px; font-size: 13px; }
.craft-blueprint { display: block; width: 100%; max-height: 165px; background: #eef4e8; border-radius: 6px; }
.craft-dialog .craft-status { margin: 8px 0 0; color: #825929; font-size: 13px; }
.craft-status:empty { display: none; }
.expedition-map-toggle { position: absolute; z-index: 8; top: max(62px, calc(env(safe-area-inset-top) + 56px)); right: max(12px, env(safe-area-inset-right)); min-height: 44px; padding: 8px 12px; border: 1px solid #abc2a1; border-bottom: 3px solid #739775; background: #f5f7e8ed; color: #315344; font-family: inherit; font-size: 13px; font-weight: 700; }
.chapter-directing .expedition-map-toggle { visibility: hidden; }
.voxel-stage .expedition-dialog { width: min(470px, calc(100vw - 28px)); padding: 20px; max-height: 78dvh; color: #284a3c; }
.expedition-dialog p { font-size: 16px; line-height: 1.65; }
.expedition-dialog .story-choices { display: grid; gap: 8px; }
.expedition-dialog button { min-height: 46px; }
.expedition-clue { padding: 18px; background: #edf3e3; border-left: 4px solid #9bb481; margin-bottom: 14px; }
.expedition-clue span { font-size: 12px; color: #52705c; }
.expedition-clue p { margin: 6px 0 0; font-weight: 700; }
.expedition-slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.expedition-slots span { flex: 1; min-width: 60px; padding: 12px 5px; border: 2px dashed #b9cbb0; text-align: center; font-size: 13px; background: #f4f5e9; }
.expedition-slots .filled { background: #dcebd1; border-style: solid; }
.expedition-slots .current { border-color: #739b64; }
.expedition-baskets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.expedition-baskets section { display: grid; gap: 12px; padding: 12px 5px; text-align: center; background: #f0edda; }
.expedition-baskets section > span { font-size: 22px; font-weight: 800; }
.expedition-baskets section > div { display: flex; gap: 4px; justify-content: center; }
.expedition-baskets button { min-width: 44px; }
.expedition-done { padding: 18px; background: #deedcf; font-size: 24px; font-weight: 800; }
.expedition-status { color: #815e25; min-height: 1em; }
.expedition-status:empty { display: none; }
.voxel-stage .expedition-map-dialog { width: min(560px, calc(100vw - 28px)); }
.expedition-map { display: block; width: 100%; max-height: 47dvh; background: #eaf0db; border: 1px solid #c6d3b4; }
.expedition-map text { font: 700 15px sans-serif; fill: #254637; }
.expedition-dialog .expedition-map-note, .expedition-time { font-size: 13px; color: #65795e; }
@media (max-width: 600px) {
  .voxel-stage .expedition-dialog { padding: 14px; max-height: 66dvh; }
  .expedition-dialog p { font-size: 15px; }
  .expedition-slots span { font-size: 12px; }
}
.craft-dialog .craft-record { font-size: 13px; }
.craft-projects { display: grid; gap: 8px; margin: 6px 0 16px; }
.craft-projects button { min-height: 48px; text-align: left; background: #e8f1e1; color: #294e42; border: 1px solid #b7cbb1; padding: 10px 12px; font-size: 15px; }
.story-learning-goal { padding: 10px 12px; background: #e8f1e1; border-left: 3px solid #83a273; }
.story-axe-inspection { display: flex; align-items: center; gap: 20px; padding: 12px; background: #eef2e5; }
.story-axe-inspection dl { margin: 0; font-size: 15px; }
.story-axe-inspection dt { color: #5c7363; font-size: 12px; margin-top: 8px; }
.story-axe-inspection dd { margin: 2px 0 8px; font-weight: 700; }
.story-inspection-art { position: relative; width: 90px; min-width: 90px; height: 140px; }
.story-inspection-art i { position: absolute; width: 12px; height: 110px; background: #97724e; top: 20px; left: 36px; transform: rotate(15deg); }
.story-inspection-art b { position: absolute; width: 54px; height: 38px; top: 23px; left: 37px; background: #b2c4c1; border-right: 5px solid #d5e5db; transform: rotate(15deg); }
[data-tone="gold"] .story-inspection-art b { background: #d8b35b; border-color: #f1d78d; }
[data-tone="iron"] .story-inspection-art i { background: #6e5036; }
[data-tone="iron"] .story-inspection-art b { background: #7e9691; border-color: #a7b8ad; }
@media (max-width: 600px) {
  .voxel-stage .memory-in-workshop.craft-dialog { max-height: 78dvh; }
  .craft-writing { width: 200px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .craft-writing { width: 160px; }
  .craft-dialog .craft-steps { margin-bottom: 4px; }
  .craft-dialog .craft-instruction { margin: 6px 0; }
}
@media (max-width: 600px) {
  .voxel-stage .memory-in-workshop { inset: auto 12px max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); max-height: 56dvh; padding: 12px; }
  .memory-in-workshop .memory-glyph { font-size: 56px; margin: 4px 0; }
  .memory-in-workshop .story-dialog-head h2 { font-size: 17px; }
  .memory-in-workshop .memory-scene-clue { font-size: 12px; margin-bottom: 6px; }
}
@media (max-width: 600px), (max-height: 500px) {
  .memory-in-workshop .story-dialog-head { position: sticky; top: -12px; z-index: 2; background: #fffdf3; padding: 6px 0; }
  .memory-in-workshop > .story-primary { position: sticky; bottom: -12px; z-index: 1; min-height: 44px; box-shadow: 0 -6px 12px #fffdf3; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .memory-in-workshop { inset: 10px auto 10px 10px; width: 330px; max-height: calc(100dvh - 20px); padding: 12px; }
  .memory-in-workshop .memory-glyph { font-size: 44px; }
}
@media (max-width: 600px) {
  .voxel-stage .voxel-gate-card { width: min(360px, 100%); display: block; padding: 14px; }
  .voxel-stage .voxel-pause-world { display: block; margin-top: 12px; padding: 0; border: 0; background: none; box-shadow: none; }
  .voxel-stage .voxel-pause-world > :not(.tree-growth-status) { display: none; }
  .voxel-stage .voxel-gate h2 { font-size: 26px; margin-bottom: 16px; }
  .voxel-stage .voxel-gate button { min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .voxel-gate-card { width: min(720px, 100%); column-gap: 28px; padding: 10px; align-content: start; }
  .voxel-stage .voxel-gate h2 { font-size: 23px; margin-bottom: 10px; }
  .voxel-stage .voxel-game-menu { gap: 5px; }
  .voxel-stage .voxel-gate button { min-height: 44px; padding: 8px 10px 11px; font-size: 13px !important; }
  .voxel-stage .voxel-pixel-avatar { transform: scale(.7); margin: -20px 0; }
  .voxel-stage .voxel-pause-world { gap: 4px; padding: 8px; }
  .voxel-world-label { font-size: 26px; }
  .voxel-stage .expedition-dialog { width: min(480px, calc(100vw - 28px)); }
}
.voxel-stage .assessment-dialog { inset: 0; margin: auto; width: min(500px, calc(100vw - 24px)); max-height: min(730px, calc(100dvh - 28px)); padding: 20px; }
.assessment-dialog p { line-height: 1.65; font-size: 16px; }
.assessment-dialog .craft-word b { font-size: 72px; }
.assessment-dialog .assessment-revealed-word { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 8px 0; padding: 8px; }
.assessment-dialog .assessment-revealed-word b { font-size: 48px; }
.assessment-progress { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 6px; color: #50735c; font-size: 13px; }
.assessment-dialog progress { width: 100%; height: 7px; accent-color: #6f9872; }
.assessment-dialog progress::-webkit-progress-value { background: #6f9872; }
.assessment-dialog progress::-moz-progress-bar { background: #6f9872; }
.voxel-stage .assessment-dialog::backdrop { background: #e9efddf7; backdrop-filter: blur(12px); }
.assessment-prompt { font-weight: 700; }
.assessment-skill-list { display: flex; gap: 6px; margin: 14px 0; }
.assessment-skill-list span { flex: 1; text-align: center; padding: 12px 4px; background: #edf2df; font-size: 13px; font-weight: 700; }
.assessment-writing, .assessment-ink-review { display: block; width: min(240px, 100%); margin: 12px auto; aspect-ratio: 1; border: 1px solid #adc3a5; background: #fffef7; fill: none; }
.assessment-writing { touch-action: none; user-select: none; cursor: crosshair; }
.assessment-writing polyline, .assessment-ink-review polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.assessment-writing .craft-guide, .assessment-ink-review .craft-guide { stroke: #ced6c4; stroke-width: 5; }
.assessment-writing .craft-current { stroke: #b89b54; }
.assessment-writing .craft-ink, .assessment-ink-review .craft-ink { stroke: #2b765a; }
.assessment-writing .craft-user { stroke: #315e4c; }
.assessment-writing .craft-start { fill: #caa15b; stroke: #fff; stroke-width: 1; }
.assessment-tools { display: flex; gap: 8px; }
.assessment-tools button { flex: 1; min-height: 44px; }
.assessment-dialog .assessment-note { font-size: 12px; color: #617763; }
.assessment-feedback, .assessment-recommend { padding: 12px; background: #eaf2dc; border-left: 3px solid #8fac75; }
.assessment-hint { padding: 12px; background: #f5edd8; }
.assessment-hint-button, .assessment-skip { margin: 12px 5px 0 0; font-size: 13px !important; }
.assessment-helpers { display: flex; flex-wrap: wrap; gap: 6px; }
.assessment-helpers button { flex: 1; margin-right: 0; }
.assessment-dialog .story-choices { display: grid; gap: 8px; }
.assessment-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.assessment-totals section { padding: 12px 8px; background: #edf2e0; }
.assessment-totals span { display: block; font-size: 12px; line-height: 1.5; min-height: 36px; word-break: keep-all; }
.assessment-totals b { display: block; margin-top: 8px; font-size: 28px; }
.assessment-totals b small { font-size: 14px; font-weight: 400; }
.assessment-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 700; }
.assessment-details article { padding: 14px 0; border-top: 1px solid #d6e1cb; }
.assessment-details p { font-size: 13px; }
.assessment-details .assessment-ink-review { width: 150px; margin-left: 0; }
@media (max-width: 600px) {
  .voxel-stage .assessment-dialog { width: calc(100vw - 24px); max-height: 80dvh; padding: 12px; }
  .assessment-writing, .assessment-ink-review { width: min(224px, 30dvh); }
  .assessment-dialog p { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .assessment-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 20px); padding: 12px; }
  .assessment-dialog .story-dialog-head { padding: 2px 0; margin-bottom: 6px; }
  .assessment-dialog .story-dialog-head h2 { margin: 2px 0; font-size: 17px; }
  .assessment-dialog .story-dialog-head small { font-size: 10px; }
  .assessment-dialog .assessment-progress { margin: 4px 0; font-size: 12px; }
  .assessment-writing, .assessment-ink-review { width: 155px; }
  .assessment-dialog .craft-word b { font-size: 48px; }
  .assessment-write-task { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr); gap: 14px; align-items: start; margin-top: 8px; }
  .assessment-write-controls { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
  .assessment-write-main .assessment-prompt { font-size: 13px; margin: 0 0 6px; }
  .assessment-write-main > small { font-size: 11px; }
  .assessment-write-controls .story-primary, .assessment-write-controls .story-secondary, .assessment-write-controls .assessment-helpers button { margin-top: 6px; }
  .assessment-write-controls button { padding: 8px; font-size: 12px; }
  .assessment-write-controls .assessment-note { margin: 6px 0; font-size: 11px; }
  .assessment-answer-body.has-ink { display: grid; grid-template-columns: minmax(0,1fr) 166px; gap: 14px; align-items: start; }
  .assessment-answer-body p { font-size: 13px; line-height: 1.5; margin: 6px 0; }
  .assessment-answer-body .assessment-feedback { padding: 8px; font-size: 13px; margin-top: 8px; }
  .assessment-answer-body .assessment-revealed-word b { font-size: 36px; }
  .assessment-answer-ink .assessment-ink-review { width: 140px; margin: 4px auto; }
  .assessment-answer-ink .assessment-note { font-size: 11px; line-height: 1.35; margin: 4px 0; }
  .assessment-dialog > .story-primary { position: static; margin-top: 8px; }
}
.expedition-sample { margin: 12px 0; padding: 8px; text-align: center; background: #f4eedc; border: 1px solid #c4cbb6; }
.expedition-object { display: block; width: 120px; height: 88px; max-width: 100%; margin: 0 auto; }
.expedition-sample figcaption { font-size: 14px; color: #3e594a; }
.expedition-pair-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.expedition-pair-options button { min-height: 80px; padding: 6px; overflow-wrap: anywhere; }
.expedition-pair-options .expedition-object { width: 90px; height: 66px; }
.expedition-beats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 12px 0; }
.expedition-beats span { display: grid; gap: 6px; padding: 12px 4px; text-align: center; background: #e5edda; border-bottom: 4px solid #a7bb97; }
.expedition-beats small { color: #627c68; }
.expedition-beats b { font-size: 22px; }
.expedition-dialog .expedition-rhythm-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
.expedition-rhythm-options button { min-height: 64px; font-size: 20px; text-align: center; }
@media (max-width: 400px) {
  .expedition-pair-options { gap: 5px; }
  .expedition-pair-options button { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 350px) {
  .assessment-writing, .assessment-ink-review { width: 128px; }
  .assessment-answer-ink .assessment-ink-review { width: 128px; }
  .assessment-answer-body.has-ink { grid-template-columns: minmax(0,1fr) 140px; }
}
.story-choices.expedition-role-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expedition-span {
  display: block;
  width: 100%;
  height: 115px;
  margin: 8px 0;
  background: #f0f4ed;
  border: 1px solid #c7d5c5;
}
.expedition-span text { font-size: 13px; font-family: inherit; fill: #395d53; }

/* Practice is a focused modal, not the small in-world workshop notebook. */
.voxel-stage .memory-in-workshop.craft-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(800px, calc(100vw - 28px)); max-height: calc(100dvh - 28px);
  padding: clamp(14px, 2vw, 28px); border-radius: 14px;
  background: #fffdf3; box-shadow: 0 24px 100px #102c3166;
}
.voxel-stage .craft-dialog::backdrop { background: #102c3173; backdrop-filter: blur(4px); }
.voxel-stage .craft-dialog .story-dialog-head { position: sticky; top: -14px; z-index: 2; background: #fffdf3; padding: 4px 0 12px; }
.voxel-stage .craft-dialog .story-dialog-head h2 { font-size: clamp(22px, 3vw, 32px); }
.voxel-stage .craft-dialog .story-dialog-head small { font-size: 13px; }
.voxel-stage .craft-dialog .story-dialog-head button { min-width: 60px; min-height: 48px; }
.voxel-stage .craft-dialog > button { min-height: 50px; }
.voxel-stage .craft-dialog .craft-word b { font-size: clamp(90px, 15vh, 150px); }
.voxel-stage .craft-dialog[data-stage="write"] { width: min(1180px, calc(100vw - 28px)); }
.craft-practice { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 28px; }
.craft-canvas-panel { display: grid; place-items: center; min-width: 0; }
.voxel-stage .craft-dialog .craft-writing { width: min(100%, 660px, calc(100dvh - 224px)); height: auto; margin: 0; aspect-ratio: 1; border: 2px solid #b6cbb4; border-radius: 10px; box-shadow: 0 8px 30px #294e420b; }
.craft-coach { display: grid; gap: 16px; padding: 20px; border-radius: 12px; background: #edf3e7; }
.craft-count { font-size: 44px; line-height: 1.1; color: #a36c22; }
.craft-count small { font-size: 20px; color: #65765f; }
.voxel-stage .craft-dialog .craft-instruction { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.5; }
.craft-coach .craft-tools { display: grid; gap: 8px; }
.craft-coach .craft-tools button { min-height: 48px; font-size: 15px; }
.craft-coach > small { font-size: 13px; line-height: 1.65; color: #607359; }
.craft-coach .craft-status { grid-column: 1 / -1; }
.voxel-stage .craft-dialog .craft-status { display: block; min-height: 2.8em; margin: 10px 0 0; font-size: 14px; }
.voxel-stage .craft-dialog .craft-status:empty { display: block; }
@media (max-width: 650px) and (orientation: portrait) {
  .craft-practice { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .craft-coach { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 12px; align-items: center; }
  .craft-count { font-size: 30px; }
  .craft-count small { font-size: 16px; }
  .voxel-stage .craft-dialog .craft-instruction { font-size: 17px; }
  .craft-coach .craft-tools { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .craft-coach > small { grid-column: 1 / -1; font-size: 12px; }
  .voxel-stage .craft-dialog .story-dialog-head small { font-size: 11px; }
  .voxel-stage .craft-dialog .craft-status { min-height: 2em; margin-top: 6px; font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .voxel-stage .memory-in-workshop.craft-dialog { padding: 10px 16px; max-height: calc(100dvh - 16px); width: min(950px, calc(100vw - 24px)); }
  .voxel-stage .craft-dialog .story-dialog-head { top: -10px; padding: 0 0 6px; margin-bottom: 4px; }
  .voxel-stage .craft-dialog .story-dialog-head h2 { font-size: 20px; }
  .voxel-stage .craft-dialog .story-dialog-head small { display: none; }
  .voxel-stage .craft-dialog .craft-steps { display: none; }
  .craft-practice { grid-template-columns: minmax(0, 1fr) minmax(210px, .8fr); gap: 16px; }
  .voxel-stage .craft-dialog .craft-writing { width: min(100%, calc(100dvh - 150px)); }
  .craft-coach { padding: 10px; gap: 8px; }
  .craft-count { font-size: 26px; }
  .craft-count small { font-size: 16px; }
  .voxel-stage .craft-dialog .craft-instruction { font-size: 16px; }
  .craft-coach .craft-tools { grid-template-columns: 1fr 1fr; }
  .craft-coach .craft-tools button { min-height: 44px; font-size: 12px; }
  .craft-coach > small { font-size: 11px; line-height: 1.4; }
  .voxel-stage .craft-dialog .craft-status { min-height: 1.5em; margin-top: 4px; font-size: 12px; }
}