@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#0c0b0b;--panel:#171414;--panel2:#211b19;--gold:#c9a46b;--cream:#f2e4cc;--muted:#b1a18d;--red:#ad302a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0d0b0a;color:var(--cream);font-family:'DM Sans',sans-serif}button,a{cursor:pointer}button{font:inherit}a{text-decoration:none;color:inherit}.top{height:82px;padding:0 max(5%,calc((100% - 1420px)/2));display:flex;align-items:center;justify-content:space-between;background:#100e0d;border-bottom:1px solid #5b4833;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:15px}.sigil{font:700 39px Cinzel,serif;color:var(--gold);border:1px solid #a77b48;width:53px;height:53px;text-align:center;line-height:51px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--gold)}.brand strong{display:block;font:700 23px Cinzel,serif;letter-spacing:4px}.top nav{display:flex;align-items:center;gap:33px;font-size:11px;font-weight:700;letter-spacing:1.7px}.top nav a:hover{color:var(--gold)}button{background:#211b18;color:#e8d7b9;border:1px solid #665039;padding:11px 16px;transition:.18s}button:hover{background:#463426;border-color:#d3ac70}button:disabled{opacity:.35;cursor:not-allowed}.subtle{background:none;font-size:11px;letter-spacing:1px}.hero{min-height:630px;position:relative;background:linear-gradient(90deg,#090707 0%,rgba(9,7,7,.87) 31%,rgba(9,7,7,.12) 74%),url('assets/shadow-city.svg') center center/cover no-repeat;display:flex;align-items:center}.heroShade{position:absolute;inset:0;background:linear-gradient(0deg,#0d0b0a,transparent 22%)}.heroContent{position:relative;width:min(1420px,90%);margin:auto;padding:70px 0}.eyebrow,.micro,.sectionTitle span{font-size:10px;letter-spacing:3px;color:var(--gold);font-weight:700}.hero h1{font:800 clamp(56px,7.2vw,116px)/.97 Cinzel,serif;letter-spacing:2px;margin:22px 0;color:#f7e9d1;text-shadow:0 8px 25px #000}.hero h1 em{font-style:normal;color:var(--gold);font-size:.65em;white-space:nowrap}.intro{max-width:540px;color:#d5c7b5;font-size:17px;line-height:1.8}.heroActions{display:flex;gap:15px;margin:30px 0 52px}.goldBtn{background:linear-gradient(#e0be82,#bd9053);color:#17100b;border:1px solid #f5dba3;font-weight:800;letter-spacing:1.4px;padding:17px 23px;font-size:12px;display:inline-flex;align-items:center;gap:20px;justify-content:center}.goldBtn:hover{background:#f5dba3;color:#17100b}.ghostBtn{border:1px solid #b59b75;padding:17px 23px;font-size:12px;letter-spacing:1.5px;font-weight:700}.heroFooter{font-size:10px;letter-spacing:2px;color:#b7a38d}.heroFooter b{padding:0 12px;color:#bd925d}.ticker{display:flex;justify-content:space-around;gap:20px;background:#271911;border-top:1px solid #775532;border-bottom:1px solid #775532;padding:14px;color:#d2ae74;font:600 11px Cinzel,serif;letter-spacing:1.6px;text-align:center}.sectionTitle{text-align:center;padding:80px 20px 45px}.sectionTitle h2,.chapter h2{font:700 clamp(30px,4vw,53px) Cinzel,serif;letter-spacing:1px;margin:13px 0}.sectionTitle p{color:var(--muted);font-size:14px}main{background:radial-gradient(ellipse at 50% 0%,#292019,#0c0b0a 72%)}.gameShell{max-width:1440px;margin:auto;border:1px solid #755535;box-shadow:0 30px 90px #000;background:#151110}.gameTop{padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(110deg,#32241c,#171312);border-bottom:1px solid #775735}.gameTop h3{font:600 25px Cinzel,serif;margin:6px 0}.gameTop p{color:var(--muted);margin:0;font-size:12px}.controls{display:flex;gap:8px}.controls button{font-size:10px;letter-spacing:1px}.status{display:grid;grid-template-columns:1.4fr 1.4fr repeat(3,1fr);border-bottom:1px solid #4d3a2b}.status>div{padding:16px 22px;border-right:1px solid #4d3a2b;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.status small{display:block;width:100%;font-size:9px;color:#c6a478;letter-spacing:1.3px}.status b{font-size:13px}.meter{height:7px;background:#392c29;flex:1;min-width:60px;border-radius:9px;overflow:hidden}.meter i{display:block;background:#8b9d74;height:100%;width:100%;transition:.3s}.meter.threat i{background:#b84b3a}.tabletop{display:grid;grid-template-columns:225px minmax(0,1fr) 245px;background:radial-gradient(ellipse at center,#30221b,#181311)}.leftRail,.rightRail{padding:18px;background:linear-gradient(#241b17,#161211)}.leftRail{border-right:1px solid #654831}.rightRail{border-left:1px solid #654831}.railHeading{font:700 12px Cinzel,serif;color:var(--gold);letter-spacing:1.5px;padding:13px 0 10px;border-bottom:1px solid #5e4631;margin-bottom:13px;display:flex;justify-content:space-between}.portrait{height:190px;background:url('assets/shadow-portrait.svg') center 22%/cover;position:relative;border:1px solid #755638;box-shadow:inset 0 0 35px #000}.portraitShade{position:absolute;inset:0;background:linear-gradient(0deg,#100d0c,transparent 70%)}.portrait span{position:absolute;bottom:11px;text-align:center;width:100%;font:700 12px Cinzel,serif;letter-spacing:1px}.modeButtons{display:flex;margin:12px 0;gap:6px}.modeButtons button{flex:1;font:700 11px Cinzel,serif;padding:12px 4px}.modeButtons button small{font:9px 'DM Sans',sans-serif;letter-spacing:.5px}.modeButtons .active{background:#bd9358;color:#16110d}.asideHint{font-size:11px;line-height:1.65;color:#bba991}.abilities{display:grid;gap:8px}.ability{padding:10px;background:#352720;border:1px solid #6b4c31}.ability b{display:block;color:#e2c391;font:700 11px Cinzel,serif}.ability small{display:block;font-size:10px;color:#c6b49e;margin-top:4px;line-height:1.5}.centerStage{min-width:0;padding:22px;background:linear-gradient(150deg,rgba(13,10,9,.15),rgba(0,0,0,.3)),url('assets/desk-texture.svg') center/350px}.sceneHead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.sceneHead h3{font:600 20px Cinzel,serif;margin:7px 0}.phaseTag{color:#e6c68e;border:1px solid #765734;font-size:10px;padding:7px 10px;letter-spacing:1px}.encounter{display:flex;gap:14px;min-height:295px}.sceneArt{min-height:295px;flex:1;background:url('assets/noir-alley.svg') center/cover;position:relative;border:6px solid #4d3828;box-shadow:0 4px 15px #000;display:flex;align-items:end}.artOverlay{padding:24px;width:100%;background:linear-gradient(0deg,#0a0909,transparent)}.artOverlay span{font:600 19px Cinzel,serif}.artOverlay p{color:#d3c0a4;font-size:12px;line-height:1.5}.enemyPanel{width:185px;flex-shrink:0}.enemyCard{height:228px;background:linear-gradient(#281714,#5b2620);border:4px solid #ad8d5b;box-shadow:0 5px 15px #000;position:relative;text-align:center;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.enemyCard .rank{font:700 37px Cinzel,serif;color:#e8c994}.enemyCard .villain{font:600 13px Cinzel,serif}.enemyCard .suit{font-size:30px;color:#d9ab8b}.enemyStats{display:grid;gap:5px;margin-top:10px}.enemyStats span{display:flex;justify-content:space-between;font-size:10px;color:#b9a58c}.enemyStats b{color:#fff}.narrative{margin-top:15px;background:#19120f;border-left:3px solid var(--gold);padding:15px 18px;color:#e1cfb4;line-height:1.6;font-size:13px;min-height:68px}.dicePanel{margin-top:15px;border:1px solid #775a38;background:#241a15;display:flex;align-items:center;padding:12px;gap:15px}.dice{display:flex;gap:7px}.dice span{display:inline-grid;place-items:center;background:#e7d7b9;color:#281b15;border:2px solid #a88757;width:45px;height:45px;font-size:35px;line-height:1;box-shadow:2px 3px 4px #000}.diceText{flex:1}.diceText strong{display:block;font:700 12px Cinzel,serif;color:#e1bd82}.diceText small{display:block;font-size:11px;color:#b8a38c;margin-top:5px}.goldBtn.small{padding:12px 15px}.actionBar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}.actionBar button{padding:15px 7px;font-size:10px;font-weight:800;letter-spacing:1px}.hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.playingCard{height:127px;background:#e9dfc9;color:#241d19;border:3px solid #b19a77;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:8px;box-shadow:2px 4px 5px #000;transition:transform .15s}.playingCard:hover{transform:translateY(-5px)}.playingCard.selected{border:3px solid #d8a349;transform:translateY(-7px);box-shadow:0 0 0 2px #fff4bf,0 8px 10px #000}.playingCard .rank{font:700 22px Cinzel,serif}.playingCard .suit{font-size:33px;text-align:center}.playingCard .type{font-size:8px;font-weight:800;text-align:right;letter-spacing:1px}.playingCard.red{color:#a3322d}.caseProgress{display:grid;gap:8px}.caseProgress div{font-size:10px;padding:9px;background:#2d221c;color:#ae9980;border-left:2px solid #55402d}.caseProgress div.current{color:#efd5a7;border-color:#d2a465}.caseProgress div.done{color:#aac5a0;border-color:#82a47d}.log{max-height:205px;overflow:auto;font-size:10px;line-height:1.6;color:#c0ad95}.log p{border-bottom:1px solid #49352a;padding:7px 0;margin:0}.footerControls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 30px;border-top:1px solid #60452d;background:#201813}.footerControls b{font:700 12px Cinzel,serif;color:#dfbb80}.footerControls p{margin:6px 0 0;color:#b7a18b;font-size:12px}.footerControls button{font-size:11px}.belowGame{max-width:1400px;margin:auto;padding:100px 5%}.chapter span{font-size:11px;letter-spacing:2px;color:var(--gold)}.chapter h2 em{font-style:normal;color:var(--gold)}.chapter p{max-width:600px;color:#b9a997;line-height:1.8}.featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:40px}.featureGrid article{background:#201814;border-top:2px solid #9d7347;padding:25px}.featureGrid b{font:700 28px Cinzel,serif;color:#a77e4d}.featureGrid h3{font:600 16px Cinzel,serif}.featureGrid p{color:#b9a997;font-size:12px;line-height:1.7}.rules{background:#171310;padding:10px max(5%,calc((100% - 1380px)/2)) 90px}.rulesGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rulesGrid article{border:1px solid #5e4834;padding:25px;background:#201a16}.rulesGrid h3{font:700 15px Cinzel,serif;color:#d4b17a}.rulesGrid p{font-size:12px;line-height:1.8;color:#c6b7a1}footer{text-align:center;padding:55px 20px;background:#0c0a09;border-top:1px solid #63452b}footer .footerLogo{font:700 32px Cinzel,serif;letter-spacing:5px;color:var(--gold)}footer p{font-size:11px;letter-spacing:1px;color:#bfa98a}footer small{color:#857765;font-size:10px}.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px}.modal[hidden],[hidden]{display:none!important}.modalBody{position:relative;width:min(520px,100%);border:1px solid #bc9157;background:linear-gradient(145deg,#35231b,#15110f);padding:45px;box-shadow:0 25px 70px #000}.modalBody h2{font:700 30px Cinzel,serif}.modalBody p{line-height:1.8;color:#d2bfa5}.modalOptions{display:flex;gap:10px;flex-wrap:wrap}.modalOptions button{flex:1;min-width:140px}.close{position:absolute;right:15px;top:15px;background:none;border:none;font-size:26px}@media(max-width:1100px){.tabletop{grid-template-columns:185px minmax(0,1fr)}.rightRail{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.rightRail>.railHeading{grid-column:auto}.rightRail .hand{grid-row:2;grid-column:1;grid-template-columns:repeat(5,1fr)}.rightRail .caseProgress{grid-column:2;grid-row:2}.rightRail .log{grid-column:2;grid-row:4}.top nav{gap:14px}}@media(max-width:720px){.top{padding:0 15px;height:70px}.top nav a{display:none}.brand strong{font-size:17px}.brand small{font-size:7px}.sigil{width:43px;height:43px;line-height:41px;font-size:31px}.hero{min-height:590px;background-position:60% center}.hero h1{font-size:clamp(40px,9vw,65px)}.hero h1 em{white-space:normal}.intro{font-size:14px}.heroActions{flex-wrap:wrap}.ticker span:nth-child(2){display:none}.gameTop,.footerControls{flex-wrap:wrap;padding:20px}.status{grid-template-columns:repeat(3,1fr)}.status>div{padding:10px}.status>div:nth-child(-n+2){grid-column:span 3}.tabletop{display:flex;flex-direction:column}.leftRail{display:grid;grid-template-columns:1fr 1fr;gap:10px}.leftRail .portrait{grid-row:2/5}.leftRail .modeButtons{grid-column:2;grid-row:2;flex-direction:column}.leftRail .asideHint{grid-column:2;grid-row:3}.leftRail .abilities{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}.leftRail .railHeading{grid-column:1/-1}.centerStage{padding:14px}.encounter{flex-direction:column}.enemyPanel{width:100%;display:flex;gap:12px}.enemyCard{width:150px;height:180px;flex-shrink:0}.enemyStats{flex:1}.actionBar{grid-template-columns:repeat(2,1fr)}.rightRail{display:block}.rightRail .hand{display:grid;grid-template-columns:repeat(5,1fr)}.playingCard{height:110px;padding:5px}.playingCard .rank{font-size:16px}.playingCard .suit{font-size:25px}.featureGrid,.rulesGrid{grid-template-columns:1fr 1fr}.dicePanel{flex-wrap:wrap}}@media(max-width:440px){.rightRail .hand{grid-template-columns:repeat(3,1fr)}.featureGrid,.rulesGrid{grid-template-columns:1fr}.heroFooter{font-size:8px}.controls{flex-wrap:wrap}.diceText{flex-basis:55%}}

/* v1.1 — Cinematic pulp redesign */
:root{--gold:#d8ad69;--cream:#fff0d4;--red:#b32625}
body{background:#090c11}
.top{height:76px;background:rgba(6,9,13,.97);border-bottom:1px solid #6f492a;box-shadow:0 4px 22px #0009}
.brand strong{font:800 25px Georgia,serif;letter-spacing:1px;color:#f6e3bb}.brand small{letter-spacing:1.8px;margin-top:4px;color:#b9915e}
.sigil{border-radius:50%;border:2px solid #a87c46;background:radial-gradient(circle,#541617,#130e11);font-style:italic;color:#f4d4a3}
.top nav a{color:#d8c5a6;font-size:11px}
.hero{min-height:730px;overflow:hidden;isolation:isolate;align-items:center;background:linear-gradient(90deg,#07090e 0%,#0b0e13 49%,rgba(6,9,14,.55) 75%),url('assets/noir-city.jpg') right center/auto 100% no-repeat}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 45%,transparent 12%,#07090e99 95%),linear-gradient(0deg,#090c11 0%,transparent 26%);z-index:-1}
.heroFigure{position:absolute;z-index:-1;right:9%;top:0;width:min(43%,650px);height:100%;background:url('assets/shadow-hero.jpg') center top/cover no-repeat;filter:contrast(1.12) saturate(1.14);-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 18%,black 78%,transparent 100%);opacity:.95}
.heroShade{background:linear-gradient(90deg,#07090e 0%,#07090eea 30%,transparent 70%);z-index:-1}
.heroContent{width:min(1360px,90%);padding:75px 0 100px;z-index:2}
.heroContent .eyebrow{color:#e5bd79;letter-spacing:3px;font-size:11px}
.heroScript{font:italic 800 clamp(65px,9vw,145px)/.9 Georgia,serif;color:#c92d27;letter-spacing:-5px;margin:25px 0 0;text-shadow:3px 3px 0 #4d100e,5px 5px 0 #d0a05e,0 15px 30px #000}
.hero h1{font:700 clamp(35px,4.6vw,72px)/1.05 Georgia,serif;letter-spacing:3px;color:#f4dcb3;margin:18px 0 22px;text-shadow:0 4px 18px #000}
.hero h1 span{display:block;color:#dfb46f}
.hero .intro{max-width:530px;font-size:16px;line-height:1.8;color:#e6dac9;text-shadow:0 2px 8px #000}
.heroActions{display:flex;gap:14px;margin-top:32px}
.heroActions .goldBtn{background:linear-gradient(#a92120,#5d0b0c);border:2px solid #c99856;color:#fff0d6;box-shadow:inset 0 0 0 2px #41090b,0 8px 25px #000a}
.heroActions .goldBtn:hover{background:#ba2b25}
.heroActions .ghostBtn{background:#090d13d9;border:1px solid #c79a60;color:#f3d9ac}
.heroFooter{font-size:10px;letter-spacing:2px;color:#d6b987;margin-top:44px}
.heroStamp{position:absolute;bottom:65px;right:5%;z-index:2;max-width:280px;text-align:center;border-top:1px solid #aa7548;border-bottom:1px solid #aa7548;padding:13px;color:#f0d2a1;font:13px/1.5 Georgia,serif;letter-spacing:1px;text-shadow:0 2px 8px #000}
.heroStamp strong{display:block;color:#d63e30;font-size:19px;margin-top:5px}
.featureStrip{max-width:1460px;margin:-30px auto 0;position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 20px}
.featureStrip>div{background:#0b0d11;border:1px solid #8b6036;box-shadow:0 10px 30px #000a;overflow:hidden}
.featureStrip img{display:block;width:100%;height:126px;object-fit:cover;filter:saturate(.85)}
.featureStrip span{display:block;text-align:center;font:700 12px Georgia,serif;letter-spacing:1.5px;color:#e7c38a;padding:15px 4px;background:linear-gradient(#24191a,#0d0d10)}
.ticker{background:#1a1010;border-top:1px solid #8e5233;border-bottom:1px solid #8e5233}
.gameShell{box-shadow:0 25px 100px #000;background:#100f12}
.gameTop{background:linear-gradient(110deg,#30201c,#121318)}
.portrait{background-image:url('assets/shadow-hero.jpg');background-position:center 18%;}
.sceneArt{background-image:url('assets/noir-city.jpg');background-position:center}
@media(max-width:900px){.hero{min-height:700px}.heroFigure{right:-4%;width:60%;opacity:.55}.heroStamp{display:none}.featureStrip{grid-template-columns:repeat(2,1fr)}.heroContent{padding-top:80px}}
@media(max-width:620px){.hero{min-height:660px}.heroFigure{width:90%;right:-45%;opacity:.34}.heroScript{font-size:64px;letter-spacing:-3px}.hero h1{font-size:38px}.hero .intro{font-size:14px}.featureStrip img{height:95px}.featureStrip span{font-size:10px}.heroFooter{font-size:9px;line-height:2}}

/* v1.2: character portraits and readable encounter art */
.portrait{background-image:url('assets/portrait-lamont.jpg');background-position:center 27%;background-size:cover;transition:background-image .2s ease;overflow:hidden}
.portrait.is-shadow{background-image:url('assets/portrait-shadow.jpg');background-position:center 23%}
.portraitShade{background:linear-gradient(0deg,rgba(8,6,6,.96) 0%,transparent 42%)}
.portrait span{text-shadow:0 2px 9px #000,0 0 5px #000}
.sceneArt{background-image:linear-gradient(0deg,rgba(0,0,0,.28),transparent 60%),url('assets/lamont-scene.jpg');background-size:cover;background-position:44% center}
.sceneArt.is-combat{background-image:linear-gradient(0deg,rgba(0,0,0,.35),transparent 65%),url('assets/villains-scene.jpg');background-position:center}
.artOverlay{background:linear-gradient(0deg,rgba(4,5,8,.95),rgba(4,5,8,.72) 55%,transparent);padding:22px 24px 16px}
.artOverlay span,.artOverlay p{text-shadow:0 2px 5px #000}

/* v1.3: true character portraits, centered in the persona frame */
.portrait{background-position:center 30%;background-size:cover}
.portrait.is-shadow{background-position:center 28%}