:root { color-scheme: dark; --cyan: #00e6e6; }
* { box-sizing: border-box; }
.carousel-wrapper { top: clamp(165px, 30vh, 340px); }
.carousel { width: 100%; overflow: hidden; padding: 35px 0; }
.carousel-item, .carousel-item img { height: clamp(150px, 34vh, 350px); }
.carousel-item { flex-shrink: 0; }
.carousel-item.selected { opacity: 1; transform: scale(1.08); filter: brightness(1.15) saturate(1.2) drop-shadow(0 0 14px #00e6e680); }
.carousel-item:focus-visible, button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.nav { display: none; }
.carousel { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.controller .dpad, .controller .actions { display: none; }
.controller { pointer-events: none; }
.controller .control-info { margin: auto; }
.controller #launcher-back { pointer-events: auto; font-size: 14px; padding: 8px 18px; border-radius: 6px; margin-top: 8px; }
.controller { position: fixed; inset: auto 0 16vh; z-index: 900000; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px max(24px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); background: transparent; color: #dbe9ed; }
.dpad { display: grid; grid-template: repeat(3, 46px) / repeat(3, 46px); filter: drop-shadow(0 5px 2px #0008); }
.controller button { touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; color: #b4c9d2; border: 1px solid #51606b; background: linear-gradient(#34404c, #141d26); box-shadow: inset 0 2px #ffffff18, 0 4px #070b10; font: bold 22px Arial; }
.controller button:active, .controller button.held { transform: translateY(3px); color: var(--cyan); box-shadow: inset 0 0 16px #00e6e630; }
.dpad [data-action="up"] { grid-area: 1 / 2; border-radius: 10px 10px 0 0; }
.dpad [data-action="left"] { grid-area: 2 / 1; border-radius: 10px 0 0 10px; }
.dpad [data-action="right"] { grid-area: 2 / 3; border-radius: 0 10px 10px 0; }
.dpad [data-action="down"] { grid-area: 3 / 2; border-radius: 0 0 10px 10px; }
.dpad::after { content: ''; grid-area: 2 / 2; background: #26333e; }
.actions { display: flex; gap: 20px; align-items: center; }
.actions button { border-radius: 50%; width: 66px; height: 66px; font-size: 30px; }
.actions [data-action="x"] { color: #70eaff; }
.actions [data-action="o"] { color: #ff8199; margin-bottom: 40px; }
.control-info { text-align: center; font-size: 14px; line-height: 1.7; }
#selection-name { display: block; font-size: 18px; color: white; }
#system-status { color: #aabcc7; }
body:not(.ready) .carousel-wrapper { visibility: hidden; }
@media (max-width: 540px) { .controller { flex-wrap: wrap; padding: 12px 16px; gap: 8px; } .control-info { order: -1; width: 100%; } .dpad { grid-template: repeat(3, 42px) / repeat(3, 42px); } .actions { gap: 16px; } .actions button { width: 58px; height: 58px; } .carousel-wrapper { top: 160px; } .carousel-item, .carousel-item img { height: clamp(120px, 27vh, 250px); } }
@media (max-height: 500px) and (min-width: 541px) { .carousel-wrapper { top: 105px; } .controller { padding: 8px 24px; } .dpad { grid-template: repeat(3, 36px) / repeat(3, 36px); } .carousel { padding: 15px 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }