#game-shell { display: contents; }
body.title-open { overflow: hidden; }
#title-screen {
  --title-cyan: #89eced; --title-ink: #e3edf0; --title-muted: #a0b7c4; --title-gold: #e5bb77;
  position: fixed; inset: 0; z-index: 100; overflow: auto; isolation: isolate;
  background: #040d18; color: var(--title-ink); font-family: Ubuntu, sans-serif;
  scrollbar-color: #487786 #08121d;
}
.title-art, .title-grain { position: fixed; inset: 0; pointer-events: none; z-index: -2; }
.title-art { background: url('./assets/title-screen.svg') center center / cover no-repeat; }
.title-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #040b15f5 0%, #040d18e8 24%, #04111b6b 53%, #020a100a 78%), linear-gradient(0deg, #030b16e8, transparent 38%, transparent 80%, #040b1677); }
.title-grain { z-index: -1; opacity: .1; background: repeating-linear-gradient(0deg, transparent, transparent 3px, #80c4da15 4px); }
.title-top { display: flex; align-items: center; gap: 13px; padding: 30px 5vw; color: #9db6c5; font-size: 10px; letter-spacing: .19em; }
.title-insignia { color: var(--title-cyan); font-size: 33px; line-height: 1; }
.title-top-right { margin-left: auto; font-size: 9px; }
.title-layout { min-height: calc(100svh - 174px); display: flex; align-items: center; padding: 22px 7vw 42px; box-sizing: border-box; }
.title-home { width: min(100%, 650px); padding: 8px 0 14px; }
.title-overline { font-size: 10px; font-weight: 500; color: var(--title-gold); letter-spacing: .22em; line-height: 1.7; margin: 0 0 20px; }
.title-overline i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; background: var(--title-gold); box-shadow: 0 0 14px #e5bb7780; transform: rotate(45deg); vertical-align: middle; }
#title-name { margin: 0; font-size: clamp(52px, 6.4vw, 104px); font-weight: 500; line-height: .99; letter-spacing: .025em; text-shadow: 0 4px 35px #010610; }
#title-name span { display: block; font-weight: 300; font-size: .82em; letter-spacing: .065em; margin-top: 8px; color: #abccd9; }
.title-tagline { margin: 24px 0 34px; color: #a6bdcb; font-size: 15px; font-weight: 300; letter-spacing: .035em; }
.title-actions { display: grid; gap: 9px; width: min(100%, 350px); }
#title-screen .title-button {
  appearance: none; display: flex; align-items: center; gap: 16px; position: relative; width: 100%; min-height: 57px; padding: 13px 22px;
  border: 1px solid #3d6578; border-left: 3px solid #517f90; border-radius: 0; background: linear-gradient(100deg, #163142e8, #0b1d2be0);
  color: #d5e5ec; font: 500 15px Ubuntu, sans-serif; letter-spacing: .05em; text-align: left;
  box-shadow: inset 0 1px #97cbd30d, 0 4px 18px #0003; cursor: pointer; transition: background .16s, border-color .16s, transform .16s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
#title-screen .title-button > span { font-size: 10px; letter-spacing: .1em; color: #7297aa; min-width: 18px; }
#title-screen .title-button b { margin-left: auto; font-size: 23px; font-weight: 300; color: #749aab; }
#title-screen .title-primary { border-color: #7ed9d4; border-left-color: #9af9eb; background: linear-gradient(100deg, #205565f2, #103547ed); color: #e0fcf6; box-shadow: inset 0 1px #b4ffff22, 0 0 35px #1f827018; }
#title-screen .title-primary b, #title-screen .title-primary > span { color: #9de9d8; }
#title-screen .title-button:hover:not(:disabled), #title-screen .title-button:focus-visible { border-color: #a1f2e8; background: linear-gradient(100deg, #286175, #174457); transform: translateX(4px); box-shadow: inset 0 0 0 2px #adfff070; outline: none; }
#title-screen button:disabled { opacity: .45; cursor: wait; }
.title-company-summary { font-size: 10px; color: #93acbb; margin: 19px 0 0; line-height: 1.6; letter-spacing: .04em; }
.title-yard-caption { position: fixed; bottom: 155px; right: 6vw; text-align: right; pointer-events: none; color: #b4cbd7; }
.title-yard-caption span { font-size: 9px; letter-spacing: .2em; display: block; color: #a1b1b6; }
.title-yard-caption strong { display: block; font-size: 14px; font-weight: 400; letter-spacing: .19em; line-height: 1.8; margin-top: 14px; }
.title-yard-caption i { display: block; margin: 18px 0 0 auto; width: 58px; border-top: 1px solid #dcba7e; }
.title-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 5vw; margin: 0; font-size: 9px; letter-spacing: .16em; line-height: 1.7; color: #7694a7; }
.title-footer-separator { color: #417084; padding: 0 6px; }
.title-status { font-size: 12px; color: #9ee4d4; line-height: 1.6; padding: 12px 5vw; margin: 0; position: sticky; bottom: 0; background: #05111eef; border-top: 1px solid #35606b; }
.title-status:empty { display: none; }
#title-screen .title-error { color: #ffcaa2; border-color: #8b603c; }
.title-panel { width: min(100%, 610px); padding: 0 36px 30px 0; min-width: 0; }
.title-subpage .title-layout { align-items: flex-start; }
.title-subpage .title-art::after { background: linear-gradient(90deg, #040b15fa 0%, #040d18f5 36%, #04111b99 65%, #020a1033); }
#title-screen .title-back { border: 0; border-bottom: 1px solid #3f6676; padding: 8px 0; background: transparent; color: #c3d8e0; font: 400 12px Ubuntu, sans-serif; letter-spacing: .04em; min-height: 44px; margin-bottom: 28px; cursor: pointer; }
.title-back:focus-visible, .title-slot-load:focus-visible, .title-older a:focus-visible { outline: 2px solid #99f3e4; outline-offset: 3px; }
#title-screen h2 { font-size: clamp(29px, 3.2vw, 45px); line-height: 1.1; font-weight: 400; letter-spacing: -.025em; margin: 0 0 18px; color: #e1ecf0; }
#title-screen h2:focus { outline: none; }
.title-panel > p:not(.title-overline), .title-panel form > p, .title-older p { color: #a4bdcc; font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
.title-panel form { display: grid; gap: 17px; }
#title-screen label { display: grid; gap: 8px; font-size: 12px; color: #bfd2dd; line-height: 1.5; min-width: 0; }
#title-screen select, #title-screen input[type=number] { width: 100%; box-sizing: border-box; min-height: 46px; border: 1px solid #426478; border-radius: 0; background: #0d2333f0; padding: 10px 12px; font: 400 14px Ubuntu, sans-serif; color: #e5f0f3; }
#title-screen select:focus-visible, #title-screen input:focus-visible { outline: 2px solid #85ece0; outline-offset: 2px; }
#title-screen input[type=range] { width: 100%; accent-color: #8ce6d4; min-height: 28px; }
#title-screen input:disabled, #title-screen select:disabled { opacity: .55; }
.title-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#title-screen .title-program-description { border-left: 2px solid #b99a65; padding-left: 14px; margin: 0; font-size: 12px; }
#title-screen .title-save-note { font-size: 12px; color: #e6c18c; margin: 0; }
.title-save-list { display: grid; gap: 10px; margin-bottom: 28px; max-height: 350px; overflow: auto; }
.title-save-row { display: flex; justify-content: space-between; gap: 15px; padding: 17px; background: #0d2635db; border: 1px solid #375869; align-items: center; min-width: 0; }
.title-save-row > div { min-width: 0; }
.title-save-row strong, .title-save-row small { display: block; overflow-wrap: anywhere; }
.title-save-row strong { font-size: 13px; font-weight: 500; }
.title-save-row small { margin-top: 7px; color: #8daab8; letter-spacing: 0; font-size: 10px; }
#title-screen .title-slot-load { min-width: 66px; min-height: 44px; border: 1px solid #73b6b3; color: #b5e5dc; background: #193e4d; cursor: pointer; flex: none; }
#title-screen .title-import { padding: 18px; border: 1px dashed #557482; margin-bottom: 25px; }
.title-import input { font-size: 12px; max-width: 100%; color: #a6c4d3; }
.title-import input::file-selector-button { padding: 10px 12px; border: 1px solid #598493; background: #183b4c; color: #c8e3e8; margin-right: 10px; cursor: pointer; }
.title-older { color: #95b5c5; font-size: 12px; }
.title-older summary { min-height: 44px; cursor: pointer; }
.title-older a { color: #9cd9d8; margin-right: 18px; display: inline-block; padding: 10px 0; }
.title-empty { padding: 25px 18px; border: 1px dashed #3d596d; color: #abc2ce; line-height: 1.6; font-size: 13px; }
.title-help-steps { list-style: none; counter-reset: lesson; display: grid; gap: 21px; padding: 0; margin: 25px 0; }
.title-help-steps li { counter-increment: lesson; padding-left: 42px; position: relative; }
.title-help-steps li::before { content: '0' counter(lesson); position: absolute; left: 0; top: 1px; color: #d8bb88; font-size: 12px; }
.title-help-steps strong { font-weight: 500; font-size: 14px; }
.title-help-steps p { font-size: 12px; color: #a6bfcd; line-height: 1.7; margin-top: 6px; }
.title-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 19px 0; border-block: 1px solid #34515f; margin-bottom: 24px; font-size: 11px; color: #a1b8c5; }
.title-controls kbd { display: inline-block; min-width: 47px; font: 400 11px Ubuntu, sans-serif; color: #d7e4e9; margin-right: 7px; }
#title-screen .title-check { display: flex; gap: 11px; align-items: center; min-height: 32px; }
.title-check input { accent-color: #8ce6d4; width: 18px; height: 18px; }
.title-subpage .title-yard-caption { opacity: .45; }
@media (min-width:1800px) { .title-layout { padding-left: 9vw; } .title-actions { width: 385px; } #title-screen .title-button { min-height: 63px; font-size: 16px; } }
@media (max-width:900px) { .title-top-right { display: none; } .title-yard-caption { display: none; } .title-art { background-position: 63% center; } .title-art::after { background: linear-gradient(90deg,#040b15f0,#040d18c9 55%,#04111b50); } .title-layout { padding-inline: 7vw; } #title-name { font-size: clamp(50px, 10vw, 82px); } .title-panel { padding-right: 0; } }
@media (max-width:520px) {
  .title-top { padding: 22px 7vw; font-size: 8px; gap: 10px; letter-spacing: .12em; } .title-insignia { font-size: 28px; }
  .title-layout { min-height: calc(100svh - 154px); padding-top: 12px; padding-bottom: 24px; }
  #title-name { font-size: clamp(37px, 11.4vw, 58px); } .title-overline { font-size: 8px; letter-spacing: .13em; margin-bottom: 17px; }
  .title-tagline { font-size: 13px; margin: 21px 0 29px; } .title-actions { width: 100%; } #title-screen .title-button { min-height: 55px; font-size: 14px; }
  .title-company-summary { font-size: 9px; } .title-footer { padding: 20px 7vw; font-size: 8px; gap: 12px; } .title-footer > span:last-child { display: none; }
  .title-field-pair { grid-template-columns: 1fr; gap: 17px; } .title-controls { grid-template-columns: 1fr; gap: 15px; } .title-subpage .title-art { opacity: .5; }
}
@media (max-height:700px) and (min-width:901px) { .title-layout { min-height: calc(100svh - 148px); padding-block: 12px 20px; } .title-top { padding-block: 20px; } #title-name { font-size: 64px; } .title-tagline { margin-block: 18px 22px; } #title-screen .title-button { min-height: 48px; } }
@media (prefers-reduced-motion:reduce) { #title-screen *, #title-screen *::before { transition: none !important; } }
.reduced-motion #title-screen * { transition: none !important; }
.high-contrast #title-screen { --title-muted: #c5dce9; --title-ink: #ffffff; }
.high-contrast .title-art { opacity: .35; }