@font-face{font-family:Roobert;src:url('assets/fonts/Roobert-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root{--paper:#2a2627;--ink:#f5f3ee;--muted:#bcb8b8;--line:#625d5e;--wine:#f5f3ee;--wine-soft:#373233;--green:#d8ddc9;--serif:Roobert,Arial,sans-serif;--sans:Roobert,Arial,sans-serif;--ui-small:14px;--ui-text:16px;--ui-title:20px;color-scheme:dark}
body.game-shell{background:var(--paper);font-family:var(--sans);color:var(--ink);font-size:var(--ui-text);font-weight:500}
body.game-shell *,body.game-shell *::before,body.game-shell *::after{font-family:var(--sans)!important;font-style:normal!important;font-weight:500!important;letter-spacing:0!important;font-size:var(--ui-text)!important;text-shadow:none!important}
body.game-shell :is(h1,h2,h3),body.game-shell .welcome h1{font-size:var(--ui-title)!important;line-height:1.4;letter-spacing:0!important}
body.game-shell :is(small,figcaption,.eyebrow,.art-meta,.source-link,.dialog-footer,.mg-origin-note,.mg-piece span,.mg-slider output,.mg-swatches small,.touch-label,.position-label,.room-map span,.immersive-status,.immersive-status *,.stage-actions *,.entry-info,.welcome button,.close-button,.pause-menu button,.capture-hint,.capture-hint *,.mg-actions button,.mg-toolbar button){font-size:var(--ui-small)!important}
body.game-shell :is(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
body.game-shell :is(button,a,input,select,textarea):focus-visible{outline:1px solid var(--ink)!important;outline-offset:5px}
body.game-shell :is(button,.dialog,.guide-profile,.guide-answer,.passport-item,.art-preview){border-radius:0!important;box-shadow:none!important;text-shadow:none!important}
body.game-shell :is(.primary-button,.secondary-button,.text-button,.guide-topics button,.mg-piece,.mg-answers button){background:transparent;color:var(--ink);border:1px solid var(--line);min-height:44px;padding:10px 14px;line-height:1.4}
body.game-shell :is(.primary-button,.secondary-button,.guide-topics button):hover{background:#ffffff09;border-color:var(--ink)}
body.game-shell .primary-button{border-color:var(--ink)}
body.game-shell :is(.text-button,.close-button){background:none;border:0;text-decoration:underline;text-underline-offset:5px}
body.game-shell a{color:inherit;text-underline-offset:4px}
body.game-shell :is(p,.art-description,.art-meta,.source-link,.help-item,.guide-answer p,.guide-profile p,.passport-summary p,.passport-item p,.settings-row small,.observation,.mg-status,.mg-origin-note,.mg-result figcaption,.feedback){color:var(--muted);line-height:1.65}
body.game-shell b,body.game-shell strong{color:inherit}
body.game-shell input:not([type=range]):not([type=checkbox]):not([type=color]),body.game-shell select{background:var(--paper);border:1px solid var(--line);border-radius:0;color:var(--ink);min-height:44px;font-size:var(--ui-text)!important}
body.game-shell input::placeholder{color:var(--muted);opacity:.8}
body.game-shell input[type=range]{accent-color:var(--ink);min-height:40px}
body.game-shell input[type=checkbox]{accent-color:var(--muted);width:22px;height:22px}
/* Reference: uninterrupted charcoal, restrained typography, thin lines. */
.game-shell .welcome{background:#2a2627;backdrop-filter:none;padding:32px;gap:24px;color:var(--ink)}
.game-shell .welcome-eye{width:72px;height:48px;margin:0 0 8px;stroke:var(--ink);stroke-width:.8}
.game-shell .welcome h1{margin:0;text-transform:uppercase;max-width:24ch}
.game-shell .welcome .primary-button{min-width:0;margin:16px 0 0;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;gap:32px;text-transform:uppercase}
.game-shell .entry-info{position:absolute;top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));padding:10px 0;background:none;border:0;min-height:44px;text-decoration:underline;text-underline-offset:5px;color:var(--ink)}
.game-shell .stage-actions{position:absolute;top:0;right:0;max-width:none;height:68px;padding:12px max(24px,env(safe-area-inset-right));gap:24px;align-items:center;flex-wrap:nowrap;background:var(--paper);z-index:6}
.game-shell .stage-actions button,.game-shell .stage-actions .passport-progress{border:0;background:none;color:var(--ink);padding:8px 0;min-height:44px;white-space:nowrap;gap:8px;text-transform:uppercase}
.game-shell .stage-actions button:hover{text-decoration:underline;text-underline-offset:5px}
.game-shell .stage-actions kbd{display:none}
.game-shell .stage-actions #progressText{display:none}
.game-shell.playing .immersive-status{position:absolute;left:0;top:0;width:100%;height:68px;max-width:none;padding:16px max(24px,env(safe-area-inset-left));display:flex;justify-content:center;gap:4px;background:var(--paper);color:var(--ink);z-index:5}
.game-shell .immersive-status>small{display:none}
.game-shell .position-label{left:max(24px,env(safe-area-inset-left))!important;bottom:max(20px,env(safe-area-inset-bottom))!important;max-width:calc(100% - 200px);padding:8px 12px;background:#2a2627eb;color:var(--ink);border-radius:0;line-height:1.4}
.game-shell .position-label .live-dot{display:none}
.game-shell .capture-hint{background:#2a2627eb;color:var(--ink);bottom:20px!important;padding:12px 16px;white-space:normal;text-align:center;max-width:360px}
.game-shell .capture-hint span{color:var(--muted);margin-top:6px}
.game-shell .interact{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:12px 18px;bottom:100px!important;max-width:calc(100% - 40px);min-width:0;width:max-content}
.game-shell .interact small,.game-shell .interact>span:last-child{color:var(--muted)}
.game-shell .interact kbd{border:0;background:none;color:var(--ink);font-size:var(--ui-small)!important}
.game-shell .room-map{color:var(--ink);background:#2a2627eb;border:0;border-radius:0}
.game-shell .room-map text{fill:var(--ink)}
.game-shell .room-map>span{color:var(--muted)}
.game-shell .dream-caption{top:88px!important;left:24px;max-width:310px;padding:12px 16px;color:var(--ink);background:#2a2627e8;text-shadow:none}
.game-shell .dream-caption strong{font-size:var(--ui-text)!important}
.game-shell .dream-caption span{display:none}
.game-shell #toast{background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:0;max-width:calc(100vw - 32px);z-index:100}
.game-shell .webgl-error{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
/* Every supporting screen uses the same spacing and type scale. */
.game-shell .overlay-backdrop{background:#2a2627f5;padding:0;align-items:stretch;z-index:30}
.game-shell .dialog,.game-shell .dialog.small,.game-shell .dialog[data-screen=minigame]{width:100%;max-width:1440px;max-height:100dvh;height:100dvh;margin:auto;background:var(--paper);color:var(--ink);border:0;overflow:auto;scrollbar-color:var(--line) var(--paper);overscroll-behavior:contain}
.game-shell .dialog-header{background:var(--paper);backdrop-filter:none;min-height:92px;padding:max(18px,env(safe-area-inset-top)) 32px 18px;border:0;gap:24px;align-items:center}
.game-shell .dialog-header h2{margin:4px 0 0}
.game-shell .dialog-header .eyebrow{color:var(--muted);line-height:1.4}
.game-shell .close-button{width:auto;height:auto;min-height:44px;min-width:80px;padding:8px 0;color:var(--ink);flex-shrink:0}
.game-shell .dialog-body,.game-shell .dialog[data-screen=minigame] .dialog-body{padding:20px 32px 40px}
.game-shell .dialog.small .dialog-body{max-width:920px;margin:0 auto}
.game-shell .dialog-footer{position:sticky;bottom:0;background:var(--paper);padding:16px 32px;border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap}
.game-shell .dialog-footer span{font-size:var(--ui-small)!important}
.game-shell .pause-menu{display:flex;flex-direction:column;align-items:stretch;max-width:540px;margin:20px auto}
body.game-shell .pause-menu button{border:0;border-bottom:1px solid var(--line);padding:18px 0;background:none;text-align:left;justify-content:space-between;text-transform:uppercase}
.game-shell .pause-menu .primary-button{margin-bottom:20px}
.game-shell .help-grid{gap:24px;margin:28px 0}
.game-shell .help-item{border:0;border-top:1px solid var(--line);padding:16px 0;background:none}
.game-shell .help-item b{display:block;color:var(--ink);margin-bottom:12px;font-size:var(--ui-small)!important}
.game-shell .settings-row{border-color:var(--line);padding:22px 0}
.game-shell .settings-row label{color:var(--ink)}
.game-shell .settings-row small{display:block;margin:12px 0}
.game-shell .observation,.game-shell .takeaways,.game-shell .takeaway,.game-shell .sources-list article{background:none;border-color:var(--line);color:var(--muted)}
.game-shell .sources-list h3{color:var(--ink)}
.game-shell .art-preview{background:none;border-color:var(--line);padding:0}
.game-shell .art-preview img{filter:none}
.game-shell .guide-profile,.game-shell .guide-answer{background:none;border:0;padding:0}
.game-shell .guide-profile{border-right:1px solid var(--line);padding-right:24px}
.game-shell .guide-answer{border-top:1px solid var(--line);padding-top:16px;min-height:0}
.game-shell .guide-profile>span,.game-shell #guideForm label{color:var(--muted);font-size:var(--ui-small)!important}
.game-shell .guide-avatar{background:none}
.game-shell .guide-topics{gap:8px}
.game-shell .guide-topics button{font-size:var(--ui-small)!important;text-align:left}
.game-shell #guideQuestion{background:transparent;border-color:var(--line);color:var(--ink)}
.game-shell .passport-summary{text-align:left;max-width:none;border-bottom:1px solid var(--line);padding-bottom:20px}
.game-shell .passport-summary h3{margin:12px 0}
.game-shell .passport-stamps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.game-shell .passport-item{border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:22px 20px 22px 0;display:flex;flex-direction:column;align-items:flex-start}
.game-shell .passport-item .success-stamp{width:auto;height:auto;border:0;outline:0;margin:0 0 12px;color:var(--muted);font-size:var(--ui-title)!important}
.game-shell .passport-item.earned .success-stamp{color:#e5ce84}
.game-shell .passport-item h4{font-size:var(--ui-text)!important}
.game-shell .passport-item p{font-size:var(--ui-small)!important;flex:1;min-height:0}
.game-shell .passport-item .secondary-button{font-size:var(--ui-small)!important;border:0;padding:10px 0;text-decoration:underline;text-underline-offset:5px}
/* Image colours and the drawing surface belong to the work; UI stays charcoal. */
.game-shell .mg-heading,.game-shell .dialog[data-screen=minigame] .mg-heading{border-color:var(--line);padding-bottom:20px;margin-bottom:24px;gap:24px}
.game-shell .mg-heading h3{font-size:var(--ui-text)!important;margin:8px 0}
.game-shell .mg-heading p,.game-shell .dialog[data-screen=minigame] .mg-heading p{font-size:var(--ui-text)!important;line-height:1.6;max-width:760px;color:var(--muted)}
.game-shell .mg-heading .mg-actions{gap:20px;min-width:180px;flex-shrink:0}
.game-shell .mg-heading .mg-actions button{border:0;border-bottom:1px solid var(--line);padding:8px 0;text-transform:uppercase}
.game-shell .mg-layout{gap:32px}
.game-shell .mg-work,.game-shell .mg-work select,.game-shell .mg-three-wrap{min-width:0;max-width:100%}
.game-shell .mg-three-wrap{overflow:hidden}
.game-shell .mg-canvas{border-color:var(--line)}
.game-shell .mg-reference figcaption,.game-shell .mg-origin-note,.game-shell .mg-result figcaption{color:var(--muted);font-size:var(--ui-small)!important}
.game-shell .mg-piece{background:#353031;border-color:var(--line);color:var(--ink);padding:8px;min-height:44px}
.game-shell .mg-piece.selected,.game-shell .mg-toolbar .selected,.game-shell .mg-symbols .selected,.game-shell .mg-palette .selected{outline:1px solid var(--ink)}
.game-shell .mg-layer-list li,.game-shell .mg-description{background:transparent;color:var(--ink);border-color:var(--line)}
.game-shell .mg-layer-list li{padding:12px 8px;gap:8px}
.game-shell .mg-layer-list li>span{min-width:0}
.game-shell .mg-layer-list button{min-width:44px}
.game-shell .mg-latch-row label{color:var(--ink)}
.game-shell .mg-latch-row input{accent-color:var(--paper)}
.game-shell .mg-slider{grid-template-columns:minmax(100px,1fr) minmax(80px,1.1fr) 42px;color:var(--ink);gap:10px}
.game-shell .mg-slider span{font-size:var(--ui-small)!important}
.game-shell .mg-score,.game-shell .mg-countdown{font-size:var(--ui-title)!important;color:var(--ink)}
.game-shell .mg-pads button{background:transparent;color:var(--ink);border-color:var(--line);min-height:76px}
.game-shell .mg-pads button.active{background:#e5ce84;color:var(--paper)}
.game-shell .mg-timeline button{background:transparent;border:1px solid var(--line);color:var(--ink);min-height:44px}
.game-shell .mg-timeline .selected{background:var(--ink);color:var(--paper)}
.game-shell .mg-reference-toggle{display:none}
.game-shell .mg-fragments{grid-template-columns:minmax(0,1fr) 170px}
.game-shell .mg-fragments .mg-piece span{font-size:var(--ui-small)!important}
.game-shell .mg-fragments .mg-piece canvas{max-height:50px}
.game-shell .mg-three-wrap .mg-toolbar,.game-shell .mg-toolbar{gap:8px}
.game-shell .feedback.good{color:#d8ddc9}
.game-shell .dialog button:focus-visible,.game-shell .dialog input:focus-visible{outline:1px solid var(--ink)!important}
/* Thumb controls use separate captured pointers. Only their surfaces block scroll. */
.game-shell #galleryCanvas{touch-action:none}
.game-shell #touchControls{position:absolute;inset:0;z-index:8;pointer-events:none;text-align:center}
.game-shell #moveStick,.game-shell #lookPad,.game-shell #touchSprint{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.game-shell .touch-walk{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center}
.game-shell #moveStick{position:relative;width:132px;height:132px;border:1px solid #f5f3ee88;border-radius:50%;background:#2a2627b8}
.game-shell #moveKnob{position:absolute;left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:#ffffff20;pointer-events:none}
.game-shell .stick-axis::before,.game-shell .stick-axis::after{content:'';position:absolute;background:#ffffff30;left:50%;top:50%;transform:translate(-50%,-50%)}
.game-shell .stick-axis::before{width:64px;height:1px}.game-shell .stick-axis::after{width:1px;height:64px}
.game-shell .touch-label{display:block;color:var(--ink);pointer-events:none;line-height:1.3;margin-top:10px}
.game-shell .touch-walk>.touch-label{background:#2a2627e8;padding:6px 10px;margin-top:6px}
.game-shell #lookPad{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));width:132px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #f5f3ee50;background:#2a2627b8;color:var(--ink)}
.game-shell .look-cross{font-size:var(--ui-title)!important;line-height:1}
.game-shell #touchSprint{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:calc(max(28px,env(safe-area-inset-bottom)) + 174px);width:48px;height:44px;margin:0;border:1px solid #f5f3ee88;background:#2a2627d9;color:var(--ink)}
.game-shell #touchControls .held{border-color:var(--ink);background:#514a4bcc}
.game-shell #touchHint{position:absolute;left:24px;right:24px;bottom:calc(max(28px,env(safe-area-inset-bottom)) + 240px);font-size:var(--ui-small)!important;line-height:1.5;color:var(--ink);background:#2a2627e8;padding:8px 12px;margin:0;pointer-events:none;transition:opacity .3s}
.game-shell.touch-mode.dialog-open #touchControls{display:none!important}
.game-shell:has(#interact:not([hidden])) #touchHint{display:none}
.game-shell.touch-mode .capture-hint{display:none!important}
.game-shell.touch-mode .interact{bottom:calc(max(28px,env(safe-area-inset-bottom)) + 188px)!important;z-index:9;text-align:center;gap:8px;padding:12px;max-width:calc(100% - 150px)}
.game-shell.touch-mode .interact kbd,.game-shell.touch-mode .interact>span:last-child{display:none}
.game-shell.touch-mode .interact small{max-width:230px}
.game-shell.touch-mode .position-label{top:78px;bottom:auto!important;left:16px!important;max-width:calc(100% - 32px);display:block;font-size:var(--ui-small)!important;background:#2a2627c9;padding:8px 12px}
.game-shell.touch-mode .room-map{display:none!important}
.game-shell.touch-mode .dream-caption{top:125px!important;left:16px;max-width:calc(100% - 32px)}
@media(max-width:1000px){
  .game-shell .stage-actions{gap:20px}.game-shell .immersive-status>span{max-width:260px}
  .game-shell .passport-stamps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-shell .mg-fragments{grid-template-columns:minmax(0,1fr) 132px}
}
@media(max-width:800px){
  .game-shell .stage-actions{padding:12px max(20px,env(safe-area-inset-right));max-width:none;gap:18px}
  .game-shell .stage-actions #guardButton,.game-shell .stage-actions #fullscreenButton{display:none}
  .game-shell .stage-actions #hudPassport{display:flex}
  .game-shell .immersive-status>span{max-width:160px;line-height:1.4}
  .game-shell .dialog-header{padding:16px 20px;min-height:88px;gap:16px}
  .game-shell .dialog-body,.game-shell .dialog[data-screen=minigame] .dialog-body{padding:16px 20px 28px}
  .game-shell .dialog-footer{padding:14px 20px}
  .game-shell .mg-heading{display:block}.game-shell .mg-heading .mg-actions{justify-content:flex-start;margin-top:20px;gap:24px}
  .game-shell .mg-layout{grid-template-columns:1fr;gap:24px}
  .game-shell .mg-reference{display:none;position:static}
  .game-shell .reference-open .mg-reference{display:block}
  .game-shell .mg-reference-toggle{display:block;border:0;border-bottom:1px solid var(--line);padding:10px 0;margin:0 0 20px;background:none;color:var(--ink);font-size:var(--ui-small)!important;min-height:44px}
  .game-shell .mg-reference>img{max-height:38dvh}
  .game-shell .mg-canvas,.game-shell .mg-fragments>.mg-canvas,.game-shell .mg-layout:not(.mg-full)>.mg-work>.mg-canvas{max-height:none;width:100%;height:auto}
  .game-shell .mg-fragments{grid-template-columns:1fr;gap:16px}
  .game-shell .mg-fragments>.mg-canvas{grid-column:1;grid-row:1}
  .game-shell .mg-fragments>.mg-piece-tray{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .game-shell .mg-fragments .mg-piece{min-height:76px;padding:8px}
  .game-shell .mg-fragments .mg-piece canvas{max-height:50px}
  .game-shell .mg-piece-tray{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-shell .mg-result-images{gap:16px}
  .game-shell .guide-profile{border:0;padding:0;border-bottom:1px solid var(--line);padding-bottom:20px}
  .game-shell .help-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .game-shell .welcome{padding:24px;gap:24px}
  .game-shell .welcome h1{max-width:20ch;margin:0}
  .game-shell .welcome-eye{margin:0 0 8px}
  .game-shell .welcome .primary-button{margin-top:8px}
  .game-shell.playing .immersive-status{padding:12px 20px;max-width:none;left:0;top:0;font-size:var(--ui-small)!important}
  .game-shell .immersive-status>span{max-width:140px}
  .game-shell .stage-actions{gap:20px;right:0;top:0}
  .game-shell .stage-actions .passport-progress{display:flex}
  .game-shell .dialog-header h2{max-width:23ch}
  .game-shell .dialog-header .eyebrow{max-width:27ch}
  .game-shell .passport-stamps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-shell .passport-stamps>article:last-child{grid-column:auto}
  .game-shell .passport-item{padding:20px 12px 20px 0}
  .game-shell .mg-slider{grid-template-columns:94px minmax(60px,1fr) 32px;gap:8px}
  .game-shell .mg-toolbar button{flex:1 1 auto;min-height:44px}
  .game-shell .mg-result .mg-actions{flex-direction:column;align-items:stretch}
  .game-shell .mg-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-shell #guideForm>div{flex-wrap:wrap}
  .game-shell #guideForm button{width:100%;justify-content:center}
  .game-shell .dialog-footer>span:last-child{display:none}
}
@media(max-height:500px) and (orientation:landscape){
  .game-shell .stage-actions,.game-shell.playing .immersive-status{height:56px;padding-top:6px;padding-bottom:6px}
  .game-shell .touch-walk,.game-shell #lookPad{bottom:max(12px,env(safe-area-inset-bottom))}
  .game-shell #moveStick{width:106px;height:106px}
  .game-shell #lookPad{width:106px;height:132px}
  .game-shell #touchSprint{left:148px;bottom:max(12px,env(safe-area-inset-bottom))}
  .game-shell #touchHint{display:none}
  .game-shell.touch-mode .position-label{top:66px;max-width:50%}
  .game-shell.touch-mode .interact{bottom:24px!important;max-width:calc(100% - 420px)}
  .game-shell.touch-mode .dream-caption{top:110px!important;max-width:50%}
  .game-shell .welcome{gap:12px}.game-shell .welcome-eye{height:32px}
}