:root { color-scheme: dark; --bg:#12110f; --panel:#1c1915; --panel-dark:#11100e; --border:#514534; --gold:#bca477; --gold-muted:#8e7c5e; --ink:#e8dfcf; --light:#fbf5e9; --muted:#9b9283; --accent:#a33d35; --display:Georgia,'Times New Roman',serif; --ui:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; background:radial-gradient(ellipse at 48% 0%,#2b231a 0,transparent 49%),linear-gradient(170deg,#151310,#0b0a09); color:var(--ink); font-family:var(--ui); min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.paper-texture { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.21; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(212,187,136,.025) 4px 5px),repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.02) 7px 8px); }
.site-shell { max-width:1450px; padding:0 44px; margin:auto; min-height:100vh; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:28px 0 22px; border-bottom:1px solid rgba(193,165,115,.28); min-height:91px; }
.site-identity,.header-right,.chapter-chip { display:flex; align-items:center; }
.site-identity { gap:25px; }
.logo-mark { position:relative; font-family:var(--display); color:#e1d4bd; font-size:24px; letter-spacing:-4px; padding-right:7px; font-weight:bold; }
.logo-circle { display:block; border-radius:50%; position:absolute; right:-4px; bottom:1px; width:6px; height:6px; background:var(--accent); }
.brand-divider { width:1px; height:22px; background:rgba(203,181,137,.5); }
.brand-label { font-size:10px; letter-spacing:3px; color:#bfb29b; font-weight:700; }
.header-right { gap:40px; }
.chapter-chip { gap:9px; letter-spacing:2px; color:var(--gold); font-size:10px; font-weight:bold; }
.chapter-dot,.green-led { width:6px; height:6px; border-radius:50%; display:inline-block; background:#b4a16c; }
.nav-button { border:none; background:none; color:#dbcfb8; letter-spacing:1px; font-size:11px; padding:12px 0; text-transform:uppercase; }
.nav-button span { color:var(--gold); font-size:15px; margin-left:6px; }
.nav-button:hover { color:#fff; }
.archive-private { color:var(--muted); font-size:10px; letter-spacing:2px; }
.lock-icon { color:var(--gold); font-size:8px; margin-left:8px; }
.site-footer { border-top:1px solid rgba(193,165,115,.21); color:#8c7f6b; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0 26px; font-size:9px; letter-spacing:1.8px; line-height:1.5; }
/* Locked landing */
.login-layout { flex:1; min-height:675px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr); gap:60px; align-items:center; padding:72px 8% 82px; position:relative; }
.login-layout:before { content:""; position:absolute; width:40%; height:65%; left:-16%; bottom:0; pointer-events:none; background:radial-gradient(closest-side,rgba(132,99,50,.09),transparent); }
.login-intro { padding-top:18px; position:relative; }
.kicker { display:flex; gap:16px; align-items:center; color:var(--gold); font-size:10px; letter-spacing:3.8px; font-weight:700; }
.kicker-line { display:inline-block; height:1px; width:27px; background:#b2a079; }
.era { font-size:10px; letter-spacing:2.7px; color:#b8a98d; margin:37px 0 11px; }
h1 { font:normal clamp(65px,7vw,117px)/.93 var(--display); color:#f0e8d9; letter-spacing:-5px; margin:0; }
h1 em,.game-heading em { font-weight:normal; color:var(--gold); }
.title-period { color:#9f4039; }
.intro-copy { margin:39px 0 44px; max-width:400px; color:#b5aa9b; font:normal 16px/1.9 var(--display); }
.ornament-rule { color:#aa926c; display:flex; align-items:center; max-width:220px; gap:16px; }
.ornament-rule:before,.ornament-rule:after { display:block; height:1px; flex:1; background:#78674e; content:""; }
.edition { font-size:10px; letter-spacing:2.5px; margin-top:22px; color:#a49177; }
.edition span { color:var(--accent); padding:0 5px; }
.login-card { border:1px solid #5e503d; background:linear-gradient(130deg,rgba(49,40,29,.87),rgba(18,16,13,.97)); padding:40px 42px; box-shadow:0 24px 80px rgba(0,0,0,.3),inset 0 0 0 7px rgba(10,9,8,.34); position:relative; }
.login-card:before,.login-card:after { content:""; width:12px; height:12px; border-color:var(--gold); position:absolute; }
.login-card:before { top:8px; left:8px; border-top:1px solid; border-left:1px solid; }
.login-card:after { bottom:8px; right:8px; border-bottom:1px solid; border-right:1px solid; }
.card-icon { color:var(--gold); border:1px solid #68573d; width:45px; height:45px; display:grid; place-items:center; font-size:26px; border-radius:50%; font-family:var(--display); margin-bottom:23px; }
.card-eyebrow { font-size:9px; letter-spacing:3px; color:var(--gold); font-weight:700; margin:0 0 12px; }
.login-card h2 { font:normal 32px/1.2 var(--display); margin:0 0 12px; color:#f5ecdf; }
.login-card p:not(.card-eyebrow) { color:#ada293; font-size:13px; line-height:1.8; max-width:310px; }
.login-form { margin-top:30px; }
.login-form label,.change-password-form label { display:block; margin:0 0 10px; color:#b9ab93; letter-spacing:1.9px; font-size:10px; font-weight:700; }
.login-form input,.change-password-form input { border:1px solid #625441; background:#171511; color:#fff9ec; padding:14px 15px; width:100%; outline:none; font-size:14px; border-radius:1px; }
.login-form input:focus,.change-password-form input:focus { border-color:#d1ad72; box-shadow:0 0 0 1px #d1ad72; }
.login-form input::placeholder { color:#7f7565; }
.primary-button { margin-top:15px; width:100%; padding:15px 16px; display:flex; justify-content:space-between; background:#ae9165; color:#17120d; border:1px solid #d1ba93; text-transform:uppercase; letter-spacing:1.4px; font-size:11px; font-weight:bold; transition:background .2s; }
.primary-button:hover { background:#ddbd8b; }
.primary-button span { font-size:18px; line-height:11px; }
.login-footer { border-top:1px solid rgba(173,148,106,.21); margin-top:25px; padding-top:19px; color:#928574; font-size:11px; }
.key-icon { color:var(--gold); padding-right:10px; }
.flash { border:1px solid #8a4838; background:rgba(126,50,40,.16); padding:11px 13px; color:#eec5b8; font-size:12px; margin:18px 0 -4px; line-height:1.5; }
/* Player page */
.game-page { padding:38px 0 52px; flex:1; }
.title-row { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid rgba(193,165,115,.24); padding-bottom:34px; margin-bottom:33px; }
.kicker.left { gap:12px; font-size:9px; margin:1px 0 18px; }
.kicker.left .kicker-line:first-child { width:22px; }
.game-heading { font-size:clamp(48px,5.2vw,82px); line-height:.97; white-space:nowrap; letter-spacing:-3.4px; }
.tagline { color:#b5a68a; letter-spacing:3px; font-size:9px; margin:14px 0 0; }
.chapter-display { border-left:1px solid #67573f; padding-left:25px; display:grid; justify-items:end; min-width:145px; }
.chapter-display span { font-size:9px; letter-spacing:2px; color:#aa9779; }
.chapter-display strong { font:normal 40px/1.4 var(--display); color:#ddd0bd; }
.chapter-display small { font:normal 18px var(--display); color:#836b49; }
.game-grid { display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:32px; align-items:start; }
.player-heading { display:flex; justify-content:space-between; font-size:9px; color:#bdad90; letter-spacing:1.9px; margin:0 0 13px; }
.player-heading-left { display:flex; align-items:center; gap:10px; }
.red-dot { background:#a6463d; width:6px; height:6px; border-radius:100%; }
.player-name { margin-left:9px; color:#817769; }
.player-frame { border:2px solid #a18a62; padding:8px; position:relative; background:#0c0b09; box-shadow:0 15px 36px rgba(0,0,0,.28); }
.player-frame:before { content:""; position:absolute; left:-5px; top:-5px; border-top:1px solid #c9aa72; border-left:1px solid #c9aa72; width:19px; height:19px; pointer-events:none; }
.player-frame:after { content:""; position:absolute; bottom:-5px; right:-5px; border-right:1px solid #c9aa72; border-bottom:1px solid #c9aa72; width:19px; height:19px; pointer-events:none; }
.game-container { position:relative; aspect-ratio:700 / 474; width:100%; background:radial-gradient(ellipse at 50% 30%,#332c21,#0e0d0a 65%); overflow:hidden; }
.game-container ruffle-player { width:100%; height:100%; display:block; }
.boot-state { position:absolute; z-index:2; inset:0; display:flex; justify-content:center; flex-direction:column; align-items:center; gap:22px; color:var(--gold); text-align:center; pointer-events:none; }
.boot-state[hidden] { display:none; }
.boot-crest { width:90px; height:90px; border:1px solid #8d7858; border-radius:50%; display:grid; place-items:center; font:normal 28px var(--display); letter-spacing:-4px; box-shadow:0 0 0 8px rgba(191,154,93,.06),0 0 60px rgba(202,155,79,.1); }
.loader-track { background:#4d4030; height:2px; width:min(190px,45%); overflow:hidden; }
.loader-track span { display:block; background:#c7aa77; height:100%; width:42%; animation:loading 1.65s ease-in-out infinite alternate; }
@keyframes loading { from { transform:translateX(-120%); } to { transform:translateX(260%); } }
.boot-state p { letter-spacing:3px; font-size:9px; color:#bda982; max-width:70%; line-height:2; }
.player-controls { min-height:62px; border-bottom:1px solid rgba(193,165,115,.2); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.controls-left { color:#958b7c; font-size:9px; font-weight:bold; letter-spacing:1.4px; display:flex; align-items:center; gap:9px; }
.green-led { background:#7c9668; box-shadow:0 0 8px rgba(124,150,104,.28); }
.controls-actions { display:flex; gap:13px; }
.small-button { background:transparent; color:#d1c2a8; border:1px solid #655842; padding:8px 12px; display:flex; align-items:center; gap:8px; font-size:11px; transition:border-color .2s; }
.small-button:hover { border-color:#c5a87b; }
.small-button:first-letter { font-size:17px; }
.bottom-note { color:#8b8274; line-height:1.7; font-size:11px; margin:17px 0 0; }
.information-column { border:1px solid #5c4f3d; background:linear-gradient(150deg,#221e19,#151310); padding:22px 24px 26px; box-shadow:inset 0 0 0 5px rgba(9,8,7,.25); }
.aside-topline { border-bottom:1px solid rgba(190,163,115,.28); display:flex; justify-content:space-between; padding-bottom:16px; color:#bc9d6a; letter-spacing:2px; font-size:9px; font-weight:bold; }
.aside-topline span { color:#8b785b; }
.case-number { margin-top:16px; color:#b99d6f; font:normal 63px/1.15 var(--display); letter-spacing:-5px; }
.case-small { font:normal 20px var(--display); color:#786b5a; letter-spacing:0; }
.information-column h2 { font:normal 31px/1.12 var(--display); color:#eee2ce; margin:15px 0 18px; }
.information-column p { font-size:12px; line-height:1.75; color:#a9a091; margin:0 0 20px; }
.info-separator { display:flex; align-items:center; gap:10px; color:#947951; font-size:12px; margin:19px 0 16px; }
.info-separator:before,.info-separator:after { content:""; height:1px; background:#685842; flex:1; }
.info-line { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 15px; }
.info-line span { color:#97876e; font-size:9px; letter-spacing:1.2px; }
.info-line strong { color:#ddd1bd; font-size:11px; font-weight:normal; }
.archive-tools { border-top:1px solid #574935; margin-top:24px; padding-top:16px; }
.archive-tools summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:7px; align-items:center; color:#d6bd8f; font-size:11px; letter-spacing:0.4px; }
.archive-tools summary::-webkit-details-marker { display:none; }
.archive-tools[open] .caret { transform:rotate(180deg); }
.caret { display:inline-block; transition:transform .15s; font-size:17px; line-height:1; }
.archive-inside { margin-top:16px; }
.archive-inside p { font-size:11px; }
.archive-button { display:flex; justify-content:space-between; gap:7px; align-items:center; width:100%; padding:11px 10px; color:#ebd6aa; border:1px solid #8c7450; background:#352b20; font-size:11px; text-align:left; }
.archive-button:hover { background:#483826; }
.archive-button:disabled { opacity:.45; cursor:default; }
.archive-button span { font-size:17px; }
.archive-progress { margin-top:13px; }
.archive-progress[hidden] { display:none; }
.progress-caption { color:#baab93; font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.progress-bar { width:100%; height:4px; margin-top:8px; background:#4c3d2b; overflow:hidden; }
.progress-bar span { display:block; height:100%; width:0; background:#caa56b; transition:width .2s; }
.archive-inside p.cached-caption { color:#817563; font-size:10px; margin:12px 0 15px; }
.source-link { color:#b39b75; font-size:10px; text-underline-offset:4px; }
.change-password-form label { letter-spacing:.2px; text-transform:none; margin:13px 0 6px; }
.change-password-form input { padding:9px; font-size:12px; }
.change-password-form button { margin-top:16px; }
.password-settings { margin-top:17px; }
.global-note { margin-top:24px; background:#2c3623; color:#d2edc1; border:1px solid #607950; padding:12px 16px; font-size:12px; }
.global-error { background:#40231f; color:#f2c3ba; border-color:#934b42; }
@media(min-width:1200px) { .site-shell { padding:0 70px; } .game-grid { grid-template-columns:minmax(0,1fr) 285px; gap:42px; } }
@media(max-width:950px) { .site-shell { padding:0 25px; } .login-layout { gap:30px; padding:65px 0; } .login-card { padding:30px 26px; } .game-grid { grid-template-columns:minmax(0,1fr); } .information-column { display:grid; grid-template-columns:1fr 1fr; column-gap:26px; align-items:start; } .aside-topline,.information-column h2,.information-column>p,.case-number,.info-separator { grid-column:1; } .info-line,.archive-tools { grid-column:2; } .info-line:first-of-type { margin-top:0; } .game-page { padding:34px 0; } }
@media(max-width:640px) { .site-shell { padding:0 18px; } .topbar { padding:19px 0; min-height:0; } .brand-divider,.brand-label,.chapter-chip { display:none; } .header-right { gap:12px; } .login-layout { display:flex; flex-direction:column; align-items:stretch; padding:64px 0 52px; min-height:0; gap:50px; } .login-intro { text-align:center; } .kicker { justify-content:center; font-size:8px; letter-spacing:2.3px; } .era { font-size:9px; letter-spacing:1px; margin-top:28px; } h1 { font-size:clamp(63px,16vw,91px); letter-spacing:-3px; } .intro-copy { margin:30px auto; font-size:15px; max-width:340px; } .ornament-rule { margin:auto; } .edition { line-height:2; font-size:9px; } .login-card { padding:31px 27px; } .site-footer { flex-direction:column; text-align:center; gap:8px; font-size:8px; } .title-row { align-items:start; padding-bottom:25px; gap:10px; } .game-heading { font-size:clamp(37px,9vw,60px); white-space:normal; letter-spacing:-2.5px; } .chapter-display { display:none; } .tagline { letter-spacing:1.5px; font-size:8px; } .game-grid { gap:25px; } .player-frame { padding:4px; } .player-name { display:none; } .player-controls { min-height:60px; gap:6px; } .controls-actions { gap:6px; } .small-button { padding:7px 9px; } .small-button span { display:none; } .controls-left { font-size:8px; letter-spacing:1px; } .information-column { display:block; } .info-line { margin-bottom:14px; } }
.player-frame:fullscreen { width:100vw; height:100vh; display:flex; justify-content:center; align-items:center; padding:2vh; background:#080807; border:none; }
.player-frame:fullscreen .game-container { height:100%; width:auto; max-width:100%; aspect-ratio:700/474; }