| :root{ |
| --ink:#0b0d18; --panel:#1C1F2B; --panel-2:#222636; --mist:#2A2E3D; --mist-2:#363B4E; |
| --chalk:#F4F6FB; --fog:#B4BACB; |
| --amber:#F0A830; --amber-soft:rgba(240,168,48,.14); |
| --spring:#46D39A; --spring-soft:rgba(70,211,154,.16); |
| --coral:#FF6B6B; --coral-soft:rgba(255,107,107,.16); |
| --violet:#8B7BFF; |
| --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; |
| --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; |
| --sinhala:"Iskoola Pota","Noto Sans Sinhala",system-ui,sans-serif; |
| --tamil:"Latha","Noto Sans Tamil",system-ui,sans-serif; |
| } |
| *{box-sizing:border-box} html,body{margin:0;padding:0} |
| body{background:#0b0d18;color:var(--chalk);font-family:var(--sans);min-height:100vh; |
| -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden; |
| perspective:1400px;perspective-origin:50% 30%; |
| text-shadow:0 1px 2px rgba(0,0,0,.55)} |
|
|
| |
| ::-webkit-scrollbar{width:16px;height:16px} |
| ::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.18));border-radius:99px;margin:4px} |
| ::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ffd166,var(--amber) 50%,#9a5a08);border-radius:99px; |
| border:3px solid rgba(0,0,0,.4);min-height:48px; |
| box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.35)} |
| ::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffe18c,#ffd166 50%,var(--amber))} |
| ::-webkit-scrollbar-corner{background:transparent} |
| html{scrollbar-width:auto;scrollbar-color:var(--amber) rgba(0,0,0,.3)} |
|
|
| |
| #bg3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block} |
|
|
| .wrap{max-width:1180px;margin:0 auto;padding:24px 18px 60px;position:relative;z-index:2} |
|
|
| |
| header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px} |
| .brand{display:flex;align-items:baseline;gap:12px} |
| .logo{font-family:var(--mono);font-weight:900;font-size:32px;letter-spacing:.32em;text-indent:.32em; |
| color:#FFE08A;-webkit-text-stroke:1px rgba(255,224,138,.65); |
| text-shadow: |
| 0 2px 0 #5a3a08, |
| 0 3px 0 rgba(0,0,0,.55), |
| 0 0 22px rgba(240,168,48,.7), |
| 0 0 40px rgba(240,168,48,.35)} |
| .tagline{font-size:13.5px;color:#E2E7F2;font-weight:500;letter-spacing:.02em; |
| text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.5)} |
| .hgroup{display:flex;gap:10px;align-items:center;flex-wrap:wrap} |
| .total{background:linear-gradient(180deg,rgba(40,46,66,.22),rgba(20,24,38,.30));backdrop-filter:blur(16px); |
| border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 16px;text-align:center; |
| box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 14px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.15)} |
| .total .n{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--spring);line-height:1; |
| text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 14px rgba(70,211,154,.4); |
| transition:transform .15s ease} |
| .total .n.bump{animation:counterBump .55s cubic-bezier(.34,1.56,.64,1)} |
| @keyframes counterBump{ |
| 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(240,168,48,0)); } |
| 35% { transform: scale(1.45); filter: drop-shadow(0 0 14px rgba(240,168,48,.85)); } |
| 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(240,168,48,0)); } |
| } |
| .total .l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);margin-top:3px} |
|
|
| .user-chip{display:flex;align-items:center;gap:10px; |
| background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(16px); |
| border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:6px 8px 6px 12px;font-size:12.5px; |
| box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.15)} |
| .user-chip .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--spring)); |
| display:grid;place-items:center;color:#1a1404;font-weight:700;font-size:13px} |
| .user-chip .name{color:var(--chalk);font-weight:600;line-height:1.1} |
| .user-chip .stars{color:var(--amber);font-size:10.5px;font-family:var(--mono)} |
| .user-chip button{background:transparent;border:1px solid var(--mist);color:var(--fog);font:inherit;font-size:11px; |
| padding:4px 8px;border-radius:8px;cursor:pointer;margin-left:4px} |
| .user-chip button:hover{color:var(--coral);border-color:var(--coral)} |
|
|
| |
| .track-hint{font-size:11px;color:var(--fog);margin:0 4px 8px;letter-spacing:.05em} |
| .track{display:flex;gap:10px;overflow-x:auto;padding:8px 12px 14px;margin-bottom:10px; |
| scrollbar-width:auto;scrollbar-color:var(--amber) rgba(0,0,0,.25); |
| |
| mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%); |
| -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)} |
| .track::-webkit-scrollbar{height:14px} |
| .track::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2));border-radius:99px;margin:0 12px} |
| .track::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ffd166,var(--amber) 50%,#9a5a08); |
| border-radius:99px;border:2px solid rgba(0,0,0,.4); |
| box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.3)} |
| .track::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffe18c,#ffd166 50%,var(--amber))} |
| .lvl{flex:0 0 auto;min-width:130px;height:142px;border-radius:18px; |
| background:linear-gradient(180deg,rgba(40,46,66,.12) 0%,rgba(24,28,42,.20) 100%);backdrop-filter:blur(20px); |
| border:1px solid rgba(255,255,255,.06);cursor:pointer;position:relative;padding:14px 10px 18px; |
| display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;overflow:hidden;user-select:none; |
| transform-style:preserve-3d; |
| box-shadow: |
| 0 8px 0 rgba(0,0,0,.45), |
| 0 14px 28px rgba(0,0,0,.45), |
| inset 0 2px 0 rgba(255,255,255,.12), |
| inset 0 -8px 16px rgba(0,0,0,.35); |
| transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease} |
| .lvl:hover{transform:translateY(-4px) rotateX(-2deg);box-shadow:0 14px 0 rgba(0,0,0,.4),0 22px 40px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -8px 16px rgba(0,0,0,.35)} |
| .lvl:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.1),inset 0 -8px 16px rgba(0,0,0,.4)} |
| .lvl .g-emoji{font-size:26px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))} |
| |
| .lvl .g-num{font-family:var(--mono);font-weight:900;font-size:38px;line-height:.95; |
| background:linear-gradient(180deg,#fff5d6 0%,#ffd166 35%,#ec9d2a 70%,#9a5a08 100%); |
| -webkit-background-clip:text;background-clip:text;color:transparent; |
| text-shadow: |
| 0 1px 0 rgba(0,0,0,.05), |
| 1px 2px 0 rgba(110,60,5,.55), |
| 2px 3px 0 rgba(80,40,5,.45), |
| 3px 5px 6px rgba(0,0,0,.55); |
| filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); |
| letter-spacing:.02em;transform:translateZ(0)} |
| .lvl.current .g-num{filter:drop-shadow(0 0 14px rgba(255,209,102,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.55))} |
| .lvl.done .g-num{background:linear-gradient(180deg,#d8ffea 0%,#6fe2b0 40%,#1aa172 100%); |
| -webkit-background-clip:text;background-clip:text} |
| .lvl .g-name{font-family:var(--mono);font-weight:700;font-size:13px;color:#fff;text-align:center;letter-spacing:.04em;line-height:1.2; |
| text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.4)} |
| .lvl .g-sub{font-size:10.5px;color:#dde2ed;text-align:center;line-height:1.1; |
| text-shadow:0 1px 2px rgba(0,0,0,.7)} |
| .lvl.current .g-name,.lvl.done .g-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5)} |
| .lvl.current .g-sub,.lvl.done .g-sub{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)} |
| .lvl .g-pct{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--amber);margin-top:auto} |
| .lvl .g-bar{position:absolute;left:8px;right:8px;bottom:7px;height:5px;background:var(--mist);border-radius:99px;overflow:hidden} |
| .lvl .g-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--spring),#5fe0aa);transition:width .6s ease;border-radius:99px} |
| .lvl.done{background:linear-gradient(180deg,rgba(70,211,154,.32),rgba(20,80,55,.6));border-color:rgba(70,211,154,.5); |
| box-shadow:0 8px 0 rgba(15,60,40,.6),0 14px 28px rgba(70,211,154,.25),inset 0 2px 0 rgba(255,255,255,.18)} |
| .lvl.done .g-pct{color:var(--spring)} |
| .lvl.done::after{content:"✓";position:absolute;top:6px;right:8px;font-size:14px;color:var(--spring);font-weight:700;text-shadow:0 0 8px var(--spring)} |
| .lvl.current{background:linear-gradient(180deg,rgba(255,200,90,.38),rgba(100,55,5,.7));border-color:var(--amber); |
| box-shadow:0 0 0 3px rgba(240,168,48,.35),0 10px 0 rgba(70,40,0,.6),0 16px 32px rgba(240,168,48,.4),inset 0 2px 0 rgba(255,255,255,.25); |
| transform:translateY(-4px) rotateX(-3deg)} |
| .lvl.current .g-pct{color:#fff;text-shadow:0 0 8px var(--amber)} |
|
|
| |
| .grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start} |
| @media (max-width:880px){ .grid{grid-template-columns:1fr} } |
|
|
| |
| .card{background:linear-gradient(180deg,rgba(40,46,66,.18) 0%,rgba(20,24,38,.28) 100%);backdrop-filter:blur(4px); |
| border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:30px 26px 26px;position:relative;overflow:hidden; |
| box-shadow:0 12px 0 rgba(0,0,0,.35),0 20px 50px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.15),inset 0 -10px 20px rgba(0,0,0,.25); |
| transform-style:preserve-3d} |
| .overlay{position:absolute;inset:0;background:rgba(11,13,24,.78);backdrop-filter:blur(8px);display:grid;place-items:center;text-align:center;padding:24px;z-index:5} |
| .overlay.hidden{display:none} |
| .overlay h2{font-size:24px;margin:0 0 8px} |
| .overlay p{color:var(--fog);font-size:14px;max-width:380px;margin:0 auto 22px} |
|
|
| .speaker-row{display:flex;flex-direction:column;align-items:center;gap:16px} |
| .speaker{width:120px;height:120px;border-radius:50%; |
| background:radial-gradient(circle at 32% 28%,#ffd166 0%,var(--amber) 28%,#b87a1a 75%,#7c4f0e 100%); |
| border:none;display:grid;place-items:center;cursor:pointer;position:relative; |
| box-shadow: |
| 0 6px 0 #5e3a06, |
| 0 12px 18px rgba(0,0,0,.5), |
| inset 0 6px 14px rgba(255,255,255,.45), |
| inset 0 -8px 18px rgba(0,0,0,.4); |
| transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease; |
| transform-style:preserve-3d} |
| .speaker:hover{transform:translateY(-2px) scale(1.03); |
| box-shadow:0 8px 0 #5e3a06,0 16px 26px rgba(0,0,0,.55),inset 0 6px 14px rgba(255,255,255,.5),inset 0 -8px 18px rgba(0,0,0,.4)} |
| .speaker:active{transform:translateY(3px) scale(.98); |
| box-shadow:0 2px 0 #5e3a06,0 6px 12px rgba(0,0,0,.5),inset 0 6px 14px rgba(255,255,255,.4),inset 0 -8px 18px rgba(0,0,0,.5)} |
| .speaker svg{width:46px;height:46px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))} |
| |
| .speaker .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--amber);opacity:0;pointer-events:none} |
| .speaker .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--amber);opacity:0} |
| .speaker.playing .ring{animation:pulse 1.1s ease-out infinite} |
| .speaker.playing{animation:bounce 1.1s ease-in-out infinite} |
| @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}} |
| @keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} |
| .replay-hint{font-size:12px;color:var(--fog)} |
| .replay-hint b{color:var(--amber);font-weight:600} |
|
|
| .meaning{margin-top:18px;background:linear-gradient(135deg,rgba(139,123,255,.08),rgba(70,211,154,.06)); |
| border:1px solid rgba(139,123,255,.25);border-radius:14px;padding:14px 16px;min-height:84px; |
| display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center;transition:opacity .3s ease} |
| .meaning.empty{opacity:.5} |
| .meaning .col{display:flex;flex-direction:column;gap:4px} |
| .meaning .lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)} |
| .meaning .val{font-size:16px;font-weight:600;color:var(--chalk);min-height:24px;word-wrap:break-word} |
| .meaning .col.si .val{font-family:var(--sinhala);color:#ffd166} |
| .meaning .col.ta .val{font-family:var(--tamil);color:#a0e8af} |
| .meaning .val.loading{color:var(--fog);font-weight:400;font-style:italic;font-size:13px} |
|
|
| .tiles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px 0 6px;min-height:60px} |
| .tile{width:50px;height:60px;border-radius:12px; |
| background:linear-gradient(180deg,#3b4360 0%,#252a40 100%); |
| border:1px solid rgba(255,255,255,.08); |
| display:grid;place-items:center;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--chalk); |
| box-shadow:0 4px 0 rgba(0,0,0,.5),0 8px 14px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.35); |
| text-shadow:0 2px 4px rgba(0,0,0,.5); |
| transform-style:preserve-3d; |
| transition:background .12s ease,border-color .12s ease,color .12s ease,transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease} |
| .tile.ghost{color:var(--fog);opacity:.4;background:linear-gradient(180deg,#1c2030,#12141d);border:1px dashed rgba(255,255,255,.1);box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)} |
| .tile.ok{background:linear-gradient(180deg,#5fe3a6 0%,#2b8c61 100%);border-color:rgba(70,211,154,.7);color:#fff; |
| box-shadow:0 5px 0 #154025,0 10px 20px rgba(70,211,154,.5),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.25); |
| transform:translateY(-3px)} |
| .tile.bad{background:linear-gradient(180deg,#ff8b8b 0%,#a83838 100%);border-color:rgba(255,107,107,.7);color:#fff; |
| box-shadow:0 5px 0 #5a1414,0 10px 20px rgba(255,107,107,.5),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.3)} |
| .tile.reveal{background:linear-gradient(180deg,#ffd166 0%,#b87a1a 100%);border-color:rgba(240,168,48,.7);color:#fff; |
| box-shadow:0 5px 0 #5e3a06,0 10px 20px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.3)} |
| .tiles.shake{animation:shake .4s} |
| @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}} |
|
|
| #typed{width:100%;background:rgba(8,10,18,.18);border:1px solid rgba(255,255,255,.08);border-bottom:2px solid var(--mist);color:#fff; |
| font-family:var(--mono);font-size:22px;letter-spacing:.04em;text-align:center;padding:12px 8px;outline:none;border-radius:10px; |
| caret-color:var(--amber);transition:border-color .15s ease,background .15s ease;margin-top:14px; |
| text-shadow:0 1px 2px rgba(0,0,0,.7)} |
| #typed:focus{border-color:var(--amber);background:rgba(8,10,18,.32);box-shadow:0 0 0 3px rgba(240,168,48,.25)} |
| #typed::placeholder{color:#aab2c4;letter-spacing:0;font-family:var(--sans);font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.6)} |
| #typed:disabled{opacity:.5} |
| .feedback{text-align:center;margin-top:14px;font-size:14px;min-height:22px;color:#dde2ed;text-shadow:0 1px 2px rgba(0,0,0,.7)} |
| .feedback.good{color:#7afac0;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(70,211,154,.4)} |
| .feedback.fail{color:#ff9a9a;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(255,107,107,.4)} |
| .feedback .ans{font-family:var(--mono);color:#ffd166;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 8px rgba(240,168,48,.5)} |
| .controls{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap} |
| button.btn{font-family:var(--sans);font-size:14px;font-weight:700;border-radius:12px;padding:12px 22px;cursor:pointer; |
| border:1px solid rgba(255,255,255,.14); |
| background:linear-gradient(180deg,#3b4360 0%,#252a40 100%); |
| color:#fff;position:relative; |
| box-shadow:0 5px 0 rgba(0,0,0,.5),0 10px 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.3); |
| text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6);transform-style:preserve-3d; |
| transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease,background .12s ease,color .12s ease} |
| button.btn:hover{transform:translateY(-2px);color:#fff; |
| border-color:rgba(255,209,102,.55); |
| box-shadow:0 7px 0 rgba(0,0,0,.5),0 14px 28px rgba(240,168,48,.35),0 0 0 1px rgba(255,209,102,.25),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.3); |
| background:linear-gradient(180deg,#5a6488 0%,#363e5c 100%)} |
| button.btn:active{transform:translateY(3px);color:#fff; |
| box-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.45); |
| background:linear-gradient(180deg,#262c42 0%,#171b2c 100%)} |
| |
| button.btn.ghostbtn{background:linear-gradient(180deg,#ffd166 0%,var(--amber) 45%,#b87a1a 100%); |
| border-color:rgba(255,221,150,.6);color:#3a2406; |
| text-shadow:0 1px 1px rgba(255,255,255,.4); |
| box-shadow:0 5px 0 #5e3a06,0 10px 22px rgba(184,122,26,.5), |
| inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(90,40,6,.4), |
| inset 0 0 14px rgba(255,225,150,.3)} |
| button.btn.ghostbtn:hover{background:linear-gradient(180deg,#ffdc84 0%,#f7b53f 45%,#c98a22 100%); |
| box-shadow:0 6px 0 #5e3a06,0 13px 28px rgba(200,138,34,.6), |
| inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(90,40,6,.38), |
| inset 0 0 16px rgba(255,235,170,.45)} |
| .btn.danger{color:#fff;background:linear-gradient(180deg,#ff8b8b 0%,#a83838 100%); |
| box-shadow:0 5px 0 #5a1414,0 10px 18px rgba(255,107,107,.4),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.3)} |
| .btn.danger:hover{background:linear-gradient(180deg,#ffaaaa,#bf4444)} |
| .btn.danger:active{box-shadow:0 2px 0 #5a1414,0 4px 8px rgba(255,107,107,.5),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.4)} |
|
|
| .levelup{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6} |
| .levelup span{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--amber);background:#1a1d28; |
| padding:16px 32px;border-radius:18px;text-align:center;white-space:pre-line; |
| box-shadow:0 18px 60px -16px rgba(240,168,48,.7),0 0 0 1px var(--amber)} |
|
|
| .burst{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible} |
| .burst .star{position:absolute;width:14px;height:14px;background:linear-gradient(45deg,var(--amber),#ffd166); |
| clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); |
| filter:drop-shadow(0 0 6px var(--amber))} |
|
|
| |
| .side{display:flex;flex-direction:column;gap:14px} |
| .pcard{background:linear-gradient(180deg,rgba(40,46,66,.12) 0%,rgba(20,24,38,.20) 100%);backdrop-filter:blur(20px); |
| border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px; |
| box-shadow:0 8px 0 rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -8px 16px rgba(0,0,0,.25); |
| transform-style:preserve-3d} |
| .pcard .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)} |
| .pcard .lvlnum{font-family:var(--mono);font-weight:700;font-size:26px;line-height:1.15;color:var(--amber);text-shadow:0 0 22px rgba(240,168,48,.5);margin-top:2px} |
| .pcard .lvldesc{font-size:13px;color:var(--fog);margin-bottom:14px;margin-top:2px} |
| .bar{height:12px;border-radius:99px;background:var(--mist);overflow:hidden;position:relative} |
| .bar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--spring),#5fe0aa,var(--amber));transition:width .6s ease;box-shadow:0 0 12px rgba(70,211,154,.6)} |
| .barlabel{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;color:var(--fog)} |
| .barlabel b{color:var(--chalk);font-family:var(--mono)} |
| .ministats{display:flex;gap:10px;margin-top:14px} |
| .ministat{flex:1;background:var(--panel-2);border-radius:12px;padding:9px;text-align:center} |
| .ministat .n{font-family:var(--mono);font-weight:700;font-size:18px} |
| .ministat .l{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog);margin-top:3px} |
| .ministat.rem .n{color:var(--amber)} .ministat.strk .n{color:var(--spring)} |
|
|
| .fam h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin:0 0 10px;display:flex;justify-content:space-between} |
| .fam h3 span{color:var(--spring);font-family:var(--mono)} |
| .famlist{max-height:280px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px} |
| .famlist .fw{font-family:var(--mono);font-size:13px;background:var(--spring-soft);color:var(--spring); |
| border:1px solid rgba(70,211,154,.3);border-radius:8px;padding:4px 9px;cursor:pointer;transition:transform .15s ease} |
| .famlist .fw:hover{transform:translateY(-2px);background:rgba(70,211,154,.28)} |
| .famlist .fw .s{font-size:9.5px;color:var(--amber);margin-left:4px;letter-spacing:-.5px} |
| .famempty{color:var(--fog);font-size:13px;text-align:center;padding:18px 8px} |
|
|
| |
| .leaderboard{background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(12px); |
| border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 18px; |
| box-shadow:0 8px 0 rgba(0,0,0,.4),0 14px 28px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.12); |
| transform-style:preserve-3d} |
| .leaderboard h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin:0 0 12px;display:flex;justify-content:space-between;align-items:center} |
| .leaderboard h3 .live{font-family:var(--mono);color:var(--spring);font-size:10px;display:flex;align-items:center;gap:5px} |
| .leaderboard h3 .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring);box-shadow:0 0 8px var(--spring);animation:livepulse 2s ease infinite} |
| @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.4}} |
| .lb-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;font-size:13px;transition:background .15s ease} |
| .lb-row:hover{background:var(--mist)} |
| .lb-row.me{background:linear-gradient(90deg,var(--amber-soft),transparent);border:1px solid rgba(240,168,48,.3)} |
| .lb-row .rank{font-family:var(--mono);font-weight:700;color:var(--fog);text-align:center;font-size:13px} |
| .lb-row.r1 .rank{color:#ffd700} |
| .lb-row.r2 .rank{color:#c0c0c0} |
| .lb-row.r3 .rank{color:#cd7f32} |
| .lb-row .who{display:flex;align-items:center;gap:7px;min-width:0} |
| .lb-row .who .a{width:22px;height:22px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0} |
| .lb-row .who .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| .lb-row .pts{font-family:var(--mono);color:var(--amber);font-weight:700;font-size:13px} |
| .lb-stats{display:flex;justify-content:space-around;padding:12px 4px 6px;border-top:1px solid var(--mist);margin-top:8px;text-align:center} |
| .lb-stats div{font-size:10.5px;letter-spacing:.06em;color:var(--fog);text-transform:uppercase} |
| .lb-stats div b{display:block;font-family:var(--mono);font-size:16px;color:var(--chalk);margin-bottom:2px} |
| .lb-stats div b.green{color:var(--spring)} |
|
|
| |
| details.settings{background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(12px); |
| border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:2px 16px; |
| box-shadow:0 6px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.1)} |
| details.settings summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:600;color:var(--fog);list-style:none} |
| details.settings summary::-webkit-details-marker{display:none} |
| details.settings summary::before{content:"⚙ "} |
| .set-row{padding:6px 0 14px} |
| .set-row label{display:block;font-size:12.5px;margin-bottom:7px} |
| .set-row .hint{color:var(--fog);font-size:11px;margin-bottom:7px} |
| input[type=range]{width:100%;accent-color:var(--amber)} |
| select{width:100%;background:var(--ink);color:var(--chalk);border:1px solid var(--mist);border-radius:9px;padding:8px 10px;font-family:var(--sans);font-size:12.5px} |
| .pct{font-family:var(--mono);color:var(--amber)} |
| .toggle{display:flex;align-items:center;gap:10px;font-size:12.5px;cursor:pointer} |
| footer{text-align:center;color:var(--fog);font-size:11.5px;margin-top:26px;line-height:1.7} |
|
|
| |
| .auth-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px; |
| background:radial-gradient(ellipse at top,rgba(28,31,43,.45),rgba(11,13,24,.65));backdrop-filter:blur(6px)} |
| .auth-screen.hidden{display:none} |
| .auth-card{width:100%;max-width:440px; |
| background:linear-gradient(180deg,rgba(48,54,76,.95) 0%,rgba(20,24,38,.97) 100%);backdrop-filter:blur(20px); |
| border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:36px 32px; |
| box-shadow: |
| 0 18px 0 rgba(0,0,0,.4), |
| 0 30px 80px -10px rgba(0,0,0,.85), |
| inset 0 2px 0 rgba(255,255,255,.15), |
| inset 0 -10px 24px rgba(0,0,0,.35); |
| transform-style:preserve-3d} |
| .auth-card h2{font-family:var(--mono);font-weight:900;font-size:30px;margin:0 0 8px;letter-spacing:.18em; |
| color:#FFE08A;-webkit-text-stroke:1px rgba(255,224,138,.55); |
| text-shadow:0 2px 0 #5a3a08,0 3px 0 rgba(0,0,0,.55),0 0 22px rgba(240,168,48,.7)} |
| .auth-card .sub{color:#E2E7F2;font-size:14px;margin-bottom:22px;font-weight:500; |
| text-shadow:0 1px 2px rgba(0,0,0,.8)} |
| .auth-tabs{display:flex;gap:6px;background:var(--ink);padding:5px;border-radius:12px;margin-bottom:20px} |
| .auth-tabs button{flex:1;background:transparent;color:var(--fog);border:none;padding:9px;font:inherit;font-weight:600;font-size:13px;border-radius:9px;cursor:pointer;transition:all .15s ease} |
| .auth-tabs button.active{background:var(--amber);color:#1a1404} |
| .auth-field{margin-bottom:14px} |
| .auth-field label{display:block;font-size:11px;color:var(--fog);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px} |
| .auth-field input{width:100%;background:var(--ink);border:1px solid var(--mist);color:var(--chalk);padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;outline:none;transition:border-color .15s ease} |
| .auth-field input:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)} |
| .auth-field .err{color:var(--coral);font-size:11.5px;margin-top:5px;min-height:14px} |
| .auth-card button.primary{width:100%; |
| background:linear-gradient(180deg,#ffd166 0%,var(--amber) 50%,#b87a1a 100%); |
| color:#1a1404;border:none;padding:14px;font:inherit;font-weight:800;font-size:15px;border-radius:13px;cursor:pointer; |
| box-shadow:0 7px 0 #5e3a06,0 14px 26px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,70,5,.3); |
| transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease;margin-top:6px; |
| text-shadow:0 1px 0 rgba(255,230,160,.6)} |
| .auth-card button.primary:hover{transform:translateY(-2px);box-shadow:0 9px 0 #5e3a06,0 18px 32px rgba(240,168,48,.65),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(120,70,5,.3)} |
| .auth-card button.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #5e3a06,0 6px 12px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(120,70,5,.4)} |
| .auth-link{background:none;border:none;color:var(--amber);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 0;margin-top:12px} |
| .auth-link:hover{text-decoration:underline} |
| .auth-card .guest{margin-top:18px;padding-top:18px;border-top:1px solid var(--mist);text-align:center} |
| .auth-card .guest button{background:transparent;border:1px dashed var(--mist-2);color:var(--fog);font:inherit;font-size:12px;padding:8px 16px;border-radius:9px;cursor:pointer} |
| .auth-card .guest button:hover{border-color:var(--fog);color:var(--chalk)} |
|
|
| |
| .pcard.medals h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin:0 0 12px;display:flex;justify-content:space-between} |
| .pcard.medals h3 span{color:var(--amber);font-family:var(--mono)} |
| .medal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} |
| .medal{aspect-ratio:1/1.15;border-radius:10px;background:linear-gradient(180deg,rgba(40,46,66,.55),rgba(20,24,38,.7)); |
| border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center; |
| padding:6px 2px 4px;text-align:center;opacity:.35;transition:all .25s ease;position:relative;overflow:hidden} |
| .medal .m-emoji{font-size:18px;line-height:1;filter:grayscale(.7)} |
| .medal .m-name{font-size:8.5px;color:var(--fog);margin-top:3px;letter-spacing:0;line-height:1.05; |
| width:100%;text-align:center;padding:0 1px; |
| display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word} |
| .medal.earned{opacity:1} |
| .medal.earned .m-emoji{filter:none;transform:scale(1.08)} |
| .medal.earned .m-name{color:var(--chalk);font-weight:600} |
| .medal.medal-bronze.earned{background:linear-gradient(180deg,#c49070,#7a4a25);border-color:#d8a07a;box-shadow:0 0 14px rgba(196,144,112,.45)} |
| .medal.medal-silver.earned{background:linear-gradient(180deg,#d5dae4,#7a8290);border-color:#e5eaf2;box-shadow:0 0 14px rgba(213,218,228,.5)} |
| .medal.medal-gold.earned {background:linear-gradient(180deg,#ffd76a,#a67309);border-color:#ffe18c;box-shadow:0 0 16px rgba(255,215,106,.55)} |
| .medal.medal-trophy.earned{background:linear-gradient(180deg,#fff0a0,#bf9300);border-color:#fff6c0;box-shadow:0 0 22px rgba(255,232,120,.75),inset 0 0 10px rgba(255,250,200,.4)} |
| .medal.current::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid var(--amber); |
| box-shadow:0 0 16px rgba(240,168,48,.7);pointer-events:none;animation:medalPulse 1.4s ease-in-out infinite} |
| @keyframes medalPulse{0%,100%{opacity:.8}50%{opacity:.35}} |
| .medal-cap{margin-top:10px;font-size:10.5px;color:var(--fog);line-height:1.4;text-align:center;letter-spacing:.02em} |
| .medal-cap b{color:var(--amber);font-weight:700} |
|
|
| |
| .admin-card{width:min(1100px,96vw);max-height:90vh;display:flex;flex-direction:column; |
| background:linear-gradient(180deg,rgba(34,38,54,.95),rgba(20,24,38,.97)); |
| border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden; |
| box-shadow:0 30px 80px rgba(0,0,0,.6)} |
| .admin-card.page{width:min(1400px,100%);max-height:none;height:100%;border-radius:14px} |
| .admin-card.page header{padding:22px 26px} |
| .admin-card.page header h2{font-size:22px} |
| .admin-card header{display:flex;align-items:center;gap:18px; |
| padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)} |
| .admin-card header h2{margin:0;font-family:var(--mono);font-size:18px;letter-spacing:.1em;color:var(--amber);white-space:nowrap} |
| .admin-card header .admin-current{flex:1;font-size:12.5px;color:var(--fog);font-family:var(--mono)} |
| .admin-card header .admin-current b{color:var(--chalk);font-weight:600} |
| .admin-card header .admin-head-actions{display:flex;gap:8px;align-items:center} |
| .admin-card header .close{background:transparent;border:none;color:var(--fog);font-size:26px; |
| cursor:pointer;width:36px;height:36px;border-radius:8px;line-height:1} |
| .admin-card header .close:hover{background:rgba(255,255,255,.08);color:var(--chalk)} |
| .admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding:18px 22px; |
| background:rgba(0,0,0,.18)} |
| .admin-stat{background:linear-gradient(180deg,rgba(40,46,66,.45),rgba(20,24,38,.55)); |
| border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px;text-align:center} |
| .admin-stat .n{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--spring)} |
| .admin-stat .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fog);margin-top:3px} |
| .admin-stat.online-now .n{color:#7afac0} |
| .admin-stat.online-now{position:relative} |
| .admin-stat.online-now::before{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#46d39a;box-shadow:0 0 8px #46d39a;animation:pulseOnline 1.5s ease-in-out infinite} |
| @keyframes pulseOnline{0%,100%{opacity:.6}50%{opacity:1}} |
| .admin-btn.primary{background:linear-gradient(180deg,#ffd76a,#a67309);color:#1a1404;border-color:#ffd76a} |
| .admin-btn.primary:hover{filter:brightness(1.1)} |
| .admin-table .email .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#454c60;margin-right:8px;vertical-align:middle} |
| .admin-table .email .dot.online{background:#46d39a;box-shadow:0 0 6px #46d39a} |
| .admin-actions{display:flex;align-items:center;gap:8px;padding:12px 22px; |
| border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05); |
| background:rgba(0,0,0,.12)} |
| .admin-btn{padding:7px 14px;font-size:12px} |
| .admin-btn.ghost{background:rgba(60,68,92,.4)} |
| .admin-spacer{flex:1} |
| .admin-warn{font-size:11px;color:var(--fog);font-style:italic} |
| .admin-search{background:rgba(8,10,18,.5);border:1px solid rgba(255,255,255,.1);color:var(--chalk); |
| border-radius:8px;padding:7px 12px;font:inherit;font-size:12.5px;min-width:240px;font-family:var(--sans)} |
| .admin-search::placeholder{color:var(--fog)} |
| .admin-search:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,168,48,.18)} |
| .admin-empty{padding:40px;text-align:center;color:var(--fog);font-size:13px;font-style:italic} |
| .admin-footer{display:flex;justify-content:space-between;align-items:center;gap:12px; |
| padding:10px 22px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18); |
| font-size:11px;color:var(--fog);letter-spacing:.02em} |
| .admin-table-wrap{overflow:auto;flex:1;padding:0} |
| .admin-table{width:100%;border-collapse:collapse;font-size:12.5px} |
| .admin-table th{position:sticky;top:0;background:rgba(15,18,30,.95);text-align:left; |
| font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog); |
| padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);z-index:2} |
| .admin-table td{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--chalk)} |
| .admin-table tr:hover td{background:rgba(255,255,255,.03)} |
| .admin-table .email{font-family:var(--mono);font-size:11.5px;color:#cfd5e3} |
| .admin-table .email em{color:var(--amber);font-style:normal;font-size:10.5px} |
| .admin-table .role{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px; |
| font-weight:700;letter-spacing:.05em;text-transform:uppercase} |
| .role-admin{background:rgba(240,168,48,.18);color:var(--amber);border:1px solid rgba(240,168,48,.45)} |
| .role-user {background:rgba(255,255,255,.05);color:var(--fog);border:1px solid rgba(255,255,255,.1)} |
| .admin-table .acts{display:flex;gap:5px} |
| .admin-table .acts button{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.1); |
| background:rgba(40,46,66,.5);color:var(--chalk);cursor:pointer;font-size:13px;line-height:1;padding:0} |
| .admin-table .acts button:hover:not(:disabled){border-color:var(--amber);color:var(--amber)} |
| .admin-table .acts button:disabled{opacity:.3;cursor:not-allowed} |
|
|
| |
| .admin-chip{background:linear-gradient(180deg,rgba(240,168,48,.2),rgba(184,122,26,.4)); |
| border:1px solid rgba(240,168,48,.5);color:var(--amber);font-size:11px;font-weight:700; |
| letter-spacing:.06em;padding:7px 12px;border-radius:10px;cursor:pointer;font-family:var(--mono); |
| transition:all .15s ease} |
| .admin-chip:hover{background:linear-gradient(180deg,#ffd76a,#a67309);color:#1a1404;transform:translateY(-1px)} |
|
|
| @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}} |
|
|
