/* ============================================================
   RIGGY RUNNER — stylesheet
   Chunky arcade UI inspired by mobile endless runners.
   ============================================================ */

:root{
  --riggy-blue:#1b74d1;
  --riggy-blue-dark:#0f4c8f;
  --riggy-blue-light:#63b3f7;
  --riggy-red:#e5262b;
  --ink:#10161f;
  --paper:#fdfdfd;
  --gold:#ffc21c;
  --gold-dark:#e08d0b;
  --green:#3ddc6b;
  --purple:#a05cf7;
  --pink:#ff5fa2;
  --shadow:0 6px 0 rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.35);
  --font: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:#05070d; color:#fff; font-family:var(--font);
  overflow:hidden; user-select:none; touch-action:none;
}

#app{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#05070d;}

canvas#game{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; image-rendering:auto; background:#7fd0ff;
}

.layer{position:absolute; inset:0; z-index:5;}
.layer.hidden{display:none !important;}
.hidden{display:none !important;}
.center{display:flex; align-items:center; justify-content:center;}

/* ---------------- HUD ---------------- */
#hud{pointer-events:none; padding:18px 22px; display:flex; flex-direction:column; justify-content:space-between;}
.hud-top{display:flex; justify-content:space-between; align-items:flex-start;}
.hud-left{display:flex; align-items:center; gap:12px;}

.score-block{
  background:linear-gradient(180deg,rgba(9,18,32,.82),rgba(9,18,32,.62));
  border:3px solid rgba(255,255,255,.22); border-radius:16px;
  padding:8px 18px 10px; min-width:190px; backdrop-filter:blur(4px);
  box-shadow:0 6px 0 rgba(0,0,0,.28);
}
.score-label{font-size:11px; letter-spacing:3px; opacity:.7;}
.score-value{
  font-size:44px; font-weight:900; line-height:1;
  text-shadow:0 3px 0 #06203d, 0 0 24px rgba(99,179,247,.55);
  letter-spacing:1px;
}
.score-value.bump{animation:bump .22s ease-out;}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
.score-sub{font-size:12px; opacity:.75; margin-top:2px; letter-spacing:.5px;}

.multi-chip{
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  color:#3a2400; font-weight:900; font-size:26px; padding:6px 14px; border-radius:14px;
  border:3px solid #fff3c9; box-shadow:0 5px 0 #8d5b02, 0 0 26px rgba(255,194,28,.6);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.hud-right{display:flex; align-items:center; gap:14px; pointer-events:auto;}
.coin-block{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,rgba(9,18,32,.82),rgba(9,18,32,.62));
  border:3px solid rgba(255,255,255,.22); border-radius:16px; padding:8px 16px;
  box-shadow:0 6px 0 rgba(0,0,0,.28);
}
.coin-count{font-size:28px; font-weight:900; text-shadow:0 3px 0 #4a3200;}
.coin-icon{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff5c2 0%, var(--gold) 42%, var(--gold-dark) 100%);
  border:3px solid #8d5b02; position:relative; flex:none;
  box-shadow:0 0 14px rgba(255,194,28,.6);
}
.coin-icon::after{
  content:"R"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#8d5b02;
}
.coin-icon.small{width:22px; height:22px; border-width:2px;}
.coin-icon.small::after{font-size:11px;}

.icon-btn{
  width:52px; height:52px; border-radius:14px; border:3px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,rgba(9,18,32,.82),rgba(9,18,32,.6));
  cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 0 rgba(0,0,0,.28);
}
.icon-btn:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.28);}
.pause-bars{width:16px; height:20px; border-left:6px solid #fff; border-right:6px solid #fff;}

.hud-powerups{position:absolute; left:22px; top:118px; display:flex; flex-direction:column; gap:10px;}
.pu-timer{
  display:flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px;
  background:rgba(6,12,22,.72); border:2px solid rgba(255,255,255,.2); min-width:172px;
  animation:slideIn .25s ease-out;
}
@keyframes slideIn{from{transform:translateX(-24px); opacity:0}to{transform:none; opacity:1}}
.pu-timer .glyph{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:16px; flex:none;}
.pu-timer .bar{flex:1; height:9px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden;}
.pu-timer .bar i{display:block; height:100%; border-radius:6px; transition:width .1s linear;}
.pu-timer .txt{font-size:11px; letter-spacing:1.4px; font-weight:700; opacity:.85; width:70px;}

.hud-mission{
  position:absolute; left:50%; top:24px; transform:translateX(-50%) translateY(-140%);
  background:linear-gradient(180deg,#2b1a52,#160c33); border:3px solid var(--purple);
  border-radius:16px; padding:10px 22px; font-weight:800; letter-spacing:1px;
  box-shadow:0 0 30px rgba(160,92,247,.55); transition:transform .4s cubic-bezier(.2,1.4,.4,1);
}
.hud-mission.show{transform:translateX(-50%) translateY(0);}

.combo-pop{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(.6);
  font-size:52px; font-weight:900; color:var(--gold); opacity:0; pointer-events:none;
  text-shadow:0 4px 0 #7a4a00, 0 0 30px rgba(255,194,28,.8);
}
.combo-pop.show{animation:comboPop .8s ease-out;}
@keyframes comboPop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(-8deg);}
  25%{opacity:1; transform:translate(-50%,-50%) scale(1.15) rotate(3deg);}
  70%{opacity:1; transform:translate(-50%,-60%) scale(1) rotate(0);}
  100%{opacity:0; transform:translate(-50%,-95%) scale(.9);}
}

.hud-bottom{display:flex; justify-content:space-between; align-items:flex-end;}
.hoverboard-btn{
  pointer-events:auto; width:82px; height:82px; border-radius:22px; cursor:pointer; position:relative;
  background:linear-gradient(180deg,#1a3f7a,#0d2246); border:3px solid #63b3f7;
  box-shadow:0 6px 0 #071528, 0 0 26px rgba(99,179,247,.4); display:grid; place-items:center;
}
.hoverboard-btn:active{transform:translateY(3px);}
.hoverboard-btn.empty{filter:grayscale(1) brightness(.6); cursor:default;}
.hb-art{
  width:52px; height:16px; border-radius:10px;
  background:linear-gradient(180deg,#ff5fa2,#a01c56); border:2px solid #fff;
  box-shadow:0 8px 12px rgba(255,95,162,.5);
}
.hb-count{
  position:absolute; right:-8px; top:-8px; width:30px; height:30px; border-radius:50%;
  background:var(--riggy-red); border:3px solid #fff; display:grid; place-items:center;
  font-weight:900; font-size:14px;
}
.key-hints{display:flex; gap:16px; font-size:12px; opacity:.6; letter-spacing:1px; padding-bottom:8px;}
.key-hints b{color:var(--gold);}

/* ---------------- MENU ---------------- */
#menu{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:26px 20px 20px; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(120,200,255,.35), transparent 60%),
    linear-gradient(180deg,#0b1c3a 0%, #123a6b 42%, #1f6fae 100%);
}
.menu-sky{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 78% 12%, rgba(255,255,255,.7), transparent),
    radial-gradient(3px 3px at 46% 8%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 88% 40%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 24% 52%, rgba(255,255,255,.35), transparent);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}

.logo-wrap{text-align:center; z-index:2; margin-top:6px;}
.logo{margin:0; line-height:.86; font-weight:900; letter-spacing:-2px;}
.logo-riggy{
  display:block; font-size:78px;
  color:#fff; text-shadow:
    0 0 0 #000, -3px -3px 0 #0b2b52, 3px -3px 0 #0b2b52, -3px 3px 0 #0b2b52, 3px 3px 0 #0b2b52,
    0 9px 0 var(--riggy-blue-dark), 0 16px 30px rgba(0,0,0,.55);
  transform:rotate(-3deg);
}
.logo-runner{
  display:block; font-size:52px; color:var(--gold); transform:rotate(-1.5deg) translateY(-4px);
  text-shadow:-3px -3px 0 #5b3a00, 3px -3px 0 #5b3a00, -3px 3px 0 #5b3a00, 3px 3px 0 #5b3a00, 0 8px 0 #a06400;
  letter-spacing:6px;
}
.logo-tag{
  margin-top:10px; font-size:13px; letter-spacing:6px; opacity:.85; font-weight:700;
  background:rgba(0,0,0,.28); display:inline-block; padding:6px 16px; border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
}

.menu-mascot{position:relative; margin:-6px 0 -10px; z-index:2;}
#menuMascot{width:300px; height:340px; filter:drop-shadow(0 22px 22px rgba(0,0,0,.45));}
.mascot-plate{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--riggy-red),#8f1013); padding:4px 22px; border-radius:999px;
  border:3px solid #fff; font-weight:900; letter-spacing:4px; font-size:14px; box-shadow:0 5px 0 rgba(0,0,0,.35);
}

.menu-stats{display:flex; gap:10px; z-index:2; margin-bottom:14px; flex-wrap:wrap; justify-content:center;}
.stat{
  background:rgba(4,12,26,.55); border:2px solid rgba(255,255,255,.18); border-radius:12px;
  padding:6px 16px; text-align:center; min-width:92px;
}
.stat-k{display:block; font-size:10px; letter-spacing:2px; opacity:.65;}
.stat-v{display:block; font-size:22px; font-weight:900; color:var(--gold);}

.menu-buttons{display:flex; flex-direction:column; gap:12px; align-items:center; z-index:2;}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}

.big-btn{
  font-family:var(--font); font-weight:900; letter-spacing:4px; font-size:32px; color:#0d2a14;
  cursor:pointer;
  background:linear-gradient(180deg,#7bf39a 0%, #2fc45f 55%, #17913f 100%);
  padding:16px 74px; border-radius:20px; border:4px solid #eafff0;
  box-shadow:0 8px 0 #0c6b2c, 0 16px 26px rgba(0,0,0,.45);
  transition:transform .08s ease, box-shadow .08s ease;
}
.big-btn:hover{filter:brightness(1.06);}
.big-btn:active{transform:translateY(6px); box-shadow:0 2px 0 #0c6b2c, 0 8px 14px rgba(0,0,0,.4);}
.big-btn.small{font-size:20px; padding:10px 34px; letter-spacing:2px;}
.big-btn.play{animation:breathe 2.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.mid-btn{
  font-family:var(--font); font-weight:800; letter-spacing:2px; font-size:16px; color:#fff;
  background:linear-gradient(180deg,#3d8ff0,#175ec0); padding:12px 26px; border-radius:14px;
  border:3px solid rgba(255,255,255,.5); cursor:pointer; box-shadow:0 6px 0 #0a3c80;
}
.mid-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #0a3c80;}
.mid-btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)); box-shadow:0 6px 0 rgba(0,0,0,.3);}
.mid-btn:disabled{filter:grayscale(.8) brightness(.7); cursor:not-allowed;}

.menu-foot{position:absolute; bottom:10px; font-size:11px; opacity:.45; letter-spacing:1px; z-index:2;}

/* ---------------- SHEETS (character/shop/missions/how/settings) ---------------- */
.sheet{
  background:linear-gradient(180deg,#0a1730 0%, #12294f 100%);
  padding:18px 22px 26px; overflow-y:auto; z-index:8;
}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.sheet-head h2{margin:0; font-size:30px; letter-spacing:6px; font-weight:900; color:var(--gold);
  text-shadow:0 4px 0 #5b3a00;}
.back-btn{
  width:48px; height:48px; border-radius:14px; font-size:24px; font-weight:900; color:#fff;
  background:linear-gradient(180deg,#3d8ff0,#175ec0); border:3px solid rgba(255,255,255,.5);
  cursor:pointer; box-shadow:0 5px 0 #0a3c80;
}
.back-btn:active{transform:translateY(3px); box-shadow:0 2px 0 #0a3c80;}
.sheet-coins{display:flex; align-items:center; gap:8px; font-weight:900; font-size:20px; color:var(--gold);}

.char-stage{
  display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:radial-gradient(600px 260px at 50% 40%, rgba(99,179,247,.22), transparent 70%);
  padding:6px 0 14px;
}
#charPreview{width:250px; height:290px; filter:drop-shadow(0 18px 18px rgba(0,0,0,.5));}
.char-info{max-width:380px;}
.char-name{font-size:30px; font-weight:900; letter-spacing:1px;}
.char-desc{opacity:.8; margin:6px 0 8px; line-height:1.45; font-size:14px;}
.char-perk{color:var(--green); font-weight:700; font-size:14px; margin-bottom:14px;}

.char-grid,.shop-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:8px;
}
.char-card,.shop-card{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:3px solid rgba(255,255,255,.16); border-radius:18px; padding:12px; cursor:pointer;
  text-align:center; position:relative; transition:transform .12s ease, border-color .12s ease;
}
.char-card:hover,.shop-card:hover{transform:translateY(-4px); border-color:var(--riggy-blue-light);}
.char-card.active{border-color:var(--gold); box-shadow:0 0 22px rgba(255,194,28,.45);}
.char-card canvas{width:100%; height:120px;}
.card-name{font-weight:900; letter-spacing:1px; font-size:14px; margin-top:6px;}
.card-price{font-size:13px; color:var(--gold); font-weight:800; margin-top:4px;}
.card-lock{
  position:absolute; inset:0; border-radius:15px; background:rgba(3,8,18,.55);
  display:grid; place-items:center; font-size:34px;
}
.card-owned{font-size:12px; color:var(--green); font-weight:800; margin-top:4px;}

.shop-tabs{display:flex; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.tab{
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.14); color:#fff;
  padding:8px 20px; border-radius:999px; font-weight:800; letter-spacing:2px; cursor:pointer; font-size:13px;
}
.tab.active{background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#3a2400; border-color:#fff3c9;}
.shop-card .lvl-dots{display:flex; gap:5px; justify-content:center; margin:8px 0 4px;}
.lvl-dots i{width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.2); display:block;}
.lvl-dots i.on{background:var(--green); box-shadow:0 0 10px rgba(61,220,107,.8);}
.shop-icon{font-size:42px; line-height:1;}
.shop-desc{font-size:11px; opacity:.72; line-height:1.35; margin-top:4px; min-height:30px;}
.buy-btn{
  margin-top:8px; width:100%; padding:8px; border-radius:12px; border:2px solid rgba(255,255,255,.45);
  background:linear-gradient(180deg,#3ddc6b,#17913f); color:#062b12; font-weight:900; cursor:pointer;
  letter-spacing:1px;
}
.buy-btn:disabled{background:linear-gradient(180deg,#6b7280,#3f4652); color:#cfd4dd; cursor:not-allowed;}

.mission-note{opacity:.72; font-size:13px; margin-bottom:12px;}
.mission-list{display:flex; flex-direction:column; gap:12px;}
.mission-row{
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14); border-radius:16px; padding:12px 16px;
}
.mission-row.done{border-color:var(--green); background:rgba(61,220,107,.13);}
.mission-title{font-weight:800; letter-spacing:.5px;}
.mission-prog{height:10px; border-radius:6px; background:rgba(255,255,255,.15); margin-top:8px; overflow:hidden;}
.mission-prog i{display:block; height:100%; background:linear-gradient(90deg,#63b3f7,#3ddc6b); border-radius:6px;}
.mission-val{font-size:12px; opacity:.75; margin-top:5px;}

.rank-row{display:flex; align-items:center; gap:16px; margin-top:22px;}
.rank-badge{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:26px; font-weight:900;
  background:radial-gradient(circle at 35% 30%, #fff4c6, var(--gold) 45%, var(--gold-dark));
  color:#5b3a00; border:4px solid #fff;
}
.rank-title{font-weight:900; letter-spacing:2px;}
.rank-bar{width:min(420px,60vw); height:12px; border-radius:8px; background:rgba(255,255,255,.15); margin:6px 0 4px; overflow:hidden;}
.rank-fill{height:100%; background:linear-gradient(90deg,var(--gold),#ff8a3d); border-radius:8px;}
.rank-sub{font-size:12px; opacity:.7;}

.how-body{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px;}
.how-card{background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14); border-radius:18px; padding:16px 20px;}
.how-card h3{margin:0 0 10px; letter-spacing:3px; color:var(--riggy-blue-light);}
.how-card ul{margin:0; padding-left:18px; line-height:1.7; font-size:14px; opacity:.9;}
.pu-dot{width:14px; height:14px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-2px;}
.pu-dot.magnet{background:#ff4d4d;} .pu-dot.jet{background:#ff9d2e;}
.pu-dot.x2{background:var(--gold);} .pu-dot.boots{background:var(--green);}
.pu-dot.shield{background:#5ee7ff;}

.settings-body{max-width:520px;}
.toggle-row{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer;
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.14); border-radius:14px; margin-bottom:10px;
  font-weight:700; letter-spacing:.5px;
}
.toggle-row input{display:none;}
.toggle-row i{width:56px; height:30px; border-radius:999px; background:rgba(0,0,0,.45); position:relative; transition:background .18s;}
.toggle-row i::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition:transform .18s;
}
.toggle-row input:checked + i{background:var(--green);}
.toggle-row input:checked + i::after{transform:translateX(26px);}
.danger-row{margin-top:18px;}
.credits{margin-top:20px; font-size:12px; opacity:.55; line-height:1.6;}

/* ---------------- MODALS ---------------- */
.modal{display:flex; align-items:center; justify-content:center; background:rgba(3,8,18,.72); backdrop-filter:blur(5px); z-index:9;}
.modal-card{
  background:linear-gradient(180deg,#13294d,#091731); border:4px solid rgba(255,255,255,.22);
  border-radius:26px; padding:26px 34px 30px; text-align:center; min-width:340px;
  box-shadow:0 24px 60px rgba(0,0,0,.6); animation:popIn .25s cubic-bezier(.2,1.5,.4,1);
  max-height:92vh; overflow:auto;
}
.modal-card.wide{min-width:min(560px,92vw);}
@keyframes popIn{from{transform:scale(.86); opacity:0}to{transform:scale(1); opacity:1}}
.modal-card h2{margin:0 0 16px; letter-spacing:8px; font-size:30px; color:var(--gold); text-shadow:0 4px 0 #5b3a00;}
.pause-stats{display:flex; gap:20px; justify-content:center; margin-bottom:20px;}
.pause-stats div{display:flex; flex-direction:column;}
.pause-stats span{font-size:11px; letter-spacing:2px; opacity:.6;}
.pause-stats b{font-size:24px;}

.go-ribbon{
  display:inline-block; background:linear-gradient(180deg,var(--riggy-red),#8f1013);
  border:3px solid #fff; border-radius:999px; padding:6px 30px; font-weight:900; letter-spacing:5px;
  transform:rotate(-2deg); box-shadow:0 6px 0 rgba(0,0,0,.35); margin-bottom:10px;
}
.go-ribbon.record{background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#3a2400;}
.go-score{font-size:70px; font-weight:900; line-height:1; text-shadow:0 5px 0 #06203d;}
.go-best{opacity:.7; letter-spacing:2px; margin-bottom:16px; font-size:13px;}
.go-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.go-cell{background:rgba(255,255,255,.08); border-radius:12px; padding:8px 6px; border:2px solid rgba(255,255,255,.1);}
.go-cell span{display:block; font-size:10px; letter-spacing:1.5px; opacity:.6;}
.go-cell b{font-size:19px;}
.go-missions{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:12px; text-align:left;}
.go-missions .mrow{display:flex; justify-content:space-between; gap:10px; background:rgba(255,255,255,.06);
  padding:7px 12px; border-radius:10px;}
.go-missions .mrow.done{background:rgba(61,220,107,.18); color:#c9ffd9;}

/* ---------------- COUNTDOWN / TOASTS / FPS ---------------- */
#countdown{background:rgba(3,8,18,.35); z-index:9; pointer-events:none;}
.count-num{
  font-size:170px; font-weight:900; color:#fff;
  text-shadow:0 0 40px rgba(99,179,247,.9), 0 10px 0 var(--riggy-blue-dark);
  animation:countPop .8s ease-out;
}
@keyframes countPop{0%{transform:scale(2.2); opacity:0}30%{transform:scale(1); opacity:1}100%{transform:scale(.7); opacity:0}}

#toastHost{position:absolute; bottom:110px; left:50%; transform:translateX(-50%); z-index:10;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{
  background:rgba(6,14,28,.9); border:2px solid rgba(255,255,255,.25); border-radius:999px;
  padding:9px 22px; font-weight:800; letter-spacing:1.5px; font-size:14px;
  animation:toastIn .3s ease-out, toastOut .4s ease-in 2s forwards;
}
.toast.good{border-color:var(--green); color:#c9ffd9;}
.toast.bad{border-color:var(--riggy-red); color:#ffd2d2;}
.toast.gold{border-color:var(--gold); color:#fff0bd;}
@keyframes toastIn{from{transform:translateY(20px); opacity:0}to{transform:none; opacity:1}}
@keyframes toastOut{to{transform:translateY(-14px); opacity:0}}

#fps{position:absolute; right:10px; bottom:8px; font-size:12px; opacity:.6; z-index:11; font-family:monospace;}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 820px){
  .logo-riggy{font-size:54px;} .logo-runner{font-size:34px; letter-spacing:4px;}
  #menuMascot{width:220px; height:250px;}
  .big-btn{font-size:26px; padding:14px 52px;}
  .key-hints{display:none;}
  .score-value{font-size:34px;}
  .go-grid{grid-template-columns:repeat(2,1fr);}
  .char-stage{flex-direction:column;}
}
@media (max-height: 700px){
  #menuMascot{width:190px; height:215px;}
  .menu-stats{margin-bottom:8px;}
  .logo-riggy{font-size:56px;}
}

/* ---------- second chance + local leaderboard ---------- */
.big-btn.revive{
  background:linear-gradient(180deg,#57e0ff,#1a9ec9); color:#052430;
  box-shadow:0 6px 0 #0d6c8c, 0 12px 22px rgba(0,0,0,.35);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px;
}
.big-btn.revive:active{transform:translateY(4px); box-shadow:0 2px 0 #0d6c8c;}
.go-board{display:flex; flex-direction:column; gap:4px; margin-bottom:14px; font-size:12px; text-align:left;}
.board-head{letter-spacing:2px; opacity:.6; font-size:10px; margin-bottom:2px;}
.go-board .brow{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border-radius:9px; padding:5px 10px;
}
.go-board .brow span{opacity:.55;}
.go-board .brow i{font-style:normal; opacity:.7;}
.go-board .brow.mine{background:rgba(255,210,63,.18); color:#fff0bd;}
.big-btn.revive{width:100%;}