:root{
  /* Heist palette — gunmetal, brass, alarm */
  --bg:#0e0d0b;
  --bg2:#141210;
  --panel:#20222a;      /* steel plate */
  --panel2:#191b21;
  --panel3:#2a2d37;
  --line:#34373f;
  --line2:#454a55;
  --edge-hi:rgba(255,255,255,.07); /* top metal highlight */
  --ink:#f1ead9;
  --ink2:#b3a68f;
  --ink3:#7c7062;
  --gold:#e6b34a;
  --gold2:#f4c85c;
  --gold-deep:#9c6c1c;
  --brass:#c8912f;
  --alarm:#e8432a;
  --alarm2:#ff6a4d;
  --green:#57b96a;
  --steel:#3a3f49;
  --violet:#4b5563; /* legacy fallback → neutral steel, never purple */
  --va:#4fb0e0; /* vault A - steel blue */
  --vb:#5cc27a; /* vault B - emerald */
  --vc:#e5893f; /* vault C - copper */
  --vd:#c9a24a; /* vault D - brass */
  --ve:#d76b7f; /* vault E - garnet */
}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 50% -8%, #23211b, transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    var(--bg);
  background-attachment:fixed;
}
#app{min-height:100%;}
h1,h2,h3,.serif,.font-display{font-family:'Fraunces',Georgia,serif;}

/* buttons */
.btn{transition:transform .1s ease, filter .15s ease, box-shadow .15s, background .15s; user-select:none;cursor:pointer;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--brass));color:#2a1c00;font-weight:800;
  border:1px solid #7a5410;border-top-color:#ffe6a0;
  box-shadow:0 3px 0 0 #6e4a0f, 0 6px 12px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-gold:active{box-shadow:0 1px 0 0 #6e4a0f, inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(2px);}
.btn-commit{background:linear-gradient(180deg,var(--alarm2),var(--alarm));color:#fff;font-weight:800;letter-spacing:.02em;
  border:1px solid #922414;border-top-color:#ff9d86;
  box-shadow:0 3px 0 0 #7e2011, 0 6px 14px -4px rgba(232,67,42,.5), inset 0 1px 0 rgba(255,255,255,.35);}
.btn-commit:active{box-shadow:0 1px 0 0 #7e2011;transform:translateY(2px);}
.btn-ghost{background:linear-gradient(180deg,var(--panel3),var(--panel2));color:var(--ink);
  border:1px solid var(--line2);border-top-color:#565c68;box-shadow:0 2px 0 0 #0c0d10, inset 0 1px 0 var(--edge-hi);}
.btn-ghost:hover{filter:brightness(1.08);}
.btn-violet{background:linear-gradient(180deg,#4a5058,#31353d);color:var(--ink);border:1px solid var(--line2);
  box-shadow:0 3px 0 0 #0c0d10, inset 0 1px 0 var(--edge-hi);}
.btn-locked{background:repeating-linear-gradient(135deg,#1c1e24 0 8px,#191b20 8px 16px);color:var(--ink3);
  border:1px dashed var(--line2);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);cursor:not-allowed;}
.tap{min-height:46px;}

/* panels — brushed steel plates, industrial radius */
.panel{background:linear-gradient(180deg,#23262f,#181a20);border:1px solid var(--line);border-top-color:var(--line2);border-radius:12px;
  box-shadow:0 2px 0 0 #0a0b0d, inset 0 1px 0 var(--edge-hi);}
.panel-2{background:linear-gradient(180deg,#1d1f26,#15171c);border:1px solid var(--line);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.card-line{border:1px solid var(--line);}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

/* vault accents */
.v-A{--vc-accent:var(--va);}
.v-B{--vc-accent:var(--vb);}
.v-C{--vc-accent:var(--vc);}
.v-D{--vc-accent:var(--vd);}
.v-E{--vc-accent:var(--ve);}

/* ============ VAULTS — steel safe doors ============ */
.vault{
  position:relative;
  border-radius:14px;
  background:
    radial-gradient(120% 90% at 50% 0%, #454a54 0%, #30343d 42%, #1f2228 100%);
  border:2px solid #101216;
  box-shadow:
    0 5px 0 0 #0a0b0d,
    0 10px 22px -8px rgba(0,0,0,.7),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -18px 30px rgba(0,0,0,.45);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s;
  overflow:hidden;
}
/* corner bolts */
.vault::before{
  content:"";position:absolute;inset:7px;border-radius:9px;pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle at 7px 7px, #6a7079 0 2.5px, #23262c 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 7px) 7px, #6a7079 0 2.5px, #23262c 3px 4.5px, transparent 5px),
    radial-gradient(circle at 7px calc(100% - 7px), #6a7079 0 2.5px, #23262c 3px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #6a7079 0 2.5px, #23262c 3px 4.5px, transparent 5px);
}
/* colored top seam / status light strip */
.vault .vtop{height:6px;width:100%;background:linear-gradient(90deg,transparent,var(--vc-accent),transparent);opacity:.9;}
.vault.selectable{cursor:pointer;}
.vault.selectable:hover{transform:translateY(-4px);filter:brightness(1.06);box-shadow:0 7px 0 0 #0a0b0d,0 16px 30px -8px rgba(0,0,0,.75),inset 0 2px 0 rgba(255,255,255,.12);}
.vault.alarm{border-color:var(--alarm)!important;}
.vault.alarm .vtop{background:linear-gradient(90deg,transparent,var(--alarm),transparent);}
.vault.impact{animation:vimpact .32s ease;}
@keyframes vimpact{0%{transform:scale(1);}35%{transform:scale(1.05) translateY(-3px);}70%{transform:scale(.97) translateY(2px);}100%{transform:scale(1);}}
.flash-alarm{animation:flashAlarm 1s ease;}
@keyframes flashAlarm{0%,100%{filter:none;}30%{filter:brightness(1.5) saturate(1.4);background:rgba(232,67,42,.3);}}

.vault-inner{position:relative;z-index:1;padding:12px 12px 10px;}
.vault-head{display:flex;align-items:center;justify-content:space-between;}
.vault-letter{
  font-family:'Fraunces',serif;font-weight:700;font-size:15px;line-height:1;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;
  color:#12141a;background:linear-gradient(180deg,var(--vc-accent),color-mix(in srgb,var(--vc-accent),#000 30%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
/* combination dial */
.vault-dial{
  width:30px;height:30px;border-radius:50%;position:relative;
  background:conic-gradient(from 0deg,#4a4f59,#2a2e36,#4a4f59,#2a2e36,#4a4f59);
  border:2px solid #16181d;box-shadow:inset 0 0 0 3px #23262d, inset 0 2px 4px rgba(0,0,0,.6);}
.vault-dial::after{content:"";position:absolute;left:50%;top:3px;width:2px;height:8px;background:var(--vc-accent);transform:translateX(-50%);border-radius:2px;}
.vault-prize{display:flex;align-items:center;justify-content:center;gap:4px;margin:8px 0 6px;
  font-family:'Fraunces',serif;font-weight:700;font-size:40px;line-height:1;color:var(--gold2);
  text-shadow:0 1px 0 #7a5410, 0 2px 4px rgba(0,0,0,.6);}
.vault-prize .pv-coin{color:var(--gold);opacity:.9;}
.vault-slots{min-height:34px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;
  border-top:1px solid rgba(255,255,255,.05);padding-top:7px;margin-top:2px;}
.vault-badge{min-height:24px;display:flex;align-items:center;justify-content:center;margin-top:5px;}

.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#3a3f49,#22252c);border:2px solid #12141a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);flex-shrink:0;}

/* timer / HUD */
#timerNum{font-family:'Fraunces',serif;letter-spacing:.04em;
  background:linear-gradient(180deg,#15171c,#0d0e12);border:1px solid var(--line2)!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);color:var(--ink);}
.timer-danger{color:var(--alarm2)!important;border-color:var(--alarm)!important;
  box-shadow:inset 0 0 12px rgba(232,67,42,.5),0 0 0 1px var(--alarm)!important;animation:beat .55s ease infinite;}
@keyframes beat{0%,100%{transform:scale(1);}50%{transform:scale(1.13);}}
.pill-coin{background:linear-gradient(180deg,#2a2213,#1a1509);border:1px solid #6e4a0f;color:var(--gold2);
  box-shadow:inset 0 1px 0 rgba(255,220,140,.25);}
.round-chip{font-family:'Fraunces',serif;letter-spacing:.03em;}

/* player cards */
.pcard{background:linear-gradient(180deg,#1d1f26,#15171c);border:1px solid var(--line);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.pcard-you{border-color:var(--gold-deep);
  background:linear-gradient(180deg,#26200f,#16130c);box-shadow:inset 0 0 0 1px rgba(230,179,74,.25);}
.tag-bot{background:#12141a;border:1px solid var(--line2);color:var(--ink2);letter-spacing:.06em;font-weight:700;}
.tag-you{background:linear-gradient(180deg,var(--gold2),var(--brass));color:#2a1c00;font-weight:800;letter-spacing:.04em;}
.decl-bubble{background:#101217;border:1px solid var(--line);border-radius:7px;}

/* ============ HONESTY LEDGER — case file / dossier ============ */
.dossier{background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 26px, transparent 26px 27px),
    linear-gradient(180deg,#24231d,#1a1913);
  border:1px solid #3d3a2c;border-radius:8px;box-shadow:0 2px 0 #0a0b0d, inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;}
.dossier-tab{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#c8912f,#9c6c1c);color:#2a1c00;
  font-weight:800;letter-spacing:.14em;font-size:11px;padding:4px 12px;border-radius:6px 6px 0 0;text-transform:uppercase;}
.dossier-head{background:linear-gradient(180deg,#2c2a20,#211f18);border-bottom:1px solid #3d3a2c;
  display:flex;align-items:flex-end;gap:8px;padding:8px 10px 0;}
.dossier-stamp{font-family:'Fraunces',serif;font-weight:700;letter-spacing:.08em;color:#cdbfa0;}
.file-row{background:rgba(20,19,14,.5);border:1px solid #35322650;border-left:3px solid var(--line2);border-radius:4px;}
.file-name{font-family:'Fraunces',serif;font-weight:700;}
.record{font-family:'IBM Plex Mono','Courier New',monospace;letter-spacing:-.01em;}
.chip{border:1px solid var(--line);background:#14151a;border-radius:5px;font-family:'IBM Plex Mono','Courier New',monospace;}
.ledger-ok{color:var(--green);} .ledger-no{color:var(--alarm2);}
.hon-badge{font-family:'Fraunces',serif;font-weight:700;padding:1px 7px;border-radius:5px;border:1px solid var(--line2);}

.badge-bot{background:#12141a;color:var(--ink2);border:1px solid var(--line2);}
.gold-text{color:var(--gold2);}
.title-glow{text-shadow:0 2px 0 #000, 0 0 18px rgba(230,179,74,.18);}

/* animations retained */
.pop{animation:pop .35s cubic-bezier(.2,1.3,.5,1);}
@keyframes pop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.fadein{animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.coinfloat{animation:coinfloat 1.2s ease forwards;position:absolute;font-weight:800;pointer-events:none;z-index:30;text-shadow:0 2px 8px rgba(0,0,0,.6);}
@keyframes coinfloat{0%{opacity:0;transform:translateY(8px) scale(.8);}20%{opacity:1;transform:translateY(0) scale(1.1);}100%{opacity:0;transform:translateY(-42px) scale(1);}}
.ready-check{background:var(--green);box-shadow:0 0 8px 0 rgba(87,185,106,.7);}

.slam{animation:slam .42s cubic-bezier(.2,1.6,.4,1);transform-origin:center;}
@keyframes slam{0%{transform:translateY(-160px) scale(1.9) rotate(-12deg);opacity:0;filter:blur(2px);}60%{opacity:1;filter:blur(0);}78%{transform:translateY(6px) scale(.86) rotate(3deg);}100%{transform:translateY(0) scale(1) rotate(0);opacity:1;}}
.coinburst{position:absolute;width:16px;height:16px;pointer-events:none;z-index:31;animation:coinburst 1s ease forwards;}
@keyframes coinburst{0%{transform:translate(0,0) scale(.4);opacity:0;}20%{opacity:1;transform:translate(0,0) scale(1);}100%{transform:translate(var(--dx),var(--dy)) scale(.9) rotate(220deg);opacity:0;}}

.shake-screen{animation:screenShake .45s cubic-bezier(.36,.07,.19,.97);}
@keyframes screenShake{10%,90%{transform:translate3d(-2px,0,0);}20%,80%{transform:translate3d(4px,0,0);}30%,50%,70%{transform:translate3d(-7px,0,0);}40%,60%{transform:translate3d(7px,0,0);}}

.phase-banner{position:fixed;top:38%;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:60;pointer-events:none;
  font-family:'Fraunces',serif;font-weight:700;font-size:clamp(34px,9vw,68px);letter-spacing:.02em;opacity:0;
  color:#fff;text-shadow:0 0 20px var(--bnr),0 4px 0 #000, 0 8px 24px rgba(0,0,0,.6);
  -webkit-text-stroke:1px rgba(0,0,0,.3);white-space:nowrap;}
.phase-banner.show{animation:bannerPop 1.4s cubic-bezier(.2,1.2,.3,1) forwards;}
@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-4deg);}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(1deg);}30%{transform:translate(-50%,-50%) scale(1) rotate(0);}72%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05);}}

/* reveal spotlight — dim everything, light the vaults */
#spotlight{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(120% 60% at 50% 26%, transparent 0%, rgba(6,6,8,.55) 42%, rgba(4,4,6,.9) 78%);}
#spotlight.on{opacity:1;}
.spot-focus{position:relative;z-index:22;}

/* modals / sheets */
.sheet-back{background:rgba(4,4,7,.75);backdrop-filter:blur(4px);}
.sheet{animation:sheetup .28s cubic-bezier(.2,.9,.3,1);}
@keyframes sheetup{from{transform:translateY(100%);}to{transform:none;}}
.modal-in{animation:pop .28s cubic-bezier(.2,1.2,.5,1);}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.glow-ring{animation:glowring 2.4s ease-in-out infinite;}
@keyframes glowring{0%,100%{box-shadow:0 0 0 0 rgba(230,179,74,.35);}50%{box-shadow:0 0 0 7px rgba(230,179,74,0);}}
select,input{font-family:inherit;background:#14151a;color:var(--ink);border:1px solid var(--line2);}
input::placeholder{color:var(--ink3);}
select:focus,input:focus{outline:none;border-color:var(--gold);}

/* ---- Home (kept, retuned to heist) ---- */
.home-screen{height:100vh;height:100dvh;width:100%;}
.home-title{
  background:linear-gradient(180deg,#fff5db 8%,#ffd873 46%,#e6a52e 78%,#b9791a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ffd873;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(230,179,74,.35));}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .home-title{-webkit-text-fill-color:#ffd873;} }
.logo-badge{animation:logoFloat 4s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-8px) rotate(2deg);}}
.home-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.float-vault{position:absolute;width:96px;height:120px;border-radius:14px;border:2px solid var(--vc-accent);opacity:.10;
  background:linear-gradient(180deg,var(--vc-accent),transparent);display:flex;align-items:flex-start;justify-content:center;}
.float-vault .fv-inner{font-family:'Fraunces',serif;font-weight:700;font-size:32px;color:var(--vc-accent);margin-top:14px;opacity:.7;}
.fv1{top:8%;left:-4%;animation:drift1 13s ease-in-out infinite;}
.fv2{bottom:6%;right:-5%;width:120px;height:150px;animation:drift2 16s ease-in-out infinite;}
.fv3{top:14%;right:6%;width:78px;height:98px;animation:drift3 11s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(26px) rotate(-3deg);}}
@keyframes drift2{0%,100%{transform:translateY(0) rotate(10deg);}50%{transform:translateY(-30px) rotate(4deg);}}
@keyframes drift3{0%,100%{transform:translateY(0) rotate(6deg);}50%{transform:translateY(22px) rotate(-4deg);}}
.float-coin{position:absolute;color:var(--gold);opacity:.14;}
.fc1{width:44px;height:44px;top:26%;left:12%;animation:spinCoin 9s linear infinite;}
.fc2{width:30px;height:30px;bottom:24%;left:20%;animation:spinCoin 7s linear infinite reverse;}
.fc3{width:52px;height:52px;top:20%;right:22%;animation:spinCoin 11s linear infinite;}
@keyframes spinCoin{0%{transform:rotateY(0) translateY(0);}50%{transform:rotateY(180deg) translateY(-14px);}100%{transform:rotateY(360deg) translateY(0);}}
@media (min-width:640px){ .home-title{font-size:72px;} }