Enhance your PandaType Experience
// ==UserScript==
// @name PandaTree
// @namespace http://tampermonkey.net/
// @version 4.2
// @description Enhance your PandaType Experience
// @author narwhal
// @match https://pandatype.org/*
// @match https://www.pandatype.org/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// --- 1. Base CSS Style Sheet & Matrix Theme Rules ---
const glassThemeCSS = `
html {
overscroll-behavior: none !important;
}
body {
overscroll-behavior: none !important;
color: #ffffff !important;
font-family: 'Trebuchet MS', sans-serif !important;
font-size: 20px;
text-align: center;
overflow-x: hidden !important;
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
/* --- EXPERIMENTAL: Light Mode Overrides --- */
body.pt-light-mode {
background: #f1f5f9 !important;
background-image: none !important;
color: #000000 !important;
}
body.pt-light-mode nav,
body.pt-light-mode .navbar,
body.pt-light-mode [class*="nav"],
body.pt-light-mode .bar {
background-color: #000000 !important;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15) !important;
text-shadow: none !important;
border: 1px solid #000000 !important;
}
body.pt-light-mode nav *,
body.pt-light-mode .navbar *,
body.pt-light-mode [class*="nav"] * {
color: #ffffff !important;
font-weight: bold !important;
}
body.pt-light-mode nav a:hover,
body.pt-light-mode .navbar a:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
}
body.pt-light-mode .blurrer,
body.pt-light-mode [class*="card"],
body.pt-light-mode [class*="box"],
body.pt-light-mode [class*="container"] div:not(#bg-uploader-panel):not(#bg-uploader-menu),
body.pt-light-mode main div,
body.pt-light-mode #app div:not(#bg-uploader-panel):not(#bg-uploader-menu) {
background-color: #ffffff !important;
color: #000000 !important;
text-shadow: none !important;
}
body.pt-light-mode td:first-child div,
body.pt-light-mode td:first-child span,
body.pt-light-mode [class*="rank"] div,
body.pt-light-mode [class*="rank"] span,
body.pt-light-mode [class*="leaderboard"] td div,
body.pt-light-mode [class*="leaderboard"] tr div {
background-color: #f3e8e2 !important;
color: #000000 !important;
}
body.pt-light-mode h1, body.pt-light-mode h2, body.pt-light-mode h3, body.pt-light-mode h4,
body.pt-light-mode p, body.pt-light-mode span:not(.slider):not(.bg-btn), body.pt-light-mode b, body.pt-light-mode i {
color: #000000 !important;
}
/* --- MATRIX / HACKER MODE OVERRIDES --- */
body.pt-matrix-mode {
background-color: #000000 !important;
background-image: none !important;
color: #00ff00 !important;
font-family: 'Courier New', Courier, monospace !important;
}
body.pt-matrix-mode h1, body.pt-matrix-mode h2, body.pt-matrix-mode h3, body.pt-matrix-mode h4,
body.pt-matrix-mode p, body.pt-matrix-mode span:not(.slider):not(.bg-btn), body.pt-matrix-mode b, body.pt-matrix-mode i,
body.pt-matrix-mode div:not(#bg-uploader-panel):not(#bg-uploader-menu), body.pt-matrix-mode a:not(.bg-btn), body.pt-matrix-mode .ch {
color: #00ff00 !important;
text-shadow: 0 0 8px rgba(0, 255, 0, 0.8) !important;
}
body.pt-matrix-mode .blurrer,
body.pt-matrix-mode [class*="card"],
body.pt-matrix-mode [class*="box"],
body.pt-matrix-mode nav, body.pt-matrix-mode .navbar, body.pt-matrix-mode [class*="nav"] {
background-color: rgba(0, 0, 0, 0.85) !important;
border: 1px solid #00ff00 !important;
box-shadow: 0 0 15px rgba(0, 255, 0, 0.4) !important;
}
body.pt-matrix-mode .ch.correct {
color: #ffffff !important;
text-shadow: 0 0 10px #ffffff !important;
}
body.pt-matrix-mode .ch.incorrect {
color: #ff0000 !important;
text-shadow: 0 0 10px #ff0000 !important;
}
#pt-matrix-canvas {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: -1000 !important;
pointer-events: none !important;
display: none;
}
body.pt-matrix-mode #pt-matrix-canvas {
display: block !important;
}
#bg-uploader-panel * {
text-shadow: none;
}
body.pt-light-mode hr { border-top: 2px solid rgba(0, 0, 0, 0.1) !important; }
body.pt-matrix-mode hr { border-top: 2px solid rgba(0, 255, 0, 0.3) !important; }
body::-webkit-scrollbar { display: none !important; }
body { -ms-overflow-style: none !important; scrollbar-width: none !important; }
a {
color: #ffffff !important;
text-decoration: none !important;
}
hr {
margin: 50px;
border: 0;
border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
}
/* --- Liquid Glass Core Components --- */
nav, .navbar, [class*="nav"], .blurrer, .bar {
border-radius: 30px !important;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4) !important;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5) !important;
background-color: rgba(0, 0, 0, 0.15) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
transition: all 0.25s ease-in-out !important;
}
.fancy, nav a, [class*="nav"] a {
padding: 10px;
border-radius: 20px !important;
transition: all 0.25s ease-in-out !important;
cursor: pointer !important;
display: inline-block;
}
.fancy:hover, nav a:hover, [class*="nav"] a:hover {
background-color: rgba(255, 159, 47, 0.4) !important;
text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6) !important;
}
/* --- Custom Frosted Glass Control Panel UI --- */
#bg-uploader-panel {
position: fixed !important;
bottom: 20px !important;
left: 20px !important;
z-index: 9999999 !important;
font-family: 'Trebuchet MS', sans-serif !important;
font-size: 13px !important;
display: flex;
align-items: flex-end;
}
#bg-uploader-gear {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.4);
font-size: 22px;
transition: transform 0.3s ease, background 0.3s ease;
}
#bg-uploader-panel:hover #bg-uploader-gear {
transform: rotate(90deg) scale(1.1);
background: rgba(255, 159, 47, 0.4);
}
#bg-uploader-menu {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(35px) saturate(120%) !important;
-webkit-backdrop-filter: blur(35px) saturate(120%) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 32px !important;
margin-left: 15px;
box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.2) !important;
display: none;
flex-direction: column;
width: 250px;
max-height: 80vh;
overflow: hidden;
text-align: center;
transition: all 0.3s ease;
}
#bg-uploader-panel:hover #bg-uploader-menu {
display: flex;
}
/* --- Header bar for tabs --- */
.pt-menu-header {
background: rgba(0, 0, 0, 0.45);
padding: 12px 14px;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 11px;
font-weight: bold;
}
.pt-menu-header a {
color: rgba(255, 255, 255, 0.75) !important;
transition: text-shadow 0.2s, color 0.2s;
}
.pt-menu-header a:hover {
color: #ffffff !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}
/* --- Inner Panel Styling --- */
.pt-menu-body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
max-height: calc(80vh - 42px);
}
.pt-menu-body::-webkit-scrollbar {
width: 4px;
}
.pt-menu-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.pt-glow-emoji {
font-size: 32px;
margin: 4px 0 0 0;
filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}
.pt-glow-title {
font-size: 21px !important;
font-weight: bold !important;
color: #ffffff !important;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 25px rgba(255, 159, 47, 0.3) !important;
margin-bottom: 2px;
}
.pt-glow-subtitle {
font-size: 11px;
color: rgba(255, 255, 255, 0.6) !important;
margin-bottom: 12px;
display: block;
}
.bg-btn {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.08);
color: white !important;
padding: 8px;
border-radius: 12px;
cursor: pointer;
font-size: 11px;
text-align: center;
transition: background 0.2s, border 0.2s;
}
.bg-btn:hover {
background: rgba(255, 159, 47, 0.4);
border-color: rgba(255, 159, 47, 0.3);
}
.discord-btn {
background: rgba(88, 101, 242, 0.25) !important;
border: 1px dashed rgba(88, 101, 242, 0.5) !important;
text-decoration: none !important;
display: block;
}
.discord-btn:hover {
background: rgba(88, 101, 242, 0.55) !important;
}
.script-link-btn {
background: rgba(255, 159, 47, 0.1) !important;
border: 1px solid rgba(255, 159, 47, 0.3) !important;
text-decoration: none !important;
display: block;
}
.script-link-btn:hover {
background: rgba(255, 159, 47, 0.35) !important;
}
.update-btn {
background: rgba(16, 185, 129, 0.15) !important;
border: 1px solid rgba(16, 185, 129, 0.4) !important;
text-decoration: none !important;
display: block;
}
.update-btn:hover {
background: rgba(16, 185, 129, 0.45) !important;
}
/* --- Toggle Switch Styling --- */
.switch-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.switch-label-block {
display: flex;
flex-direction: column;
text-align: left;
}
.switch-label-text {
font-weight: bold;
color: #ffffff !important;
}
.credits-tag {
font-size: 9px;
color: rgba(255, 255, 255, 0.45) !important;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 34px;
height: 20px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(255, 255, 255, 0.15);
transition: .3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #ff9f2f;
}
input:checked + .slider:before {
transform: translateX(14px);
}
`;
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(glassThemeCSS);
} else {
const style = document.createElement('style');
style.textContent = glassThemeCSS;
document.head.appendChild(style);
}
// --- 2. Auto-Reloader Script Engine ---
const DELAY_MS = 0;
let scheduled = false;
let autoReloadEnabled = localStorage.getItem('pt_auto_reload') !== 'false';
function pressEnter() {
if (!autoReloadEnabled) return;
const event = new KeyboardEvent('keydown', {
key: 'Enter',
code: 'Enter',
keyCode: 13,
which: 13,
bubbles: true,
cancelable: true,
});
document.dispatchEvent(event);
scheduled = false;
}
function isRaceEndVisible() {
const selectors = [
'.race-results', '.results-container', '.race-end',
'[class*="result"]', '[class*="leaderboard"]',
'[class*="finished"]', '[class*="podium"]',
'[class*="complete"]', '[class*="summary"]',
];
return selectors.some(sel => {
const el = document.querySelector(sel);
return el && el.offsetParent !== null;
});
}
// --- 3. FORCE-APPLY CSS OVERRIDE FOR THE TRACK ---
function applyCustomTrack() {
const customTrack = localStorage.getItem('pt_custom_track');
if (!customTrack) return;
let trackStyle = document.getElementById('pt-custom-track-style');
if (!trackStyle) {
trackStyle = document.createElement('style');
trackStyle.id = 'pt-custom-track-style';
document.head.appendChild(trackStyle);
}
trackStyle.textContent = `
.track, .racetrack, .race-track,
[class*="track-container"], [class*="track_"], [class*="race-container"] > div {
background-image: url("${customTrack}") !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
`;
}
const observer = new MutationObserver(() => {
if (autoReloadEnabled && !scheduled && isRaceEndVisible()) {
scheduled = true;
console.log('[PandaType] Race ended — pressing Enter in', DELAY_MS / 1000, 's');
setTimeout(pressEnter, DELAY_MS);
}
applyCustomTrack();
});
// --- 4. Background State, Matrix Logic, Themes & Panel UI Injection ---
let lightModeEnabled = localStorage.getItem('pt_light_mode') === 'true';
let matrixModeEnabled = localStorage.getItem('pt_matrix_mode') === 'true';
let matrixClicksEnabled = localStorage.getItem('pt_matrix_clicks') === 'true';
let afterburnModeEnabled = localStorage.getItem('pt_afterburn_mode') === 'true';
let blueArcadeModeEnabled = localStorage.getItem('pt_blue_arcade_mode') === 'true';
let matrixCanvas, matrixCtx, matrixInterval;
let audioCtx = null;
// --- STRICTLY SCOPED AFTERBURN '99 STYLE SHEET ---
const afterburnCSS = `
body.pt-afterburn-mode {
--bg: #16051f !important;
--panel: rgba(35, 9, 50, .91) !important;
--panel-2: rgba(52, 13, 67, .94) !important;
--line: rgba(255, 112, 183, .42) !important;
--track: #260b3d !important;
--text: #fff7f3 !important;
--muted: #d3a8ca !important;
--amber: #ffb14a !important;
--amber-dark: #e65743 !important;
--red: #ff4f7e !important;
--blue: #43efd0 !important;
--green: #56efae !important;
--danger: #ff4f72 !important;
--afterburn-coral: #ff5f6d;
--afterburn-gold: #ffc857;
--afterburn-teal: #43efd0;
--afterburn-purple: #9b5cff;
}
html:has(body.pt-afterburn-mode) {
min-height: 100% !important;
background: #120419 !important;
}
body.pt-afterburn-mode {
position: relative !important;
isolation: isolate;
overflow-x: hidden;
background-color: #16051f !important;
background-image:
radial-gradient(circle at 15% 16%, rgba(255, 198, 82, .28) 0 2px, transparent 3px),
radial-gradient(circle at 84% 13%, rgba(67, 239, 208, .25) 0 2px, transparent 3px),
linear-gradient(135deg, transparent 0 48%, rgba(255, 113, 179, .10) 49%, transparent 50%),
linear-gradient(180deg, transparent 0 56%, rgba(67, 18, 80, .28) 72%, rgba(17, 3, 29, .78) 100%),
linear-gradient(180deg, #53217b 0%, #b33979 25%, #ff735d 48%, #42135b 72%, #16051f 100%) !important;
background-size: 96px 96px, 124px 124px, 58px 58px, cover, cover !important;
background-attachment: fixed !important;
color: var(--text) !important;
font-family: "Segoe UI", Inter, system-ui, sans-serif !important;
}
body.pt-afterburn-mode::before {
content: "";
position: fixed;
z-index: -1;
left: 50%;
top: 9vh;
width: clamp(220px, 31vw, 470px);
aspect-ratio: 1;
border-radius: 50%;
transform: translateX(-50%);
background: repeating-linear-gradient(
180deg,
#ffd166 0 18px,
#ff765e 19px 27px,
transparent 28px 36px
);
opacity: .38;
pointer-events: none;
filter: drop-shadow(0 0 42px rgba(255, 119, 91, .45));
}
body.pt-afterburn-mode::after {
content: "";
position: fixed;
z-index: -2;
left: 0;
right: 0;
bottom: 0;
height: 36vh;
opacity: .58;
pointer-events: none;
background:
linear-gradient(
90deg,
transparent 48%,
rgba(255, 198, 87, .42) 49% 51%,
transparent 52%
) center / 170px 100%,
repeating-linear-gradient(
90deg,
rgba(67, 239, 208, .18) 0 1px,
transparent 1px 84px
),
repeating-linear-gradient(
0deg,
rgba(255, 95, 109, .16) 0 1px,
transparent 1px 42px
);
transform: perspective(330px) rotateX(58deg) scale(1.45);
transform-origin: bottom;
mask-image: linear-gradient(to top, #000 15%, transparent 88%);
}
body.pt-afterburn-mode #app {
max-width: 1240px !important;
}
body.pt-afterburn-mode .brand {
min-height: 58px;
padding: 6px 14px;
border-bottom: 1px solid rgba(255, 128, 185, .28);
}
body.pt-afterburn-mode .brand::after {
content: "AFTERBURN '99";
color: var(--afterburn-gold);
font: italic 900 12px/1 "Arial Black", Impact, sans-serif;
letter-spacing: .16em;
padding: 7px 12px;
border: 1px solid rgba(255, 184, 82, .58);
border-radius: 999px;
background: rgba(52, 10, 65, .82);
box-shadow: 0 0 18px rgba(255, 101, 127, .24);
}
body.pt-afterburn-mode .site-logo {
filter: drop-shadow(0 0 12px rgba(255, 187, 81, .42));
}
body.pt-afterburn-mode .navbar,
body.pt-afterburn-mode .panel,
body.pt-afterburn-mode .garage-panel,
body.pt-afterburn-mode .passage-box,
body.pt-afterburn-mode .modal-box,
body.pt-afterburn-mode .shop-card,
body.pt-afterburn-mode .ach-card,
body.pt-afterburn-mode .stat-card,
body.pt-afterburn-mode .userpill,
body.pt-afterburn-mode .lb-table,
body.pt-afterburn-mode .premium-panel,
body.pt-afterburn-mode .season-scroll {
background: linear-gradient(
145deg,
rgba(59, 14, 74, .94),
rgba(25, 5, 42, .95)
) !important;
border: 1px solid rgba(255, 112, 181, .38) !important;
box-shadow:
0 18px 45px rgba(0, 0, 0, .30),
inset 0 1px 0 rgba(255, 235, 240, .08) !important;
backdrop-filter: blur(12px);
}
body.pt-afterburn-mode .panel,
body.pt-afterburn-mode .garage-panel,
body.pt-afterburn-mode .modal-box,
body.pt-afterburn-mode .premium-panel {
border-radius: 16px !important;
}
body.pt-afterburn-mode .navbar {
border-radius: 14px !important;
overflow: visible !important;
}
body.pt-afterburn-mode .navbar-race,
body.pt-afterburn-mode .btn-primary,
body.pt-afterburn-mode .equip-btn:not(.equipped) {
color: white !important;
background: linear-gradient(135deg, #ff4f72, #9b5cff) !important;
box-shadow:
0 5px 0 #a72c62,
0 0 22px rgba(255, 79, 114, .28) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
body.pt-afterburn-mode .navbar-race:hover,
body.pt-afterburn-mode .btn-primary:hover,
body.pt-afterburn-mode .equip-btn:not(.equipped):hover {
background: linear-gradient(135deg, #ff7a65, #b86bff) !important;
transform: translateY(-2px);
}
body.pt-afterburn-mode .navbar-tab.active,
body.pt-afterburn-mode .tab.active,
body.pt-afterburn-mode .lb-tab.active {
color: #fff !important;
border-color: var(--afterburn-teal) !important;
background: linear-gradient(
180deg,
rgba(67, 239, 208, .15),
rgba(255, 95, 109, .05)
) !important;
text-shadow: 0 0 12px rgba(67, 239, 208, .45);
}
body.pt-afterburn-mode .navbar-tab:hover,
body.pt-afterburn-mode .small-btn:hover,
body.pt-afterburn-mode .btn-ghost:hover,
body.pt-afterburn-mode .nav-dropdown-item:hover,
body.pt-afterburn-mode .lb-tab:hover {
color: #fff !important;
background: rgba(255, 96, 129, .13) !important;
border-color: rgba(67, 239, 208, .52) !important;
}
body.pt-afterburn-mode .tabs,
body.pt-afterburn-mode .nav-dropdown-menu {
background: rgba(29, 5, 45, .97) !important;
border-color: rgba(255, 111, 179, .36) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .38) !important;
}
body.pt-afterburn-mode input,
body.pt-afterburn-mode select,
body.pt-afterburn-mode textarea {
color: #fff7f3 !important;
background: rgba(23, 5, 38, .88) !important;
border: 1px solid rgba(255, 120, 179, .34) !important;
outline: none !important;
}
body.pt-afterburn-mode input:focus,
body.pt-afterburn-mode select:focus,
body.pt-afterburn-mode textarea:focus {
border-color: var(--afterburn-teal) !important;
box-shadow:
0 0 0 3px rgba(67, 239, 208, .14),
0 0 22px rgba(255, 95, 109, .12) !important;
}
body.pt-afterburn-mode ::placeholder {
color: #a47b9f !important;
}
body.pt-afterburn-mode ::selection {
color: #2b0638;
background: #43efd0;
}
body.pt-afterburn-mode .garage-floor,
body.pt-afterburn-mode .race-stage {
position: relative;
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(122, 43, 114, .58),
rgba(24, 5, 38, .94) 62%
),
repeating-linear-gradient(
90deg,
rgba(67, 239, 208, .14) 0 1px,
transparent 1px 80px
) !important;
border: 1px solid rgba(255, 113, 179, .35) !important;
box-shadow:
inset 0 -45px 85px rgba(0, 0, 0, .34),
0 20px 45px rgba(0, 0, 0, .24) !important;
}
body.pt-afterburn-mode .garage-floor::before,
body.pt-afterburn-mode .race-stage::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 48%;
pointer-events: none;
opacity: .6;
background:
repeating-linear-gradient(
90deg,
rgba(67, 239, 208, .17) 0 1px,
transparent 1px 72px
),
repeating-linear-gradient(
0deg,
rgba(255, 95, 109, .16) 0 1px,
transparent 1px 36px
);
transform: perspective(280px) rotateX(60deg) scale(1.35);
transform-origin: bottom;
}
body.pt-afterburn-mode .track {
background:
repeating-linear-gradient(
90deg,
transparent 0 96px,
rgba(67, 239, 208, .10) 97px 98px
),
linear-gradient(180deg, #37104e, #180526) !important;
border-color: rgba(255, 119, 179, .26) !important;
}
body.pt-afterburn-mode .track::after {
filter: hue-rotate(300deg) saturate(1.45) brightness(1.15);
}
body.pt-afterburn-mode .lane.current,
body.pt-afterburn-mode .lb-row.lb-you,
body.pt-afterburn-mode .guild-member-row:hover {
background: linear-gradient(
90deg,
rgba(255, 79, 126, .20),
rgba(67, 239, 208, .06)
) !important;
box-shadow: inset 3px 0 0 var(--afterburn-teal);
}
body.pt-afterburn-mode .car,
body.pt-afterburn-mode .admin-car-thumb,
body.pt-afterburn-mode .guild-member-thumb,
body.pt-afterburn-mode .shop-card-img,
body.pt-afterburn-mode .ach-card-reward-img,
body.pt-afterburn-mode .season-cell-img {
filter:
drop-shadow(0 9px 9px rgba(0, 0, 0, .45))
drop-shadow(0 0 7px rgba(255, 102, 126, .21));
}
body.pt-afterburn-mode .passage-inner {
font-family: "Roboto Mono", Consolas, monospace !important;
font-size: clamp(20px, 2.1vw, 29px) !important;
line-height: 1.75 !important;
letter-spacing: .018em;
}
body.pt-afterburn-mode .passage-inner .correct,
body.pt-afterburn-mode .correct {
color: #54efbd !important;
text-shadow: 0 0 9px rgba(67, 239, 208, .25);
}
body.pt-afterburn-mode .passage-inner .current,
body.pt-afterburn-mode .current {
color: #fff !important;
background: linear-gradient(
180deg,
transparent 62%,
rgba(255, 194, 79, .55) 62%
) !important;
text-shadow: 0 0 12px rgba(255, 194, 79, .62);
}
body.pt-afterburn-mode .passage-inner .wrong,
body.pt-afterburn-mode .wrong,
body.pt-afterburn-mode .wrong-held {
color: #ff648f !important;
background: rgba(255, 56, 109, .13) !important;
text-shadow: 0 0 8px rgba(255, 65, 117, .35);
}
body.pt-afterburn-mode .countdown-overlay {
background: radial-gradient(
circle,
rgba(127, 45, 119, .80),
rgba(20, 3, 34, .95) 68%
) !important;
backdrop-filter: blur(7px);
}
body.pt-afterburn-mode .countdown-num,
body.pt-afterburn-mode .results-place,
body.pt-afterburn-mode .gauge-num,
body.pt-afterburn-mode .coins-earned {
color: #fff7f3 !important;
text-shadow:
0 0 10px #ff5f6d,
0 0 28px rgba(155, 92, 255, .72) !important;
}
body.pt-afterburn-mode .stat-card,
body.pt-afterburn-mode .shop-card,
body.pt-afterburn-mode .ach-card {
transition:
transform .16s ease,
border-color .16s ease,
box-shadow .16s ease !important;
}
body.pt-afterburn-mode .stat-card:hover,
body.pt-afterburn-mode .shop-card:hover,
body.pt-afterburn-mode .ach-card:hover {
transform: translateY(-4px);
border-color: rgba(67, 239, 208, .70) !important;
box-shadow:
0 20px 40px rgba(0, 0, 0, .33),
0 0 22px rgba(255, 95, 109, .15) !important;
}
body.pt-afterburn-mode .shop-card.owned,
body.pt-afterburn-mode .ach-card-complete,
body.pt-afterburn-mode .garage-slot.equipped {
border-color: rgba(50, 239, 177, .55) !important;
box-shadow: inset 0 0 28px rgba(34, 216, 157, .06) !important;
}
body.pt-afterburn-mode .coin-pill,
body.pt-afterburn-mode .premium-badge,
body.pt-afterburn-mode .qty-badge,
body.pt-afterburn-mode .nav-badge,
body.pt-afterburn-mode .guild-role-badge,
body.pt-afterburn-mode .lb-badge {
border: 1px solid rgba(67, 239, 208, .32);
box-shadow: 0 0 14px rgba(49, 159, 255, .14);
}
body.pt-afterburn-mode .modal-overlay {
background: rgba(17, 2, 28, .80) !important;
backdrop-filter: blur(9px);
}
body.pt-afterburn-mode .error-text {
color: #ff4f72 !important;
}
`;
// --- STRICTLY SCOPED BLUE ARCADE STYLE SHEET ---
const blueArcadeCSS = `
body.pt-blue-arcade-mode {
--bg: #020819 !important;
--panel: rgba(5, 16, 44, .91) !important;
--panel-2: rgba(8, 26, 66, .94) !important;
--line: rgba(66, 172, 255, .42) !important;
--track: #07142f !important;
--text: #f4f9ff !important;
--muted: #9db7d8 !important;
--amber: #35bfff !important;
--amber-dark: #0874d1 !important;
--red: #3979ff !important;
--blue: #4fdcff !important;
--green: #38f2ae !important;
--danger: #ff477e !important;
--mighty-blue: #168cff;
--mighty-cyan: #55e7ff;
--mighty-purple: #7657ff;
--glass: rgba(4, 15, 42, .88);
}
html:has(body.pt-blue-arcade-mode) {
min-height: 100% !important;
background: #020716 !important;
}
body.pt-blue-arcade-mode {
position: relative !important;
isolation: isolate;
overflow-x: hidden;
background-color: #020819 !important;
background-image:
radial-gradient(circle at 14% 18%, rgba(0, 163, 255, .32) 0 2px, transparent 3px),
radial-gradient(circle at 84% 12%, rgba(123, 73, 255, .28) 0 2px, transparent 3px),
linear-gradient(135deg, transparent 0 47%, rgba(62, 174, 255, .11) 48% 49%, transparent 50% 100%),
linear-gradient(45deg, rgba(4, 12, 37, .42) 25%, transparent 25% 75%, rgba(4, 12, 37, .42) 75%),
radial-gradient(ellipse at 50% -8%, #154993 0%, #071b45 36%, #020819 76%) !important;
background-size: 86px 86px, 118px 118px, 52px 52px, 64px 64px, cover !important;
background-attachment: fixed !important;
color: var(--text) !important;
font-family: "Segoe UI", Inter, system-ui, sans-serif !important;
}
body.pt-blue-arcade-mode::before {
content: "MIGHTY";
position: fixed;
z-index: -1;
right: -1.5vw;
bottom: -4vh;
color: rgba(81, 204, 255, .07);
font: italic 900 clamp(92px, 21vw, 310px)/.8 Impact, "Arial Black", sans-serif;
letter-spacing: -.055em;
transform: skew(-7deg);
pointer-events: none;
text-shadow: 0 0 45px rgba(32, 140, 255, .18);
}
body.pt-blue-arcade-mode::after {
content: "";
position: fixed;
z-index: -2;
left: 0;
right: 0;
bottom: 0;
height: 36vh;
opacity: .55;
pointer-events: none;
background:
linear-gradient(90deg, transparent 48%, rgba(95, 225, 255, .42) 49% 51%, transparent 52%) center/170px 100%,
repeating-linear-gradient(90deg, rgba(41, 151, 255, .14) 0 1px, transparent 1px 84px),
repeating-linear-gradient(0deg, rgba(41, 151, 255, .14) 0 1px, transparent 1px 42px);
transform: perspective(330px) rotateX(58deg) scale(1.45);
transform-origin: bottom;
mask-image: linear-gradient(to top, #000 15%, transparent 88%);
}
body.pt-blue-arcade-mode #app { max-width: 1240px !important; }
body.pt-blue-arcade-mode .brand {
min-height: 58px;
padding: 6px 14px;
border-bottom: 1px solid rgba(76, 210, 255, .25);
}
body.pt-blue-arcade-mode .brand::after {
content: "MIGHTY EDITION";
color: var(--mighty-cyan);
font: italic 900 12px/1 "Arial Black", Impact, sans-serif;
letter-spacing: .16em;
padding: 7px 12px;
border: 1px solid rgba(79, 220, 255, .55);
border-radius: 999px;
background: rgba(4, 22, 59, .78);
box-shadow: 0 0 18px rgba(32, 177, 255, .22);
}
body.pt-blue-arcade-mode .site-logo {
filter: drop-shadow(0 0 12px rgba(65, 204, 255, .46));
}
body.pt-blue-arcade-mode .navbar, body.pt-blue-arcade-mode .panel, body.pt-blue-arcade-mode .garage-panel, body.pt-blue-arcade-mode .passage-box, body.pt-blue-arcade-mode .modal-box,
body.pt-blue-arcade-mode .shop-card, body.pt-blue-arcade-mode .ach-card, body.pt-blue-arcade-mode .stat-card, body.pt-blue-arcade-mode .userpill, body.pt-blue-arcade-mode .lb-table,
body.pt-blue-arcade-mode .premium-panel, body.pt-blue-arcade-mode .season-scroll {
background: linear-gradient(145deg, rgba(9, 28, 70, .94), rgba(3, 12, 35, .94)) !important;
border: 1px solid rgba(68, 182, 255, .38) !important;
box-shadow: 0 18px 45px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(190, 235, 255, .08) !important;
backdrop-filter: blur(12px);
}
body.pt-blue-arcade-mode .panel, body.pt-blue-arcade-mode .garage-panel, body.pt-blue-arcade-mode .modal-box, body.pt-blue-arcade-mode .premium-panel {
border-radius: 16px !important;
}
body.pt-blue-arcade-mode .navbar {
border-radius: 14px !important;
overflow: visible !important;
}
body.pt-blue-arcade-mode .navbar-race, body.pt-blue-arcade-mode .btn-primary, body.pt-blue-arcade-mode .equip-btn:not(.equipped) {
color: white !important;
background: linear-gradient(135deg, #0d7dff, #5b52ff) !important;
box-shadow: 0 5px 0 #064fba, 0 0 22px rgba(34, 144, 255, .28) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
body.pt-blue-arcade-mode .navbar-race:hover, body.pt-blue-arcade-mode .btn-primary:hover, body.pt-blue-arcade-mode .equip-btn:not(.equipped):hover {
background: linear-gradient(135deg, #2aaeff, #6f65ff) !important;
transform: translateY(-2px);
}
body.pt-blue-arcade-mode .navbar-tab.active, body.pt-blue-arcade-mode .tab.active, body.pt-blue-arcade-mode .lb-tab.active {
color: #fff !important;
border-color: var(--mighty-cyan) !important;
background: linear-gradient(180deg, rgba(51, 173, 255, .16), rgba(51, 173, 255, .03)) !important;
text-shadow: 0 0 12px rgba(83, 220, 255, .5);
}
body.pt-blue-arcade-mode .navbar-tab:hover, body.pt-blue-arcade-mode .small-btn:hover, body.pt-blue-arcade-mode .btn-ghost:hover,
body.pt-blue-arcade-mode .nav-dropdown-item:hover, body.pt-blue-arcade-mode .lb-tab:hover {
color: #fff !important;
background: rgba(47, 156, 255, .13) !important;
border-color: rgba(83, 220, 255, .55) !important;
}
body.pt-blue-arcade-mode .tabs, body.pt-blue-arcade-mode .nav-dropdown-menu {
background: rgba(3, 14, 40, .97) !important;
border-color: rgba(67, 186, 255, .35) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, .38) !important;
}
body.pt-blue-arcade-mode input, body.pt-blue-arcade-mode select, body.pt-blue-arcade-mode textarea {
color: #f3f9ff !important;
background: rgba(2, 10, 31, .86) !important;
border: 1px solid rgba(93, 186, 255, .34) !important;
outline: none !important;
}
body.pt-blue-arcade-mode input:focus, body.pt-blue-arcade-mode select:focus, body.pt-blue-arcade-mode textarea:focus {
border-color: var(--mighty-cyan) !important;
box-shadow: 0 0 0 3px rgba(57, 178, 255, .15), 0 0 22px rgba(57, 178, 255, .12) !important;
}
body.pt-blue-arcade-mode ::placeholder { color: #6f88aa !important; }
body.pt-blue-arcade-mode ::selection { color: #001025; background: #61e7ff; }
body.pt-blue-arcade-mode .garage-floor, body.pt-blue-arcade-mode .race-stage {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(13, 49, 100, .60), rgba(2, 10, 27, .93) 62%),
repeating-linear-gradient(90deg, rgba(52, 166, 255, .15) 0 1px, transparent 1px 80px) !important;
border: 1px solid rgba(71, 184, 255, .35) !important;
box-shadow: inset 0 -45px 85px rgba(0, 0, 0, .34), 0 20px 45px rgba(0, 0, 0, .24) !important;
}
body.pt-blue-arcade-mode .garage-floor::before, body.pt-blue-arcade-mode .race-stage::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 48%;
pointer-events: none;
opacity: .6;
background:
repeating-linear-gradient(90deg, rgba(73, 186, 255, .17) 0 1px, transparent 1px 72px),
repeating-linear-gradient(0deg, rgba(73, 186, 255, .13) 0 1px, transparent 1px 36px);
transform: perspective(280px) rotateX(60deg) scale(1.35);
transform-origin: bottom;
}
body.pt-blue-arcade-mode .track {
background:
repeating-linear-gradient(90deg, transparent 0 96px, rgba(54, 196, 255, .09) 97px 98px),
linear-gradient(180deg, #0a1b3c, #040d22) !important;
border-color: rgba(84, 189, 255, .24) !important;
}
body.pt-blue-arcade-mode .track::after {
filter: hue-rotate(160deg) saturate(1.4) brightness(1.15);
}
body.pt-blue-arcade-mode .lane.current, body.pt-blue-arcade-mode .lb-row.lb-you, body.pt-blue-arcade-mode .guild-member-row:hover {
background: linear-gradient(90deg, rgba(31, 141, 255, .22), rgba(85, 225, 255, .05)) !important;
box-shadow: inset 3px 0 0 var(--mighty-cyan);
}
body.pt-blue-arcade-mode .car, body.pt-blue-arcade-mode .admin-car-thumb, body.pt-blue-arcade-mode .guild-member-thumb, body.pt-blue-arcade-mode .shop-card-img,
body.pt-blue-arcade-mode .ach-card-reward-img, body.pt-blue-arcade-mode .season-cell-img {
filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .45)) drop-shadow(0 0 7px rgba(55, 168, 255, .18));
}
body.pt-blue-arcade-mode .passage-inner {
font-family: "Roboto Mono", Consolas, monospace !important;
font-size: clamp(20px, 2.1vw, 29px) !important;
line-height: 1.75 !important;
letter-spacing: .018em;
}
body.pt-blue-arcade-mode .passage-inner .correct, body.pt-blue-arcade-mode .correct {
color: #61e8bc !important;
text-shadow: 0 0 9px rgba(46, 240, 174, .26);
}
body.pt-blue-arcade-mode .passage-inner .current, body.pt-blue-arcade-mode .current {
color: #fff !important;
background: linear-gradient(180deg, transparent 62%, rgba(69, 211, 255, .50) 62%) !important;
text-shadow: 0 0 12px rgba(77, 218, 255, .65);
}
body.pt-blue-arcade-mode .passage-inner .wrong, body.pt-blue-arcade-mode .wrong, body.pt-blue-arcade-mode .wrong-held {
color: #ff648f !important;
background: rgba(255, 56, 109, .13) !important;
text-shadow: 0 0 8px rgba(255, 65, 117, .35);
}
body.pt-blue-arcade-mode .countdown-overlay {
background: radial-gradient(circle, rgba(19, 84, 165, .78), rgba(1, 7, 22, .94) 68%) !important;
backdrop-filter: blur(7px);
}
body.pt-blue-arcade-mode .countdown-num, body.pt-blue-arcade-mode .results-place, body.pt-blue-arcade-mode .gauge-num, body.pt-blue-arcade-mode .coins-earned {
color: #eafaff !important;
text-shadow: 0 0 10px #169bff, 0 0 28px rgba(38, 130, 255, .75) !important;
}
body.pt-blue-arcade-mode .stat-card, body.pt-blue-arcade-mode .shop-card, body.pt-blue-arcade-mode .ach-card {
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
body.pt-blue-arcade-mode .stat-card:hover, body.pt-blue-arcade-mode .shop-card:hover, body.pt-blue-arcade-mode .ach-card:hover {
transform: translateY(-4px);
border-color: rgba(86, 221, 255, .72) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, .33), 0 0 22px rgba(42, 163, 255, .13) !important;
}
body.pt-blue-arcade-mode .shop-card.owned, body.pt-blue-arcade-mode .ach-card-complete, body.pt-blue-arcade-mode .garage-slot.equipped {
border-color: rgba(50, 239, 177, .55) !important;
box-shadow: inset 0 0 28px rgba(34, 216, 157, .06) !important;
}
body.pt-blue-arcade-mode .coin-pill, body.pt-blue-arcade-mode .premium-badge, body.pt-blue-arcade-mode .qty-badge, body.pt-blue-arcade-mode .nav-badge,
body.pt-blue-arcade-mode .guild-role-badge, body.pt-blue-arcade-mode .lb-badge {
border: 1px solid rgba(99, 215, 255, .32);
box-shadow: 0 0 14px rgba(49, 159, 255, .13);
}
body.pt-blue-arcade-mode .modal-overlay {
background: rgba(0, 5, 18, .78) !important;
backdrop-filter: blur(9px);
}
body.pt-blue-arcade-mode .error-text, body.pt-blue-arcade-mode .danger { color: #ff658f !important; }
body.pt-blue-arcade-mode .td-muted, body.pt-blue-arcade-mode .hint-text, body.pt-blue-arcade-mode .results-sub, body.pt-blue-arcade-mode .ach-card-desc { color: var(--muted) !important; }
body.pt-blue-arcade-mode::-webkit-scrollbar { width: 11px; height: 11px; }
body.pt-blue-arcade-mode::-webkit-scrollbar-track { background: #02091d; }
body.pt-blue-arcade-mode::-webkit-scrollbar-thumb {
background: linear-gradient(#167fff, #4d56e7);
border: 3px solid #02091d;
border-radius: 999px;
}
@media (max-width: 700px) {
body.pt-blue-arcade-mode #app { padding: 14px 10px 40px !important; }
body.pt-blue-arcade-mode .brand::after { font-size: 9px; letter-spacing: .10em; }
body.pt-blue-arcade-mode .navbar-race { padding: 12px 15px !important; }
body.pt-blue-arcade-mode .navbar-tab { padding: 12px 13px !important; }
body.pt-blue-arcade-mode .panel { padding: 17px !important; }
body.pt-blue-arcade-mode ::before { opacity: .75; }
}
`;
// Inject Stylesheets
const abStyle = document.createElement('style');
abStyle.id = 'pt-afterburn-stylesheet';
abStyle.textContent = afterburnCSS;
document.head.appendChild(abStyle);
const baStyle = document.createElement('style');
baStyle.id = 'pt-bluearcade-stylesheet';
baStyle.textContent = blueArcadeCSS;
document.head.appendChild(baStyle);
function playClackSound() {
try {
if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
if (audioCtx.state === 'suspended') audioCtx.resume();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(380 + Math.random() * 140, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(45, audioCtx.currentTime + 0.035);
gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.035);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + 0.035);
} catch(e) { console.log('Audio Context Error', e); }
}
function startMatrixRain() {
if (!matrixCanvas) {
matrixCanvas = document.createElement('canvas');
matrixCanvas.id = 'pt-matrix-canvas';
document.body.appendChild(matrixCanvas);
matrixCtx = matrixCanvas.getContext('2d');
}
const resize = () => {
matrixCanvas.width = window.innerWidth;
matrixCanvas.height = window.innerHeight;
};
window.addEventListener('resize', resize);
resize();
const chars = "010101ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const fontArr = chars.split("");
const fontSize = 14;
const columns = matrixCanvas.width / fontSize;
const drops = Array(Math.floor(columns)).fill(1);
function drawRain() {
matrixCtx.fillStyle = "rgba(0, 0, 0, 0.06)";
matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
matrixCtx.fillStyle = "#00ff00";
matrixCtx.font = fontSize + "px monospace";
for (let i = 0; i < drops.length; i++) {
const text = fontArr[Math.floor(Math.random() * fontArr.length)];
matrixCtx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > matrixCanvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
clearInterval(matrixInterval);
matrixInterval = setInterval(drawRain, 33);
}
function stopMatrixRain() {
clearInterval(matrixInterval);
if (matrixCanvas && matrixCanvas.parentNode) {
matrixCanvas.parentNode.removeChild(matrixCanvas);
matrixCanvas = null;
}
}
function applyModes() {
if (blueArcadeModeEnabled) {
document.body.classList.add('pt-blue-arcade-mode');
document.body.classList.remove('pt-afterburn-mode');
document.body.classList.remove('pt-matrix-mode');
document.body.classList.remove('pt-light-mode');
stopMatrixRain();
} else if (afterburnModeEnabled) {
document.body.classList.add('pt-afterburn-mode');
document.body.classList.remove('pt-blue-arcade-mode');
document.body.classList.remove('pt-matrix-mode');
document.body.classList.remove('pt-light-mode');
stopMatrixRain();
} else if (matrixModeEnabled) {
document.body.classList.add('pt-matrix-mode');
document.body.classList.remove('pt-light-mode');
document.body.classList.remove('pt-afterburn-mode');
document.body.classList.remove('pt-blue-arcade-mode');
startMatrixRain();
} else {
document.body.classList.remove('pt-matrix-mode');
document.body.classList.remove('pt-afterburn-mode');
document.body.classList.remove('pt-blue-arcade-mode');
stopMatrixRain();
if (lightModeEnabled) {
document.body.classList.add('pt-light-mode');
} else {
document.body.classList.remove('pt-light-mode');
const savedBg = localStorage.getItem('pt_custom_bg');
if (savedBg) document.body.style.backgroundImage = `url("${savedBg}")`;
}
}
}
function initThemeEngine() {
applyModes();
if (!lightModeEnabled && !matrixModeEnabled && !afterburnModeEnabled && !blueArcadeModeEnabled) {
const savedBg = localStorage.getItem('pt_custom_bg');
if (savedBg) {
document.body.style.backgroundImage = `url("${savedBg}")`;
}
}
observer.observe(document.body, { childList: true, subtree: true });
window.addEventListener('keydown', (e) => {
if (matrixClicksEnabled && e.key !== "Control" && e.key !== "Shift" && e.key !== "Alt") {
playClackSound();
}
}, true);
if (document.getElementById('bg-uploader-panel')) return;
const panel = document.createElement('div');
panel.id = 'bg-uploader-panel';
const gear = document.createElement('div');
gear.id = 'bg-uploader-gear';
gear.innerHTML = '⚙️';
const menu = document.createElement('div');
menu.id = 'bg-uploader-menu';
// --- Top Menu Headers ---
const menuHeader = document.createElement('div');
menuHeader.className = 'pt-menu-header';
const homeLink = document.createElement('a');
homeLink.href = 'https://pandatype.org';
homeLink.textContent = 'Home';
const discordHeaderLink = document.createElement('a');
discordHeaderLink.href = 'https://discord.gg/SZe2NeJzFU';
discordHeaderLink.target = '_blank';
discordHeaderLink.textContent = 'Discord';
const updatesHeaderLink = document.createElement('a');
updatesHeaderLink.href = 'https://greasyfork.org/en/scripts/586942-pandatree';
updatesHeaderLink.target = '_blank';
updatesHeaderLink.textContent = 'Updates';
menuHeader.appendChild(homeLink);
menuHeader.appendChild(discordHeaderLink);
menuHeader.appendChild(updatesHeaderLink);
// --- Panel Body Section ---
const menuBody = document.createElement('div');
menuBody.className = 'pt-menu-body';
const glowEmoji = document.createElement('div');
glowEmoji.className = 'pt-glow-emoji';
glowEmoji.textContent = '🐼🌲';
const glowTitle = document.createElement('div');
glowTitle.className = 'pt-glow-title';
glowTitle.textContent = 'PandaTree';
const glowSubtitle = document.createElement('span');
glowSubtitle.className = 'pt-glow-subtitle';
glowSubtitle.textContent = '@zy_122 • Created by narwhal';
// --- Custom Background Elements ---
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.png, .jpg, .jpeg';
fileInput.style.display = 'none';
const uploadBtn = document.createElement('button');
uploadBtn.className = 'bg-btn';
uploadBtn.textContent = '📁 Upload PNG/JPG (BG)';
uploadBtn.onclick = () => fileInput.click();
const gifInput = document.createElement('input');
gifInput.type = 'file';
gifInput.accept = '.gif';
gifInput.style.display = 'none';
const uploadGifBtn = document.createElement('button');
uploadGifBtn.className = 'bg-btn';
uploadGifBtn.style.border = '1px dashed rgba(255, 159, 47, 0.4)';
uploadGifBtn.textContent = '🖼️ Upload GIF (BG)';
uploadGifBtn.onclick = () => gifInput.click();
const resetBtn = document.createElement('button');
resetBtn.className = 'bg-btn';
resetBtn.style.background = 'rgba(239, 68, 68, 0.25)';
resetBtn.textContent = '❌ Remove Custom Background';
resetBtn.onclick = () => {
localStorage.removeItem('pt_custom_bg');
if (!lightModeEnabled && !matrixModeEnabled && !afterburnModeEnabled && !blueArcadeModeEnabled) document.body.style.backgroundImage = 'none';
};
const processFile = (file, key) => {
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
const base64Data = event.target.result;
try {
localStorage.setItem(key, base64Data);
if (key === 'pt_custom_bg' && !lightModeEnabled && !matrixModeEnabled && !afterburnModeEnabled && !blueArcadeModeEnabled) {
document.body.style.backgroundImage = `url("${base64Data}")`;
} else if (key === 'pt_custom_track') {
applyCustomTrack();
}
} catch (error) {
alert("This file is too large for storage. LocalStorage is capped at ~5MB. Please test with a highly optimized or small asset.");
}
};
reader.readAsDataURL(file);
};
fileInput.onchange = (e) => processFile(e.target.files[0], 'pt_custom_bg');
gifInput.onchange = (e) => processFile(e.target.files[0], 'pt_custom_bg');
// --- Track Customizer Controls ---
const trackHeading = document.createElement('span');
trackHeading.style.fontWeight = 'bold';
trackHeading.style.color = '#ff9f2f';
trackHeading.style.marginTop = '8px';
trackHeading.style.borderTop = '1px solid rgba(255, 255, 255, 0.1)';
trackHeading.style.paddingTop = '8px';
trackHeading.textContent = '🛣️ Track Customizer';
const trackFileInput = document.createElement('input');
trackFileInput.type = 'file';
trackFileInput.accept = '.png, .jpg, .jpeg';
trackFileInput.style.display = 'none';
const trackUploadBtn = document.createElement('button');
trackUploadBtn.className = 'bg-btn';
trackUploadBtn.textContent = '📁 Upload PNG/JPG (Track)';
trackUploadBtn.onclick = () => trackFileInput.click();
const trackPageGifInput = document.createElement('input');
trackPageGifInput.type = 'file';
trackPageGifInput.accept = '.gif';
trackPageGifInput.style.display = 'none';
const trackUploadGifBtn = document.createElement('button');
trackUploadGifBtn.className = 'bg-btn';
trackUploadGifBtn.style.border = '1px dashed rgba(255, 159, 47, 0.4)';
trackUploadGifBtn.textContent = '🖼️ Upload GIF (Track)';
trackUploadGifBtn.onclick = () => trackPageGifInput.click();
const trackRemoveBtn = document.createElement('button');
trackRemoveBtn.className = 'bg-btn';
trackRemoveBtn.style.background = 'rgba(239, 68, 68, 0.25)';
trackRemoveBtn.textContent = '❌ Remove Custom Track';
trackRemoveBtn.onclick = () => {
localStorage.removeItem('pt_custom_track');
window.location.reload();
};
trackFileInput.onchange = (e) => processFile(e.target.files[0], 'pt_custom_track');
trackPageGifInput.onchange = (e) => processFile(e.target.files[0], 'pt_custom_track');
// --- Switch 1: Blue Arcade Theme Switch ---
const baSwitchContainer = document.createElement('div');
baSwitchContainer.className = 'switch-container';
const baLabelBlock = document.createElement('div');
baLabelBlock.className = 'switch-label-block';
const baSwitchText = document.createElement('span');
baSwitchText.className = 'switch-label-text';
baSwitchText.textContent = "Blue Arcade";
const baCreditsText = document.createElement('span');
baCreditsText.className = 'credits-tag';
baCreditsText.textContent = 'Credits: Mighty';
baLabelBlock.appendChild(baSwitchText);
baLabelBlock.appendChild(baCreditsText);
const baToggleLabel = document.createElement('label');
baToggleLabel.className = 'toggle-switch';
const baToggleInput = document.createElement('input');
baToggleInput.id = 'pt-ba-input';
baToggleInput.type = 'checkbox';
baToggleInput.checked = blueArcadeModeEnabled;
baToggleInput.onchange = (e) => {
blueArcadeModeEnabled = e.target.checked;
localStorage.setItem('pt_blue_arcade_mode', blueArcadeModeEnabled);
if (blueArcadeModeEnabled) {
afterburnModeEnabled = false;
matrixModeEnabled = false;
lightModeEnabled = false;
localStorage.setItem('pt_afterburn_mode', false);
localStorage.setItem('pt_matrix_mode', false);
localStorage.setItem('pt_light_mode', false);
const abInput = menu.querySelector('#pt-ab-input');
const mxInput = menu.querySelector('#pt-mx-input');
const lmInput = menu.querySelector('#pt-lm-input');
if (abInput) abInput.checked = false;
if (mxInput) mxInput.checked = false;
if (lmInput) lmInput.checked = false;
}
applyModes();
};
const baSliderSpan = document.createElement('span');
baSliderSpan.className = 'slider';
baToggleLabel.appendChild(baToggleInput);
baToggleLabel.appendChild(baSliderSpan);
baSwitchContainer.appendChild(baLabelBlock);
baSwitchContainer.appendChild(baToggleLabel);
// --- Switch 2: Afterburn '99 Theme Switch ---
const abSwitchContainer = document.createElement('div');
abSwitchContainer.className = 'switch-container';
const abLabelBlock = document.createElement('div');
abLabelBlock.className = 'switch-label-block';
const abSwitchText = document.createElement('span');
abSwitchText.className = 'switch-label-text';
abSwitchText.textContent = "Afterburn '99";
const abCreditsText = document.createElement('span');
abCreditsText.className = 'credits-tag';
abCreditsText.textContent = 'Credits: Mighty';
abLabelBlock.appendChild(abSwitchText);
abLabelBlock.appendChild(abCreditsText);
const abToggleLabel = document.createElement('label');
abToggleLabel.className = 'toggle-switch';
const abToggleInput = document.createElement('input');
abToggleInput.id = 'pt-ab-input';
abToggleInput.type = 'checkbox';
abToggleInput.checked = afterburnModeEnabled;
abToggleInput.onchange = (e) => {
afterburnModeEnabled = e.target.checked;
localStorage.setItem('pt_afterburn_mode', afterburnModeEnabled);
if (afterburnModeEnabled) {
blueArcadeModeEnabled = false;
matrixModeEnabled = false;
lightModeEnabled = false;
localStorage.setItem('pt_blue_arcade_mode', false);
localStorage.setItem('pt_matrix_mode', false);
localStorage.setItem('pt_light_mode', false);
const baInput = menu.querySelector('#pt-ba-input');
const mxInput = menu.querySelector('#pt-mx-input');
const lmInput = menu.querySelector('#pt-lm-input');
if (baInput) baInput.checked = false;
if (mxInput) mxInput.checked = false;
if (lmInput) lmInput.checked = false;
}
applyModes();
};
const abSliderSpan = document.createElement('span');
abSliderSpan.className = 'slider';
abToggleLabel.appendChild(abToggleInput);
abToggleLabel.appendChild(abSliderSpan);
abSwitchContainer.appendChild(abLabelBlock);
abSwitchContainer.appendChild(abToggleLabel);
// --- Switch 3: Ultra Auto-Reloader ---
const switchContainer = document.createElement('div');
switchContainer.className = 'switch-container';
const labelBlock = document.createElement('div');
labelBlock.className = 'switch-label-block';
const switchText = document.createElement('span');
switchText.className = 'switch-label-text';
switchText.textContent = 'Ultra Auto-Reloader';
const creditsText = document.createElement('span');
creditsText.className = 'credits-tag';
creditsText.textContent = 'PandaTree Ultra';
labelBlock.appendChild(switchText);
labelBlock.appendChild(creditsText);
const toggleLabel = document.createElement('label');
toggleLabel.className = 'toggle-switch';
const toggleInput = document.createElement('input');
toggleInput.type = 'checkbox';
toggleInput.checked = autoReloadEnabled;
toggleInput.onchange = (e) => {
autoReloadEnabled = e.target.checked;
localStorage.setItem('pt_auto_reload', autoReloadEnabled);
};
const sliderSpan = document.createElement('span');
sliderSpan.className = 'slider';
toggleLabel.appendChild(toggleInput);
toggleLabel.appendChild(sliderSpan);
switchContainer.appendChild(labelBlock);
switchContainer.appendChild(toggleLabel);
// --- Switch 4: Matrix Theme ---
const mxSwitchContainer = document.createElement('div');
mxSwitchContainer.className = 'switch-container';
const mxLabelBlock = document.createElement('div');
mxLabelBlock.className = 'switch-label-block';
const mxSwitchText = document.createElement('span');
mxSwitchText.className = 'switch-label-text';
mxSwitchText.textContent = 'Matrix Theme';
const mxSubtext = document.createElement('span');
mxSubtext.className = 'credits-tag';
mxSubtext.textContent = 'Matrix Theme';
mxLabelBlock.appendChild(mxSwitchText);
mxLabelBlock.appendChild(mxSubtext);
const mxToggleLabel = document.createElement('label');
mxToggleLabel.className = 'toggle-switch';
const mxToggleInput = document.createElement('input');
mxToggleInput.id = 'pt-mx-input';
mxToggleInput.type = 'checkbox';
mxToggleInput.checked = matrixModeEnabled;
mxToggleInput.onchange = (e) => {
matrixModeEnabled = e.target.checked;
localStorage.setItem('pt_matrix_mode', matrixModeEnabled);
if (matrixModeEnabled) {
lightModeEnabled = false;
afterburnModeEnabled = false;
blueArcadeModeEnabled = false;
localStorage.setItem('pt_light_mode', false);
localStorage.setItem('pt_afterburn_mode', false);
localStorage.setItem('pt_blue_arcade_mode', false);
const lmInput = menu.querySelector('#pt-lm-input');
const abInput = menu.querySelector('#pt-ab-input');
const baInput = menu.querySelector('#pt-ba-input');
if (lmInput) lmInput.checked = false;
if (abInput) abInput.checked = false;
if (baInput) baInput.checked = false;
}
applyModes();
};
const mxSliderSpan = document.createElement('span');
mxSliderSpan.className = 'slider';
mxToggleLabel.appendChild(mxToggleInput);
mxToggleLabel.appendChild(mxSliderSpan);
mxSwitchContainer.appendChild(mxLabelBlock);
mxSwitchContainer.appendChild(mxToggleLabel);
// --- Switch 5: Matrix Clicks ---
const clkSwitchContainer = document.createElement('div');
clkSwitchContainer.className = 'switch-container';
const clkLabelBlock = document.createElement('div');
clkLabelBlock.className = 'switch-label-block';
const clkSwitchText = document.createElement('span');
clkSwitchText.className = 'switch-label-text';
clkSwitchText.textContent = 'Matrix Clicks';
const clkSubtext = document.createElement('span');
clkSubtext.className = 'credits-tag';
clkSubtext.textContent = 'Use Clicks Anywhere';
clkLabelBlock.appendChild(clkSwitchText);
clkLabelBlock.appendChild(clkSubtext);
const clkToggleLabel = document.createElement('label');
clkToggleLabel.className = 'toggle-switch';
const clkToggleInput = document.createElement('input');
clkToggleInput.type = 'checkbox';
clkToggleInput.checked = matrixClicksEnabled;
clkToggleInput.onchange = (e) => {
matrixClicksEnabled = e.target.checked;
localStorage.setItem('pt_matrix_clicks', matrixClicksEnabled);
};
const clkSliderSpan = document.createElement('span');
clkSliderSpan.className = 'slider';
clkToggleLabel.appendChild(clkToggleInput);
clkToggleLabel.appendChild(clkSliderSpan);
clkSwitchContainer.appendChild(clkLabelBlock);
clkSwitchContainer.appendChild(clkToggleLabel);
// --- Switch 6: Light Mode ---
const lmSwitchContainer = document.createElement('div');
lmSwitchContainer.className = 'switch-container';
const lmLabelBlock = document.createElement('div');
lmLabelBlock.className = 'switch-label-block';
const lmSwitchText = document.createElement('span');
lmSwitchText.className = 'switch-label-text';
lmSwitchText.textContent = 'Light Mode';
const lmSubtext = document.createElement('span');
lmSubtext.className = 'credits-tag';
lmSubtext.textContent = 'For Educational Purposes';
lmLabelBlock.appendChild(lmSwitchText);
lmLabelBlock.appendChild(lmSubtext);
const lmToggleLabel = document.createElement('label');
lmToggleLabel.className = 'toggle-switch';
const lmToggleInput = document.createElement('input');
lmToggleInput.id = 'pt-lm-input';
lmToggleInput.type = 'checkbox';
lmToggleInput.checked = lightModeEnabled;
lmToggleInput.onchange = (e) => {
lightModeEnabled = e.target.checked;
localStorage.setItem('pt_light_mode', lightModeEnabled);
if (lightModeEnabled) {
matrixModeEnabled = false;
afterburnModeEnabled = false;
blueArcadeModeEnabled = false;
localStorage.setItem('pt_matrix_mode', false);
localStorage.setItem('pt_afterburn_mode', false);
localStorage.setItem('pt_blue_arcade_mode', false);
const mxInput = menu.querySelector('#pt-mx-input');
const abInput = menu.querySelector('#pt-ab-input');
const baInput = menu.querySelector('#pt-ba-input');
if (mxInput) mxInput.checked = false;
if (abInput) abInput.checked = false;
if (baInput) baInput.checked = false;
}
applyModes();
};
const lmSliderSpan = document.createElement('span');
lmSliderSpan.className = 'slider';
lmToggleLabel.appendChild(lmToggleInput);
lmToggleLabel.appendChild(lmSliderSpan);
lmSwitchContainer.appendChild(lmLabelBlock);
lmSwitchContainer.appendChild(lmToggleLabel);
const discordBtn = document.createElement('a');
discordBtn.className = 'bg-btn discord-btn';
discordBtn.href = 'https://discord.gg/SZe2NeJzFU';
discordBtn.target = '_blank';
discordBtn.textContent = '💬 Official PandaType Discord';
const singleLineBtn = document.createElement('a');
singleLineBtn.className = 'bg-btn script-link-btn';
singleLineBtn.href = 'https://greasyfork.org/en/scripts/587020-pandatype-single-line-mode';
singleLineBtn.target = '_blank';
singleLineBtn.textContent = '🐼 PandaType Single Line Mode';
const updateBtn = document.createElement('a');
updateBtn.className = 'bg-btn update-btn';
updateBtn.href = 'https://greasyfork.org/en/scripts/586942-pandatree';
updateBtn.target = '_blank';
updateBtn.textContent = '🔄 Check for Updates';
// Building the Body
menuBody.appendChild(glowEmoji);
menuBody.appendChild(glowTitle);
menuBody.appendChild(glowSubtitle);
menuBody.appendChild(uploadBtn);
menuBody.appendChild(uploadGifBtn);
menuBody.appendChild(resetBtn);
menuBody.appendChild(trackHeading);
menuBody.appendChild(trackUploadBtn);
menuBody.appendChild(trackUploadGifBtn);
menuBody.appendChild(trackRemoveBtn);
menuBody.appendChild(baSwitchContainer); // Added Blue Arcade Switch!
menuBody.appendChild(abSwitchContainer);
menuBody.appendChild(switchContainer);
menuBody.appendChild(mxSwitchContainer);
menuBody.appendChild(clkSwitchContainer);
menuBody.appendChild(lmSwitchContainer);
menuBody.appendChild(discordBtn);
menuBody.appendChild(singleLineBtn);
menuBody.appendChild(updateBtn);
// Final compilation
menu.appendChild(menuHeader);
menu.appendChild(menuBody);
panel.appendChild(gear);
panel.appendChild(menu);
document.body.appendChild(panel);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initThemeEngine);
} else {
initThemeEngine();
}
})();