@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#080b14;--surface:#111827;--surface2:#171f32;--text:#f4f6ff;--muted:#9aa6bd;--line:#263149;--cyan:#28e0e6;--blue:#5267ff;--purple:#a34dff;--red:#ff4d76;--glow:0 0 35px #5267ff30}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#24205255,transparent 38%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.6;padding-top:70px;padding-bottom:78px}body[data-theme=light]{--bg:#f1f4fb;--surface:#fff;--surface2:#e8edf8;--text:#141a2a;--muted:#5e6980;--line:#d7deec;background:radial-gradient(ellipse at 80% 0%,#d8d8ff,transparent 40%),var(--bg)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit}.wrap{width:min(1160px,calc(100% - 40px));margin-inline:auto}.app-header{height:70px;position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1160px)/2));background:#080b14eF;border-bottom:1px solid #ffffff12;backdrop-filter:blur(18px)}body[data-theme=light] .app-header{background:#ffffffed;border-color:#00000012}.brand{display:flex;align-items:center;gap:10px;font:700 15px 'Space Grotesk';letter-spacing:.4px}.brand small{display:block;color:var(--muted);font:500 10px 'DM Sans';letter-spacing:1px}.brand-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 20px #895cff77;font-size:22px}.custom-logo{max-height:34px;width:auto}.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:40px;height:40px;font-size:20px}.site-main{min-height:65vh}.hero{min-height:570px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding-block:65px 50px;overflow:hidden}.eyebrow{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:2px}.hero h1,.page-wrap h1{font:700 clamp(38px,6vw,68px)/1.04 'Space Grotesk';letter-spacing:-2px;margin:18px 0}.hero h1 em,h2 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),#8790ff,var(--purple));background-clip:text;color:transparent}.hero-copy>p{max-width:520px;color:var(--muted);font-size:17px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:13px;padding:13px 20px;font-weight:800;transition:.2s transform,.2s box-shadow}.btn:hover{transform:translateY(-3px);box-shadow:var(--glow)}.btn-primary{color:white;background:linear-gradient(110deg,var(--blue),var(--purple));box-shadow:0 9px 28px #6e59ff40}.btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text)}.btn-small{padding:9px 14px;background:var(--surface2);border:1px solid var(--line);font-size:12px}.hero-stats{display:flex;gap:32px;margin-top:48px;color:var(--muted);font-size:9px;letter-spacing:1px}.hero-stats b{display:block;color:var(--text);font:700 20px 'Space Grotesk'}.hero-art{height:380px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #7b73ff55;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:340px;height:210px;box-shadow:0 0 40px #6a59ff22}.orbit-two{width:250px;height:340px;transform:rotate(35deg);border-color:#28e0e655}.game-cube{width:170px;height:170px;border-radius:45px;display:grid;place-items:center;font-size:100px;color:white;background:linear-gradient(145deg,#2ce3e8,#555cff 55%,#a34dff);box-shadow:0 25px 90px #615cff66,inset 0 2px 12px #ffffff88;transform:rotate(-12deg);animation:float 4s ease-in-out infinite}.float-chip{position:absolute;padding:10px 15px;border:1px solid #ffffff28;border-radius:12px;background:#171c31d9;font-size:10px;font-weight:800;letter-spacing:1px;box-shadow:var(--glow)}.chip-a{top:65px;right:10px}.chip-b{bottom:60px;left:20px}@keyframes float{50%{transform:translateY(-15px) rotate(-5deg)}}.section{padding-block:45px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section-head h2,.daily-callout h2{font:700 clamp(27px,4vw,38px)/1.15 'Space Grotesk';margin:8px 0}.section-head p{color:var(--muted);margin:4px 0}.text-link{color:var(--cyan);font-weight:700;font-size:13px}.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.game-card{min-height:220px;padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,var(--surface2),var(--surface));position:relative;overflow:hidden;transition:.25s}.game-card:hover{transform:translateY(-5px);border-color:#7472ff;box-shadow:var(--glow)}.game-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#5267ff66,#a34dff66);font-size:26px;margin-bottom:18px}.game-card small{color:var(--cyan);font-size:8px;letter-spacing:1px;font-weight:800}.game-card h3{font:700 17px 'Space Grotesk';margin:5px 0}.game-card p{color:var(--muted);font-size:12px;line-height:1.5}.game-card>b{font-size:11px;color:var(--cyan)}.quiz-section{padding-top:65px}.quiz-best{display:flex;align-items:center;gap:10px;padding:12px 17px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:20px}.quiz-best span{font-size:9px;color:var(--muted);letter-spacing:1px}.quiz-best b{font-size:18px;color:var(--text)}.quiz-panel{padding:25px;border-radius:24px;background:linear-gradient(140deg,#17213b,#111827 65%,#24183e);border:1px solid #5457a055;box-shadow:var(--glow);max-width:850px;margin:auto}.quiz-top{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1px}.quiz-top b{color:var(--cyan);font-size:15px}.quiz-progress{height:5px;background:#ffffff16;border-radius:9px;margin:15px 0 28px;overflow:hidden}.quiz-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));transition:width .3s}.quiz-welcome{text-align:center;padding:12px 0 20px}.quiz-emblem{width:66px;height:66px;border-radius:22px;background:linear-gradient(135deg,var(--blue),var(--purple));display:grid;place-items:center;margin:0 auto 15px;font-size:30px;box-shadow:0 0 30px #7e59ff66}.quiz-welcome h3{font:700 25px 'Space Grotesk';margin:8px}.quiz-welcome p{color:#aab4ca}.difficulty{display:flex;justify-content:center;gap:8px;margin:20px}.difficulty button{border:1px solid #ffffff22;background:#ffffff0a;border-radius:10px;padding:8px 16px;color:white}.difficulty button.selected{background:#625cff;border-color:#9c8dff}.question-count{font-size:10px;color:var(--cyan);letter-spacing:1px}.question-title{font:700 23px 'Space Grotesk';margin:12px 0 20px}.answer-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-option{background:#ffffff0b;border:1px solid #ffffff20;border-radius:12px;padding:14px;text-align:left;color:white}.answer-option:hover{border-color:var(--cyan)}.answer-option:disabled{cursor:default}.answer-option.correct{background:#168b6844;border-color:#30dba4}.answer-option.wrong{background:#c33b5544;border-color:#ff6680}.answer-feedback{color:#c6d0e5;min-height:25px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mini-card,.page-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:22px}.mini-card h3,.page-card h2{font:700 20px 'Space Grotesk';margin:0 0 4px}.mini-card>p{color:var(--muted);font-size:13px}.memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:15px 0}.memory-card{height:48px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);font-size:21px}.memory-card.revealed{background:#4e58a8;border-color:#9c8dff}.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:190px;margin:14px 0}.ttt-board button{height:55px;border:1px solid var(--line);background:var(--surface2);border-radius:9px;font-size:25px;font-weight:800}.game-status{min-height:22px;color:var(--cyan)!important;font-size:12px}.number-game{display:flex;gap:8px;margin:20px 0}.number-game input{width:100px}.mini-card input,.page-card input,.page-card textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px;max-width:100%}.reaction-box{width:100%;height:80px;border:1px solid var(--line);border-radius:12px;background:#8d3d55;font-weight:800}.reaction-box.go{background:#0a9a70}.wheel-wrap{display:grid;place-items:center;margin:10px}.wheel{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;font-size:35px;background:conic-gradient(var(--cyan),var(--blue),var(--purple),var(--red),var(--cyan));box-shadow:0 0 25px #635cff55}.wheel.spin{animation:spin .7s ease-out}@keyframes spin{to{transform:rotate(720deg)}}.daily-callout{margin-top:30px;padding:32px;border-radius:22px;background:linear-gradient(110deg,#25265a,#172a40);border:1px solid #5659a866;display:flex;align-items:center;justify-content:space-between;gap:20px}.daily-callout p,.rate-section p{color:#bac5db}.rate-section{text-align:center}.site-footer{text-align:center;padding:35px 20px 25px;color:var(--muted);font-size:12px}.site-footer div{display:flex;justify-content:center;gap:18px}.bottom-nav{display:none}.drawer-shade{position:fixed;z-index:39;inset:0;background:#02040bcc;opacity:0;visibility:hidden;transition:.25s}.drawer-shade.show{opacity:1;visibility:visible}.app-drawer{position:fixed;z-index:40;inset:0 auto 0 0;width:min(330px,86vw);background:var(--surface);border-right:1px solid var(--line);padding:20px;transform:translateX(-105%);transition:transform .3s ease;display:flex;flex-direction:column}.app-drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;gap:12px;padding-bottom:25px;border-bottom:1px solid var(--line)}.drawer-head small{display:block;color:var(--muted);font-size:11px}.drawer-head .menu-close{margin-left:auto}.drawer-links{display:grid;gap:7px;padding-top:20px}.drawer-links a,.drawer-links button{display:flex;align-items:center;gap:14px;padding:13px;border:0;border-radius:12px;background:transparent;text-align:left;font-weight:600;color:var(--text)}.drawer-links a:hover,.drawer-links button:hover{background:var(--surface2);color:var(--cyan)}.drawer-links span{font-size:14px}.drawer-foot{margin-top:auto;color:var(--muted);font-size:11px}.okwin-loader{position:fixed;z-index:100;inset:0;background:#080b14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s,visibility .4s}.okwin-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}.loader-mark{font:800 34px 'Space Grotesk';letter-spacing:3px}.loader-mark span{color:var(--cyan)}.loader-track{width:180px;height:4px;background:#ffffff20;border-radius:8px;overflow:hidden}.loader-track i{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple));animation:load 1s ease-in-out infinite alternate}.okwin-loader small{color:#8d9bb5;font-size:9px;letter-spacing:2px}@keyframes load{to{width:100%}}.page-wrap{padding-block:55px;max-width:900px}.page-wrap h1{font-size:clamp(34px,5vw,52px)}.page-card{margin:22px 0;line-height:1.75}.page-card label{display:grid;gap:6px;margin:14px 0;font-weight:600}.page-card input,.page-card textarea{width:100%}.page-card details{border-top:1px solid var(--line);padding:12px 0}.page-card summary{cursor:pointer;font-weight:700}.ref-code{padding:18px;margin:20px 0;background:var(--surface2);border:1px dashed var(--purple);border-radius:14px;display:grid}.ref-code small{color:var(--muted)}.ref-code strong{font:700 28px 'Space Grotesk';letter-spacing:3px}.setting-row{display:flex!important;align-items:center;justify-content:space-between}.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.post-grid img,.page-card>img{max-width:100%;height:auto;border-radius:12px}.reduce-motion *{animation:none!important;transition:none!important}
@media(max-width:900px){.game-grid{grid-template-columns:repeat(3,1fr)}.hero{min-height:500px}.mini-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){body{padding-top:62px;padding-bottom:75px}.app-header{height:62px;padding:0 14px}.brand{font-size:13px;gap:7px}.brand-icon{width:31px;height:31px}.icon-btn{width:37px;height:37px}.wrap{width:calc(100% - 30px)}.hero{display:block;padding-top:50px;min-height:0}.hero h1{font-size:43px}.hero-copy>p{font-size:14px}.hero-art{height:260px;margin-top:15px}.game-cube{width:125px;height:125px;font-size:75px;border-radius:35px}.orbit-one{width:260px;height:160px}.orbit-two{height:260px;width:190px}.chip-a{top:28px;right:0}.chip-b{bottom:25px;left:0}.hero-stats{gap:20px;margin-top:30px}.section{padding-block:32px}.section-head{align-items:start}.game-grid{grid-template-columns:repeat(2,1fr);gap:9px}.game-card{min-height:190px;padding:14px;border-radius:16px}.game-card h3{font-size:15px}.game-card p{font-size:11px}.game-symbol{width:42px;height:42px}.quiz-panel{padding:17px;border-radius:18px}.answer-list{grid-template-columns:1fr}.question-title{font-size:19px}.mini-grid{grid-template-columns:1fr}.daily-callout{display:block;padding:23px}.daily-callout .btn{margin-top:12px}.quiz-best{padding:8px 10px}.bottom-nav{position:fixed;z-index:25;inset:auto 0 0;height:68px;display:flex;justify-content:space-around;align-items:center;background:#0d1220f2;border-top:1px solid #ffffff18;backdrop-filter:blur(16px);padding-bottom:env(safe-area-inset-bottom)}body[data-theme=light] .bottom-nav{background:#ffffffef;border-color:#00000016}.bottom-nav a,.bottom-nav button{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;background:none;border:0;color:var(--muted)}.bottom-nav b{font-size:20px;line-height:1.2}.bottom-nav small{font-size:9px;font-weight:700}.bottom-nav .active{color:var(--cyan)}.site-footer{padding-bottom:18px}.page-wrap{padding-top:35px}.post-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* =========================================================
   RED / BLACK / YELLOW EDITION — polished visual refresh
   ========================================================= */
:root{
  --bg:#090909;
  --surface:#151515;
  --surface2:#202020;
  --text:#fffdf5;
  --muted:#b7b3a8;
  --line:#38352c;
  --cyan:#ffd21f;
  --blue:#ff4a1c;
  --purple:#ffb800;
  --red:#ff3b30;
  --glow:0 12px 38px #ffbf0030;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 82% 0%,#7c3c002b,transparent 34%),
    radial-gradient(ellipse at 0% 28%,#d7a90012,transparent 32%),
    var(--bg);
}
body[data-theme=light]{
  --bg:#f7f5ed;--surface:#fffdf7;--surface2:#f0ead8;
  --text:#17140b;--muted:#665f4d;--line:#ded5bd;
  --cyan:#a56b00;--blue:#c83219;--purple:#e5a900;--red:#d92c20;
  --glow:0 12px 34px #c28b0020;
  background:radial-gradient(ellipse at 82% 0%,#ffe7a0,transparent 42%),var(--bg);
}
.app-header{
  background:#090909ed;
  border-bottom:1px solid #ffd21f2b;
  box-shadow:0 8px 28px #0005;
}
body[data-theme=light] .app-header{background:#fffdf2ed;border-color:#b68a2633}
.brand-icon{
  color:#111;
  background:linear-gradient(135deg,#fff06a,#ffbf00 55%,#ff5a1f);
  box-shadow:0 0 24px #ffbf0055;
}
.brand{letter-spacing:.7px}
.icon-btn{transition:.2s ease}
.icon-btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}
.eyebrow{color:var(--cyan)}
.hero{min-height:555px}
.hero h1 em,.section-head h2 em,.daily-callout h2 em{
  background:linear-gradient(95deg,#fff06a 0%,#ffc400 45%,#ff552c 100%);
  background-clip:text;-webkit-background-clip:text;color:transparent;
}
.btn-primary{
  color:#171000;
  background:linear-gradient(110deg,#fff06a,#ffc400 58%,#ff8a24);
  box-shadow:0 9px 28px #ffb80035;
}
.btn-primary:hover{box-shadow:0 12px 34px #ffb80055}
.btn-ghost{border-color:#51452a}
.text-link{color:var(--cyan)}
.game-card{
  background:
    radial-gradient(circle at 100% 0%,#ffbf0014,transparent 46%),
    linear-gradient(150deg,var(--surface2),var(--surface));
  border-color:#554622;
}
.game-card:hover{border-color:#ffc400;box-shadow:0 16px 38px #ffbf0026}
.game-symbol{
  color:#171000;
  background:linear-gradient(135deg,#fff06a,#ffc400 60%,#ff7028);
  box-shadow:0 8px 22px #ffbf0025;
}
.game-card h3,.mini-card h3{font-family:'Space Grotesk',sans-serif}
.quiz-panel,.mini-card,.page-card,.daily-callout{
  border-color:#514326;
  box-shadow:0 16px 45px #0003;
}
.quiz-panel{
  background:
    radial-gradient(ellipse at 100% 0%,#ffbf0014,transparent 48%),
    var(--surface);
}
.quiz-emblem,.quiz-best{color:var(--cyan)}
.difficulty button.selected{
  color:#171000;background:var(--cyan);border-color:var(--cyan);
}
.quiz-progress i{background:linear-gradient(90deg,#fff06a,#ffc400,#ff572d)}
.answer-list button:hover,.answer-list button:focus-visible{
  border-color:var(--cyan);background:#ffc40012;
}
.answer-list button.correct{border-color:#8ccf55;background:#8ccf5518}
.answer-list button.wrong{border-color:#ff5a4f;background:#ff5a4f16}
.mini-card{background:linear-gradient(155deg,var(--surface2),var(--surface))}
.memory-card,.ttt-board button,.number-game input{
  border-color:#5a4a27;background:#111;color:var(--text);
}
body[data-theme=light] .memory-card,
body[data-theme=light] .ttt-board button,
body[data-theme=light] .number-game input{background:#fff;color:var(--text)}
.memory-card.flipped,.memory-card.matched{
  background:linear-gradient(135deg,#fff06a,#ffc400)!important;color:#171000!important;
}
.reaction-box{border:1px solid #5a4a27;background:#242018}
.reaction-box.go{background:#277c38}
.wheel{
  border:7px solid #ffc400;
  background:conic-gradient(#ffc400 0 60deg,#ff5a24 60deg 120deg,#ffe875 120deg 180deg,#b72d1c 180deg 240deg,#ffcf36 240deg 300deg,#e75a20 300deg);
  color:#171000;
}
.daily-callout{
  background:
    radial-gradient(circle at 100% 0%,#ffc40020,transparent 45%),
    linear-gradient(120deg,var(--surface2),var(--surface));
}
.site-footer{border-top:1px solid #514326}
.bottom-nav{
  background:#0b0b0bf2;border-top:1px solid #ffd21f30;
  box-shadow:0 -8px 30px #0005;
}
body[data-theme=light] .bottom-nav{background:#fffdf2f5}
.bottom-nav a.active,.bottom-nav a:hover,.bottom-nav button:hover{color:var(--cyan)}
.app-drawer{background:#111;border-right:1px solid #514326}
body[data-theme=light] .app-drawer{background:#fffdf7}
.drawer-links a:hover,.drawer-links button:hover{background:#ffc40014;color:var(--cyan)}
.loader-mark span{color:#ffc400}
.loader-track i{background:linear-gradient(90deg,#fff06a,#ffc400,#ff552c)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid #ffd21f;outline-offset:3px;
}
button:disabled{opacity:.55;cursor:not-allowed}
img{max-width:100%;height:auto}
.page-card img{border-radius:14px}
#okwin-contact-form label{display:block;margin:14px 0;color:var(--muted)}
#okwin-contact-form input,#okwin-contact-form textarea{
  display:block;width:100%;margin-top:7px;padding:12px 14px;
  color:var(--text);background:var(--surface2);border:1px solid var(--line);border-radius:12px;
}
#okwin-contact-form input:focus,#okwin-contact-form textarea:focus{border-color:var(--cyan)}
@media(max-width:900px){
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{min-height:500px}
}
@media(max-width:620px){
  body{padding-top:64px;padding-bottom:76px}
  .app-header{height:64px;padding-inline:14px}
  .wrap{width:min(100% - 28px,1160px)}
  .hero{grid-template-columns:1fr;min-height:unset;padding-block:48px 22px}
  .hero h1{font-size:clamp(38px,11vw,56px);letter-spacing:-1.5px}
  .hero-copy>p{font-size:15px}
  .hero-art{height:235px;margin-top:8px}
  .game-cube{width:116px;height:116px;border-radius:32px;font-size:68px}
  .orbit-one{width:245px;height:150px}.orbit-two{width:180px;height:245px}
  .chip-a{top:28px;right:4px}.chip-b{bottom:24px;left:0}
  .hero-stats{gap:18px;margin-top:30px}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game-card{min-height:195px;padding:15px;border-radius:16px}
  .game-card h3{font-size:17px}
  .game-card p{font-size:12px}
  .section{padding-block:30px}
  .section-head{align-items:flex-start}
  .mini-grid{grid-template-columns:1fr}
  .mini-card{padding:17px}
  .bottom-nav{height:66px}
  .page-wrap{padding-top:28px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}