Réorganiser le projet et fiabiliser le chargement HTML
This commit is contained in:
4
.gitignore
vendored
Executable file
4
.gitignore
vendored
Executable file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
.codex
|
||||
580
ChessClock.html
Normal file → Executable file
580
ChessClock.html
Normal file → Executable file
@@ -3,557 +3,42 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Application d'horloge d'echecs avec modes tournoi, historique et timers de cube."
|
||||
/>
|
||||
<title>Chess Clock</title>
|
||||
<link rel="stylesheet" href="./src/features/chess-clock/chessClock.css" />
|
||||
<script>
|
||||
window.addEventListener("error", function (event) {
|
||||
let panel = document.getElementById("boot-status");
|
||||
if (!panel) {
|
||||
panel = document.createElement("div");
|
||||
panel.id = "boot-status";
|
||||
document.body.prepend(panel);
|
||||
}
|
||||
panel.style.display = "block";
|
||||
panel.style.position = "fixed";
|
||||
panel.style.inset = "0";
|
||||
panel.style.background = "#060a0e";
|
||||
panel.style.zIndex = "9999";
|
||||
panel.style.color = "#ffd97a";
|
||||
panel.style.font = "600 14px/1.5 system-ui, sans-serif";
|
||||
panel.style.padding = "24px";
|
||||
panel.style.whiteSpace = "pre-wrap";
|
||||
panel.textContent = "Le chargement a echoue. Verifie ta connexion Internet, puis recharge la page.\n\n" + (event.message || "Erreur inconnue");
|
||||
});
|
||||
</script>
|
||||
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
||||
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="boot-status" style="color:#c8d8e8;padding:24px;font:600 14px/1.5 system-ui,sans-serif;">Chargement de Chess Clock...</div>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel" data-presets="react">
|
||||
const { useState, useEffect, useRef, useCallback } = React;
|
||||
const { StrictMode, useCallback, useEffect, useRef, useState } = React;
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
CSS
|
||||
══════════════════════════════════════════════════════════ */
|
||||
const CSS = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oxanium:wght@400;600;700;800&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg:#060a0e;--s1:#0d1218;--s2:#131b24;--s3:#1c2632;--bd:#263040;
|
||||
--gold:#e8b84b;--g2:#ffd97a;--g3:#7a5c1e;
|
||||
--red:#f04040;--grn:#38e878;--blu:#4b9ee8;--pur:#a855f7;
|
||||
--txt:#c8d8e8;--dim:#3e5060;
|
||||
}
|
||||
html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);
|
||||
-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
|
||||
.app{width:100vw;height:100dvh;display:flex;flex-direction:column;
|
||||
font-family:'Oxanium',sans-serif;background:var(--bg);position:relative;overflow:hidden;
|
||||
animation:app-in .5s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes app-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
|
||||
.app::before{content:'';position:fixed;inset:-20%;width:140%;height:140%;
|
||||
background:radial-gradient(ellipse 60% 40% at 30% 10%,rgba(232,184,75,.07) 0%,transparent 70%),
|
||||
radial-gradient(ellipse 50% 50% at 70% 90%,rgba(75,158,232,.05) 0%,transparent 70%);
|
||||
pointer-events:none;z-index:0;animation:mesh 14s ease-in-out infinite alternate}
|
||||
@keyframes mesh{from{transform:translate(0,0)}to{transform:translate(2%,1%)}}
|
||||
.app::after{content:'';position:fixed;inset:0;
|
||||
background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);
|
||||
pointer-events:none;z-index:999;opacity:.35}
|
||||
@keyframes shimmer{0%,100%{background-position:0%}50%{background-position:100%}}
|
||||
@keyframes cfg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes fade-in{from{opacity:0}to{opacity:1}}
|
||||
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
|
||||
|
||||
/* CONFIG */
|
||||
.cfg{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:1;overflow:hidden;animation:cfg-in .45s cubic-bezier(.16,1,.3,1) both}
|
||||
.cfg-hd{padding:clamp(14px,3.5vh,24px) 20px 8px;text-align:center;flex-shrink:0}
|
||||
.cfg-logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,7.5vw,44px);letter-spacing:8px;
|
||||
background:linear-gradient(135deg,var(--g2) 0%,var(--gold) 50%,#b8882b 100%);
|
||||
-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;
|
||||
background-size:200%;animation:shimmer 4s ease-in-out infinite}
|
||||
.cfg-sub{font-size:9px;letter-spacing:6px;color:var(--dim);text-transform:uppercase;margin-top:3px}
|
||||
.cfg-hd-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;flex-wrap:wrap}
|
||||
.icon-btn{display:flex;align-items:center;gap:5px;background:var(--s1);border:1px solid var(--bd);
|
||||
border-radius:10px;padding:5px 10px;cursor:pointer;transition:all .15s}
|
||||
.icon-btn:active{background:var(--s2);border-color:var(--gold)}
|
||||
.icon-btn-lbl{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.cfg-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px 0;-webkit-overflow-scrolling:touch}
|
||||
.cfg-body::-webkit-scrollbar{display:none}
|
||||
.cfg-section{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin:12px 0 6px 2px}
|
||||
.cfg-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;overflow:hidden;margin-bottom:8px;box-shadow:0 4px 24px rgba(0,0,0,.3)}
|
||||
.cfg-row{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;
|
||||
position:relative;overflow:hidden;transition:background .2s}
|
||||
.cfg-row:last-child{border-bottom:none}
|
||||
.cfg-row:active{background:rgba(232,184,75,.04)}
|
||||
.cfg-row.sel{background:linear-gradient(90deg,rgba(232,184,75,.09),rgba(232,184,75,.03));border-left:2px solid var(--gold)}
|
||||
.cfg-row-lbl{font-weight:600;font-size:clamp(12px,3.5vw,15px);color:var(--txt);transition:color .2s}
|
||||
.cfg-row.sel .cfg-row-lbl{color:var(--g2)}
|
||||
.cfg-chk{color:var(--gold);font-size:15px;opacity:0;transform:scale(0) rotate(-45deg);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
.cfg-row.sel .cfg-chk{opacity:1;transform:scale(1) rotate(0deg)}
|
||||
.cfg-stepper{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
|
||||
.cfg-s-lbl{font-weight:600;font-size:clamp(12px,3.3vw,14px);color:var(--txt)}
|
||||
.cfg-s-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);color:var(--gold);letter-spacing:2px;min-width:36px;text-align:center}
|
||||
.cfg-btns{display:flex;gap:5px}
|
||||
.cfg-btn{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--bd);color:var(--gold);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
|
||||
.cfg-btn:active{background:var(--s3);transform:scale(.88)}
|
||||
.cfg-ft{padding:8px 14px clamp(14px,3.5vh,24px);flex-shrink:0}
|
||||
.start-btn{width:100%;padding:clamp(14px,3.8vw,18px);border:none;border-radius:14px;font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,20px);letter-spacing:7px;color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold),var(--g2),var(--g3));background-size:250%;cursor:pointer;box-shadow:0 4px 28px rgba(232,184,75,.5),inset 0 1px 0 rgba(255,255,255,.2);text-transform:uppercase;transition:transform .18s cubic-bezier(.34,1.56,.64,1);animation:shimmer 3s ease-in-out infinite}
|
||||
.start-btn:active{transform:scale(.96)}
|
||||
.cfg-custom{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:1px dashed var(--g3);border-radius:12px;padding:11px 16px;margin-bottom:8px;cursor:pointer;transition:background .15s,border-color .15s}
|
||||
.cfg-custom:active{background:var(--s2);border-color:var(--gold)}
|
||||
.cfg-custom.c-on{border-style:solid;border-color:var(--gold);background:rgba(232,184,75,.06)}
|
||||
.cfg-c-main{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,3.8vw,18px);letter-spacing:3px;color:var(--gold)}
|
||||
.cfg-c-detail{font-size:9px;letter-spacing:1px;color:var(--dim);margin-top:2px}
|
||||
.cfg-c-arrow{font-size:17px;color:var(--dim)}
|
||||
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
|
||||
.toggle-row:last-child{border-bottom:none}
|
||||
.toggle-lbl{display:flex;flex-direction:column;gap:2px}
|
||||
.toggle-name{font-weight:600;font-size:clamp(11px,3.2vw,13px);color:var(--txt)}
|
||||
.toggle-desc{font-size:9px;letter-spacing:1px;color:var(--dim)}
|
||||
.toggle{width:40px;height:22px;border-radius:11px;background:var(--s3);border:1px solid var(--bd);position:relative;cursor:pointer;transition:background .25s,border-color .25s;flex-shrink:0}
|
||||
.toggle.on{background:var(--grn);border-color:var(--grn)}
|
||||
.toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
|
||||
.toggle.on .toggle-knob{left:20px;background:#fff;box-shadow:0 0 8px rgba(56,232,120,.6)}
|
||||
|
||||
/* MODAL */
|
||||
.modal-bg{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease-out}
|
||||
.modal{width:100%;max-width:480px;background:var(--s1);border-radius:22px 22px 0 0;border-top:1px solid var(--bd);padding:0 0 clamp(18px,4.5vh,32px);animation:modal-in .28s cubic-bezier(.34,1.4,.64,1)}
|
||||
@keyframes modal-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
|
||||
.modal-handle{width:40px;height:4px;background:var(--bd);border-radius:2px;margin:12px auto 0}
|
||||
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,20px);letter-spacing:5px;color:var(--gold);text-align:center;padding:12px 18px 3px}
|
||||
.modal-sub{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;text-align:center;margin-bottom:14px}
|
||||
.modal-fields{display:flex;gap:8px;padding:0 14px;margin-bottom:14px}
|
||||
.modal-field{flex:1;display:flex;flex-direction:column;gap:5px}
|
||||
.modal-f-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;padding-left:2px}
|
||||
.modal-spin{display:flex;align-items:center;background:var(--s2);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
|
||||
.modal-sb{width:38px;height:46px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--gold);cursor:pointer;flex-shrink:0;transition:background .12s}
|
||||
.modal-sb:active{background:var(--s3)}
|
||||
.modal-sv{flex:1;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:clamp(19px,5vw,24px);color:var(--txt);letter-spacing:2px}
|
||||
.modal-su{font-size:8px;letter-spacing:2px;color:var(--dim);text-align:center;margin-top:2px}
|
||||
.modal-prev{margin:0 14px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between}
|
||||
.modal-prev-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.modal-prev-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,3.8vw,18px);color:var(--gold);letter-spacing:2px}
|
||||
.modal-actions{display:flex;flex-direction:column;gap:7px;padding:0 14px}
|
||||
.modal-ok{width:100%;padding:12px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 20px rgba(232,184,75,.4);transition:filter .15s}
|
||||
.modal-ok:active{filter:brightness(.88)}
|
||||
.modal-cancel{width:100%;padding:9px;border:none;background:transparent;font-size:10px;letter-spacing:3px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* GAME */
|
||||
.game{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
|
||||
.panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;gap:clamp(5px,1.5vh,10px);overflow:hidden;transition:opacity .3s,filter .3s}
|
||||
.panel.flip{transform:rotate(180deg)}
|
||||
.panel.on{opacity:1}
|
||||
.panel.on::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,184,75,.10) 0%,rgba(232,184,75,.02) 40%,transparent 70%);pointer-events:none;animation:sweep 2.4s ease-in-out infinite alternate}
|
||||
@keyframes sweep{from{opacity:.6}to{opacity:1}}
|
||||
.panel.off{opacity:.38;filter:brightness(.7)}
|
||||
.panel.dng{animation:dng .55s ease-in-out infinite}
|
||||
@keyframes dng{0%,100%{background:transparent}30%{background:rgba(240,64,64,.16)}60%{background:rgba(240,64,64,.06)}}
|
||||
.panel.pf{animation:pfx .25s ease-in-out 3}
|
||||
@keyframes pfx{0%,100%{background:transparent}50%{background:rgba(168,85,247,.22)}}
|
||||
.p-ripple{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,75,.22) 0%,transparent 70%);transform:scale(0);pointer-events:none;animation:ripple .55s cubic-bezier(.2,.8,.3,1) forwards}
|
||||
@keyframes ripple{from{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}
|
||||
.p-label{font-size:9px;letter-spacing:6px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.clock{font-family:'Bebas Neue',sans-serif;font-size:clamp(58px,16vw,106px);letter-spacing:-3px;color:var(--gold);line-height:1;text-shadow:0 0 30px rgba(232,184,75,.45),0 0 70px rgba(232,184,75,.15);position:relative;z-index:1;transition:color .3s,text-shadow .3s}
|
||||
.clock.dng{color:var(--red);text-shadow:0 0 20px rgba(240,64,64,.8),0 0 50px rgba(240,64,64,.4);animation:glitch 1.4s steps(1) infinite}
|
||||
@keyframes glitch{0%,89%,100%{transform:translate(0,0)}90%{transform:translate(3px,0)}92%{transform:translate(-3px,0)}94%{transform:translate(0,0)}}
|
||||
.sonar{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(232,184,75,.7);animation:sonar 1.4s ease-out infinite}
|
||||
@keyframes sonar{0%{box-shadow:0 0 0 0 rgba(232,184,75,.8);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(232,184,75,0);transform:scale(1.15)}100%{box-shadow:0 0 0 0 rgba(232,184,75,0);transform:scale(1)}}
|
||||
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:190px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(122,92,30,.6);background:transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s}
|
||||
.dot.f{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px rgba(232,184,75,.7);transform:scale(1.15);animation:dpop .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
@keyframes dpop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.4)}100%{transform:scale(1.15);opacity:1}}
|
||||
.dot.t{border-color:rgba(240,64,64,.5)}
|
||||
.dot.f.t{background:var(--red);border-color:var(--red);animation:tstrobe .45s ease-in-out infinite alternate}
|
||||
@keyframes tstrobe{from{box-shadow:0 0 4px rgba(240,64,64,.5);transform:scale(1.1)}to{box-shadow:0 0 14px rgba(240,64,64,1);transform:scale(1.3)}}
|
||||
.pen-badge{background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.45);border-radius:18px;padding:2px 9px;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:2px;color:var(--pur)}
|
||||
.mt-wrap{width:75%;max-width:160px;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
|
||||
.mt-bar{height:100%;border-radius:2px;transition:width .1s linear;background:linear-gradient(90deg,var(--grn),var(--gold))}
|
||||
.mt-bar.warn{background:linear-gradient(90deg,var(--gold),var(--red))}
|
||||
.mt-bar.crit{background:var(--red);animation:crit .3s steps(1) infinite}
|
||||
@keyframes crit{0%,100%{opacity:1}50%{opacity:.45}}
|
||||
.pen-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--pur),transparent);animation:pb-fl .3s ease-in-out 3}
|
||||
@keyframes pb-fl{0%,100%{opacity:0}50%{opacity:1}}
|
||||
.div{height:3px;background:linear-gradient(90deg,transparent 0%,rgba(122,92,30,.4) 10%,var(--gold) 30%,var(--g2) 50%,var(--gold) 70%,rgba(122,92,30,.4) 90%,transparent 100%);background-size:200%;position:relative;z-index:10;flex-shrink:0;box-shadow:0 0 18px rgba(232,184,75,.4);animation:dflow 3s linear infinite}
|
||||
@keyframes dflow{from{background-position:0%}to{background-position:200%}}
|
||||
.div-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;z-index:20;pointer-events:none}
|
||||
.div-badge{background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--gold);white-space:nowrap;box-shadow:0 0 12px rgba(232,184,75,.25)}
|
||||
.div-sub{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:1px 7px;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;white-space:nowrap}
|
||||
.win-btn{position:absolute;top:50%;z-index:30;cursor:pointer;transform:translateY(-50%);transition:all .2s cubic-bezier(.34,1.56,.64,1)}
|
||||
.win-btn.wl{left:8px}
|
||||
.win-btn.wr{right:8px}
|
||||
.win-btn-inner{background:var(--s2);border:1.5px solid var(--bd);border-radius:10px;padding:5px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
|
||||
.win-btn:active .win-btn-inner{transform:scale(.9)}
|
||||
.win-btn.pnd .win-btn-inner{background:rgba(232,184,75,.12);border-color:var(--gold);animation:wbp .5s ease-in-out infinite alternate}
|
||||
@keyframes wbp{from{box-shadow:0 0 8px rgba(232,184,75,.3)}to{box-shadow:0 0 22px rgba(232,184,75,.7)}}
|
||||
.win-btn-ico{font-size:12px;line-height:1}
|
||||
.win-btn-lbl{font-family:'Bebas Neue',sans-serif;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;white-space:nowrap}
|
||||
.win-btn.pnd .win-btn-lbl{color:var(--gold)}
|
||||
.win-btn.flip2{transform:translateY(-50%) rotate(180deg)}
|
||||
.ctrls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;padding:7px 14px clamp(10px,2.5vh,20px);z-index:100;background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent)}
|
||||
.cbtn{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s cubic-bezier(.34,1.56,.64,1)}
|
||||
.cbtn:active{color:var(--gold);border-color:var(--g3);transform:scale(.92)}
|
||||
|
||||
/* CS OVERLAY */
|
||||
.cso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.3vh,9px);z-index:50;overflow:hidden;animation:cso-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes cso-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
|
||||
.cso-bg{position:absolute;inset:0;transition:background .4s}
|
||||
.cso-bg.idle{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.98) 0%,rgba(6,10,14,.99) 70%)}
|
||||
.cso-bg.hold{animation:hbg .9s ease-in-out infinite alternate}
|
||||
@keyframes hbg{from{background:radial-gradient(ellipse 65% 65% at center,rgba(10,110,44,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 88% 88% at center,rgba(14,140,56,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.run{animation:rbg .4s ease-in-out infinite alternate}
|
||||
@keyframes rbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(140,20,20,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 90% 90% at center,rgba(180,28,28,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.stop{background:rgba(6,10,14,.98)}
|
||||
.cso-bg.win{animation:wbg .6s ease-in-out infinite alternate}
|
||||
@keyframes wbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(10,120,48,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 95% 95% at center,rgba(16,160,64,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.lose{background:rgba(6,10,14,.98)}
|
||||
.cso-lbl{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.2vw,15px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1;font-weight:700}
|
||||
.cso-lbl.blu{color:#7ec8ff;text-shadow:0 0 24px rgba(100,180,255,1),0 0 48px rgba(75,158,232,.6)}
|
||||
.cso-lbl.grn{color:#7affc0;text-shadow:0 0 24px rgba(80,255,160,1),0 0 48px rgba(56,232,120,.6)}
|
||||
.cso-lbl.red{color:#ff8080;text-shadow:0 0 24px rgba(255,100,100,1),0 0 48px rgba(240,64,64,.7)}
|
||||
.cso-lbl.dim{color:rgba(200,216,232,.6)}
|
||||
.cso-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,10.5vw,70px);line-height:1;letter-spacing:-1px;position:relative;z-index:1;transition:color .25s,text-shadow .25s}
|
||||
.cso-t.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,1),0 0 80px rgba(75,158,232,.5)}
|
||||
.cso-t.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1),0 0 100px rgba(56,232,120,.5);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
@keyframes hbreathe{from{transform:scale(.97);filter:brightness(.9)}to{transform:scale(1.05);filter:brightness(1.2)}}
|
||||
.cso-t.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1),0 0 80px rgba(240,64,64,.6);animation:runpulse .35s ease-in-out infinite alternate}
|
||||
@keyframes runpulse{from{filter:brightness(1)}to{filter:brightness(1.3)}}
|
||||
.cso-t.stop{color:rgba(200,216,232,.5)}
|
||||
.cso-t.win{color:#80ffbe;text-shadow:0 0 60px rgba(80,255,160,1),0 0 120px rgba(56,232,120,.7);animation:wbreathe .5s ease-in-out infinite alternate}
|
||||
.cso-t.lose{color:rgba(200,216,232,.3)}
|
||||
@keyframes wbreathe{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.07);filter:brightness(1.25)}}
|
||||
.cso-hint{font-size:clamp(9px,2.2vw,11px);letter-spacing:3px;color:rgba(200,216,232,.75);text-transform:uppercase;position:relative;z-index:1;text-align:center;padding:0 10px;font-weight:600}
|
||||
.cso-win{font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,3.2vw,15px);letter-spacing:6px;color:#80ffbe;text-shadow:0 0 30px rgba(80,255,160,1);position:relative;z-index:1;text-align:center}
|
||||
.cso-ring{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
|
||||
.cso-ring svg{position:absolute;top:0;left:0;overflow:visible}
|
||||
.rb{fill:none;stroke:rgba(255,255,255,.08);stroke-linecap:round}
|
||||
.rf{fill:none;stroke:#80ffbe;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(80,255,160,.9));stroke-dasharray:289;animation:rspin .7s linear infinite}
|
||||
@keyframes rspin{from{stroke-dashoffset:289}to{stroke-dashoffset:0}}
|
||||
.rf2{fill:none;stroke:rgba(80,255,160,.3);stroke-linecap:round;stroke-dasharray:60 229;animation:rspin2 1.4s linear infinite reverse}
|
||||
@keyframes rspin2{from{stroke-dashoffset:0}to{stroke-dashoffset:289}}
|
||||
|
||||
/* DOUBLE MOVE */
|
||||
.dbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,14px);z-index:50;pointer-events:none;animation:dbl-in .4s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes dbl-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
|
||||
.dbl-bw{position:absolute;inset:0;background:rgba(3,18,10,.97)}
|
||||
.dbl-bl{position:absolute;inset:0;background:rgba(4,8,14,.97)}
|
||||
.dbl-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,13px);border-radius:20px;padding:clamp(16px,4vh,24px) clamp(20px,6vw,34px)}
|
||||
.dbl-card.win-card{background:rgba(56,232,120,.12);border:1.5px solid rgba(56,232,120,.5);box-shadow:0 0 40px rgba(56,232,120,.15),inset 0 1px 0 rgba(56,232,120,.2)}
|
||||
.dbl-card.lose-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);box-shadow:0 4px 24px rgba(0,0,0,.4)}
|
||||
.dbl-icon{font-size:clamp(28px,8vw,40px);line-height:1;filter:drop-shadow(0 0 16px rgba(56,232,120,.8))}
|
||||
.dbl-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,6.5vw,34px);letter-spacing:6px;color:#ffffff;text-transform:uppercase;text-align:center;text-shadow:0 0 30px rgba(56,232,120,.8),0 2px 0 rgba(0,0,0,.6)}
|
||||
.dbl-sub{font-size:11px;letter-spacing:2px;color:rgba(56,232,120,1);text-transform:uppercase;text-align:center;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7);background:rgba(56,232,120,.15);border:1px solid rgba(56,232,120,.4);border-radius:8px;padding:4px 10px}
|
||||
.dbl-pips{display:flex;gap:16px}
|
||||
.dbl-pip{width:20px;height:20px;border-radius:50%;background:var(--grn);box-shadow:0 0 16px rgba(56,232,120,.9),0 2px 6px rgba(0,0,0,.5);animation:psonar 1s ease-out infinite}
|
||||
.dbl-pip:nth-child(2){animation-delay:.5s}
|
||||
@keyframes psonar{0%{box-shadow:0 0 0 0 rgba(56,232,120,.9),0 2px 6px rgba(0,0,0,.5)}70%{box-shadow:0 0 0 14px rgba(56,232,120,0),0 2px 6px rgba(0,0,0,.5)}100%{box-shadow:0 0 0 0 rgba(56,232,120,0),0 2px 6px rgba(0,0,0,.5)}}
|
||||
.dbl-pip.used{background:rgba(255,255,255,.2);box-shadow:none;animation:none;transform:scale(.65);opacity:.35;transition:all .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
.dbl-hint{font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
|
||||
.dbl-wait-ico{font-size:clamp(22px,6.5vw,32px);line-height:1;opacity:.6}
|
||||
.dbl-wait-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);letter-spacing:5px;color:#ffffff;text-transform:uppercase;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:.9}
|
||||
.dbl-wait-sub{font-size:11px;letter-spacing:2px;color:rgba(200,216,232,.65);text-transform:uppercase;text-align:center;font-weight:600}
|
||||
.dbl-challenge{font-size:11px;letter-spacing:2px;color:#ffffff;text-transform:uppercase;text-align:center;padding:8px 16px;background:rgba(168,85,247,.4);border:1.5px solid rgba(168,85,247,.8);border-radius:11px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);box-shadow:0 0 20px rgba(168,85,247,.5);animation:wfade 1s ease-in-out infinite alternate}
|
||||
@keyframes wfade{from{opacity:.8}to{opacity:1}}
|
||||
/* FORBIDDEN MOVE */
|
||||
.forb{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(240,64,64,.08);animation:fade-in .2s ease-out both}
|
||||
.forb-ico{font-size:clamp(28px,8vw,46px);animation:fshake .4s ease-in-out}
|
||||
@keyframes fshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
|
||||
.forb-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);letter-spacing:5px;color:var(--red);text-align:center}
|
||||
.forb-sub{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;text-align:center;padding:0 14px}
|
||||
|
||||
/* TOURNAMENT */
|
||||
.trn{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.trn-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.trn-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.trn-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||||
.trn-close:active{background:var(--s3)}
|
||||
.trn-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.trn-body::-webkit-scrollbar{display:none}
|
||||
.trn-setup{display:flex;flex-direction:column;gap:14px}
|
||||
.trn-players-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
||||
.trn-player-slot{background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:7px}
|
||||
.trn-p-num{font-family:'Bebas Neue',sans-serif;font-size:17px;color:var(--gold);width:20px;text-align:center}
|
||||
.trn-p-name{font-size:11px;letter-spacing:1px;color:var(--txt);font-weight:600}
|
||||
.trn-size-row{display:flex;gap:7px}
|
||||
.trn-size-btn{flex:1;padding:11px;background:var(--s2);border:1.5px solid var(--bd);border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:3px;color:var(--dim);cursor:pointer;text-align:center;transition:all .2s}
|
||||
.trn-size-btn.sel{background:rgba(232,184,75,.08);border-color:var(--gold);color:var(--gold)}
|
||||
.trn-start-btn{padding:13px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:5px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 20px rgba(232,184,75,.4)}
|
||||
.trn-bracket{display:flex;flex-direction:column;gap:10px}
|
||||
.trn-round-title{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold);text-align:center;margin-bottom:3px}
|
||||
.trn-match{background:var(--s1);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
|
||||
.trn-match.active{border-color:var(--gold);box-shadow:0 0 14px rgba(232,184,75,.2)}
|
||||
.trn-match.done{opacity:.6}
|
||||
.trn-m-row{display:flex;align-items:center;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.04)}
|
||||
.trn-m-row:last-child{border-bottom:none}
|
||||
.trn-m-row.won{background:rgba(232,184,75,.07)}
|
||||
.trn-m-name{flex:1;font-size:12px;font-weight:600;color:var(--txt);letter-spacing:.5px}
|
||||
.trn-m-row.won .trn-m-name{color:var(--g2)}
|
||||
.trn-m-score{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--dim);letter-spacing:2px;width:22px;text-align:center}
|
||||
.trn-m-row.won .trn-m-score{color:var(--gold)}
|
||||
.trn-m-play{padding:7px 0;background:rgba(232,184,75,.06);border-top:1px solid var(--bd);text-align:center;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--gold);cursor:pointer}
|
||||
.trn-m-play:active{background:rgba(232,184,75,.12)}
|
||||
.trn-m-tbd{padding:9px 13px;font-size:10px;letter-spacing:2px;color:var(--dim);text-align:center}
|
||||
.trn-winner-banner{background:linear-gradient(135deg,rgba(232,184,75,.12),rgba(232,184,75,.04));border:1px solid var(--gold);border-radius:13px;padding:18px;text-align:center;margin-bottom:14px}
|
||||
.trn-w-ico{font-size:36px;animation:efloat 2s ease-in-out infinite alternate}
|
||||
@keyframes efloat{from{transform:translateY(0)}to{transform:translateY(-8px)}}
|
||||
.trn-w-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,5.5vw,30px);letter-spacing:5px;background:linear-gradient(135deg,var(--g2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:5px}
|
||||
.trn-w-sub{font-size:9px;letter-spacing:3px;color:var(--dim);margin-top:3px}
|
||||
.trn-new-btn{width:100%;padding:12px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:4px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;margin-top:7px}
|
||||
.trn-p-input{flex:1;background:transparent;border:none;outline:none;font-family:'Oxanium',sans-serif;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.5px;width:0;min-width:0;caret-color:var(--gold)}
|
||||
.trn-p-slot-edit{background:rgba(232,184,75,.07);border-color:var(--g3)}
|
||||
.trn-challenge{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(168,85,247,.1);animation:fade-in .2s ease-out both}
|
||||
.trn-ch-ico{font-size:clamp(24px,7vw,38px);animation:fshake .4s ease-in-out}
|
||||
.trn-ch-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.5vw,18px);letter-spacing:5px;color:var(--pur);text-align:center}
|
||||
.trn-ch-sub{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;text-align:center;padding:0 14px}
|
||||
.dbl-challenge{font-family:'Bebas Neue',sans-serif;font-size:clamp(9px,2.5vw,12px);letter-spacing:3px;color:var(--pur);position:relative;z-index:1;text-transform:uppercase;text-align:center;padding:2px 10px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);border-radius:8px;animation:wfade 1.2s ease-in-out infinite alternate}
|
||||
|
||||
/* HISTORY */
|
||||
.hist{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.hist-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.hist-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.hist-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||||
.hist-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.hist-body::-webkit-scrollbar{display:none}
|
||||
.hist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;opacity:.4}
|
||||
.hist-empty-ico{font-size:36px}
|
||||
.hist-empty-lbl{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:4px;color:var(--dim)}
|
||||
.hist-entry{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:11px 13px;margin-bottom:9px;animation:cfg-in .3s cubic-bezier(.16,1,.3,1) both}
|
||||
.hist-entry.w0{border-left:3px solid var(--gold)}
|
||||
.hist-entry.w1{border-left:3px solid var(--blu)}
|
||||
.hist-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
|
||||
.hist-date{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.hist-badge{font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:3px;padding:2px 9px;border-radius:18px}
|
||||
.hist-badge.b0{background:rgba(232,184,75,.15);color:var(--gold);border:1px solid var(--g3)}
|
||||
.hist-badge.b1{background:rgba(75,158,232,.15);color:var(--blu);border:1px solid rgba(75,158,232,.4)}
|
||||
.hist-players{display:flex;gap:7px;margin-bottom:7px}
|
||||
.hist-player{flex:1;background:var(--s2);border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
|
||||
.hist-p-top{display:flex;align-items:center;gap:5px}
|
||||
.hist-p-name{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--txt);flex:1}
|
||||
.hist-p-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);color:var(--gold);letter-spacing:2px;line-height:1}
|
||||
.hist-player.winner .hist-p-time{color:var(--g2)}
|
||||
.hist-p-meta{font-size:8px;letter-spacing:1px;color:var(--dim)}
|
||||
.hist-footer{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
|
||||
.hist-meta{font-size:8px;letter-spacing:2px;color:var(--dim)}
|
||||
.hist-clear{font-size:9px;letter-spacing:2px;color:var(--red);opacity:.6;background:none;border:none;cursor:pointer;font-family:'Oxanium',sans-serif;text-transform:uppercase}
|
||||
|
||||
/* END */
|
||||
.end{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(9px,2.2vh,16px);background:rgba(6,10,14,.97);overflow:hidden}
|
||||
.end::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(232,184,75,.07) 0%,transparent 70%);animation:eburst 2s ease-in-out infinite alternate}
|
||||
@keyframes eburst{from{transform:scale(1);opacity:.7}to{transform:scale(1.15);opacity:1}}
|
||||
.end > *{animation:estag .55s cubic-bezier(.16,1,.3,1) both;position:relative;z-index:1}
|
||||
.end > *:nth-child(1){animation-delay:.0s}.end > *:nth-child(2){animation-delay:.1s}.end > *:nth-child(3){animation-delay:.18s}.end > *:nth-child(4){animation-delay:.26s}.end > *:nth-child(5){animation-delay:.34s}.end > *:nth-child(6){animation-delay:.4s}
|
||||
@keyframes estag{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
|
||||
.end-ico{font-size:clamp(38px,10vw,54px);filter:drop-shadow(0 0 20px rgba(232,184,75,.5));animation:efloat 2s ease-in-out infinite alternate}
|
||||
.end-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,7vw,40px);letter-spacing:7px;background:linear-gradient(135deg,var(--g2),var(--gold),#b8882b);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;animation:shimmer 3s ease-in-out infinite}
|
||||
.end-reason{font-size:10px;letter-spacing:5px;color:var(--dim);text-transform:uppercase}
|
||||
.end-cubes{display:flex;align-items:center;gap:18px}
|
||||
.end-cube-card{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.45;transition:opacity .3s}
|
||||
.end-cube-card.winner{opacity:1}
|
||||
.end-cube-lbl{font-family:'Bebas Neue',sans-serif;font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.end-cube-card.winner .end-cube-lbl{color:var(--gold)}
|
||||
.end-cube-sub{font-size:8px;letter-spacing:1px;color:var(--dim)}
|
||||
.end-stats{display:flex;gap:clamp(14px,4.5vw,24px);flex-wrap:wrap;justify-content:center;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:clamp(9px,2.2vw,14px) clamp(14px,3.5vw,22px);box-shadow:0 4px 30px rgba(0,0,0,.4)}
|
||||
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
|
||||
.stat-v{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);color:var(--gold);letter-spacing:2px}
|
||||
.stat-l{font-size:7px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.end-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
|
||||
.btn1{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:5px;color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold));background-size:200%;border:none;border-radius:11px;padding:13px 26px;cursor:pointer;box-shadow:0 0 26px rgba(232,184,75,.5);animation:shimmer 3s ease-in-out infinite;transition:transform .18s}
|
||||
.btn1:active{transform:scale(.94)}
|
||||
.btn2{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:5px;color:var(--txt);background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:13px 26px;cursor:pointer;transition:transform .18s,border-color .2s}
|
||||
.btn2:active{transform:scale(.94);border-color:var(--g3)}
|
||||
|
||||
/* RUBIK'S CUBE */
|
||||
.rcube{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;padding:2px;background:var(--s3);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
|
||||
.rcube.sm{width:22px;height:22px;gap:1px;padding:1.5px}
|
||||
.rcube.md{width:30px;height:30px;gap:1.5px;padding:2px}
|
||||
.rcube.lg{width:42px;height:42px;gap:2px;padding:3px}
|
||||
.rc{border-radius:1.5px}
|
||||
.p1c0{background:#e84b4b}.p1c1{background:#e8b84b}.p1c2{background:#38e878}
|
||||
.p1c3{background:#4b9ee8}.p1c4{background:#e8b84b}.p1c5{background:#e84b4b}
|
||||
.p1c6{background:#38e878}.p1c7{background:#4b9ee8}.p1c8{background:#e8b84b}
|
||||
.p2c0{background:#4b9ee8}.p2c1{background:#38e878}.p2c2{background:#e8b84b}
|
||||
.p2c3{background:#e84b4b}.p2c4{background:#4b9ee8}.p2c5{background:#38e878}
|
||||
.p2c6{background:#e8b84b}.p2c7{background:#e84b4b}.p2c8{background:#4b9ee8}
|
||||
|
||||
/* USER MANAGER */
|
||||
.um{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.um-hd{display:flex;align-items:center;gap:8px;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.um-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold);flex:1}
|
||||
.um-add-btn{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));border:none;border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
|
||||
.um-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
|
||||
.um-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.um-body::-webkit-scrollbar{display:none}
|
||||
.um-card{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:12px 13px;margin-bottom:9px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s}
|
||||
.um-card.editing{border-color:var(--gold);background:rgba(232,184,75,.04)}
|
||||
.um-row{display:flex;align-items:center;gap:10px}
|
||||
.um-av{font-size:24px;line-height:1;width:44px;height:44px;background:var(--s2);border:1.5px solid var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s}
|
||||
.um-av:active{transform:scale(.9)}
|
||||
.um-av.open{border-color:var(--gold)}
|
||||
.um-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
|
||||
.um-name{font-weight:700;font-size:clamp(13px,3.8vw,15px);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.um-meta{display:flex;gap:8px;align-items:center}
|
||||
.um-elo{font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--grn);letter-spacing:1px}
|
||||
.um-streak{font-size:10px;color:var(--red)}
|
||||
.um-wins{font-size:10px;color:var(--dim)}
|
||||
.um-actions{display:flex;gap:6px;flex-shrink:0}
|
||||
.um-btn{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--bd);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
|
||||
.um-btn.edit:active{background:var(--s3);border-color:var(--gold)}
|
||||
.um-btn.del:active{background:rgba(240,64,64,.1);border-color:var(--red)}
|
||||
.um-name-input{background:var(--s2);border:1px solid var(--gold);border-radius:9px;padding:7px 11px;font-family:'Oxanium',sans-serif;font-size:clamp(13px,3.8vw,15px);font-weight:700;color:var(--gold);caret-color:var(--gold);outline:none;width:100%}
|
||||
.um-av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:var(--s2);border-radius:10px;padding:8px}
|
||||
.um-av-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:7px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
|
||||
.um-av-item.sel{border-color:var(--gold);background:rgba(232,184,75,.12)}
|
||||
.um-av-item:active{transform:scale(.88)}
|
||||
.um-save-row{display:flex;gap:7px}
|
||||
.um-save-btn{flex:1;padding:8px;border:none;border-radius:9px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer}
|
||||
.um-cancel-btn{padding:8px 14px;border:1px solid var(--bd);background:transparent;border-radius:9px;font-size:10px;letter-spacing:2px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* PLAYER SELECT */
|
||||
.ps{position:fixed;inset:0;z-index:170;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.ps-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 14px 20px;gap:10px;overflow:hidden}
|
||||
.ps-half.flip{transform:rotate(180deg)}
|
||||
.ps-half.on0{background:radial-gradient(ellipse 80% 70% at center,rgba(232,184,75,.07) 0%,transparent 70%)}
|
||||
.ps-half.on1{background:radial-gradient(ellipse 80% 70% at center,rgba(75,158,232,.07) 0%,transparent 70%)}
|
||||
.ps-label{font-size:9px;letter-spacing:5px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.ps-sel-display{display:flex;align-items:center;gap:8px;height:32px}
|
||||
.ps-sel-av{font-size:22px;line-height:1}
|
||||
.ps-sel-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);letter-spacing:3px;color:var(--gold)}
|
||||
.ps-sel-name.blue{color:var(--blu)}
|
||||
.ps-sel-empty{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.ps-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:360px}
|
||||
.ps-chip{display:flex;align-items:center;gap:7px;padding:7px 11px;background:var(--s1);border:1.5px solid var(--bd);border-radius:11px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.56,.64,1)}
|
||||
.ps-chip:active{transform:scale(.91)}
|
||||
.ps-chip.sel0{background:rgba(232,184,75,.1);border-color:var(--gold);box-shadow:0 0 12px rgba(232,184,75,.3)}
|
||||
.ps-chip.sel1{background:rgba(75,158,232,.1);border-color:var(--blu);box-shadow:0 0 12px rgba(75,158,232,.3)}
|
||||
.ps-chip.other-taken{opacity:.3;pointer-events:none}
|
||||
.ps-chip-av{font-size:16px;line-height:1}
|
||||
.ps-chip-name{font-size:11px;font-weight:700;color:var(--txt);white-space:nowrap}
|
||||
.ps-chip-elo{font-family:'Bebas Neue',sans-serif;font-size:10px;color:var(--grn);letter-spacing:1px}
|
||||
.ps-div{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--gold),var(--g2),var(--gold),transparent);background-size:200%;animation:dflow 3s linear infinite;position:relative}
|
||||
.ps-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold)}
|
||||
.ps-footer{position:absolute;bottom:0;left:0;right:0;padding:7px 14px clamp(10px,2.5vh,20px);background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent);display:flex;gap:8px;z-index:20}
|
||||
.ps-go{flex:1;padding:13px;border:none;border-radius:13px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:6px;cursor:pointer;transition:all .2s;text-transform:uppercase}
|
||||
.ps-go.ready{color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold));background-size:250%;box-shadow:0 4px 28px rgba(232,184,75,.5);animation:shimmer 3s ease-in-out infinite}
|
||||
.ps-go.wait{color:var(--dim);background:var(--s2)}
|
||||
.ps-back{padding:13px 16px;border:1px solid var(--bd);background:transparent;border-radius:13px;font-size:11px;letter-spacing:2px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* STREAK */
|
||||
.streak-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(240,64,64,.1);border:1px solid rgba(240,64,64,.3);border-radius:10px;padding:2px 7px;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:2px;color:var(--red);animation:str-pulse 1.8s ease-in-out infinite alternate}
|
||||
@keyframes str-pulse{from{box-shadow:0 0 3px rgba(240,64,64,.2)}to{box-shadow:0 0 10px rgba(240,64,64,.5)}}
|
||||
.chaos-lbl{font-size:8px;letter-spacing:3px;color:var(--pur);text-transform:uppercase;animation:cpulse .8s ease-in-out infinite alternate}
|
||||
@keyframes cpulse{from{opacity:.4}to{opacity:1}}
|
||||
.p-av{font-size:clamp(16px,4.5vw,22px);line-height:1}
|
||||
|
||||
/* TOGGLE CHAOS */
|
||||
.toggle.chaos.on{background:var(--pur);border-color:var(--pur)}
|
||||
.toggle.chaos.on .toggle-knob{box-shadow:0 0 8px rgba(168,85,247,.8)}
|
||||
|
||||
/* TIME CHART */
|
||||
.chart-wrap{width:100%;max-width:320px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:9px 12px}
|
||||
.chart-ttl{font-size:8px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:6px;text-align:center}
|
||||
.chart-leg{display:flex;gap:14px;justify-content:center;margin-top:5px}
|
||||
.chart-li{display:flex;align-items:center;gap:4px;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.chart-ld{width:8px;height:8px;border-radius:50%}
|
||||
.end-elo{font-size:9px;letter-spacing:2px}
|
||||
.end-elo.pos{color:var(--grn)}
|
||||
.end-elo.neg{color:var(--red)}
|
||||
|
||||
/* PROFILE SCREEN */
|
||||
.prf{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.prf-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.prf-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.prf-save-btn{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));border:none;border-radius:9px;padding:7px 14px;cursor:pointer}
|
||||
.prf-body{flex:1;overflow-y:auto;padding:14px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.prf-body::-webkit-scrollbar{display:none}
|
||||
.prf-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:12px}
|
||||
.prf-card-title{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
|
||||
.prf-top-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
|
||||
.prf-av-btn{font-size:26px;line-height:1;width:50px;height:50px;border-radius:12px;background:var(--s2);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s}
|
||||
.prf-av-btn.open{border-color:var(--gold)}
|
||||
.prf-name-col{flex:1;display:flex;flex-direction:column;gap:5px}
|
||||
.prf-name-input{background:var(--s2);border:1px solid var(--bd);border-radius:9px;padding:8px 11px;font-family:'Oxanium',sans-serif;font-size:clamp(13px,3.8vw,16px);font-weight:700;color:var(--gold);caret-color:var(--gold);outline:none;width:100%;transition:border-color .2s}
|
||||
.prf-name-input:focus{border-color:var(--gold)}
|
||||
.prf-name-hint{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.prf-stats-row{display:flex;gap:7px;margin-bottom:10px}
|
||||
.prf-stat-box{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
|
||||
.prf-stat-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);color:var(--gold);letter-spacing:2px}
|
||||
.prf-stat-val.green{color:var(--grn)}
|
||||
.prf-stat-val.red{color:var(--red)}
|
||||
.prf-stat-lbl{font-size:7px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.prf-av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:var(--s2);border-radius:10px;padding:8px;margin-bottom:8px}
|
||||
.prf-av-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:7px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
|
||||
.prf-av-item.sel{border-color:var(--gold);background:rgba(232,184,75,.12)}
|
||||
.prf-av-item:active{transform:scale(.88)}
|
||||
.prf-reset-btn{width:100%;padding:8px;border:1px solid rgba(240,64,64,.3);background:transparent;border-radius:9px;font-size:10px;letter-spacing:2px;color:rgba(240,64,64,.6);cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.prf-reset-btn:active{background:rgba(240,64,64,.1);border-color:var(--red)}
|
||||
|
||||
/* CUBE PREP SCREEN */
|
||||
.prep{position:fixed;inset:0;z-index:180;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,22px);padding:20px;animation:cfg-in .4s cubic-bezier(.16,1,.3,1) both}
|
||||
.prep::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 40%,rgba(75,158,232,.05) 0%,transparent 70%);pointer-events:none}
|
||||
.prep-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,6vw,34px);letter-spacing:7px;background:linear-gradient(135deg,var(--g2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;background-size:200%;animation:shimmer 3s ease-in-out infinite}
|
||||
.prep-sub{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;text-align:center}
|
||||
.prep-players{display:flex;gap:14px;align-items:flex-start;width:100%}
|
||||
.prep-p-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1}
|
||||
.prep-p-name{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;text-align:center}
|
||||
.prep-scramble{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
|
||||
.prep-move{font-family:'Bebas Neue',sans-serif;font-size:clamp(10px,2.8vw,13px);color:var(--gold);background:var(--s2);border:1px solid var(--bd);border-radius:5px;padding:2px 5px;min-width:22px;text-align:center}
|
||||
.prep-countdown{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,14vw,86px);color:var(--blu);text-shadow:0 0 40px rgba(75,158,232,.6);letter-spacing:-2px;animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.prep-ready-btn{padding:13px 34px;border:none;border-radius:13px;font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,18px);letter-spacing:6px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 28px rgba(232,184,75,.5);transition:transform .18s}
|
||||
.prep-ready-btn:active{transform:scale(.95)}
|
||||
.prep-skip{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
||||
|
||||
/* SOLO CS TIMER */
|
||||
.scs{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg)}
|
||||
.scs-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,14px);position:relative;overflow:hidden;cursor:pointer;transition:background .3s}
|
||||
.scs-panel.flip{transform:rotate(180deg)}
|
||||
.scs-panel.idle-bg{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.7) 0%,rgba(6,10,14,.98) 70%)}
|
||||
.scs-panel.hold-bg{animation:scs-hbg .8s ease-in-out infinite alternate}
|
||||
@keyframes scs-hbg{from{background:radial-gradient(ellipse 65% 65% at center,rgba(10,110,44,.85) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 88% 88% at center,rgba(14,150,58,.9) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.run-bg{animation:scs-rbg .4s ease-in-out infinite alternate}
|
||||
@keyframes scs-rbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(140,20,20,.9) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 90% 90% at center,rgba(180,28,28,.95) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.stop-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-panel.win-bg{animation:scs-wbg .6s ease-in-out infinite alternate}
|
||||
@keyframes scs-wbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(10,120,48,.9) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 95% 95% at center,rgba(16,160,64,.95) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.lose-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-state{font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,3vw,14px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1}
|
||||
.scs-state.blu{color:#7ec8ff;text-shadow:0 0 20px rgba(100,180,255,1)}
|
||||
.scs-state.grn{color:#7affc0;text-shadow:0 0 20px rgba(80,255,160,1)}
|
||||
.scs-state.red{color:#ff8080;text-shadow:0 0 20px rgba(255,100,100,1)}
|
||||
.scs-state.gold{color:var(--g2);text-shadow:0 0 20px rgba(255,217,122,.9)}
|
||||
.scs-state.dim{color:rgba(200,216,232,.5)}
|
||||
.scs-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,14vw,90px);letter-spacing:-2px;line-height:1;position:relative;z-index:1;transition:color .2s,text-shadow .2s}
|
||||
.scs-time.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,.9)}
|
||||
.scs-time.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-time.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1);animation:runpulse .35s ease-in-out infinite alternate}
|
||||
.scs-time.stop{color:rgba(200,216,232,.5)}
|
||||
.scs-time.win{color:#80ffbe;text-shadow:0 0 60px rgba(80,255,160,1);animation:wbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-time.lose{color:rgba(200,216,232,.25)}
|
||||
.scs-hint{font-size:clamp(9px,2.2vw,11px);letter-spacing:3px;color:rgba(200,216,232,.7);text-transform:uppercase;position:relative;z-index:1;font-weight:600}
|
||||
.scs-ring{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
|
||||
.scs-name{display:flex;align-items:center;gap:7px;position:relative;z-index:1}
|
||||
.scs-av{font-size:clamp(16px,4.5vw,22px);line-height:1}
|
||||
.scs-plbl{font-size:9px;letter-spacing:5px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.scs-win-lbl{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,22px);letter-spacing:5px;color:#80ffbe;text-shadow:0 0 24px rgba(80,255,160,.9);position:relative;z-index:1}
|
||||
.scs-div{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--gold),var(--g2),var(--gold),transparent);background-size:200%;animation:dflow 3s linear infinite;position:relative}
|
||||
.scs-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold)}
|
||||
.scs-footer{position:absolute;bottom:0;left:0;right:0;padding:6px 14px clamp(8px,2vh,18px);background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent);display:flex;justify-content:center;gap:10px;z-index:30}
|
||||
.scs-reset{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.scs-reset:active{color:var(--gold);border-color:var(--g3);transform:scale(.92)}
|
||||
.scs-close{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.scs-close:active{color:var(--red);border-color:var(--red);transform:scale(.92)}
|
||||
|
||||
/* SOLO ONE-PLAYER MODE */
|
||||
.scs-solo{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg)}
|
||||
.scs-solo-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.5vh,18px);position:relative;overflow:hidden;cursor:pointer;transition:background .3s}
|
||||
.scs-solo-panel.idle-bg{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.7) 0%,rgba(6,10,14,.98) 70%)}
|
||||
.scs-solo-panel.hold-bg,.scs-solo-panel.ready-bg{animation:scs-hbg .8s ease-in-out infinite alternate}
|
||||
.scs-solo-panel.run-bg{animation:scs-rbg .4s ease-in-out infinite alternate}
|
||||
.scs-solo-panel.stop-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-solo-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(72px,20vw,130px);letter-spacing:-4px;line-height:1;position:relative;z-index:1;transition:color .2s,text-shadow .2s}
|
||||
.scs-solo-time.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,.9)}
|
||||
.scs-solo-time.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-solo-time.ready{color:#ffffff;text-shadow:0 0 60px rgba(80,255,160,1);animation:wbreathe .4s ease-in-out infinite alternate}
|
||||
.scs-solo-time.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1)}
|
||||
.scs-solo-time.stop{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,.8)}
|
||||
.scs-solo-state{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.5vw,16px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1}
|
||||
.scs-solo-state.blu{color:#7ec8ff;text-shadow:0 0 20px rgba(100,180,255,1)}
|
||||
.scs-solo-state.grn{color:#7affc0;text-shadow:0 0 20px rgba(80,255,160,1)}
|
||||
.scs-solo-state.wht{color:#ffffff;text-shadow:0 0 20px rgba(255,255,255,.8)}
|
||||
.scs-solo-state.red{color:#ff8080;text-shadow:0 0 20px rgba(255,100,100,1)}
|
||||
.scs-solo-state.gold{color:var(--g2);text-shadow:0 0 20px rgba(255,217,122,.9)}
|
||||
.scs-solo-hint{font-size:clamp(10px,2.5vw,12px);letter-spacing:3px;color:rgba(200,216,232,.65);text-transform:uppercase;position:relative;z-index:1;font-weight:600}
|
||||
.scs-solo-history{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;align-items:center;width:100%;max-width:280px}
|
||||
.scs-solo-hist-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:3px 10px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.07)}
|
||||
.scs-solo-hist-n{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;width:30px}
|
||||
.scs-solo-hist-t{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;color:var(--gold)}
|
||||
.scs-solo-hist-t.best{color:#80ffbe}
|
||||
.scs-solo-best{display:flex;gap:10px;align-items:center;position:relative;z-index:1}
|
||||
.scs-solo-best-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.scs-solo-best-val{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;color:#80ffbe}
|
||||
.scs-mode-toggle{display:flex;background:var(--s2);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
|
||||
.scs-mode-btn{padding:7px 14px;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);cursor:pointer;transition:all .2s}
|
||||
.scs-mode-btn.active{background:var(--s3);color:var(--gold)}
|
||||
`;
|
||||
|
||||
/* ══ HELPERS ══ */
|
||||
const fmt = s => Math.floor(Math.abs(s)/60).toString().padStart(2,"0")+":"+Math.floor(Math.abs(s)%60).toString().padStart(2,"0");
|
||||
@@ -2214,7 +1699,7 @@ function GameScreen({initTime,inc,sct,timeLabel,onBack,onGameEnd,rules,playerNam
|
||||
}
|
||||
|
||||
/* ══ ROOT ══ */
|
||||
function App(){
|
||||
function ChessClockApp(){
|
||||
|
||||
// Set favicon
|
||||
useEffect(()=>{
|
||||
@@ -2306,7 +1791,6 @@ function App(){
|
||||
|
||||
return(
|
||||
<div className="app">
|
||||
<style>{CSS}</style>
|
||||
{showUsers&&<UserManagerScreen users={users} onSave={saveUsers} onClose={()=>setShowUsers(false)}/>}
|
||||
{showHist&&<HistoryScreen history={history} onClose={()=>setShowHist(false)} onClear={()=>setHistory([])}/>}
|
||||
{showTrn&&<TournamentScreen onClose={()=>setShowTrn(false)} onStartMatch={startTournamentMatch}/>}
|
||||
@@ -2338,8 +1822,14 @@ function App(){
|
||||
);
|
||||
}
|
||||
|
||||
document.getElementById("boot-status")?.remove();
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(<App />);
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<ChessClockApp />
|
||||
</StrictMode>,
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
29
README.md
Executable file
29
README.md
Executable file
@@ -0,0 +1,29 @@
|
||||
# Chess Clock
|
||||
|
||||
Projet React/Vite reconstruit a partir d'un ancien fichier HTML monolithique.
|
||||
|
||||
## Scripts
|
||||
|
||||
- `npm install`
|
||||
- `npm run dev`
|
||||
- `npm run build`
|
||||
- `npm run preview`
|
||||
|
||||
## Ouverture
|
||||
|
||||
- Double-clic sur `index.html` : mode autonome direct dans le navigateur via CDN React/Babel
|
||||
- Serveur Vite : le meme `index.html` bascule automatiquement sur l'entree `src/main.jsx`
|
||||
|
||||
## Structure
|
||||
|
||||
- `index.html` : shell HTML minimal
|
||||
- `src/main.jsx` : point d'entree React
|
||||
- `src/App.jsx` : wrapper d'application
|
||||
- `src/features/chess-clock/ChessClockApp.jsx` : logique de l'horloge et ecrans associes
|
||||
- `src/features/chess-clock/ChessClockStandalone.jsx` : entree autonome pour ouverture directe du fichier HTML
|
||||
- `src/features/chess-clock/chessClock.css` : styles extraits du HTML initial
|
||||
- `legacy/ChessClock.legacy.html` : archive du fichier HTML d'origine
|
||||
|
||||
## Notes
|
||||
|
||||
Le nettoyage a separe l'enveloppe HTML, les styles et la logique React sans changer volontairement le comportement metier. Le composant principal reste encore volumineux, mais il est maintenant place dans une structure de projet standard et pret a etre decoupe plus finement si besoin.
|
||||
1835
index.html
Executable file
1835
index.html
Executable file
File diff suppressed because one or more lines are too long
2345
legacy/ChessClock.legacy.html
Executable file
2345
legacy/ChessClock.legacy.html
Executable file
File diff suppressed because one or more lines are too long
19
package.json
Executable file
19
package.json
Executable file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "chess-clock",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "19.1.1",
|
||||
"react-dom": "19.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "5.0.2",
|
||||
"vite": "7.1.5"
|
||||
}
|
||||
}
|
||||
5
src/App.jsx
Executable file
5
src/App.jsx
Executable file
@@ -0,0 +1,5 @@
|
||||
import ChessClockApp from "./features/chess-clock/ChessClockApp.jsx";
|
||||
|
||||
export default function App() {
|
||||
return <ChessClockApp />;
|
||||
}
|
||||
1785
src/features/chess-clock/ChessClockApp.jsx
Executable file
1785
src/features/chess-clock/ChessClockApp.jsx
Executable file
File diff suppressed because one or more lines are too long
1793
src/features/chess-clock/ChessClockStandalone.jsx
Executable file
1793
src/features/chess-clock/ChessClockStandalone.jsx
Executable file
File diff suppressed because one or more lines are too long
536
src/features/chess-clock/chessClock.css
Executable file
536
src/features/chess-clock/chessClock.css
Executable file
@@ -0,0 +1,536 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oxanium:wght@400;600;700;800&display=swap');
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{
|
||||
--bg:#060a0e;--s1:#0d1218;--s2:#131b24;--s3:#1c2632;--bd:#263040;
|
||||
--gold:#e8b84b;--g2:#ffd97a;--g3:#7a5c1e;
|
||||
--red:#f04040;--grn:#38e878;--blu:#4b9ee8;--pur:#a855f7;
|
||||
--txt:#c8d8e8;--dim:#3e5060;
|
||||
}
|
||||
html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);
|
||||
-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
|
||||
.app{width:100vw;height:100dvh;display:flex;flex-direction:column;
|
||||
font-family:'Oxanium',sans-serif;background:var(--bg);position:relative;overflow:hidden;
|
||||
animation:app-in .5s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes app-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
|
||||
.app::before{content:'';position:fixed;inset:-20%;width:140%;height:140%;
|
||||
background:radial-gradient(ellipse 60% 40% at 30% 10%,rgba(232,184,75,.07) 0%,transparent 70%),
|
||||
radial-gradient(ellipse 50% 50% at 70% 90%,rgba(75,158,232,.05) 0%,transparent 70%);
|
||||
pointer-events:none;z-index:0;animation:mesh 14s ease-in-out infinite alternate}
|
||||
@keyframes mesh{from{transform:translate(0,0)}to{transform:translate(2%,1%)}}
|
||||
.app::after{content:'';position:fixed;inset:0;
|
||||
background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);
|
||||
pointer-events:none;z-index:999;opacity:.35}
|
||||
@keyframes shimmer{0%,100%{background-position:0%}50%{background-position:100%}}
|
||||
@keyframes cfg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
|
||||
@keyframes fade-in{from{opacity:0}to{opacity:1}}
|
||||
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
|
||||
|
||||
/* CONFIG */
|
||||
.cfg{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:1;overflow:hidden;animation:cfg-in .45s cubic-bezier(.16,1,.3,1) both}
|
||||
.cfg-hd{padding:clamp(14px,3.5vh,24px) 20px 8px;text-align:center;flex-shrink:0}
|
||||
.cfg-logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,7.5vw,44px);letter-spacing:8px;
|
||||
background:linear-gradient(135deg,var(--g2) 0%,var(--gold) 50%,#b8882b 100%);
|
||||
-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;
|
||||
background-size:200%;animation:shimmer 4s ease-in-out infinite}
|
||||
.cfg-sub{font-size:9px;letter-spacing:6px;color:var(--dim);text-transform:uppercase;margin-top:3px}
|
||||
.cfg-hd-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;flex-wrap:wrap}
|
||||
.icon-btn{display:flex;align-items:center;gap:5px;background:var(--s1);border:1px solid var(--bd);
|
||||
border-radius:10px;padding:5px 10px;cursor:pointer;transition:all .15s}
|
||||
.icon-btn:active{background:var(--s2);border-color:var(--gold)}
|
||||
.icon-btn-lbl{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.cfg-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px 0;-webkit-overflow-scrolling:touch}
|
||||
.cfg-body::-webkit-scrollbar{display:none}
|
||||
.cfg-section{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin:12px 0 6px 2px}
|
||||
.cfg-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;overflow:hidden;margin-bottom:8px;box-shadow:0 4px 24px rgba(0,0,0,.3)}
|
||||
.cfg-row{display:flex;align-items:center;justify-content:space-between;
|
||||
padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;
|
||||
position:relative;overflow:hidden;transition:background .2s}
|
||||
.cfg-row:last-child{border-bottom:none}
|
||||
.cfg-row:active{background:rgba(232,184,75,.04)}
|
||||
.cfg-row.sel{background:linear-gradient(90deg,rgba(232,184,75,.09),rgba(232,184,75,.03));border-left:2px solid var(--gold)}
|
||||
.cfg-row-lbl{font-weight:600;font-size:clamp(12px,3.5vw,15px);color:var(--txt);transition:color .2s}
|
||||
.cfg-row.sel .cfg-row-lbl{color:var(--g2)}
|
||||
.cfg-chk{color:var(--gold);font-size:15px;opacity:0;transform:scale(0) rotate(-45deg);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
.cfg-row.sel .cfg-chk{opacity:1;transform:scale(1) rotate(0deg)}
|
||||
.cfg-stepper{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
|
||||
.cfg-s-lbl{font-weight:600;font-size:clamp(12px,3.3vw,14px);color:var(--txt)}
|
||||
.cfg-s-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);color:var(--gold);letter-spacing:2px;min-width:36px;text-align:center}
|
||||
.cfg-btns{display:flex;gap:5px}
|
||||
.cfg-btn{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--bd);color:var(--gold);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
|
||||
.cfg-btn:active{background:var(--s3);transform:scale(.88)}
|
||||
.cfg-ft{padding:8px 14px clamp(14px,3.5vh,24px);flex-shrink:0}
|
||||
.start-btn{width:100%;padding:clamp(14px,3.8vw,18px);border:none;border-radius:14px;font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,20px);letter-spacing:7px;color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold),var(--g2),var(--g3));background-size:250%;cursor:pointer;box-shadow:0 4px 28px rgba(232,184,75,.5),inset 0 1px 0 rgba(255,255,255,.2);text-transform:uppercase;transition:transform .18s cubic-bezier(.34,1.56,.64,1);animation:shimmer 3s ease-in-out infinite}
|
||||
.start-btn:active{transform:scale(.96)}
|
||||
.cfg-custom{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:1px dashed var(--g3);border-radius:12px;padding:11px 16px;margin-bottom:8px;cursor:pointer;transition:background .15s,border-color .15s}
|
||||
.cfg-custom:active{background:var(--s2);border-color:var(--gold)}
|
||||
.cfg-custom.c-on{border-style:solid;border-color:var(--gold);background:rgba(232,184,75,.06)}
|
||||
.cfg-c-main{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,3.8vw,18px);letter-spacing:3px;color:var(--gold)}
|
||||
.cfg-c-detail{font-size:9px;letter-spacing:1px;color:var(--dim);margin-top:2px}
|
||||
.cfg-c-arrow{font-size:17px;color:var(--dim)}
|
||||
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
|
||||
.toggle-row:last-child{border-bottom:none}
|
||||
.toggle-lbl{display:flex;flex-direction:column;gap:2px}
|
||||
.toggle-name{font-weight:600;font-size:clamp(11px,3.2vw,13px);color:var(--txt)}
|
||||
.toggle-desc{font-size:9px;letter-spacing:1px;color:var(--dim)}
|
||||
.toggle{width:40px;height:22px;border-radius:11px;background:var(--s3);border:1px solid var(--bd);position:relative;cursor:pointer;transition:background .25s,border-color .25s;flex-shrink:0}
|
||||
.toggle.on{background:var(--grn);border-color:var(--grn)}
|
||||
.toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
|
||||
.toggle.on .toggle-knob{left:20px;background:#fff;box-shadow:0 0 8px rgba(56,232,120,.6)}
|
||||
|
||||
/* MODAL */
|
||||
.modal-bg{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fade-in .2s ease-out}
|
||||
.modal{width:100%;max-width:480px;background:var(--s1);border-radius:22px 22px 0 0;border-top:1px solid var(--bd);padding:0 0 clamp(18px,4.5vh,32px);animation:modal-in .28s cubic-bezier(.34,1.4,.64,1)}
|
||||
@keyframes modal-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
|
||||
.modal-handle{width:40px;height:4px;background:var(--bd);border-radius:2px;margin:12px auto 0}
|
||||
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,20px);letter-spacing:5px;color:var(--gold);text-align:center;padding:12px 18px 3px}
|
||||
.modal-sub{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;text-align:center;margin-bottom:14px}
|
||||
.modal-fields{display:flex;gap:8px;padding:0 14px;margin-bottom:14px}
|
||||
.modal-field{flex:1;display:flex;flex-direction:column;gap:5px}
|
||||
.modal-f-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;padding-left:2px}
|
||||
.modal-spin{display:flex;align-items:center;background:var(--s2);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
|
||||
.modal-sb{width:38px;height:46px;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--gold);cursor:pointer;flex-shrink:0;transition:background .12s}
|
||||
.modal-sb:active{background:var(--s3)}
|
||||
.modal-sv{flex:1;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:clamp(19px,5vw,24px);color:var(--txt);letter-spacing:2px}
|
||||
.modal-su{font-size:8px;letter-spacing:2px;color:var(--dim);text-align:center;margin-top:2px}
|
||||
.modal-prev{margin:0 14px 12px;background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between}
|
||||
.modal-prev-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.modal-prev-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,3.8vw,18px);color:var(--gold);letter-spacing:2px}
|
||||
.modal-actions{display:flex;flex-direction:column;gap:7px;padding:0 14px}
|
||||
.modal-ok{width:100%;padding:12px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 20px rgba(232,184,75,.4);transition:filter .15s}
|
||||
.modal-ok:active{filter:brightness(.88)}
|
||||
.modal-cancel{width:100%;padding:9px;border:none;background:transparent;font-size:10px;letter-spacing:3px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* GAME */
|
||||
.game{width:100%;height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
|
||||
.panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;gap:clamp(5px,1.5vh,10px);overflow:hidden;transition:opacity .3s,filter .3s}
|
||||
.panel.flip{transform:rotate(180deg)}
|
||||
.panel.on{opacity:1}
|
||||
.panel.on::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,184,75,.10) 0%,rgba(232,184,75,.02) 40%,transparent 70%);pointer-events:none;animation:sweep 2.4s ease-in-out infinite alternate}
|
||||
@keyframes sweep{from{opacity:.6}to{opacity:1}}
|
||||
.panel.off{opacity:.38;filter:brightness(.7)}
|
||||
.panel.dng{animation:dng .55s ease-in-out infinite}
|
||||
@keyframes dng{0%,100%{background:transparent}30%{background:rgba(240,64,64,.16)}60%{background:rgba(240,64,64,.06)}}
|
||||
.panel.pf{animation:pfx .25s ease-in-out 3}
|
||||
@keyframes pfx{0%,100%{background:transparent}50%{background:rgba(168,85,247,.22)}}
|
||||
.p-ripple{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,75,.22) 0%,transparent 70%);transform:scale(0);pointer-events:none;animation:ripple .55s cubic-bezier(.2,.8,.3,1) forwards}
|
||||
@keyframes ripple{from{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}
|
||||
.p-label{font-size:9px;letter-spacing:6px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.clock{font-family:'Bebas Neue',sans-serif;font-size:clamp(58px,16vw,106px);letter-spacing:-3px;color:var(--gold);line-height:1;text-shadow:0 0 30px rgba(232,184,75,.45),0 0 70px rgba(232,184,75,.15);position:relative;z-index:1;transition:color .3s,text-shadow .3s}
|
||||
.clock.dng{color:var(--red);text-shadow:0 0 20px rgba(240,64,64,.8),0 0 50px rgba(240,64,64,.4);animation:glitch 1.4s steps(1) infinite}
|
||||
@keyframes glitch{0%,89%,100%{transform:translate(0,0)}90%{transform:translate(3px,0)}92%{transform:translate(-3px,0)}94%{transform:translate(0,0)}}
|
||||
.sonar{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(232,184,75,.7);animation:sonar 1.4s ease-out infinite}
|
||||
@keyframes sonar{0%{box-shadow:0 0 0 0 rgba(232,184,75,.8);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(232,184,75,0);transform:scale(1.15)}100%{box-shadow:0 0 0 0 rgba(232,184,75,0);transform:scale(1)}}
|
||||
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:190px}
|
||||
.dot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(122,92,30,.6);background:transparent;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s}
|
||||
.dot.f{background:var(--gold);border-color:var(--gold);box-shadow:0 0 6px rgba(232,184,75,.7);transform:scale(1.15);animation:dpop .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
@keyframes dpop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.4)}100%{transform:scale(1.15);opacity:1}}
|
||||
.dot.t{border-color:rgba(240,64,64,.5)}
|
||||
.dot.f.t{background:var(--red);border-color:var(--red);animation:tstrobe .45s ease-in-out infinite alternate}
|
||||
@keyframes tstrobe{from{box-shadow:0 0 4px rgba(240,64,64,.5);transform:scale(1.1)}to{box-shadow:0 0 14px rgba(240,64,64,1);transform:scale(1.3)}}
|
||||
.pen-badge{background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.45);border-radius:18px;padding:2px 9px;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:2px;color:var(--pur)}
|
||||
.mt-wrap{width:75%;max-width:160px;height:3px;background:var(--bd);border-radius:2px;overflow:hidden}
|
||||
.mt-bar{height:100%;border-radius:2px;transition:width .1s linear;background:linear-gradient(90deg,var(--grn),var(--gold))}
|
||||
.mt-bar.warn{background:linear-gradient(90deg,var(--gold),var(--red))}
|
||||
.mt-bar.crit{background:var(--red);animation:crit .3s steps(1) infinite}
|
||||
@keyframes crit{0%,100%{opacity:1}50%{opacity:.45}}
|
||||
.pen-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--pur),transparent);animation:pb-fl .3s ease-in-out 3}
|
||||
@keyframes pb-fl{0%,100%{opacity:0}50%{opacity:1}}
|
||||
.div{height:3px;background:linear-gradient(90deg,transparent 0%,rgba(122,92,30,.4) 10%,var(--gold) 30%,var(--g2) 50%,var(--gold) 70%,rgba(122,92,30,.4) 90%,transparent 100%);background-size:200%;position:relative;z-index:10;flex-shrink:0;box-shadow:0 0 18px rgba(232,184,75,.4);animation:dflow 3s linear infinite}
|
||||
@keyframes dflow{from{background-position:0%}to{background-position:200%}}
|
||||
.div-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;z-index:20;pointer-events:none}
|
||||
.div-badge{background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--gold);white-space:nowrap;box-shadow:0 0 12px rgba(232,184,75,.25)}
|
||||
.div-sub{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:1px 7px;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;white-space:nowrap}
|
||||
.win-btn{position:absolute;top:50%;z-index:30;cursor:pointer;transform:translateY(-50%);transition:all .2s cubic-bezier(.34,1.56,.64,1)}
|
||||
.win-btn.wl{left:8px}
|
||||
.win-btn.wr{right:8px}
|
||||
.win-btn-inner{background:var(--s2);border:1.5px solid var(--bd);border-radius:10px;padding:5px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .2s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
|
||||
.win-btn:active .win-btn-inner{transform:scale(.9)}
|
||||
.win-btn.pnd .win-btn-inner{background:rgba(232,184,75,.12);border-color:var(--gold);animation:wbp .5s ease-in-out infinite alternate}
|
||||
@keyframes wbp{from{box-shadow:0 0 8px rgba(232,184,75,.3)}to{box-shadow:0 0 22px rgba(232,184,75,.7)}}
|
||||
.win-btn-ico{font-size:12px;line-height:1}
|
||||
.win-btn-lbl{font-family:'Bebas Neue',sans-serif;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;white-space:nowrap}
|
||||
.win-btn.pnd .win-btn-lbl{color:var(--gold)}
|
||||
.win-btn.flip2{transform:translateY(-50%) rotate(180deg)}
|
||||
.ctrls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;padding:7px 14px clamp(10px,2.5vh,20px);z-index:100;background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent)}
|
||||
.cbtn{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s cubic-bezier(.34,1.56,.64,1)}
|
||||
.cbtn:active{color:var(--gold);border-color:var(--g3);transform:scale(.92)}
|
||||
|
||||
/* CS OVERLAY */
|
||||
.cso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.3vh,9px);z-index:50;overflow:hidden;animation:cso-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes cso-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
|
||||
.cso-bg{position:absolute;inset:0;transition:background .4s}
|
||||
.cso-bg.idle{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.98) 0%,rgba(6,10,14,.99) 70%)}
|
||||
.cso-bg.hold{animation:hbg .9s ease-in-out infinite alternate}
|
||||
@keyframes hbg{from{background:radial-gradient(ellipse 65% 65% at center,rgba(10,110,44,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 88% 88% at center,rgba(14,140,56,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.run{animation:rbg .4s ease-in-out infinite alternate}
|
||||
@keyframes rbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(140,20,20,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 90% 90% at center,rgba(180,28,28,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.stop{background:rgba(6,10,14,.98)}
|
||||
.cso-bg.win{animation:wbg .6s ease-in-out infinite alternate}
|
||||
@keyframes wbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(10,120,48,.98) 0%,rgba(6,10,14,.99) 68%)}to{background:radial-gradient(ellipse 95% 95% at center,rgba(16,160,64,.98) 0%,rgba(6,10,14,.99) 68%)}}
|
||||
.cso-bg.lose{background:rgba(6,10,14,.98)}
|
||||
.cso-lbl{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.2vw,15px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1;font-weight:700}
|
||||
.cso-lbl.blu{color:#7ec8ff;text-shadow:0 0 24px rgba(100,180,255,1),0 0 48px rgba(75,158,232,.6)}
|
||||
.cso-lbl.grn{color:#7affc0;text-shadow:0 0 24px rgba(80,255,160,1),0 0 48px rgba(56,232,120,.6)}
|
||||
.cso-lbl.red{color:#ff8080;text-shadow:0 0 24px rgba(255,100,100,1),0 0 48px rgba(240,64,64,.7)}
|
||||
.cso-lbl.dim{color:rgba(200,216,232,.6)}
|
||||
.cso-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,10.5vw,70px);line-height:1;letter-spacing:-1px;position:relative;z-index:1;transition:color .25s,text-shadow .25s}
|
||||
.cso-t.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,1),0 0 80px rgba(75,158,232,.5)}
|
||||
.cso-t.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1),0 0 100px rgba(56,232,120,.5);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
@keyframes hbreathe{from{transform:scale(.97);filter:brightness(.9)}to{transform:scale(1.05);filter:brightness(1.2)}}
|
||||
.cso-t.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1),0 0 80px rgba(240,64,64,.6);animation:runpulse .35s ease-in-out infinite alternate}
|
||||
@keyframes runpulse{from{filter:brightness(1)}to{filter:brightness(1.3)}}
|
||||
.cso-t.stop{color:rgba(200,216,232,.5)}
|
||||
.cso-t.win{color:#80ffbe;text-shadow:0 0 60px rgba(80,255,160,1),0 0 120px rgba(56,232,120,.7);animation:wbreathe .5s ease-in-out infinite alternate}
|
||||
.cso-t.lose{color:rgba(200,216,232,.3)}
|
||||
@keyframes wbreathe{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.07);filter:brightness(1.25)}}
|
||||
.cso-hint{font-size:clamp(9px,2.2vw,11px);letter-spacing:3px;color:rgba(200,216,232,.75);text-transform:uppercase;position:relative;z-index:1;text-align:center;padding:0 10px;font-weight:600}
|
||||
.cso-win{font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,3.2vw,15px);letter-spacing:6px;color:#80ffbe;text-shadow:0 0 30px rgba(80,255,160,1);position:relative;z-index:1;text-align:center}
|
||||
.cso-ring{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
|
||||
.cso-ring svg{position:absolute;top:0;left:0;overflow:visible}
|
||||
.rb{fill:none;stroke:rgba(255,255,255,.08);stroke-linecap:round}
|
||||
.rf{fill:none;stroke:#80ffbe;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(80,255,160,.9));stroke-dasharray:289;animation:rspin .7s linear infinite}
|
||||
@keyframes rspin{from{stroke-dashoffset:289}to{stroke-dashoffset:0}}
|
||||
.rf2{fill:none;stroke:rgba(80,255,160,.3);stroke-linecap:round;stroke-dasharray:60 229;animation:rspin2 1.4s linear infinite reverse}
|
||||
@keyframes rspin2{from{stroke-dashoffset:0}to{stroke-dashoffset:289}}
|
||||
|
||||
/* DOUBLE MOVE */
|
||||
.dbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,14px);z-index:50;pointer-events:none;animation:dbl-in .4s cubic-bezier(.16,1,.3,1) both}
|
||||
@keyframes dbl-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
|
||||
.dbl-bw{position:absolute;inset:0;background:rgba(3,18,10,.97)}
|
||||
.dbl-bl{position:absolute;inset:0;background:rgba(4,8,14,.97)}
|
||||
.dbl-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,13px);border-radius:20px;padding:clamp(16px,4vh,24px) clamp(20px,6vw,34px)}
|
||||
.dbl-card.win-card{background:rgba(56,232,120,.12);border:1.5px solid rgba(56,232,120,.5);box-shadow:0 0 40px rgba(56,232,120,.15),inset 0 1px 0 rgba(56,232,120,.2)}
|
||||
.dbl-card.lose-card{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);box-shadow:0 4px 24px rgba(0,0,0,.4)}
|
||||
.dbl-icon{font-size:clamp(28px,8vw,40px);line-height:1;filter:drop-shadow(0 0 16px rgba(56,232,120,.8))}
|
||||
.dbl-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,6.5vw,34px);letter-spacing:6px;color:#ffffff;text-transform:uppercase;text-align:center;text-shadow:0 0 30px rgba(56,232,120,.8),0 2px 0 rgba(0,0,0,.6)}
|
||||
.dbl-sub{font-size:11px;letter-spacing:2px;color:rgba(56,232,120,1);text-transform:uppercase;text-align:center;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7);background:rgba(56,232,120,.15);border:1px solid rgba(56,232,120,.4);border-radius:8px;padding:4px 10px}
|
||||
.dbl-pips{display:flex;gap:16px}
|
||||
.dbl-pip{width:20px;height:20px;border-radius:50%;background:var(--grn);box-shadow:0 0 16px rgba(56,232,120,.9),0 2px 6px rgba(0,0,0,.5);animation:psonar 1s ease-out infinite}
|
||||
.dbl-pip:nth-child(2){animation-delay:.5s}
|
||||
@keyframes psonar{0%{box-shadow:0 0 0 0 rgba(56,232,120,.9),0 2px 6px rgba(0,0,0,.5)}70%{box-shadow:0 0 0 14px rgba(56,232,120,0),0 2px 6px rgba(0,0,0,.5)}100%{box-shadow:0 0 0 0 rgba(56,232,120,0),0 2px 6px rgba(0,0,0,.5)}}
|
||||
.dbl-pip.used{background:rgba(255,255,255,.2);box-shadow:none;animation:none;transform:scale(.65);opacity:.35;transition:all .35s cubic-bezier(.34,1.56,.64,1)}
|
||||
.dbl-hint{font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.7)}
|
||||
.dbl-wait-ico{font-size:clamp(22px,6.5vw,32px);line-height:1;opacity:.6}
|
||||
.dbl-wait-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);letter-spacing:5px;color:#ffffff;text-transform:uppercase;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:.9}
|
||||
.dbl-wait-sub{font-size:11px;letter-spacing:2px;color:rgba(200,216,232,.65);text-transform:uppercase;text-align:center;font-weight:600}
|
||||
.dbl-challenge{font-size:11px;letter-spacing:2px;color:#ffffff;text-transform:uppercase;text-align:center;padding:8px 16px;background:rgba(168,85,247,.4);border:1.5px solid rgba(168,85,247,.8);border-radius:11px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.6);box-shadow:0 0 20px rgba(168,85,247,.5);animation:wfade 1s ease-in-out infinite alternate}
|
||||
@keyframes wfade{from{opacity:.8}to{opacity:1}}
|
||||
/* FORBIDDEN MOVE */
|
||||
.forb{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(240,64,64,.08);animation:fade-in .2s ease-out both}
|
||||
.forb-ico{font-size:clamp(28px,8vw,46px);animation:fshake .4s ease-in-out}
|
||||
@keyframes fshake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
|
||||
.forb-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);letter-spacing:5px;color:var(--red);text-align:center}
|
||||
.forb-sub{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;text-align:center;padding:0 14px}
|
||||
|
||||
/* TOURNAMENT */
|
||||
.trn{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.trn-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.trn-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.trn-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||||
.trn-close:active{background:var(--s3)}
|
||||
.trn-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.trn-body::-webkit-scrollbar{display:none}
|
||||
.trn-setup{display:flex;flex-direction:column;gap:14px}
|
||||
.trn-players-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
||||
.trn-player-slot{background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:7px}
|
||||
.trn-p-num{font-family:'Bebas Neue',sans-serif;font-size:17px;color:var(--gold);width:20px;text-align:center}
|
||||
.trn-p-name{font-size:11px;letter-spacing:1px;color:var(--txt);font-weight:600}
|
||||
.trn-size-row{display:flex;gap:7px}
|
||||
.trn-size-btn{flex:1;padding:11px;background:var(--s2);border:1.5px solid var(--bd);border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:3px;color:var(--dim);cursor:pointer;text-align:center;transition:all .2s}
|
||||
.trn-size-btn.sel{background:rgba(232,184,75,.08);border-color:var(--gold);color:var(--gold)}
|
||||
.trn-start-btn{padding:13px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:5px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 20px rgba(232,184,75,.4)}
|
||||
.trn-bracket{display:flex;flex-direction:column;gap:10px}
|
||||
.trn-round-title{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold);text-align:center;margin-bottom:3px}
|
||||
.trn-match{background:var(--s1);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
|
||||
.trn-match.active{border-color:var(--gold);box-shadow:0 0 14px rgba(232,184,75,.2)}
|
||||
.trn-match.done{opacity:.6}
|
||||
.trn-m-row{display:flex;align-items:center;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.04)}
|
||||
.trn-m-row:last-child{border-bottom:none}
|
||||
.trn-m-row.won{background:rgba(232,184,75,.07)}
|
||||
.trn-m-name{flex:1;font-size:12px;font-weight:600;color:var(--txt);letter-spacing:.5px}
|
||||
.trn-m-row.won .trn-m-name{color:var(--g2)}
|
||||
.trn-m-score{font-family:'Bebas Neue',sans-serif;font-size:15px;color:var(--dim);letter-spacing:2px;width:22px;text-align:center}
|
||||
.trn-m-row.won .trn-m-score{color:var(--gold)}
|
||||
.trn-m-play{padding:7px 0;background:rgba(232,184,75,.06);border-top:1px solid var(--bd);text-align:center;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--gold);cursor:pointer}
|
||||
.trn-m-play:active{background:rgba(232,184,75,.12)}
|
||||
.trn-m-tbd{padding:9px 13px;font-size:10px;letter-spacing:2px;color:var(--dim);text-align:center}
|
||||
.trn-winner-banner{background:linear-gradient(135deg,rgba(232,184,75,.12),rgba(232,184,75,.04));border:1px solid var(--gold);border-radius:13px;padding:18px;text-align:center;margin-bottom:14px}
|
||||
.trn-w-ico{font-size:36px;animation:efloat 2s ease-in-out infinite alternate}
|
||||
@keyframes efloat{from{transform:translateY(0)}to{transform:translateY(-8px)}}
|
||||
.trn-w-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,5.5vw,30px);letter-spacing:5px;background:linear-gradient(135deg,var(--g2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:5px}
|
||||
.trn-w-sub{font-size:9px;letter-spacing:3px;color:var(--dim);margin-top:3px}
|
||||
.trn-new-btn{width:100%;padding:12px;border:none;border-radius:11px;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:4px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;margin-top:7px}
|
||||
.trn-p-input{flex:1;background:transparent;border:none;outline:none;font-family:'Oxanium',sans-serif;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.5px;width:0;min-width:0;caret-color:var(--gold)}
|
||||
.trn-p-slot-edit{background:rgba(232,184,75,.07);border-color:var(--g3)}
|
||||
.trn-challenge{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(168,85,247,.1);animation:fade-in .2s ease-out both}
|
||||
.trn-ch-ico{font-size:clamp(24px,7vw,38px);animation:fshake .4s ease-in-out}
|
||||
.trn-ch-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.5vw,18px);letter-spacing:5px;color:var(--pur);text-align:center}
|
||||
.trn-ch-sub{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;text-align:center;padding:0 14px}
|
||||
.dbl-challenge{font-family:'Bebas Neue',sans-serif;font-size:clamp(9px,2.5vw,12px);letter-spacing:3px;color:var(--pur);position:relative;z-index:1;text-transform:uppercase;text-align:center;padding:2px 10px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);border-radius:8px;animation:wfade 1.2s ease-in-out infinite alternate}
|
||||
|
||||
/* HISTORY */
|
||||
.hist{position:fixed;inset:0;z-index:250;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.hist-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.hist-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.hist-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
|
||||
.hist-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.hist-body::-webkit-scrollbar{display:none}
|
||||
.hist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;opacity:.4}
|
||||
.hist-empty-ico{font-size:36px}
|
||||
.hist-empty-lbl{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:4px;color:var(--dim)}
|
||||
.hist-entry{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:11px 13px;margin-bottom:9px;animation:cfg-in .3s cubic-bezier(.16,1,.3,1) both}
|
||||
.hist-entry.w0{border-left:3px solid var(--gold)}
|
||||
.hist-entry.w1{border-left:3px solid var(--blu)}
|
||||
.hist-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
|
||||
.hist-date{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.hist-badge{font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:3px;padding:2px 9px;border-radius:18px}
|
||||
.hist-badge.b0{background:rgba(232,184,75,.15);color:var(--gold);border:1px solid var(--g3)}
|
||||
.hist-badge.b1{background:rgba(75,158,232,.15);color:var(--blu);border:1px solid rgba(75,158,232,.4)}
|
||||
.hist-players{display:flex;gap:7px;margin-bottom:7px}
|
||||
.hist-player{flex:1;background:var(--s2);border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
|
||||
.hist-p-top{display:flex;align-items:center;gap:5px}
|
||||
.hist-p-name{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--txt);flex:1}
|
||||
.hist-p-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);color:var(--gold);letter-spacing:2px;line-height:1}
|
||||
.hist-player.winner .hist-p-time{color:var(--g2)}
|
||||
.hist-p-meta{font-size:8px;letter-spacing:1px;color:var(--dim)}
|
||||
.hist-footer{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
|
||||
.hist-meta{font-size:8px;letter-spacing:2px;color:var(--dim)}
|
||||
.hist-clear{font-size:9px;letter-spacing:2px;color:var(--red);opacity:.6;background:none;border:none;cursor:pointer;font-family:'Oxanium',sans-serif;text-transform:uppercase}
|
||||
|
||||
/* END */
|
||||
.end{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(9px,2.2vh,16px);background:rgba(6,10,14,.97);overflow:hidden}
|
||||
.end::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(232,184,75,.07) 0%,transparent 70%);animation:eburst 2s ease-in-out infinite alternate}
|
||||
@keyframes eburst{from{transform:scale(1);opacity:.7}to{transform:scale(1.15);opacity:1}}
|
||||
.end > *{animation:estag .55s cubic-bezier(.16,1,.3,1) both;position:relative;z-index:1}
|
||||
.end > *:nth-child(1){animation-delay:.0s}.end > *:nth-child(2){animation-delay:.1s}.end > *:nth-child(3){animation-delay:.18s}.end > *:nth-child(4){animation-delay:.26s}.end > *:nth-child(5){animation-delay:.34s}.end > *:nth-child(6){animation-delay:.4s}
|
||||
@keyframes estag{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
|
||||
.end-ico{font-size:clamp(38px,10vw,54px);filter:drop-shadow(0 0 20px rgba(232,184,75,.5));animation:efloat 2s ease-in-out infinite alternate}
|
||||
.end-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,7vw,40px);letter-spacing:7px;background:linear-gradient(135deg,var(--g2),var(--gold),#b8882b);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;animation:shimmer 3s ease-in-out infinite}
|
||||
.end-reason{font-size:10px;letter-spacing:5px;color:var(--dim);text-transform:uppercase}
|
||||
.end-cubes{display:flex;align-items:center;gap:18px}
|
||||
.end-cube-card{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.45;transition:opacity .3s}
|
||||
.end-cube-card.winner{opacity:1}
|
||||
.end-cube-lbl{font-family:'Bebas Neue',sans-serif;font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.end-cube-card.winner .end-cube-lbl{color:var(--gold)}
|
||||
.end-cube-sub{font-size:8px;letter-spacing:1px;color:var(--dim)}
|
||||
.end-stats{display:flex;gap:clamp(14px,4.5vw,24px);flex-wrap:wrap;justify-content:center;background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:clamp(9px,2.2vw,14px) clamp(14px,3.5vw,22px);box-shadow:0 4px 30px rgba(0,0,0,.4)}
|
||||
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
|
||||
.stat-v{font-family:'Bebas Neue',sans-serif;font-size:clamp(18px,5vw,26px);color:var(--gold);letter-spacing:2px}
|
||||
.stat-l{font-size:7px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.end-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
|
||||
.btn1{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:5px;color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold));background-size:200%;border:none;border-radius:11px;padding:13px 26px;cursor:pointer;box-shadow:0 0 26px rgba(232,184,75,.5);animation:shimmer 3s ease-in-out infinite;transition:transform .18s}
|
||||
.btn1:active{transform:scale(.94)}
|
||||
.btn2{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:5px;color:var(--txt);background:var(--s2);border:1px solid var(--bd);border-radius:11px;padding:13px 26px;cursor:pointer;transition:transform .18s,border-color .2s}
|
||||
.btn2:active{transform:scale(.94);border-color:var(--g3)}
|
||||
|
||||
/* RUBIK'S CUBE */
|
||||
.rcube{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;padding:2px;background:var(--s3);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
|
||||
.rcube.sm{width:22px;height:22px;gap:1px;padding:1.5px}
|
||||
.rcube.md{width:30px;height:30px;gap:1.5px;padding:2px}
|
||||
.rcube.lg{width:42px;height:42px;gap:2px;padding:3px}
|
||||
.rc{border-radius:1.5px}
|
||||
.p1c0{background:#e84b4b}.p1c1{background:#e8b84b}.p1c2{background:#38e878}
|
||||
.p1c3{background:#4b9ee8}.p1c4{background:#e8b84b}.p1c5{background:#e84b4b}
|
||||
.p1c6{background:#38e878}.p1c7{background:#4b9ee8}.p1c8{background:#e8b84b}
|
||||
.p2c0{background:#4b9ee8}.p2c1{background:#38e878}.p2c2{background:#e8b84b}
|
||||
.p2c3{background:#e84b4b}.p2c4{background:#4b9ee8}.p2c5{background:#38e878}
|
||||
.p2c6{background:#e8b84b}.p2c7{background:#e84b4b}.p2c8{background:#4b9ee8}
|
||||
|
||||
/* USER MANAGER */
|
||||
.um{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.um-hd{display:flex;align-items:center;gap:8px;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.um-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold);flex:1}
|
||||
.um-add-btn{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));border:none;border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
|
||||
.um-close{width:34px;height:34px;border-radius:50%;background:var(--s2);border:1px solid var(--bd);color:var(--dim);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
|
||||
.um-body{flex:1;overflow-y:auto;padding:12px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.um-body::-webkit-scrollbar{display:none}
|
||||
.um-card{background:var(--s1);border:1px solid var(--bd);border-radius:13px;padding:12px 13px;margin-bottom:9px;display:flex;flex-direction:column;gap:9px;transition:border-color .2s}
|
||||
.um-card.editing{border-color:var(--gold);background:rgba(232,184,75,.04)}
|
||||
.um-row{display:flex;align-items:center;gap:10px}
|
||||
.um-av{font-size:24px;line-height:1;width:44px;height:44px;background:var(--s2);border:1.5px solid var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s}
|
||||
.um-av:active{transform:scale(.9)}
|
||||
.um-av.open{border-color:var(--gold)}
|
||||
.um-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
|
||||
.um-name{font-weight:700;font-size:clamp(13px,3.8vw,15px);color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.um-meta{display:flex;gap:8px;align-items:center}
|
||||
.um-elo{font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--grn);letter-spacing:1px}
|
||||
.um-streak{font-size:10px;color:var(--red)}
|
||||
.um-wins{font-size:10px;color:var(--dim)}
|
||||
.um-actions{display:flex;gap:6px;flex-shrink:0}
|
||||
.um-btn{width:32px;height:32px;border-radius:9px;background:var(--s2);border:1px solid var(--bd);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
|
||||
.um-btn.edit:active{background:var(--s3);border-color:var(--gold)}
|
||||
.um-btn.del:active{background:rgba(240,64,64,.1);border-color:var(--red)}
|
||||
.um-name-input{background:var(--s2);border:1px solid var(--gold);border-radius:9px;padding:7px 11px;font-family:'Oxanium',sans-serif;font-size:clamp(13px,3.8vw,15px);font-weight:700;color:var(--gold);caret-color:var(--gold);outline:none;width:100%}
|
||||
.um-av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:var(--s2);border-radius:10px;padding:8px}
|
||||
.um-av-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:7px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
|
||||
.um-av-item.sel{border-color:var(--gold);background:rgba(232,184,75,.12)}
|
||||
.um-av-item:active{transform:scale(.88)}
|
||||
.um-save-row{display:flex;gap:7px}
|
||||
.um-save-btn{flex:1;padding:8px;border:none;border-radius:9px;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer}
|
||||
.um-cancel-btn{padding:8px 14px;border:1px solid var(--bd);background:transparent;border-radius:9px;font-size:10px;letter-spacing:2px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* PLAYER SELECT */
|
||||
.ps{position:fixed;inset:0;z-index:170;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.ps-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 14px 20px;gap:10px;overflow:hidden}
|
||||
.ps-half.flip{transform:rotate(180deg)}
|
||||
.ps-half.on0{background:radial-gradient(ellipse 80% 70% at center,rgba(232,184,75,.07) 0%,transparent 70%)}
|
||||
.ps-half.on1{background:radial-gradient(ellipse 80% 70% at center,rgba(75,158,232,.07) 0%,transparent 70%)}
|
||||
.ps-label{font-size:9px;letter-spacing:5px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.ps-sel-display{display:flex;align-items:center;gap:8px;height:32px}
|
||||
.ps-sel-av{font-size:22px;line-height:1}
|
||||
.ps-sel-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,20px);letter-spacing:3px;color:var(--gold)}
|
||||
.ps-sel-name.blue{color:var(--blu)}
|
||||
.ps-sel-empty{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.ps-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:360px}
|
||||
.ps-chip{display:flex;align-items:center;gap:7px;padding:7px 11px;background:var(--s1);border:1.5px solid var(--bd);border-radius:11px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.56,.64,1)}
|
||||
.ps-chip:active{transform:scale(.91)}
|
||||
.ps-chip.sel0{background:rgba(232,184,75,.1);border-color:var(--gold);box-shadow:0 0 12px rgba(232,184,75,.3)}
|
||||
.ps-chip.sel1{background:rgba(75,158,232,.1);border-color:var(--blu);box-shadow:0 0 12px rgba(75,158,232,.3)}
|
||||
.ps-chip.other-taken{opacity:.3;pointer-events:none}
|
||||
.ps-chip-av{font-size:16px;line-height:1}
|
||||
.ps-chip-name{font-size:11px;font-weight:700;color:var(--txt);white-space:nowrap}
|
||||
.ps-chip-elo{font-family:'Bebas Neue',sans-serif;font-size:10px;color:var(--grn);letter-spacing:1px}
|
||||
.ps-div{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--gold),var(--g2),var(--gold),transparent);background-size:200%;animation:dflow 3s linear infinite;position:relative}
|
||||
.ps-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold)}
|
||||
.ps-footer{position:absolute;bottom:0;left:0;right:0;padding:7px 14px clamp(10px,2.5vh,20px);background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent);display:flex;gap:8px;z-index:20}
|
||||
.ps-go{flex:1;padding:13px;border:none;border-radius:13px;font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:6px;cursor:pointer;transition:all .2s;text-transform:uppercase}
|
||||
.ps-go.ready{color:var(--bg);background:linear-gradient(110deg,var(--g3),var(--g2),var(--gold));background-size:250%;box-shadow:0 4px 28px rgba(232,184,75,.5);animation:shimmer 3s ease-in-out infinite}
|
||||
.ps-go.wait{color:var(--dim);background:var(--s2)}
|
||||
.ps-back{padding:13px 16px;border:1px solid var(--bd);background:transparent;border-radius:13px;font-size:11px;letter-spacing:2px;color:var(--dim);cursor:pointer;text-transform:uppercase}
|
||||
|
||||
/* STREAK */
|
||||
.streak-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(240,64,64,.1);border:1px solid rgba(240,64,64,.3);border-radius:10px;padding:2px 7px;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:2px;color:var(--red);animation:str-pulse 1.8s ease-in-out infinite alternate}
|
||||
@keyframes str-pulse{from{box-shadow:0 0 3px rgba(240,64,64,.2)}to{box-shadow:0 0 10px rgba(240,64,64,.5)}}
|
||||
.chaos-lbl{font-size:8px;letter-spacing:3px;color:var(--pur);text-transform:uppercase;animation:cpulse .8s ease-in-out infinite alternate}
|
||||
@keyframes cpulse{from{opacity:.4}to{opacity:1}}
|
||||
.p-av{font-size:clamp(16px,4.5vw,22px);line-height:1}
|
||||
|
||||
/* TOGGLE CHAOS */
|
||||
.toggle.chaos.on{background:var(--pur);border-color:var(--pur)}
|
||||
.toggle.chaos.on .toggle-knob{box-shadow:0 0 8px rgba(168,85,247,.8)}
|
||||
|
||||
/* TIME CHART */
|
||||
.chart-wrap{width:100%;max-width:320px;background:var(--s1);border:1px solid var(--bd);border-radius:12px;padding:9px 12px}
|
||||
.chart-ttl{font-size:8px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:6px;text-align:center}
|
||||
.chart-leg{display:flex;gap:14px;justify-content:center;margin-top:5px}
|
||||
.chart-li{display:flex;align-items:center;gap:4px;font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.chart-ld{width:8px;height:8px;border-radius:50%}
|
||||
.end-elo{font-size:9px;letter-spacing:2px}
|
||||
.end-elo.pos{color:var(--grn)}
|
||||
.end-elo.neg{color:var(--red)}
|
||||
|
||||
/* PROFILE SCREEN */
|
||||
.prf{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:var(--bg);animation:cfg-in .35s cubic-bezier(.16,1,.3,1) both}
|
||||
.prf-hd{display:flex;align-items:center;justify-content:space-between;padding:clamp(14px,3.5vh,24px) 18px 10px;border-bottom:1px solid var(--bd);flex-shrink:0}
|
||||
.prf-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);letter-spacing:5px;color:var(--gold)}
|
||||
.prf-save-btn{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:3px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));border:none;border-radius:9px;padding:7px 14px;cursor:pointer}
|
||||
.prf-body{flex:1;overflow-y:auto;padding:14px 14px 36px;-webkit-overflow-scrolling:touch}
|
||||
.prf-body::-webkit-scrollbar{display:none}
|
||||
.prf-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:12px}
|
||||
.prf-card-title{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
|
||||
.prf-top-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
|
||||
.prf-av-btn{font-size:26px;line-height:1;width:50px;height:50px;border-radius:12px;background:var(--s2);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .2s}
|
||||
.prf-av-btn.open{border-color:var(--gold)}
|
||||
.prf-name-col{flex:1;display:flex;flex-direction:column;gap:5px}
|
||||
.prf-name-input{background:var(--s2);border:1px solid var(--bd);border-radius:9px;padding:8px 11px;font-family:'Oxanium',sans-serif;font-size:clamp(13px,3.8vw,16px);font-weight:700;color:var(--gold);caret-color:var(--gold);outline:none;width:100%;transition:border-color .2s}
|
||||
.prf-name-input:focus{border-color:var(--gold)}
|
||||
.prf-name-hint{font-size:8px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.prf-stats-row{display:flex;gap:7px;margin-bottom:10px}
|
||||
.prf-stat-box{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
|
||||
.prf-stat-val{font-family:'Bebas Neue',sans-serif;font-size:clamp(16px,4.5vw,22px);color:var(--gold);letter-spacing:2px}
|
||||
.prf-stat-val.green{color:var(--grn)}
|
||||
.prf-stat-val.red{color:var(--red)}
|
||||
.prf-stat-lbl{font-size:7px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}
|
||||
.prf-av-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:var(--s2);border-radius:10px;padding:8px;margin-bottom:8px}
|
||||
.prf-av-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:17px;border-radius:7px;cursor:pointer;border:1.5px solid transparent;transition:all .15s}
|
||||
.prf-av-item.sel{border-color:var(--gold);background:rgba(232,184,75,.12)}
|
||||
.prf-av-item:active{transform:scale(.88)}
|
||||
.prf-reset-btn{width:100%;padding:8px;border:1px solid rgba(240,64,64,.3);background:transparent;border-radius:9px;font-size:10px;letter-spacing:2px;color:rgba(240,64,64,.6);cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.prf-reset-btn:active{background:rgba(240,64,64,.1);border-color:var(--red)}
|
||||
|
||||
/* CUBE PREP SCREEN */
|
||||
.prep{position:fixed;inset:0;z-index:180;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,22px);padding:20px;animation:cfg-in .4s cubic-bezier(.16,1,.3,1) both}
|
||||
.prep::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 40%,rgba(75,158,232,.05) 0%,transparent 70%);pointer-events:none}
|
||||
.prep-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,6vw,34px);letter-spacing:7px;background:linear-gradient(135deg,var(--g2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;background-size:200%;animation:shimmer 3s ease-in-out infinite}
|
||||
.prep-sub{font-size:9px;letter-spacing:4px;color:var(--dim);text-transform:uppercase;text-align:center}
|
||||
.prep-players{display:flex;gap:14px;align-items:flex-start;width:100%}
|
||||
.prep-p-card{background:var(--s1);border:1px solid var(--bd);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1}
|
||||
.prep-p-name{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;text-align:center}
|
||||
.prep-scramble{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
|
||||
.prep-move{font-family:'Bebas Neue',sans-serif;font-size:clamp(10px,2.8vw,13px);color:var(--gold);background:var(--s2);border:1px solid var(--bd);border-radius:5px;padding:2px 5px;min-width:22px;text-align:center}
|
||||
.prep-countdown{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,14vw,86px);color:var(--blu);text-shadow:0 0 40px rgba(75,158,232,.6);letter-spacing:-2px;animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.prep-ready-btn{padding:13px 34px;border:none;border-radius:13px;font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,18px);letter-spacing:6px;color:var(--bg);background:linear-gradient(135deg,var(--g2),var(--gold));cursor:pointer;box-shadow:0 4px 28px rgba(232,184,75,.5);transition:transform .18s}
|
||||
.prep-ready-btn:active{transform:scale(.95)}
|
||||
.prep-skip{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
||||
|
||||
/* SOLO CS TIMER */
|
||||
.scs{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg)}
|
||||
.scs-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,14px);position:relative;overflow:hidden;cursor:pointer;transition:background .3s}
|
||||
.scs-panel.flip{transform:rotate(180deg)}
|
||||
.scs-panel.idle-bg{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.7) 0%,rgba(6,10,14,.98) 70%)}
|
||||
.scs-panel.hold-bg{animation:scs-hbg .8s ease-in-out infinite alternate}
|
||||
@keyframes scs-hbg{from{background:radial-gradient(ellipse 65% 65% at center,rgba(10,110,44,.85) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 88% 88% at center,rgba(14,150,58,.9) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.run-bg{animation:scs-rbg .4s ease-in-out infinite alternate}
|
||||
@keyframes scs-rbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(140,20,20,.9) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 90% 90% at center,rgba(180,28,28,.95) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.stop-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-panel.win-bg{animation:scs-wbg .6s ease-in-out infinite alternate}
|
||||
@keyframes scs-wbg{from{background:radial-gradient(ellipse 70% 70% at center,rgba(10,120,48,.9) 0%,rgba(6,10,14,.98) 68%)}to{background:radial-gradient(ellipse 95% 95% at center,rgba(16,160,64,.95) 0%,rgba(6,10,14,.98) 68%)}}
|
||||
.scs-panel.lose-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-state{font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,3vw,14px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1}
|
||||
.scs-state.blu{color:#7ec8ff;text-shadow:0 0 20px rgba(100,180,255,1)}
|
||||
.scs-state.grn{color:#7affc0;text-shadow:0 0 20px rgba(80,255,160,1)}
|
||||
.scs-state.red{color:#ff8080;text-shadow:0 0 20px rgba(255,100,100,1)}
|
||||
.scs-state.gold{color:var(--g2);text-shadow:0 0 20px rgba(255,217,122,.9)}
|
||||
.scs-state.dim{color:rgba(200,216,232,.5)}
|
||||
.scs-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,14vw,90px);letter-spacing:-2px;line-height:1;position:relative;z-index:1;transition:color .2s,text-shadow .2s}
|
||||
.scs-time.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,.9)}
|
||||
.scs-time.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-time.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1);animation:runpulse .35s ease-in-out infinite alternate}
|
||||
.scs-time.stop{color:rgba(200,216,232,.5)}
|
||||
.scs-time.win{color:#80ffbe;text-shadow:0 0 60px rgba(80,255,160,1);animation:wbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-time.lose{color:rgba(200,216,232,.25)}
|
||||
.scs-hint{font-size:clamp(9px,2.2vw,11px);letter-spacing:3px;color:rgba(200,216,232,.7);text-transform:uppercase;position:relative;z-index:1;font-weight:600}
|
||||
.scs-ring{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
|
||||
.scs-name{display:flex;align-items:center;gap:7px;position:relative;z-index:1}
|
||||
.scs-av{font-size:clamp(16px,4.5vw,22px);line-height:1}
|
||||
.scs-plbl{font-size:9px;letter-spacing:5px;color:var(--dim);text-transform:uppercase;font-weight:700}
|
||||
.scs-win-lbl{font-family:'Bebas Neue',sans-serif;font-size:clamp(14px,4vw,22px);letter-spacing:5px;color:#80ffbe;text-shadow:0 0 24px rgba(80,255,160,.9);position:relative;z-index:1}
|
||||
.scs-div{height:3px;flex-shrink:0;background:linear-gradient(90deg,transparent,var(--gold),var(--g2),var(--gold),transparent);background-size:200%;animation:dflow 3s linear infinite;position:relative}
|
||||
.scs-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);border:1.5px solid var(--gold);border-radius:20px;padding:3px 13px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:4px;color:var(--gold)}
|
||||
.scs-footer{position:absolute;bottom:0;left:0;right:0;padding:6px 14px clamp(8px,2vh,18px);background:linear-gradient(to top,rgba(6,10,14,.98) 55%,transparent);display:flex;justify-content:center;gap:10px;z-index:30}
|
||||
.scs-reset{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.scs-reset:active{color:var(--gold);border-color:var(--g3);transform:scale(.92)}
|
||||
.scs-close{font-family:'Oxanium',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--dim);background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:8px 13px;cursor:pointer;text-transform:uppercase;transition:all .2s}
|
||||
.scs-close:active{color:var(--red);border-color:var(--red);transform:scale(.92)}
|
||||
|
||||
/* SOLO ONE-PLAYER MODE */
|
||||
.scs-solo{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--bg)}
|
||||
.scs-solo-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.5vh,18px);position:relative;overflow:hidden;cursor:pointer;transition:background .3s}
|
||||
.scs-solo-panel.idle-bg{background:radial-gradient(ellipse 70% 70% at center,rgba(20,55,130,.7) 0%,rgba(6,10,14,.98) 70%)}
|
||||
.scs-solo-panel.hold-bg,.scs-solo-panel.ready-bg{animation:scs-hbg .8s ease-in-out infinite alternate}
|
||||
.scs-solo-panel.run-bg{animation:scs-rbg .4s ease-in-out infinite alternate}
|
||||
.scs-solo-panel.stop-bg{background:rgba(6,10,14,.98)}
|
||||
.scs-solo-time{font-family:'Bebas Neue',sans-serif;font-size:clamp(72px,20vw,130px);letter-spacing:-4px;line-height:1;position:relative;z-index:1;transition:color .2s,text-shadow .2s}
|
||||
.scs-solo-time.idle{color:#90d4ff;text-shadow:0 0 40px rgba(100,190,255,.9)}
|
||||
.scs-solo-time.hold{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,1);animation:hbreathe .5s ease-in-out infinite alternate}
|
||||
.scs-solo-time.ready{color:#ffffff;text-shadow:0 0 60px rgba(80,255,160,1);animation:wbreathe .4s ease-in-out infinite alternate}
|
||||
.scs-solo-time.run{color:#ff9090;text-shadow:0 0 40px rgba(255,100,100,1)}
|
||||
.scs-solo-time.stop{color:#80ffbe;text-shadow:0 0 50px rgba(80,255,160,.8)}
|
||||
.scs-solo-state{font-family:'Bebas Neue',sans-serif;font-size:clamp(12px,3.5vw,16px);letter-spacing:6px;text-transform:uppercase;position:relative;z-index:1}
|
||||
.scs-solo-state.blu{color:#7ec8ff;text-shadow:0 0 20px rgba(100,180,255,1)}
|
||||
.scs-solo-state.grn{color:#7affc0;text-shadow:0 0 20px rgba(80,255,160,1)}
|
||||
.scs-solo-state.wht{color:#ffffff;text-shadow:0 0 20px rgba(255,255,255,.8)}
|
||||
.scs-solo-state.red{color:#ff8080;text-shadow:0 0 20px rgba(255,100,100,1)}
|
||||
.scs-solo-state.gold{color:var(--g2);text-shadow:0 0 20px rgba(255,217,122,.9)}
|
||||
.scs-solo-hint{font-size:clamp(10px,2.5vw,12px);letter-spacing:3px;color:rgba(200,216,232,.65);text-transform:uppercase;position:relative;z-index:1;font-weight:600}
|
||||
.scs-solo-history{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;align-items:center;width:100%;max-width:280px}
|
||||
.scs-solo-hist-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:3px 10px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.07)}
|
||||
.scs-solo-hist-n{font-size:9px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;width:30px}
|
||||
.scs-solo-hist-t{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;color:var(--gold)}
|
||||
.scs-solo-hist-t.best{color:#80ffbe}
|
||||
.scs-solo-best{display:flex;gap:10px;align-items:center;position:relative;z-index:1}
|
||||
.scs-solo-best-lbl{font-size:9px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
|
||||
.scs-solo-best-val{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;color:#80ffbe}
|
||||
.scs-mode-toggle{display:flex;background:var(--s2);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
|
||||
.scs-mode-btn{padding:7px 14px;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);cursor:pointer;transition:all .2s}
|
||||
.scs-mode-btn.active{background:var(--s3);color:var(--gold)}
|
||||
10
src/main.jsx
Executable file
10
src/main.jsx
Executable file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
|
||||
import App from "./App.jsx";
|
||||
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
6
vite.config.js
Executable file
6
vite.config.js
Executable file
@@ -0,0 +1,6 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
});
|
||||
Reference in New Issue
Block a user