/* Tema konsol: 5 tema, transisi warna halus lewat @property (browser lama = ganti langsung). */
@property --page{syntax:'<color>';inherits:true;initial-value:#15171c}
@property --glow{syntax:'<color>';inherits:true;initial-value:#2f3342}
@property --a{syntax:'<color>';inherits:true;initial-value:#dcd8ca}
@property --b{syntax:'<color>';inherits:true;initial-value:#b8b3a1}
@property --hi{syntax:'<color>';inherits:true;initial-value:#ffffff99}
@property --tp{syntax:'<color>';inherits:true;initial-value:#5b5f70}
@property --tpb{syntax:'<color>';inherits:true;initial-value:#7c2d6b}
@property --za{syntax:'<color>';inherits:true;initial-value:#51556a}
@property --zb{syntax:'<color>';inherits:true;initial-value:#3a3d4e}
@property --zt{syntax:'<color>';inherits:true;initial-value:#c8c6d8}
@property --dp{syntax:'<color>';inherits:true;initial-value:#2d2f3a}
@property --ar{syntax:'<color>';inherits:true;initial-value:#6b6f80}
@property --b1{syntax:'<color>';inherits:true;initial-value:#d6336c}
@property --b2{syntax:'<color>';inherits:true;initial-value:#8e1f4d}
@property --bs{syntax:'<color>';inherits:true;initial-value:#4c0f2a}
@property --lb{syntax:'<color>';inherits:true;initial-value:#3d4163}
@property --sb{syntax:'<color>';inherits:true;initial-value:#6a6d7c}
@property --ss{syntax:'<color>';inherits:true;initial-value:#3a3c47}
@property --br{syntax:'<color>';inherits:true;initial-value:#2b3595}
@property --brs{syntax:'<color>';inherits:true;initial-value:#7c2d6b}
@property --gr{syntax:'<color>';inherits:true;initial-value:#8f8a78}
:root{--page:#15171c;--glow:#2f3342;--a:#dcd8ca;--b:#b8b3a1;--hi:#ffffff99;--tp:#5b5f70;--tpb:#7c2d6b;--za:#51556a;--zb:#3a3d4e;--zt:#c8c6d8;--dp:#2d2f3a;--ar:#6b6f80;--b1:#d6336c;--b2:#8e1f4d;--bs:#4c0f2a;--lb:#3d4163;--sb:#6a6d7c;--ss:#3a3c47;--br:#2b3595;--brs:#7c2d6b;--gr:#8f8a78;transition:--page .75s cubic-bezier(.4,0,.2,1),--glow .75s cubic-bezier(.4,0,.2,1),--a .75s cubic-bezier(.4,0,.2,1),--b .75s cubic-bezier(.4,0,.2,1),--hi .75s cubic-bezier(.4,0,.2,1),--tp .75s cubic-bezier(.4,0,.2,1),--tpb .75s cubic-bezier(.4,0,.2,1),--za .75s cubic-bezier(.4,0,.2,1),--zb .75s cubic-bezier(.4,0,.2,1),--zt .75s cubic-bezier(.4,0,.2,1),--dp .75s cubic-bezier(.4,0,.2,1),--ar .75s cubic-bezier(.4,0,.2,1),--b1 .75s cubic-bezier(.4,0,.2,1),--b2 .75s cubic-bezier(.4,0,.2,1),--bs .75s cubic-bezier(.4,0,.2,1),--lb .75s cubic-bezier(.4,0,.2,1),--sb .75s cubic-bezier(.4,0,.2,1),--ss .75s cubic-bezier(.4,0,.2,1),--br .75s cubic-bezier(.4,0,.2,1),--brs .75s cubic-bezier(.4,0,.2,1),--gr .75s cubic-bezier(.4,0,.2,1)}
:root[data-theme="atomic"]{--page:#120d22;--glow:#4a2f8f;--a:#8a63e0;--b:#5532b0;--hi:#ffffff66;--tp:#e6dcff;--tpb:#ffd166;--za:#2e2548;--zb:#1f1933;--zt:#cfc3f0;--dp:#2a1f4d;--ar:#9a8ad0;--b1:#ff7ab2;--b2:#c2185b;--bs:#6b0f38;--lb:#f1eaff;--sb:#3b2d6b;--ss:#241a46;--br:#ffffff;--brs:#ffd166;--gr:#4b2f94}
:root[data-theme="kiwi"]{--page:#0d1a10;--glow:#256b32;--a:#a5e05a;--b:#5fae2e;--hi:#ffffff77;--tp:#1f4d1a;--tpb:#b3135d;--za:#3e4a43;--zb:#2a342e;--zt:#d6e8d9;--dp:#26332a;--ar:#7d9a85;--b1:#ff5c8a;--b2:#c2185b;--bs:#6b0f38;--lb:#1f4d1a;--sb:#3d5a45;--ss:#263a2c;--br:#1f5a1a;--brs:#b3135d;--gr:#4f8f2a}
:root[data-theme="dandelion"]{--page:#1c1608;--glow:#6b5212;--a:#ffd94d;--b:#e5a800;--hi:#ffffff99;--tp:#6b4e00;--tpb:#1d4ed8;--za:#4a4a55;--zb:#33333d;--zt:#ece8d0;--dp:#2d2f3a;--ar:#7a7d8c;--b1:#4c6ef5;--b2:#2b3fa8;--bs:#16236b;--lb:#5a4200;--sb:#6f6a55;--ss:#4a4636;--br:#1d3fa8;--brs:#b45309;--gr:#b8860b}
:root[data-theme="midnight"]{--page:#07080b;--glow:#222642;--a:#3a3d4a;--b:#181a21;--hi:#ffffff2a;--tp:#8b90a5;--tpb:#ff4d4d;--za:#14151b;--zb:#0b0c10;--zt:#9aa0b8;--dp:#0f1015;--ar:#5a5f78;--b1:#ff4d4d;--b2:#b01e1e;--bs:#5a0d0d;--lb:#aab0c8;--sb:#2a2d3a;--ss:#12131a;--br:#ff4d4d;--brs:#aab0c8;--gr:#2a2d3a}

html{background:var(--page)}
body{background:radial-gradient(90% 55% at 50% 0,var(--glow),transparent 72%) no-repeat}

/* entrance + efek ganti tema */
#gb-case{position:relative;animation:rise .85s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
#gb-case:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;opacity:0;background:linear-gradient(112deg,transparent 35%,#ffffff66 50%,transparent 65%);transform:translateX(-110%)}
#gb-case.swap{animation:pop .7s cubic-bezier(.2,.8,.2,1)}
#gb-case.swap:after{animation:sheen .9s ease-out}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(.982) rotate(-.35deg)}70%{transform:scale(1.008) rotate(.15deg)}100%{transform:scale(1)}}
@keyframes sheen{0%{opacity:1;transform:translateX(-110%)}100%{opacity:1;transform:translateX(110%)}}
.btn-action,.btn-system,.dpad-btn{transition:transform .08s,box-shadow .08s,color .2s}

/* pemilih tema */
#themes{display:flex;align-items:center;gap:8px}
#themes button{width:15px;height:15px;padding:0;border-radius:50%;border:0;background:var(--dc);box-shadow:0 0 0 1.5px #0005,inset 0 1px #fff7;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
#themes button:hover{transform:scale(1.2)}
#themes button[aria-checked="true"]{transform:scale(1.3);box-shadow:0 0 0 2px var(--tp),0 0 8px var(--dc)}
#themes button:focus-visible{outline:2px solid var(--tpb);outline-offset:2px}
#logo-chip{display:inline-flex;vertical-align:middle;width:18px;height:18px;margin-right:6px;border-radius:5px;background:#f7f4ea;align-items:center;justify-content:center;box-shadow:0 1px 2px #0004}
#logo-chip img{width:13px;height:auto;display:block}
.toprow>span:first-child{display:flex;align-items:center}
#brand-links{display:block;margin-top:4px;font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--tp)}
#brand-links a{color:inherit;text-decoration:none;padding:4px 2px;touch-action:manipulation}
#brand-links a:hover,#brand-links a:focus-visible{color:var(--tpb);text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){:root{transition:none}#gb-case,#gb-case.swap,#gb-case.swap:after{animation:none}#themes button{transition:none}}

.toprow>span:first-child b{margin-left:.4em}
/* tautan footer tidak boleh tertutup kontainer tombol Select/Start yang diputar */
#footrow{position:relative;z-index:6}
#secondary-controls{pointer-events:none}
#secondary-controls .btn-system{pointer-events:auto}