/* 🐗🌙 Boar's Night — black, and the dark red of being watched. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #07080f; color: #e8e2dc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #d9a520; color: #fff; padding: 10px 16px; font-weight: 800; z-index: 50; }
.skip-link:focus { left: 0; }
#screen { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; background: #07080f; }

/* the edges of the screen go red as one comes close */
#dread { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.9) 100%); }
/* hiding: looking out through the slats */
#hidebox { position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(0deg, rgba(8,5,3,.97) 0 34px, rgba(8,5,3,0) 34px 52px), radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 90%); }
#hidebox[hidden] { display: none; }
/* caught */
#scare { position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,40,20,.15), rgba(160,0,0,.75)); }
#scare.on { animation: scare 2s ease-out forwards; }
/* a jumpscare: white, then red, then the face */
#jumpflash { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: 0; }
#jumpflash.on { animation: jumpflash 1s ease-out forwards; }
@keyframes jumpflash { 0% { opacity: 1; background: rgba(255,255,255,.9); } 6% { opacity: 1; background: rgba(255,30,20,.55); } 30% { opacity: .5; background: rgba(160,0,0,.35); } 100% { opacity: 0; background: rgba(0,0,0,0); } }
@keyframes scare { 0% { opacity: 0; } 8% { opacity: 1; } 60% { opacity: .85; } 100% { opacity: 1; background: #000; } }

.bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; z-index: 20; pointer-events: none; }
.bar > * { pointer-events: auto; }
.home { color: #e8e2dc; text-decoration: none; font-weight: 800; background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); }
.tag { margin-left: auto; font-size: 12px; opacity: .55; }
.icon { width: 42px; height: 42px; border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); color: #e8e2dc; font-size: 18px; cursor: pointer; }
.icon:focus-visible, .btn:focus-visible, .night:focus-visible, .home:focus-visible { outline: 3px solid #ff5a3c; outline-offset: 2px; }

/* ---- while you play ---- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud-l { position: absolute; left: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-r { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pill { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 15px; }
.pill.clock { font-size: 24px; font-variant-numeric: tabular-nums; color: #f3d9a4; letter-spacing: 1px; }
.pill.lamp { display: flex; align-items: center; gap: 8px; }
.bar2 { width: 90px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; display: inline-block; }
.bar2 i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f2b84a, #ffe39a); }
.bar2 i.low { background: #d9a520; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
.stamina { position: absolute; left: 50%; bottom: 26px; width: 180px; height: 6px; margin-left: -90px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; opacity: 0; transition: opacity .3s; }
.stamina.show { opacity: 1; }
.stamina i { display: block; height: 100%; background: #9fd6ff; }
.pausebtn { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); pointer-events: auto; z-index: 21; }
.msg { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-weight: 900; font-size: clamp(18px, 3.2vw, 30px); color: #f3d9a4;
  text-shadow: 0 2px 0 #000, 0 0 20px rgba(0,0,0,.9); padding: 0 20px; }
.prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 15px; }
.cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.45); }
#intro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(0,0,0,.72); animation: introfade 3.6s ease-in-out forwards; }
#intro[hidden] { display: none; }
@keyframes introfade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.i-night { font-size: clamp(44px, 9vw, 96px); font-weight: 900; letter-spacing: 6px; color: #d9a520; text-shadow: 0 0 30px rgba(220,170,40,.6); }
.i-name { font-size: clamp(20px, 3.4vw, 32px); font-weight: 800; margin-top: 4px; }
.i-blurb { font-size: 16px; opacity: .75; margin-top: 10px; }

/* ---- fingers ---- */
#touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#touch[hidden] { display: none; }
.lookpad { position: absolute; right: 0; top: 70px; bottom: 0; width: 55%; pointer-events: auto; touch-action: none; }
.stick { position: absolute; left: 24px; bottom: 24px; width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.25); pointer-events: auto; touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.55); }
.buttons { position: absolute; right: 18px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
.buttons button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 26px; touch-action: none; }
.buttons button.on { border-color: #9fd6ff; background: rgba(60,110,160,.5); }

/* ---- screens ---- */
#screens { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 64px 14px 14px; overflow-y: auto; pointer-events: none; }
#screens[hidden] { display: none; }
.screen { display: none; width: 100%; max-width: 760px; pointer-events: auto; }
.screen.active { display: block; }
.panel { background: rgba(6,5,8,.82); border: 1px solid rgba(255,196,60,.45); border-radius: 18px; padding: 20px 22px; box-shadow: 0 0 60px rgba(140,0,0,.35); }
.panel.center { text-align: center; }
.logo { margin: 0; text-align: center; font-size: clamp(42px, 9vw, 84px); font-weight: 900; letter-spacing: 3px; line-height: 1; color: #e8e2dc;
  text-shadow: 0 0 18px rgba(0,0,0,.9), 0 4px 0 #2a0505; }
.logo span { color: #d9a520; text-shadow: 0 0 24px rgba(240,190,60,.7), 0 4px 0 #2a0505; }
.lede { text-align: center; margin: 12px 0 6px; font-size: 17px; opacity: .9; font-style: italic; }
.warn { text-align: center; margin: 0 0 14px; font-size: 14px; color: #f3d9a4; }
.loading { text-align: center; opacity: .7; }
.loading[hidden] { display: none; }
.nights { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.night { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,196,60,.6);
  background: linear-gradient(180deg, rgba(60,10,12,.7), rgba(20,4,6,.7)); color: #e8e2dc; font: inherit; cursor: pointer; }
.night:hover:not(:disabled) { background: linear-gradient(180deg, rgba(90,14,16,.8), rgba(30,6,8,.8)); }
.night .nn { font-size: 12px; letter-spacing: 3px; color: #d9a520; font-weight: 900; }
.night .st { grid-row: span 2; align-self: center; color: #f3d9a4; font-size: 17px; }
.night .st i { color: rgba(255,255,255,.18); font-style: normal; }
.night .nm { font-weight: 900; font-size: 18px; }
.night .bl { grid-column: 1 / span 2; font-size: 13px; opacity: .75; }
.night.locked, .night:disabled { opacity: .45; cursor: not-allowed; }
.how { margin: 16px 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.75; opacity: .88; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font: 12px/18px system-ui, sans-serif; text-align: center; }
h2 { margin: 4px 0 8px; font-size: clamp(22px, 4vw, 34px); color: #f3d9a4; }
.stars { font-size: 50px; margin: 6px 0; color: #f3d9a4; letter-spacing: 6px; }
.stars i { color: rgba(255,255,255,.15); font-style: normal; }
.detail { opacity: .88; margin: 8px 0; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.btn { font: inherit; font-weight: 900; font-size: 17px; padding: 12px 18px; border-radius: 12px; border: 1px solid #d9a520; background: linear-gradient(180deg, #a01e22, #6a1013); color: #fff; cursor: pointer; }
.btn.big { font-size: 19px; padding: 14px 22px; }
.btn.ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
.btn[hidden] { display: none; }
.nogl { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #3a1020; padding: 12px 16px; border-radius: 12px; z-index: 30; }
.pvsb-cookie-note { margin: 12px 0 0; font-size: 12px; opacity: .6; text-align: center; }

/* ---- the heist's own ---- */
#alarm { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(255,20,20,.55) 100%); }
#alarm.on { animation: alarm .6s ease-in-out infinite alternate; }
@keyframes alarm { from { opacity: .2; } to { opacity: 1; } }
#caughtfx { position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: 0; background: rgba(20,40,120,.6); }
#caughtfx.on { animation: caughtfx 2.2s ease-out forwards; }
@keyframes caughtfx { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 1; background: #000; } }
.pill.prize.got { color: #ffe39a; border-color: #ffc63a; box-shadow: 0 0 12px rgba(255,198,58,.6); }
.seen { display: flex; align-items: center; gap: 8px; font: 800 11px system-ui, sans-serif; letter-spacing: 1px; color: #cbd; }
.seen b { width: 110px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; display: block; }
.seen i { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, #3a4a8a, #ffe39a); transition: width .2s; }
.heists { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.heist { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,196,60,.55);
  background: linear-gradient(180deg, rgba(40,32,10,.75), rgba(14,12,6,.75)); color: #eee; font: inherit; cursor: pointer; }
.heist:hover:not(:disabled) { background: linear-gradient(180deg, rgba(70,54,14,.85), rgba(24,18,6,.85)); }
.heist .hn { font-size: 12px; letter-spacing: 3px; color: #d9a520; font-weight: 900; }
.heist .st { grid-row: span 2; align-self: center; color: #f3d9a4; font-size: 17px; }
.heist .st i { color: rgba(255,255,255,.18); font-style: normal; }
.heist .nm { font-weight: 900; font-size: 18px; }
.heist .bl { grid-column: 1 / span 2; font-size: 13px; opacity: .75; }
.heist:disabled { opacity: .45; cursor: not-allowed; }
.i-n { font-size: clamp(44px, 9vw, 96px); font-weight: 900; letter-spacing: 6px; color: #d9a520; text-shadow: 0 0 30px rgba(220,170,40,.6); }
.buttons { display: grid; grid-template-columns: 64px 64px; }
.heist:focus-visible { outline: 3px solid #ffe39a; outline-offset: 2px; }

/* ---- 🎒 the gadget bar ---- */
.gadgets { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 13; display: flex; gap: 8px; pointer-events: auto; }
.gadgets[hidden] { display: none; }
.gadget { position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 0;
  min-width: 128px; padding: 7px 30px 9px 12px; border-radius: 14px; border: 2px solid rgba(255,198,58,.55); background: rgba(10,10,18,.72); color: #f3e9d6;
  font: 800 13px system-ui, sans-serif; cursor: pointer; touch-action: none; text-align: left; overflow: hidden; }
.gadget .gi { grid-row: span 2; font-size: 28px; line-height: 1; }
.gadget .gn { font-size: 12px; letter-spacing: .5px; opacity: .85; white-space: nowrap; }
.gadget .gc { font-size: 20px; color: #ffe39a; line-height: 1.05; }
.gadget .gc::before { content: '×'; font-size: 13px; opacity: .7; margin-right: 1px; }
.gadget kbd { position: absolute; right: 6px; top: 6px; }
.gadget.empty { opacity: .38; filter: grayscale(1); }
.gadget:focus-visible { outline: 3px solid #ffe39a; outline-offset: 2px; }
/* the cloak, on: violet, with its time running down along the bottom */
.gadget .gtime { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.08); display: block; }
.gadget .gtime i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a6cff, #c9b8ff); }
.gadget.active { border-color: #b9a6ff; background: rgba(60,40,140,.75); box-shadow: 0 0 18px rgba(150,120,255,.75); }
/* 👻 invisible: the edges of the screen shimmer violet; it blinks away while the cloak flickers */
#cloakfx { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse at center, rgba(90,70,255,0) 42%, rgba(110,90,255,.32) 78%, rgba(170,150,255,.62) 100%); }
#cloakfx.on { opacity: 1; animation: shimmer 1.6s ease-in-out infinite alternate; }
#cloakfx.on.ending { animation: shimmer .25s steps(2) infinite; }
#cloakfx.on.flick { opacity: 0; animation: none; }
@keyframes shimmer { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(40deg) brightness(1.35); } }
/* on a phone: the gadgets sit by your right thumb, above ✋ and 🤫 */
body.touchy .gadgets { left: auto; right: 12px; bottom: 100px; transform: none; gap: 8px; }
body.touchy .gadget { min-width: 0; width: 62px; height: 62px; padding: 4px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.touchy .gadget .gi { font-size: 26px; }
body.touchy .gadget .gn, body.touchy .gadget kbd { display: none; }
body.touchy .gadget .gc { position: absolute; right: 2px; bottom: 2px; font-size: 13px; background: rgba(0,0,0,.75); border-radius: 9px; padding: 0 5px; }
body.touchy .gadget .gc::before { content: ''; margin: 0; }
body.touchy .gadget .gtime { bottom: 6px; left: 12px; right: 12px; border-radius: 3px; }
@media (max-width: 520px) { .gadget { min-width: 0; padding: 6px 9px 8px; } .gadget .gn { display: none; } }

/* ---- ✂️🔐 cutting a case, cracking the vault ---- */
.workbar { position: absolute; left: 50%; top: 64%; width: 200px; height: 12px; margin-left: -100px; border-radius: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); overflow: hidden; }
.workbar[hidden] { display: none; }
.workbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fe8ff, #ffe39a); }

/* ---- 🏛️ heist 4: the museum's own look ---- */
.heist.museum { border-color: rgba(120,230,255,.7); background: linear-gradient(180deg, rgba(30,24,70,.85), rgba(10,8,30,.85)); }
.heist.museum:hover:not(:disabled) { background: linear-gradient(180deg, rgba(50,40,110,.9), rgba(16,12,44,.9)); }
.heist.museum .hn { color: #8fe8ff; }
.heist .new { margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: #ff4fa0; color: #fff; font-size: 11px; letter-spacing: 1px; animation: blink 1s steps(2) infinite; }
.vanstar { margin-left: 6px; font-size: .9em; filter: drop-shadow(0 0 6px rgba(120,200,255,.9)); }
.vanstar.off { opacity: .25; filter: grayscale(1); }
body.museum .pill { border-color: rgba(120,230,255,.35); }
body.museum .pill.prize { color: #c8f4ff; }
body.museum .pill.prize.got { color: #fff; border-color: #c48cff; box-shadow: 0 0 14px rgba(200,140,255,.7); }

/* ---- 🚐 the getaway chase ---- */
body.chasing .hud-l, body.chasing .hud-r, body.chasing .cross, body.chasing #h-prompt, body.chasing #intro, body.chasing #h-work { display: none !important; }
#chasehud { position: fixed; left: 0; right: 0; top: 58px; z-index: 11; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; }
#chasehud[hidden] { display: none; }
.road-track { display: flex; align-items: center; gap: 8px; width: min(560px, 100%); font-size: 20px; }
.rt-bar { position: relative; flex: 1; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(60,60,80,.8), rgba(90,70,40,.8)); border: 1px solid rgba(255,255,255,.3); }
.rt-bar i { position: absolute; top: 50%; transform: translate(-50%, -50%) scaleX(-1); font-style: normal; font-size: 20px; line-height: 1; transition: left .1s linear; }
.rt-van { z-index: 2; filter: drop-shadow(0 0 6px rgba(120,200,255,.9)); }
#c-cops i { filter: drop-shadow(0 0 5px rgba(255,60,60,.9)); }
#c-cops i.stuck { opacity: .45; }
.c-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#c-dents.hurt { animation: blink .2s steps(2) infinite; }
.cbar { display: inline-block; width: 80px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; vertical-align: middle; }
.cbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a2a, #ffe39a); }
.c-warn { font-weight: 900; font-size: 20px; color: #fff; background: rgba(200,20,20,.75); border-radius: 10px; padding: 4px 12px; animation: blink .35s steps(2) infinite; }
.c-warn[hidden] { display: none; }
.gadget .gnone::before { content: ''; }
#chasefx { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .2s;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,0) 0deg 5deg, rgba(255,230,180,.08) 5deg 6deg), radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(255,140,40,.3) 100%); }
#chasefx.on { opacity: 1; }
.steer { position: fixed; left: 14px; bottom: 22px; z-index: 13; display: flex; gap: 12px; }
.steer[hidden] { display: none; }
.steer button { width: 84px; height: 84px; border-radius: 22px; border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); color: #fff; font-size: 34px; touch-action: none; }
.steer button.on { background: rgba(80,140,220,.6); border-color: #9fd6ff; }
.chasedetail { font-weight: 800; color: #bfe6ff; }
body.touchy .chasebar { bottom: 22px; }
/* 🚨 the museum's lockdown clock */
.lockpill { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); font-weight: 900; font-size: clamp(16px, 3vw, 24px); color: #fff; background: rgba(190,10,30,.8); border: 2px solid #ffb0b0; border-radius: 12px; padding: 6px 14px; white-space: nowrap; box-shadow: 0 0 24px rgba(255,40,40,.8); }
.lockpill[hidden] { display: none; }
.lockpill.hurry { animation: blink .3s steps(2) infinite; }
.c-boss { color: #ffd0c0; border-color: #ff6a4a; box-shadow: 0 0 12px rgba(255,90,60,.6); }
.c-boss[hidden] { display: none; }
/* on a phone the getaway's three buttons stand in a column by the right thumb, the ◀ ▶ by the left */
body.touchy .chasebar { flex-direction: column; left: auto; right: 12px; bottom: 22px; transform: none; }
/* on a narrow phone the top is full of pills: the lockdown clock goes below the middle, above the thumbs */
@media (max-width: 640px) { .lockpill { top: 60%; font-size: 17px; padding: 5px 10px; } }

/* ---- 🏙️ heist 5: the Boarlord's Sky Tower — night city, neon pink, moon silver ---- */
.gadget[hidden], body.touchy .gadget[hidden] { display: none !important; }
/* 🪝 the hook: gold while a hook point is in your sights; its bar fills as the rope winds back in */
.gadget.hook.active { border-color: #ffd36a; background: rgba(120,80,10,.82); box-shadow: 0 0 18px rgba(255,200,80,.85); }
.gadget.hook .gtime i { background: linear-gradient(90deg, #ffb340, #ffe39a); }
/* on a phone, four gadgets make a square by your right thumb (still clear of ✋ 🤫 and the stick) */
body.touchy .gadgets.has-hook:not([hidden]) { display: grid; grid-template-columns: 62px 62px; }
.hookmark { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; border: 3px solid #ffd36a; box-shadow: 0 0 14px rgba(255,200,80,.85), inset 0 0 10px rgba(255,200,80,.5); animation: hookpulse .7s ease-in-out infinite alternate; }
.hookmark span { position: absolute; right: -16px; top: -16px; font-size: 18px; filter: drop-shadow(0 0 4px #000); }
.hookmark.wait { border-color: rgba(255,255,255,.35); box-shadow: none; animation: none; }
.hookmark[hidden] { display: none; }
@keyframes hookpulse { from { transform: scale(.9); } to { transform: scale(1.1); } }
.pill.floor { color: #bfe9ff; font-size: 14px; }
/* 🔐 on the rope: which vault lasers are on */
.ropestat { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); display: flex; gap: 8px; white-space: nowrap; }
.ropestat[hidden] { display: none; }
.ropestat .pill.hot { color: #fff; background: rgba(190,10,30,.82); border-color: #ffb0b0; box-shadow: 0 0 14px rgba(255,40,40,.7); }
/* 🪂 the base jump */
.glidehud { position: absolute; left: 0; right: 0; top: 58px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px; }
.glidehud[hidden] { display: none; }
#g-van.close { color: #b4ffc4; border-color: #6fe08a; box-shadow: 0 0 14px rgba(80,255,120,.7); }
.ropebar .gadget.on, .glidebar .gadget.on { border-color: #9fd6ff; background: rgba(60,110,160,.75); box-shadow: 0 0 14px rgba(120,190,255,.6); }
body.touchy .ropebar { flex-direction: column; left: auto; right: 12px; bottom: 100px; transform: none; }
body.touchy .glidebar { flex-direction: column; left: auto; right: 12px; bottom: 22px; transform: none; }
body.glide .hud-l, body.glide .hud-r, body.glide .cross { display: none !important; }
/* the tower's colours */
.heist.tower { border-color: rgba(255,120,220,.75); background: linear-gradient(180deg, rgba(42,14,62,.9), rgba(8,10,32,.9)); }
.heist.tower:hover:not(:disabled) { background: linear-gradient(180deg, rgba(70,24,100,.92), rgba(14,16,50,.92)); }
.heist.tower .hn { color: #ff9be0; }
body.tower .pill { border-color: rgba(255,120,220,.35); }
body.tower .pill.prize { color: #d8e6ff; }
body.tower .pill.prize.got { color: #fff; border-color: #a9c8ff; box-shadow: 0 0 14px rgba(160,200,255,.8); }
/* (on a phone the rope's signs go up above the middle, clear of the ⬆ ⬇ ✋ column) */
@media (max-width: 640px) { .ropestat { top: 36%; } .ropestat .pill { font-size: 13px; padding: 5px 8px; } }

/* ======================================================================
   v1.4 (7 November 2026): 🚂 the Boar Express, 🎭 disguises, 👥 the crew,
   🏠 the hideout, 🎲 the daily heist
   ====================================================================== */
/* the gadget bar holds up to six now: it wraps rather than run off a small screen */
.gadgets { flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100vw - 16px); }
@media (max-width: 900px) { body:not(.touchy) .gadget { min-width: 0; padding: 6px 26px 8px 10px; } }
@media (max-width: 760px) { body:not(.touchy) .gadget .gn { display: none; } }
/* on a phone: three across, two rows, by your right thumb (clear of ✋ 🤫 below and the stick on the left) */
body.touchy .gadgets:not([hidden]), body.touchy .gadgets.has-hook:not([hidden]) { display: grid; grid-template-columns: repeat(3, 62px); }
body.touchy .chasebar:not([hidden]), body.touchy .ropebar:not([hidden]), body.touchy .glidebar:not([hidden]) { display: flex; }
/* 🎭 the disguise on: navy and gold; 👥 the crew's skill running: green */
.gadget.disg.active { border-color: #ffd36a; background: rgba(20,32,90,.85); box-shadow: 0 0 18px rgba(255,210,100,.7); }
.gadget.disg .gtime i { background: linear-gradient(90deg, #3a5bd6, #ffd36a); }
.gadget.crewb { border-color: rgba(120,255,160,.55); }
.gadget.crewb.active { border-color: #7dffa0; background: rgba(10,70,40,.82); box-shadow: 0 0 18px rgba(100,255,150,.7); }
.gadget.crewb .gtime i { background: linear-gradient(90deg, #2fd16a, #b8ffcf); }
/* 🎭 in disguise: the brim of a guard's cap across the top of the screen, a gold badge on it */
#disguisefx { position: fixed; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(14,22,58,.95) 0 60%, rgba(14,22,58,0) 61%); }
#disguisefx::after { content: '🛡️'; position: absolute; left: calc(50% + 32px); top: 16px; font-size: 22px; filter: sepia(1) saturate(4) hue-rotate(5deg) drop-shadow(0 0 6px rgba(255,200,80,.8)); }
#disguisefx.on { opacity: 1; }
#disguisefx.on.ending { animation: blink .4s steps(2) infinite; }
.pill.crewpill { color: #b8ffcf; border-color: rgba(120,255,160,.45); font-size: 14px; }
.pill.bosspill { color: #dfe8ff; border-color: #8fb0ff; box-shadow: 0 0 12px rgba(120,160,255,.6); font-size: 14px; }
.pill.bosspill.ko { color: #ffe39a; border-color: #ffd36a; }
.pill[hidden] { display: none; }
/* 🚇 a tunnel coming */
.tunnelwarn { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); font-weight: 900; font-size: clamp(18px, 4vw, 34px); color: #fff; background: rgba(160,20,20,.82); border: 2px solid #ffb0b0; border-radius: 14px; padding: 8px 16px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 26px rgba(255,40,40,.8); animation: blink .35s steps(2) infinite; }
.tunnelwarn.safe { background: rgba(20,110,50,.82); border-color: #b0ffc4; box-shadow: 0 0 20px rgba(60,255,120,.6); animation: none; }
.tunnelwarn[hidden] { display: none; }
/* 🔭 markers over the guards */
.marks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mk { position: absolute; transform: translate(-50%, -100%); font-style: normal; font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px #000); white-space: nowrap; }
.mk[hidden] { display: none; }
.mk.pin { padding: 2px 4px; border-radius: 10px; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.75); font-size: 16px; }
.mk.pin::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -4px; border: 4px solid transparent; border-top-color: rgba(255,255,255,.75); }
.mk.amber { border-color: #ffb030; box-shadow: 0 0 10px rgba(255,176,48,.7); }
.mk.red { border-color: #ff4040; box-shadow: 0 0 12px rgba(255,60,60,.85); }
.mk.hack { font-size: 16px; }
/* 🗺️ Hawk's map */
.minimap { position: absolute; right: 12px; top: 112px; width: 220px; height: 220px; border-radius: 14px; border: 2px solid rgba(120,255,160,.6); box-shadow: 0 0 18px rgba(80,255,140,.4); background: rgba(6,10,24,.85); }
.minimap[hidden] { display: none; }
@media (max-width: 640px) { .minimap { width: 170px; height: 170px; top: 104px; } }

/* ---- the front screen: 👥 the crew, 🎲 the daily, 🏠 the hideout ---- */
.crewpick { margin: 10px 0 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(120,255,160,.4); background: rgba(10,30,20,.45); }
.crewpick .ch { font-size: 12px; letter-spacing: 3px; font-weight: 900; color: #8dffb0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.crewpick .ch .new { margin-left: 2px; }
.crewpick .chs { letter-spacing: 0; font-weight: 700; opacity: .7; font-size: 12px; margin-left: auto; }
.crews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.crew { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: #eee; font: inherit; cursor: pointer; min-width: 0; }
.crew .ci { grid-row: span 2; font-size: 26px; }
.crew .cn { font-weight: 900; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.crew .cr { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew.on { border-color: #7dffa0; background: rgba(20,90,50,.6); box-shadow: 0 0 14px rgba(100,255,150,.5); }
.crew:focus-visible { outline: 3px solid #ffe39a; outline-offset: 2px; }
.crewinfo { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; opacity: .9; }
@media (max-width: 480px) { .crew { grid-template-columns: 1fr; text-align: center; padding: 6px 4px; } .crew .ci { grid-row: auto; font-size: 24px; } .crew .cr { white-space: normal; } }
.heist.train { border-color: rgba(255,170,90,.8); background: linear-gradient(180deg, rgba(70,22,14,.9), rgba(20,12,10,.9)); }
.heist.train:hover:not(:disabled) { background: linear-gradient(180deg, rgba(100,32,18,.92), rgba(30,16,12,.92)); }
.heist.train .hn { color: #ffb070; }
.dailyrow { margin-top: 10px; }
.dailyrow .heist { width: 100%; }
.heist.dailyc { border-color: rgba(255,120,240,.75); background: linear-gradient(120deg, rgba(60,14,70,.9), rgba(14,30,70,.9)); }
.heist.dailyc:hover:not(:disabled) { background: linear-gradient(120deg, rgba(90,22,100,.92), rgba(20,44,100,.92)); }
.heist.dailyc .hn { color: #ff9cf0; }
.hqrow { margin-top: 12px; }
.btn.hqbtn { background: linear-gradient(180deg, #8a5a1e, #52330f); border-color: #ffc663; }
.btn.hqbtn:disabled { opacity: .5; cursor: not-allowed; }
.btn .new { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #ff4fa0; color: #fff; font-size: 11px; letter-spacing: 1px; animation: blink 1s steps(2) infinite; }
.new[hidden] { display: none; }
.lootdetail { font-weight: 800; color: #ffe39a; }
.lootdetail[hidden] { display: none; }

/* ---- 🏠 the hideout: the shop sits along the bottom, the barn shows above it ---- */
body.hideout #screens { place-items: end center; }
#s-hideout { max-width: 860px; }
.panel.hq { background: rgba(14,9,5,.8); border-color: rgba(255,198,99,.6); max-height: 50vh; max-height: 50dvh; overflow-y: auto; padding: 12px 16px; }
.panel.hq h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.panel.hq .bank { font-size: 18px; color: #ffe39a; }
.hqlede { margin: 2px 0 8px; font-size: 14px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.tab { font: inherit; font-weight: 800; font-size: 14px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #eee; cursor: pointer; }
.tab.on { background: rgba(255,198,99,.25); border-color: #ffc663; color: #fff; }
.tab:focus-visible, .buy:focus-visible { outline: 3px solid #ffe39a; outline-offset: 2px; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.buy { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,198,99,.5); background: rgba(40,26,10,.7); color: #f3e9d6; font: inherit; cursor: pointer; min-width: 0; }
.buy .bi { grid-row: span 2; font-size: 26px; }
.buy .bn { font-weight: 900; font-size: 14px; }
.buy .bt { grid-column: 2; font-size: 12px; opacity: .78; }
.buy .bc { grid-row: 1 / span 2; grid-column: 3; font-weight: 900; color: #ffe39a; white-space: nowrap; }
.buy.cant { opacity: .65; }
.buy.cant .bc { color: #ff9a8a; }
.buy.owned { border-color: #7dffa0; background: rgba(16,60,30,.7); cursor: default; }
.buy.owned .bc { color: #9dffb8; }
.trophy { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.35); opacity: .6; }
.trophy.got { opacity: 1; border-color: rgba(255,214,90,.6); background: rgba(60,44,10,.55); }
.trophy .ti { grid-row: span 2; font-size: 26px; }
.trophy .tn { font-weight: 900; }
.trophy .tt { font-size: 12px; opacity: .8; }
.hqmsg { min-height: 1.2em; font-weight: 800; color: #ffe39a; margin: 8px 0 0; }
@media (max-width: 520px) { .shop { grid-template-columns: 1fr; } .panel.hq { max-height: 64vh; max-height: 64dvh; } }
body.hideout .bar .tag { opacity: .4; }