/* =========================
   BASE / GLOBAL
   ========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  background: radial-gradient(circle at top, #2b2b2b, #121212);
  color: #ffffff;
  font-family: "Arial Black", Impact, Arial, sans-serif;
  text-align: center;
  font-size: 20px;
  touch-action: manipulation;
  letter-spacing: 0.5px;
}

.board-columns {
  display: grid;
  /* Left: 40%, Middle: 30%, Right: 30% */
  grid-template-columns: 1.4fr 1fr 1fr; 
  gap: 1.5rem;
  padding: 1rem 2rem;
  max-width: 100vw;
  box-sizing: border-box;
  align-items: start; /* Prevents sections from stretching vertically to match neighbors */
}

.column-left {
  max-width: 40vw;
}

.column-middle,
.column-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Adjustments for the new 3-column widths */
ul {
  max-width: 100%; /* Allows the rotation list to fill its column */
}

table {
  max-width: 100%; /* Allows stats to fill its column */
}

#qrCode img {
  margin: 0 auto; /* Centers the QR generated image */
}

/* Ensure sections don't have massive bottom margins now that they are in columns */
section {
  margin-bottom: 0; 
}

/* =========================
   RESPONSIVE TWEAK
   ========================= */

/* If the screen is too narrow (portrait), revert to one column */
@media (max-aspect-ratio: 1/1) {
  .board-columns {
    grid-template-columns: 1fr;
  }
}

/* =========================
   ENTRY SCREEN
   ========================= */

body.entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

#status {
  margin-top: 10px;
  font-size: 20px;
}

/* =========================
   CHAPS LOGO HEADER
   ========================= */

.chaps-header {
  margin-bottom: 25px;
}

.chaps-logo {
  display: inline-block;
  text-align: center;
}

.chaps-main {
  display: block;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #e53935; /* neon red */
  text-shadow:
    0 0 6px rgba(229, 57, 53, 0.8),
    0 0 14px rgba(229, 57, 53, 0.6);
}

.chaps-sub {
  display: block;
  font-size: 18px;
  letter-spacing: 3px;
  color: #fbc02d;
  margin-top: -6px;
}

.chaps-divider {
  width: 220px;
  height: 4px;
  background: linear-gradient(90deg, transparent, #fbc02d, transparent);
  margin: 10px auto 8px;
}

.board-title {
  font-size: 30px;
  margin: 0;
  color: #ffffff;
  letter-spacing: 1px;
}

/* =========================
   HEADERS
   ========================= */

h1 {
  font-size: 46px;
  margin-bottom: 10px;
  color: #fbc02d;
  text-shadow: 0 0 8px rgba(251, 192, 45, 0.5);
}

h2 {
  color: #e53935;
  text-transform: uppercase;
  letter-spacing: 1px;
}

section {
  background: #2a2a2a;
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 2px #1a1a1a;
}

/* =========================
   CURRENT MATCH
   ========================= */

.current-match {
  animation: pulse 2s infinite;
  background: #145a42;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 15px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(229, 57, 53, 0.0); }
  50% { box-shadow: 0 0 18px rgba(229, 57, 53, 0.6); }
  100% { box-shadow: 0 0 0 rgba(229, 57, 53, 0.0); }
}

#matchPlayers {
  font-size: 55px;
  font-weight: bold;
  margin: 15px 0;
}

#gameTimer {
  font-size: 40px;
  margin-top: 10px;
  color: #ffd54f;
  font-weight: bold;
}

/* Styles for players who are sitting out */
.player-sitting-out {
  opacity: 0.5;
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 4px solid #fbc02d; /* Yellow accent to show they are still 'in' the system */
  transition: all 0.3s ease;
}

.player-sitting-out::after {
  content: " ⏸";
  font-size: 0.8em;
  float: right;
}

/* =========================
   INPUTS & BUTTONS
   ========================= */

label {
  font-size: 22px;
}
   
input {
  font-size: 24px;
  padding: 16px;
  width: 260px;
  border-radius: 10px;
  border: none;
}

input[type="checkbox"] {
  transform: scale(1.5);
  margin-right: 2px;
}

button {
  background: linear-gradient(180deg, #43a047, #2e7d32);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 0 #1b5e20;
  min-height: 60px;
  min-width: 120px;
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1b5e20;
}

button:hover {
  opacity: 0.9;
}

.win-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.win-buttons button {
  flex: 1;
  max-width: 320px
}

.undo-btn {
  background: linear-gradient(180deg, #fbc02d, #f9a825);
  color: #000;
  box-shadow: 0 4px 0 #c49000;
}

.danger {
  background: #b00020;
  color: white;
}

/* =========================
   ROTATION LIST
   ========================= */

ul {
  background: #1e1e1e;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 400px;
  border-radius: 10px;
  overflow: hidden;
}

li {
  font-size: 24px;
  padding: 12px;
  border-bottom: 1px solid #444;
  animation: slide-in 0.4s ease;
}

/* =========================
   STATS TABLE
   ========================= */

table {
  width: 100%;
  max-width: 500px;
  margin: 10px auto 0;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  font-size: 22px;
  border-bottom: 1px solid #2e7d66;
}

.always-hidden {
  display: none;
}

.admin-hidden {
  display: none;
}

.admin-group {
  margin: 15px 0;
}

/* =========================
   DROPDOWN SELECTORS
   ========================= */
select {
  font-size: 22px;           /* Much larger text */
  padding: 14px 16px;        /* Thicker padding for easier tapping */
  width: 260px;              /* Matches the width of your text inputs */
  border-radius: 10px;       /* Smooth, rounded corners */
  border: 2px solid #444;    /* Distinct border */
  background-color: #1e1e1e; /* Dark background to match the theme */
  color: #fff;               /* White text */
  font-family: inherit;      /* Inherits your bold arcade font */
  cursor: pointer;
  margin: 10px 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Adds a nice yellow glow when someone taps on it */
select:focus {
  outline: none;
  border-color: #fbc02d;
  box-shadow: 0 0 10px rgba(251, 192, 45, 0.6);
}

/* Optional: Styles the actual dropdown options (Note: mobile devices often override this with their native UI) */
select option {
  background-color: #2a2a2a;
  color: #fff;
  font-size: 20px;
}

.manage-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.manage-action-buttons button {
  flex: 1; /* Makes them stretch evenly */
  min-width: 100px;
  margin: 0; /* Removes old margins so flexbox can handle the spacing */
}

/* =========================
   DISABLED BUTTON STATE
   ========================= */
.manage-action-buttons button:disabled {
  background: #444 !important; /* Flat dark gray */
  color: #777 !important;      /* Dimmed text */
  box-shadow: none !important; /* Removes the 3D pop */
  cursor: not-allowed;
  transform: none;             /* Prevents the press-down animation */
  opacity: 0.6;
}

/* =========================
   LARGE ADMIN ACTION BUTTONS
   ========================= */
#undoBtn,
#clearRotationBtn {
  font-size: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  height: 62px;
  width: 100%;               /* Stretches to fill the column for an easy target */
  max-width: 260px;
  margin: 10px 0;
  display: inline-flex;      /* Centers the text perfectly inside */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

/* Specific styling for the Undo Button (Yellow) */
#undoBtn {
  background: linear-gradient(180deg, #fbc02d, #f9a825);
  color: #000;
  box-shadow: 0 4px 0 #c49000;
}

#undoBtn:active {
  box-shadow: 0 2px 0 #c49000;
  transform: translateY(2px);
}

/* Specific styling for the Clear Rotation Button (Red) */
#clearRotationBtn {
  background: linear-gradient(180deg, #e53935, #b00020);
  color: #fff;
  box-shadow: 0 4px 0 #7f0000;
}

#clearRotationBtn:active {
  box-shadow: 0 2px 0 #7f0000;
  transform: translateY(2px);
}

/* =========================
   INLINE ADD PLAYER FORMS
   ========================= */
#playerFormX,
#playerFormY {
  display: flex;
  gap: 10px;                 /* Adds a clean space between the input and button */
  align-items: center;       /* Ensures they sit perfectly level with each other */
  justify-content: flex-start;
  margin-bottom: 10px;
}

#playerFormX input,
#playerFormY input {
  flex: 1;                   /* Tells the input box to stretch and fill the available space */
  margin-bottom: 0;          /* Removes the old stacking margin */
  max-width: none;           /* Lets Flexbox completely control the width */
}

#playerFormX button,
#playerFormY button {
  white-space: nowrap;       /* Prevents the button text from wrapping to two lines */
  flex-shrink: 0;            /* Stops the button from getting squished by the text box */
}

@media (hover: hover) {
  button:hover {
    opacity: 0.9;
  }
}

/* Mobile Optimization */
@media (max-width: 600px) {
  button {
    padding: 20px;
    margin: 5px 0;
    width: 100%; /* Full width buttons for thumbs */
  }
  
  .win-buttons {
    flex-direction: column;
    gap: 10px;
  }
}

/* Adjustments for specific panels */
.current-match-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}

.qr-panel {
  margin-bottom: 0;
  padding: 20px;
}

.qr-panel h2 { 
  font-size: 1.8rem; 
  margin-top: 5px; 
}

#qrCode { 
  width: 100%; 
  max-width: 300px; 
  /* Keeps the box perfectly square */
  aspect-ratio: 1 / 1; 
  margin: 10px auto; 
  /* Acts as a hard wall to stop anything from spilling out */
  overflow: hidden; 
}

/* Force the image to be fully responsive and respect the box */
#qrCode img {
  width: 100%;
  height: 100% !important; /* Overrides the old 'auto !important' rule */
  object-fit: contain; /* Ensures the whole QR code stays visible without stretching */
  display: block;
  margin: 0 auto;
}

.qr-panel {
  margin-bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* New rule to make the random 4-digit code massive */
#sessionDisplay {
  font-size: 25px;
  display: block;
  margin-top: 10px;
  letter-spacing: 8px;
}

#playerForm {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* Centers them horizontally */
  align-items: stretch;     /* Makes them the same height */
  gap: 15px;               /* Adds a clean space between them */
  max-width: 500px;
  margin: 0 auto;          /* Centers the form on the page */
}

/* Optional: remove fixed widths/margins to let flexbox do the work */
#playerForm input, 
#playerForm button {
  margin: 0; 
  flex: 1; /* Allows them to grow/shrink together */
}

#sessionInput {
  width: 150px; /* Make the code box smaller than the name box */
  text-align: center;
  letter-spacing: 5px;
}

/* ---------- Arcade Round Overlay ---------- */

.round-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.round-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.round-content {
  text-align: center;
  animation: arcadePop 0.3s ease-out;
}

.round-title {
  font-size: 92px;
  color: #fff;
  text-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 40px #00ffff;
  margin-bottom: 25px;
  letter-spacing: 4px;
}

.round-winner {
  font-size: 82px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffea00;
  text-shadow:
    0 0 10px #ffea00,
    0 0 20px #ff9900,
    0 0 40px #ff5500;
}

/* Pop animation */
@keyframes arcadePop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =========================
   NEW DASHBOARD LAYOUT
   ========================= */

.dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 98vw;
  margin: 0 auto;
}

.row-top {
  display: grid;
  /* Changed from 3fr 1fr to 2fr 1.2fr to give the QR section more room */
  grid-template-columns: 2fr 1.2fr; 
  gap: 15px;
}

.row-middle {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Rotation is 1x, Stats is 2x wider */
  gap: 15px;
  align-items: start;
}

/* Adjustments for specific panels */
.current-match-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
}

.qr-panel {
  margin-bottom: 0;
  padding: 10px;
}

.qr-panel h2 { font-size: 1.2rem; margin-top: 5px; }
#qrCode { width: 240px; height: 240dpx; margin: 5px auto; }
.qr-panel p { margin: 5px 0; font-size: 16px; }

/* Rotation Panel Split */
.rotation-divider {
  border: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #e53935, transparent);
  margin: 20px 0;
}

.two-column-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: transparent;
  padding: 0;
}

.two-column-list li {
  font-size: 16px; /* Smaller text for remaining players */
  padding: 8px;
  background: #1e1e1e;
  border-radius: 6px;
  border-bottom: none;
}

/* Stats Adjustments */
.stats-subtext {
  font-size: 14px;
  color: #aaa;
  margin-top: -10px;
  margin-bottom: 15px;
  font-style: italic;
}

/* =========================
   MARQUEE & NOTIFICATIONS
   ========================= */

/* =========================
   STICKY MARQUEE
   ========================= */

.row-bottom {
  /* Pin the marquee to the bottom of the screen */
  position: fixed;
  bottom: 20px; /* Matches your 20px body padding */
  left: 20px;
  right: 20px;
  z-index: 1000; /* Ensures it stays on top of everything else */
  margin-top: 0;

  /* Your existing styles */
  background: #000;
  border: 2px solid #fbc02d;
  border-radius: 8px;
  height: 50px;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(251, 192, 45, 0.2);
}

/* Give the main layout bottom padding so content doesn't get hidden behind the floating marquee */
.dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 98vw;
  margin: 0 auto;
  padding-bottom: 80px; /* 50px marquee height + 30px gap */
}

.marquee-container {
  width: 100%;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  color: #fff;
  margin-right: 2px;
}

/* Scrolling Animation */
.marquee-scrolling {
  padding-left: 100%; /* Start off-screen right */
  animation: scrollMarquee 50s linear infinite;
}

@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Notification Flash Animation */
.marquee-notification {
  width: 100%;
  text-align: center;
  color: #00ffff;
  animation: flashText 0.5s alternate infinite;
}

@keyframes flashText {
  0% { text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff; }
  100% { text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff; color: #fff; }
}

/* =========================
   TWO-COLUMN LEADERBOARD 
   ========================= */

.stats-panel table {
  display: block;
  max-width: 100%; /* Overrides the old 500px limit so it stretches */
}

.stats-panel thead {
  display: none; /* Hide the top header for a cleaner split look */
}

.stats-panel tbody {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Splits the list into two even columns */
  gap: 0 40px; /* Adds 40px of breathing room between the left and right sides */
}

.stats-panel tr {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr; /* Balances space for Name, W, L, % */
  align-items: center;
  border-bottom: 1px solid #2e7d66;
  padding: 8px 0;
}

.stats-panel td {
  border: none; /* Removes old table borders */
  padding: 4px;
  text-align: center;
  font-size: 20px;
}

/* Styles the player name so it pops */
.stats-panel td:first-child {
  text-align: left;
  font-weight: bold;
  color: #fbc02d; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds '...' if a name is too long */
}

/* Automatically adds 'W:' and 'L:' labels directly to the numbers */
.stats-panel td:nth-child(2)::before { 
  content: "W: "; 
  color: #aaa; 
  font-size: 16px; 
}
.stats-panel td:nth-child(3)::before { 
  content: "L: "; 
  color: #aaa; 
  font-size: 16px; 
}



/* =========================
   CHAPS LOGO WATERMARK
   ========================= */

body.board::before {
  content: "";
  position: fixed; /* Locks it to the center of the TV screen */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  Centers it perfectly */
  width: 60vw;  /* Makes it nice and large (60% of screen width) */
  height: 60vh;
  background-image: url("https://www.chapsdivebar.com/wp-content/uploads/2022/01/cropped-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.08; /* Very faint (8% opacity) */
  z-index: -1; /* Pushes it securely behind all your text and panels */
  pointer-events: none; /* Makes sure it doesn't accidentally block clicks */
}

/* =========================
   MAXIMIZE HORIZONTAL WIDTH
   ========================= */

/* 1. Shrink the invisible border around the edges of the TV */
body.board {
  padding: 20px 10px; /* Keeps 20px on top/bottom, but shrinks left/right to 10px */
}

/* 2. Allow the main dashboard to stretch all the way to those new edges */
.dashboard-layout {
  max-width: 100%; 
  width: 100%;
}

/* 3. Snap the sticky marquee to the new, wider width */
.row-bottom {
  left: 10px;  /* Matches the new 10px body padding */
  right: 10px;
}

/* =========================
   MAXIMIZE ROTATION LISTS
   ========================= */

/* 1. Remove the 400px limit so the lists stretch to the edges */
.rotation-panel ul {
  max-width: 100%;
  width: 100%;
}

/* 2. Make the "Next Up" (Top 5) players massive and bold */
#topRotationList li {
  font-size: 28px; /* Scaled down slightly from 32px */
  padding: 8px 16px; /* 8px top/bottom (saves space), 16px left/right */
  font-weight: bold;
  letter-spacing: 2px;
}

/* 3. Give the "In The Hole" 2-column list more breathing room */
.two-column-list {
  gap: 15px; /* Increases the gap between the two columns */
}

/* 4. Increase the font size for the waiting players */
.two-column-list li {
  font-size: 22px; 
  padding: 12px;
}

/* =========================
   WATERMARK & TRANSPARENCY
   ========================= */

/* 1. The Watermark Image Layer */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  
  /* ---> CHANGE THIS TO YOUR IMAGE FILENAME <--- */
  background-image: url('watermark.png'); 
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%; 
  opacity: 0.25; /* Bumped up slightly so it pushes through the dark panels */
  z-index: -1; 
  pointer-events: none;
}

/* 2. Semi-Transparent Panels */
section {
  /* Dropped to 40% opacity (0.4) so it's very see-through */
  background: rgba(42, 42, 42, 0.4) !important; 
  /* Lowered the blur so the logo doesn't get washed out */
  backdrop-filter: blur(2px); 
  -webkit-backdrop-filter: blur(2px);
}

/* 3. Semi-Transparent Lists inside the Panels */
ul {
  /* Dropped to 30% opacity */
  background: rgba(30, 30, 30, 0.3) !important;
}

li, .two-column-list li {
  /* Ensures the individual names in the hole don't block the background */
  background: rgba(30, 30, 30, 0.3) !important;
}

/* 4. Semi-Transparent Current Match Panel */
.current-match, .current-match-panel {
  /* Dropped to 45% opacity to keep the green tint, but let the logo through */
  background: rgba(20, 90, 66, 0.45) !important;
}

/* 5. Semi-Transparent Marquee */
.row-bottom {
  /* Replaces the solid black with a 50% see-through black */
  background: rgba(0, 0, 0, 0.5) !important;
}

/* =========================
   ANIMATION RESTORATION
   ========================= */

/* 1. Reconnect the pulsing green effect to the Current Match Panel */
.current-match-panel {
  background: #145a42 !important; /* Restores the arcade green background */
  animation: pulse 2s infinite;
}

/* 2. Provide the missing 'slide-in' instructions so the lists flash and appear */
@keyframes slide-in {
  0% { 
    transform: translateX(-15px); 
    opacity: 0; 
    background-color: #fbc02d; /* Flashes Chaps Yellow */
    color: #000;
  }
  100% { 
    transform: translateX(0); 
    opacity: 1; 
    background-color: transparent; 
    color: #fff;
  }
}

/* Ensure the 'In the hole' players return to their dark gray background after the flash */
.two-column-list li {
  animation: slide-in 0.4s ease forwards;
}
@keyframes slide-in-bottom {
  0% { transform: scale(0.95); opacity: 0; background-color: #fbc02d; color: #000;}
  100% { transform: scale(1); opacity: 1; background-color: #1e1e1e; color: #fff;}
}
.two-column-list li {
    animation: slide-in-bottom 0.4s ease forwards;
}

/* 3. Fix the winner overlay pop so it waits until someone actually wins */
.round-content {
  animation: none !important; /* Stops it from running on page load */
}

.round-overlay.active .round-content {
  /* The cubic-bezier adds a really satisfying arcade "bounce" to the pop */
  animation: arcadePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

.flash {
  animation: flash 0.6s;
}

@keyframes flash {
  0% { background: #ffffff; }
  100% { background: #0b3d2e; }
}

.rotation-flash {
  animation: rotation-flash 1.6s ease;
}

@keyframes rotation-flash {
  0% { background-color: #ffcc00; color: #000; }
  100% { background-color: transparent; color: #fff; }
}

/* =========================
   VIRTUAL KEYBOARD
   ========================= */
#virtualKeyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(10px);
  border-top: 2px solid #fbc02d;
  padding: 10px 10px 25px 10px;
  z-index: 99999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
}

#virtualKeyboard.vk-hidden {
  transform: translateY(110%);
}

.vk-header {
  text-align: right;
  padding: 0 20px 10px;
}

#vk-close {
  color: #e53935;
  font-size: 18px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vk-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.vk-key {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 15px 0;
  font-size: 24px;
  font-family: inherit;
  font-weight: bold;
  flex: 1; 
  cursor: pointer;
  box-shadow: 0 4px 0 #111;
  transition: transform 0.05s, box-shadow 0.05s, background 0.1s;
  /* Prevent double-tap zoom on touch screens */
  touch-action: manipulation; 
}

.vk-key:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #111;
  background: #fbc02d;
  color: #000;
}

.vk-space { flex: 4; }
.vk-enter { flex: 2; background: #43a047; color: white; border-color: #2e7d32; }
.vk-backspace { flex: 1.5; background: #e53935; border-color: #b00020; }