/* Game Container Overlay */
#game-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 9999;
  display: none; /* Hidden by default */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Orbitron", "Roboto", sans-serif;
  color: #fff;
  overflow: hidden;
}

#game-canvas {
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
  box-shadow: 0 0 50px rgba(0, 229, 255, 0.1);
}

.game-ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass to canvas if needed, or handle specific UI elements */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  box-sizing: border-box;
}

.game-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: auto;
}

.game-score-board {
  font-size: 24px;
  color: #00e5ff;
  text-shadow: 0 0 10px #00e5ff;
}

.game-combo {
  font-size: 48px;
  color: #ff0055;
  font-weight: bold;
  text-shadow: 0 0 20px #ff0055;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s, transform 0.1s;
}

.game-combo.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

.game-btn {
  background: transparent;
  border: 1px solid #ff0055;
  color: #ff0055;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s;
}

.game-btn:hover {
  background: #ff0055;
  color: #fff;
  box-shadow: 0 0 15px #ff0055;
}

.game-start-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.8);
  padding: 40px;
  border: 1px solid #00e5ff;
  border-radius: 10px;
}

.game-title {
  font-size: 60px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #00e5ff, #bd00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fadeIn { 
    from { opacity: 0; }
    to { opacity: 1; } 
}
@keyframes slideUp { 
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* === RESULTS SCREEN OVERHAUL (Gitadora Style v4: 800px Card & Vertical Stats) === */
.results-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    z-index: 99999;
    color: #fff;
    font-family: 'Noto Sans SC', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

/* Main Card Container */
.res-content {
    position: relative;
    width: 90%; /* Responsive */
    max-width: 800px; /* Cap at 800px */
    height: 520px;
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    display: grid;
    grid-template-columns: 320px 1fr; /* 320px Left, Rest Right */
    overflow: hidden;
    transform: scale(0.95);
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* === LEFT COLUMN === */
.res-col-left {
    background: transparent;
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center Vertically */
    align-items: center; /* Center Horizontally */
    gap: 40px; /* Space between Header and Cover */
}

/* Header Logo (MidiMaster Style) */
.res-header-logo {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.res-cover-wrapper {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    width: 100%;
}
.res-cover-box {
    width: 240px; height: 240px;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 25px;
    background-size: cover; background-position: center;
}

.res-song-meta { width: 100%; display: flex; flex-direction: column; align-items: center; }
.res-song-title {
    font-size: 20px; font-weight: 700; color: #fff; margin: 10px 0 5px;
    line-height: 1.2;
}
.res-song-artist { font-size: 14px; color: #888; margin: 0; }

/* Difficulty Badge */
.res-diff-tag {
    padding: 4px 12px;
    border-radius: 2px;
    font-weight: 900; font-size: 16px;
    color: #000; /* GLOBAL: Black text */
    text-transform: uppercase; letter-spacing: 1px;
    box-shadow: 0 0 15px currentColor;
    margin-bottom: 15px;
}
/* Enhanced Glows using Background Color */
.diff-basic { background: #00aaff; box-shadow: 0 0 20px rgba(0, 170, 255, 0.6); }
.diff-advanced { background: #ffaa00; box-shadow: 0 0 20px rgba(255, 170, 0, 0.6); }
.diff-extreme { background: #ff0055; box-shadow: 0 0 30px rgba(255, 0, 85, 0.6); }
.diff-master { background: #aa00ff; box-shadow: 0 0 30px rgba(170, 0, 255, 0.6); }
.diff-standard { background: #00ffaa; color: #003322; box-shadow: 0 0 25px rgba(0, 255, 170, 0.6); }

/* === RIGHT COLUMN === */
.res-col-right {
    padding: 30px; /* Reverted to original padding */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header: Rank Left, Score Right */
.res-right-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* Rank with FIX for White Square Bug */
.res-rank-section {
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
    margin-top: -30px; /* Specific fix for Rank Top Space */
}
.res-rank-letter {
    font-size: 180px;
    font-weight: 900; font-style: italic; line-height: 0.75; /* Reduced Line Height */
    z-index: 20;
    transform: skewX(-10deg);
    color: #fff; /* Fallback */
    display: flex; align-items: baseline; /* For SS alignment */
}
.rank-big { font-size: 180px; }
.rank-small { font-size: 110px; margin-left: -5px; } /* Small S */

/* Re-declare background-clip in specific classes to avoid reset issues */
.res-rank-letter[data-rank="SS"] { 
    background: linear-gradient(135deg, #fff 0%, #aaddff 40%, #00e5ff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.6));
    /* Gradient covers both letters */
}
.res-rank-letter[data-rank="S"] { 
    background: linear-gradient(135deg, #fff 0%, #fffacd 40%, #ffd700 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
}
.res-rank-letter[data-rank="A"] { 
    background: linear-gradient(135deg, #fff 0%, #ffaaaa 40%, #ff3333 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255, 51, 51, 0.4));
}
.res-rank-letter[data-rank="B"] { 
    background: linear-gradient(135deg, #fff 0%, #aaaaff 40%, #4444ff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(68, 68, 255, 0.4));
}
.res-rank-letter[data-rank="C"] { 
    background: linear-gradient(135deg, #fff 0%, #e0aaff 40%, #aa44ff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(170, 68, 255, 0.4));
}
.res-rank-letter[data-rank="D"], .res-rank-letter[data-rank="E"] {
    background: linear-gradient(135deg, #fff 0%, #ddd 40%, #888 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

/* Score Section */
/* Score Section */
.res-score-section {
    text-align: right;
    display: flex; flex-direction: column;
}
.res-score-main { font-size: 40px; font-weight: 900; font-family: 'Roboto Mono'; color: #fff; line-height: 1; margin-bottom: 10px; }

/* Max Combo (Highlighted Cyan) */
.res-combo-highlight { 
    font-size: 28px; font-weight: 900; color: #00e5ff; 
    font-family: 'Roboto Mono'; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
    line-height: 1.2;
}
.res-combo-highlight .label { font-size: 10px; color: #00e5ff; letter-spacing: 1px; font-weight: bold; }

/* Skill (White, Smaller) */
.res-skill-small { 
    font-size: 22px; font-weight: 700; color: #fff; 
    font-family: 'Roboto Mono'; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
    margin-bottom: 5px;
}
.res-skill-small .label { font-size: 10px; color: #888; letter-spacing: 1px; font-weight: bold; }

/* Achievement */
.res-achiev-row { 
    display: flex; justify-content: flex-end; align-items: center; gap: 10px; 
    font-size: 14px; color: #fff; font-family: 'Roboto Mono'; font-weight: bold;
}
.res-achiev-row .label { font-size: 10px; color: #888; letter-spacing: 1px; font-weight: bold; }

/* Vertical Stats List */
.res-stats-vertical {
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(0,0,0,0.2);
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: auto; 
    width: 100%; /* Ensure full width relative to parent */
    box-sizing: border-box; /* Crucial for padding to be included in width */
}
.res-stat-row {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 4px;
}
.res-stat-row:last-child { border-bottom: none; }
.res-stat-row .label { 
    font-size: 11px; font-weight: 900; letter-spacing: 1px; 
    /* Removed fixed width, let it flow */
    min-width: 60px;
}
.res-stat-row .value { font-size: 16px; font-weight: bold; font-family: 'Roboto Mono'; color: #fff; }

/* Stat Colors */
.res-stat-row.perfect .label { color: #00e5ff; text-shadow: 0 0 5px rgba(0,229,255,0.3); }
.res-stat-row.great .label { color: #00ff00; text-shadow: 0 0 5px rgba(0,255,0,0.3); }
.res-stat-row.good .label { color: #ffff00; text-shadow: 0 0 5px rgba(255,255,0,0.3); }
.res-stat-row.bad .label { color: #8888ff; text-shadow: 0 0 5px rgba(136,136,255,0.3); }
.res-stat-row.miss .label { color: #ff3333; text-shadow: 0 0 5px rgba(255,51,51,0.3); }

/* Buttons (Normal, Non-Italic) */
.res-footer-bar {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
.res-action-btn {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 8px 30px;
    font-size: 14px;
    font-weight: 700;
    font-style: normal; /* Normal font */
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 1px;
    /* No skew */
}
.res-action-btn:hover {
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
}
.res-action-btn.primary { border-color: #00e5ff; color: #00e5ff; }
.res-action-btn.primary:hover { background: #00e5ff; color: #000; box-shadow: 0 0 15px #00e5ff; }
.res-action-btn.destructive:hover { border-color: #ff3333; color: #ff3333; box-shadow: 0 0 15px #ff3333; }

/* === IN-GAME SONG INFO (Phase 5 Refine) === */
#game-song-info {
    position: absolute;
    top: 280px; /* Moved further down */
    left: 20px;
    z-index: 1005;
    background: transparent; /* No background */
    padding: 0;
    display: flex;
    flex-direction: column; /* Vertical Layout */
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
    transition: opacity 0.5s;
    max-width: 240px;
}
#game-song-info img {
    width: 120px; height: 120px; 
    object-fit: cover; 
    border-radius: 2px; 
    border: 2px solid #fff; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}
#game-song-info .info-text {
    display: flex; flex-direction: column; overflow: hidden;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9); /* Heavy shadow for text readability */
    width: 100%;
}
#game-song-info h1 {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 22px; margin: 0; color: #fff; 
    text-shadow: 0 0 10px rgba(0,229,255,0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#game-song-info h2 {
    font-size: 14px; margin: 2px 0 0; color: #eee;
    font-weight: bold;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#game-song-info .diff-tag {
    font-size: 16px; padding: 4px 12px; border-radius: 2px;
    font-weight: 900; 
    color: #000; /* GLOBAL CHANGE: Black text for all badges */
    text-transform: uppercase;
    letter-spacing: 1px;
    width: fit-content; margin-top: 6px;
    /* Background and Shadow provided by .diff-* classes */
    text-shadow: none; /* Remove text shadow inherited from .info-text */
}
/* Specific Override for Standard Color in Game Info not needed if all are black? User said "Except Standard"? No, "Are they all white? If yes, change to black, globally". Standard is already dark green/blackish. So yes, ALL BLACK. */
/* Removing standard override for simplicity, or keeping it if standard is special #003322 which is basically black/green. */
/* User asked: "Are the fonts white for tags OTHER than STANDARD? If yes, change them to BLACK, globally." */
/* Standard is currently #003322 (Black-Green). So User wants Basic/Adv/Ext/Master (White) -> Black. */
#game-song-info .diff-tag.diff-standard {
    color: #003322; /* Keep Standard as Dark Green/Black */
}