/* ============== HAPPY STONER 3D — STYLES ============== */

@import url('./assets/local-fonts.css');

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; color:#eee; font-family:'Special Elite', monospace; }
body { user-select:none; cursor:default; }

.screen { position:fixed; inset:0; display:none; }
.screen.active { display:block; }
.hidden { display:none !important; }

/* ============ MAIN MENU ============ */
#mainMenu {
  background: radial-gradient(ellipse at 30% 20%, #2a4a1f 0%, #0a1a05 60%, #000 100%);
  overflow:hidden;
}
.menu-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(120,200,80,0.15), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(200,140,60,0.12), transparent 40%),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.01) 20px 21px);
}
.smoke-layer {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 100%, rgba(180,180,180,0.25), transparent 60%);
  filter:blur(20px); animation: smoke 12s ease-in-out infinite alternate;
}
@keyframes smoke { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-30px) scale(1.1)} }

.menu-center {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.menu-content {
  text-align:center;
  padding: 40px;
  max-width: 600px;
  width: 90%;
}
.game-title {
  font-family:'Bungee', sans-serif;
  font-size:clamp(48px, 9vw, 110px);
  line-height:0.95;
  color:#e8f5d8;
  text-shadow:
    0 0 4px #5a8c2a,
    4px 4px 0 #1a2a0a,
    8px 8px 30px rgba(120,200,80,0.4);
  letter-spacing:2px;
  margin-bottom:8px;
}
.title-accent { color:#9eff5e; text-shadow: 0 0 20px #9eff5e, 4px 4px 0 #1a2a0a; }
.title-3d {
  font-family:'Rubik Mono One', sans-serif;
  background:linear-gradient(180deg, #ffe066 0%, #d4870a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 4px 4px 0 #1a2a0a;
}
.subtitle { font-size:14px; opacity:0.6; margin-bottom:40px; letter-spacing:3px; }

.menu-buttons {
  display:flex; flex-direction:column; gap:14px;
  max-width:320px;
  margin: 0 auto;
}
.menu-btn {
  font-family:'Bungee', sans-serif; font-size:18px;
  padding:16px 24px; background:#1a2a0a; color:#e8f5d8;
  border:3px solid #5a8c2a; cursor:pointer; letter-spacing:2px;
  transition: all 0.15s; text-align:center;
  box-shadow: 4px 4px 0 #0a1a05;
  width: 100%;
}
.menu-btn:hover:not(:disabled) { background:#2a4a1f; transform:translate(-2px,-2px); box-shadow: 6px 6px 0 #0a1a05; }
.menu-btn:active:not(:disabled) { transform:translate(2px,2px); box-shadow: 2px 2px 0 #0a1a05; }
.menu-btn:disabled { opacity:0.5; cursor:wait; }
.menu-btn.danger { border-color:#a04020; color:#ffb09c; }
.menu-btn.danger:hover { background:#3a1a0a; }
.warn { margin-top:32px; font-size:11px; opacity:0.5; max-width:400px; margin-left:auto; margin-right:auto; }

/* ============ PANELS (How To, Credits, Pause) ============ */
.panel {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#0a1a05; border:4px solid #5a8c2a; padding:40px;
  max-width:700px; width:90vw; max-height:85vh; overflow:auto;
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
}
.panel h2 { font-family:'Bungee', sans-serif; color:#9eff5e; font-size:36px; margin-bottom:20px; letter-spacing:2px; }
.panel h3 { font-family:'Bungee', sans-serif; color:#ffe066; margin-top:24px; margin-bottom:8px; }
.panel p { line-height:1.5; margin-bottom:12px; font-size:15px; }
.panel .menu-btn { margin-top:20px; }

#howToScreen { background:rgba(0,0,0,0.85); }
#creditsScreen { background:rgba(0,0,0,0.92); }

.how-to-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.how-to-grid > div {
  background:#1a2a0a; padding:10px; text-align:center; border:2px solid #3a5a1a;
}
.how-to-grid b { display:block; color:#9eff5e; font-family:'Bungee'; font-size:18px; }
.how-to-grid span { display:block; font-size:12px; opacity:0.8; margin-top:4px; }

.credits-roll { text-align:center; }
.credits-roll p { margin:6px 0; opacity:0.7; }
.credits-roll .big { font-family:'Bungee', sans-serif; color:#e8f5d8; font-size:22px; opacity:1; margin:4px 0 16px; }
.credits-roll .tiny { font-size:11px; opacity:0.4; margin-top:30px; }

/* ============ EXIT ============ */
#exitScreen { background:#000; }
.exit-content {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
}
.exit-content h1 { font-family:'Bungee'; font-size:60px; color:#9eff5e; margin-bottom:20px; letter-spacing:3px; }
.exit-content p { font-size:18px; opacity:0.7; margin-bottom:30px; }

/* ============ GAME CANVAS ============ */
#gameScreen { background:#000; }
#canvas3d { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ============ HUD ============ */
#hud { position:absolute; inset:0; pointer-events:none; }
#crosshair {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-size:28px; line-height:1; text-shadow: 0 0 4px #000;
  opacity:0.7;
}
#interactPrompt {
  position:absolute; left:50%; top:60%; transform:translateX(-50%);
  background:rgba(0,0,0,0.7); color:#9eff5e; padding:8px 16px;
  border:2px solid #5a8c2a; font-family:'VT323', monospace; font-size:20px;
  display:none; letter-spacing:1px;
}
#interactPrompt.show { display:block; }
#interactPrompt b { color:#ffe066; }

#stats {
  position:absolute; left:20px; bottom:20px; display:flex; flex-direction:column; gap:6px;
}
.stat { display:flex; align-items:center; gap:8px; }
.stat label { font-family:'Bungee'; font-size:11px; color:#ddd; width:60px; text-shadow:1px 1px 0 #000; }
.bar { width:160px; height:14px; background:rgba(0,0,0,0.6); border:2px solid #333; }
.fill { height:100%; width:0%; transition:width 0.3s; }
.fill.green { background:linear-gradient(90deg, #5a8c2a, #9eff5e); }
.fill.yellow { background:linear-gradient(90deg, #8a6a1a, #ffd000); }
.fill.orange { background:linear-gradient(90deg, #a04020, #ff8c1a); }
.fill.blue { background:linear-gradient(90deg, #2060a0, #5ec8ff); }
.fill.purple { background:linear-gradient(90deg, #602080, #c060ff); }

#moneyBox {
  position:absolute; right:20px; top:20px;
  background:rgba(0,0,0,0.6); padding:8px 14px;
  font-family:'Bungee'; font-size:20px; color:#ffe066;
  border:2px solid #8a6a1a; text-shadow:1px 1px 0 #000;
}
#clockBox {
  position:absolute; right:20px; top:65px;
  background:rgba(0,0,0,0.6); padding:8px 14px;
  font-family:'VT323'; color:#9eff5e;
  border:2px solid #5a8c2a; text-align:right;
  display:flex; flex-direction:column; line-height:1;
}
#clockTime { font-size:24px; }
#clockDay { font-size:12px; opacity:0.7; }

#held {
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  background:rgba(0,0,0,0.6); padding:6px 12px; color:#fff;
  font-family:'VT323'; font-size:18px; border:2px solid #444;
  display:none;
}
#held.show { display:block; }

#toast {
  position:absolute; left:50%; top:120px; transform:translateX(-50%);
  background:rgba(20,40,10,0.9); color:#9eff5e; padding:10px 20px;
  border:2px solid #5a8c2a; font-family:'VT323'; font-size:18px;
  opacity:0; transition: opacity 0.3s, transform 0.3s; pointer-events:none;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(10px); }

#lockHint {
  position:absolute; left:50%; bottom:80px; transform:translateX(-50%);
  background:rgba(0,0,0,0.5); color:#ddd; padding:6px 14px;
  font-family:'VT323'; font-size:14px; opacity:0.7;
  border:1px solid #444;
}

/* ============ EFFECT OVERLAYS ============ */
.fxOverlay { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1s; }
#highOverlay {
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(80,200,80,0.15) 100%),
    radial-gradient(circle at 20% 30%, rgba(255,200,80,0.2), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,80,255,0.15), transparent 50%);
  filter:blur(0.5px);
}
#highOverlay.on { opacity:calc(0.18 + var(--high-strength, 0.4) * 0.52); animation: highSwirl 8s ease-in-out infinite alternate; }
@keyframes highSwirl { 0%{filter:hue-rotate(0deg) blur(0.5px)} 100%{filter:hue-rotate(40deg) blur(2px)} }
#drunkOverlay {
  background:
    radial-gradient(ellipse at center, rgba(255,210,160,0.02) 12%, transparent 38%),
    radial-gradient(ellipse at center, transparent 38%, rgba(120,55,20,0.24) 88%),
    linear-gradient(180deg, rgba(255,180,90,0.03), rgba(70,18,0,0.08));
}
#drunkOverlay.on { opacity:calc(0.1 + var(--drunk-strength, 0.45) * 0.48); animation: drunkPulse 3.8s ease-in-out infinite; }
@keyframes drunkPulse {
  0% { filter: blur(0px) saturate(1); }
  50% { filter: blur(1.2px) saturate(1.18) hue-rotate(6deg); }
  100% { filter: blur(0.35px) saturate(1.04); }
}
#fireOverlay {
  background:
    radial-gradient(ellipse at 50% 96%, rgba(255,125,30,0.3), rgba(255,98,0,0.12) 34%, transparent 68%),
    radial-gradient(ellipse at 25% 92%, rgba(255,90,20,0.16), transparent 55%),
    radial-gradient(ellipse at 75% 90%, rgba(255,140,30,0.14), transparent 58%);
}
#fireOverlay.on { opacity:0.46; animation: flicker 0.45s ease-in-out infinite alternate; }
@keyframes flicker {
  0% { opacity:0.28; filter:saturate(0.95); }
  50% { opacity:0.48; filter:saturate(1.08); }
  100% { opacity:0.38; filter:saturate(1); }
}
#sleepOverlay { background:#000; }
#sleepOverlay.on { opacity:1; transition:opacity 1.5s; }

/* ============ PHONE ============ */
#phone {
  position:absolute; right:30px; bottom:30px; z-index:50;
  pointer-events:auto;
}
.phone-frame {
  width:300px; height:600px;
  background:linear-gradient(145deg, #1a1a1a, #0a0a0a);
  border-radius:36px; padding:14px;
  box-shadow:
    0 0 0 2px #2a2a2a inset,
    0 30px 60px rgba(0,0,0,0.8),
    0 0 0 1px #444;
  position:relative;
}
.phone-notch {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:80px; height:22px; background:#000; border-radius:0 0 12px 12px; z-index:2;
}
.phone-screen {
  width:100%; height:calc(100% - 30px);
  background:linear-gradient(180deg, #0a0a1a, #1a1a2a);
  border-radius:24px; overflow:hidden;
  display:flex; flex-direction:column;
}
.phone-status {
  display:flex; justify-content:space-between; padding:32px 18px 6px;
  font-family:'VT323'; font-size:14px; color:#fff;
}
.phone-home {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:120px; height:5px; background:#fff; border-radius:3px; cursor:pointer; opacity:0.7;
}
#phoneApp { flex:1; overflow:auto; padding:10px; }
.phone-close {
  position:absolute; top:-30px; right:0;
  background:#a04020; color:#fff; border:none; padding:4px 10px;
  font-family:'VT323'; cursor:pointer;
}

.phone-home-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:20px 10px;
}
.phone-app {
  background:linear-gradient(145deg, #2a2a4a, #1a1a3a);
  border-radius:14px; padding:12px 4px; text-align:center;
  cursor:pointer; transition:transform 0.1s;
  font-size:11px; color:#fff; font-family:'VT323';
}
.phone-app:hover { transform:scale(1.08); }
.phone-app .ico { font-size:28px; display:block; margin-bottom:4px; }

.contact-list { display:flex; flex-direction:column; gap:6px; padding:10px; }
.contact {
  background:rgba(255,255,255,0.05); padding:10px; cursor:pointer;
  display:flex; align-items:center; gap:10px; border-left:3px solid transparent;
}
.contact:hover { background:rgba(158,255,94,0.15); border-left-color:#9eff5e; }
.contact-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:bold; color:#fff;
}
.contact-info { flex:1; font-family:'VT323'; }
.contact-name { font-size:16px; color:#fff; }
.contact-num { font-size:12px; opacity:0.6; }

.order-list { padding:10px; display:flex; flex-direction:column; gap:8px; }
.order-item {
  background:rgba(255,255,255,0.05); padding:10px; cursor:pointer;
  display:flex; justify-content:space-between; font-family:'VT323'; color:#fff;
  border-left:3px solid transparent;
}
.order-item:hover { background:rgba(255,224,102,0.15); border-left-color:#ffe066; }
.order-item .price { color:#9eff5e; }

.call-screen {
  text-align:center; padding:40px 20px; color:#fff; font-family:'VT323';
}
.call-screen .avatar-big {
  width:100px; height:100px; border-radius:50%; margin:0 auto 16px;
  background:#5a8c2a; display:flex; align-items:center; justify-content:center;
  font-size:48px; color:#fff; box-shadow:0 0 30px rgba(158,255,94,0.5);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 50px rgba(158,255,94,0.8); } }
.call-screen .name { font-size:24px; margin-bottom:6px; }
.call-screen .status { font-size:14px; opacity:0.7; margin-bottom:20px; }
.call-end {
  background:#a04020; color:#fff; border:none; padding:10px 24px;
  border-radius:20px; font-family:'VT323'; font-size:16px; cursor:pointer; margin-top:14px;
}

/* ============ TV ============ */
#tvUI {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:40; pointer-events:auto;
}
.tv-screen-overlay {
  width:600px; height:380px;
  background:#000; border:18px solid #1a1a1a;
  box-shadow: 0 0 0 4px #333, 0 30px 80px rgba(0,0,0,0.8);
  position:relative; overflow:hidden;
}
#tvContent {
  width:100%; height:100%; padding:20px;
  font-family:'VT323'; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.tv-channel-info {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,0.7); padding:4px 10px;
  font-family:'VT323'; color:#ffe066; font-size:14px;
}
.remote {
  margin-top:14px; display:flex; gap:6px; justify-content:center;
  background:#1a1a1a; padding:10px; border-radius:8px;
}
.remote button {
  background:#2a2a2a; color:#9eff5e; border:1px solid #444;
  padding:8px 12px; font-family:'VT323'; cursor:pointer;
  border-radius:4px;
}
.remote button:hover { background:#3a3a3a; }

/* ============ COMPUTER ============ */
#computerUI {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:40; pointer-events:auto;
}
.monitor {
  background:#1a1a1a; padding:16px; border-radius:8px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
}
.monitor-screen {
  width:720px; height:480px;
  background:linear-gradient(135deg, #1a3a5a, #0a1a2a);
  position:relative; overflow:hidden;
}
.desktop {
  position:absolute; inset:0; padding:20px;
  display:grid; grid-template-columns:repeat(6, 90px); gap:20px;
  align-content:start;
}
.desk-icon {
  text-align:center; cursor:pointer; padding:8px;
  font-family:'VT323'; color:#fff; font-size:14px;
  border-radius:4px;
}
.desk-icon:hover { background:rgba(255,255,255,0.15); }
#computerApp {
  position:absolute; inset:30px;
  background:#1a2a4a; border:1px solid #3a5a8a;
  display:none; flex-direction:column;
  font-family:'VT323'; color:#fff;
}
#computerApp.show { display:flex; }
#computerUI.casino-focus .monitor {
  padding:18px;
}
#computerUI.casino-focus .monitor-screen {
  width:780px;
  height:540px;
}
#computerApp.casino-mode {
  inset:16px;
  background:#101829;
  border-color:#5678b3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}
#computerApp.casino-mode .app-titlebar {
  padding:8px 14px;
}
#computerApp.casino-mode .casino-shell {
  padding:12px 14px 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#computerApp.casino-mode .casino-toolbar,
#computerApp.casino-mode .casino-chip-row,
#computerApp.casino-mode .casino-footer-actions {
  margin-top:0;
  margin-bottom:0;
}
#computerApp.casino-mode .casino-btn {
  padding:6px 12px;
  font-size:16px;
}
#computerApp.casino-mode .casino-bankroll {
  padding:8px 12px;
  min-width:132px;
}
#computerApp.casino-mode .casino-bankroll b {
  font-size:22px;
}
.app-titlebar {
  background:#3a5a8a; padding:6px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.app-titlebar button {
  background:#a04020; color:#fff; border:none;
  width:24px; height:24px; cursor:pointer; font-family:'VT323';
}
.app-body { flex:1; padding:10px; overflow:auto; }

.casino-shell {
  flex:1;
  padding:16px;
  overflow:auto;
  background:
    radial-gradient(circle at top, rgba(255,218,92,0.22), transparent 30%),
    linear-gradient(180deg, #0f1730 0%, #08101f 45%, #04070d 100%);
  color:#fff;
  font-family:'VT323';
}
.casino-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.casino-title {
  font-size:28px;
  color:#ffe07f;
  letter-spacing:1px;
  text-shadow:0 0 16px rgba(255,196,82,0.45);
}
.casino-subtitle {
  font-size:15px;
  opacity:0.72;
  margin-top:2px;
}
.casino-bankroll {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,224,127,0.28);
  padding:10px 14px;
  border-radius:12px;
  min-width:120px;
  text-align:right;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.casino-bankroll b {
  display:block;
  color:#9eff5e;
  font-size:24px;
}
.casino-hub {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.casino-tile {
  background:linear-gradient(160deg, rgba(29,43,74,0.96), rgba(8,16,31,0.96));
  border:1px solid rgba(255,224,127,0.24);
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}
.casino-tile h3 {
  margin:0 0 6px;
  font-size:24px;
  color:#ffe07f;
}
.casino-tile p {
  margin:0 0 10px;
  font-size:15px;
  line-height:1.35;
  opacity:0.88;
}
.casino-svg {
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  box-shadow:0 16px 35px rgba(0,0,0,0.35);
}
.casino-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap:14px;
}
.casino-panel {
  background:linear-gradient(180deg, rgba(24,38,67,0.98), rgba(10,16,28,0.98));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:14px;
  box-shadow:0 18px 44px rgba(0,0,0,0.35);
}
.casino-panel h3 {
  margin:0 0 8px;
  font-size:24px;
  color:#ffe07f;
}
.casino-status {
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  font-size:16px;
  line-height:1.35;
}
.casino-status strong {
  color:#9eff5e;
}
.casino-actions,
.casino-chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.casino-btn {
  border:none;
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-family:'VT323';
  font-size:18px;
  color:#fff;
  background:linear-gradient(180deg, #244f8c, #18355e);
  box-shadow:0 10px 24px rgba(0,0,0,0.24);
}
.casino-btn:hover {
  filter:brightness(1.08);
}
.casino-btn.gold {
  background:linear-gradient(180deg, #f3bf46, #b97818);
  color:#17120a;
}
.casino-btn.red {
  background:linear-gradient(180deg, #c34c44, #7f241f);
}
.casino-btn.active {
  outline:2px solid #ffe07f;
  outline-offset:1px;
}
.casino-rule-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  font-size:15px;
}
.casino-rule {
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border-left:3px solid rgba(255,224,127,0.75);
}
.casino-meta {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}
.casino-meta-card {
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  text-align:center;
}
.casino-meta-card b {
  display:block;
  color:#9eff5e;
  font-size:22px;
}
.casino-footer-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.casino-lobby-grid {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.casino-lobby-card {
  border:none;
  border-radius:18px;
  padding:12px;
  background:linear-gradient(180deg, rgba(23,36,66,0.98), rgba(8,13,24,0.98));
  border:1px solid rgba(255,224,127,0.24);
  box-shadow:0 18px 42px rgba(0,0,0,0.3);
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform 0.15s, filter 0.15s, border-color 0.15s;
}
.casino-lobby-card:hover {
  transform:translateY(-2px);
  filter:brightness(1.04);
  border-color:rgba(255,224,127,0.52);
}
.casino-lobby-card .casino-svg {
  flex:1;
  min-height:0;
  max-height:220px;
  object-fit:contain;
}
.casino-lobby-name {
  font-size:22px;
  color:#ffe07f;
  letter-spacing:0.5px;
}
.casino-screen {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  gap:12px;
}
.casino-stage {
  min-height:0;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(5,9,17,0.9), rgba(15,24,42,0.82));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.casino-stage .casino-svg {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.roulette-stage .casino-svg {
  width:auto;
}
.casino-actionbar {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(24,38,67,0.98), rgba(10,16,28,0.98));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 16px 38px rgba(0,0,0,0.3);
}
.casino-statusline {
  font-size:17px;
  line-height:1.25;
  color:#eff4ff;
}
.casino-statusline strong {
  color:#9eff5e;
}
.casino-stat-pill {
  padding:9px 12px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
}
.casino-stat-pill b {
  color:#9eff5e;
  font-size:18px;
}
.casino-action-buttons {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.casino-btn:disabled {
  opacity:0.58;
  cursor:default;
  filter:none;
}
.roulette-board {
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  gap:10px;
  align-items:stretch;
}
.roulette-grid {
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:4px;
}
.roulette-pocket {
  border:none;
  border-radius:10px;
  min-height:38px;
  padding:0 4px;
  font-family:'VT323';
  font-size:20px;
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,0.2);
}
.roulette-pocket.red {
  background:linear-gradient(180deg, #c43a44, #7f241f);
}
.roulette-pocket.black {
  background:linear-gradient(180deg, #3b4353, #11151d);
}
.roulette-pocket.green,
.roulette-pocket.zero {
  background:linear-gradient(180deg, #279357, #14502e);
}
.roulette-pocket.selected {
  outline:2px solid #ffe07f;
  outline-offset:1px;
}

.casino-game:hover {
  filter:brightness(1.15);
  transform:scale(1.02);
}
.casino-game {
  transition:filter 0.15s, transform 0.15s;
  border-radius:8px;
}
.casino-game:hover {
  filter:brightness(1.15);
  transform:scale(1.02);
}
.casino-game span { transition:transform 0.1s; }

.chat-msgs { height:340px; overflow-y:auto; padding:10px; background:rgba(0,0,0,0.3); }
.chat-msg { margin-bottom:6px; line-height:1.3; }
.chat-msg .user { font-weight:bold; }
.chat-input { display:flex; gap:6px; padding:10px; }
.chat-input input { flex:1; padding:6px; font-family:'VT323'; font-size:16px; background:#0a1a2a; color:#fff; border:1px solid #3a5a8a; }
.chat-input button { padding:6px 14px; background:#5a8c2a; color:#fff; border:none; cursor:pointer; font-family:'VT323'; }

/* ============ DIALOG ============ */
#dialogBox {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  width:min(800px, 90vw); background:rgba(10,10,15,0.95);
  border:3px solid #5a8c2a; padding:20px; pointer-events:auto;
  display:flex; gap:16px; z-index:30;
}
.dialog-portrait {
  width:100px; height:100px; flex-shrink:0;
  background:#1a2a0a; border:2px solid #5a8c2a;
  display:flex; align-items:center; justify-content:center;
  font-size:54px;
}
.dialog-content { flex:1; }
.dialog-name { font-family:'Bungee'; color:#9eff5e; font-size:18px; margin-bottom:6px; letter-spacing:1px; }
.dialog-text { font-family:'Special Elite'; color:#fff; font-size:16px; line-height:1.5; min-height:48px; }
.dialog-choices { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.dialog-choices button {
  text-align:left; padding:6px 12px; background:#1a2a0a;
  color:#e8f5d8; border:1px solid #3a5a1a; cursor:pointer;
  font-family:'Special Elite'; font-size:14px;
}
.dialog-choices button:hover { background:#2a4a1f; border-color:#9eff5e; color:#9eff5e; }

/* ============ PAUSE ============ */
#pauseMenu {
  position:absolute; inset:0; background:rgba(0,0,0,0.85);
  z-index:60; pointer-events:auto;
}

/* ============ INVENTORY ============ */
#inventory {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(10,20,5,0.95); border:3px solid #5a8c2a;
  padding:20px; min-width:400px; z-index:35; pointer-events:auto;
}
#inventory h2 { font-family:'Bungee'; color:#9eff5e; margin-bottom:14px; }
.inv-grid { display:grid; grid-template-columns:repeat(5, 60px); gap:8px; }
.inv-slot {
  width:60px; height:60px; background:#1a2a0a; border:2px solid #3a5a1a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; font-family:'VT323'; color:#fff;
  position:relative;
}
.inv-slot:hover { border-color:#9eff5e; }
.inv-slot .ico { font-size:24px; }
.inv-slot .qty { position:absolute; bottom:2px; right:4px; font-size:12px; color:#ffe066; }

@media (max-width:768px) {
  .game-title { font-size:60px; }
  #stats { transform:scale(0.85); transform-origin: bottom left; }
  #phone { transform: scale(0.85); transform-origin: bottom right; }
  .tv-screen-overlay { width:90vw; height:60vw; }
  .monitor-screen { width:90vw; height:60vw; }
  #computerUI.casino-focus .monitor-screen { width:94vw; height:72vw; }
  .casino-hub,
  .casino-grid,
  .casino-meta,
  .casino-lobby-grid { grid-template-columns:1fr; }
  .roulette-board { grid-template-columns:1fr; }
  .roulette-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
}