:root { color-scheme:dark; --ink:#eee9e2; --muted:#c2bdb4; --accent:#bc886c; --edge:#b5a08c78; --panel:#111b20f2; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { width:100%; height:100%; margin:0; }
body { display:grid; place-items:center; overflow:hidden; background:#090f12; color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:2px solid #e9bfa2; outline-offset:3px; }
.game { position:relative; width:min(100vw,177.77778vh); height:min(100vh,56.25vw); min-width:0; min-height:0; overflow:hidden; isolation:isolate; background:#111b20; box-shadow:0 18px 70px #000c; }
.game.blackout { background:#000; }
.game.blackout .background,.game.blackout .sprite,.game.blackout .secondary-sprite,.game.blackout .scene-card { visibility:hidden; }
.background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.73) saturate(.77); transition:opacity .25s ease; }
.background.backdrop-enter { animation:backdrop-enter .52s ease-out both; }
@keyframes backdrop-enter { from { opacity:.35; } to { opacity:1; } }
.stage-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#061017ca 0%,#07111910 55%,#07111958 100%),linear-gradient(90deg,#07101655,transparent 50%,#07101622); }
.sprite { position:absolute; z-index:1; height:113%; width:auto; max-width:none; bottom:-24%; right:9%; filter:drop-shadow(-19px 14px 22px #0009); transition:opacity .16s ease,transform .25s ease; }
.secondary-sprite { position:absolute; z-index:1; height:113%; width:auto; max-width:none; bottom:-24%; left:2%; filter:drop-shadow(19px 14px 22px #0009); }
.secondary-sprite.ono-enter { animation:ono-enter .48s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ono-enter { from { opacity:.5; transform:translateX(175%); } to { opacity:1; transform:translateX(0); } }
.scene-card { position:absolute; z-index:3; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.82) saturate(.9); }
.scene-card.scene-enter { animation:scene-enter .55s ease-out both; }
@keyframes scene-enter { from { opacity:0; } to { opacity:1; } }
.phone-caller { position:absolute; z-index:5; top:21%; right:10%; width:min(22%,220px); padding:9px; border:1px solid #c19b7c9c; background:#10191ce9; box-shadow:0 14px 36px #000a; text-align:center; }
.phone-caller img { display:block; width:100%; aspect-ratio:1; object-fit:cover; filter:saturate(.65); }
.phone-caller span { display:grid; gap:4px; padding:10px 3px 5px; }
.phone-caller strong { color:#f3e8dc; font:500 clamp(18px,1.6vw,26px)/1 Georgia,serif; letter-spacing:.12em; }
.phone-caller small { color:#c9a88e; font:700 clamp(9px,.65vw,12px)/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.18em; }
.sprite.spun { opacity:0; transform:translateX(1.5%); }
.stage-curtain { position:absolute; z-index:4; inset:0; background:#000; opacity:1; pointer-events:none; transition:opacity 1.35s ease; }
.stage-curtain.revealed { opacity:0; }
.game.impact-shake { animation:impact-shake .42s cubic-bezier(.23,.04,.27,1) both; }
@keyframes impact-shake {
  0%,100% { transform:translate(0,0) scale(1); }
  15% { transform:translate(-1.3%,.6%) scale(1.015); }
  31% { transform:translate(1.05%,-.7%) scale(1.015); }
  48% { transform:translate(-.8%,.35%) scale(1.01); }
  66% { transform:translate(.45%,-.25%) scale(1.005); }
  84% { transform:translate(-.2%,0) scale(1.002); }
}
.chapter { position:absolute; z-index:5; left:3.8%; top:5.2%; color:#f0e7dc; font:650 clamp(9px,.8vw,14px)/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.24em; text-transform:uppercase; text-shadow:0 2px 8px #000; }
.chapter::before { content:''; display:inline-block; width:26px; height:1px; margin-right:12px; vertical-align:middle; background:var(--accent); }
.balance-status { position:absolute; z-index:5; left:3.8%; top:12%; color:#e4c2a7; font:650 clamp(10px,.76vw,13px)/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.16em; text-shadow:0 2px 8px #000; }
.beat-banner { position:absolute; z-index:8; top:18%; left:3.8%; display:grid; gap:5px; max-width:min(36%,410px); padding:12px 17px; border:1px solid #d6b28e9c; border-left:3px solid #e4b88c; background:#101c20e8; box-shadow:0 9px 30px #0009; animation:beat-enter .36s ease-out both; }
.beat-banner strong { color:#f1c49d; font:750 clamp(11px,.8vw,14px)/1.1 'Segoe UI',Arial,sans-serif; letter-spacing:.13em; }
.beat-banner span { color:#f0e9df; font:500 clamp(12px,.89vw,15px)/1.35 'Segoe UI',Arial,sans-serif; }
.beat-banner.uncertain { border-color:#90959a9c; border-left-color:#a5aeb1; }
.beat-banner.uncertain strong { color:#c6d0d1; }
@keyframes beat-enter { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.music-status { position:absolute; z-index:5; left:3.8%; top:9%; color:#d7c3b3; font:600 clamp(10px,.77vw,13px)/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.06em; text-shadow:0 2px 8px #000; }
.topbar { position:absolute; z-index:15; right:3.2%; top:3.8%; display:flex; gap:8px; }
.topbar button,.menu-card button,.title-actions button,.log-head button { border:1px solid var(--edge); border-radius:2px; background:#10191dce; color:#f2ebe4; padding:10px 15px; font:650 clamp(10px,.8vw,14px)/1 'Segoe UI',Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.topbar button:hover,.menu-card button:hover,.title-actions button:hover,.log-head button:hover { background:#4c3a32; }
.dialogue { position:absolute; z-index:7; left:3.8%; right:3.8%; bottom:5.5%; min-height:24%; padding:clamp(28px,3.6vw,58px) clamp(27px,4vw,63px) clamp(24px,3vw,47px); border:1px solid var(--edge); background:linear-gradient(105deg,#0b1419fa,#101b20f4 63%,#121a1deb); box-shadow:0 10px 34px #0009,inset 0 1px #ffffff20; backdrop-filter:blur(7px); cursor:pointer; }
.dialogue::before { content:''; position:absolute; top:-1px; left:0; width:170px; height:2px; background:linear-gradient(90deg,var(--accent),transparent); }
.nameplate { position:absolute; top:-25px; left:clamp(23px,3vw,48px); min-width:170px; padding:11px 23px; border:1px solid #baa18baf; color:#f6eee6; background:#1a2529; box-shadow:0 4px 15px #0009; font-size:clamp(16px,1.25vw,22px); letter-spacing:.13em; text-align:center; text-transform:uppercase; }
.nameplate::after { content:''; position:absolute; top:0; right:0; bottom:0; width:3px; background:var(--accent); }
.dialogue p { max-width:100%; max-height:17vh; margin:0 25px 0 0; overflow-y:auto; color:var(--ink); font-size:clamp(18px,1.7vw,29px); line-height:1.46; letter-spacing:.01em; white-space:pre-line; text-shadow:0 1px 2px #0007; }
.continue { position:absolute; right:32px; bottom:19px; color:#d9a686; font:700 22px/1 Arial,sans-serif; animation:pulse 1.5s infinite alternate; }
.choice-panel { position:absolute; z-index:9; top:50%; left:50%; transform:translate(-50%,-55%); width:min(68%,850px); padding:24px; border:1px solid var(--edge); background:#0a1319ed; box-shadow:0 20px 60px #000d; backdrop-filter:blur(10px); }
.choice-panel h2 { margin:0 0 19px; color:#f3e8dc; font-size:clamp(20px,1.6vw,29px); font-weight:400; line-height:1.25; }
.choice-buttons { display:grid; gap:10px; max-height:52vh; overflow-y:auto; }
.choice-buttons button { width:100%; min-height:52px; padding:13px 18px; border:1px solid #9e8672b3; border-radius:1px; background:#172127ed; color:#f1ede7; text-align:left; font:500 clamp(15px,1.1vw,19px)/1.35 Georgia,serif; }
.choice-buttons button::before { content:'◆'; display:inline-block; margin-right:16px; color:var(--accent); font-size:10px; vertical-align:middle; }
.choice-buttons button:hover,.choice-buttons button:focus-visible { background:#49392f; border-color:#dfaf8f; }
.choice-buttons button.progress-choice { background:#2a3431ed; border-color:#b6a58d; }
.choice-buttons button.progress-choice::before { content:'➜'; color:#d9ae84; font-size:15px; }
.choice-buttons button.progress-choice:hover,.choice-buttons button.progress-choice:focus-visible { background:#4a4938; border-color:#e7bb92; }
.choice-buttons button:disabled { cursor:default; opacity:.42; }
.choice-panel:has(.investigation-evidence:not([hidden])) { width:min(78%,980px); max-height:86%; overflow-y:auto; }
.investigation-info { margin:0 0 15px; color:#d2c7bc; font:500 clamp(13px,1vw,16px)/1.45 'Segoe UI',Arial,sans-serif; }
.investigation-evidence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:16px; }
.investigation-evidence .evidence { min-height:110px; padding:12px; border:1px solid #9e8672b3; background:#182329ee; color:#f1ede7; text-align:left; font:500 14px/1.4 'Segoe UI',Arial,sans-serif; }
.investigation-evidence .evidence:hover:not(:disabled),.investigation-evidence .evidence:focus-visible { background:#49392f; border-color:#dfaf8f; }
.investigation-evidence .evidence.found { border-color:#d2ad89; background:#263028; }
.investigation-evidence .evidence strong { display:block; color:#f4dfc8; margin-bottom:8px; letter-spacing:.04em; }
.investigation-evidence .evidence span { display:block; color:#ddd5cc; }
.deduction-label,.case-heading { color:#d5aa8e; font:700 12px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.choice-buttons .skip-investigation { color:#bdb8b1; border-color:#656768; }
.case-heading { margin-top:12px; }
.custom-answer { display:grid; gap:12px; }
.custom-answer label { color:#c8aa94; font:700 12px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.custom-answer textarea { width:100%; resize:vertical; padding:13px; border:1px solid var(--edge); background:#0b151b; color:var(--ink); font:18px/1.4 Georgia,serif; }
.custom-answer button { justify-self:end; padding:12px 24px; border:1px solid #d5ac8d; background:#af7c60; color:#101313; font:700 13px/1 'Segoe UI',Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.screen { position:absolute; z-index:20; inset:0; display:grid; place-items:center; background:#071015d9; backdrop-filter:blur(8px); }
.title-screen { background:linear-gradient(90deg,#020a10f2 0%,#041019d4 29%,#0410194d 58%,#020a101f 100%),url('assets/backgrounds/title-key-art.png') center/cover no-repeat; }
.title-card { width:min(540px,84%); margin-right:auto; margin-left:9%; }
.kicker { color:#d0a283; font:700 clamp(10px,.82vw,15px)/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.27em; text-transform:uppercase; }
.title-card h1 { margin:18px 0 16px; color:#f3eae0; font-size:clamp(60px,6.6vw,120px); line-height:.82; font-weight:500; letter-spacing:-.055em; text-shadow:0 4px 16px #000a; }
.title-card h1 em { color:#c69b80; font-style:normal; }
.title-rule { width:110px; height:2px; margin:30px 0 26px; background:linear-gradient(90deg,#d9a989,transparent); }
.title-card p { margin:0 0 34px; color:#d7d0c6; font-size:clamp(18px,1.35vw,25px); line-height:1.4; }
.title-card .title-hint { margin-top:-14px; margin-bottom:24px; color:#b9b9b4; font:500 clamp(13px,1vw,16px)/1.5 'Segoe UI',Arial,sans-serif; }
.title-card label { display:block; margin-bottom:8px; color:#d7d0c6; font:600 13px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.06em; }
.title-card label span { color:#a5a7a6; font-weight:400; }
.title-card input { display:block; width:min(100%,370px); padding:12px 15px; border:1px solid var(--edge); border-radius:2px; background:#10191edc; color:#fff; font:17px Georgia,serif; }
.title-actions { display:flex; flex-wrap:wrap; gap:12px; margin:21px 0 27px; }
.title-actions button { min-width:148px; padding:15px 24px; }
.title-actions .primary,.menu-card .primary { background:#af7c60; border-color:#dbad8c; color:#101313; }
.title-actions .primary:hover,.menu-card .primary:hover { background:#d5a183; }
.title-card small { color:#aaa9a4; font:12px/1.4 'Segoe UI',Arial,sans-serif; }
.email-screen { background:linear-gradient(#061014bb,#061014d6),url('assets/backgrounds/player-home-afternoon.png') center/cover no-repeat; backdrop-filter:none; }
.email-card { width:min(850px,88%); max-height:88%; overflow-y:auto; padding:clamp(22px,2.5vw,40px); background:#e8e1d5; color:#20252a; box-shadow:0 18px 70px #000b; font-family:'Segoe UI',Arial,sans-serif; }
.email-toolbar,.service-top { display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid #8c8b8580; padding-bottom:14px; color:#59636b; font:700 11px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.18em; }
.email-toolbar button,.service-top button { border:0; background:transparent; color:inherit; cursor:pointer; font:700 11px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.email-meta { display:grid; grid-template-columns:52px 1fr; gap:7px 13px; margin:22px 0; font-size:13px; }
.email-meta span { color:#788087; }
.email-meta strong { font-weight:600; }
.email-card h2 { margin:0 0 16px; font:500 clamp(25px,2vw,36px)/1.18 Georgia,serif; }
.email-card>p { margin:0 0 22px; max-width:66ch; white-space:pre-line; font:16px/1.6 Georgia,serif; }
.attachment { width:100%; padding:14px 16px; border:1px solid #aaa397; background:#dad2c5; color:#273039; text-align:left; font:650 13px/1.3 'Segoe UI',Arial,sans-serif; }
.attachment:hover { background:#d0c5b5; }
.nda-detail { padding:15px 16px; border:1px solid #aaa397; border-top:0; background:#f4eee5; color:#3d454a; font:14px/1.5 'Segoe UI',Arial,sans-serif; }
.badge-form { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:13px 22px; margin-top:28px; padding-top:22px; border-top:1px solid #a5a398; }
.badge-form label { grid-column:1; font:700 12px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.badge-form label span { color:#667179; font-weight:400; text-transform:none; letter-spacing:0; }
.badge-form input { grid-column:1; width:100%; min-height:44px; padding:10px 12px; border:1px solid #8b8f8e; background:#fffdf8; color:#182027; font:17px Georgia,serif; }
.badge-preview { grid-column:2; grid-row:1 / span 2; display:grid; gap:6px; min-height:81px; padding:14px 18px; border:1px solid #b5aea1; border-left:5px solid #aa765a; background:#f8f4ed; box-shadow:0 4px 12px #0002; }
.badge-preview small { color:#697078; font:700 10px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.1em; }
.badge-preview strong { color:#20252a; font:600 22px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.05em; overflow-wrap:anywhere; }
.badge-form button { grid-column:1 / -1; justify-self:end; margin-top:6px; padding:14px 20px; border:0; background:#242d31; color:#f8f4eb; font:700 13px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.badge-form button:hover { background:#574139; }
.service-screen { background:#071015ba; }
.mission-screen { background:#071015d9; }
.mission-card { width:min(1110px,93%); max-height:92%; overflow-y:auto; padding:clamp(18px,2.35vw,36px); border:1px solid #b5a08c91; background:#10191df4; box-shadow:0 22px 65px #000b; }
.mission-heading { margin:17px 0 15px; }
.mission-heading>span { color:#d8a889; font:700 11px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.16em; }
.mission-heading h2 { margin:5px 0 7px; color:#f4ece2; font:500 clamp(29px,2.6vw,45px)/1.1 Georgia,serif; }
.mission-heading p { margin:0; max-width:830px; color:#d5ccc2; font:14px/1.45 'Segoe UI',Arial,sans-serif; }
.mission-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr); gap:16px; }
.mission-stage { position:relative; min-height:280px; aspect-ratio:16/9; overflow:hidden; border:2px solid #ac8b6a; box-shadow:inset 0 0 0 5px #172124,0 8px 22px #0009; }
.mission-stage.casino { background:linear-gradient(#06141b38,#06141b50),url('assets/backgrounds/casino-patrol-map.png') center/cover; }
.mission-stage.vinny { background:linear-gradient(#08141a35,#08141a4c),url('assets/backgrounds/vinny-waterfront-map.png') center/cover; }
.mission-stage::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 30px #000a; }
.mission-zone { position:absolute; transform:translate(-50%,-50%); min-width:112px; padding:11px 8px; border:1px solid #c7a883; background:#142126e8; color:#f0e5d8; text-align:center; font:750 11px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 5px 18px #000a; }
.mission-zone::before { content:''; position:absolute; inset:-8px; border:1px solid #d4b48c35; pointer-events:none; }
.mission-zone.door { left:20%; top:25%; }
.mission-zone.cashier { left:78%; top:26%; }
.mission-zone.roulette { left:50%; top:72%; }
.mission-zone.crowd { left:21%; top:62%; }
.mission-zone.paul { left:48%; top:35%; }
.mission-zone.backroom { left:80%; top:60%; }
.mission-token { position:absolute; z-index:2; transform:translate(-50%,-50%); padding:6px 8px; border:2px solid #ead3af; border-radius:50px; background:#533e35; color:#fff8ed; font:800 10px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.05em; text-shadow:0 1px #000; box-shadow:0 3px 12px #000c; transition:left .28s ease,top .28s ease; }
.mission-token.moth,.mission-token.vinny { border-color:#9bc8cf; background:#1d3b45; }
.mission-token.paul { border-color:#ddbb83; background:#62462f; }
.mission-side { display:flex; flex-direction:column; gap:9px; min-height:280px; }
.mission-status { padding:12px; border:1px solid #8b80746d; background:#172528; color:#f0e5d9; font:600 14px/1.4 Georgia,serif; }
.mission-status strong { display:block; margin-bottom:6px; color:#e6b998; font:750 11px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.mission-options { display:grid; gap:7px; }
.mission-options button { min-height:43px; padding:9px 12px; border:1px solid #aa8c72; background:#273235; color:#f3e8dd; text-align:left; font:600 13px/1.3 'Segoe UI',Arial,sans-serif; }
.mission-options button:hover,.mission-options button:focus-visible { border-color:#f1c49e; background:#5a4538; }
.mission-note { margin:auto 0 0; min-height:45px; padding:9px 11px; border-left:3px solid #c69978; background:#202a2a; color:#e9dcd0; font:13px/1.35 Georgia,serif; }
.mission-meter { display:flex; gap:5px; margin-top:9px; }
.mission-meter i { display:block; flex:1; height:8px; border:1px solid #8d7f70; background:#273032; }
.mission-meter i.on { background:#d1a377; border-color:#e3bd93; }
.wardrobe-screen { background:linear-gradient(90deg,#071015dc,#071015b7),url('assets/backgrounds/player-home-afternoon.png') center/cover no-repeat; }
.wardrobe-card { width:min(1050px,92%); max-height:91%; overflow-y:auto; padding:clamp(21px,2.6vw,40px); border:1px solid #b5a08c91; background:#11191df2; box-shadow:0 22px 65px #000b; }
.wardrobe-heading { margin:18px 0 22px; }
.wardrobe-heading>span { color:#d8a889; font:700 11px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.16em; }
.wardrobe-heading h2 { margin:5px 0 7px; color:#f4ece2; font:500 clamp(29px,2.6vw,45px)/1.1 Georgia,serif; }
.wardrobe-heading p { max-width:720px; margin:0; color:#d5ccc2; font:14px/1.45 'Segoe UI',Arial,sans-serif; }
.wardrobe-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:18px; }
.wardrobe-layout h3 { margin:0 0 11px; color:#e6c2a8; font:500 18px/1.1 Georgia,serif; }
.wardrobe-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.wardrobe-option { display:grid; justify-items:center; align-content:start; gap:5px; min-height:208px; padding:11px 8px; border:1px solid #8b8074; background:#1e292b; color:#f1e8df; text-align:center; }
.wardrobe-option:hover,.wardrobe-option:focus-visible,.wardrobe-option.selected { border-color:#e6b998; background:#493a30; }
.wardrobe-option img { display:block; width:min(100%,115px); height:126px; object-fit:contain; filter:drop-shadow(0 6px 6px #0008); }
.wardrobe-option strong { font:600 15px/1.1 Georgia,serif; }
.wardrobe-option small { color:#d6c9be; font:11px/1.25 'Segoe UI',Arial,sans-serif; }
.wardrobe-side { display:grid; align-content:start; gap:9px; }
.wardrobe-preview { display:grid; justify-items:center; min-height:183px; padding:9px; border:1px solid #89735f; background:#293232; text-align:center; }
.wardrobe-preview img { width:80px; height:105px; object-fit:contain; }
.wardrobe-preview strong { align-self:end; color:#f2ddc8; font:600 17px/1.2 Georgia,serif; }
.wardrobe-preview p { margin:3px 0 0; color:#d5c9bf; font:12px/1.3 'Segoe UI',Arial,sans-serif; }
.wardrobe-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.wardrobe-details button { min-height:44px; padding:6px; border:1px solid #8b8074; background:#263032; color:#f0e8df; font:600 11px/1.2 'Segoe UI',Arial,sans-serif; }
.wardrobe-details button:hover,.wardrobe-details button.selected { border-color:#e6b998; background:#68503f; }
#wardrobe-finish { min-height:43px; margin-top:9px; padding:9px 12px; border:1px solid #d5ac8d; background:#af7c60; color:#101313; font:700 12px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
#wardrobe-finish:disabled { opacity:.45; cursor:default; }
.service-card { width:min(1060px,92%); max-height:91%; overflow-y:auto; padding:clamp(21px,2.6vw,40px); border:1px solid #b5a08c91; background:#11191deF; box-shadow:0 22px 65px #000b; }
.service-top { color:#c9a98e; border-color:#aaa29469; }
.overlay-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.overlay-actions button { padding:7px 4px; }
.overlay-actions button:hover,.overlay-actions button:focus-visible { color:#fff3df; text-decoration:underline; text-underline-offset:4px; }
.mission-options button.risky { border-color:#aa7773; background:#392b2d; }
.mission-options button.risky:hover,.mission-options button.risky:focus-visible { border-color:#efaca3; background:#674045; }
.service-card h2 { margin:19px 0 8px; color:#f4ece2; font:500 clamp(27px,2.4vw,43px)/1.2 Georgia,serif; }
.service-card>p { margin:0 0 15px; color:#d4ccc2; font:15px/1.45 'Segoe UI',Arial,sans-serif; }
.service-progress { color:#d2a889; font:700 11px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.service-tasks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:15px 0; }
.service-task { display:grid; align-content:start; gap:8px; min-height:108px; padding:14px; border:1px solid #8b8074; background:#20292b; color:#f1e8df; text-align:left; }
.service-task:hover,.service-task.active { border-color:#e6b998; background:#493a30; }
.service-task.completed { border-color:#a9b892; }
.service-task span { color:#d5a889; font-size:22px; line-height:1; }
.service-task strong { font:600 15px/1.2 Georgia,serif; }
.service-task small { color:#bcbab1; font:700 10px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.11em; }
.service-detail { min-height:150px; padding:15px 19px; border:1px solid #8b80746d; background:#0d1519d6; }
.service-detail h3 { margin:0 0 6px; color:#e8c2a8; font:500 20px/1.2 Georgia,serif; }
.service-detail p { margin:0 0 11px; color:#dad2c8; font:14px/1.4 'Segoe UI',Arial,sans-serif; }
.service-detail .service-result { color:#f1e8de; font-family:Georgia,serif; }
.service-options { display:flex; flex-wrap:wrap; gap:9px; }
.service-options button,.service-finish { min-height:38px; padding:9px 13px; border:1px solid #ab8c75; background:#272d2d; color:#f1e8df; text-align:left; font:600 13px/1.25 'Segoe UI',Arial,sans-serif; }
.service-options button:hover,.service-options button.chosen { background:#68503f; border-color:#e2b899; }
.service-finish { display:block; margin:16px 0 0 auto; background:#af7c60; color:#141a1a; text-transform:uppercase; letter-spacing:.07em; }
.service-finish:disabled { opacity:.45; cursor:default; }
.service-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,30%); gap:16px; margin-top:13px; align-items:stretch; }
.service-map { position:relative; width:100%; aspect-ratio:5/3; overflow:hidden; border:2px solid #aa8a6a; background:#433934 url('assets/service/service-room.svg') center/100% 100% no-repeat; box-shadow:inset 0 0 0 4px #271f1c,0 8px 22px #0009; }
.service-map:focus-visible { outline:2px solid #f0c394; outline-offset:3px; }
.service-tasks { position:absolute; z-index:2; inset:0; display:block; margin:0; max-height:none; overflow:visible; }
.service-placements { position:absolute; z-index:1; inset:0; pointer-events:none; }
.service-placements img { position:absolute; transform:translate(-50%,-50%); width:5%; min-width:17px; aspect-ratio:1; object-fit:contain; filter:drop-shadow(1px 3px 2px #0009); }
.service-placements img.tray-map-item { width:4%; min-width:14px; }
.service-hotspot { position:absolute; display:grid; justify-items:center; align-content:center; gap:1px; transform:translate(-50%,-50%); width:9%; min-width:34px; aspect-ratio:1; padding:3px; border:2px solid #bd9874; border-radius:5px; background:#1e2525e8; color:#f8e7d4; box-shadow:0 3px 0 #171615,0 6px 12px #0008; }
.service-hotspot:hover,.service-hotspot:focus-visible,.service-hotspot.active { border-color:#f3c896; background:#534137; outline:none; }
.service-hotspot img { display:block; width:78%; height:64%; object-fit:contain; image-rendering:pixelated; }
.service-hotspot small { max-width:100%; overflow:hidden; color:#fff2df; text-overflow:ellipsis; white-space:nowrap; font:700 clamp(7px,.65vw,10px)/1 'Segoe UI',Arial,sans-serif; text-shadow:0 1px #000; }
.service-hotspot.person { width:9.5%; border-color:#8b7d72; background:#202324f2; }
.service-hotspot.person.served { border-color:#b6d49a; background:#283c31f2; }
.service-hotspot.person.favorite { border-color:#f5d493; background:#3c4330f2; box-shadow:0 0 0 3px #e7ba6766,0 5px 16px #0009; }
.service-face { color:#f2c3a0; font:800 clamp(10px,1.25vw,20px)/1.1 'Consolas',monospace; letter-spacing:-.09em; }
.service-hotspot.person.served .service-face { color:#d2efba; }
.service-hotspot.person.favorite .service-face { color:#ffe6aa; }
.service-player { position:absolute; z-index:3; display:grid; place-items:center; transform:translate(-50%,-50%); width:7%; aspect-ratio:1; border:2px solid #e3c091; border-radius:50%; background:#101a1def; box-shadow:0 0 0 3px #101a1d91,0 5px 10px #000a; color:#ffe0b7; pointer-events:none; transition:left .15s linear,top .15s linear; }
.service-player span { font-size:clamp(15px,1.6vw,26px); line-height:1; }
.service-player small { position:absolute; top:100%; margin-top:2px; color:#fff1d8; font:800 clamp(7px,.62vw,10px)/1 'Segoe UI',Arial,sans-serif; text-shadow:0 2px 3px #000; }
.service-sidebar { display:flex; flex-direction:column; min-height:0; gap:9px; }
.service-inventory { border:1px solid #917e68; background:#1c2526; padding:9px 11px; }
.service-inventory strong { display:block; color:#e6b998; font:750 10px/1 'Segoe UI',Arial,sans-serif; letter-spacing:.13em; }
#service-carry { display:flex; align-items:center; gap:6px; min-height:29px; margin-top:6px; color:#e6e0d6; font:12px/1.2 'Segoe UI',Arial,sans-serif; }
.service-tray-display { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,54px); gap:3px 5px; margin-top:8px; padding:9px 13px; background:#56402e url('assets/service/tray-tabletop.svg') center/100% 100% no-repeat; border:1px solid #b08a62; border-radius:5px; box-shadow:inset 0 2px 8px #0006; }
.tray-item,.tray-slot { min-width:0; min-height:0; border:1px solid transparent; border-radius:50%; background:transparent; }
.tray-item { display:grid; justify-items:center; align-content:center; gap:1px; padding:0 2px; color:#f7e9d5; cursor:pointer; }
.tray-item img { width:36px; height:36px; object-fit:contain; filter:drop-shadow(1px 2px 2px #0009); }
.tray-item small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff5e3; font:700 8px/1 'Segoe UI',Arial,sans-serif; text-shadow:0 1px 3px #000; }
.tray-item:hover,.tray-item:focus-visible,.tray-item.selected { border-color:#f3d3a2; background:#e0aa6a25; outline:none; }
.tray-slot { width:38px; height:38px; place-self:center; border:1px dashed #dcc29a73; background:#211a1566; }
.carry-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border:1px solid #746b5f; background:#303b3b; }
.carry-chip img { width:22px; height:22px; object-fit:contain; }
.service-detail { flex:1; min-height:142px; max-height:220px; overflow-y:auto; padding:11px 13px; }
.service-detail h3 { font-size:18px; }
.service-detail p { font-size:13px; }
.service-detail .service-option { display:flex; align-items:center; gap:9px; width:100%; min-height:44px; margin:5px 0; padding:5px 9px; border:1px solid #987b62; background:#283333; color:#f4e7d7; text-align:left; font:600 12px/1.2 'Segoe UI',Arial,sans-serif; }
.service-detail .service-option:hover,.service-detail .service-option:focus-visible { border-color:#e8bf95; background:#604939; }
.service-detail .service-option img { width:34px; height:34px; object-fit:contain; image-rendering:pixelated; }
#service-carry img { width:29px; height:29px; object-fit:contain; }
.service-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.service-options button { display:grid; justify-items:center; align-content:center; gap:4px; min-height:62px; padding:5px; text-align:center; font-size:11px; }
.service-options button img { width:35px; height:35px; object-fit:contain; }
.service-options button:disabled { opacity:.45; cursor:default; }
.service-controls { display:grid; justify-items:center; gap:3px; }
.service-controls>div { display:flex; gap:4px; }
.service-controls button { width:35px; height:27px; border:1px solid #987b62; background:#273334; color:#f5e8d9; font:800 15px/1 'Segoe UI',Arial,sans-serif; }
.service-controls button:hover { background:#594538; }
.service-finish { width:100%; margin:0; text-align:center; }
.end-card,.menu-card,.log-card { width:min(620px,85%); padding:clamp(28px,4vw,60px); border:1px solid var(--edge); background:#111c21f5; box-shadow:0 22px 60px #000b; }
.end-card h2,.menu-card h2 { margin:15px 0 18px; color:#f1e7dc; font-size:clamp(35px,3.5vw,65px); font-weight:400; }
.end-card p { color:#ded8d0; font-size:clamp(17px,1.3vw,22px); line-height:1.5; }
.end-stats { margin-top:23px; color:#c8a48b; font:650 13px/1.6 'Segoe UI',Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.menu-card { display:grid; gap:12px; width:min(460px,85%); }
.menu-card button { width:100%; min-height:47px; }
.dev-screen { z-index:26; }
.dev-card { width:min(940px,92%); max-height:88%; display:flex; flex-direction:column; gap:12px; padding:clamp(20px,2.4vw,36px); border:1px solid var(--edge); background:#111c21f7; box-shadow:0 22px 60px #000b; }
.dev-head { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.dev-head h2 { margin:8px 0 0; color:#f1e7dc; font-size:clamp(26px,2.5vw,42px); font-weight:400; }
.dev-head button,.dev-chapter-buttons button { border:1px solid var(--edge); background:#172127; color:#f2ebe4; cursor:pointer; font:600 12px/1.25 'Segoe UI',Arial,sans-serif; }
.dev-head button { padding:10px 16px; }
.dev-card p { margin:0; color:#c9c2ba; font:13px/1.4 'Segoe UI',Arial,sans-serif; }
.dev-chapter-list { overflow-y:auto; display:grid; gap:20px; padding:4px 8px 6px 0; }
.dev-group h3 { margin:0 0 9px; color:#d5a98c; font:700 13px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.dev-chapter-buttons { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; }
.dev-chapter-buttons button { min-height:42px; padding:10px 12px; text-align:left; }
.dev-head button:hover,.dev-chapter-buttons button:hover { background:#4c3a32; border-color:#dfaf8f; }
.volume-control { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#d7c3b3; font:600 13px/1.3 'Segoe UI',Arial,sans-serif; letter-spacing:.05em; }
.volume-control input { width:55%; accent-color:#c69b80; }
.log-card { width:min(800px,88%); max-height:82%; display:flex; flex-direction:column; }
.log-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.log-head h2 { font-size:34px; font-weight:400; margin:0 0 19px; }
.log-list { overflow-y:auto; display:grid; gap:16px; padding-right:10px; }
.log-entry { border-bottom:1px solid #ffffff24; padding-bottom:15px; }
.log-entry strong { display:block; margin-bottom:6px; color:#d4a687; font:700 12px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.log-entry p { margin:0; color:#e2ddd7; font-size:17px; line-height:1.5; white-space:pre-line; }
.toast { position:absolute; z-index:30; top:11%; right:3.5%; opacity:0; pointer-events:none; padding:11px 17px; border:1px solid #d3b69b8c; background:#132126ef; color:#f3e9dc; font:600 13px/1 'Segoe UI',Arial,sans-serif; transition:opacity .2s; }
.toast.visible { opacity:1; }
.fade { position:absolute; z-index:40; inset:0; background:#05090c; opacity:0; pointer-events:none; transition:opacity .55s ease; }
.fade.active { opacity:1; }
@keyframes pulse { from { opacity:.4; transform:translateY(-2px); } to { opacity:1; transform:translateY(2px); } }
@media (max-aspect-ratio: 4/3) {
  .game { width:100vw; height:100vh; }
  .sprite { height:83%; bottom:20%; right:-11%; }
  .secondary-sprite { height:83%; bottom:20%; left:-11%; }
  .chapter { left:4%; top:3%; }
  .music-status { left:4%; top:6.5%; }
  .balance-status { left:4%; top:9.5%; }
  .beat-banner { top:18%; left:4%; max-width:61%; padding:9px 11px; }
  .phone-caller { top:19%; right:5%; width:min(32%,160px); }
  .topbar { top:8%; right:4%; }
  .topbar button { padding:8px 9px; font-size:10px; }
  .dialogue { left:3%; right:3%; bottom:5%; min-height:29%; padding:31px 20px 32px; }
  .dialogue p { max-height:23vh; margin-right:14px; font-size:clamp(18px,4.5vw,25px); }
  .nameplate { top:-20px; padding:8px 18px; min-width:125px; font-size:15px; }
  .choice-panel { width:91%; max-height:60%; overflow-y:auto; }
  .choice-panel:has(.investigation-evidence:not([hidden])) { width:94%; max-height:70%; }
  .investigation-evidence { grid-template-columns:1fr; }
  .investigation-evidence .evidence { min-height:0; }
  .title-card { width:82%; margin:0; }
  .title-card h1 { font-size:clamp(55px,12vw,95px); }
  .email-card { width:93%; max-height:94%; }
  .mission-card { width:94%; max-height:94%; }
  .mission-layout { grid-template-columns:1fr; }
  .mission-stage { min-height:180px; }
  .mission-zone { min-width:75px; font-size:8px; padding:7px 5px; }
  .mission-side { min-height:0; }
  .wardrobe-card { width:94%; max-height:94%; }
  .wardrobe-layout { grid-template-columns:1fr; }
  .wardrobe-option { min-height:150px; }
  .wardrobe-option img { height:85px; }
  .wardrobe-preview { min-height:110px; }
  .wardrobe-preview img { height:60px; }
  .badge-form { grid-template-columns:1fr; }
  .badge-preview { grid-column:1; grid-row:auto; }
  .service-card { width:94%; max-height:94%; }
  .service-layout { grid-template-columns:1fr; }
  .service-sidebar { gap:7px; }
  .service-detail { max-height:none; }
  .service-hotspot small { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }