* { box-sizing:border-box; }
body { margin:0; }
button, input { font:inherit; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { border:0; color:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button, a { transition:transform .12s var(--ease); }
button:not(.game-tile):active, a:active { transform:scale(.97); }
[hidden] { display:none!important; }
.skip-link { position:absolute; top:-100px; left:20px; padding:12px; background:var(--text); color:var(--base); z-index:20; }
.skip-link:focus { top:8px; }

.worlds, .world, .world-scrim { position:absolute; inset:0; overflow:hidden; }
.worlds { background:var(--base); }
.world { opacity:0; transition:opacity .45s var(--ease); pointer-events:none; }
.world.is-visible { opacity:1; animation:world-in .6s var(--ease); }
@keyframes world-in { from { transform:scale(1.04); } }
body.is-booting .world { transition:none; animation:none; }
.logika2-scene, .baca-scene, .cilukba-scene, .gambar-scene, .gelitik-scene, .bimo-scene, .bebek-scene, .kepingan-scene, .gerak-scene, .balap-scene, .kata-scene, .arung-scene, .robopos-scene, .pulau2-scene, .gelinding-scene, .kertas-scene { transform:translate(var(--px,0px),var(--py,0px)); transition:transform .5s var(--ease); will-change:transform; }
.world-backdrop { width:100%; height:100%; object-fit:cover; transform:translate(calc(var(--px,0px) * -.35),calc(var(--py,0px) * -.35)) scale(1.04); transition:transform .5s var(--ease); }
.world-scrim { background:linear-gradient(90deg,#07161df0 0%,#07161dd1 38%,#07161d1a 76%),linear-gradient(0deg,#0b2028 0%,#0b202870 19%,transparent 65%),linear-gradient(180deg,#06161dcc 0%,#06161da6 16%,transparent 42%); }
.world-logika2 .world-backdrop { object-position:50% 40%; }
.logika2-scene { position:absolute; top:12%; right:-4%; width:62%; height:86%; }
.logika2-valley { position:absolute; width:100%; left:0; top:44%; filter:drop-shadow(0 18px 26px #07161d38); }
.logika2-ranger { position:absolute; height:52%; left:40%; top:8%; }
.logika2-bitbot { position:absolute; height:20%; left:62%; top:34%; }
.world-logika2.is-visible .logika2-bitbot { animation:l2-hop .8s ease-in-out; }
@keyframes l2-hop { 0%, 55%, 100% { transform:translateY(0); } 70% { transform:translateY(-16%); } 85% { transform:translateY(0) scaleY(.94); } }
@media (prefers-reduced-motion: reduce) { .logika2-ranger, .logika2-bitbot { animation:none; } }
.baca-horizon, .baca-ground { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.baca-scene { position:absolute; right:0; top:3%; width:60%; height:96%; }
.baca-nara { position:absolute; width:85%; right:0; top:0; }
.baca-book { position:absolute; width:51%; left:0; bottom:3%; transform:rotate(-9deg); }

.console { position:relative; height:100%; display:grid; grid-template-rows:54px minmax(0,1fr) 32px; padding:0 clamp(20px,4cqw,90px); }
.topbar { display:flex; align-items:center; gap:24px; min-width:0; }
.wordmark { display:inline-flex; align-items:center; min-height:44px; font-size:1.15rem; font-weight:800; letter-spacing:-.8px; white-space:nowrap; }
.wordmark span { font-weight:400; }
.wordmark i { font-size:1.5rem; color:var(--accent); font-style:normal; }
.view-tabs { display:flex; gap:18px; align-items:center; }
.view-tab { position:relative; min-height:44px; min-width:44px; padding:5px 0; background:none; color:var(--muted); font-size:.75rem; white-space:nowrap; }
.view-tab.is-active { color:var(--text); font-weight:650; }
.view-tab.is-active:after { content:''; position:absolute; bottom:3px; left:0; right:0; height:2px; background:var(--text); }
.utilities { margin-left:auto; display:flex; align-items:center; gap:6px; }
.utility { display:flex; gap:8px; align-items:center; justify-content:center; min-width:44px; min-height:44px; background:transparent; padding:8px; border-radius:5px; font-size:.8rem; }
.utility:hover { background:#ffffff18; }
.search-icon { display:block; width:16px; height:16px; border:2px solid currentColor; border-radius:50%; position:relative; margin-right:5px; }
.search-icon:after { content:''; position:absolute; width:7px; height:2px; background:currentColor; right:-5px; bottom:-3px; transform:rotate(45deg); }
.parent-icon, .fullscreen-control span { font-size:1.5rem; line-height:1; }
.parent-control span:last-child, #clock { display:none; }
.main-screen { min-height:0; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:96px minmax(0,1fr); }
.shelf-section { min-height:0; min-width:0; padding-top:4px; }
.shelf-heading { display:none; align-items:center; gap:16px; font-size:.65rem; color:var(--muted); margin-bottom:10px; }
#game-count { padding-left:16px; border-left:1px solid #c5d3d661; }
.game-shelf { --fl:0px; --fr:0px; position:relative; display:flex; align-items:flex-start; gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:none;
  /* Padding leaves room for the lifted selected cover and its ring; the negative margin keeps the layout unchanged. */
  padding:18px 14px 6px; margin:-18px -14px -6px; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%); }
.game-shelf::-webkit-scrollbar { display:none; }
.game-shelf > * { pointer-events:auto; }
.game-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; background:none; padding:4px 0 0; width:60px; flex-shrink:0; }
.game-tile:focus-visible { outline:none; }
.cover { display:block; position:relative; width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden; isolation:isolate; box-shadow:0 0 0 1px #ffffff30; transform-origin:50% 100%; transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.game-tile:hover .cover { transform:translateY(-2px) scale(1.06); box-shadow:0 0 0 1px #ffffff60, 0 10px 20px #0006; }
.game-tile.is-selected .cover { transform:translateY(-3px) scale(1.14); box-shadow:0 0 0 2px var(--text), 0 0 0 6px #fffdf52e, 0 14px 28px #0008; }
.game-tile:focus-visible .cover { box-shadow:0 0 0 3px var(--accent), 0 0 0 7px #ffe2a540, 0 14px 28px #0008; }
.game-tile:active .cover { transform:scale(.96); transition-duration:.12s; }
.tile-label { font-size:.57rem; line-height:1.25; white-space:nowrap; color:#e4e9e7; transition:opacity .28s var(--ease); }
.game-tile:not(.is-selected) .tile-label { opacity:.72; }
.cover-logika2 { background:#9fd4ef url('assets/logika2-sky.webp') center/cover; }
.cover-l2-valley { position:absolute; width:190%; left:-58%; top:44%; }
.cover-l2-ranger { position:absolute; height:68%; left:30%; top:4%; }
.cover-name { font-family:Lilita,sans-serif; position:absolute; left:0; right:0; bottom:0; padding:15px 2px 5px; text-align:center; font-size:.46rem; line-height:.95; color:white; text-shadow:0 1px 5px #102a3c; background:linear-gradient(0deg,#091b22ed,transparent); }
.cover-name b { font-size:.64rem; font-weight:400; }
.cover-name small { display:none; }
.cover-baca { background:#73b3b3 url('assets/baca-sky.webp') center/cover; }
.cover-cilukba { background:#9bd17a url('assets/cilukba-garden.webp') 30% 75%/cover; }
.cover-kiki { position:absolute; height:80%; left:20%; top:5%; }
.world-cilukba .world-backdrop { object-position:35% 65%; }
.cilukba-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.cilukba-bush { position:absolute; width:66%; right:6%; bottom:2%; }
.cilukba-kiki { position:absolute; height:58%; right:44%; bottom:14%; }
.cover-gambar { background:#8fbfe6 url('assets/gambar-room.webp') 62% 70%/cover; }
.cover-momo { position:absolute; height:78%; left:14%; top:4%; }
/* The only three-word title: let its label wrap instead of running into the next tile. */
.game-tile[data-game="gambar"] .tile-label { white-space:normal; text-align:center; width:calc(100% + 12px); }
.world-gambar .world-backdrop { object-position:60% 60%; }
.gambar-scene { position:absolute; right:2%; top:12%; width:52%; height:86%; }
.gambar-easel { position:absolute; height:62%; right:7%; bottom:10%; }
.gambar-momo { position:absolute; height:48%; right:38%; bottom:6%; }
.cover-gelitik { background:#f3d9a4 url('assets/gelitik-room.webp') 45% 80%/cover; }
.cover-bobo { position:absolute; height:76%; left:22%; top:6%; }
.world-gelitik .world-backdrop { object-position:40% 70%; }
.gelitik-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.gelitik-bobo { position:absolute; height:50%; right:30%; bottom:8%; }
.gelitik-feather { position:absolute; height:24%; right:14%; bottom:36%; transform:rotate(-18deg); }
.cover-bimo { background:#bfe6a6 url('assets/bimo-yard.webp') 55% 75%/cover; }
.cover-bimo-img { position:absolute; height:76%; left:22%; top:6%; }
.world-bimo .world-backdrop { object-position:45% 70%; }
.bimo-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.bimo-bimo { position:absolute; height:46%; right:36%; bottom:8%; }
.world-bimo.is-visible .bimo-bimo { animation:bimo-hop .8s ease-in-out; }
.bimo-card { position:absolute; height:22%; right:10%; bottom:34%; transform:rotate(6deg); }
@keyframes bimo-hop { 0%, 60%, 100% { transform:translateY(0); } 72% { transform:translateY(-7%); } 84% { transform:translateY(0) scaleY(.96); } }
@media (prefers-reduced-motion: reduce) { .bimo-bimo { animation:none; } }
.cover-bebek { background:#9fd8ef url('assets/bebek-pond.webp') 50% 70%/cover; }
.cover-kwek { position:absolute; height:70%; left:24%; top:10%; }
.world-bebek .world-backdrop { object-position:40% 60%; }
.bebek-scene { position:absolute; right:4%; top:14%; width:48%; height:84%; }
.bebek-kwek { position:absolute; height:44%; right:34%; bottom:12%; }
.world-bebek.is-visible .bebek-kwek { animation:bebek-bob 1.1s ease-in-out; }
.bebek-bel { position:absolute; height:16%; right:12%; bottom:30%; }
@keyframes bebek-bob { 0%, 55%, 100% { transform:translateY(0) rotate(0); } 70% { transform:translateY(-6%) rotate(-4deg); } 85% { transform:translateY(0) scaleY(.96); } }
@media (prefers-reduced-motion: reduce) { .bebek-kwek { animation:none; } }
.cover-kepingan { background:#8fd3f4 url('assets/kepingan-town.webp') 50% 70%/cover; }
.cover-toki { position:absolute; height:74%; left:20%; top:8%; }
.world-kepingan .world-backdrop { object-position:50% 60%; }
.kepingan-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.kepingan-bench { position:absolute; height:34%; right:10%; bottom:8%; }
.kepingan-toki { position:absolute; height:50%; right:36%; bottom:6%; }
.cover-gerak { background:#9fd8f0 url('assets/gerak-valley.webp') 60% 60%/cover; }
.cover-lumi { position:absolute; height:70%; left:22%; top:8%; }
.world-gerak .world-backdrop { object-position:60% 55%; }
.gerak-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.gerak-lumi { position:absolute; height:40%; right:44%; bottom:20%; }
.gerak-bubble { position:absolute; height:18%; right:26%; bottom:50%; }
.world-gerak.is-visible .gerak-lumi, .world-gerak.is-visible .gerak-bubble { animation:gerak-float .8s ease-in-out; }
@keyframes gerak-float { 50% { transform:translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .gerak-lumi, .gerak-bubble { animation:none; } }
.cover-balap { background:#8fd3f4 url('assets/balap-garden.webp') 50% 75%/cover; }
.cover-uta { position:absolute; height:72%; left:20%; top:10%; }
.world-balap .world-backdrop { object-position:50% 70%; }
.balap-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.balap-arch { position:absolute; height:44%; right:8%; bottom:10%; }
.balap-uta { position:absolute; height:44%; right:36%; bottom:6%; }
.world-balap.is-visible .balap-uta { animation:balap-bob .8s ease-in-out; }
@keyframes balap-bob { 50% { transform:translateY(-3%); } }
@media (prefers-reduced-motion: reduce) { .balap-uta { animation:none; } }
.cover-kata { background:#8fd3f4 url('assets/kata-square.webp') 50% 70%/cover; }
.cover-guri { position:absolute; height:66%; left:18%; top:10%; }
.world-kata .world-backdrop { object-position:50% 70%; }
.kata-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.kata-guri { position:absolute; height:42%; right:30%; bottom:14%; }
.kata-bola { position:absolute; height:16%; right:14%; bottom:10%; }
.world-kata.is-visible .kata-guri { animation:kata-float .8s ease-in-out; }
.world-kata.is-visible .kata-bola { animation:kata-bounce .65s ease-in-out; }
@keyframes kata-float { 50% { transform:translateY(-4%); } }
@keyframes kata-bounce { 0%, 100% { transform:translateY(0); } 45% { transform:translateY(-38%); } 55% { transform:translateY(-38%); } }
@media (prefers-reduced-motion: reduce) { .kata-guri, .kata-bola { animation:none; } }
.cover-arung { background:#9fd8f0 url('assets/arung-river.webp') 50% 60%/cover; }
.cover-ranga { position:absolute; height:62%; left:20%; top:10%; }
.world-arung .world-backdrop { object-position:50% 60%; }
.arung-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.arung-crew { position:absolute; height:44%; right:22%; bottom:10%; }
.arung-ranga { position:absolute; height:26%; right:8%; bottom:56%; }
.world-arung.is-visible .arung-ranga { animation:arung-glide .9s ease-in-out; }
.world-arung.is-visible .arung-crew { animation:arung-bob .8s ease-in-out; }
@keyframes arung-glide { 50% { transform:translate(-4%,-6%) rotate(-3deg); } }
@keyframes arung-bob { 50% { transform:translateY(-3%); } }
@media (prefers-reduced-motion: reduce) { .arung-ranga, .arung-crew { animation:none; } }
.cover-gelinding { background:#8fc8f0 url('assets/gelinding-hill.webp') 50% 70%/cover; }
.cover-gili { position:absolute; height:52%; left:18%; top:22%; }
.world-gelinding .world-backdrop { object-position:50% 65%; }
.gelinding-scene { position:absolute; right:3%; top:12%; width:48%; height:86%; }
.gelinding-gili { position:absolute; height:34%; right:26%; bottom:10%; }
.gelinding-bintik { position:absolute; height:24%; right:8%; bottom:50%; }
.world-gelinding.is-visible .gelinding-gili { animation:gelinding-roll .9s ease-in-out; }
.world-gelinding.is-visible .gelinding-bintik { animation:gelinding-float 1.2s ease-in-out; }
@keyframes gelinding-roll { 40% { transform:translateX(-6%) rotate(-6deg); } 70% { transform:translateX(0) scaleY(.96); } }
@keyframes gelinding-float { 50% { transform:translateY(-6%) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .gelinding-gili, .gelinding-bintik { animation:none; } }
.cover-kertas { background:#9fd3ec url('assets/kertas-langit.webp') 50% 60%/cover; }
.cover-lipi { position:absolute; height:62%; right:8%; bottom:6%; filter:drop-shadow(0 4px 4px #0003); }
.world-kertas .world-backdrop { object-position:50% 60%; }
.kertas-scene { position:absolute; right:3%; top:16%; width:50%; height:82%; }
.kertas-rumah { position:absolute; height:40%; right:4%; bottom:30%; }
.kertas-raja { position:absolute; height:34%; right:38%; bottom:24%; }
.kertas-lipi { position:absolute; height:28%; right:20%; bottom:8%; }
.world-kertas.is-visible .kertas-lipi { animation:kertas-hop .8s ease-out; }
.world-kertas.is-visible .kertas-raja { animation:kertas-pop .7s ease-out; transform-origin:50% 100%; }
@keyframes kertas-hop { 40% { transform:translateY(-14%); } 70% { transform:translateY(0) scaleY(.94); } }
@keyframes kertas-pop { 0% { transform:rotateX(80deg); } 70% { transform:rotateX(-8deg); } 100% { transform:none; } }
@media (prefers-reduced-motion: reduce) { .kertas-lipi, .kertas-raja { animation:none; } }
.cover-robopos { background:#8fd0f4 url('assets/robopos-town.webp') 50% 80%/cover; }
.cover-pito { position:absolute; height:64%; left:22%; top:10%; }
.world-robopos .world-backdrop { object-position:50% 80%; }
.robopos-scene { position:absolute; right:2%; top:12%; width:50%; height:86%; }
.robopos-pito { position:absolute; height:44%; right:26%; bottom:12%; }
.robopos-pip { position:absolute; height:20%; right:12%; bottom:50%; }
.world-robopos.is-visible .robopos-pito { animation:robopos-hop .7s ease-in-out; }
.world-robopos.is-visible .robopos-pip { animation:robopos-hover 1s ease-in-out; }
@keyframes robopos-hop { 50% { transform:translateY(-8%); } }
@keyframes robopos-hover { 50% { transform:translate(-4%,-6%) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .robopos-pito, .robopos-pip { animation:none; } }
.cover-book { position:absolute; width:95%; left:3%; top:24%; transform:rotate(-8deg); }
.cover-letters { position:absolute; left:0; right:0; top:19%; text-align:center; color:#18463e; font-family:Lilita,sans-serif; font-size:1.4rem; transform:rotate(-8deg); }
.selection-note { display:none; }
.spotlight { min-height:0; display:flex; align-items:flex-end; padding-top:4px; padding-bottom:10px; }
.game-copy { width:55%; max-width:560px; }
.game-copy.is-entering > * { animation:copy-in .42s var(--ease) both; }
.game-copy.is-entering > :nth-child(2) { animation-delay:45ms; }
.game-copy.is-entering > :nth-child(3) { animation-delay:90ms; }
.game-copy.is-entering > :nth-child(4) { animation-delay:135ms; }
.game-copy.is-entering > :nth-child(5) { animation-delay:180ms; }
@keyframes copy-in { from { opacity:0; transform:translateY(10px); } }
.game-category { font-size:.66rem; color:var(--accent); margin-bottom:7px; font-weight:600; }
h1 { font-family:Lilita,'Arial Rounded MT Bold',sans-serif; font-size:clamp(2.15rem,5.4cqw,3.5rem); font-weight:400; line-height:.94; letter-spacing:-.02em; margin:0 0 9px; }
.game-tagline { font-size:.85rem; font-weight:600; margin:0; line-height:1.35; }
.game-description { display:none; }
.game-actions { display:flex; align-items:center; gap:12px; margin-top:13px; }
.play-button { display:flex; align-items:center; justify-content:center; gap:12px; background:var(--text); color:var(--base); min-height:48px; min-width:180px; border-radius:var(--radius-action); padding:10px 24px; font-weight:750; font-size:.85rem; box-shadow:inset 0 1px 0 #ffffffb0, 0 10px 24px #0006; transition:background .2s, transform .15s var(--ease), box-shadow .15s var(--ease); }
.play-button:hover, .dialog-play:hover { background:var(--accent); }
.play-button:hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 #ffffffb0, 0 14px 28px #0007; }
.play-symbol { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:9px solid currentColor; }
.info-button { width:44px; height:44px; background:#0b2028c9; border:1px solid #a5b3b9; border-radius:50%; font-family:Georgia,serif; font-size:1.15rem; flex-shrink:0; }
.info-button:hover { background:#304851; border-color:var(--text); }
.info-button { transition:background .2s, border-color .2s, transform .12s var(--ease); }
.world-caption { display:none; }
.console-footer { display:flex; align-items:center; gap:16px; border-top:1px solid #c5d3d63b; font-size:.59rem; color:var(--muted); }
.console-footer p { margin:0; }
.keyboard-help { display:none; }
.footer-signoff { display:block; margin-left:auto; }
kbd { font:inherit; display:inline-flex; align-items:center; justify-content:center; min-width:21px; min-height:20px; border:1px solid #a9b5bc; border-radius:4px; padding:2px 4px; color:var(--text); }
.announcement { position:fixed; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.empty-history { margin:12px 0; max-width:420px; }
.empty-history h2 { font-family:Lilita,sans-serif; font-weight:400; font-size:1.5rem; margin:0 0 7px; }
.empty-history p { font-size:.85rem; color:var(--muted); line-height:1.5; }
.text-button { background:none; border-bottom:1px solid currentColor; color:var(--accent); padding:10px 0; min-height:44px; font-size:.85rem; }
.text-button:hover { color:white; }

@container stage (min-height:700px) {
  .console { grid-template-rows:82px minmax(0,1fr) 55px; padding:0 5cqw; }
  .topbar { gap:36px; }
  .wordmark { font-size:1.35rem; }
  .view-tabs { gap:25px; }
  .view-tab { font-size:.86rem; }
  .main-screen { grid-template-rows:170px minmax(0,1fr); }
  .shelf-section { padding-top:12px; }
  .shelf-heading { display:flex; font-size:.72rem; margin-bottom:17px; }
  .game-shelf { gap:16px; }
  .game-tile { width:86px; gap:11px; }
  .cover { border-radius:13px; }
  .tile-label { font-size:.67rem; }
  .cover-name { font-size:.64rem; padding-bottom:7px; }
  .cover-name b { font-size:.95rem; }
  .cover-letters { font-size:1.9rem; }
  h1 { font-size:clamp(3.3rem,min(6cqw,9.5cqh),5.4rem); margin-bottom:16px; }
  .game-category { font-size:.77rem; margin-bottom:13px; }
  .game-tagline { font-size:1.1rem; }
  .game-description { display:block; color:#dce4e3; font-size:.9rem; line-height:1.65; margin:9px 0 0; max-width:440px; }
  .game-actions { margin-top:23px; gap:16px; }
  .play-button { min-height:52px; min-width:220px; font-size:.95rem; }
  .info-button { width:48px; height:48px; }
  .spotlight { padding-top:20px; padding-bottom:32px; }
  .console-footer { font-size:.7rem; }
  .logika2-scene { top:22%; height:76%; }
  .baca-scene { top:22%; height:75%; }
  .cilukba-scene { top:22%; height:76%; }
  .gambar-scene { top:22%; height:76%; }
  .gelitik-scene { top:22%; height:76%; }
  .bimo-scene { top:22%; height:76%; }
  .bebek-scene { top:22%; height:76%; }
  .kepingan-scene { top:22%; height:76%; }
  .gerak-scene { top:22%; height:76%; }
  .balap-scene { top:22%; height:76%; }
  .kata-scene { top:22%; height:76%; }
  .arung-scene { top:22%; height:76%; }
  .gelinding-scene { top:22%; height:76%; }
  .robopos-scene { top:22%; height:76%; }
}
@container stage (min-width:1100px) and (min-height:880px) {
  .console { grid-template-rows:106px minmax(0,1fr) 69px; padding:0 6.1cqw; }
  .topbar { gap:54px; }
  .wordmark { font-size:1.4rem; }
  .view-tab { font-size:.95rem; }
  .utilities { gap:18px; }
  .parent-control span:last-child { display:inline; }
  #clock { display:block; font-size:.9rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .main-screen { grid-template-rows:220px minmax(0,1fr); }
  .shelf-section { padding-top:19px; }
  .shelf-heading { font-size:.75rem; margin-bottom:20px; }
  .game-shelf { gap:18px; }
  .game-tile { width:106px; gap:12px; }
  .cover { border-radius:15px; }
  .tile-label { font-size:.7rem; }
  .cover-name { font-size:.78rem; }
  .cover-name b { font-size:1.08rem; }
  .cover-name small { display:block; font-family:'Avenir Next','Segoe UI',sans-serif; font-size:.42rem; margin-top:4px; }
  .cover-letters { font-size:2.1rem; }
  .selection-note { display:flex; align-items:center; gap:20px; margin:36px 0 0 16px; font-size:.79rem; line-height:1.9; color:var(--muted); }
  .selection-note strong { font-weight:500; color:var(--text); }
  .selection-line { width:36px; height:1px; background:#c5d3d681; }
  .spotlight { padding-top:25px; padding-bottom:42px; }
  h1 { font-size:clamp(4rem,min(6.5cqw,11cqh),7.5rem); margin-bottom:23px; }
  .game-category { font-size:.8rem; margin-bottom:17px; }
  .game-tagline { font-size:1.24rem; }
  .game-description { font-size:.94rem; line-height:1.7; }
  .game-actions { margin-top:28px; }
  .play-button { min-height:56px; min-width:230px; font-size:.98rem; }
  .info-button { width:50px; height:50px; }
  .world-caption { display:block; margin-left:auto; text-align:right; align-self:flex-end; padding-bottom:5px; }
  .world-caption>span { font-size:1.7rem; }
  .world-caption i { font-size:.8rem; opacity:.7; font-style:normal; margin-left:6px; }
  .world-caption p { font-size:.8rem; color:var(--muted); line-height:1.6; margin:15px 0 0; }
  .keyboard-help { display:flex; gap:22px; margin-left:auto; }
  .keyboard-help>span { display:flex; align-items:center; gap:6px; }
  .footer-signoff { display:none; }
}
@container stage (max-height:360px) {
  .console { grid-template-rows:48px minmax(0,1fr) 25px; padding:0 20px; }
  .topbar { gap:18px; }
  .wordmark { font-size:1.05rem; }
  .view-tabs { gap:12px; }
  .view-tab { font-size:.7rem; }
  .utilities { gap:0; }
  .main-screen { grid-template-rows:82px minmax(0,1fr); }
  .shelf-section { padding-top:6px; }
  .shelf-heading { display:none; }
  .game-tile { width:54px; gap:6px; }
  .tile-label { font-size:.53rem; }
  h1 { font-size:2rem; margin-bottom:6px; }
  .game-category { font-size:.62rem; margin-bottom:5px; }
  .game-tagline { font-size:.78rem; }
  .game-actions { margin-top:9px; }
  .spotlight { padding-top:0; padding-bottom:8px; }
  .play-button { min-width:160px; }
  .console-footer { font-size:.56rem; }
}
/* Very short stages (a phone held sideways with the browser bars showing). Everything must still fit above the footer. */
@container stage (max-height:300px) {
  .console { grid-template-rows:44px minmax(0,1fr) 22px; padding:0 16px; }
  .wordmark { font-size:.95rem; }
  .main-screen { grid-template-rows:68px minmax(0,1fr); }
  .shelf-section { padding-top:2px; }
  .game-tile { width:46px; gap:3px; padding-top:3px; }
  .tile-label { font-size:.5rem; }
  h1 { font-size:1.55rem; margin-bottom:4px; }
  .game-category { font-size:.58rem; margin-bottom:3px; }
  .game-tagline { font-size:.72rem; }
  .game-actions { margin-top:6px; }
  .spotlight { padding-bottom:4px; }
  .console-footer { font-size:.5rem; }
}
@container stage (max-height:270px) { .game-category { display:none; } }
@container stage (max-height:250px) { .game-tagline { display:none; } }
@container stage (max-width:600px) {
  .topbar { gap:12px; }
  .wordmark { font-size:1rem; }
  .view-tab { font-size:.68rem; }
  .view-tabs { gap:10px; }
  .utilities { gap:0; }
  .game-copy { width:60%; }
  .game-actions { gap:10px; }
  .play-button { min-width:150px; padding:10px 16px; }
  .footer-signoff { display:none; }
}

dialog { position:fixed; inset:0; box-shadow:0 24px 100px #0008; }
dialog[open] { animation:dialog-in .22s var(--ease); }
dialog[open]::backdrop { animation:fade-in .22s var(--ease); }
body.is-portrait dialog[open] { animation-name:fade-in; }
@keyframes dialog-in { from { opacity:0; transform:scale(.97); } }
@keyframes fade-in { from { opacity:0; } }
dialog::backdrop { background:#04141de3; backdrop-filter:blur(10px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:15px; }
.dialog-top h2 { margin:0; font-size:1.6rem; }
.dialog-kicker { color:var(--accent); font-size:.78rem; }
.close-button { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; background:#243e47; border-radius:50%; font-size:1.8rem; line-height:1; }
.close-button:hover { background:#39535c; }
dialog h2 { font-family:Lilita,sans-serif; font-weight:400; font-size:2rem; margin:0 0 16px; line-height:1.1; }
dialog p { font-size:.87rem; color:#dce4e3; line-height:1.65; }
.search-field { display:flex; align-items:center; gap:18px; background:#071c24; border:1px solid #889ea5; border-radius:10px; padding:11px 16px; }
.search-field input { width:100%; background:none; color:white; border:0; font-size:.95rem; min-height:30px; }
.search-field input::placeholder { color:#b3c6c9; }
.search-field input:focus-visible { outline-offset:3px; }
.search-results { display:grid; gap:8px; margin-top:16px; }
.search-result { display:flex; align-items:center; gap:16px; text-align:left; padding:12px 15px; background:#1c3842; border-radius:10px; min-height:64px; }
.search-result { animation:copy-in .35s var(--ease) both; animation-delay:calc(var(--i,0) * 40ms); }
.search-result:hover { background:#294852; }
.result-number { font-size:.8rem; color:var(--accent); }
.search-result strong { display:block; font-size:.95rem; }
.search-result small { display:block; color:var(--muted); margin-top:4px; font-size:.75rem; }
.dialog-footnote { font-size:.75rem!important; margin-bottom:0; }
.game-details { display:grid; grid-template-columns:90px 1fr; gap:10px; font-size:.82rem; margin:20px 0; }
.game-details dt { color:var(--muted); }
.game-details dd { margin:0; }
.dialog-play { background:var(--text); color:var(--base); border-radius:28px; padding:13px 20px; min-height:48px; font-weight:700; width:100%; font-size:.9rem; }
.parent-note { padding:16px 0; border-top:1px solid #506970; border-bottom:1px solid #506970; margin:20px 0; }
.parent-note h3 { font-size:.95rem; margin:0 0 10px; }
.parent-note p { font-size:.82rem; margin:0; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; min-height:60px; }
.setting-row strong { display:block; font-size:.88rem; }
.setting-row small { display:block; color:var(--muted); margin-top:6px; font-size:.75rem; }
.setting-row input { appearance:none; flex-shrink:0; width:48px; height:28px; border:1px solid #b2c4c8; border-radius:16px; background:#304b54; position:relative; cursor:pointer; }
.setting-row input:before { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--text); top:4px; left:4px; transition:transform .2s; }
.setting-row input:checked { background:#57775a; }
.setting-row input:checked:before { transform:translateX(20px); }
.storage-note { margin-top:20px; }
.storage-note p { font-size:.75rem; }
.parent-guide-link { display:inline-flex; align-items:center; margin-top:4px; }
.account-row { display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; margin:12px 0 0; padding-top:12px; border-top:1px solid #506970; }
.account-row p { margin:0; flex:1 1 100%; font-size:.82rem; overflow-wrap:anywhere; }
#history-feedback { color:var(--accent); margin:6px 0 0; }
.noscript { position:fixed; inset:auto 20px 20px; padding:20px; background:#102b34; border:1px solid #647980; }
.noscript a { text-decoration:underline; }
body.reduced-motion *, body.reduced-motion *:before, body.reduced-motion *:after { transition:none!important; animation:none!important; }
@media(prefers-reduced-motion:reduce) { *, *:before, *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Pulau Pintar 2.0 · Kereta Pulau */
.world-pulau2 .world-backdrop { object-position:50% 60%; }
.pulau2-scene { position:absolute; top:22%; right:0; width:60%; height:76%; }
.pulau2-train { position:absolute; height:46%; left:18%; bottom:10%; filter:drop-shadow(0 16px 22px #07161d38); }
.pulau2-lilo { position:absolute; height:40%; left:66%; bottom:11%; }
.world-pulau2.is-visible .pulau2-lilo { animation:l2-hop .8s ease-in-out; }
.cover-pulau2 { background:#9fd4ef url('assets/pulau2-sky.webp') center/cover; }
.cover-p2-train { position:absolute; height:52%; left:8%; bottom:12%; }
.cover-p2-lilo { position:absolute; height:50%; right:8%; bottom:12%; }
@media (prefers-reduced-motion: reduce) { .pulau2-lilo { animation:none; } }
.rotate-hint { position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:60; transform:translateX(-50%); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100vw - 32px); padding:10px 10px 10px 14px; border:1px solid #647980; border-radius:14px; background:#102b34; color:var(--text); font-size:.88rem; line-height:1.4; box-shadow:0 12px 30px #0008; }
.rotate-hint button { flex:none; min-width:52px; min-height:44px; padding:0 14px; border-radius:22px; background:var(--text); color:#132b34; font-weight:750; }
.rotate-hint-phone { flex:none; width:18px; height:28px; border:2px solid var(--accent); border-radius:5px; animation:rotate-hint-turn 1.6s var(--ease) .4s 2 both; }
@keyframes rotate-hint-turn { 50%, 100% { transform:rotate(90deg); } }