/* ============================================================================
   stand-still.css — an anti-clicker. Starts calm and minimal; the field fills
   with needy temptations as phases escalate; the finale goes stark and quiet.
   ============================================================================ */

#game-wrap { background: #0b0c0f; transition: background 1.2s ease; }
body.sg-game.ss-dark #game-wrap { background: #060708; }

.ss-stage {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  font-family: var(--fn); color: var(--tx);
  display: flex; align-items: center; justify-content: center;
}

/* ── HUD METERS (hidden at first) ──────────────────────────────────────────── */
.ss-hud {
  position: absolute; top: 12px; left: 0; right: 0; z-index: 6;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.ss-hud.show { opacity: 1; }
.ss-meter { display: flex; flex-direction: column; gap: 3px; width: 92px; }
.ss-meter span { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--mu); text-align: center; }
.ss-bar { height: 4px; background: #1a1b22; border-radius: 999px; overflow: hidden; }
.ss-bar i { display: block; height: 100%; width: 0%; border-radius: 999px; transition: width .4s ease; }
.ss-b-tempt { background: var(--am); }
.ss-b-algo  { background: var(--ac); }
.ss-b-ctrl  { background: var(--gn); }

/* ── CALM CENTER ───────────────────────────────────────────────────────────── */
.ss-center { position: relative; z-index: 4; text-align: center; padding: 20px; max-width: 460px; transition: opacity .6s ease, transform .6s ease; }
.ss-instruction { font-family: var(--fc); font-weight: 600; font-size: clamp(26px, 7vw, 40px); line-height: 1.15; color: var(--tx); margin-bottom: 14px; transition: color .6s ease; }
.ss-timer { font-family: var(--fm); font-weight: 300; font-size: clamp(40px, 14vw, 76px); letter-spacing: 2px; color: var(--mu); transition: opacity .8s ease, color .6s; }
.ss-timer.gone { opacity: 0; }
.ss-sub { font-size: 13px; color: var(--su); margin-top: 12px; line-height: 1.5; transition: opacity .6s; min-height: 20px; }

/* finale mood */
.ss-stage.final .ss-instruction { color: #e8e2e2; }
.ss-stage.final .ss-sub { color: #6a5a5a; }

/* ── SPAWN FIELD ───────────────────────────────────────────────────────────── */
.ss-field { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ss-field > * { pointer-events: auto; }

/* a generic needy temptation button */
.ss-temp {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--ff); font-weight: 600; font-size: 15px; letter-spacing: .3px;
  padding: 13px 22px; border-radius: var(--r);
  background: var(--acd); border: 1px solid var(--ac); color: var(--tx);
  cursor: pointer; animation: ss-appear .5s ease, ss-glow 3.6s ease-in-out infinite;
}
.ss-temp.leaving { animation: ss-leave .6s ease forwards; }
@keyframes ss-appear { from { opacity: 0; transform: translate(-50%,-50%) scale(.92); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ss-leave { to { opacity: 0; transform: translate(-50%,-50%) scale(.96); } }
@keyframes ss-glow { 0%,100% { box-shadow: 0 0 13px var(--glow1); } 50% { box-shadow: 0 0 26px var(--glow0); } }
.ss-temp.big { font-size: 18px; padding: 16px 28px; }

/* fake popup / alert card */
.ss-pop {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(300px, 84%); background: var(--s1); border: 1px solid var(--bdb);
  border-radius: var(--rl); padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
  animation: ss-popin .25s ease;
}
@keyframes ss-popin { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ss-pop-title { font-family: var(--fn); font-weight: 600; font-size: 14px; color: var(--tx); margin-bottom: 4px; }
.ss-pop-body { font-size: 12px; color: var(--mu); margin-bottom: 10px; line-height: 1.4; }
.ss-pop-btn { width: 100%; font-family: var(--ff); font-weight: 600; font-size: 13px; padding: 9px; border-radius: var(--r); background: var(--bl); color: #04122a; }

/* fake leaderboard */
.ss-board { position: absolute; right: 14px; top: 70px; width: 190px; background: var(--s1); border: 1px solid var(--bd); border-radius: var(--rl); padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.5); animation: ss-popin .25s ease; }
.ss-board h4 { font-family: var(--ff); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--mu); margin-bottom: 8px; }
.ss-board .ss-row { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; color: var(--su); }
.ss-board .ss-row.you { color: var(--am); }
.ss-board .ss-row b { font-family: var(--fm); }

/* fake notifications */
.ss-note { position: absolute; left: 50%; transform: translateX(-50%); width: min(320px, 88%); display: flex; gap: 10px; align-items: center; background: var(--s2); border: 1px solid var(--bd); border-radius: 12px; padding: 9px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); animation: ss-noteIn .3s ease; }
@keyframes ss-noteIn { from { opacity: 0; transform: translateX(-50%) translateY(-12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ss-note-ico { font-size: 20px; }
.ss-note-main { flex: 1; min-width: 0; }
.ss-note-app { font-size: 10px; color: var(--mu); }
.ss-note-txt { font-size: 13px; color: var(--tx); }

/* reward chest */
.ss-chest { position: absolute; transform: translate(-50%,-50%); font-size: 40px; cursor: pointer; animation: ss-appear .3s ease, ss-beg 1.8s ease-in-out infinite; text-align: center; }
.ss-chest small { display: block; font-family: var(--fm); font-size: 9px; color: var(--mu); }

/* the offended-narrator button row */
.ss-btnrow { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: min(420px, 92%); }
.ss-btnrow button { font-family: var(--ff); font-weight: 600; font-size: 12px; padding: 9px 13px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--bd); color: var(--tx); }
.ss-btnrow button:hover { border-color: var(--ac); }

/* the END GAME finale button */
.ss-endgame { position: absolute; left: 50%; top: 56%; transform: translate(-50%,-50%); text-align: center; }
.ss-endgame button { font-family: var(--fc); font-weight: 700; font-size: 26px; letter-spacing: 1px; padding: 18px 44px; border-radius: var(--rl); background: var(--ac); color: #fff; box-shadow: 0 0 30px var(--glow0); animation: ss-beg 1.6s ease-in-out infinite; }
.ss-endgame small { display: block; margin-top: 10px; font-size: 12px; color: var(--mu); }

/* the cursor sparkle */
.ss-sparkle { position: absolute; z-index: 8; font-size: 14px; color: var(--am); opacity: 0; pointer-events: none; transform: translate(-50%,-50%); transition: opacity .3s; }
.ss-sparkle.show { opacity: .9; }

/* ── NARRATOR ──────────────────────────────────────────────────────────────── */
.ss-narrator {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 7; text-align: center;
  font-family: var(--fm); font-size: 13px; color: var(--mu); font-style: italic;
  padding: 0 20px; min-height: 20px; opacity: 0; transition: opacity .5s ease;
}
.ss-narrator.show { opacity: 1; }
.ss-stage.final .ss-narrator { color: #b9a9a9; }

/* ── UNSETTLING LATER STAGES ───────────────────────────────────────────────── */
/* phase 4: the room cools and tightens around you */
.ss-stage.unsettle::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 150px 36px rgba(0,0,0,.55);
  transition: box-shadow 3s ease;
}
.ss-stage.unsettle .ss-instruction { color: #c9cfd8; }
.ss-stage.unsettle .ss-narrator { color: #9aa6b2; }
/* finale: darker, closer */
.ss-stage.final::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 190px 56px rgba(0,0,0,.82);
}
body.sg-game.ss-dark #game-wrap { background: #050507; animation: ss-breathe 7s ease-in-out infinite; }
@keyframes ss-breathe { 0%,100% { filter: brightness(1); } 50% { filter: brightness(.9); } }
/* a line the game "leaves on the screen" — appears, lingers, fades */
.ss-whisper {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 4;
  font-family: var(--fm); font-size: 13px; font-style: italic; color: #7c8893;
  white-space: nowrap; opacity: 0; animation: ss-whisper 6s ease forwards;
}
@keyframes ss-whisper { 12% { opacity: .8; } 80% { opacity: .8; } 100% { opacity: 0; } }
/* the center text can do a slow, barely-there breathe in the finale */
.ss-stage.final .ss-instruction { animation: ss-textbreathe 5s ease-in-out infinite; }
@keyframes ss-textbreathe { 0%,100% { opacity: 1; } 50% { opacity: .72; } }