christophe/chesscubing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integre l'application d'Ethan sous /ethan

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-12 17:17:39 +02:00
parent df1d7cbd63
commit a3d3bd18a9
14 changed files with 10211 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ethan/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
node_modules
dist
.DS_Store
.codex

1835
ethan/ChessClock.html Normal file
View File

File diff suppressed because one or more lines are too long

29
ethan/README.md Normal file
View 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
ethan/index.html Normal file
View File

File diff suppressed because one or more lines are too long

2345
ethan/legacy/ChessClock.legacy.html Normal file
View File

File diff suppressed because one or more lines are too long

19
ethan/package.json Normal file
View 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
ethan/src/App.jsx Normal file
View File

@@ -0,0 +1,5 @@
import ChessClockApp from "./features/chess-clock/ChessClockApp.jsx";
export default function App() {
return <ChessClockApp />;
}

1785
ethan/src/features/chess-clock/ChessClockApp.jsx Normal file
View File

File diff suppressed because one or more lines are too long

1793
ethan/src/features/chess-clock/ChessClockStandalone.jsx Normal file
View File

File diff suppressed because one or more lines are too long

536
ethan/src/features/chess-clock/chessClock.css Normal file
View 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
ethan/src/main.jsx Normal file
View 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
ethan/vite.config.js Normal file
View File

@@ -0,0 +1,6 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});

8
index.html
View File

@@ -42,13 +42,7 @@
<div class="hero-actions">
<a class="button primary" href="application.html">Ouvrir l'application</a>
<a class="button secondary" href="reglement.html">Lire le règlement</a>
<a
class="button ghost"
href="https://chess-cubing-v2.netlify.app/"
target="_blank"
rel="noreferrer"
>Ouvrir l'appli d'Ethan</a
>
<a class="button ghost" href="/ethan/">Ouvrir l'appli d'Ethan</a>
</div>
</div>

8
nginx.conf
View File

@@ -5,6 +5,14 @@ server {
root /usr/share/nginx/html;
index index.html;
location = /ethan {
return 301 $scheme://$http_host/ethan/;
}
location /ethan/ {
try_files $uri $uri/ /ethan/index.html;
}
location / {
try_files $uri $uri/ /index.html;
}