:root {
  --ink: #111f49;
  --muted: #516582;
  --accent: #1767ab;
  --accent-deep: #184779;
  --line: #c4d6ed;
  --surface: #f6faff;
  --shadow: 0 8px 26px #224b7c1c;
  --gradient: linear-gradient(#347dc5, #1d5b9e);
  --gold: #ffcc43;
  --console-ease: cubic-bezier(.2, .8, .2, 1);
  --console-quick: 110ms;
  --console-move: 230ms;
  background: #f8fbff;
}

body { background: radial-gradient(ellipse at 50% 28%, #fff 14%, #f7faff 68%, #edf4fd); }

.console {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.console .wrap { width: min(1376px, calc(100% - clamp(36px, 8vw, 146px))); }

.console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: clamp(68px, 10vh, 104px);
  padding-top: env(safe-area-inset-top);
}

.brand { letter-spacing: -.055em; gap: .27em; }
.console-home { font-size: clamp(23px, 2.25vw, 34px); }
.console-home img { width: 1.1em; height: 1.1em; }
.console-tools, .dock-actions { display: flex; align-items: center; gap: clamp(6px, 1vw, 13px); }

.console-chip, .channel-filters .filter {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 7px 14px;
  background: linear-gradient(#fff, #e9f3ff);
  border: 1px solid #b7cfe9;
  border-radius: 999px;
  box-shadow: inset 0 1px white, 0 2px 4px #133c6820;
  color: var(--ink);
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 750;
  white-space: nowrap;
}
.console-chip:is(:hover, [aria-current="page"]), .channel-filters .filter:hover { background: #e0f0ff; border-color: #73a6d7; }
.console-tools .console-chip:has(> .icon:only-child), .dock-actions .console-chip:has(> .icon:only-child) { padding: 0; }
.console .account-button { max-width: clamp(108px, 17vw, 230px); }
.console .account-button span { overflow: hidden; text-overflow: ellipsis; }
.console :is(.console-chip, .filter, .system-channel):focus-visible,
.console [data-controller-focus]:focus {
  outline: 3px solid #1e5990;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--gold);
}

#arcade { flex: 1; display: grid; align-items: center; padding-block: 4px clamp(26px, 6vh, 72px); min-width: 0; }
#arcade[data-view="game"] { align-items: start; padding-bottom: 0; }
.console:has(#arcade[data-view="game"]) .console-dock { display: none; }
.console-heading {
  display: flex;
  min-height: 40px;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(10px, 1.8vh, 19px);
}
.console-heading h1 {
  font-size: clamp(23px, 2.55vw, 39px);
  letter-spacing: -.045em;
  font-weight: 860;
  line-height: 1.08;
}
.game-count, .controller-status { color: var(--muted); font-size: clamp(12px, 1vw, 15px); font-weight: 650; }
.controller-status { display: inline-flex; align-items: center; gap: 6px; }
.controller-status .icon { color: var(--accent); }

.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(9px, 1.35vw, 19px);
}

.channel-grid > :is(.featured-card, .game-card, .system-channel, .vacant-channel) {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 2.03;
  border: 1px solid #afc7e2;
  border-radius: clamp(11px, 1.35vw, 19px);
  background: #edf5fe;
  box-shadow: inset 0 1px #fff, 0 3px 6px #26487323;
  overflow: visible;
  transform: none;
}
.channel-grid > :is(.featured-card, .game-card, .system-channel):is(:hover, :focus-within) {
  border-color: #1e5990;
  box-shadow: 0 0 0 2px #1e5990, 0 0 0 5px var(--gold), 0 7px 16px #26487326;
  z-index: 1;
}
.channel-grid > :is(.featured-card, .game-card):focus-within { outline: none; }
.channel-grid .card-open {
  isolation: isolate;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  overflow: hidden;
  background: transparent;
}
.channel-grid .card-open:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.channel-grid .card-cover {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #d7eaff;
}
.channel-grid .card-open::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, #071430e8, #07143075 38%, transparent 73%);
}
.channel-grid .card-info {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(8px, 1.1vw, 17px);
  color: white;
}
.channel-grid .card-info h3 {
  color: white;
  font-size: clamp(14px, 1.92vw, 28px);
  line-height: 1.05;
  font-weight: 860;
  letter-spacing: -.04em;
  text-shadow: 0 2px 5px #0c132e;
}
.channel-grid .favorite {
  width: clamp(34px, 3.25vw, 43px);
  height: clamp(34px, 3.25vw, 43px);
  right: 6px;
  top: 6px;
  background: #14254bda;
}
.channel-grid .favorite[aria-pressed="true"] { color: #ffe375; }
.channel-grid .favorite[aria-pressed="true"] .icon { fill: #ffe375; }

.channel-grid .system-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1vw, 16px);
  padding: 8px;
  background: linear-gradient(155deg, #fff, #dfedfc);
  font-size: clamp(13px, 1.65vw, 23px);
  font-weight: 830;
  letter-spacing: -.04em;
}
.system-channel > .icon { width: clamp(24px, 3.4vw, 49px); height: auto; color: #245e99; }
.channel-grid .peep-channel {
  isolation: isolate;
  align-items: end;
  justify-content: start;
  padding: clamp(8px, 1.1vw, 17px);
  color: white;
  background: #183f68;
}
.peep-channel img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  border-radius: inherit;
}
.peep-channel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(0deg, #081633e6, transparent 64%);
}
.channel-grid .vacant-channel {
  background: repeating-linear-gradient(0deg, #eef4fc 0 2px, #e8f0fa 2px 4px);
  border-color: #ccdaeb;
  box-shadow: inset 0 1px 2px #aec6df3d;
}
.channel-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(15px, 3vh, 32px);
}
.channel-filters .filter[aria-pressed="true"] {
  color: white;
  border-color: #164b86;
  background: var(--gradient);
}
.channel-catalog .empty { margin-top: 18px; background: #f3f8ff; border-color: #aec3dc; }

.console-dock {
  position: relative;
  background: linear-gradient(#edf6ff, #f7fbff);
  border: 0;
  border-top: 1px solid #94bde4;
  padding-bottom: env(safe-area-inset-bottom);
}
.console-dock::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  height: 28px;
  width: min(42vw, 570px);
  background: #f8fbff;
  border: solid #94bde4;
  border-width: 0 1px 1px;
  border-radius: 0 0 48% 48% / 0 0 100% 100%;
  pointer-events: none;
}
.dock-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: clamp(76px, 12vh, 118px);
}
.dock-right { justify-content: end; }
.console-time { display: grid; justify-items: center; white-space: nowrap; color: var(--muted); }
#console-clock { font-variant-numeric: tabular-nums; font-size: clamp(23px, 3vw, 43px); font-weight: 450; letter-spacing: -.045em; color: var(--ink); }
#console-date { font-size: clamp(11px, 1.1vw, 16px); font-weight: 630; }
.console-hints { display: flex; align-items: center; gap: 14px; color: var(--muted); font-weight: 700; font-size: clamp(12px, 1.15vw, 16px); white-space: nowrap; }
.console-hints span { display: flex; gap: 6px; align-items: center; }
.prompt-key {
  display: inline-grid;
  min-width: 1.8em;
  min-height: 1.8em;
  place-items: center;
  padding: 0 .35em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #a4c1de;
  font-size: .84em;
  font-weight: 830;
}

.arcade-boot {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f5faff;
}
.boot-art {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: 76% bottom;
  transform-origin: 78% 69%;
}
.boot-content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(22px, 7vh, 78px);
  margin-top: -9vh;
  padding: 20px;
}
.arcade-boot-logo { font-size: clamp(47px, 10.2vw, 148px); font-weight: 850; line-height: 1; }
.arcade-boot-logo img { width: 1.1em; height: 1.1em; }
.boot-emblem { position: relative; isolation: isolate; }
.boot-ripple {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -7%;
  border: 2px solid #f5fcff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 10px #edfbff80, 0 0 32px #38acff59;
}
.boot-start.button {
  padding: .45em 1.5em;
  min-height: 49px;
  font-size: clamp(16px, 2.1vw, 28px);
  color: var(--ink);
  background: linear-gradient(#ffe36d, #ffca3a);
  border-color: #cd9318;
  box-shadow: 0 4px 12px #72520037, inset 0 1px #fff;
}
.boot-start .prompt-key { background: var(--ink); color: white; border: 0; }
.arcade-boot.is-leaving { pointer-events: none; }

.console-setting-list { display: grid; gap: 0; margin-block: 16px; }
.console-setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--line); }
.console-setting-row strong { font-size: 15px; }
.console-setting-row .arcade-sound { min-width: 70px; }
.console-setting-row .arcade-sound[aria-pressed="true"] { background: #d8ecff; }
.console-controller-slots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 9px 0 16px; }
.console-controller-slots li { display: grid; gap: 3px; text-align: center; min-height: 68px; align-content: center; background: #edf4fc; border-radius: 12px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); }
.console-controller-slots strong { font-size: 16px; color: var(--ink); }
.console-controller-slots [data-connected] { background: #dcefff; border-color: #659acc; }

.game-loading {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: white;
  background: radial-gradient(ellipse at 50% 45%, #23537e, #10213f);
  font-size: clamp(19px, 2.4vw, 33px);
  font-weight: 780;
}
.game-system-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(15px, 4vw, 54px);
  gap: clamp(18px, 5vh, 50px);
  background: #102249a8;
  backdrop-filter: blur(5px);
  color: white;
}
.game-system-overlay h2 { color: white; padding: 0; font-size: clamp(33px, 4vw, 60px); }
.game-system-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
  width: min(100%, 610px);
}
.game-system-actions .button {
  min-height: clamp(49px, 7vh, 69px);
  padding-inline: 9px;
  font-size: clamp(14px, 2vw, 23px);
  color: var(--ink);
  background: linear-gradient(white, #e7f3ff);
  border-color: #b3d0ed;
}
.game-system-actions .primary { background: linear-gradient(#ffe77d, #ffd248); border-color: #d2a025; }
#panel:has(.playing) .game-toolbar { z-index: 3; }
#panel .game-home { font-size: .81rem; font-weight: 800; }
#panel:has(.playing) .game-system-overlay :focus-visible { outline-color: #fff; outline-offset: 4px; }
#panel [data-controller-focus]:focus { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 3px var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  :is(.console-chip, .system-channel, .channel-grid .card-open, .boot-start, .filter) {
    transition: scale var(--console-quick) var(--console-ease), background-color var(--console-quick), box-shadow var(--console-quick);
  }
  :is(.console-chip, .system-channel, .channel-grid .card-open, .boot-start, .filter):active { scale: .977; }
  .boot-art { animation: boot-world 2300ms var(--console-ease) both; }
  .boot-emblem img { animation: boot-mark 690ms var(--console-ease) 155ms both; }
  .boot-ripple { animation: boot-ripple 880ms ease-out 410ms both; }
  .boot-wordmark { animation: boot-name 540ms var(--console-ease) 485ms both; }
  .boot-start { animation: boot-arrive 330ms var(--console-ease) 960ms both; }
  .arcade-boot.is-leaving { animation: boot-leave 300ms ease-in-out both; }
  .console-waking .channel-grid { animation: console-enter 410ms var(--console-ease) both; }
  .console-enter, .game-system-overlay:not([hidden]) { animation: console-enter var(--console-move) var(--console-ease) both; }
  ::view-transition-group(channel-art) { animation-duration: 250ms; animation-timing-function: var(--console-ease); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 170ms; }
}
@keyframes boot-world {
  from { opacity: 0; transform: scale(1.073); }
  47% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
@keyframes boot-mark {
  from { opacity: 0; transform: translateX(-26%) scale(.73) rotate(-12deg); }
  75% { opacity: 1; transform: translateX(0) scale(1.045) rotate(0); }
  to { opacity: 1; transform: none; }
}
@keyframes boot-ripple {
  from { opacity: .9; transform: scale(.44); }
  to { opacity: 0; transform: scale(2.5); }
}
@keyframes boot-name {
  from { opacity: 0; clip-path: inset(-10% 100% -14% 0); transform: translateX(-.12em); }
  to { opacity: 1; clip-path: inset(-10% -2% -14% 0); transform: translateX(0); }
}
@keyframes boot-arrive { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes boot-leave { to { opacity: 0; transform: scale(1.025); } }
@keyframes console-enter { from { opacity: .18; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (min-width: 750px) and (max-height: 850px) {
  .home-channels { max-width: min(1376px, calc((100svh - 242px) * 2.65)); }
}
@media (max-width: 740px) {
  .console .wrap { width: calc(100% - 32px); }
  .console-heading h1 { font-size: 26px; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-grid .vacant-channel { display: none; }
  .channel-grid .system-channel { font-size: clamp(14px, 2.85vw, 19px); }
  .channel-grid .card-info h3 { font-size: clamp(15px, 3vw, 21px); }
  .console-dock::before { width: 44vw; height: 15px; }
  .console-hints { display: none; }
  .dock-actions { gap: 5px; }
  .dock-actions .console-chip { padding: 6px 9px; }
  .dock-library { display: none; }
  .boot-content { margin-top: -23vh; }
  .boot-art { object-position: 80% center; }
}
@media (max-width: 400px) {
  .console-tools { gap: 4px; }
  .console-tools .account-button .icon { display: none; }
  .console-chip { min-height: 42px; min-width: 42px; }
  .controller-status span { display: none; }
}