.start-screen{position:fixed;inset:0;z-index:100;background:#fff url('assets/menu-desert.png') center/cover;display:grid;place-items:center;padding:24px;overflow:auto}
.start-screen[hidden]{display:none}
.start-content{width:min(520px,90vw);text-align:center;padding:28px 36px;background:#fffffff0;border:4px double #111;box-shadow:0 10px 40px #0003}
.start-logo{display:block;width:100%;height:auto;max-height:32vh;object-fit:contain;margin:0 auto 24px}
.start-content nav{display:grid;gap:10px;width:min(270px,100%);margin:auto}
.start-content button{background:#fff;color:#111;border:3px double #111;min-height:40px;font:13px monospace;letter-spacing:1px}
.start-content button:hover,.start-content button:focus-visible{background:#111;color:#fff}
.start-content p{font:10px/1.6 monospace;letter-spacing:1px;margin:22px 0 0}
.audio-setting{display:flex;gap:20px;align-items:center;justify-content:space-between;margin:18px 0;font:12px monospace}
html[data-ui-mode="modern"] .modern-brand{left:16px;top:8px;z-index:5;pointer-events:none}
html[data-ui-mode="modern"] .modern-brand strong{font: bold 16px Georgia;letter-spacing:1px}
html[data-ui-mode="modern"] #modern-level{font-size:8px;letter-spacing:1px;margin-top:3px}
html[data-ui-mode="modern"] .menubar{left:220px;right:8px;top:0;height:54px;display:flex;align-items:center;gap:5px;background:#fff;border:0;padding:0;z-index:6}
html[data-ui-mode="modern"] .mac:before{content:'';position:absolute;inset:0 0 auto;height:53px;background:#fff;border-bottom:1px solid #111;z-index:4}
html[data-ui-mode="modern"] .menubar button{font:10px monospace;padding:6px 10px;border:0;background:transparent;color:#111}
html[data-ui-mode="modern"] .menubar button:hover{background:#111;color:#fff}
html[data-ui-mode="modern"] #speedMenu,html[data-ui-mode="modern"] #inventoryMenu,html[data-ui-mode="modern"] #hintsMenu{display:none}
html[data-ui-mode="modern"] .modern-tools,html[data-ui-mode="modern"] .outside{display:none}
html[data-ui-mode="modern"] .view{top:54px}
html[data-ui-mode="modern"] .minimap-panel{top:65px}
html[data-ui-mode="modern"] #minimap-heading{border:0;background:transparent;text-shadow:0 0 3px #fff,0 0 3px #fff;font:9px/18px monospace}
html[data-ui-mode="modern"] .minimap-legend{display:none}
@media(max-width:650px){html[data-ui-mode="modern"] .modern-brand strong{font-size:12px}html[data-ui-mode="modern"] .modern-brand{left:8px}html[data-ui-mode="modern"] #modern-level{font-size:6px}html[data-ui-mode="modern"] .menubar{left:150px;gap:0}html[data-ui-mode="modern"] .menubar button{font-size:9px;padding:6px}.start-content{padding:20px}}

html[data-ui-mode="modern"] #minimap-heading{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:100%;background:#ffffffd9;padding:0 3px;text-shadow:none}
html[data-ui-mode="modern"] .modern-brand strong span{font:inherit;letter-spacing:inherit}
html[data-ui-mode="modern"] .menubar{background:transparent}
@media(max-width:759px){html[data-ui-mode="modern"] .status-body{background:#fff;border:1px solid #111}html[data-ui-mode="modern"] .status-body label{color:#111}}

/* Fine engraved surrounds join the auxiliary controls to the stone console. */
html[data-ui-mode="modern"] .mac:before{height:53px;border:3px double #555;box-shadow:inset 0 0 0 2px white;background:#fff}
html[data-ui-mode="modern"] .menubar button{border-left:1px solid #ccc;letter-spacing:.6px}
html[data-ui-mode="modern"] .menubar button:focus-visible{outline:1px solid #111;outline-offset:2px}
html[data-ui-mode="modern"] .news,html[data-ui-mode="modern"] .movement-body{border:3px double #777;background:#fffffff5;box-shadow:0 0 0 1px #fff,inset 0 0 0 3px #fff;backdrop-filter:none}
html[data-ui-mode="modern"] .news{padding:9px 13px 11px;max-height:140px}
html[data-ui-mode="modern"] .news:before,html[data-ui-mode="modern"] .movement-body:before{content:'';position:absolute;top:-4px;left:12px;right:12px;height:6px;background:url('assets/engraved-rail.svg') center/28px 7px;pointer-events:none}
html[data-ui-mode="modern"] .news h2{height:14px;margin-bottom:5px;font:9px/12px Georgia,serif;letter-spacing:2px;color:#333}
html[data-ui-mode="modern"] #modern-news{max-height:96px;gap:5px;font:12px/17px Georgia,serif;color:#666}
html[data-ui-mode="modern"] #modern-news p:last-child{color:#111}
html[data-ui-mode="modern"] .movement{height:132px;width:132px}
html[data-ui-mode="modern"] .movement-body{position:relative;padding:7px 6px 5px;gap:5px}
html[data-ui-mode="modern"] .arrows{border:0;background:none;padding:0;gap:3px;grid-template-columns:repeat(3,35px)}
html[data-ui-mode="modern"] .arrows button{width:35px;height:24px;border:1px solid #aaa;border-radius:2px;background:#fff;box-shadow:inset 0 -1px #ddd}
html[data-ui-mode="modern"] .arrows button:hover{background:#ddd;border-color:#111}
html[data-ui-mode="modern"] .arrows button:focus-visible{outline:2px solid #111;outline-offset:1px}
html[data-ui-mode="modern"] .arrows button img{width:24px;height:18px;mix-blend-mode:multiply}
html[data-ui-mode="modern"] #pickup{width:100%;height:26px;min-height:26px;border:0;border-top:3px double #999;background:transparent;color:#111;font:10px/21px Georgia,serif;letter-spacing:1px}
html[data-ui-mode="modern"] #pickup:hover:not(:disabled){background:#222;color:#fff}
html[data-ui-mode="modern"] #pickup:disabled{opacity:.45}
html[data-ui-mode="modern"] .inventory:before{background-image:url('assets/unified-hud-flush.png')}
@media(max-width:759px){html[data-ui-mode="modern"] .vital:before{background-image:url('assets/unified-hud-flush.png')}}
@media(max-width:540px){html[data-ui-mode="modern"] .news{width:calc(100% - 166px);left:10px;padding:8px}html[data-ui-mode="modern"] .movement{right:10px}html[data-ui-mode="modern"] #modern-news{font-size:11px;line-height:15px;max-height:81px}}

/* Generated limestone set: quiet surrounds, larger functional apertures. */
html[data-ui-mode="modern"] .mac:before{height:54px;border:0;box-shadow:none;background:#fff url('assets/rail-focused.png') center 85%/100% 159% no-repeat}
html[data-ui-mode="modern"] .menubar button{border:0}
html[data-ui-mode="modern"] .minimap-panel:before{background-image:url('assets/map-focused.png')}
html[data-ui-mode="modern"] #minimap-button{left:11.3%;top:calc(var(--map-size)*.103);width:77.3%;height:calc(var(--map-size)*.777);border:0}
html[data-ui-mode="modern"] .minimap-north{top:calc(var(--map-size)*.105 + 1px)}
html[data-ui-mode="modern"] .news{border:0;box-shadow:none;background:#fff url('assets/rail-focused.png') center 85%/100% 159% no-repeat;padding:12px 16px}
html[data-ui-mode="modern"] .news:before,html[data-ui-mode="modern"] .movement-body:before{display:none}
html[data-ui-mode="modern"] .movement{height:142px;width:142px}
html[data-ui-mode="modern"] .movement-body{padding:0;border:0;box-shadow:none;background:url('assets/navigation-focused.png') center/100% 100% no-repeat;gap:0}
html[data-ui-mode="modern"] .arrows{position:absolute;left:7%;top:7%;width:86%;height:68%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;padding:0}
html[data-ui-mode="modern"] .arrows button{width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none}
html[data-ui-mode="modern"] .arrows button img{visibility:hidden}
html[data-ui-mode="modern"] .arrows button:hover{background:#0001;border:0;box-shadow:inset 0 0 0 1px #555}
html[data-ui-mode="modern"] .arrows button:active{background:#0003}
html[data-ui-mode="modern"] #pickup{position:absolute;left:8%;top:83%;bottom:auto;width:84%;height:11%;min-height:0;padding:0;border:0;display:flex;align-items:center;justify-content:center;font:10px/1 Georgia,serif}
@media(min-width:760px){
 html[data-ui-mode="modern"] .inventory:before{background-image:url('assets/hud-focused.png')}
 html[data-ui-mode="modern"] #inventory{left:21.6%;right:21.5%;top:50.2%;height:28.5%;gap:4px}
 html[data-ui-mode="modern"] .item-art{width:calc(var(--hud-width)*.043);height:calc(var(--hud-width)*.043)}
 html[data-ui-mode="modern"] .orb-well{left:4.4%;top:43.5%;width:12.5%;height:37.5%}
 html[data-ui-mode="modern"] .vital-hunger .orb-well{left:83.1%}
 html[data-ui-mode="modern"] .vital label,html[data-ui-mode="modern"] .vital strong{left:3.7%;width:14%;background:transparent}
 html[data-ui-mode="modern"] .vital-hunger label,html[data-ui-mode="modern"] .vital-hunger strong{left:82.3%}
 html[data-ui-mode="modern"] .vital label{top:85%;font-size:11px}
 html[data-ui-mode="modern"] .vital strong{top:88.5%;font-size:14px}
 html[data-ui-mode="modern"] .status-body{left:24%;right:24%;top:40.4%;height:4.5%;grid-template-columns:40% 20% 40%}
 html[data-ui-mode="modern"] #selected-item{left:23%;right:57%;top:84.3%;height:6.7%;font-size:12px}
 html[data-ui-mode="modern"] .item-actions{left:44%;right:23%;top:84.3%;height:6.7%;gap:6px}
 html[data-ui-mode="modern"] .item-actions button{font-size:11px}
}
@media(max-width:540px){html[data-ui-mode="modern"] .news{width:calc(100% - 176px)}}
@media(max-width:759px){
 html[data-ui-mode="modern"] .inventory:before,html[data-ui-mode="modern"] .vital:before{background-image:url('assets/hud-focused.png')}
 html[data-ui-mode="modern"] .orb-well,html[data-ui-mode="modern"] .vital-hunger .orb-well{left:20%;top:15%;width:57%;height:57%}
 html[data-ui-mode="modern"] .vital label,html[data-ui-mode="modern"] .vital-hunger label{left:17%;width:66%;top:77%}
 html[data-ui-mode="modern"] .vital strong,html[data-ui-mode="modern"] .vital-hunger strong{left:17%;width:66%;top:84%}
}
@media(max-width:759px){html[data-ui-mode="modern"] .vital{top:-30px}}

/* Restore engraved feather detail without sacrificing the larger openings. */
html[data-ui-mode="modern"] .inventory:before,html[data-ui-mode="modern"] .vital:before{background-image:url('assets/hud-vessels.png')}
html[data-ui-mode="modern"] .minimap-panel:before{background-image:url('assets/map-organic.png')}
html[data-ui-mode="modern"] .orb-well{box-shadow:inset 0 0 0 1px #333}
html[data-ui-mode="modern"] .orb-well:after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 35% 25%,transparent 57%,#0002 91%,#0004);box-shadow:inset 1px 1px 0 #fff9}
html[data-ui-mode="modern"] .orb-fill{border-top:1px solid #999}
@media(min-width:760px){html[data-ui-mode="modern"] .orb-well{left:4.3%;top:42.25%;width:12.5%;height:37.1%}html[data-ui-mode="modern"] .vital-hunger .orb-well{left:83.2%}}
@media(max-width:759px){html[data-ui-mode="modern"] .orb-well,html[data-ui-mode="modern"] .vital-hunger .orb-well{left:19.5%;top:12%;width:57%;height:56.5%}}
/* Live stippled vessel contents, with centered engraved emblems and legends. */
html[data-ui-mode="modern"] .orb-fill{display:none}
html[data-ui-mode="modern"] .vessel-liquid{position:absolute;inset:0;width:100%;height:100%}
html[data-ui-mode="modern"] .orb-well:after{background:none;box-shadow:inset 0 0 0 1px #555}
html[data-ui-mode="modern"] .vital-icon,html[data-ui-mode="modern"] .provision-icon{left:50%;top:50%;transform:translate(-50%,-50%);width:36%;height:42%;fill:#111;stroke:white;stroke-width:1.1;paint-order:stroke fill;filter:none}
@media(min-width:760px){
 html[data-ui-mode="modern"] .vital label{top:84.2%;height:3.4%;display:flex;align-items:center;justify-content:center;line-height:1;margin:0}
 html[data-ui-mode="modern"] .vital strong{top:87.6%;height:4.4%;display:flex;align-items:center;justify-content:center;line-height:1;margin:0}
 html[data-ui-mode="modern"] #selected-item,html[data-ui-mode="modern"] .item-actions{top:84%;height:6.5%}
 html[data-ui-mode="modern"] .item-actions button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
}

/* A quiet illustrated prologue, using the same engraved frame as the journal. */
dialog.expedition-intro{width:520px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);padding:16px 24px 22px;border:1px solid #222;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #777,0 12px 48px #0005;overflow:auto}
.expedition-intro .dialog-title{background:none;border:0;font:11px/1.5 Georgia,serif!important;letter-spacing:2px;text-align:center}
.expedition-intro #dialog-body{font:14px/1.65 Georgia,serif;text-align:center}
.expedition-intro .intro-emblem{display:block;width:190px;max-width:60%;height:auto;margin:16px auto 18px}
.expedition-intro .intro-kicker{font:10px/1.4 monospace;letter-spacing:3px;margin-bottom:16px}
.expedition-intro .intro-goal{margin:20px 0;padding:16px 10px;border-block:1px solid #aaa}
.expedition-intro .intro-goal h3{margin:0 0 8px;font:small-caps bold 17px Georgia,serif}
.expedition-intro .intro-goal p{margin:0}
.expedition-intro .intro-controls{font:11px/1.6 monospace;color:#555;margin-top:20px}
.expedition-intro #dialog-actions{display:flex;justify-content:center;margin-top:18px}
.expedition-intro #dialog-actions button{padding:8px 22px;font:small-caps bold 14px Georgia,serif;border:1px solid #222;border-radius:2px;background:#171717;color:#fff}

/* One frame and control treatment for every modern dialog. */
html[data-ui-mode="modern"] dialog{border:1px solid #222;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #777,0 12px 48px #0005;font:14px/1.65 Georgia,serif}
html[data-ui-mode="modern"] dialog::backdrop{background:#0006;backdrop-filter:blur(1px)}
html[data-ui-mode="modern"] dialog:not(.original-map):not(.original-glasses){width:540px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);padding:20px 26px 24px;overflow:auto}
html[data-ui-mode="modern"] dialog .dialog-title{height:auto;padding:4px 0 16px;border:0;background:none;text-align:center;font:small-caps bold 13px/1.5 Georgia,serif;letter-spacing:1.5px}
html[data-ui-mode="modern"] dialog #dialog-body{padding:8px 0;line-height:1.65}
html[data-ui-mode="modern"] dialog #dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin:22px 0 0;padding:0}
html[data-ui-mode="modern"] dialog button{font:13px/1.4 Georgia,serif;padding:7px 14px;border:1px solid #777;border-radius:2px;background:#fff;color:#222;box-shadow:none}
html[data-ui-mode="modern"] dialog button:hover{background:#eee}
html[data-ui-mode="modern"] dialog button.primary{border-color:#222;background:#222;color:#fff}
html[data-ui-mode="modern"] dialog button:focus-visible{outline:2px solid #555;outline-offset:3px}
html[data-ui-mode="modern"] dialog #dialog-body>button{margin:5px 10px 5px 0}
html[data-ui-mode="modern"] dialog .audio-setting{display:flex!important;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 20px!important}
html[data-ui-mode="modern"] dialog input[type="range"]{accent-color:#222;max-width:55%}
html[data-ui-mode="modern"] dialog.expedition-intro #dialog-actions{justify-content:center}
html[data-ui-mode="modern"] dialog.original-map #dialog-body,html[data-ui-mode="modern"] dialog.original-glasses #dialog-body{padding:0}
html[data-ui-mode="modern"] dialog.original-map #dialog-actions,html[data-ui-mode="modern"] dialog.original-glasses #dialog-actions{margin:6px 0 0;gap:6px}
html[data-ui-mode="modern"] dialog.original-map button,html[data-ui-mode="modern"] dialog.original-glasses button{padding:2px 6px;font-size:11px}
html[data-ui-mode="modern"] dialog.help-guide:not(.original-map):not(.original-glasses){width:900px;height:min(740px,calc(100dvh - 40px));overflow:hidden}
html[data-ui-mode="modern"] .help-guide[open]{display:flex;flex-direction:column}
html[data-ui-mode="modern"] .help-guide #dialog-body{flex:1;min-height:0;padding:0}
.guide-layout{display:grid;grid-template-columns:205px minmax(0,1fr);height:100%;min-height:0;border-block:1px solid #ccc}
.guide-nav{overflow-y:auto;padding:18px 16px 18px 0;border-right:1px solid #ccc}
.guide-nav-label,.guide-kicker{font:10px/1.5 monospace;letter-spacing:1.5px;color:#666;margin:0 0 14px}
html[data-ui-mode="modern"] .guide-nav button{display:block;width:100%;text-align:left;border:0;padding:8px 10px;margin:2px 0;font-size:13px}
html[data-ui-mode="modern"] .guide-nav button[aria-current]{background:#222;color:#fff}
.guide-nav details{border-top:1px solid #ccc;margin-top:18px;padding-top:14px}
.guide-nav summary{cursor:pointer;font:small-caps bold 13px Georgia,serif;padding:8px 0}
.guide-hint-note{font-size:11px;color:#666}
.guide-article{overflow-y:auto;padding:26px 30px;scrollbar-gutter:stable}
.guide-article h2{font:small-caps bold 27px/1.2 Georgia,serif;margin:0 0 22px}
.guide-article h3{font:bold 16px/1.4 Georgia,serif;margin:22px 0 6px}
.guide-article p{margin:0 0 12px;max-width:62ch}
.guide-illustrations{display:flex;flex-wrap:wrap;gap:22px;padding:8px 0 18px;border-bottom:1px solid #ddd}
.guide-illustrations figure{margin:0;text-align:center}
.guide-illustrations img{width:60px;height:64px;object-fit:contain;image-rendering:pixelated}
.guide-illustrations figcaption{font:10px/1.5 monospace;text-transform:capitalize;color:#666;margin-top:6px}
.guide-bullet{padding-left:16px;position:relative}.guide-bullet:before{content:'•';position:absolute;left:0}
@media(max-width:620px){html[data-ui-mode="modern"] dialog.help-guide{padding:16px}.guide-layout{grid-template-columns:1fr;grid-template-rows:140px minmax(0,1fr)}.guide-nav{border-right:0;border-bottom:1px solid #ccc;padding:10px 0}.guide-article{padding:20px 8px}.guide-nav-label{margin-bottom:6px}html[data-ui-mode="modern"] .guide-nav>button{display:inline-block;width:auto;margin:3px}.guide-article h2{font-size:23px}}
html[data-ui-mode="modern"] dialog.original-map .map-layout>div:first-child>button{top:276px;margin:0}
html[data-ui-mode="modern"] dialog.original-map .map-cell{padding:0;border-radius:0;background:transparent}
html[data-ui-mode="modern"] dialog.original-map .map-cell:hover{background:#0001}
html[data-ui-mode="modern"] dialog.modern-map:not(.original-map):not(.original-glasses){width:900px}
.atlas-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;border-block:1px solid #ccc;padding:24px 0}
.atlas-sidebar h2{font:small-caps bold 23px Georgia,serif;margin:0 0 12px}.atlas-sidebar p{margin:0 0 14px}
.atlas-legend{padding:0;margin:20px 0 24px;list-style:none;font:12px/1.6 Georgia,serif}.atlas-legend li{display:flex;align-items:center;gap:10px;margin:7px 0}
.atlas-swatch{display:inline-block;width:15px;height:15px;border:1px solid #666;background:white}.atlas-swatch.seen{background:radial-gradient(#555 .7px,white .8px);background-size:3px 3px}.atlas-swatch.unknown{background:repeating-conic-gradient(#333 0 25%,#fff 0 50%) 0/2px 2px}.atlas-swatch.position{border:2px solid #222;border-radius:50%}.atlas-swatch.selection{background:#222;border-radius:50%;border:3px solid white;outline:1px solid #aaa}
html[data-ui-mode="modern"] .atlas-note-label{display:block;font-size:13px;margin:0!important}.atlas-note-label span{display:block;margin-bottom:8px;font-weight:bold}
.atlas-note-label textarea{display:block;width:100%;height:100px;resize:vertical;border:1px solid #aaa;background:#fafafa;padding:10px;font:14px/1.5 Georgia,serif}
.atlas-note-hint{font-size:11px;color:#666;margin:8px 0 12px!important}.atlas-instruction{font:11px/1.5 monospace;color:#555;margin:0 0 14px}
.atlas-grid{position:relative;width:100%;aspect-ratio:1;background:white;border:1px solid #aaa}.atlas-grid canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
html[data-ui-mode="modern"] dialog .atlas-grid button{position:absolute;margin:0;padding:0;border:0;border-radius:0;background:transparent;min-width:0;min-height:0}
html[data-ui-mode="modern"] dialog .atlas-grid button:hover{background:#7773}html[data-ui-mode="modern"] dialog .atlas-grid button:focus-visible{outline:2px solid #444;outline-offset:-2px}
@media(max-width:650px){.atlas-layout{display:flex;flex-direction:column-reverse;gap:22px;padding:18px 0}.atlas-legend{display:flex;flex-wrap:wrap;gap:4px 16px}.atlas-legend li{margin:3px 0}.atlas-sidebar h2{font-size:21px}}
html[data-ui-mode="modern"] .modern-map #dialog-body{max-height:none;overflow:visible}

/* Nightglasses are a viewing palette: keep the corridor sharp and unobscured. */
html[data-ui-mode="modern"] dialog.original-glasses::backdrop{background:transparent;backdrop-filter:none}
html[data-ui-mode="modern"] dialog.original-glasses{left:calc((100vw - var(--hud-width))/2 + 16px);top:80px;right:auto;bottom:auto;margin:0;width:220px;height:auto;max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);padding:12px;overflow:auto;zoom:1;transform:none}
html[data-ui-mode="modern"] dialog.original-glasses .dialog-title{height:auto;padding:0 0 8px;font:small-caps bold 14px/1.4 Georgia,serif;letter-spacing:1px}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-body{padding:0;line-height:1.4}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-body>div{height:auto;min-height:40px;align-items:center;gap:12px}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-body button{width:40px;height:32px;padding:7px 9px;border:1px solid #777;flex-shrink:0}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-body button:disabled{opacity:.35;cursor:default}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-actions{position:static;margin:10px 0 0;padding:0;justify-content:stretch}
html[data-ui-mode="modern"] dialog.original-glasses #dialog-actions button{width:100%;height:32px;padding:4px 12px;font-size:13px}

/* Reveal only fully prepared screens; honour reduced-motion preferences. */
html[data-screen="menu"] .desktop{visibility:hidden}
html[data-screen="game"] .desktop{animation:screen-arrive .18s ease-out}
.start-content{animation:screen-arrive .22s ease-out}
@keyframes screen-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-screen="game"] .desktop,.start-content{animation:none}}

/* One spacing system for all floating controls inside the bounded game stage. */
html[data-ui-mode="modern"]{--ui-gap:16px;--header-height:54px;--nav-size:142px;--map-size:clamp(122px,calc(100dvh - var(--dock-height) - var(--header-height) - 4 * var(--ui-gap) - var(--nav-size) - 18px),224px)}
html[data-ui-mode="modern"] .mac:before{inset:0 0 auto;height:var(--header-height);background:#fff url('assets/rail-focused.png') center 85%/100% 159% no-repeat;border:0;box-shadow:none}
html[data-ui-mode="modern"] .modern-brand{left:var(--ui-gap);top:calc(var(--header-height)/2);transform:translateY(-50%)}
html[data-ui-mode="modern"] .menubar{left:calc(var(--ui-gap) + 212px);right:var(--ui-gap);top:0;height:var(--header-height)}
html[data-ui-mode="modern"] .view{top:var(--header-height)}
html[data-ui-mode="modern"] .minimap-panel{top:calc(var(--header-height) + var(--ui-gap));right:var(--ui-gap);width:var(--map-size);height:calc(var(--map-size) + 18px)}
html[data-ui-mode="modern"] .movement{left:auto;right:var(--ui-gap);bottom:calc(var(--dock-height) + var(--ui-gap));width:var(--nav-size);height:var(--nav-size)}
html[data-ui-mode="modern"] .movement-body{width:100%;height:100%}
html[data-ui-mode="modern"] .news{left:var(--ui-gap);right:auto;bottom:calc(var(--dock-height) + var(--ui-gap));width:min(480px,calc(100% - var(--nav-size) - 3 * var(--ui-gap)));height:var(--nav-size);max-height:var(--nav-size);padding:12px 16px}
html[data-ui-mode="modern"] #modern-news{max-height:calc(var(--nav-size) - 44px)}
@media(max-width:759px){
 html[data-ui-mode="modern"]{--ui-gap:10px;--header-height:72px;--nav-size:122px;--map-size:122px}
 html[data-ui-mode="modern"] .modern-brand{top:10px;transform:none}
 html[data-ui-mode="modern"] .menubar{left:var(--ui-gap);right:var(--ui-gap);top:36px;height:30px;gap:4px}
 html[data-ui-mode="modern"] .news{padding:10px 12px}
}

/* Material colours are rendered in the corridor and the two vessels. */
html[data-colour="sandstone"] .menu-popup{background-color:#f5f0e5;color:#302a20}
.audio-setting select{max-width:60%;padding:6px;font:inherit}

html[lang="de"] .guide-illustrations figcaption{text-transform:none}

.start-credits{margin-top:22px;padding-top:14px;border-top:1px solid #0003;display:grid;gap:4px;color:#555;font:11px/1.5 monospace;letter-spacing:0;text-align:center}

/* Keep programmatically focused default actions visible, including after mouse use. */
#modal button.primary:focus:not(:disabled){outline:3px solid #111;outline-offset:3px;box-shadow:0 0 0 3px #fff}

html[data-ui-mode="modern"] .menubar #mode-hint{margin-left:auto;margin-right:24px;flex-shrink:0;border:0;font-size:9px;letter-spacing:0;color:#666;white-space:nowrap;padding:6px}
html[data-ui-mode="modern"] .menubar #mode-hint:hover{color:#fff}
@media(max-width:420px){html[data-ui-mode="modern"] .menubar button{padding-left:4px;padding-right:4px;letter-spacing:0}}

@media(max-width:759px){html[data-ui-mode="modern"] .menubar #mode-hint{margin-right:12px}}

.start-sound-slot{height:32px;margin-top:8px}
.start-content #start-sound{min-height:32px;padding:5px 12px;border:0;background:transparent;color:#666;font:11px/1.5 monospace;letter-spacing:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.start-content #start-sound:hover{color:#111}
.start-content #start-sound:focus-visible{outline:2px solid #555;outline-offset:2px;border-radius:3px}