/* Base Style & Game Background Styling */ 
:root { 
  --bg-wall: #e8d0b5; 
  --bg-floor: #d8b898; 
  --panel-glass: rgba(180, 230, 255, 0.25); 
  --panel-border: rgba(120, 230, 255, 0.7); 
  --neon-cyan: #4df3ff; 
  --text-gold: #ffe875; 
  --text-shadow: #735029; 
  --terminal-bg: #ece0ce; 
} 

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: 'Arial Rounded MT Bold', sans-serif; 
} 

body {
  background: linear-gradient(to bottom, var(--bg-wall) 60%, var(--bg-floor) 60%);
  height: 100vh;     /* Lock page body tightly to the viewport frame */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;  /* Formally hides window scrollbars */
}



/* ADDED: Layout wrapper to center all elements and clamp size on desktop */
.game-layout-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 450px; /* Keeps layout from getting too wide on large screens */
}

/* 1. Compact 3D Arcade Cash Display (#info-panel) */
#info-panel {
  text-align: center;
  font-size: 1.3rem;              /* SHRUNK: Smaller font footprint */
  font-weight: 900;
  color: #ffe875;                 /* Saturated arcade gold */
  margin-top: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* Scaled-down crisp multi-layered 3D borders */
  text-shadow: 
    -2px -2px 0 #735029,  
     2px -2px 0 #735029,
    -2px  2px 0 #735029,
     2px  2px 0 #735029,
     0px  2px 0 #54391b,
     2px  4px 0px rgba(0, 0, 0, 0.25);
}




/* 2. Glassmorphic Outer Canvas Area (#game-wrapper) */
#game-wrapper {
  background: var(--panel-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 3px solid var(--panel-border);
  border-radius: 24px;
  padding: 8px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.4), 0 12px 30px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;   /* Kept tightly packed to save room */
  display: flex;       
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-grow: 1;         /* ADDED: Forces the game window to expand and fill available height */
  max-height: 65vh;     /* INCREASED: Pushes the canvas box height up significantly */
}

/* 3. HTML5 Interactive Canvas Container (#game-container) */
#game-container {
  display: block;
  border-radius: 16px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background-color: #a8ddf0;
  background-image:
  linear-gradient(to bottom, #a8ddf0 0%, #a8ddf0 58%, transparent 58%, transparent 100%),
  linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 15%),
  repeating-linear-gradient(90deg, rgba(140,105,55,0.22) 0px, rgba(140,105,55,0.22) 2px, transparent 2px, transparent 44px),
  repeating-linear-gradient(0deg, rgba(140,105,55,0.22) 0px, rgba(140,105,55,0.22) 2px, transparent 2px, transparent 44px),
  linear-gradient(to bottom, #a8ddf0 0%, #a8ddf0 58%, #ffffff 58%, #ffffff 60%, #f4e4c8 60%, #f4e4c8 100%);
}
/* 4. Streamer Alert Indicator (#live-badge) */ 
#live-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ff2a4b;
  color: white;
  font-weight: bold;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  animation: blink 1.5s infinite;
  z-index: 10;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* 5. Minimalist 3D Voting Panel Base (#vote-panel) */
#vote-panel {
  position: relative;
  margin-top: 15px;
  background: #fdf6e8;
  border: 3px solid #eccc68;
  border-radius: 18px;
  padding: 12px;
  width: 260px;
  font-size: 13px;
  z-index: 10;
  box-shadow: 0 4px 0 #d4ac4a, 0 8px 14px rgba(0,0,0,0.15);
}

/* Compressed Voting Header Title (.vote-title) */ 
.vote-title { 
  text-align: center; 
  font-size: 0.95rem;     /* Shrunk down header footprint */
  font-weight: 800; 
  color: #ba936c; 
  text-shadow: 0 1px 1px white; 
  text-transform: uppercase; 
  display: inline-block;  /* Prepares text for inline alignment constraints if needed */
} 


/* Timer Element (#timer) */ 
#timer { 
  color: #31d3ff; 
  font-weight: bold; 
  font-size: 14px; 
  text-shadow: 0 0 6px rgba(49, 211, 255, 0.4); 
} 


/* 6. Ultra-Compact Voting Selection Rows (.vote-option) */ 
.vote-option {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 700;
}

.vote-option:last-child {
  margin-bottom: 0;      /* Ensures no dead space at the very bottom */
}


.vote-option:hover { 
  transform: translateY(-2px); 
}
.wall-cross {
  position: absolute;
  top: 12%;
  right: 8%;
  font-size: 32px;
  color: #ff6b6b;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.wall-shelf {
  position: absolute;
  top: 18%;
  left: 5%;
  width: 90px;
  height: 10px;
  background: #b89968;
  border-radius: 3px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 -3px 0 #8f7248;
}

.wall-shelf-2 {
  position: absolute;
  top: 30%;
  right: 6%;
  width: 70px;
  height: 8px;
  background: #b89968;
  border-radius: 3px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 -3px 0 #8f7248;
}

.wall-trim {
  position: absolute;
  top: 56%;
  left: 0;
  width: 100%;
  height: 4px;
  background: #7ec9e8;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}