/* cart.slopped.site/boot/: the Slopbox, switched on (boot.js). The console's own dark, the brand's paper type and acid
   for what is chosen; covers are the drawn cartridges of the home page. Full viewport, inside the safe-area insets. */
html:has(body.sb-page), body.sb-page { height: 100%; background: #171815; overflow: hidden; }
body.sb-page { color: #f4f1e8; -webkit-tap-highlight-color: transparent; }
.sb { position: fixed; inset: 0; height: 100dvh; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); background: #171815; color: #f4f1e8; box-sizing: border-box; }
.sb [hidden] { display: none !important; }
.sb :focus-visible { outline: 3px solid #e3ff59; outline-offset: 3px; }
.sb a { color: #f4f1e8; }
.sb-mast { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 16px/1 Arial, Helvetica, sans-serif; }
.sb-mast img { display: block; width: 128px; height: auto; }
.sb-mast a { text-decoration: none; }
.sb-rule { width: 1px; height: 22px; background: #f4f1e855; }
.sb-mast.small img { width: 104px; }

/* off: the power button */
.sb-off { display: grid; align-content: center; justify-items: start; gap: 18px; height: 100%; max-width: 640px; margin: 0 auto; padding: 24px; box-sizing: border-box; }
.sb-off h1 { margin-top: 18px; font-size: clamp(52px, 12vw, 104px); letter-spacing: -3px; color: #f4f1e8; }
.sb-lede { margin: 0; font-size: 19px; line-height: 1.45; max-width: 36ch; }
.sb-power { min-height: 64px; padding: 0 34px; border: 0; border-radius: 999px; background: #e3ff59; color: #171815; font: 1000 22px/1 var(--head); letter-spacing: -.5px; cursor: pointer; }
.sb-power:hover { box-shadow: inset 0 0 0 3px #171815; }
.sb-note { margin: 0; color: #c9c7bd; font-size: 14px; }

/* boot: the letters drop onto a shelf, one after another; the shelf draws under them; the line fades in */
.sb-boot { display: grid; place-content: center; justify-items: center; gap: 0; height: 100%; }
.sb-logo { display: flex; align-items: flex-end; font: 1000 clamp(64px, 16vw, 168px)/1 var(--head); letter-spacing: -.04em; color: #f4f1e8; }
.sb-l { display: block; animation: sb-drop .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 90ms + 80ms); transform-origin: 50% 100%; }
.sb-p { height: 1.02em; width: auto; margin: 0 -.02em -.2em -.1em; animation-name: sb-drop-p; } /* the drawing has air on its left */
.sb-shelf-line { display: block; width: min(86vw, 900px); height: 10px; margin-top: 10px; border-radius: 3px; background: #e3ff59; transform-origin: 0 50%; animation: sb-shelf .45s ease-out .8s both; }
.sb-tag { margin: 16px 0 0; font: 700 clamp(14px, 2.2vw, 20px)/1 Arial, Helvetica, sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #c9c7bd; animation: sb-fade .5s ease-out 1.25s both; }
@keyframes sb-drop { 0% { transform: translateY(-70vh) rotate(-14deg); opacity: 0; } 60% { transform: translateY(0) rotate(3deg) scaleY(.86); opacity: 1; } 100% { transform: none; } }
@keyframes sb-drop-p { 0% { transform: translateY(-70vh); opacity: 0; } 55% { transform: translateY(0) scaleY(.8); opacity: 1; } 78% { transform: scaleY(1.12); } 100% { transform: none; } }
@keyframes sb-shelf { from { transform: scaleX(0); } }
@keyframes sb-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sb-l, .sb-p, .sb-shelf-line, .sb-tag { animation: none; }
  .sb-boot { animation: sb-fade .35s ease-out both; }
}

/* the menu: the bar, the shelves as tabs, the rail of covers (the chosen one lifted and ringed), what it is, Play */
.sb-menu { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; height: 100%; }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.sb-top-acts { display: flex; gap: 8px; }
.sb-btn { min-height: 44px; padding: 0 16px; border: 2px solid #f4f1e866; border-radius: 999px; background: none; color: #f4f1e8; font: 700 14px/1 Arial, Helvetica, sans-serif; cursor: pointer; }
.sb-btn:hover { border-color: #f4f1e8; }
.sb-shelves { display: flex; gap: 6px; padding: 4px 20px 0; overflow-x: auto; scrollbar-width: none; }
.sb-shelves::-webkit-scrollbar { display: none; }
.sb-tab { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #c9c7bd; font: 700 15px/1 Arial, Helvetica, sans-serif; cursor: pointer; }
.sb-tab[aria-selected="true"] { background: #f4f1e8; color: #171815; }
.sb-rail-wrap { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 0; touch-action: pan-y; }
.sb-rail { -webkit-user-select: none; user-select: none; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); padding: 0 20px; outline: none; transition: transform .28s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.sb .sb-rail:focus-visible { outline: none; }
.sb-rail:focus-visible .sb-opt[aria-selected="true"] { outline: 3px solid #f4f1e8; outline-offset: 6px; border-radius: 12px; }
.sb-opt { flex: none; width: clamp(120px, 22vw, 230px); cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s; }
.sb-opt[aria-selected="true"] { opacity: 1; transform: translateY(-8px) scale(1.08); }
.sb-shell { display: block; padding: 12% 9% 15%; border-radius: 10px 10px 16px 16px; background: #3b3c35; clip-path: polygon(0 0, 78% 0, 84% 7%, 100% 7%, 100% 100%, 0 100%); }
.sb-opt[aria-selected="true"] .sb-shell { background: #e3ff59; }
.sb-shell img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; border: 5px solid #f4f1e8; border-radius: 5px; background: #f4f1e8; box-sizing: border-box; }
.sb-name { display: block; margin-top: 10px; font: 700 15px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .sb-rail, .sb-opt { transition: none; } .sb-opt[aria-selected="true"] { transform: none; } }
.sb-info { padding: 8px 20px 4px; max-width: 760px; }
.sb-info h2 { font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -1.5px; color: #f4f1e8; }
.sb-about { margin: 6px 0 12px; color: #d9d7cc; font-size: 16px; line-height: 1.45; min-height: 2.9em; }
.sb-play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0; }
.sb-play { min-height: 56px; padding: 0 34px; border: 0; border-radius: 999px; background: #e3ff59; color: #171815; font: 1000 20px/1 var(--head); cursor: pointer; }
.sb-play:hover { box-shadow: inset 0 0 0 3px #171815; }
.sb-file { font-weight: 700; }
.sb-hints { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 20px 14px; color: #c9c7bd; font-size: 13px; }
.sb-hints kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid #f4f1e855; border-radius: 5px; font: 700 12px Arial, sans-serif; color: #f4f1e8; }
@media (any-pointer: coarse) { .sb-hints { display: none; } }
@media (max-height: 520px) and (orientation: landscape) {
  .sb-menu { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .sb-top { padding: 6px 16px; } .sb-shelves { padding-top: 0; } .sb-hints { display: none; }
  .sb-opt { width: min(140px, calc((100dvh - 200px) * .5)); } .sb-opt[aria-selected="true"] { transform: scale(1.04); } .sb-name { margin-top: 6px; font-size: 13px; }
  .sb-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 18px; max-width: none; padding-bottom: 8px; }
  .sb-info h2 { font-size: 24px; } .sb-about { grid-column: 1; margin: 2px 0 0; min-height: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sb-play-row { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 520px) { #sb-full { display: none; } .sb-opt { width: 44vw; } .sb-mast.small img { width: 92px; } .sb-top { padding: 10px 16px; } .sb-shelves, .sb-info { padding-left: 16px; padding-right: 16px; } .sb-rail { padding: 0 16px; } .sb-top-acts .sb-btn { padding: 0 12px; font-size: 13px; } }

/* a game: the console fills the screen, letterboxed in the cartridge's own background; Menu sits top left */
.sb-game { position: relative; height: 100%; background: var(--cart-bg, #171815); }
.sb-console { position: absolute; inset: 0; border-radius: 0; }
.sb-console.cart-console { background: var(--cart-bg, #171815); }
.sb-console .cart-frame { background: var(--cart-bg, #171815); }
.sb-console.cart-console.cart-pads-on { box-sizing: border-box; padding-bottom: var(--pad-h); }
.sb-back { position: absolute; z-index: 3; top: 10px; left: 10px; min-height: 44px; padding: 0 16px; border: 2px solid #f4f1e8; border-radius: 999px; background: #171815cc; color: #f4f1e8; font: 700 14px/1 Arial, Helvetica, sans-serif; cursor: pointer; }
@media (orientation: landscape) {
  .sb-console.cart-console.cart-pads-on { --pad-h: 0px; padding-bottom: 0; }
  .sb-console.cart-pads-on > .cart-frame, .sb-console.cart-pads-on > .cart-layer { height: 100%; }
  .sb-console.cart-pads-on > .cart-pads { top: 0; height: auto; background: none; }
  .sb-console .cart-pads .cp-dpad { width: min(160px, 40vh); bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: none; }
  .sb-console .cart-pads .cp-ab { bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: none; }
}