/* Owner-selected layout 01 and unchanged PixelLab Alphora Great Bridge art. */
body:has(.title-screen) { background:#eee2bd; }
body:has(.title-screen) > .site-header, body:has(.title-screen) > .site-footer { display:none; }
#game:has(.title-screen) { max-width:none;padding:0;margin:0; }
body:has(.title-screen) > .storage-notice:not([hidden]) { position:fixed;bottom:16px;right:24px;z-index:20;max-width:400px;font-size:12px; }
.title-screen { --ink:#30291c;--ink-soft:#64573d;--ink-faint:#665637;--parch:#eee2bd;--parch-light:#f5edda;--rule:#93815c;position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;padding:clamp(56px,8vw,120px) 7vw;color:var(--ink);font-family:Georgia,'Times New Roman',serif;background:#eee2bd url('assets/backgrounds/alphora-great-bridge.png') center/cover no-repeat;image-rendering:pixelated; }
.title-frame { position:absolute;inset:18px;border:1px solid #8e795947;pointer-events:none; }
.title-copy { width:430px;max-width:45%; }
.title-screen h1,.title-screen p { margin:0; }
#title-name { font:500 clamp(48px,6.1vw,100px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.06em;margin-left:-5px;color:var(--ink);outline:none; }
.title-screen .title-subtitle { color:var(--ink);font:600 11px/1.5 Arial,sans-serif;letter-spacing:.35em;margin:20px 0 68px;padding-left:4px; }
.title-menu { max-width:360px;border-top:1px solid #9b885b70; }
.title-choice { display:grid;grid-template-columns:30px 1fr 24px;align-items:center;gap:12px;min-height:80px;padding:19px 6px;border-bottom:1px solid #9b885b70;color:inherit;text-decoration:none;transition:background .15s,transform .15s; }
.title-choice:hover { background:#e0d0a4;transform:translateX(3px); }
.title-choice-copy strong { display:block;font:400 27px/1.15 Georgia,serif;margin-bottom:3px; }
.title-choice-copy small { display:block;font:14px/1.5 Georgia,serif;color:var(--ink-soft); }
.title-choice-number { font-size:12px;color:#766043; }
.title-arrow { font-size:24px; }
.title-choice:focus-visible,.title-continue:focus-visible,.title-secondary button:focus-visible,#title-close-guide:focus-visible { outline:3px solid #6b3526;outline-offset:5px; }
.title-secondary { margin-top:30px; }
.title-secondary button { background:none;border:0;border-bottom:1px solid #9f8e67;border-radius:0;min-height:48px;padding:0;color:#5e5138;font:14px Georgia,serif;box-shadow:none; }
.title-screen .title-note { margin-top:48px;font:italic 15px/1.5 Georgia,serif;color:#665637; }
.title-continue { display:grid;grid-template-columns:30px 1fr;gap:4px 12px;min-height:64px;padding:16px 6px;color:var(--ink);text-decoration:none;border-bottom:1px solid #9b885b70;font:17px Georgia,serif; }
.title-continue>span { grid-row:1/3; }
.title-continue small { grid-column:2;font:13px/1.5 Georgia,serif;color:var(--ink-soft); }
@media(max-width:700px) {
 .title-screen { padding:43svh 30px 44px;align-items:flex-start;background-size:auto 60svh;background-position:64% top; }
 .title-screen::before { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 32svh,#eee2bd 48svh); }
 .title-copy { max-width:none;width:100%; }
 #title-name { font-size:clamp(40px,12vw,64px); }
 .title-screen .title-subtitle { margin:14px 0 27px; }
 .title-choice-copy strong { font-size:25px; }
 .title-screen .title-note { margin-top:25px; }
 .title-frame { inset:10px; }
 .title-secondary { margin-top:16px; }
}
@media(prefers-reduced-motion:reduce) { .title-screen * { transition:none!important;animation:none!important; } }
/* How to play, as a parchment field note. */
.title-guide { position: relative; color: var(--ink); background: radial-gradient(ellipse at 18% 8%, var(--parch-light), transparent 55%), var(--parch); border: 2px solid #4a3218; outline: 1px solid var(--rule); outline-offset: -9px; border-radius: 0; box-shadow: 0 18px 44px #0000008c; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 34px 34px 28px; }
.title-guide::backdrop { background: #2f1f0ecc; }
.title-guide h2 { font: 30px/1.2 Georgia, serif; color: var(--ink); margin: 10px 0 20px; }
.title-guide ol { padding-left: 22px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.title-guide li { padding: 0 0 14px 5px; }
.title-guide strong { display: block; color: var(--ink); }
.title-guide p:not(.title-menu-label) { color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.title-guide .title-guide-key { margin-top: 16px; font-size: 13px !important; font-style: italic; }
#title-close-guide { float: right; width: 48px; height: 48px; margin: -12px -12px 0 0; background: transparent; border: 1.5px solid #4a3218; box-shadow: none; color: var(--ink); font-size: 26px; line-height: 1; }
#title-close-guide:hover { background: #b8883e33; }


/* Decorative mode crests; accessible names remain the native text labels. */
.title-choice { grid-template-columns:18px 60px 1fr 24px;gap:10px;min-height:104px; }
.title-mode-emblem { width:60px;height:68px;object-fit:contain;image-rendering:auto; }
.title-menu { max-width:390px; }
@media(max-width:700px) { .title-choice { grid-template-columns:14px 48px 1fr 18px;gap:8px;padding:14px 2px;min-height:96px; } .title-mode-emblem { width:48px;height:60px; } .title-choice-copy strong { font-size:24px; } }

.title-choice-pending:disabled { width:100%;text-align:left;background:transparent;opacity:1;color:var(--ink);border:0;border-bottom:1px solid #9b885b70;border-radius:0;box-shadow:none;cursor:default;font-family:inherit;transform:none; }
.title-choice-pending .title-arrow { opacity:.35; }