/* ============ DEVIL'S ROULETTE — style ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#050506; }
body {
  font-family:'Segoe UI','Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:#cfc9c0; user-select:none;
}
#app { position:fixed; inset:0; }
#c3d { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

/* scanlines + permanent vignette */
#app::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:40;
  box-shadow:inset 0 0 220px rgba(0,0,0,.92);
}
#app::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:41; opacity:.055;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.9) 2px 3px);
}

/* ============ HUD ============ */
#hud { position:absolute; inset:0; z-index:10; pointer-events:none; }
#hud button { pointer-events:auto; }

#topbar {
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  align-items:center; padding:10px 16px; font-size:12px; letter-spacing:2px; color:#8f8a82;
}
#topbar .sep { margin:0 12px; color:#5a2020; }
#score b, #score span { color:#d8d2c8; }
#topbtns { display:flex; gap:8px; }
.ghostbtn {
  background:transparent; border:1px solid #3a3a40; color:#9a958c; padding:5px 12px;
  font-size:11px; letter-spacing:2px; cursor:pointer; transition:.15s;
}
.ghostbtn:hover { border-color:#8a2020; color:#e8e2d8; }

/* hearts */
.hearts { display:flex; gap:4px; margin-top:4px; }
.heart { width:20px; height:20px; }
.heart.full { color:#ff4b3e; filter:drop-shadow(0 0 5px rgba(255,60,40,.8)); }
.heart.empty { color:#232327; }
.heart path { fill:currentColor; }

#dealerHud {
  position:absolute; top:44px; left:50%; transform:translateX(-50%);
  text-align:center;
}
.pname { font-size:13px; letter-spacing:5px; color:#b3aca0; text-shadow:0 0 8px rgba(0,0,0,.9); }

#shellInfo {
  position:absolute; top:118px; left:50%; transform:translateX(-50%);
  text-align:center; font-size:12px; letter-spacing:2px;
}
#shellCounts { font-size:14px; margin-bottom:6px; }
#shellCounts .lv, .lv { color:#ff5546; }
#shellCounts .bl, .bl { color:#5fb2ff; }
#shellDots .dot {
  display:inline-block; width:9px; height:15px; margin:0 3px; border-radius:4px 4px 3px 3px;
  background:linear-gradient(#4a443c,#2a2622); border:1px solid #55504a; vertical-align:middle;
}
#chamberHint { margin-top:6px; font-size:13px; letter-spacing:3px; min-height:16px; }
#chamberHint b.lv { text-shadow:0 0 10px rgba(255,70,50,.9); }
#chamberHint b.bl { text-shadow:0 0 10px rgba(90,170,255,.9); }
#phoneHints .ph { font-size:11px; letter-spacing:2px; margin-top:2px; }

#gunState { position:absolute; bottom:150px; left:50%; transform:translateX(-50%); }
.sawedbadge {
  display:inline-block; padding:5px 14px; border:1px solid #a83226; color:#ff6a55;
  background:rgba(40,8,6,.8); font-size:11px; letter-spacing:2px;
  animation:pulse 1.2s infinite;
}
@keyframes pulse { 50% { opacity:.55; } }

/* log */
#log {
  position:absolute; right:14px; top:70px; width:250px; max-height:44vh; overflow:hidden;
  font-size:11px; line-height:1.7; color:#7d786f; text-align:right;
}
#log .logline:first-child { color:#d8d2c8; }
#log .logline:nth-child(n+9) { opacity:.55; }
#log .logline:nth-child(n+16) { opacity:.3; }

/* announce */
#announce {
  position:absolute; top:30%; left:50%; transform:translate(-50%,-50%) scale(.96);
  font-size:26px; letter-spacing:4px; color:#e8e2d6; text-align:center; max-width:80vw;
  text-shadow:0 0 18px rgba(200,30,20,.55), 0 2px 4px #000;
  opacity:0; transition:opacity .25s, transform .25s;
}
#announce.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

#playerHud { position:absolute; left:18px; bottom:18px; }

/* item bar */
#itemBar {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; pointer-events:auto; max-width:62vw; flex-wrap:wrap-reverse;
  justify-content:center;
}
.itemcard {
  width:66px; height:88px; background:rgba(10,10,14,.88); border:1px solid #33333a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; position:relative; transition:.15s;
}
.itemcard:hover { border-color:#a83226; box-shadow:0 0 14px rgba(180,30,20,.35); transform:translateY(-3px); }
.itemcard .icn { width:34px; height:34px; stroke:#ddd6c8; }
.iname { font-size:9px; letter-spacing:1px; color:#a39c90; text-align:center; line-height:1.2; }
.badge {
  position:absolute; top:-7px; right:-7px; background:#a83226; color:#fff; font-size:9px;
  padding:1px 5px; border-radius:8px;
}
.miniitems { display:flex; gap:4px; justify-content:center; margin-top:6px; min-height:20px; }
.miniitems .mini { opacity:.85; }
.miniitems .mini .icn { width:18px; height:18px; stroke:#9a9488; }

/* shoot buttons */
#actions {
  position:absolute; right:20px; bottom:96px; display:flex; flex-direction:column; gap:10px;
  opacity:.25; transition:.2s;
}
#actions.on { opacity:1; }
.shootbtn {
  width:168px; padding:14px 0; font-size:15px; letter-spacing:3px; cursor:pointer;
  background:linear-gradient(#3d0c08,#1c0503); color:#ffb4a8; border:1px solid #7e2418;
  transition:.15s; line-height:1.4;
}
.shootbtn:hover:not(:disabled) {
  background:linear-gradient(#6e150c,#300804); color:#fff;
  box-shadow:0 0 22px rgba(220,40,20,.5); border-color:#c84a30;
}
.shootbtn:disabled { opacity:.4; cursor:default; }

/* ============ overlays ============ */
.overlay {
  position:absolute; inset:0; z-index:30; background:rgba(2,2,4,.82);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
#menu.overlay {
  background:
    radial-gradient(circle at 50% 64%, rgba(46,12,6,.34) 0%, rgba(8,4,6,.72) 38%, rgba(1,1,3,.96) 78%, #000 100%);
  backdrop-filter:blur(1.5px);
}
.menuPanel { background:rgba(6,6,9,.82); border-color:#3a2a26; }
.menuPanel h1 {
  animation:titleFlicker 6s infinite;
}
@keyframes titleFlicker {
  0%,100% { opacity:1; }
  92% { opacity:1; }
  93% { opacity:.55; }
  94% { opacity:1; }
  96% { opacity:.78; }
  97% { opacity:1; }
}
.panel {
  background:rgba(8,8,11,.96); border:1px solid #33333a; padding:38px 46px;
  text-align:center; max-width:92vw; max-height:92vh; overflow-y:auto;
  box-shadow:0 0 60px rgba(0,0,0,.9), inset 0 0 40px rgba(120,10,5,.06);
}
.menuPanel h1 {
  font-size:52px; letter-spacing:10px; line-height:1.15; color:#e8e2d6;
  text-shadow:0 0 30px rgba(200,30,15,.6); margin-bottom:12px; font-weight:800;
}
.menuPanel h1.good { text-shadow:0 0 30px rgba(80,200,90,.5); }
.tag { font-size:13px; letter-spacing:3px; color:#8a847a; margin-bottom:26px; }
.fine { font-size:10px; letter-spacing:1px; color:#5c574f; margin-top:22px; line-height:1.7; }
.diffRow { display:flex; gap:10px; justify-content:center; margin-bottom:22px; }
.diffbtn {
  width:96px; padding:9px 0; background:transparent; border:1px solid #3a3a40; color:#9a958c;
  letter-spacing:3px; font-size:12px; cursor:pointer; transition:.15s;
}
.diffbtn:hover { border-color:#777; color:#ddd; }
.diffbtn.selected { border-color:#c84a30; color:#ff6a55; box-shadow:0 0 14px rgba(200,40,20,.35); }
.bigbtn {
  display:block; width:280px; margin:10px auto 6px; padding:15px 0; cursor:pointer;
  background:linear-gradient(#701509,#2c0703); border:1px solid #a03322; color:#ffd9d0;
  font-size:15px; letter-spacing:4px; transition:.15s;
}
.bigbtn:hover { background:linear-gradient(#9c2110,#3d0a04); box-shadow:0 0 26px rgba(220,40,20,.55); color:#fff; }
#btnHow { margin-top:8px; }
.rulesPanel { max-width:640px; text-align:left; }
.rulesPanel h2 { letter-spacing:6px; text-align:center; margin-bottom:18px; color:#e8e2d6; }
.rulesText p { font-size:13px; line-height:1.8; margin-bottom:12px; color:#b5afa4; }
.rulesText b { letter-spacing:1px; }
#rulesItems { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:16px 0 8px; }
.ruleItem { display:flex; gap:10px; align-items:flex-start; }
.ruleItem .icn { width:30px; height:30px; flex:none; stroke:#ddd6c8; margin-top:2px; }
.ruleItem .rt { font-size:12px; line-height:1.5; color:#a39c90; }
.ruleItem .rt b { color:#d8d2c8; display:block; font-size:12px; letter-spacing:1px; }

/* round overlay */
#roundOverlay { background:rgba(0,0,0,.9); }
.roundText { text-align:center; }
#roundTitle {
  font-size:64px; letter-spacing:16px; color:#e8e2d6;
  text-shadow:0 0 40px rgba(200,30,15,.7); animation:roundIn .9s ease-out;
}
#roundSub { font-size:16px; letter-spacing:8px; color:#8a847a; margin-top:14px; }
@keyframes roundIn { from { opacity:0; transform:scale(1.25); } to { opacity:1; transform:scale(1); } }

/* steal overlay */
.smallPanel { min-width:340px; }
#stealList { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.stealopt {
  display:flex; align-items:center; gap:12px; padding:9px 14px; background:#101014;
  border:1px solid #33333a; color:#cfc9c0; cursor:pointer; text-align:left;
  font-size:13px; letter-spacing:1px; transition:.15s;
}
.stealopt:hover { border-color:#a83226; background:#1a0d0a; }
.stealopt .icn { width:26px; height:26px; stroke:#ddd6c8; flex:none; }

/* fx layers */
#vignette {
  position:absolute; inset:0; z-index:20; pointer-events:none; opacity:0; transition:opacity .4s;
  box-shadow:inset 0 0 200px rgba(190,10,5,.95);
}
#vignette.show { opacity:1; transition:opacity .05s; }
#muzzleflash {
  position:absolute; inset:0; z-index:21; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at 50% 55%, rgba(255,230,180,.95), rgba(255,120,40,.35) 45%, transparent 75%);
}
#muzzleflash.bang { opacity:.8; transition:opacity .04s; }
#muzzleflash.medic { background:radial-gradient(circle, rgba(255,255,255,.95), transparent 70%); opacity:.9; transition:opacity .1s; }

/* tooltip */
#tooltip {
  position:fixed; z-index:50; max-width:240px; background:rgba(5,5,8,.96); border:1px solid #44444c;
  padding:8px 11px; font-size:11px; line-height:1.6; color:#c5bfb2; pointer-events:none;
  letter-spacing:.5px;
}

/* low hp / death states */
body.lowhp #vignette { animation:lowPulse 1.6s infinite; }
@keyframes lowPulse { 0%,100% { opacity:.12; } 50% { opacity:.4; } }

/* responsive */
/* ============ cinematic intro ============ */
#intro {
  position:absolute; inset:0; z-index:45; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  opacity:1;
}
#intro.out { opacity:0; transition:opacity .8s ease; }
#intro .introNoise {
  position:absolute; inset:-20%; pointer-events:none; opacity:.10;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  animation:noiseShift .18s steps(2) infinite;
  mix-blend-mode:screen;
}
@keyframes noiseShift {
  0% { transform:translate(0,0); }
  50% { transform:translate(-3px,2px); }
  100% { transform:translate(2px,-2px); }
}
.introBox { position:relative; text-align:center; padding:0 24px; animation:introBoxIn .9s ease-out; }
@keyframes introBoxIn { from { opacity:0; transform:scale(.97); filter:blur(6px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
.bootline {
  font-family:'Courier New',monospace; font-size:11px; letter-spacing:4px;
  color:#7d8a80; text-align:left; margin-bottom:26px; opacity:.8;
}
.bootline span { color:#8a2b21; animation:bootBlink 1s steps(1) infinite; }
@keyframes bootBlink { 0%,49% { opacity:1; } 50%,100% { opacity:.15; } }
.introTitle {
  font-size:clamp(44px,9vw,104px); letter-spacing:clamp(8px,2vw,22px);
  line-height:1.02; font-weight:900; color:#f0e9dc; text-transform:uppercase;
  text-shadow:0 0 26px rgba(210,35,20,.55), 0 0 80px rgba(160,20,10,.35);
  animation:introTitleFlicker 4.5s infinite, introJitter .5s 2;
}
.introTitle span { display:block; }
.introTitle span:last-child { color:#e8d8c8; font-size:.72em; letter-spacing:clamp(14px,3vw,40px); margin-top:8px; }
@keyframes introTitleFlicker {
  0%,100% { opacity:1; }
  7% { opacity:1; }
  8% { opacity:.35; }
  9% { opacity:1; }
  61% { opacity:1; }
  62% { opacity:.55; }
  63% { opacity:1; }
}
@keyframes introJitter {
  0%,100% { transform:translate(0,0); }
  25% { transform:translate(-3px,1px); }
  50% { transform:translate(3px,-1px); }
  75% { transform:translate(-1px,2px); }
}
.introLine {
  width:min(520px,72vw); height:1px; margin:30px auto 18px;
  background:linear-gradient(90deg, transparent, rgba(200,50,35,.85), transparent);
  animation:lineGrow 1.4s .35s both ease-out;
}
@keyframes lineGrow { from { transform:scaleX(.05); opacity:0; } to { transform:scaleX(1); opacity:1; } }
.introSub {
  font-family:'Courier New',monospace; font-size:12px; letter-spacing:14px; color:#b9ab97;
  animation:subIn 1.5s .7s both ease-out;
}
@keyframes subIn { from { opacity:0; letter-spacing:32px; } to { opacity:.72; letter-spacing:14px; } }

@media (max-width:760px) {
  .menuPanel h1 { font-size:34px; letter-spacing:6px; }
  #announce { font-size:18px; }
  #actions { right:10px; bottom:150px; transform:scale(.85); transform-origin:bottom right; }
  #itemBar { max-width:94vw; }
  #log { display:none; }
  #shellInfo { top:104px; }
}