@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Crimson+Pro:wght@400;600;700&display=swap');

:root {
  --primary-red:    #E63946;
  --primary-blue:   #457B9D;
  --primary-yellow: #F4D03F;
  --dark-bg:        #1D3557;
  --darker-bg:      #0D1B2A;
  --light-text:     #F1FAEE;
  --accent-orange:  #FF6B35;
  --success-green:  #06D6A0;
  --danger-red:     #EF476F;
  --comic-shadow:   4px 4px 0px rgba(0,0,0,0.8);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Crimson Pro', serif;
  background:linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
  background-attachment:fixed;
  color:var(--light-text);
  overflow-x:hidden;
}

.screen { display:none; min-height:100vh; padding:20px; }
.screen.active { display:flex; align-items:center; justify-content:center; }
#game-screen        { display:none; flex-direction:column; padding:0; min-height:100vh; }
#game-screen.active { display:flex; }

/* AUTH */
.game-title {
  font-family:'Bangers', cursive;
  font-size:5rem;
  color:var(--primary-yellow);
  text-shadow:3px 3px 0 var(--primary-red), 6px 6px 0 var(--primary-blue), 9px 9px 0 rgba(0,0,0,0.5);
  letter-spacing:0.05em;
  transform:skew(-2deg);
  animation:titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse {
  0%,100% { transform:skew(-2deg) scale(1); }
  50%     { transform:skew(-2deg) scale(1.02); }
}
.game-subtitle {
  font-family:'Bangers', cursive; font-size:1.5rem;
  color:var(--light-text); text-shadow:var(--comic-shadow);
  letter-spacing:0.3em; margin-top:-8px;
}
.auth-container {
  background:linear-gradient(to bottom, var(--dark-bg), var(--darker-bg));
  border:5px solid var(--primary-yellow); border-radius:20px;
  padding:60px 40px 40px; max-width:500px; width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,0.5), inset 0 0 100px rgba(244,208,63,0.06);
}
.comic-burst { text-align:center; margin-bottom:40px; position:relative; }
.comic-burst::before {
  content:''; position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:150px; height:150px;
  background:radial-gradient(circle, var(--primary-yellow) 0%, transparent 70%);
  opacity:0.2; animation:burstGlow 2s ease-in-out infinite;
}
@keyframes burstGlow {
  0%,100% { opacity:0.2; transform:translateX(-50%) scale(1); }
  50%     { opacity:0.4; transform:translateX(-50%) scale(1.1); }
}
.auth-tabs { display:flex; gap:10px; margin-bottom:30px; }
.auth-tab {
  flex:1; padding:15px; background:transparent;
  border:3px solid var(--primary-blue); color:var(--light-text);
  font-family:'Bangers', cursive; font-size:1.2rem; cursor:pointer;
  transition:all 0.3s; position:relative; overflow:hidden;
}
.auth-tab::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:var(--primary-blue); transition:left 0.3s; z-index:-1;
}
.auth-tab:hover::before, .auth-tab.active::before { left:0; }
.auth-tab.active { border-color:var(--primary-yellow); color:var(--primary-yellow); }
.auth-form        { display:none; }
.auth-form.active { display:flex; flex-direction:column; gap:20px; }
.auth-error { color:var(--danger-red); font-weight:bold; text-align:center; min-height:20px; }

/* INPUTS */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
  padding:15px; background:rgba(255,255,255,0.1);
  border:2px solid var(--primary-blue); border-radius:8px;
  color:var(--light-text); font-family:'Crimson Pro', serif;
  font-size:1rem; transition:all 0.3s; width:100%;
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--primary-yellow);
  background:rgba(255,255,255,0.15); box-shadow:0 0 20px rgba(244,208,63,0.3);
}
select option { background:var(--dark-bg); }
textarea { resize:vertical; }

/* BUTTONS */
.btn-primary {
  padding:15px 30px; font-family:'Bangers', cursive; font-size:1.3rem;
  background:linear-gradient(45deg, var(--primary-red), var(--accent-orange));
  color:white; border:none; cursor:pointer;
  box-shadow:var(--comic-shadow); transform:skew(-2deg);
  transition:all 0.3s; letter-spacing:0.05em;
}
.btn-primary:hover  { transform:skew(-2deg) scale(1.05); box-shadow:6px 6px 0 rgba(0,0,0,0.8); }
.btn-primary:active { transform:skew(-2deg) scale(0.98); }
.btn-secondary {
  padding:12px 24px; font-family:'Bangers', cursive; font-size:1.1rem;
  background:var(--primary-blue); color:var(--light-text);
  border:2px solid var(--primary-yellow); cursor:pointer; transition:all 0.3s;
}
.btn-secondary:hover { background:var(--primary-yellow); color:var(--dark-bg); }

/* CHARACTER SELECTION */
.character-container { width:100%; max-width:1200px; text-align:center; }
.screen-title {
  font-family:'Bangers', cursive; font-size:3rem;
  color:var(--primary-yellow); text-shadow:var(--comic-shadow);
  margin-bottom:40px; letter-spacing:0.05em;
}
.character-list {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:25px; margin-bottom:40px;
}
.character-card {
  background:linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
  border:4px solid var(--primary-blue); border-radius:15px;
  padding:28px; cursor:pointer; transition:all 0.3s;
  position:relative; overflow:hidden;
}
.character-card::before {
  content:'⚡'; position:absolute; top:-15px; right:-15px;
  font-size:5rem; opacity:0.08; transform:rotate(-20deg); pointer-events:none;
}
.character-card:hover { border-color:var(--primary-yellow); transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.character-card h3 { font-family:'Bangers', cursive; font-size:1.8rem; color:var(--primary-yellow); margin-bottom:8px; }
.character-card p  { opacity:0.8; margin-bottom:4px; }

/* CHARACTER CREATION */
.creation-container {
  width:100%; max-width:900px;
  background:linear-gradient(to bottom, var(--dark-bg), var(--darker-bg));
  border:5px solid var(--primary-yellow); border-radius:20px;
  padding:40px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  max-height:90vh; overflow-y:auto;
}
.creation-form { display:grid; gap:25px; }
.form-section {
  background:rgba(255,255,255,0.05);
  border:2px solid var(--primary-blue); border-radius:10px; padding:25px;
}
.form-section h3 { font-family:'Bangers', cursive; font-size:1.7rem; color:var(--primary-yellow); margin-bottom:18px; }
.help-text { opacity:0.7; margin-bottom:12px; font-style:italic; }
.stat-row { display:grid; grid-template-columns:130px 1fr 70px; gap:12px; align-items:center; margin-bottom:12px; }
.stat-row label { font-weight:bold; color:var(--primary-yellow); }
.stat-value { text-align:center; font-weight:bold; font-size:1.1rem; color:var(--success-green); }
.calculated-stats { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.calc-stat { background:rgba(0,0,0,0.3); border:2px solid var(--primary-yellow); border-radius:8px; padding:18px; text-align:center; }
.calc-stat span:first-child { display:block; color:var(--primary-yellow); margin-bottom:8px; font-weight:bold; }
.calc-stat span:last-child  { color:var(--success-green); font-size:2rem; }
.form-actions { display:flex; gap:20px; justify-content:center; margin-top:20px; }

/* GAME HUD */
.game-hud {
  background:linear-gradient(to right, var(--darker-bg), var(--dark-bg));
  border-bottom:4px solid var(--primary-yellow);
  padding:15px 20px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:15px; z-index:100;
}
.hud-character h3 { font-family:'Bangers', cursive; font-size:1.5rem; color:var(--primary-yellow); margin-bottom:8px; }
.hud-stats { display:flex; gap:20px; }
.hud-bar   { display:flex; flex-direction:column; gap:4px; min-width:180px; }
.hud-bar label { font-weight:bold; font-size:0.85rem; }
.bar-container { background:rgba(0,0,0,0.5); border:2px solid var(--primary-blue); border-radius:8px; height:18px; overflow:hidden; }
.bar-fill   { height:100%; transition:width 0.5s; }
.health-bar { background:linear-gradient(90deg, var(--danger-red), var(--accent-orange)); }
.karma-bar  { background:linear-gradient(90deg, var(--primary-blue), var(--primary-yellow)); }
.hud-location span { font-family:'Bangers', cursive; font-size:1.3rem; color:var(--primary-yellow); display:block; margin-bottom:5px; }
.hud-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* GAME MAIN */
.game-main {
  flex:1;
  display:grid;
  grid-template-columns:1fr 320px;
  overflow:hidden;
  min-height:0;
}

/* CITY MAP CONTAINER — fills left column */
.city-map-container {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(45deg,  rgba(13,27,42,0.95) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(13,27,42,0.95) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(13,27,42,0.95) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(13,27,42,0.95) 75%),
    linear-gradient(135deg, #121a24, #0d1520);
  background-size:40px 40px, 40px 40px, 40px 40px, 40px 40px, 100% 100%;
  background-position:0 0, 0 20px, 20px -20px, -20px 0, 0 0;
}

/* SCROLLABLE VIEWPORT */
.map-viewport {
  width:100%;
  height:100%;
  overflow:auto;
  cursor:grab;
  /* Hide scrollbars visually but keep scrolling functional */
  scrollbar-width:thin;
  scrollbar-color:rgba(69,123,157,0.5) transparent;
}
.map-viewport:active { cursor:grabbing; }
.map-viewport::-webkit-scrollbar       { width:6px; height:6px; }
.map-viewport::-webkit-scrollbar-track { background:transparent; }
.map-viewport::-webkit-scrollbar-thumb { background:rgba(69,123,157,0.5); border-radius:3px; }

/* THE ACTUAL MAP CANVAS — 1800×900, positioned inside viewport */
.city-map {
  position:relative;
  width:1800px;
  height:900px;
  flex-shrink:0;
}

/* PAN HINT */
.pan-hint {
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  color:rgba(255,255,255,0.6);
  padding:4px 14px;
  border-radius:12px;
  font-size:0.75rem;
  pointer-events:none;
  z-index:50;
  white-space:nowrap;
}

/* MINI MAP — anchored bottom-right of the map container */
.mini-map {
  position:absolute; bottom:40px; right:12px;
  width:180px; height:180px;
  background:rgba(0,0,0,0.88); border:3px solid var(--primary-yellow);
  border-radius:10px; padding:8px; z-index:60;
}
.mini-map h4 { font-family:'Bangers', cursive; color:var(--primary-yellow); font-size:0.85rem; margin-bottom:5px; text-align:center; }
#mini-map-view {
  width:100%; height:calc(100% - 22px);
  background:rgba(29,53,87,0.4); border:2px solid var(--primary-blue);
  border-radius:4px; position:relative; overflow:hidden;
}

/* RIGHT SIDE PANEL COLUMN */
.right-panel {
  display:flex;
  flex-direction:column;
  background:rgba(0,0,0,0.5);
  border-left:4px solid var(--primary-blue);
  overflow:hidden;
  min-height:0;
}

/* LOCATION PANEL — top half of right column */
.location-panel {
  padding:18px;
  border-bottom:3px solid var(--primary-blue);
  background:linear-gradient(180deg, rgba(29,53,87,0.8), rgba(13,27,42,0.6));
  flex-shrink:0;
}
.location-panel h3 {
  font-family:'Bangers', cursive; font-size:1.5rem;
  color:var(--primary-yellow); margin-bottom:8px;
}
.location-panel p {
  line-height:1.5; margin-bottom:12px; font-size:0.9rem; opacity:0.9;
}
#location-actions { display:flex; flex-direction:column; gap:8px; }
.location-action-btn {
  padding:10px 18px; background:linear-gradient(45deg, var(--primary-red), var(--accent-orange));
  color:white; border:none; border-radius:8px;
  font-family:'Bangers', cursive; font-size:1rem;
  cursor:pointer; transition:all 0.25s; box-shadow:3px 3px 0 rgba(0,0,0,0.4);
  text-align:left;
}
.location-action-btn:hover { transform:translateY(-2px); box-shadow:5px 5px 0 rgba(0,0,0,0.4); filter:brightness(1.1); }

/* ACTIVITY LOG — bottom half of right column, scrollable */
.game-log {
  flex:1;
  padding:15px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.game-log h4 { font-family:'Bangers', cursive; font-size:1.3rem; color:var(--primary-yellow); margin-bottom:10px; flex-shrink:0; }
.log-entries { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; min-height:0; }
.log-entry {
  background:rgba(255,255,255,0.05); border-left:3px solid var(--primary-blue);
  padding:7px 9px; border-radius:4px; font-size:0.82rem; animation:slideIn 0.3s;
  flex-shrink:0;
}
@keyframes slideIn {
  from { opacity:0; transform:translateX(10px); }
  to   { opacity:1; transform:translateX(0); }
}
.log-entry.combat  { border-left-color:var(--danger-red);    background:rgba(239,71,111,0.1); }
.log-entry.success { border-left-color:var(--success-green); background:rgba(6,214,160,0.1); }

/* MODALS */
.modal { display:none; position:fixed; z-index:1000; inset:0; background:rgba(0,0,0,0.82); backdrop-filter:blur(5px); }
.modal.active { display:flex; align-items:center; justify-content:center; animation:fadeIn 0.25s; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal-content {
  background:linear-gradient(to bottom, var(--dark-bg), var(--darker-bg));
  border:5px solid var(--primary-yellow); border-radius:18px;
  padding:35px; max-width:620px; width:92%;
  max-height:82vh; overflow-y:auto; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,0.6); animation:slideUp 0.3s;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
.modal-content.large { max-width:880px; }
.modal-content h2 { font-family:'Bangers', cursive; font-size:2.4rem; color:var(--primary-yellow); margin-bottom:25px; text-align:center; }
.close { position:absolute; top:18px; right:25px; font-size:2rem; font-weight:bold; cursor:pointer; transition:all 0.25s; }
.close:hover { color:var(--danger-red); transform:scale(1.2); }

/* GM TOOLS */
.gm-tabs { display:flex; gap:10px; margin-bottom:25px; }
.gm-tab { flex:1; padding:13px; background:transparent; border:3px solid var(--primary-blue); color:var(--light-text); font-family:'Bangers', cursive; font-size:1.15rem; cursor:pointer; transition:all 0.3s; }
.gm-tab.active { background:var(--primary-blue); border-color:var(--primary-yellow); }
.gm-panel        { display:none; }
.gm-panel.active { display:block; }
.gm-stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin:18px 0; }
.stat-input label { display:block; color:var(--primary-yellow); margin-bottom:5px; font-weight:bold; }
.gm-panel form { display:flex; flex-direction:column; gap:15px; }
.gm-panel label { display:flex; align-items:center; gap:10px; }

/* UTILITY */
.gm-only { display:none; }

::-webkit-scrollbar       { width:8px; }
::-webkit-scrollbar-track { background:var(--darker-bg); }
::-webkit-scrollbar-thumb { background:var(--primary-blue); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-yellow); }

/* ============================================================
   LOG + CHAT COMBINED AREA
   ============================================================ */
.log-chat-area {
  flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;
}

.log-chat-tabs {
  display:flex; gap:2px; padding:6px 6px 0;
  background:rgba(0,0,0,0.4); flex-shrink:0;
}
.lc-tab {
  flex:1; padding:7px 4px; background:rgba(255,255,255,0.06);
  border:2px solid transparent; border-bottom:none;
  color:var(--light-text); font-family:'Bangers',cursive; font-size:0.9rem;
  cursor:pointer; transition:all 0.2s; border-radius:6px 6px 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lc-tab:hover  { background:rgba(255,255,255,0.12); }
.lc-tab.active { background:rgba(29,53,87,0.9); border-color:var(--primary-yellow); color:var(--primary-yellow); }
.lc-tab-dm.has-unread { color:var(--danger-red); animation:tabPulse 1s ease-in-out infinite; }
@keyframes tabPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.lc-panel        { display:none; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
.lc-panel.active { display:flex; }

/* Activity log inside lc-panel */
#panel-log { padding:10px; }
.log-entries { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:5px; min-height:0; }
.log-entry {
  background:rgba(255,255,255,0.05); border-left:3px solid var(--primary-blue);
  padding:6px 8px; border-radius:4px; font-size:0.8rem; flex-shrink:0;
  animation:slideIn 0.3s;
}
.log-entry.combat  { border-left-color:var(--danger-red);    background:rgba(239,71,111,0.1); }
.log-entry.success { border-left-color:var(--success-green); background:rgba(6,214,160,0.1); }

/* Chat panels */
.chat-messages {
  flex:1; overflow-y:auto; padding:8px 10px;
  display:flex; flex-direction:column; gap:5px; min-height:0;
}
.chat-msg { font-size:0.82rem; line-height:1.4; word-break:break-word; }
.chat-msg .chat-sender {
  font-weight:bold; margin-right:5px; font-family:'Bangers',cursive;
  font-size:0.9rem; letter-spacing:0.03em;
}
.chat-msg .chat-text   { opacity:0.9; }
.chat-msg .chat-time   { opacity:0.45; font-size:0.72rem; margin-left:5px; }
.chat-msg.system-msg   { opacity:0.6; font-style:italic; }

.chat-input-row {
  display:flex; gap:6px; padding:8px; flex-shrink:0;
  border-top:2px solid rgba(69,123,157,0.4);
}
.chat-input-row input {
  flex:1; padding:8px 12px; font-size:0.85rem;
  background:rgba(255,255,255,0.08); border:2px solid var(--primary-blue);
  border-radius:6px; color:var(--light-text);
}
.chat-input-row input:focus { outline:none; border-color:var(--primary-yellow); }
.chat-input-row button {
  padding:8px 14px; background:var(--primary-blue); border:none;
  border-radius:6px; color:white; cursor:pointer; font-size:1rem;
  transition:background 0.2s;
}
.chat-input-row button:hover { background:var(--primary-yellow); color:var(--dark-bg); }

/* Players Online */
.players-online {
  padding:8px 10px; border-top:2px solid rgba(69,123,157,0.4);
  flex-shrink:0; max-height:110px; overflow-y:auto;
}
.players-online h4 { font-family:'Bangers',cursive; font-size:0.95rem; color:var(--success-green); margin-bottom:5px; }
.player-online-item {
  display:flex; align-items:center; gap:8px; padding:4px 6px;
  border-radius:5px; cursor:pointer; transition:background 0.2s; font-size:0.82rem;
}
.player-online-item:hover { background:rgba(255,255,255,0.1); }
.player-online-dot { width:8px; height:8px; border-radius:50%; background:var(--success-green); flex-shrink:0; }
.player-online-name { font-weight:bold; }
.player-online-zone { opacity:0.55; font-size:0.75rem; }

/* ============================================================
   COMBAT SCREEN
   ============================================================ */
.combat-screen {
  position:fixed; inset:0; z-index:500;
  display:none; flex-direction:column;
  background:#0a0a14;
}
.combat-screen.active { display:flex; }

.combat-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, #0a0a2a 0%, #1a0a2a 40%, #0a1a0a 100%);
  overflow:hidden;
}
.combat-bg::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px
  );
}
.combat-bg::after {
  content:'⚡'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:30rem; opacity:0.03; pointer-events:none;
}

.combat-arena {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-around;
  padding:40px 60px 20px; flex-shrink:0;
}

.combatant-side {
  display:flex; flex-direction:column; align-items:center; gap:15px;
}

.combatant-sprite {
  font-size:7rem; line-height:1;
  filter:drop-shadow(0 0 30px rgba(255,255,255,0.3));
  transition:transform 0.15s;
}
.hero-sprite  { animation:heroBob 2s ease-in-out infinite; }
.npc-sprite   { animation:npcBob 2.3s ease-in-out infinite; }
@keyframes heroBob { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-12px)} }
@keyframes npcBob  { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(8px)} }

.combatant-sprite.attack-flash { animation:attackFlash 0.4s forwards; }
.combatant-sprite.hurt-flash   { animation:hurtFlash   0.4s forwards; }
@keyframes attackFlash { 0%{transform:scale(1)} 50%{transform:scale(1.3) translateX(20px)} 100%{transform:scale(1)} }
@keyframes hurtFlash   { 0%,100%{filter:brightness(1)} 25%,75%{filter:brightness(3) saturate(0)} }

.combatant-info { text-align:center; }
.combatant-name {
  font-family:'Bangers',cursive; font-size:1.4rem;
  color:var(--primary-yellow); margin-bottom:8px; letter-spacing:0.05em;
}
.combatant-health-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.combatant-health-bar {
  width:220px; height:20px;
  background:rgba(0,0,0,0.6); border:2px solid rgba(255,255,255,0.2);
  border-radius:10px; overflow:hidden;
}
.combatant-health-fill {
  height:100%; transition:width 0.6s ease; border-radius:8px;
}
.hero-health-fill { background:linear-gradient(90deg,#06D6A0,#00fa9a); }
.npc-health-fill  { background:linear-gradient(90deg,#EF476F,#ff6b9d); }

.combat-vs {
  font-size:3rem; color:var(--primary-yellow);
  text-shadow:0 0 30px var(--primary-yellow);
  animation:vsPulse 1s ease-in-out infinite;
}
@keyframes vsPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.2);opacity:0.7} }

/* Roll result flash */
.roll-result {
  position:relative; z-index:10; text-align:center;
  font-family:'Bangers',cursive; font-size:2.5rem;
  min-height:60px; display:flex; align-items:center; justify-content:center;
  letter-spacing:0.1em; transition:all 0.3s;
}
.roll-result.white  { color:#aaa; }
.roll-result.green  { color:#06D6A0; text-shadow:0 0 20px #06D6A0; }
.roll-result.yellow { color:#FFD700; text-shadow:0 0 20px #FFD700; }
.roll-result.red    { color:#EF476F; text-shadow:0 0 30px #EF476F; animation:redFlash 0.5s; }
@keyframes redFlash { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* Combat log */
.combat-log {
  position:relative; z-index:10;
  flex:1; overflow-y:auto;
  padding:0 40px 10px; min-height:0;
}
.combat-log-entries { display:flex; flex-direction:column; gap:6px; }
.combat-log-entry {
  padding:8px 14px; border-radius:6px; font-size:0.88rem;
  border-left:4px solid var(--primary-blue);
  background:rgba(0,0,0,0.5); animation:slideIn 0.3s;
}
.combat-log-entry.hero-action  { border-left-color:var(--success-green); }
.combat-log-entry.npc-action   { border-left-color:var(--danger-red); }
.combat-log-entry.result-white { opacity:0.6; }
.combat-log-entry.result-green { border-left-color:#06D6A0; }
.combat-log-entry.result-yellow{ border-left-color:#FFD700; }
.combat-log-entry.result-red   { border-left-color:#EF476F; background:rgba(239,71,111,0.15); }

/* Action menu */
.combat-actions {
  position:relative; z-index:10;
  padding:12px 30px 20px; flex-shrink:0;
  background:rgba(0,0,0,0.7); border-top:3px solid var(--primary-yellow);
}
.combat-actions-label {
  font-family:'Bangers',cursive; color:var(--primary-yellow);
  font-size:1.2rem; margin-bottom:10px; letter-spacing:0.05em;
}
.combat-action-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:8px;
}
.combat-action-btn {
  padding:10px 14px; border:2px solid var(--primary-blue);
  background:rgba(29,53,87,0.8); color:var(--light-text);
  font-family:'Bangers',cursive; font-size:1.05rem; letter-spacing:0.05em;
  cursor:pointer; border-radius:8px; text-align:left;
  transition:all 0.2s; white-space:nowrap;
}
.combat-action-btn:hover {
  border-color:var(--primary-yellow); color:var(--primary-yellow);
  background:rgba(29,53,87,1); transform:translateY(-2px);
}
.combat-action-btn.flee-btn {
  border-color:var(--danger-red); color:var(--danger-red);
}
.combat-action-btn.flee-btn:hover { background:rgba(239,71,111,0.2); }

/* Waiting / NPC turn */
.combat-waiting {
  position:relative; z-index:10;
  padding:20px; text-align:center;
  font-family:'Bangers',cursive; font-size:1.4rem; color:var(--danger-red);
  letter-spacing:0.1em;
}
.dots { animation:dotBlink 1.2s steps(4,end) infinite; }
@keyframes dotBlink { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} 100%{content:'.'} }

/* Combat over overlay */
.combat-over {
  position:absolute; inset:0; z-index:100;
  background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center;
}
.combat-over-content {
  text-align:center; padding:50px 60px;
  background:linear-gradient(135deg,var(--dark-bg),var(--darker-bg));
  border:5px solid var(--primary-yellow); border-radius:20px;
  box-shadow:0 0 60px rgba(244,208,63,0.3);
  animation:slideUp 0.4s;
}
.combat-over-icon { font-size:5rem; margin-bottom:15px; }
.combat-over-content h2 { font-family:'Bangers',cursive; font-size:3rem; color:var(--primary-yellow); margin-bottom:10px; }
.combat-over-content p  { font-size:1.1rem; opacity:0.9; margin-bottom:25px; line-height:1.6; }


@media (max-width:1100px) {
  .game-main { grid-template-columns:1fr; grid-template-rows:1fr 300px; }
  .right-panel { flex-direction:row; border-left:none; border-top:4px solid var(--primary-blue); }
  .location-panel { border-bottom:none; border-right:3px solid var(--primary-blue); width:50%; }
  .game-log { width:50%; }
}
@media (max-width:700px) {
  .game-title     { font-size:3rem; }
  .screen-title   { font-size:2rem; }
  .character-list { grid-template-columns:1fr; }
  .stat-row       { grid-template-columns:1fr; }
  .mini-map       { width:120px; height:120px; bottom:50px; }
  .hud-stats      { flex-direction:column; }
  .right-panel    { flex-direction:column; }
  .location-panel { width:100%; border-right:none; border-bottom:3px solid var(--primary-blue); }
  .game-log       { width:100%; }
}