/* Fonts bundled locally via fonts/fonts.css — fully offline */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #05010f;
  --bg2:     #0e0426;
  --cyan:    #00eaff;
  --pink:    #ff2bd6;
  --purple:  #9a3cff;
  --yellow:  #ffd23f;
  --green:   #2bff88;
  --red:     #ff3355;
  --text:    #cfd8ff;
  --text2:   #7a6ba8;
  --card:    rgba(14,4,38,0.92);
  --border:  rgba(154,60,255,0.32);
  --trans:   0.25s cubic-bezier(0.4,0,0.2,1);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--purple) transparent; }

html, body {
  height: 100vh; height: 100dvh; height: var(--app-height,100dvh);
  width: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: 'Rajdhani', Arial, sans-serif; font-weight: 500;
  user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  position: fixed; inset: 0; overscroll-behavior: none;
}

.screen {
  position: fixed; inset: 0; height: var(--app-height,100dvh);
  display: none; flex-direction: column; background: var(--bg);
  overflow: hidden; z-index: 1;
}
.screen.active { display: flex; }
.overlay { z-index: 50; background: rgba(5,1,15,0.84); backdrop-filter: blur(4px); justify-content: center; align-items: center; }

.tribute-heart { filter: drop-shadow(0 0 7px rgba(255,40,70,0.85)); }

/* ═══ LOADING ═══ */
#s-loading { justify-content: center; align-items: center; }
#load-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.load-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px; }
.load-logo { width: 84px; height: 100px; filter: drop-shadow(0 0 20px rgba(0,234,255,0.8)); animation: bob 1.6s ease-in-out infinite; }
.load-bike { width: 100%; height: 100%; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.load-title { font-family: 'Orbitron'; font-weight: 900; font-size: clamp(34px,9vw,50px); text-align: center; line-height: 1.1; letter-spacing: 4px;
  background: linear-gradient(135deg,#00eaff,#fff,#ff2bd6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.load-tag { font-size: 14px; color: var(--text2); letter-spacing: 3px; text-transform: uppercase; }
.load-bar-wrap { width: min(300px,78vw); height: 4px; background: rgba(154,60,255,0.2); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.load-bar { height: 100%; width: 0%; background: linear-gradient(90deg,var(--cyan),var(--pink)); border-radius: 2px; transition: width 0.3s ease; }
.load-status { font-size: 12px; color: var(--text2); letter-spacing: 1px; }
.load-tribute { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: 1.5px; color: rgba(220,210,255,0.55); z-index: 2; animation: fadeIn 2.5s ease both; }
@keyframes fadeIn { 0%,40%{opacity:0} 100%{opacity:1} }

/* ═══ MAIN MENU ═══ */
#s-menu { justify-content: flex-end; }
#menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.menu-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%;
  padding: max(54px,calc(40px + env(safe-area-inset-top))) 24px max(34px,calc(24px + env(safe-area-inset-bottom))); }
.menu-logo-area { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: slideUp 0.6s ease both; }
@keyframes slideUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
.menu-logo-icon { width: 76px; height: 92px; filter: drop-shadow(0 0 24px rgba(0,234,255,0.7)); animation: bob 3s ease-in-out infinite; }
.menu-logo-icon svg { width: 100%; height: 100%; }
.menu-title { font-family: 'Orbitron'; font-weight: 900; font-size: clamp(38px,11vw,58px); letter-spacing: 5px; color: #fff; text-shadow: 0 0 26px rgba(0,234,255,0.6); display: flex; }
.menu-title span { background: linear-gradient(135deg,#ff2bd6,#9a3cff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.menu-coins { display: flex; align-items: center; gap: 6px; font-family: 'Orbitron'; font-size: 15px; color: var(--yellow); background: rgba(255,210,63,0.1); padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,210,63,0.3); }
.coin-ic { font-size: 14px; }
.menu-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; animation: slideUp 0.6s 0.15s ease both; }
.btn-play { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px; border: none; border-radius: 50px; color: #fff;
  font-family: 'Orbitron'; font-weight: 700; font-size: 18px; letter-spacing: 3px; cursor: pointer;
  background: linear-gradient(135deg,#00b8cc,#cc00ff); box-shadow: 0 0 28px rgba(0,234,255,0.45), inset 0 1px 0 rgba(255,255,255,0.2); transition: var(--trans); }
.btn-play:active { transform: scale(0.96); }
.btn-play span { font-size: 18px; }
.menu-row { display: flex; gap: 10px; }
.btn-sm { flex: 1; padding: 13px 8px; background: rgba(154,60,255,0.13); border: 1px solid rgba(154,60,255,0.35); border-radius: 12px; color: var(--text);
  font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; letter-spacing: 1px; cursor: pointer; transition: var(--trans); }
.btn-sm:active { background: rgba(154,60,255,0.3); }
.menu-footer { animation: slideUp 0.6s 0.3s ease both; text-align: center; }
.menu-dev { font-size: 12px; color: var(--text2); letter-spacing: 0.5px; }
.menu-dev a { color: var(--cyan); text-decoration: none; font-weight: 600; }

/* ═══ HEADER (shared) ═══ */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  padding-top: max(20px,calc(14px + env(safe-area-inset-top))); background: rgba(5,1,15,0.95); border-bottom: 1px solid rgba(154,60,255,0.2); flex-shrink: 0; position: relative; }
.hdr::after { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--purple),transparent); }
.hdr h2 { font-family: 'Orbitron'; font-weight: 700; font-size: 16px; letter-spacing: 2px; color: #fff; }
.hdr-back { width: 40px; height: 40px; background: rgba(154,60,255,0.15); border: 1px solid rgba(154,60,255,0.3); border-radius: 50%; color: var(--purple); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--trans); }
.hdr-back:active { background: rgba(154,60,255,0.4); }
.hdr-center { text-align: center; }
.hdr-center span { font-size: 11px; color: var(--text2); letter-spacing: 2px; }
.hdr-stars { font-family: 'Orbitron'; font-size: 13px; color: var(--yellow); white-space: nowrap; }

/* ═══ WORLDS ═══ */
.worlds-list { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; touch-action: pan-y;
  padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.world-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; cursor: pointer; transition: var(--trans); display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; }
.world-card.unlocked:active { transform: scale(0.98); border-color: var(--cyan); }
.world-card.locked { opacity: 0.5; }
.world-emoji { font-size: 36px; flex-shrink: 0; filter: drop-shadow(0 0 8px currentColor); }
.world-info { flex: 1; }
.world-name { font-family: 'Orbitron'; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.world-desc { font-size: 13px; color: var(--text2); }
.world-stars { font-family: 'Orbitron'; font-size: 13px; color: var(--yellow); flex-shrink: 0; }
.world-lock { font-size: 22px; opacity: 0.6; flex-shrink: 0; }
.world-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(154,60,255,0.15); }
.world-bar-fill { height: 100%; }

/* ═══ LEVELS ═══ */
.levels-grid { flex: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 18px; overflow-y: auto; align-content: start; touch-action: pan-y;
  padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.lv-cell { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: var(--trans); position: relative; overflow: hidden; }
.lv-cell.unlocked:active { transform: scale(0.93); border-color: var(--cyan); }
.lv-cell.locked { opacity: 0.35; }
.lv-cell.done { border-color: rgba(43,255,136,0.4); }
.lv-num { font-family: 'Orbitron'; font-size: 16px; font-weight: 700; color: #fff; }
.lv-stars { font-size: 9px; color: var(--yellow); line-height: 1; }
.lv-stars .off { opacity: 0.2; }
.lv-lock { font-size: 16px; opacity: 0.5; }
.lv-icon { position: absolute; top: 3px; right: 4px; font-size: 10px; }
.lv-boss { position: absolute; top: 3px; left: 4px; font-size: 9px; background: rgba(255,51,85,0.25); color: var(--red); padding: 1px 4px; border-radius: 3px; font-family: 'Orbitron'; }

/* ═══ GAME ═══ */
.game-screen { background: #000; }
#game-canvas { position: fixed; top: 0; left: 0; z-index: 10; touch-action: none; }
/* TOP-LEFT score block */
.hud-tl { position: fixed; left: 16px; top: max(14px,calc(10px + env(safe-area-inset-top))); z-index: 20; pointer-events: none; }
.hud-label { font-family: 'Orbitron'; font-size: 11px; letter-spacing: 2px; color: rgba(255,43,214,0.9); text-shadow: 0 0 8px rgba(255,43,214,0.5); }
.hud-mt { margin-top: 10px; color: rgba(0,234,255,0.9); text-shadow: 0 0 8px rgba(0,234,255,0.5); }
.hud-score { font-family: 'Orbitron'; font-weight: 900; font-size: 30px; color: #fff; line-height: 1; text-shadow: 0 0 16px rgba(255,43,214,0.7); }
.hud-dist { font-family: 'Orbitron'; font-weight: 700; font-size: 19px; color: #fff; line-height: 1.1; text-shadow: 0 0 12px rgba(0,234,255,0.6); }

/* TOP-RIGHT info block */
.hud-tr { position: fixed; right: 14px; top: max(12px,calc(8px + env(safe-area-inset-top))); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; }
.g-pause { width: 38px; height: 38px; background: rgba(10,2,30,0.7); border: 1.5px solid rgba(154,60,255,0.5); border-radius: 10px; color: var(--purple); font-size: 12px; letter-spacing: 1px; cursor: pointer; pointer-events: all; margin-bottom: 4px; }
.g-pause:active { background: rgba(154,60,255,0.4); }
.hud-rrow { display: flex; align-items: baseline; gap: 8px; }
.hud-rrow .hud-label { font-size: 10px; }
.hud-goal-l { color: rgba(255,210,63,0.9) !important; text-shadow: 0 0 8px rgba(255,210,63,0.5) !important; }
.hud-pos { font-family: 'Orbitron'; font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 0 12px rgba(255,43,214,0.6); }
.hud-pos small { font-size: 12px; color: var(--text2); font-weight: 400; }
.hud-time { font-family: 'Orbitron'; font-weight: 700; font-size: 15px; color: var(--cyan); text-shadow: 0 0 10px rgba(0,234,255,0.5); }
.hud-goal { font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; color: #fff; max-width: 150px; text-align: right; }
.hud-map { margin-top: 6px; filter: drop-shadow(0 0 8px rgba(255,43,214,0.4)); }

/* thin goal progress bar at very top */
.g-goalbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,0.4); z-index: 19; }
.g-goal-bar { height: 100%; width: 0%; background: linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow: 0 0 8px var(--pink); transition: width 0.2s; }

/* centre ticker (coins/combo) */
.hud-ticker { position: fixed; top: max(96px,calc(90px + env(safe-area-inset-top))); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 20; pointer-events: none; }
.g-stat { display: flex; align-items: center; gap: 4px; font-family: 'Orbitron'; font-size: 15px; color: var(--yellow); text-shadow: 0 0 10px rgba(255,210,63,0.6); }
.g-stat-ic { font-size: 14px; }
#g-combo-wrap { color: #ff8833; }

.g-tap-hint { position: fixed; inset: 0; z-index: 15; display: flex; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.g-tap-hint.show { opacity: 1; }
.tap-side { flex: 1; display: flex; align-items: center; justify-content: center; font-family: 'Orbitron'; font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 2px; animation: tapPulse 1.2s ease-in-out infinite; }
.tap-left { background: linear-gradient(90deg,rgba(0,234,255,0.14),transparent); }
.tap-right { background: linear-gradient(270deg,rgba(255,43,214,0.14),transparent); }
@keyframes tapPulse { 0%,100%{opacity:0.4} 50%{opacity:0.9} }
.g-floats { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.float-t { position: absolute; font-family: 'Orbitron'; font-size: 15px; font-weight: 700; pointer-events: none; white-space: nowrap; animation: floatUp 0.9s ease both; }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-46px) scale(0.8)} }

/* bottom-left steer arrows */
.g-arrows { position: fixed; left: max(16px,calc(12px + env(safe-area-inset-left))); bottom: max(26px,calc(20px + env(safe-area-inset-bottom))); z-index: 22; display: flex; gap: 12px; }
.g-arrow { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(154,60,255,0.55); background: radial-gradient(circle at 40% 35%,rgba(154,60,255,0.22),rgba(10,2,30,0.6)); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(154,60,255,0.3); transition: transform 0.1s, background 0.15s; }
.g-arrow:active { transform: scale(0.9); background: rgba(154,60,255,0.5); }

/* bottom-right nitro */
.g-nitro { position: fixed; right: max(18px,calc(14px + env(safe-area-inset-right))); bottom: max(26px,calc(20px + env(safe-area-inset-bottom))); z-index: 22;
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(154,60,255,0.6); background: radial-gradient(circle at 40% 35%,rgba(154,60,255,0.3),rgba(10,2,30,0.6));
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 20px rgba(154,60,255,0.35); transition: var(--trans); }
.g-nitro:active { transform: scale(0.92); }
.g-nitro.disabled { opacity: 0.4; }
.g-nitro.ready { border-color: var(--yellow); animation: nitroGlow 1s ease-in-out infinite; }
.g-nitro.ready .nitro-ic { color: var(--yellow); }
@keyframes nitroGlow { 0%,100%{box-shadow:0 0 20px rgba(255,210,63,0.4)} 50%{box-shadow:0 0 34px rgba(255,210,63,0.85)} }
.nitro-ic { font-size: 30px; color: var(--purple); }

/* ═══ OVERLAY CARDS ═══ */
.ov-card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 30px 26px; width: min(360px,90vw); display: flex; flex-direction: column; align-items: center; gap: 18px; box-shadow: 0 0 50px rgba(154,60,255,0.25); animation: pop 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes pop { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
.ov-title { font-family: 'Orbitron'; font-weight: 900; font-size: 26px; color: #fff; letter-spacing: 3px; text-align: center; }
.win-title { color: var(--green); text-shadow: 0 0 20px rgba(43,255,136,0.5); }
.crash-title { color: var(--red); text-shadow: 0 0 20px rgba(255,51,85,0.5); }
.ov-sub, .crash-sub, .result-tag { font-size: 13px; color: var(--text2); text-align: center; letter-spacing: 1px; }
.result-tag { font-family: 'Orbitron'; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; }
.stars-row { display: flex; gap: 14px; }
.star-big { font-size: 40px; color: var(--grey,#332255); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.star-big.earned { color: var(--yellow); text-shadow: 0 0 20px rgba(255,210,63,0.8); transform: scale(1.2); }
.result-stats { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rstat { display: flex; justify-content: space-between; font-size: 14px; }
.rstat-l { color: var(--text2); }
.rstat-v { color: #fff; font-family: 'Orbitron'; font-size: 13px; }
.endless-score { font-family: 'Orbitron'; font-weight: 900; font-size: 40px; color: var(--cyan); text-shadow: 0 0 24px rgba(0,234,255,0.6); }
.ov-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.btn-ov { width: 100%; padding: 15px; background: linear-gradient(135deg,#00b8cc,#cc00ff); border: none; border-radius: 50px; color: #fff; font-family: 'Orbitron'; font-weight: 700; font-size: 14px; letter-spacing: 2px; cursor: pointer; box-shadow: 0 0 18px rgba(0,234,255,0.4); transition: var(--trans); }
.btn-ov:active { transform: scale(0.97); }
.btn-ov-2 { width: 100%; padding: 13px; background: rgba(154,60,255,0.13); border: 1px solid rgba(154,60,255,0.32); border-radius: 50px; color: var(--text); font-family: 'Rajdhani'; font-weight: 700; font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.btn-ov-3 { width: 100%; padding: 12px; background: rgba(255,51,85,0.1); border: 1px solid rgba(255,51,85,0.3); border-radius: 50px; color: rgba(255,120,140,0.9); font-family: 'Rajdhani'; font-weight: 700; font-size: 14px; cursor: pointer; }

/* ═══ GARAGE ═══ */
.garage-tabs { display: flex; gap: 8px; padding: 14px 18px 4px; }
.gtab { flex: 1; padding: 11px 4px; background: rgba(154,60,255,0.1); border: 1px solid rgba(154,60,255,0.25); border-radius: 10px; color: var(--text2); font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; cursor: pointer; transition: var(--trans); }
.gtab.gtab-active { background: linear-gradient(135deg,rgba(0,184,204,0.3),rgba(204,0,255,0.2)); color: #fff; border-color: var(--cyan); }
.garage-grid { flex: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 14px 18px; overflow-y: auto; align-content: start; touch-action: pan-y; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.gcard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: var(--trans); position: relative; }
.gcard:active { transform: scale(0.97); }
.gcard.selected { border-color: var(--cyan); box-shadow: 0 0 16px rgba(0,234,255,0.3); }
.gcard.locked { opacity: 0.6; }
.gcard-emoji { font-size: 40px; filter: drop-shadow(0 0 8px currentColor); }
.gcard-name { font-family: 'Orbitron'; font-size: 12px; color: #fff; text-align: center; }
.gcard-stat { font-size: 11px; color: var(--text2); }
.gcard-price { display: flex; align-items: center; gap: 4px; font-family: 'Orbitron'; font-size: 12px; color: var(--yellow); }
.gcard-tag { font-family: 'Orbitron'; font-size: 10px; padding: 3px 10px; border-radius: 20px; letter-spacing: 1px; }
.tag-equipped { background: rgba(43,255,136,0.18); color: var(--green); }
.tag-select { background: rgba(0,234,255,0.15); color: var(--cyan); }
.tag-locked { background: rgba(255,51,85,0.12); color: rgba(255,120,140,0.9); }

/* ═══ SETTINGS ═══ */
.sett-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; touch-action: pan-y; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
.sett-sec { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sett-title { padding: 10px 14px; font-family: 'Orbitron'; font-size: 10px; letter-spacing: 2px; color: var(--text2); background: rgba(154,60,255,0.07); border-bottom: 1px solid rgba(154,60,255,0.12); }
.sett-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid rgba(154,60,255,0.06); font-size: 14px; }
.sett-row:last-child { border-bottom: none; }
.sett-col { flex-direction: column; align-items: stretch; gap: 9px; }
.tog { position: relative; display: inline-flex; cursor: pointer; }
.tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.tk { width: 46px; height: 26px; background: rgba(154,60,255,0.2); border-radius: 13px; position: relative; transition: var(--trans); border: 1px solid rgba(154,60,255,0.25); }
.tog input:checked + .tk { background: var(--purple); box-shadow: 0 0 10px rgba(154,60,255,0.4); }
.th { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: var(--trans); }
.tog input:checked + .tk .th { transform: translateX(20px); }
.seg { display: flex; background: rgba(10,2,30,0.6); border: 1px solid rgba(154,60,255,0.3); border-radius: 10px; padding: 3px; }
.seg-o { flex: 1; padding: 10px 4px; background: transparent; border: none; color: var(--text2); font-family: 'Orbitron'; font-size: 11px; cursor: pointer; border-radius: 8px; transition: var(--trans); }
.seg-o.seg-on { background: linear-gradient(135deg,#00b8cc,#9a3cff); color: #fff; }
.sett-about .sett-title { color: rgba(180,160,255,0.85); }
.about-box { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; }
.about-game { font-family: 'Orbitron'; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.about-ver { font-size: 10px; color: var(--text2); }
.about-dev { display: flex; flex-direction: column; gap: 4px; }
.about-label { font-size: 11px; color: var(--text2); letter-spacing: 1px; }
.about-name { font-family: 'Orbitron'; font-size: 15px; color: var(--purple); }
.about-link { font-size: 13px; color: var(--cyan); text-decoration: none; }
.about-tribute { margin-top: 4px; padding: 13px 14px; cursor: pointer; background: linear-gradient(135deg,rgba(255,255,255,0.04),rgba(180,150,255,0.05)); border: 1px solid rgba(220,210,255,0.18); border-radius: 12px; text-align: center; }
.about-tribute:active { background: rgba(255,255,255,0.07); }
.about-tribute-line { font-family: 'Rajdhani'; font-weight: 700; font-size: 15px; color: rgba(235,228,255,0.9); }
.about-tribute-sub { font-size: 11px; color: rgba(180,165,220,0.6); letter-spacing: 1px; margin-top: 4px; }
.sett-danger .sett-title { color: rgba(255,100,100,0.7); background: rgba(255,51,85,0.05); }
.btn-reset { width: calc(100% - 28px); margin: 12px 14px; padding: 11px; background: rgba(255,51,85,0.08); border: 1px solid rgba(255,51,85,0.3); border-radius: 8px; color: rgba(255,120,140,0.85); font-family: 'Rajdhani'; font-weight: 700; font-size: 13px; cursor: pointer; }

/* ═══ TRIBUTE SCREEN ═══ */
.tribute-screen { justify-content: center; align-items: center; overflow: hidden; }
#tribute-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.tribute-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 32px; animation: tcIn 1.2s ease both; }
@keyframes tcIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.tribute-big-heart { font-size: 60px; filter: drop-shadow(0 0 26px rgba(255,40,70,0.7)); animation: hb 3.5s ease-in-out infinite; }
@keyframes hb { 0%,100%{transform:scale(1)} 15%{transform:scale(1.12)} 30%{transform:scale(1)} }
.tribute-main-line { margin-top: 18px; font-family: 'Rajdhani'; font-size: 16px; letter-spacing: 2px; color: rgba(210,200,240,0.7); }
.tribute-maa { font-family: 'Orbitron'; font-weight: 900; font-size: 56px; letter-spacing: 6px; margin: 6px 0 4px; background: linear-gradient(135deg,#fff,#d8c8ff,#fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 40px rgba(220,210,255,0.4); }
.tribute-date { font-family: 'Orbitron'; font-size: 13px; letter-spacing: 4px; color: rgba(200,185,245,0.75); }
.tribute-divider { width: 100px; height: 1px; margin: 22px 0; background: linear-gradient(90deg,transparent,rgba(220,210,255,0.6),transparent); }
.tribute-message { font-family: 'Rajdhani'; font-size: 16px; line-height: 1.9; color: rgba(225,218,245,0.82); max-width: 340px; }
.tribute-signature { margin-top: 26px; font-family: 'Rajdhani'; font-style: italic; font-size: 15px; color: rgba(200,185,245,0.7); }
.tribute-back-btn { margin-top: 34px; padding: 12px 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(220,210,255,0.25); border-radius: 50px; color: rgba(235,228,255,0.9); font-family: 'Rajdhani'; font-size: 14px; cursor: pointer; }

/* ═══ TOAST + CONFIRM ═══ */
.toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(10,2,30,0.95); border: 1px solid rgba(154,60,255,0.5); color: #fff; padding: 12px 22px; border-radius: 50px; font-family: 'Orbitron'; font-size: 12px; box-shadow: 0 0 24px rgba(154,60,255,0.4); opacity: 0; transition: all 0.3s; z-index: 200; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.confirm-ov { position: fixed; inset: 0; z-index: 300; background: rgba(5,1,15,0.85); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.confirm-card { background: var(--card); border: 1px solid rgba(255,51,85,0.4); border-radius: 20px; padding: 26px 22px; width: min(320px,86vw); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.confirm-title { font-family: 'Orbitron'; font-size: 16px; color: var(--red); letter-spacing: 2px; }
.confirm-msg { font-size: 14px; color: var(--text2); text-align: center; }
.confirm-btns { display: flex; gap: 10px; width: 100%; }
.confirm-yes, .confirm-no { flex: 1; padding: 12px; border-radius: 50px; font-family: 'Orbitron'; font-size: 12px; cursor: pointer; }
.confirm-yes { background: rgba(255,51,85,0.15); border: 1px solid rgba(255,51,85,0.4); color: var(--red); }
.confirm-no { background: rgba(154,60,255,0.12); border: 1px solid rgba(154,60,255,0.3); color: var(--text); }