:root{color-scheme:dark;--bg:#081a2c;--card:#102a43;--card2:#143452;--line:#23496d;--ink:#eaf2f9;--mut:#9ab3c8;--acc:#4aa3ff;--acc-ink:#04182a;--acc2:#ffc857;--bad:#ff8a8a;--ok:#46d6a0}
:root[data-theme=light]{color-scheme:light;--bg:#f2f7fc;--card:#fff;--card2:#e8f1fa;--line:#cfdeec;--ink:#0b2238;--mut:#4a657b;--acc:#1665d8;--acc-ink:#fff;--acc2:#9a5b00;--bad:#c62828;--ok:#0b7a53}
@media(prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#f2f7fc;--card:#fff;--card2:#e8f1fa;--line:#cfdeec;--ink:#0b2238;--mut:#4a657b;--acc:#1665d8;--acc-ink:#fff;--acc2:#9a5b00;--bad:#c62828;--ok:#0b7a53}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable;overscroll-behavior-x:none}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);overflow-wrap:anywhere}
.w{max-width:880px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
body.g .w{max-width:640px}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px}
.hr{display:flex;align-items:center;gap:6px}
.logo{font-weight:800;font-size:20px;color:var(--acc);text-decoration:none}
.hl{color:var(--mut);padding:10px 6px;text-decoration:none}
.ib{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;padding:0}
h1{font-size:30px;line-height:1.2;margin:20px 0 6px}h2{font-size:18px;margin:28px 0 10px}
p{color:var(--mut);margin:4px 0 12px}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* stabilitas sentuhan: hanya untuk elemen interaktif & area game */
.btn,.opt,.card,.chip,.ib,.fav,#game,.hero,.stat{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none;user-drag:none;max-width:100%}
#game{overscroll-behavior-y:contain}
.hero{padding:8px 0 4px}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.btns .btn{margin:0}.btns .wide{grid-column:1/-1}
.btn{display:block;width:100%;min-height:52px;border:0;border-radius:12px;background:var(--acc);color:var(--acc-ink);font:700 17px/1.2 system-ui,sans-serif;margin:10px 0;padding:12px;cursor:pointer;text-align:center;text-decoration:none;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.cont{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:12px 16px;border-radius:14px;background:var(--card2);border:1px solid var(--line);color:var(--ink);text-decoration:none;margin:10px 0}
.cont b{color:var(--acc)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:22px;color:var(--acc2);line-height:1.3}.stat span{font-size:12px;color:var(--mut)}
.daily{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.daily b{font-size:16px}.daily p{margin:4px 0 8px;color:var(--ink)}
.bar{height:8px;background:var(--card2);border-radius:8px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:var(--acc);width:100%;transition:width .2s linear}
.search{display:block;width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:16px system-ui,sans-serif;padding:10px 14px;margin:8px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.chip{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:15px system-ui,sans-serif;cursor:pointer}
.chip[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc);font-weight:700}
.ls{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;animation:in .16s ease-out}
.card:hover,.card:focus-within{border-color:var(--acc)}
.cm{display:flex;gap:12px;align-items:flex-start;padding:14px 56px 14px 14px;color:inherit;text-decoration:none;min-height:88px;border-radius:14px}
.ic{font-size:28px;line-height:1.1}.tx{display:block;min-width:0}.tx b{display:block;font-size:17px}.tx small{display:block;color:var(--mut)}
.meta{display:block;font-size:12px;color:var(--mut);margin-top:6px}
.card.off{opacity:.7}.card.off .cm{cursor:default}
.fav{position:absolute;top:4px;right:4px;width:48px;height:48px;border:0;background:transparent;color:var(--acc);font-size:24px;cursor:pointer;border-radius:12px}
.empty{color:var(--mut);padding:16px 0}
.ach{list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ach b{display:block;font-size:15px}.ach small{color:var(--mut)}.ach:not(.on){opacity:.75}
.achs{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.top{display:flex;justify-content:space-between;color:var(--mut);font-size:14px;gap:8px}
.q{font-size:20px;font-weight:700;margin:16px 0;min-height:3em}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;min-height:52px;text-align:left;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:16px/1.4 system-ui,sans-serif;margin:8px 0;padding:12px 14px;cursor:pointer}
.opt .k{flex:none;width:24px;height:24px;border-radius:50%;background:var(--card2);color:var(--mut);font-size:13px;line-height:24px;text-align:center}
.opt:disabled{cursor:default;color:var(--ink);opacity:1}
.opt.ok{border-color:var(--ok);background:rgba(70,214,160,.16);animation:pop .18s ease-out}
.opt.ok .k::before{content:"✓"}.opt.ok .k{font-size:0;background:var(--ok);color:#04182a}.opt.ok .k::before{font-size:14px}
.opt.no{border-color:var(--bad);background:rgba(255,107,107,.16)}
.opt.no .k{font-size:0;background:var(--bad)}.opt.no .k::before{content:"✗";font-size:14px;color:#04182a}
.dock{position:sticky;bottom:0;padding:8px 0 max(8px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 14px)}
.exp{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--mut);margin:0 0 8px}
.big{font-size:56px;font-weight:800;color:var(--acc2);text-align:center;margin:8px 0}
.row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.newach{color:var(--ink);background:var(--card2);border-radius:10px;padding:8px 12px;margin:8px 0}
.note{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);margin:10px 0}
footer{color:var(--mut);font-size:12px;text-align:center;padding:24px 0}
[hidden]{display:none!important}
/* admin */
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:12px 0}
.panel h2{margin-top:4px}
.in{display:block;width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:16px system-ui,sans-serif;padding:10px 14px;margin:8px 0}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl td,.tbl th{padding:6px 4px;border-bottom:1px solid var(--line);text-align:left}
.err{color:var(--bad)}.okc{color:var(--ok)}
.log{max-height:240px;overflow:auto;font:13px/1.4 ui-monospace,monospace;background:var(--bg);border-radius:10px;padding:8px;white-space:pre-wrap;-webkit-user-select:text;user-select:text}
.sel{-webkit-user-select:text;user-select:text}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.two .btn{margin:0}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pop{50%{transform:scale(1.02)}}
@media(max-width:360px){.btns{grid-template-columns:1fr}h1{font-size:26px}}
@media(orientation:landscape) and (max-height:520px){.w{padding-top:8px}h1{font-size:22px;margin:8px 0 4px}.q{font-size:18px;margin:8px 0;min-height:0}#opts{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.big{font-size:40px;margin:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* memory */
.mem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:320px;margin:16px auto}
.tile{aspect-ratio:1;min-height:84px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--mut);font:700 20px system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.tile:disabled{cursor:default;opacity:1}
.tile.lit{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.tile.lit::after{content:" ●"}
.tile.bad{border-color:var(--bad);background:rgba(255,107,107,.2)}
.mt{text-align:center;color:var(--ink);min-height:1.5em}
/* portal */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
body:not(.g) .w{max-width:1120px}
html,body{touch-action:manipulation}
body{overflow-x:clip}
:root{--r:18px;--sh:0 6px 18px rgba(2,12,27,.28)}
:root[data-theme=light]{--sh:0 6px 16px rgba(16,52,92,.14)}
body:not(.g){background:radial-gradient(900px 420px at 85% -120px,rgba(74,163,255,.18),transparent 70%),var(--bg)}
body:not(.g) header{position:sticky;top:0;z-index:5;margin:0 -16px;padding:6px 16px;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.logo{letter-spacing:.3px}
/* hero */
body:not(.g) .hero{position:relative;overflow:hidden;margin:10px 0 4px;padding:20px 18px 12px;border-radius:22px;background:linear-gradient(135deg,#0a4fb8,#1488d8 55%,#14d4c4);color:#fff;box-shadow:var(--sh)}
body:not(.g) .hero::before{content:"";position:absolute;inset:auto 0 0 0;height:70px;opacity:.35;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 22q15-14 30 0t30 0 30 0 30 0v18H0z' fill='white' fill-opacity='.35'/%3E%3C/svg%3E") repeat-x bottom/120px 40px}
body:not(.g) .hero h1{margin:4px 0 4px;font-size:clamp(26px,5vw,38px);color:#fff;position:relative}
body:not(.g) .hero p{color:rgba(255,255,255,.88);position:relative;margin:0 0 6px}
.hero .btns{position:relative;margin:12px 0 8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hero .btn{box-shadow:0 3px 10px rgba(2,12,27,.22)}
.hero .btn:not(.alt){background:#fff;color:#0a4fb8}
.hero .btn.alt{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}
.hero .cont{position:relative;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.hero .cont b{color:#fff}
h2{display:flex;align-items:center;gap:8px;font-size:19px;margin:26px 0 8px}
/* kontrol */
.search{border-radius:14px;background:var(--card)}
.chips{gap:6px;margin:6px 0 2px}
.chip{min-height:38px;padding:4px 14px;font-size:14px}
#count{margin:6px 0 0;font-size:13px}
/* grid game */
.gl{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.gl{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(min-width:900px){.gl{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media(min-width:1180px){.gl{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gc{position:relative;display:flex;flex-direction:column;gap:0;padding:6px 6px 8px;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;animation:fade .18s ease-out;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.gc .ic{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:calc(var(--r) - 6px);overflow:hidden;font-size:clamp(40px,11vw,52px);line-height:1;background:var(--m,none),radial-gradient(120px 80px at 20% 10%,rgba(255,255,255,.28),transparent 70%),linear-gradient(135deg,var(--g1,#2f7bff),var(--g2,#14d4c4));background-size:auto,auto,auto}
.gc .ic::before{content:"";position:absolute;width:70%;aspect-ratio:1;right:-18%;bottom:-48%;border-radius:50%;background:rgba(255,255,255,.16)}
.gc .ic::after{content:"";position:absolute;width:38%;aspect-ratio:1;left:-10%;top:-30%;border-radius:50%;background:rgba(255,255,255,.12)}
.gc .ic{text-shadow:0 6px 14px rgba(0,0,0,.28)}
.gc .ic>*{position:relative}
.gc b{display:block;margin:8px 6px 0;font-size:15px;line-height:1.25;padding:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
.gc small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 6px 0;font-size:12px;line-height:1.35;color:var(--mut);flex:1}
.gc .lv{margin:6px 6px 8px;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .btn{position:static;margin:0;min-height:40px;padding:8px;border-radius:12px;font-size:14px;letter-spacing:.6px}
.gc .btn::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.gc .btn:focus-visible{outline:none}
.gc:focus-within{outline:3px solid var(--acc);outline-offset:2px}
.gc .fav{top:10px;right:10px;width:40px;height:40px;z-index:2;border-radius:50%;background:rgba(6,20,36,.42);color:#fff;font-size:20px;line-height:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:0}
.gc .fav[aria-pressed=true]{color:#ff6b8a}
.gc:active{transform:scale(.97);box-shadow:0 2px 8px rgba(2,12,27,.25)}
.gc .ic{transition:transform .25s ease}
@media(hover:hover){
  .gc:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 12px 26px rgba(2,12,27,.34)}
  .gc:hover .ic{transform:scale(1.03)}
  .gc:hover .ic>*{animation:bob 1.4s ease-in-out infinite}
}
.fav:active{transform:scale(.9)}
/* statistik & lain-lain */
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:620px){.stats{grid-template-columns:repeat(6,minmax(0,1fr))}}
.stat{border-radius:14px;padding:10px 6px}
.stat b{font-size:21px}
.daily{border-radius:16px}
details.ds{margin:20px 0}details.ds summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:700;list-style:none}
details.ds summary::-webkit-details-marker{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bob{50%{transform:translateY(-4px) rotate(-4deg)}}
/* area interaktif tetap bisa ditekan & tidak memilih teks; input/log tetap bisa dipilih */
.gc,.gc *,.chip,.ib,.hero .btn,.cont,.logo,.tile,.opt,.dock .btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,.log,.sel{-webkit-user-select:text;user-select:text}
a,button,.gc,.chip{-webkit-tap-highlight-color:transparent}
@media(prefers-reduced-motion:reduce){.gc,.gc:hover,.gc:active{transform:none}.gc:hover .ic>*{animation:none}}

/* warna & motif tiap game (data-URI SVG diizinkan CSP: img-src data:) */
.gc[data-g="tebak-logika"],#game[data-g="tebak-logika"]{--g1:#2f7bff;--g2:#6a3df0;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2736%27%20height=%2736%27%3E%3Cpath%20d=%27M18%204l12%207v14l-12%207-12-7V11z%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="tebak-tebakan"],#game[data-g="tebak-tebakan"]{--g1:#ff8a3d;--g2:#ff3d81;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%272.2%27%20fill=%27white%27%20fill-opacity=%27.18%27/%3E%3C/svg%3E")}
.gc[data-g="siapa-bohong"],#game[data-g="siapa-bohong"]{--g1:#7b3df0;--g2:#c13dd6;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%3E%3Cpath%20d=%27M0%2020L20%200%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="tantangan-60-detik"],#game[data-g="tantangan-60-detik"]{--g1:#ffb300;--g2:#ff5a1f;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2734%27%20height=%2734%27%3E%3Cpath%20d=%27M17%207l10%2018H7z%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="cerdas-cermat"],#game[data-g="cerdas-cermat"]{--g1:#13b98f;--g2:#1a7fd1;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2740%27%3E%3Cpath%20d=%27M20%208l3%207%207%20.6-5.4%204.6%201.7%207.2L20%2023.7%2013.7%2027.4l1.7-7.2L10%2015.6l7-.6z%27%20fill=%27white%27%20fill-opacity=%27.18%27/%3E%3C/svg%3E")}
.gc[data-g="puzzle"],#game[data-g="puzzle"]{--g1:#e0457b;--g2:#8e3df0;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2730%27%20height=%2730%27%3E%3Crect%20x=%277%27%20y=%277%27%20width=%2716%27%20height=%2716%27%20rx=%274%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="tebak-pola"],#game[data-g="tebak-pola"]{--g1:#17a2d8;--g2:#2f4bff;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2730%27%20height=%2730%27%3E%3Cpath%20d=%27M15%209v12M9%2015h12%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="detektif"],#game[data-g="detektif"]{--g1:#2c3e8f;--g2:#0f9bb5;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2744%27%20height=%2744%27%3E%3Ccircle%20cx=%2722%27%20cy=%2722%27%20r=%2714%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3Ccircle%20cx=%2722%27%20cy=%2722%27%20r=%276%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="memory-challenge"],#game[data-g="memory-challenge"]{--g1:#8a3df0;--g2:#2f7bff;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2732%27%20height=%2732%27%3E%3Crect%20width=%2716%27%20height=%2716%27%20fill=%27white%27%20fill-opacity=%27.18%27/%3E%3Crect%20x=%2716%27%20y=%2716%27%20width=%2716%27%20height=%2716%27%20fill=%27white%27%20fill-opacity=%27.18%27/%3E%3C/svg%3E")}
.gc[data-g="cepat-tepat"],#game[data-g="cepat-tepat"]{--g1:#ff4d4d;--g2:#ff9a1f;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720%27%20height=%2720%27%3E%3Cpath%20d=%27M0%2020L20%200%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="pilih-tepat"],#game[data-g="pilih-tepat"]{--g1:#12a7a0;--g2:#3a8f3f;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2744%27%20height=%2744%27%3E%3Ccircle%20cx=%2722%27%20cy=%2722%27%20r=%2714%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3Ccircle%20cx=%2722%27%20cy=%2722%27%20r=%276%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="benar-salah"],#game[data-g="benar-salah"]{--g1:#2fbf6b;--g2:#12a3c7;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2730%27%20height=%2730%27%3E%3Cpath%20d=%27M15%209v12M9%2015h12%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc[data-g="ombak-mix"],#game[data-g="ombak-mix"]{--g1:#0a84ff;--g2:#14d4c4;--m:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2740%27%20height=%2740%27%3E%3Cpath%20d=%27M0%2020q10-12%2020%200t20%200%27%20fill=%27none%27%20stroke=%27white%27%20stroke-opacity=%27.22%27%20stroke-width=%272%27/%3E%3C/svg%3E")}
.gc .btn:active{transform:none}
/* penyempurnaan compact */
.gc .btn{display:flex;align-items:center;justify-content:center;min-height:38px}
.gc b{min-height:0;margin-top:8px}
.gc small{flex:0 0 auto}
.gc .lv{margin-bottom:8px}
@media(max-width:619px){.gc small{display:none}.gc b{font-size:14.5px;-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}.gc .ic{aspect-ratio:3/2}}
.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin-left:-16px;margin-right:-16px;padding:2px 16px}
.chips::-webkit-scrollbar{display:none}.chip{flex:none;white-space:nowrap}
@media(max-width:619px){.gc b{display:-webkit-box;-webkit-line-clamp:2;white-space:normal;font-size:14px;line-height:1.25}}
body:not(.g) header{position:static;margin:0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .btn{display:flex;align-items:center;justify-content:center}

/* ===== UX game ===== */
body.g header{position:sticky;top:0;z-index:5;background:var(--bg);margin:0 -16px;padding:4px 16px;gap:6px}
.bk{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
.logo .lt{display:none}@media(min-width:560px){.logo .lt{display:inline}}
header .logo{flex:1;min-width:0;text-align:left;margin-left:2px}
body:not(.g) header .lg{display:flex;align-items:center;gap:8px}
.age{display:inline-block;padding:2px 8px;border-radius:999px;border:1.5px solid var(--bad);color:var(--bad);font-size:12px;font-weight:800;line-height:1.4}
/* intro game */
#intro{margin-top:6px}
.gh{display:flex;align-items:center;gap:12px;margin:6px 0 10px;padding:14px 16px;border-radius:18px;color:#fff;font-size:22px;line-height:1.2;background:var(--m,none),linear-gradient(135deg,var(--g1,#2f7bff),var(--g2,#14d4c4));box-shadow:var(--sh)}
.gi{font-size:40px;line-height:1;text-shadow:0 4px 10px rgba(0,0,0,.3)}
.gd{margin:0 0 4px;color:var(--ink)}
.gr{margin:0 0 8px;font-size:13.5px}
.gm{margin:4px 0 8px;font-size:14px;color:var(--mut)}.gm b{color:var(--acc2)}
.warn{margin:8px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--acc2);background:var(--card);color:var(--ink);font-size:13.5px;line-height:1.4}
#intro .btn{margin:8px 0}
/* bermain */
.top{align-items:center;font-weight:600;color:var(--ink)}
.pg{height:6px;background:var(--card2);border-radius:6px;overflow:hidden;margin:8px 0 4px}
.pg i{display:block;height:100%;width:0;background:var(--acc2);border-radius:6px;transition:width .25s ease}
.bar{height:5px;margin:4px 0}
.q{font-size:19px;margin:12px 0 10px;min-height:2.6em}
.opt{min-height:50px;margin:7px 0;border-radius:14px;transition:transform .08s,border-color .15s}
.opt:active:not(:disabled){transform:scale(.985);border-color:var(--acc)}
.opt .k{width:28px;height:28px;line-height:28px;font-weight:700;font-size:14px}
body.playing footer{display:none}
.dock .btn{margin:0}
/* hasil */
#result{text-align:center;margin-top:6px}
.rt{margin:8px 0 0;font-size:24px}
#result .big{font-size:60px;margin:2px 0 0}.rl{margin:0 0 10px}
.rg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 10px}
.rs{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 4px}
.rs b{display:block;font-size:17px;color:var(--acc2);line-height:1.3}.rs span{font-size:12px;color:var(--mut)}
.rd{margin:4px 0 8px;font-size:13px}
#result .btn{margin:8px 0}#result .two .btn{margin:0}
@media(max-width:380px){.rg{grid-template-columns:repeat(2,1fr)}}
/* modal */
.mo{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:rgba(3,12,24,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .15s ease-out}
.mb{width:100%;max-width:420px;max-height:100%;overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:18px 18px 12px;box-shadow:0 20px 50px rgba(0,0,0,.45);animation:in .18s ease-out;-webkit-user-select:none;user-select:none}
.mb h2{margin:0 0 8px;font-size:19px;display:block}
.mp{color:var(--ink);margin:6px 0}
.ml{margin:6px 0 6px;padding-left:20px;color:var(--ink);line-height:1.5}.ml li{margin:4px 0}
.ma{display:grid;gap:8px;margin-top:12px}.ma .btn{margin:0}
/* info */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin:10px 0}
details.faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq[open] summary{border-bottom:1px solid var(--line);margin-bottom:6px}
details.faq p,details.faq ul{color:var(--ink)}details.faq .ml{padding-left:18px}
nav.info{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
nav.info a{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
footer a{color:var(--mut)}