*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-display);
  touch-action: none;
}
.stage{ position: relative; width:100vw; height:100vh; overflow:hidden; }

canvas#chart{ position:absolute; inset:0; width:100%; height:100%; opacity:0.35; }
.era-tint{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: transparent; transition: background 1.4s ease;
}

/* ---- Minimal corner nav, styled like the HUD so it never breaks immersion ---- */
.game-nav{
  position:absolute; top:16px; right:16px; z-index:12;
}
.game-nav-toggle{
  display:none;
}
.game-nav-links{
  display:flex; align-items:center; gap:16px;
  font-family: var(--font-mono); font-size:13px; letter-spacing:0.05em;
}
.game-nav-links a{ color: var(--text-dim); text-decoration:none; white-space:nowrap; }
.game-nav-links a:hover{ color: var(--text); }
.game-nav-links .game-nav-profile{ display:flex; align-items:center; gap:6px; color: var(--text); }
.game-nav-links .game-nav-profile img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.game-nav-links .game-nav-signin{ color: var(--btc); }

@media (max-width: 640px){
  .game-nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; margin-left:auto;
    background: rgba(18,21,27,0.85); border:1px solid var(--line); border-radius:8px;
    color: var(--text); font-size:17px; cursor:pointer;
  }
  .game-nav-links{
    display:none; flex-direction:column; align-items:flex-end; gap:14px;
    margin-top:10px; background: rgba(10,12,16,0.95); border:1px solid var(--line);
    border-radius:12px; padding:16px 18px; font-size:14px;
  }
  .game-nav-links.open{ display:flex; }
}

.hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center;
  padding: 22px 16px 10px;
  z-index:5; pointer-events:none;
}
.era{
  font-family: var(--font-mono); letter-spacing:0.14em; font-size:13px;
  color: var(--text-dim); text-transform:uppercase; margin-bottom:6px;
}
.price-label{
  font-family: var(--font-mono); letter-spacing:0.18em; font-size:10px;
  color: var(--text-dim); text-transform:uppercase;
}
.price{
  font-size: clamp(32px, 9vw, 56px); font-weight:700; line-height:1.05;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.price.up{ color: var(--green); }
.target-bar{
  width:min(320px, 80vw); height:4px; background:var(--line); border-radius:2px;
  margin-top:10px; overflow:hidden;
}
.target-fill{
  height:100%; width:0%; background: linear-gradient(90deg, var(--btc), var(--green));
  transition: width 0.2s linear;
}
.target-caption{
  font-family: var(--font-mono); font-size:9px; color:var(--text-dim);
  margin-top:6px; letter-spacing:0.1em;
}

.playfield{
  position:absolute; z-index:3;
  left:50%; top:50%; transform: translate(-50%, -50%);
  width: min(480px, 94vw);
  height: min(760px, 82vh);
}

.hold-zone{
  position:absolute; width: clamp(92px, 26vw, 132px); height: clamp(92px, 26vw, 132px);
  transform: translate(-50%, -50%);
  border-radius:50%;
  border: 2px solid var(--btc);
  background: radial-gradient(circle at 50% 40%, rgba(247,147,26,0.14), rgba(247,147,26,0.02));
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow: 0 0 0 0 rgba(247,147,26,0.0);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hold-zone.engaged{
  border-color: var(--green);
  box-shadow: 0 0 32px 6px rgba(22,199,132,0.25);
}
.hold-zone.waiting{
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(247,147,26,0.25); }
  50%{ box-shadow: 0 0 26px 8px rgba(247,147,26,0.18); }
}
.hold-dot{ width:10px; height:10px; border-radius:50%; background: var(--btc); margin-bottom:6px; }
.hold-zone.engaged .hold-dot{ background: var(--green); }
.hold-label{
  font-family: var(--font-mono); font-size:10px; letter-spacing:0.18em; color: var(--text-dim);
}

.temptation{
  position:absolute; width: clamp(42px, 12vw, 64px); height: clamp(42px, 12vw, 64px);
  transform: translate(-50%, -50%);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size: clamp(18px, 5vw, 26px); cursor:pointer;
}
.temptation.gold{
  background: radial-gradient(circle at 35% 30%, #FFD27A, var(--btc));
  box-shadow: 0 0 24px 4px rgba(247,147,26,0.5);
}
.temptation.trap{
  background: radial-gradient(circle at 35% 30%, #FF8A8F, var(--red));
  box-shadow: 0 0 24px 4px rgba(234,57,67,0.45);
}
.temptation svg{ position:absolute; inset:-6px; transform:rotate(-90deg); }
.temptation svg circle{
  fill:none; stroke:rgba(255,255,255,0.55); stroke-width:3;
}

.temptation.pizza{
  width: clamp(48px, 14vw, 74px); height: clamp(48px, 14vw, 74px);
  font-size: clamp(22px, 6vw, 32px);
}
.temptation-label{
  position:absolute; transform: translate(-50%, -100%);
  font-family: var(--font-mono); font-size:9px; letter-spacing:0.08em;
  color: var(--text-dim); white-space:nowrap; text-transform:uppercase;
  background: rgba(10,12,16,0.7); padding:3px 7px; border-radius:6px;
}

.era-banner{
  position:absolute; left:0; right:0; top:118px; z-index:8;
  transform: translateY(-12px) scaleY(0.7); opacity:0;
  background: rgba(10,12,16,0.9);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 16px; text-align:center; pointer-events:none;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease;
}
.era-banner.show{ transform: translateY(0) scaleY(1); opacity:1; }
.era-banner-year{
  font-family: var(--font-mono); color: var(--btc); font-size:11px;
  letter-spacing:0.18em; margin-bottom:2px;
}
.era-banner-label{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(15px, 4.2vw, 20px); letter-spacing:0.01em;
}

.overlay{
  position:absolute; inset:0; z-index:10;
  background: rgba(10,12,16,0.86); backdrop-filter: blur(2px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 24px;
}
.overlay.hidden{ display:none; }
.game-tag{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.14em;
  color: var(--green); background: rgba(22,199,132,0.1);
  border: 1px solid rgba(22,199,132,0.3); border-radius:999px;
  padding: 6px 14px; margin-bottom:16px; text-transform:uppercase;
}
.logo{
  font-size: clamp(26px, 6vw, 36px); font-weight:700; letter-spacing:-0.01em;
}
.logo span{ color: var(--btc); }
.sub{
  font-family: var(--font-mono); font-size:12px; color: var(--text-dim);
  margin-top:10px; max-width:320px; line-height:1.6; letter-spacing:0.02em;
}
.overlay .btn{
  margin-top: 26px; padding: 14px 30px; border-radius: 999px;
  background: var(--btc); color:#161006; border:none;
  font-family: var(--font-display); font-weight:700; font-size:15px;
  cursor:pointer; letter-spacing:0.02em;
}
.overlay .btn:active{ transform: scale(0.97); }
.overlay .btn.secondary{
  background: var(--bg-panel-2); color: var(--text); border:1px solid var(--line);
  padding: 11px 26px; font-size:13px;
}
.overlay .btn.disabled{
  opacity: 0.45; pointer-events: none;
}
.share-status{
  font-family: var(--font-mono); font-size:10px; color: var(--text-dim);
  margin-top:6px; letter-spacing:0.05em;
}
.reason{
  font-family: var(--font-mono); font-size:12px; color: var(--red);
  letter-spacing:0.08em; text-transform:uppercase; margin-top:4px;
}
.final-price{
  font-size: clamp(30px, 8vw, 44px); font-weight:700; margin-top:14px;
  font-variant-numeric: tabular-nums;
}
.hint{
  position:absolute; bottom: 22px; left:0; right:0; text-align:center; z-index:5;
  font-family: var(--font-mono); font-size:10px; color: var(--text-dim);
  letter-spacing:0.12em; text-transform:uppercase; pointer-events:none;
}
.signin-prompt{
  margin-top:16px; font-family: var(--font-mono); font-size:11px; color: var(--text-dim);
}
.signin-prompt.hidden{ display:none; }
.signin-prompt a{ color: var(--btc); }

.record-callout{
  margin-top:16px; font-family: var(--font-mono); font-size:12px; color: var(--text-dim);
  max-width:320px; line-height:1.9; background: rgba(247,147,26,0.08);
  border: 1px solid rgba(247,147,26,0.25); border-radius:10px; padding:12px 16px;
  text-align:left;
}
.record-callout strong{ color: var(--btc); }

.impact-flash{
  position:absolute; inset:0; z-index:9; pointer-events:none; opacity:0;
}
.impact-flash.flash-loss{ background: radial-gradient(circle, rgba(234,57,67,0.35), transparent 70%); animation: flashOut 0.6s ease forwards; }
.impact-flash.flash-win{ background: radial-gradient(circle, rgba(22,199,132,0.4), transparent 70%); animation: flashOut 1s ease forwards; }
@keyframes flashOut{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes shake{
  10%,90%{ transform: translateX(-2px); }
  20%,80%{ transform: translateX(4px); }
  30%,50%,70%{ transform: translateX(-8px); }
  40%,60%{ transform: translateX(8px); }
}
.stage.shake{ animation: shake 0.4s; }