@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.bunny.net/dm-mono/files/dm-mono-latin-300-normal.woff2) format('woff2'); 
}

:root {
    --bg-dark: #2D241E; --bg-medium: #4A3B32; --bg-light: #F3EFEA;
    --accent-color: #D35400; --text-main: #F3EFEA; --text-dark: #2D241E;
    --border-color: #5D4037; --terminal-green: #4CAF50;
    --font-mono: 'DM Mono', monospace;
}
body { background: var(--bg-dark); color: var(--text-main); font-family: var(--font-mono); margin: 0; font-size: 14px; }
.hidden { display: none !important; }

header { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-medium); border-bottom: 2px solid var(--accent-color); }
button { cursor: pointer; border: 1px solid var(--border-color); font-family: var(--font-mono); padding: 10px; text-transform: uppercase; font-weight: bold; background: var(--bg-light); color: var(--text-dark); }
button:hover { background: var(--accent-color); color: var(--text-main); }
.btn-action { background: var(--accent-color); color: var(--text-main); width: 100%; }

#auth-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45, 36, 30, 0.98); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.auth-box { background: var(--bg-medium); padding: 40px; border: 2px solid var(--accent-color); width: 300px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

input { width: 100%; padding: 12px; margin-bottom: 10px; background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-main); font-family: var(--font-mono); box-sizing: border-box; }

#setup { display: flex; justify-content: center; gap: 20px; padding: 50px; flex-wrap: wrap; }
.card { background: var(--bg-medium); padding: 30px; border: 1px solid var(--border-color); border-radius: 4px; width: 300px; box-shadow: 4px 4px 0 rgba(0,0,0,0.2); }

#stage { display: flex; gap: 40px; padding: 40px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; }
.media-side { width: 400px; }
.img-wrapper { width: 400px; height: 400px; background: #000; border: 2px solid var(--border-color); position: relative; }
#c-img { width: 100%; height: 100%; object-fit: cover; }
.img-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); color: var(--accent-color); font-size: 16px; }

#preview-audio { width: 100%; height: 36px; border-radius: 0; filter: sepia(20%) saturate(70%) brightness(0.8); }
#preview-status { width: 100%; padding: 10px; text-align: center; background: #3a3a3a; color: #888; font-size: 12px; border: 1px solid var(--border-color); }
#preview-status.unavailable { background: #2a2a2a; color: #555; }

.btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.btn-grid button { height: 60px; font-size: 24px; border: none; color: #1a1a1a; }

/* THE EXACT COLORS YOU ASKED FOR */
.btn-s { background: #ff7f7f; }
.btn-a { background: #ffbf7f; }
.btn-b { background: #ffdf7f; }
.btn-c { background: #ffff7f; }
.btn-d { background: #bfff7f; }
.btn-f { background: #7fffbf; }

#tier-list { padding: 20px; max-width: 1200px; margin: 0 auto; }
.tier-row { display: flex; background: var(--bg-medium); border-bottom: 2px solid var(--bg-dark); min-height: 90px; }
.label { width: 100px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: var(--text-dark); flex-shrink: 0; }
.label.s { background: #ff7f7f; }
.label.a { background: #ffbf7f; }
.label.b { background: #ffdf7f; }
.label.c { background: #ffff7f; }
.label.d { background: #bfff7f; }
.label.f { background: #7fffbf; }
.items { display: flex; flex-wrap: wrap; padding: 5px; gap: 5px; }
.items img { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--border-color); }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; z-index: 200; }
.m-content { background: var(--bg-medium); padding: 30px; border: 2px solid var(--accent-color); width: 600px; max-width: 90vw; }
#results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.res-item { cursor: pointer; border: 2px solid transparent; } .res-item:hover { border-color: var(--terminal-green); }
.res-item img { width: 100%; height: 120px; object-fit: cover; }
.res-info { font-size: 10px; padding: 5px; background: #000; }