/* Delvin's Vice: black, crimson, and readable neutral tactical markings. */
:root{--bg:#09090b;--panel:#151518;--line:#393237;--text:#f4f1f2;--muted:#b9b2b6;--gold:#ff5265;--cyan:#d2cbd0;--red:#ff5265;color-scheme:dark}
body{background:var(--bg)}
button,select{background:#1a171b;border-color:#45363c;min-height:44px}
button:hover:not(:disabled){background:#302027;border-color:#ff5265}
button.primary,.patreon-link.primary{background:#c71635;border-color:#ef3c56;color:#fff}
button.primary:hover,.patreon-link.primary:hover{background:#e02141;color:#fff}
button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #fff;outline-offset:3px}
h1,h2,h3{color:#f4f1f2}
.topbar{background:#0b090cf2;border-bottom:1px solid #38212a}
.language-control select{background:#1a141b;color:#f4f1f2;border-color:#553543}
.brand i{color:#ff334f}
.splash{background:#09090b}
.splash:before{background:linear-gradient(90deg,#09090b 0%,#09090bea 25%,#09090b63 80%),linear-gradient(0deg,#09090b,transparent 70%),url('assets/yard.png') center/cover}
.splash h1 span{color:#ef2947}
.splash .intro,.save-note,.small.muted{color:#b9b2b6}
.portrait-stack{border-color:#5c303b;border-bottom:3px solid #d4213e;background:#1a1015;box-shadow:0 25px 90px #0009}
.portrait-stack:after{background:linear-gradient(0deg,#0d090d,transparent 70%)}
.brief-art:after{background:linear-gradient(0deg,#0d090de8,transparent 60%)}
.map-shell{background:#09090b;border-color:#443038}
.map-label{background:#151014;color:#cbc1c6;font-size:.75rem}
.legend{background:#100d11;border-top:1px solid #34272d;color:#dbd4d8;font-size:.8rem}
.legend b{color:#fff}
.mission-card,.operative,.objectives,.heat,.log,.episode{background:#141216;border-color:#392a32}
.objective.active{color:#fff;background:#c7163515;border-left:2px solid #ef2947}
.objective .number{background:#2c1b24;color:#fff;border-color:#8d2c42}
.objective.done{color:#b4acb0}
.heat progress{accent-color:#e12c46}
progress::-webkit-progress-value{background:#e12c46}
progress::-moz-progress-bar{background:#e12c46}
.modal{background:#151216;border:1px solid #65404d;box-shadow:0 25px 120px #000b}
.modal-shade{background:#030204bf}
.answer,.dial,.sequence-row button{background:#211820;border-color:#4b303e}
.answer:hover,.dial:hover{background:#3d202d}
.sequence-row button.lit{background:#ec2444;color:white;box-shadow:0 0 20px #ed244477}
.key{background:#ffffff12;color:inherit;border-color:#ffffff26}
.badges span,.free-episodes{background:#351420;color:#ffafba;border-color:#733245}
.membership-invite,.watch-footer{background:linear-gradient(145deg,#28121b,#100d12);border-color:#713044}
.watch-episode,.watch-list>li{border-color:#443038}
.watch-episode:hover{background:#29151e}
.episode-index{color:#ff5265}
.membership-link,.patreon-link,.watch-jump,.episode-patreon{color:#ffb2bd}
.preview-link{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border:1px solid #a63249;color:#fff;text-decoration:none;background:#4c1324;font-weight:700;min-height:52px}
.preview-link:hover{background:#742039}
.preview-link span{font-size:.75rem;letter-spacing:.1em;color:#ff9bad}
.preview-tag{display:inline-flex;align-items:center;gap:.6rem;border-left:3px solid #ff334f;padding:.45rem .8rem;background:#a7192d17;color:#e5c5cb;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.preview-home .splash-content{min-height:calc(100svh - 160px)}
.preview-home h1{font-size:clamp(3.3rem,7.2vw,7rem)}
.preview-home .portrait-caption h3{font-family:Arial,Helvetica,sans-serif;font-weight:800}
.board-stage{position:relative;isolation:isolate;background:#0b090e;overflow:hidden}
.board-stage canvas{width:100%;height:clamp(350px,52svh,570px);max-height:none!important;display:block;touch-action:none}
.board-stage:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 70px #0005;pointer-events:none}
.board-stamp{position:absolute;top:15px;left:17px;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:4px;color:#e0d5db;letter-spacing:.1em;font-size:.75rem;text-shadow:0 2px 6px #000}
.board-stamp strong{font-size:1rem;letter-spacing:.13em;color:#fff}
.board-camera{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem .8rem;border-top:1px solid #39262f;background:#100d12;flex-wrap:wrap}
.camera-buttons{display:flex;gap:5px;flex-wrap:wrap}
.camera-buttons button{min-width:44px;padding:.4rem .7rem;font-size:.875rem}
.camera-hint{font-size:.8rem;color:#bcaeb5;margin:0}
.board-status{margin:0;padding:.55rem .8rem;background:#271019;color:#ffe0e5;font-size:.875rem}
.board-status:empty{display:none}
.preview-active .game-wrap{max-width:1500px;margin:auto}
.preview-active .mission-head h2{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(1.55rem,2.3vw,2.5rem);letter-spacing:-.045em}
.preview-active .mission-head .eyebrow{font-size:.75rem;letter-spacing:.09em}
.preview-active .operative img{filter:saturate(.7)}
.preview-active .compact-status{background:#1b1118;border-color:#663040;color:#fff}
.preview-active .map-label{border-bottom:1px solid #3f2630}
.preview-active .legend{gap:.5rem 1rem;padding:.65rem .8rem}
.preview-active .side .log{font-size:.95rem;line-height:1.5}
.preview-active .number{color:#fff}
.preview-active .controls button[aria-pressed=true]{background:#702137;color:white;border-color:#ff5265}
@media(max-width:1000px){.board-stage canvas{height:400px}.preview-active .game-layout{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:760px){
 .splash:before{background:linear-gradient(90deg,#09090bef,#09090b92),url('assets/yard.png') center/cover}
 .preview-home .splash-content{padding:2rem 1.5rem;min-height:calc(100svh - 155px)}
 .preview-home h1{font-size:4.1rem}
 .preview-active .game-layout{display:block}
 .preview-active .mission-head h2{font-size:1.5rem}
 .board-stage canvas{height:clamp(280px,48svh,420px)}
 .board-stamp{top:11px;left:12px;font-size:.65rem}
 .board-stamp strong{font-size:.8rem}
 .board-camera{padding:.4rem .5rem;gap:.35rem}
 .camera-hint{font-size:.75rem}
 .camera-buttons{gap:4px}
 .camera-buttons button{padding:.25rem .55rem}
 .preview-active .legend{font-size:.75rem;gap:.25rem .65rem;padding:.5rem}
 .preview-active .controls .action-group button{font-size:.85rem}
 .preview-active .compact-status{font-size:.8rem;line-height:1.4;min-height:46px}
 .preview-active #position{font-size:.75rem;line-height:1.5}
 .preview-active .game-wrap{padding:.5rem}
 .preview-active .topbar .brand{font-size:.95rem}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
 .preview-active .game-layout{display:block}
 .preview-active .game-board{display:block}
 .board-stage canvas{height:65svh;min-height:230px}
 .preview-active .controls{position:static;width:auto;background:none;display:flex;justify-content:center;padding:.4rem}
 .preview-active .compact-status{position:static;display:flex;width:auto}
 .preview-active .board-camera{padding:.3rem .6rem}
 .preview-active .legend{display:flex}
}
@media(prefers-reduced-motion:reduce){.board-stage:after{box-shadow:none}}

/* Fit the board and the actions together on phones; the camera strip can scroll. */
.watch-nav{border-color:#6b2d3e;color:#ff7086}
.preview-active .heat progress{appearance:none;width:100%;height:6px;border:0;background:#30242d}
.preview-active progress::-webkit-progress-bar{background:#30242d}
.preview-active progress::-webkit-progress-value{background:#f02a4d}
.preview-active progress::-moz-progress-bar{background:#f02a4d}
@media(max-width:1000px){
 .preview-active[data-screen=play] .screen{height:100svh;display:flex;flex-direction:column;overflow:hidden}
 .preview-active[data-screen=play] .topbar{flex:none;min-height:54px;padding:.3rem .7rem;flex-wrap:nowrap}
 .preview-active[data-screen=play] .topbar .row>button:not([data-action=pause]),.preview-active[data-screen=play] .language-control{display:none}
 .preview-active .game-wrap{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;padding:.45rem}
 .preview-active .mission-head{flex:none;margin-bottom:.4rem;gap:.4rem;align-items:center}
 .preview-active .mission-head h2{font-size:clamp(1.2rem,4vw,1.55rem);margin:.25rem 0;line-height:1.15}
 .preview-active .mission-head .eyebrow{font-size:.75rem;letter-spacing:.06em}
 .preview-active .mission-head .row{flex:none;gap:.3rem}
 .preview-active .mission-head .row button{padding:.35rem;font-size:.8rem}
 .preview-active .mission-head #turns{font-size:.75rem}
 .preview-active .game-layout{display:block;flex:1;min-height:0}
 .preview-active .game-board{display:flex;flex-direction:column;height:100%;min-height:0;gap:0}
 .preview-active .map-shell{display:flex;flex-direction:column;flex:1;min-height:145px;width:100%;align-self:stretch;justify-self:stretch}
 .preview-active .map-label{display:none}
 .preview-active .board-stage{flex:1;min-height:80px}
 .preview-active .board-stage canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none!important}
 .preview-active .board-stamp{top:9px;left:10px;font-size:.75rem;gap:2px}
 .preview-active .board-stamp strong{font-size:.75rem}
 .preview-active .board-camera{flex:none;padding:4px;display:block}
 .preview-active .camera-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:4px;scrollbar-width:thin}
 .preview-active .camera-buttons button{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:3px;font-size:.85rem}
 .preview-active .camera-hint{display:none}
 .preview-active .legend{display:flex;flex:none;flex-wrap:wrap;gap:.2rem .55rem;font-size:.75rem;line-height:1.2;padding:.4rem}
 .preview-active .side{display:none}
 .preview-active .controls{display:grid;grid-template-columns:140px minmax(0,1fr);gap:.45rem;flex:none;margin:.4rem 0 0;padding:0;position:static;background:none;width:100%;align-items:center}
 .preview-active .controls .action-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:auto}
 .preview-active .controls .action-group button{min-width:0;min-height:44px;padding:.25rem;font-size:.85rem}
 .preview-active .controls .key{display:none}
 .preview-active .dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}
 .preview-active .dpad button{min-width:44px;min-height:44px}
 .preview-active .compact-status{position:static;display:flex;flex:none;align-items:center;justify-content:space-between;gap:.4rem;padding:.4rem;margin-top:.35rem;min-height:40px;width:auto;font-size:.8rem;line-height:1.3}
 .preview-active .compact-status strong{font-size:.75rem;white-space:nowrap}
 .preview-active #position{display:none}
 .preview-active .board-status{font-size:.75rem;padding:.35rem}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
 .preview-active[data-screen=play] .screen{height:100svh;display:flex;flex-direction:column;overflow:hidden}
 .preview-active[data-screen=play] .topbar{min-height:46px;padding:.05rem .5rem;flex:none}
 .preview-active .game-wrap{display:flex;flex-direction:column;flex:1;min-height:0;padding:.25rem .5rem}
 .preview-active .mission-head{flex:none;min-height:45px;margin-bottom:.25rem;align-items:center}
 .preview-active .mission-head h2{font-size:1.25rem;margin:.1rem 0;line-height:1.1}
 .preview-active .mission-head .eyebrow{font-size:.75rem}
 .preview-active .game-layout{display:block;flex:1;min-height:0}
 .preview-active .game-board{display:grid;height:100%;grid-template-columns:minmax(0,1fr) 188px;grid-template-rows:minmax(0,1fr) auto;gap:.4rem;min-height:0}
 .preview-active .map-shell{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;width:100%;min-height:0}
 .preview-active .board-stage{flex:1;min-height:70px}
 .preview-active .board-stage canvas{position:absolute;inset:0;min-height:0;height:100%;width:100%}
 .preview-active .map-label,.preview-active #position,.preview-active .side,.preview-active .camera-hint{display:none}
 .preview-active .board-stamp{top:7px;left:8px}
 .preview-active .board-camera{padding:3px;flex:none;display:block}
 .preview-active .camera-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto}
 .preview-active .camera-buttons button{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:3px}
 .preview-active .legend{display:none}
 .preview-active .controls{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:.4rem;margin:0;padding:0;width:auto;min-height:0}
 .preview-active .controls .action-group{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .preview-active .controls .action-group button{min-width:0;min-height:44px;font-size:.8rem;padding:.2rem}
 .preview-active .compact-status{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;min-height:38px;font-size:.75rem;margin:0;padding:.25rem;gap:.1rem;width:auto}
}

/* A visible route back to all nine missions, including during mobile play. */
.topbar{padding:.65rem 1.3rem;gap:.75rem}
.topbar>.row{gap:.35rem;justify-content:flex-end}
.topbar button,.topbar .campaign-nav{font-size:.875rem;padding:.45rem .65rem;min-height:44px}
.topbar .language-control{margin:0}
.topbar .language-control>span{display:none}
.topbar .language-control select{min-width:88px;min-height:44px;padding:.4rem .5rem;font-size:.875rem}
.topbar .campaign-nav{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #f14966;background:#b81030;color:#fff;border-radius:3px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.topbar .campaign-nav:hover{background:#da1c3e;border-color:#ff8b9e}
.campaign-label-short{display:none}
@media(max-width:1000px){
 .topbar{padding:.6rem .7rem}
 .topbar>.row{gap:.3rem}
 .preview-active[data-screen=play] .topbar .campaign-nav{display:inline-flex;font-size:.875rem;padding:.4rem .55rem;min-height:44px}
 .preview-active[data-screen=play] .topbar .campaign-label-full{display:none}
 .preview-active[data-screen=play] .topbar .campaign-label-short{display:inline}
}
@media(max-width:760px){
 .topbar button,.topbar .campaign-nav{font-size:.875rem;padding:.4rem .55rem}
 .preview-active .topbar .campaign-label-full{display:none}
 .preview-active .topbar .campaign-label-short{display:inline}
 .preview-active[data-screen=play] .topbar .brand{font-size:.85rem;letter-spacing:.06em;white-space:nowrap}
 .preview-active[data-screen=play] .topbar{gap:.35rem}
 .preview-active[data-screen=play] .topbar>.row{flex-wrap:nowrap;gap:.3rem}
}

/* Two explicit language choices; English is the initial selection. */
.language-switch{display:inline-flex;align-items:stretch;gap:0;flex-shrink:0;padding:3px;border:1px solid #65404d;border-radius:5px;background:#110d12;vertical-align:middle}
.language-switch button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:68px;margin:0;padding:.4rem .65rem;border:1px solid transparent;border-radius:3px;background:transparent;color:#cec2c9;font-size:.875rem;line-height:1.2;font-weight:500;white-space:nowrap}
.language-switch button[aria-pressed=true]{background:#ba1435;border-color:#ee4563;color:#fff;font-weight:700;box-shadow:0 1px 5px #0005}
.language-switch button:hover{background:#432030;color:#fff}
.language-switch button[aria-pressed=true]:hover{background:#d21c40}
.language-switch button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.topbar .language-control.language-switch{margin:0;width:fit-content;justify-content:flex-start}
.topbar .language-switch button{padding:.4rem .55rem}
.settings .language-switch{display:inline-flex;width:fit-content;justify-content:flex-start;margin:.75rem 0 1rem}
@media(max-width:760px) and (orientation:portrait) and (max-height:620px){
 body:not(.preview-active)[data-screen=play] #map{width:min(100%,max(224px,calc((100svh - 400px)*1.6)));margin:0 auto}
}
@media(max-width:1000px){
 body[data-screen=play] .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.3rem .55rem;flex:none;padding:.3rem .7rem}
 body[data-screen=play] .topbar>.brand{grid-row:1;grid-column:1}
 body[data-screen=play] .topbar>.row{display:contents}
 body[data-screen=play] .topbar #language-header{display:inline-flex;grid-row:2;grid-column:1;justify-self:start}
 body[data-screen=play] .topbar .campaign-nav{grid-row:2;grid-column:2;justify-self:end}
 body[data-screen=play] .topbar [data-action=pause]{grid-row:1;grid-column:2;justify-self:end}
 body[data-screen=play] .topbar>.row>button:not([data-action=pause]){display:none}
 .topbar .language-switch button{min-width:64px;min-height:44px;padding:.35rem .4rem}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1100px){
 body[data-screen=play] .topbar{display:flex;justify-content:space-between;flex-wrap:nowrap;gap:.35rem;padding:.1rem .5rem}
 body[data-screen=play] .topbar>.row{display:flex;gap:.3rem;flex-wrap:nowrap;align-items:center}
 body[data-screen=play] .topbar #language-header{display:inline-flex}
 body[data-screen=play] .topbar>.row>button:not([data-action=pause]){display:none}
 body[data-screen=play] .topbar .brand{font-size:.85rem;letter-spacing:.05em;white-space:nowrap}
 .topbar .language-switch{padding:2px}
 .topbar .language-switch button{min-width:64px;min-height:44px;padding:.3rem .35rem}
}

/* Blend the transparent character into the existing train-yard wallpaper. */
.portrait-stack.delvin-portrait{border:0;background:transparent;box-shadow:none;overflow:visible;isolation:isolate}
.delvin-portrait>img{object-position:center top;filter:drop-shadow(0 16px 15px #000b) drop-shadow(0 0 10px #cf193b66);-webkit-mask-image:linear-gradient(#000 0%,#000 64%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 64%,transparent 100%)}
.delvin-portrait:after{background:radial-gradient(ellipse at 50% 88%,#09090bea 0%,#09090b80 36%,transparent 70%);pointer-events:none}
.delvin-portrait .portrait-caption{text-shadow:0 2px 8px #000,0 1px 3px #000}