*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:100%}
body{background:#000;color:#fff;font-family:'Segoe UI',system-ui,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;overflow:hidden}
body.maintenance{cursor:not-allowed}
body.maintenance #count{opacity:0.35;transition:opacity 0.3s}
body.maintenance #badge{opacity:0!important}
#maintenance{position:fixed;top:0;left:0;right:0;background:#1a1a1a;border-bottom:1px solid #333;padding:10px 20px;text-align:center;font-size:0.85rem;color:#ccc;z-index:60;display:none;justify-content:center;align-items:center;gap:10px}
#maintenance.show{display:flex}
#maintenance i{color:#fff}
#announcement{position:fixed;top:0;left:0;right:0;background:#0a0a0a;border-bottom:1px solid #222;padding:10px 20px;text-align:center;font-size:0.85rem;color:#ccc;z-index:50;display:none;justify-content:center;align-items:center;gap:10px}
#maintenance.show ~ #announcement.show{top:42px}
#announcement.show{display:flex}
#announcement i{color:#fff}
#announcement button{background:none;border:none;color:#444;cursor:pointer;padding:4px;margin-left:10px;font-size:1rem}
#announcement button:hover{color:#fff}
#count{font-size:6rem;font-weight:300;letter-spacing:4px;pointer-events:none;position:relative;display:inline-block}
#badge{position:absolute;left:100%;top:0;margin-left:8px;font-size:1.8rem;font-weight:600;color:#fff;opacity:0;transition:opacity 0.3s;white-space:nowrap;pointer-events:none}
#badge.show{opacity:1}
#label{font-size:1.2rem;color:#444;text-transform:uppercase;letter-spacing:6px;pointer-events:none}
#views{position:fixed;bottom:20px;left:20px;color:#444;font-size:1rem;display:flex;align-items:center;gap:8px;pointer-events:none}
#views .divider{color:#333;margin:0 4px}
#trophy{position:fixed;top:20px;right:20px;background:none;border:none;color:#444;font-size:1.5rem;cursor:pointer;z-index:10;padding:4px;transition:color 0.2s}
#trophy:hover{color:#fff}
#register{position:fixed;bottom:20px;right:20px;background:none;border:1px solid #222;color:#444;padding:8px 12px;cursor:pointer;font-size:0.7rem;letter-spacing:2px;z-index:10;transition:color 0.2s,border-color 0.2s}
#register:hover{color:#fff;border-color:#555}
#panel{position:fixed;top:0;right:-360px;width:320px;height:100%;background:#111;z-index:200;padding:30px;cursor:default;transition:right 0.3s ease;overflow-y:auto}
#panel.open{right:0}
#close{position:absolute;top:20px;right:20px;background:none;border:none;color:#444;font-size:1.5rem;cursor:pointer;transition:color 0.2s}
#close:hover{color:#fff}
.tabs{display:flex;gap:15px;margin:48px 0 20px;border-bottom:1px solid #222}
.tab{padding-bottom:10px;cursor:pointer;color:#444;font-size:0.8rem;letter-spacing:2px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.2s}
.tab:hover{color:#888}
.tab.active{color:#fff;border-bottom-color:#fff}
.row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #1a1a1a;font-size:0.85rem;color:#ccc}
.row span:last-child{color:#666}
#multiplier{position:fixed;top:20px;left:20px;color:#fff;font-size:0.9rem;font-weight:600;letter-spacing:1px;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:5}
#multiplier.show{opacity:1}
#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#111;border:1px solid #333;padding:16px 28px;font-size:1rem;color:#fff;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:300;text-align:center;white-space:nowrap}
#toast.show{opacity:1}
#toast i{display:block;font-size:1.5rem;margin-bottom:8px;color:#fff}
.ghost{position:fixed;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:4;transition:transform 0.08s linear;box-shadow:0 0 8px currentColor;top:0;left:0}
.ghost::after{content:'';position:absolute;top:14px;left:2px;width:8px;height:3px;background:currentColor;border-radius:2px;opacity:0.6}
.achieve-tab .ach-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #1a1a1a;color:#555}
.achieve-tab .ach-row.unlocked{color:#ccc}
.achieve-tab .ach-row i{width:20px;text-align:center;color:#333;font-size:1rem}
.achieve-tab .ach-row.unlocked i{color:#fff}
.achieve-tab .ach-name{font-size:0.85rem}
.achieve-tab .ach-desc{font-size:0.7rem;color:#444;margin-top:2px}
@media(max-width:600px){
#maintenance{padding:8px 12px;font-size:0.75rem}
#announcement{padding:8px 12px;font-size:0.75rem}
#count{font-size:3.5rem;letter-spacing:2px}
#badge{font-size:1.2rem;margin-left:6px}
#label{font-size:0.9rem;letter-spacing:3px}
#views{bottom:12px;left:12px;font-size:0.85rem;gap:6px}
#views .divider{margin:0 2px}
#trophy{top:12px;right:12px;font-size:1.3rem;padding:8px}
#register{bottom:12px;right:12px;padding:10px 14px;font-size:0.75rem}
#panel{width:100%;right:-100%;padding:20px}
#panel.open{right:0}
#close{top:12px;right:12px}
.tabs{margin:36px 0 16px;gap:10px}
.tab{font-size:0.75rem;padding-bottom:8px}
.row{padding:10px 0;font-size:0.8rem}
#multiplier{top:12px;left:12px;font-size:0.8rem}
}