@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Syne+Mono&display=swap');

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

body { min-height: 100vh; background: #0c0810; font-family: 'Syne Mono', monospace; color: #c8a84b; user-select: none; }

#tm-app { min-height: 100vh; padding: 16px; position: relative; }

#tm-hud { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 0 auto 16px; font-size: 0.75rem; flex-wrap: wrap; }
.tm-start-level { font-size: 0.72rem; opacity: 0.75; margin-bottom: 18px; color: #f0d880; }
#tm-over button { margin: 6px; }
#tm-dread-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#tm-dread { width: 100px; height: 8px; background: #1a1018; border-radius: 4px; overflow: hidden; }
#tm-dread-fill { height: 100%; width: 0; background: #c41e3a; transition: width 0.1s; }

#tm-store { max-width: 520px; margin: 0 auto; }
#tm-shelves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }

.tm-shelf {
  padding: 16px 8px; background: #141018; border: 1px solid #3a2838;
  border-radius: 6px; cursor: pointer; text-align: center; font-size: 0.65rem;
}
.tm-shelf--leaky { border-color: #804050; box-shadow: inset 0 0 0 1px rgba(196,30,58,0.35); }
.tm-shelf .bar { height: 6px; background: #0a0810; margin-top: 8px; border-radius: 3px; overflow: hidden; }
.tm-shelf .fill { height: 100%; width: 0; background: #7a9a4a; }
#tm-shift { opacity: 0.75; font-size: 0.68rem; }
#tm-next:not([hidden]) { display: inline-block; }

.tm-cooler {
  width: 100%; padding: 20px; font-family: 'Bungee', cursive; font-size: 1rem;
  background: #1a2030; border: 2px solid #3a5060; border-radius: 8px; cursor: pointer; color: #8ab0d0;
}
.tm-cooler.open { border-color: #c41e3a; background: #201018; color: #ff4466; animation: tm-pulse 0.5s infinite alternate; }
@keyframes tm-pulse { from { box-shadow: 0 0 8px #c41e3a; } to { box-shadow: 0 0 20px #c41e3a; } }

.tm-screen {
  position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: rgba(8, 4, 12, 0.96);
}
.tm-screen.active { display: flex; }

.tm-credit { font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; }
h1 { font-family: 'Bungee', cursive; font-size: clamp(1.4rem, 5vw, 2.2rem); color: #f0d880; margin-bottom: 12px; }
.tm-tagline { font-size: 0.85rem; opacity: 0.85; margin-bottom: 8px; }
.tm-sub { font-size: 0.75rem; line-height: 1.6; opacity: 0.65; margin-bottom: 24px; max-width: 420px; }

button { font-family: 'Syne Mono', monospace; font-size: 0.75rem; letter-spacing: 0.15em; padding: 12px 28px; color: #fff; background: #2a1018; border: 1px solid rgba(200,168,75,0.4); border-radius: 6px; cursor: pointer; }
.tm-exit { position: fixed; bottom: 12px; right: 14px; font-size: 0.7rem; color: rgba(200,168,75,0.6); text-decoration: none; }