/* ============================================================
   GROSSMAIL TYCOON  —  styles.css
   AAA-feel dark comedy UI: deep gradients, glass, grime, glow
   © happystoner5420 Games
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Segoe UI',Inter,'Helvetica Neue',Arial,sans-serif;color:#e8e6df;background:#0a0907;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;user-select:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
input{font-family:inherit}
kbd{display:inline-block;padding:2px 7px;border-radius:5px;background:#1a1814;border:1px solid #2e2a22;border-bottom-width:2px;color:#f5d27a;font-size:11px;font-family:'JetBrains Mono','Consolas',monospace;margin:0 2px}

/* ---------- BACKGROUND ---------- */
body{
  background:
    radial-gradient(ellipse at 20% 10%, #2c2114 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #3a1c10 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #1b1109 0%, #06050300 70%),
    linear-gradient(180deg,#0a0907 0%,#070604 100%);
}
#bg-noise{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#bg-grime{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><defs><radialGradient id='g1' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23000' stop-opacity='.65'/><stop offset='100%25' stop-color='%23000' stop-opacity='0'/></radialGradient><filter id='blob'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='60'/></filter></defs><g filter='url(%23blob)'><circle cx='120' cy='140' r='80' fill='url(%23g1)'/><circle cx='460' cy='90' r='70' fill='url(%23g1)'/><circle cx='540' cy='460' r='110' fill='url(%23g1)'/><circle cx='180' cy='520' r='90' fill='url(%23g1)'/><circle cx='330' cy='300' r='130' fill='url(%23g1)'/></g></svg>");
  background-size:cover;
}
#bg-vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.6) 85%, rgba(0,0,0,.9) 100%);
}
#bg-flies{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.55}

/* ---------- SCREEN SYSTEM ---------- */
.screen{position:fixed;inset:0;display:none;z-index:10;overflow:hidden}
.screen.active{display:flex;align-items:center;justify-content:center;animation:screenFade .5s ease}
@keyframes screenFade{from{opacity:0;transform:scale(.98) translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   MAIN MENU
   ============================================================ */
#screen-menu{padding:24px}
.menu-wrap{
  width:min(720px,96vw);
  display:flex;flex-direction:column;align-items:center;gap:36px;
  position:relative;
}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.logo-art{width:230px;height:230px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(180,80,0,.35))}
.game-title{font-family:'Impact','Oswald','Arial Black',sans-serif;letter-spacing:.04em;line-height:.85;text-align:center;
  margin-top:-30px;}
.title-line-1{display:block;font-size:74px;
  background:linear-gradient(180deg,#fff3c4 0%,#f5b34b 40%,#a85a18 70%,#3a1808 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 0 rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.7);
  filter:drop-shadow(0 2px 0 #1a0d04);
}
.title-line-2{display:block;font-size:96px;
  background:linear-gradient(180deg,#ffe8b0 0%,#d8841a 35%,#6b2306 75%,#1a0500 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 6px 0 rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.8);
  filter:drop-shadow(0 0 18px rgba(255,140,40,.35));
}
.game-sub{font-size:13px;letter-spacing:.4em;color:#b0a48c;text-transform:uppercase;display:flex;gap:14px;align-items:center}
.rating{padding:3px 10px;border:1px solid #8b3a1a;background:linear-gradient(180deg,#3a1208,#1a0703);color:#ffb27a;border-radius:4px;font-weight:700;letter-spacing:.2em;font-size:11px;box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07)}

/* Menu buttons */
.menu-buttons{display:flex;flex-direction:column;gap:14px;width:min(440px,90vw)}
.menu-btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:14px 18px 14px 64px;text-align:left;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(40,30,20,.95) 0%, rgba(18,12,8,.95) 100%);
  border:1px solid #2e261c;border-bottom-color:#0a0805;
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,220,160,.07),
    inset 0 -2px 4px rgba(0,0,0,.55);
  transition:transform .12s ease,box-shadow .2s ease, border-color .2s ease, background .2s ease;
  overflow:hidden;
}
.menu-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#d8841a,#6b2306);box-shadow:0 0 18px rgba(216,132,26,.5)}
.menu-btn .btn-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.menu-btn .btn-text{display:block;font-weight:800;font-size:18px;letter-spacing:.18em;color:#fbe3b8}
.menu-btn .btn-sub{display:block;font-size:11px;letter-spacing:.16em;color:#8a7a5e;text-transform:uppercase;margin-top:2px}
.menu-btn:hover{transform:translateY(-1px);border-color:#5a3a18;background:linear-gradient(180deg,rgba(60,42,24,.95),rgba(22,14,10,.95));box-shadow:0 14px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,220,160,.12),0 0 0 1px rgba(216,132,26,.18)}
.menu-btn:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 6px rgba(0,0,0,.55)}
.menu-btn.primary::before{background:linear-gradient(180deg,#ffce5e,#b25e10);box-shadow:0 0 24px rgba(255,180,60,.55)}
.menu-btn.primary .btn-text{color:#ffe9bf}
.menu-btn.danger::before{background:linear-gradient(180deg,#ff5b3a,#5a0d05);box-shadow:0 0 24px rgba(255,80,40,.5)}
.menu-btn.danger .btn-text{color:#ffc7b6}

.menu-btn.small{padding:10px 14px;font-size:13px;letter-spacing:.1em;flex-direction:row;justify-content:center;text-align:center}
.menu-btn.small::before{display:none}
.menu-btn.small{padding:10px 16px}
.menu-btn.small .btn-text{font-size:13px}

.menu-footer{display:flex;gap:10px;align-items:center;color:#5b513f;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.menu-footer .dot{opacity:.5}

/* ============================================================
   PANELS (HOW TO PLAY / CREDITS)
   ============================================================ */
.panel{
  width:min(960px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(26,20,14,.96),rgba(12,9,6,.96));
  border:1px solid #2a2218;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,220,160,.06);
  overflow:hidden;backdrop-filter:blur(6px);
}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #241c12;background:linear-gradient(180deg,rgba(50,34,18,.5),rgba(0,0,0,0))}
.panel-header h2{font-family:'Impact','Oswald',sans-serif;letter-spacing:.2em;font-size:26px;color:#f5cf83}
.x-btn{width:36px;height:36px;border-radius:8px;background:#2a1f14;border:1px solid #3a2a18;color:#f5cf83;font-size:18px}
.x-btn:hover{background:#3a2a18}
.panel-body{padding:22px;overflow:auto;flex:1}
.panel-footer{padding:14px 22px;border-top:1px solid #241c12;display:flex;justify-content:flex-end;background:linear-gradient(0deg,rgba(50,34,18,.4),rgba(0,0,0,0))}

/* How-to-play grid */
.howto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:22px}
.howto-card{position:relative;padding:16px 16px 16px 16px;border-radius:10px;background:linear-gradient(180deg,rgba(40,30,20,.85),rgba(18,12,8,.85));border:1px solid #2e251a;box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.06)}
.howto-num{font-family:'Impact','Oswald',sans-serif;font-size:36px;color:#a85a18;letter-spacing:.05em;line-height:1;margin-bottom:6px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.howto-card h3{font-size:13px;letter-spacing:.2em;color:#f5cf83;margin-bottom:8px}
.howto-card p{font-size:13.5px;line-height:1.5;color:#cdc3ad}

.howto-tips{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:10px;border:1px dashed #3a2a18;background:rgba(0,0,0,.25);margin-bottom:18px}
.howto-tips h4{font-size:12px;letter-spacing:.2em;color:#f5cf83;margin-bottom:6px}
.hotkey-row{font-size:13px;color:#cdc3ad}

.warning-box{padding:14px 16px;border-radius:10px;background:linear-gradient(180deg,rgba(80,20,12,.55),rgba(40,10,6,.55));border:1px solid #6a2210;color:#ffd9c8;font-size:13px;line-height:1.5}

/* Credits */
.credits-body{padding:0;display:flex;justify-content:center;align-items:flex-start}
.credits-roll{padding:30px 22px;text-align:center;display:flex;flex-direction:column;gap:24px;width:100%}
.credit-block{display:flex;flex-direction:column;gap:4px}
.credit-title{font-size:11px;letter-spacing:.4em;color:#8b7a5b;text-transform:uppercase}
.credit-name{font-size:18px;color:#f5e3bf;letter-spacing:.06em}
.credit-name.big-name{font-family:'Impact','Oswald',sans-serif;font-size:42px;letter-spacing:.08em;background:linear-gradient(180deg,#fff3c4,#a85a18 70%,#3a1808);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.credit-block.tiny .credit-name{font-size:11px;letter-spacing:.18em;color:#6c5d44}

/* ============================================================
   GAME SCREEN
   ============================================================ */
#screen-game.active{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:10px 12px}

.hud{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 14px;height:62px;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(28,22,14,.92),rgba(10,8,6,.92));
  border:1px solid #2a2218;border-radius:10px;
  box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,160,.06);
}
.brand-mini{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:8px;
  background:
    radial-gradient(circle at 30% 30%, #ffd166 0%, #b8651a 35%, #4a1c08 70%, #1a0903 100%);
  border:1px solid #6a3a16;
  box-shadow:inset 0 0 12px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.6),0 0 16px rgba(255,160,60,.25);
  position:relative;
}
.brand-mark::after{content:"";position:absolute;inset:6px;border-radius:4px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%);}
.brand-text .brand-name{font-family:'Impact','Oswald',sans-serif;letter-spacing:.18em;font-size:16px;color:#fbe3b8}
.brand-text .brand-sub{font-size:10px;letter-spacing:.3em;color:#7b6a4f}

.hud-stats{display:flex;gap:10px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;align-items:center;padding:6px 14px;min-width:80px;border-radius:8px;background:linear-gradient(180deg,rgba(40,30,18,.7),rgba(14,10,6,.7));border:1px solid #2a2218;box-shadow:inset 0 1px 0 rgba(255,220,160,.05),0 4px 10px rgba(0,0,0,.4)}
.stat-label{font-size:9.5px;letter-spacing:.3em;color:#8b7a5b}
.stat-value{font-family:'JetBrains Mono','Consolas',monospace;font-size:18px;color:#fbe3b8;font-weight:700;margin-top:2px;display:flex;gap:8px;align-items:center}
.heat-stat .stat-value{font-size:13px}
.heat-bar{width:90px;height:8px;border-radius:4px;background:#1a140c;overflow:hidden;border:1px solid #2a2218;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.heat-fill{height:100%;width:0%;background:linear-gradient(90deg,#2cb35a,#f5d27a 50%,#ff5b3a);transition:width .4s ease}
#heat-label{font-size:10px;letter-spacing:.2em;color:#a99672}

.hud-right{display:flex;gap:8px}
.hud-btn{padding:8px 12px;border-radius:6px;font-size:11px;letter-spacing:.2em;color:#f5cf83;background:linear-gradient(180deg,#3a2c1a,#1a1208);border:1px solid #2a2218;box-shadow:inset 0 1px 0 rgba(255,220,160,.07),0 4px 10px rgba(0,0,0,.4)}
.hud-btn:hover{background:linear-gradient(180deg,#4a3a22,#22180e)}

/* MAIN GRID */
#game-grid{display:grid;grid-template-columns:280px 1fr 360px;gap:10px;margin-top:10px;flex:1;min-height:0}
.game-panel{
  position:relative;
  background:linear-gradient(180deg,rgba(28,22,14,.92),rgba(10,8,6,.92));
  border:1px solid #2a2218;border-radius:10px;
  box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,160,.06);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.game-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #241c12;background:linear-gradient(180deg,rgba(50,34,18,.4),rgba(0,0,0,0))}
.game-panel-header h3{font-size:12px;letter-spacing:.3em;color:#f5cf83}
.game-panel-tools{display:flex;gap:6px;align-items:center}
.game-panel-tools input{background:#120c08;border:1px solid #2a2218;color:#fbe3b8;border-radius:6px;padding:6px 8px;font-size:12px;width:140px;outline:none}
.game-panel-tools input:focus{border-color:#6a3a16;box-shadow:0 0 0 2px rgba(216,132,26,.18)}
.icon-btn{width:28px;height:28px;border-radius:6px;background:#1a1208;border:1px solid #2a2218;color:#f5cf83}
.icon-btn:hover{background:#2a1f14}

/* Victims list */
.victims-scroll{overflow:auto;flex:1;padding:8px}
.victim-card{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;border-radius:8px;background:linear-gradient(180deg,rgba(40,30,18,.6),rgba(14,10,6,.6));border:1px solid #241c12;box-shadow:0 4px 10px rgba(0,0,0,.3);cursor:pointer;transition:transform .12s, border-color .2s, background .2s}
.victim-card:hover{transform:translateY(-1px);background:linear-gradient(180deg,rgba(60,42,22,.7),rgba(22,14,8,.7));border-color:#5a3a18}
.victim-card.selected{border-color:#d8841a;box-shadow:0 0 0 1px rgba(216,132,26,.4),0 8px 18px rgba(0,0,0,.5)}
.victim-portrait{width:42px;height:42px;border-radius:6px;background:linear-gradient(180deg,#3a2a18,#1a1208);border:1px solid #2a2218;display:flex;align-items:center;justify-content:center;font-family:'Impact','Oswald',sans-serif;font-size:18px;color:#f5cf83;flex:0 0 auto;overflow:hidden;position:relative}
.victim-portrait .portrait-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:2}
.victim-portrait .portrait-fallback{position:relative;z-index:1}
.victim-card.hospitalized{border-color:#7ea6c4;background:linear-gradient(180deg,rgba(60,80,110,.45),rgba(20,30,46,.6))}
.victim-card.hospitalized .victim-portrait{filter:grayscale(.6) brightness(.85)}
.victim-card.hospitalized .victim-portrait::after{content:"🏥";position:absolute;right:-2px;bottom:-2px;font-size:14px;text-shadow:0 1px 2px #000;z-index:3}
.victim-badge.hospital{color:#dff;background:rgba(120,170,210,.18);border-color:#5a8aaa;animation:hospPulse 1.6s infinite ease-in-out}
@keyframes hospPulse{0%,100%{box-shadow:0 0 0 0 rgba(120,170,210,.55)}50%{box-shadow:0 0 0 6px rgba(120,170,210,0)}}
.hosp-count{font-size:10px;color:#dff;opacity:.85;margin-left:4px}
.victim-info{flex:1;min-width:0}
.victim-name{font-size:13px;color:#fbe3b8;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.victim-addr{font-size:11px;color:#8b7a5b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.victim-badge{font-size:9.5px;letter-spacing:.18em;color:#ffb27a;padding:2px 6px;border-radius:99px;background:rgba(216,132,26,.12);border:1px solid #6a3a16;text-transform:uppercase}

/* Packing center */
#panel-packing{overflow:hidden}
.pack-stage{flex:1;display:flex;flex-direction:column;min-height:0;overflow:auto}
.pack-table{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at center, rgba(120,80,40,.18), transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px, transparent 2px 28px),
    linear-gradient(180deg,#1a120a,#0a0703);
  border-bottom:1px solid #241c12;
  overflow:visible;
  min-height:400px;
}
.box-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.box-art svg{width:min(92%,640px);height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.box-slots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;padding:18% 14% 14% 14%;pointer-events:none}
.slot{
  position:relative;border-radius:10px;border:2px dashed rgba(216,132,26,.25);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s, background .2s, transform .15s;
  pointer-events:auto;
}
.slot.empty{cursor:pointer}
.slot.empty:hover{border-color:rgba(216,132,26,.6);background:rgba(216,132,26,.05)}
.slot .slot-num{position:absolute;top:4px;left:8px;font-size:10px;color:#6a5a3e;letter-spacing:.2em}
.slot .slot-empty-label{font-size:10px;color:#5a4d35;letter-spacing:.2em;text-transform:uppercase}
.slot.filled{border:1px solid rgba(216,132,26,.35);background:rgba(0,0,0,.18);cursor:pointer}
.slot.filled:hover{background:rgba(80,40,20,.25)}
.slot-icon{width:78%;height:78%;display:flex;align-items:center;justify-content:center;animation:wobble 4s ease-in-out infinite}
.slot-icon svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
@keyframes wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

.ship-controls{
  display:flex;gap:10px;align-items:center;padding:12px 14px;
  background:linear-gradient(180deg,rgba(50,34,18,.4),rgba(0,0,0,0));
}
.ship-info{display:flex;flex-direction:column;gap:2px;margin-right:auto;font-size:12px;color:#cdc3ad}
.ship-line{display:flex;gap:8px;align-items:center;font-size:12px}
.ship-line span{color:#8b7a5b;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.ship-line strong{color:#fbe3b8;font-family:'JetBrains Mono','Consolas',monospace;font-size:14px}

.ship-btn{
  padding:12px 18px;border-radius:8px;font-size:13px;letter-spacing:.22em;font-weight:800;color:#fbe3b8;
  background:linear-gradient(180deg,#3a2c1a,#1a1208);
  border:1px solid #2a2218;border-bottom-color:#0a0805;
  box-shadow:inset 0 1px 0 rgba(255,220,160,.07),0 8px 16px rgba(0,0,0,.5);
}
.ship-btn:hover{background:linear-gradient(180deg,#4a3a22,#22180e)}
.ship-btn.primary{background:linear-gradient(180deg,#d8841a,#5a2406);color:#fff3d8;border-color:#7a3a10;box-shadow:0 10px 22px rgba(216,132,26,.35),inset 0 1px 0 rgba(255,220,160,.2)}
.ship-btn.primary:hover{background:linear-gradient(180deg,#ffa84a,#7a2e08)}
.ship-btn.primary:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.ship-btn.secondary{color:#cdc3ad}

.addr-mini{font-size:11px;letter-spacing:.18em;color:#a99672;text-transform:uppercase;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Side panel (inventory / reaction / log) */
.panel-tabs{display:flex;gap:4px}
.tab-btn{padding:6px 10px;border-radius:6px 6px 0 0;font-size:10px;letter-spacing:.22em;color:#8b7a5b;background:transparent;border:1px solid transparent}
.tab-btn.active{color:#fbe3b8;background:linear-gradient(180deg,rgba(60,42,22,.7),rgba(22,14,8,.7));border-color:#3a2a18;border-bottom-color:transparent}
.tab-pane{display:none;flex:1;overflow:auto;padding:10px}
.tab-pane.active{display:block}

.inventory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv-item{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,rgba(40,30,18,.7),rgba(14,10,6,.7));border:1px solid #2a2218;cursor:pointer;transition:transform .12s, border-color .2s, background .2s;overflow:hidden}
.inv-item:hover{transform:translateY(-2px);border-color:#5a3a18}
.inv-item.locked{filter:grayscale(.8) brightness(.55);cursor:not-allowed}
.inv-item .inv-img{width:72%;height:60%;display:flex;align-items:center;justify-content:center}
.inv-item .inv-img svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.inv-item .inv-name{font-size:10.5px;letter-spacing:.08em;color:#cdc3ad;text-align:center;line-height:1.1;padding:0 4px}
.inv-item .inv-stench{position:absolute;top:4px;right:6px;font-size:9px;letter-spacing:.1em;color:#ffb27a;background:rgba(0,0,0,.5);border:1px solid #6a3a16;border-radius:99px;padding:1px 6px}
.inv-item .inv-key{position:absolute;top:4px;left:6px;font-size:9px;color:#8b7a5b;font-family:'JetBrains Mono',monospace;background:rgba(0,0,0,.5);border-radius:4px;padding:1px 5px}
.inv-item .inv-cost{position:absolute;bottom:4px;right:6px;font-size:9px;color:#f5cf83;background:rgba(0,0,0,.45);border-radius:4px;padding:1px 5px;font-family:'JetBrains Mono',monospace}

.reaction-area{display:flex;flex-direction:column;gap:12px;padding:4px}
.reaction-empty{color:#7b6a4f;text-align:center;padding:40px 10px;font-size:13px;letter-spacing:.05em;font-style:italic}
.reaction-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(40,30,18,.7),rgba(14,10,6,.7));border:1px solid #2a2218}
.reaction-card .rc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.reaction-card .rc-name{font-size:13px;color:#fbe3b8;font-weight:700}
.reaction-card .rc-tag{font-size:9.5px;letter-spacing:.2em;color:#ffb27a;padding:2px 6px;border-radius:99px;background:rgba(216,132,26,.12);border:1px solid #6a3a16}
.reaction-card .rc-text{font-size:12.5px;color:#cdc3ad;line-height:1.4}

.event-log{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#cdc3ad;font-family:'JetBrains Mono','Consolas',monospace}
.event-log .log-line{padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.25);border-left:3px solid #6a3a16}
.event-log .log-line.bad{border-left-color:#b03a1a;color:#ffb6a0}
.event-log .log-line.good{border-left-color:#2cb35a;color:#a8e8b6}
.event-log .log-line .log-time{color:#6a5a3e;margin-right:6px;font-size:11px}

/* Ticker */
#ticker{display:flex;align-items:center;height:34px;flex:0 0 auto;margin-top:10px;border:1px solid #2a2218;border-radius:8px;background:linear-gradient(180deg,rgba(28,22,14,.92),rgba(10,8,6,.92));overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,220,160,.06)}
.ticker-label{padding:0 12px;height:100%;display:flex;align-items:center;background:linear-gradient(180deg,#d8841a,#5a2406);color:#fff3d8;font-size:10px;letter-spacing:.3em;font-weight:800}
.ticker-track{flex:1;overflow:hidden;position:relative}
.ticker-text{white-space:nowrap;color:#cdc3ad;font-size:12.5px;letter-spacing:.06em;padding-left:100%;animation:tickerScroll 28s linear infinite}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ============================================================
   MODALS
   ============================================================ */
.modal-root{position:fixed;inset:0;z-index:100;pointer-events:none}
.modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);pointer-events:auto;animation:screenFade .25s ease}
.modal.hidden{display:none}
.modal-inner{
  width:min(440px,92vw);padding:26px 22px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,rgba(30,22,14,.98),rgba(12,9,6,.98));
  border:1px solid #2a2218;
  box-shadow:0 30px 80px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,220,160,.07);
}
.modal-inner h2{font-family:'Impact','Oswald',sans-serif;letter-spacing:.2em;font-size:30px;color:#f5cf83;margin-bottom:8px}
.modal-inner p{color:#cdc3ad;font-size:13px;margin-bottom:18px}
.modal-buttons{display:flex;flex-direction:column;gap:10px}
.modal-buttons.row{flex-direction:row;justify-content:center}
.modal-buttons.row .menu-btn{padding:10px 18px;flex-direction:row;text-align:center;justify-content:center}
.modal-buttons.row .menu-btn::before{display:none}
.exit-credit{margin-top:14px;color:#6a5a3e;font-size:11px;letter-spacing:.2em}

/* ============================================================
   REACTION OVERLAY (after shipping)
   ============================================================ */
.reaction-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);animation:screenFade .25s ease}
.reaction-overlay.hidden{display:none}
.reaction-frame{width:min(720px,94vw);display:grid;grid-template-columns:240px 1fr;gap:18px;padding:22px;border-radius:16px;background:linear-gradient(180deg,rgba(30,22,14,.98),rgba(12,9,6,.98));border:1px solid #2a2218;box-shadow:0 30px 80px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,220,160,.07)}
.reaction-portrait{width:240px;height:240px;border-radius:12px;background:#1a1208;border:1px solid #2a2218;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.reaction-portrait svg{width:100%;height:100%}
.reaction-bubble{display:flex;flex-direction:column;gap:10px}
.reaction-name{font-family:'Impact','Oswald',sans-serif;letter-spacing:.16em;font-size:26px;color:#f5cf83}
.reaction-text{font-size:14px;color:#cdc3ad;line-height:1.55;flex:1;padding:12px;border-radius:10px;background:rgba(0,0,0,.3);border-left:3px solid #d8841a;min-height:120px}
.reaction-actions{display:flex;gap:6px;flex-wrap:wrap}
.reaction-tag{font-size:10px;letter-spacing:.2em;padding:4px 8px;border-radius:99px;border:1px solid #6a3a16;background:rgba(216,132,26,.15);color:#ffb27a;text-transform:uppercase}
.reaction-tag.bad{border-color:#b03a1a;background:rgba(176,58,26,.15);color:#ffb6a0}
.reaction-tag.fbi{border-color:#3a6ab0;background:rgba(58,106,176,.18);color:#a8c8ff}
.reaction-tag.cops{border-color:#1a4f8b;background:rgba(26,79,139,.18);color:#a8c0ee}
.reaction-tag.good{border-color:#2c8b3a;background:rgba(44,139,58,.15);color:#a8e8b6}
.reaction-close{align-self:flex-end;margin-top:auto;padding:10px 18px;border-radius:8px;background:linear-gradient(180deg,#3a2c1a,#1a1208);border:1px solid #2a2218;color:#fbe3b8;font-size:12px;letter-spacing:.22em}
.reaction-close:hover{background:linear-gradient(180deg,#4a3a22,#22180e)}

/* ============================================================
   ICONS (decorative SVG injected via CSS)
   ============================================================ */
.btn-icon[data-icon="play"]::before{content:"";width:22px;height:22px;background:radial-gradient(circle,#ffd166,transparent 60%);border-radius:50%;display:block;box-shadow:0 0 18px rgba(255,180,60,.5)}
.btn-icon[data-icon="howto"]::before{content:"?";font-family:'Impact',sans-serif;font-size:26px;color:#f5cf83;text-shadow:0 0 12px rgba(245,207,131,.5)}
.btn-icon[data-icon="credits"]::before{content:"✶";font-size:24px;color:#f5cf83;text-shadow:0 0 12px rgba(245,207,131,.5)}
.btn-icon[data-icon="exit"]::before{content:"⏻";font-size:24px;color:#ff7a5b;text-shadow:0 0 14px rgba(255,90,60,.5)}

/* ============================================================
   ANIMATIONS / FLOATING STINK LINES
   ============================================================ */
.stink{position:absolute;font-size:20px;color:#9bbf6a;text-shadow:0 0 6px rgba(155,191,106,.6);animation:stinkRise 1.8s ease-out forwards;pointer-events:none}
@keyframes stinkRise{0%{opacity:0;transform:translate(-50%,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1.2)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  #game-grid{grid-template-columns:230px 1fr 280px}
}
@media (max-width:860px){
  #game-grid{grid-template-columns:1fr;grid-auto-rows:minmax(180px,auto)}
  .title-line-1{font-size:54px}
  .title-line-2{font-size:74px}
  .reaction-frame{grid-template-columns:1fr;padding:14px}
  .reaction-portrait{width:100%;height:200px}
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a2c1a,#1a1208);border-radius:6px;border:1px solid #2a2218}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a3a22,#22180e)}

/* Police report scrollbars (light theme) */
.police-report-document::-webkit-scrollbar,
.evidence-grid::-webkit-scrollbar{width:8px;height:8px}
.police-report-document::-webkit-scrollbar-track,
.evidence-grid::-webkit-scrollbar-track{background:#e8e4d8}
.police-report-document::-webkit-scrollbar-thumb,
.evidence-grid::-webkit-scrollbar-thumb{background:#8a8a8a;border-radius:4px}
.police-report-document::-webkit-scrollbar-thumb:hover,
.evidence-grid::-webkit-scrollbar-thumb:hover{background:#5a5a5a}

/* ============================================================
   UTIL
   ============================================================ */
.hidden{display:none!important}
.row{display:flex;flex-direction:row}
.center{display:flex;align-items:center;justify-content:center}

/* ============================================================
   POLICE REPORT OVERLAY
   ============================================================ */
.police-report-overlay{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  animation:screenFade .3s ease;
  padding:20px;overflow:auto;
}
.police-report-overlay.hidden{display:none}

.police-report-document{
  width:min(900px,96vw);max-height:90vh;
  background:linear-gradient(180deg,#f8f6f0 0%,#e8e4d8 100%);
  border:3px solid #2a2a2a;border-radius:4px;
  box-shadow:0 40px 100px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.5);
  padding:32px 40px;
  color:#1a1a1a;
  font-family:'Courier New','Courier',monospace;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}

.auto-fbi-banner{
  position:absolute;
  top:0;left:0;right:0;
  background:linear-gradient(180deg,#d8341a,#b02810);
  color:#fff;
  text-align:center;
  padding:12px 20px;
  font-size:16px;
  font-weight:bold;
  letter-spacing:.2em;
  text-transform:uppercase;
  border-bottom:3px solid #8a1a08;
  box-shadow:0 4px 12px rgba(216,52,26,.5);
  animation:bannerPulse 2s infinite;
  z-index:10;
}

@keyframes bannerPulse{
  0%,100%{background:linear-gradient(180deg,#d8341a,#b02810)}
  50%{background:linear-gradient(180deg,#ff4a2a,#d8341a)}
}

.auto-fbi-banner + .report-header{
  margin-top:48px;
}

.police-report-document::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 1px,rgba(0,0,0,.015) 1px 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='paper'><feTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .02 0'/></filter><rect width='100%25' height='100%25' filter='url(%23paper)'/></svg>");
  pointer-events:none;
  border-radius:2px;
}

.report-header{
  display:grid;grid-template-columns:80px 1fr 140px;gap:16px;
  align-items:center;padding-bottom:20px;
  border-bottom:3px double #2a2a2a;
  margin-bottom:24px;
  position:relative;
}

.report-badge{
  font-size:64px;text-align:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.report-title h2{
  font-family:'Arial Black','Impact',sans-serif;
  font-size:22px;letter-spacing:.08em;
  color:#1a1a1a;margin:0;line-height:1.1;
  text-transform:uppercase;
}

.report-subtitle{
  font-size:14px;letter-spacing:.3em;
  color:#4a4a4a;margin-top:4px;
  text-transform:uppercase;font-weight:bold;
}

.report-case{
  text-align:right;
  border:2px solid #2a2a2a;
  padding:8px 12px;background:#fff;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.1);
}

.case-label{
  font-size:10px;letter-spacing:.2em;
  color:#6a6a6a;text-transform:uppercase;
}

.case-number{
  font-family:'Courier New',monospace;
  font-size:16px;font-weight:bold;
  color:#d8341a;margin-top:2px;
}

.report-meta{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px;margin-bottom:24px;
  padding:12px;background:rgba(0,0,0,.03);
  border:1px solid #d8d8d8;
}

.meta-row{
  display:flex;gap:8px;align-items:baseline;
  font-size:13px;
}

.meta-label{
  font-weight:bold;color:#2a2a2a;
  letter-spacing:.08em;
}

.meta-value{
  color:#4a4a4a;
}

.report-section{
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid #d8d8d8;
}

.report-section:last-of-type{
  border-bottom:none;
}

.section-header{
  font-size:12px;letter-spacing:.25em;
  font-weight:bold;color:#1a1a1a;
  text-transform:uppercase;
  margin-bottom:12px;
  padding-bottom:6px;
  border-bottom:2px solid #2a2a2a;
}

.officer-info,.complainant-info{
  display:flex;gap:16px;align-items:center;
  padding:12px;background:#fff;
  border:1px solid #d8d8d8;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.05);
}

.officer-photo,.complainant-photo{
  width:80px;height:80px;
  border:2px solid #2a2a2a;
  background:#e8e8e8;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
  box-shadow:0 4px 8px rgba(0,0,0,.2);
}

.officer-photo img,.complainant-photo img{
  width:100%;height:100%;
  object-fit:cover;
}

.photo-placeholder{
  font-family:'Impact',sans-serif;
  font-size:32px;color:#6a6a6a;
}

.officer-details,.complainant-details{
  flex:1;
}

.officer-name,.complainant-name{
  font-size:16px;font-weight:bold;
  color:#1a1a1a;margin-bottom:4px;
  text-transform:uppercase;
}

.officer-badge{
  font-size:13px;color:#4a4a4a;
  font-family:'Courier New',monospace;
}

.complainant-address{
  font-size:13px;color:#4a4a4a;
  line-height:1.4;
}

.complaint-type{
  padding:12px 16px;
  background:#fff3e8;
  border-left:4px solid #d8341a;
  font-size:14px;font-weight:bold;
  color:#d8341a;letter-spacing:.05em;
  text-transform:uppercase;
}

.evidence-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;padding:12px;
  background:#fff;border:1px solid #d8d8d8;
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
}

.evidence-item{
  display:flex;flex-direction:column;
  align-items:center;gap:6px;
  padding:12px;border:1px solid #d8d8d8;
  background:#f8f8f8;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}

.evidence-icon{
  width:80px;height:80px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #d8d8d8;
  padding:8px;
}

.evidence-icon svg{
  width:100%;height:100%;
}

.evidence-label{
  font-size:10px;letter-spacing:.2em;
  color:#6a6a6a;text-transform:uppercase;
  font-weight:bold;
}

.evidence-name{
  font-size:11px;color:#2a2a2a;
  text-align:center;line-height:1.2;
  font-weight:bold;
}

.narrative-text,.officer-notes{
  padding:16px;background:#fff;
  border:1px solid #d8d8d8;
  font-size:13px;line-height:1.7;
  color:#2a2a2a;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.05);
}

.officer-notes{
  background:#fff8e8;
  border-left:4px solid #d8841a;
  font-style:italic;
}

.report-footer{
  margin-top:32px;padding-top:20px;
  border-top:3px double #2a2a2a;
  display:flex;flex-direction:column;gap:12px;
  position:relative;
}

.footer-row{
  display:flex;justify-content:space-between;
  align-items:center;padding:8px 12px;
  background:rgba(0,0,0,.03);
  border:1px solid #d8d8d8;
}

.footer-label{
  font-size:12px;letter-spacing:.15em;
  font-weight:bold;color:#2a2a2a;
  text-transform:uppercase;
}

.footer-value{
  font-size:14px;font-weight:bold;
  color:#4a4a4a;
  font-family:'Courier New',monospace;
}

.footer-value.heat-warning{
  color:#d8341a;font-size:18px;
}

.report-stamp{
  position:absolute;right:40px;top:-10px;
  font-family:'Impact',sans-serif;
  font-size:32px;letter-spacing:.12em;
  color:rgba(216,52,26,.25);
  transform:rotate(-12deg);
  border:4px solid rgba(216,52,26,.25);
  padding:8px 20px;
  text-transform:uppercase;
  pointer-events:none;
}

.report-stamp.fbi-stamp{
  color:rgba(58,106,176,.3);
  border-color:rgba(58,106,176,.3);
}

.fbi-report .report-header{
  background:linear-gradient(180deg,rgba(58,106,176,.08),transparent);
}

.fbi-case{
  background:linear-gradient(180deg,#e8f0ff,#fff)!important;
  border-color:#3a6ab0!important;
}

.fbi-case .case-number{
  color:#3a6ab0!important;
}

.fbi-complaint{
  background:#ffe8e8!important;
  border-left-color:#b03a1a!important;
  color:#b03a1a!important;
}

.officer-division{
  font-size:11px;color:#6a6a6a;
  margin-top:2px;font-style:italic;
}

.complainant-status{
  font-size:11px;color:#3a6ab0;
  margin-top:4px;font-weight:bold;
  text-transform:uppercase;letter-spacing:.1em;
}

.evidence-threat{
  font-size:9px;color:#d8341a;
  margin-top:4px;font-weight:bold;
  text-transform:uppercase;letter-spacing:.15em;
}

.threat-assessment{
  padding:16px;background:#fff8e8;
  border:2px solid #d8841a;
  display:flex;flex-direction:column;gap:8px;
}

.threat-row{
  display:flex;justify-content:space-between;
  align-items:center;padding:8px 12px;
  background:#fff;border:1px solid #d8d8d8;
}

.threat-label{
  font-size:11px;letter-spacing:.15em;
  font-weight:bold;color:#2a2a2a;
  text-transform:uppercase;
}

.threat-value{
  font-size:13px;font-weight:bold;
  color:#4a4a4a;font-family:'Courier New',monospace;
}

.threat-value.threat-high{
  color:#d8341a;
}

.threat-value.threat-medium{
  color:#d8841a;
}

.threat-value.threat-low{
  color:#6a8a3a;
}

.fbi-notes{
  background:#fff3e8!important;
  border-left-color:#3a6ab0!important;
}

.status-federal{
  color:#d8341a!important;
  font-weight:bold!important;
}

.fbi-warning{
  background:#ffe8e8!important;
  border:2px solid #d8341a!important;
}

.fbi-warning .footer-label,
.fbi-warning .footer-value{
  color:#d8341a!important;
  font-weight:bold!important;
}

.police-report-close{
  margin-top:24px;
  padding:14px 28px;
  background:linear-gradient(180deg,#3a2c1a,#1a1208);
  border:2px solid #2a2218;
  border-radius:8px;
  color:#fbe3b8;
  font-size:14px;letter-spacing:.22em;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.5);
  transition:transform .12s,background .2s;
  width:100%;
}

.police-report-close:hover{
  background:linear-gradient(180deg,#4a3a22,#22180e);
  transform:translateY(-2px);
}

.police-report-close:active{
  transform:translateY(0);
}

@media (max-width:860px){
  .police-report-document{padding:20px 16px}
  .report-header{grid-template-columns:60px 1fr;gap:12px}
  .report-case{grid-column:1/-1;text-align:center}
  .report-badge{font-size:48px}
  .report-title h2{font-size:18px}
  .report-meta{grid-template-columns:1fr}
  .evidence-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .report-stamp{font-size:24px;right:10px}
}

/* ============================================================
   NEIGHBORHOOD CHAT OVERLAY
   ============================================================ */
.chat-overlay{
  position:fixed;inset:0;z-index:92;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);backdrop-filter:blur(6px);
  animation:screenFade .25s ease;
}
.chat-overlay.hidden{display:none}

.chat-window{
  width:min(900px,94vw);height:min(700px,90vh);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(28,22,14,.98),rgba(10,8,6,.98));
  border:2px solid #2a2218;border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,220,160,.08);
  overflow:hidden;
}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  background:linear-gradient(180deg,rgba(50,34,18,.7),rgba(30,20,12,.7));
  border-bottom:2px solid #2a2218;
}

.chat-title{
  display:flex;align-items:center;gap:12px;
}

.chat-icon{
  font-size:32px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

.chat-title-text{
  font-family:'Impact','Oswald',sans-serif;
  font-size:22px;letter-spacing:.18em;
  color:#f5cf83;
  text-shadow:0 2px 4px rgba(0,0,0,.5);
}

.chat-subtitle{
  font-size:11px;letter-spacing:.12em;
  color:#8b7a5b;text-transform:uppercase;
}

.chat-close-btn{
  width:40px;height:40px;
  border-radius:8px;
  background:linear-gradient(180deg,#3a2c1a,#1a1208);
  border:1px solid #2a2218;
  color:#f5cf83;font-size:20px;
  transition:transform .12s,background .2s;
}

.chat-close-btn:hover{
  background:linear-gradient(180deg,#4a3a22,#22180e);
  transform:scale(1.05);
}

.chat-body{
  flex:1;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 1px,rgba(0,0,0,.08) 1px 2px),
    linear-gradient(180deg,#0e0c08,#08060400);
  position:relative;
}

.chat-messages{
  height:100%;overflow-y:auto;overflow-x:hidden;
  padding:16px 20px;
  display:flex;flex-direction:column;gap:14px;
}

.chat-msg{
  display:flex;gap:12px;align-items:flex-start;
  animation:msgSlideIn .3s ease;
}

@keyframes msgSlideIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.chat-msg-avatar{
  width:48px;height:48px;
  border-radius:10px;
  background:linear-gradient(180deg,#3a2a18,#1a1208);
  border:2px solid #2a2218;
  display:flex;align-items:center;justify-content:center;
  font-family:'Impact','Oswald',sans-serif;
  font-size:16px;color:#f5cf83;
  flex-shrink:0;
  background-size:cover;background-position:center;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
}

.chat-msg-avatar::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 60%);
  pointer-events:none;
}

.player-avatar{
  background:linear-gradient(180deg,#d8841a,#5a2406)!important;
  color:#fff3d8!important;
  font-size:14px;letter-spacing:.1em;
}

.chat-msg-content{
  flex:1;min-width:0;
  background:linear-gradient(180deg,rgba(40,30,18,.7),rgba(20,14,8,.7));
  border:1px solid #2a2218;border-radius:10px;
  padding:10px 14px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}

.player-msg .chat-msg-content{
  background:linear-gradient(180deg,rgba(60,42,22,.8),rgba(30,20,10,.8));
  border-color:#5a3a18;
}

.chat-msg-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;flex-wrap:wrap;
}

.chat-msg-name{
  font-size:14px;font-weight:700;
  color:#fbe3b8;
  letter-spacing:.04em;
}

.chat-msg-badge{
  font-size:9px;letter-spacing:.15em;
  padding:2px 6px;border-radius:99px;
  background:rgba(216,132,26,.15);
  border:1px solid #6a3a16;
  color:#ffb27a;
  text-transform:uppercase;
}

.chat-msg-time{
  font-size:10px;color:#6a5a3e;
  margin-left:auto;
  font-family:'JetBrains Mono','Consolas',monospace;
}

.chat-msg-text{
  font-size:13.5px;line-height:1.5;
  color:#cdc3ad;
  word-wrap:break-word;
}

.system-msg{
  justify-content:center;
  padding:8px 16px;
  background:rgba(216,132,26,.12);
  border:1px solid #6a3a16;
  border-radius:8px;
  text-align:center;
}

.system-msg .chat-msg-text{
  font-size:12px;letter-spacing:.08em;
  color:#ffb27a;font-weight:600;
  text-transform:uppercase;
}

.chat-input-area{
  display:flex;gap:10px;
  padding:14px 20px;
  background:linear-gradient(180deg,rgba(50,34,18,.7),rgba(30,20,12,.7));
  border-top:2px solid #2a2218;
}

.chat-input{
  flex:1;
  background:linear-gradient(180deg,#120c08,#0a0604);
  border:2px solid #2a2218;
  border-radius:8px;
  padding:12px 16px;
  color:#fbe3b8;
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}

.chat-input:focus{
  border-color:#d8841a;
  box-shadow:0 0 0 3px rgba(216,132,26,.18),inset 0 2px 4px rgba(0,0,0,.5);
}

.chat-input::placeholder{
  color:#6a5a3e;
}

.chat-send-btn{
  padding:12px 24px;
  border-radius:8px;
  background:linear-gradient(180deg,#d8841a,#5a2406);
  border:1px solid #7a3a10;
  color:#fff3d8;
  font-size:13px;letter-spacing:.22em;
  font-weight:800;
  box-shadow:0 6px 14px rgba(216,132,26,.35),inset 0 1px 0 rgba(255,220,160,.2);
  transition:transform .12s,background .2s;
}

.chat-send-btn:hover{
  background:linear-gradient(180deg,#ffa84a,#7a2e08);
  transform:translateY(-1px);
}

.chat-send-btn:active{
  transform:translateY(0);
}

/* Chat scrollbar */
.chat-messages::-webkit-scrollbar{width:10px}
.chat-messages::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
.chat-messages::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#3a2c1a,#1a1208);
  border-radius:6px;border:1px solid #2a2218;
}
.chat-messages::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#5a3a22,#22180e);
}

@media (max-width:860px){
  .chat-window{width:96vw;height:94vh}
  .chat-msg-avatar{width:40px;height:40px;font-size:14px}
  .chat-input-area{flex-direction:column}
  .chat-send-btn{width:100%}
}