.dashboard {
  --ink: #f0fbff;
  --muted: #c1ddf6;
  --accent: #b9f1ff;
  --line: #beeaff47;
  --surface: #0d3159;
  --lift: #225a88;
  isolation: isolate;
  color: var(--ink);
  background: radial-gradient(ellipse at 65% -18%, #2381b8, #0c4b82 44%, #071a3d 91%);
}
.wave-field { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.wave-field::before, .wave-field::after {
  content: '';
  position: absolute;
  inset: 9vh -18% auto;
  height: min(84vh, 750px);
  background: url('/ribbon.svg?v=0.6.0') center / 100% 100% no-repeat;
  transform-origin: 53% 59%;
}
.wave-field::before { opacity: .75; transform: translateY(2vh) rotate(-2deg); }
.wave-field::after { opacity: .33; transform: translate(4vw, 8vh) scaleY(.78) rotate(4deg); }
@media (prefers-reduced-motion: no-preference) {
  .wave-field::before { animation: wave-drift 17s ease-in-out infinite alternate paused; }
  .wave-field::after { animation: wave-echo 23s -6s ease-in-out infinite alternate paused; }
  .wave-running .wave-field::before, .wave-running .wave-field::after { animation-play-state: running; }
}
@keyframes wave-drift {
  from { transform: translate(-5vw, -2vh) rotate(-4deg) scaleY(.87); opacity: .6; }
  52% { transform: translate(2vw, 5vh) rotate(1.5deg) scaleY(1.03); opacity: .83; }
  to { transform: translate(8vw, -1vh) rotate(5deg) scaleY(1.15); opacity: .7; }
}
@keyframes wave-echo {
  from { transform: translate(7vw, 12vh) rotate(6deg) scaleY(.69); opacity: .32; }
  55% { transform: translate(0, 3vh) rotate(-1deg) scaleY(.93); opacity: .49; }
  to { transform: translate(-8vw, 10vh) rotate(-7deg) scaleY(.73); opacity: .31; }
}
.dashboard svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dashboard .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dashboard-header { min-height: 72px; padding: 14px max(5vw, 20px); gap: 16px; background: linear-gradient(#123d66ee, #082244ed); border-color: var(--line); box-shadow: 0 10px 24px #04163345; }
.header-controls { display: flex; justify-content: end; align-items: center; flex-wrap: wrap; gap: 7px; }
.dashboard .brand { display: flex; align-items: center; gap: 12px; font-size: 19px; letter-spacing: 2px; }
.dashboard .brand span, .dashboard .eyebrow { color: var(--accent); }
.dashboard .brand small { color: var(--muted); letter-spacing: 2px; font-size: 8px; margin-top: 4px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #8cdfff78; border-radius: 50%; background: linear-gradient(#3d729c, #1a4875); box-shadow: inset 0 1px #d9f4ff30, 0 3px 8px #0619329c; }
.dashboard-main { width: min(90%, 1240px); padding: clamp(24px, 3vw, 32px) 0 24px; }
.dashboard .eyebrow { margin: 0 0 7px; letter-spacing: .24em; font-size: .69rem; }
.dashboard .muted, .dashboard .login p { color: var(--muted); }
.dashboard .login { background: #17213b; border-color: var(--line); }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 19px; }
.library-heading h1 { margin: 0; line-height: 1.04; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 580; }
.library-heading h2 { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 550; }
.dashboard button { font: inherit; font-weight: 650; }
.dashboard button:focus-visible, .dashboard a:focus-visible, .dashboard input:focus-visible { outline: 2px solid #d6f1ff; outline-offset: 3px; }
.dashboard #account button, #settingsBtn, #settingsDone, #checkSetup, .dashboard .motion-toggle, .dashboard .pager button, #openDetails, .dashboard .close {
  background: #144b7fd9; color: var(--ink); border: 1px solid var(--line); padding: 8px 13px; font-size: .83rem;
}
.motion-toggle span { margin-left: 4px; color: var(--accent); }
.dashboard .motion-toggle:disabled { opacity: .65; }
.dashboard .tools { gap: 10px; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 0 10px; color: var(--muted); background: #082754a8; border: 1px solid var(--line); border-radius: 10px; }
.search-box svg { width: 19px; height: 19px; }
.dashboard .search-box input { width: clamp(130px, 17vw, 210px); min-width: 0; border: 0; background: transparent; padding: 9px 2px; color: var(--ink); font: inherit; }
.dashboard .search-box input::placeholder { color: var(--muted); opacity: 1; }
.dashboard .switch { display: flex; padding: 3px; background: #082754a8; border: 1px solid var(--line); border-radius: 10px; }
.dashboard .switch button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: transparent; padding: 6px 10px; font-size: .85rem; }
.dashboard .switch button[aria-pressed="true"] { color: #10213b; background: var(--accent); }
.dashboard .switch svg { width: 16px; height: 16px; }
.console-rail {
  display: flex; justify-content: safe center; gap: clamp(10px, 1.9vw, 25px); overflow-x: auto; padding: 12px 7px 9px;
  background: linear-gradient(#4c96c516, #09244664); border: 1px solid #b6dcff36; border-radius: 16px;
  box-shadow: inset 0 1px #cdefff1c, 0 8px 18px #041b3f40; scrollbar-width: thin; scrollbar-color: #52739d #14213a;
}
.dashboard .console {
  flex: 0 0 clamp(82px, 9vw, 100px); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; gap: 8px; min-height: 87px; padding: 8px 5px 10px;
  background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 11px;
}
.console-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .79rem; }
.console-badge {
  display: grid; place-items: center; width: 51px; height: 48px; border-radius: 15px; border: 1px solid #8fcbf962;
  background: linear-gradient(155deg, #356d9c, #163963 79%);
  box-shadow: inset 0 1px #c2ecff40, inset 0 -3px #06193563, 0 4px 8px #051735a6;
}
.dashboard .console svg { width: 29px; height: 29px; }
.dashboard .console[aria-pressed="true"] {
  background: radial-gradient(ellipse at center 48%, #b0e9ff45, transparent 75%);
  color: #fff; text-shadow: 0 0 10px #b9edff74;
}
.console[aria-pressed="true"]::after {
  content: ''; position: absolute; bottom: 2px; left: 26%; right: 26%; height: 2px; border-radius: 2px;
  background: #c6f6ff; box-shadow: 0 0 9px #a6efff;
}
.console[aria-pressed="true"] .console-badge {
  color: #fff; transform: translateY(-4px) scale(1.08); border-color: #c6f5ffc0;
  background: linear-gradient(148deg, #76bde5, #326992 67%, #1d507f);
  box-shadow: inset 0 1px #edfbff8c, inset 0 -3px #0c315e7c, 0 7px 15px #042144b3, 0 0 14px #81dfff62;
}
.results-heading { align-items: end; margin: 19px 0 10px; }
.results-heading .muted { font-size: .86rem; margin: 0 0 2px; }
.results-status { color: var(--muted); margin: 0; }
.results-status:not(:empty) { padding: 16px 0; }
.xmb-stage { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .95fr); gap: clamp(15px, 3.8vw, 48px); align-items: start; }
.grid-stage { display: block; }
.game-list {
  display: flex; flex-direction: column; gap: 6px; max-height: clamp(260px, 43vh, 460px); overflow: auto; padding: 9px 13px 11px 9px;
  background: linear-gradient(#0e2b4f91, #082040ba); border: 1px solid #a5d4ff32; border-radius: 13px;
  box-shadow: inset 0 1px #d3eeff16, 0 12px 26px #0418365e; scrollbar-width: thin; scrollbar-color: #52739d #14213a;
}
.game-list:empty { display: none; }
.dashboard .game-row {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 13px; min-height: 49px;
  padding: 7px 11px; text-align: left; color: var(--ink);
  background: linear-gradient(110deg, #29588680, #0b2a506b);
  border: 1px solid #98c5ee27; border-left: 2px solid #98c5ee27; border-radius: 8px;
  box-shadow: inset 0 1px #d3eeff14, 0 2px 4px #071b343b;
}
.dashboard .game-row[aria-current="true"] {
  transform: translateX(4px); background: linear-gradient(113deg, #3b79a8, var(--lift) 46%, var(--surface));
  border-color: #aad9ff64; border-left-color: #c2f7ff;
  box-shadow: inset 0 1px #d3eeff4d, inset 0 -2px #0a2d5760, 0 5px 10px #02172f86;
}
.dashboard .game-row svg { color: var(--accent); width: 18px; height: 18px; padding: 6px; box-sizing: content-box; border: 1px solid #9ad5ff39; border-radius: 8px; background: #09264c63; }
.game-label { min-width: 0; display: block; }
.game-label strong, .game-label small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-label strong { font-size: .92rem; }
.game-label small { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 500; }
.selection {
  min-width: 0; padding: 10px; border: 1px solid #b7e3ff5b; border-radius: 16px;
  background: linear-gradient(147deg, #205884d9, #12375be8 48%, #092242f2);
  box-shadow: inset 0 1px #e2f5ff31, inset 0 -2px #05172f7a, 0 14px 31px #03132ea1;
}
.preview-art, .dialog-art, .grid-art {
  display: grid; place-items: center; position: relative; overflow: hidden;
  color: var(--accent); background: radial-gradient(ellipse at 50% 30%, #294c77, #15223d 60%, #0d172e);
}
.preview-art {
  height: clamp(145px, 27vh, 305px); background: radial-gradient(ellipse at 50% 15%, #2c587e, #081c38 75%);
  border: 1px solid #a1cbf466; border-radius: 9px; box-shadow: inset 0 5px 16px #03142b89;
}
.preview-art::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(151deg, #b7e8ff25, transparent 34%); }
.cover-layer { position: absolute; inset: 0; display: grid; place-items: center; background: inherit; }
.preview-art.is-loading .cover-layer { opacity: .35; }
.preview-art img, .dialog-art img, .grid-art img { display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
.preview-art .cover-layer img {
  width: calc(100% - 18px); height: calc(100% - 18px); inset: 9px;
  transform: perspective(750px) rotateY(-3deg); filter: drop-shadow(0 7px 10px #021329bc);
}
.dashboard .cover-fallback svg { width: clamp(28px, 7vw, 62px); height: clamp(28px, 7vw, 62px); }
.cover-fallback { display: grid; place-items: center; gap: 6px; padding: 12px; text-align: center; }
.cover-fallback span { color: var(--muted); font-size: .72rem; font-weight: 500; }
.selection-caption { padding: 14px 6px 4px; }
.selection h3 { margin: 0; font-size: clamp(1rem, 2vw, 1.43rem); font-weight: 620; overflow-wrap: anywhere; }
.selection-caption .muted { font-size: .86rem; line-height: 1.5; margin: 8px 0 0; max-width: 45ch; }
#openDetails { margin-top: 12px; }
#openDetails [aria-hidden] { color: var(--accent); margin-left: 5px; }
#previewActivity { color: var(--accent); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; padding: 4px; }
.dashboard .game-card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); overflow: hidden; color: var(--ink); background: #14213a; }
.grid-art { width: 100%; aspect-ratio: 3 / 3.6; }
.game-card .game-label { width: 100%; padding: 9px 10px; }
.library-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px 4px 4px; }
.dashboard .pager { display: flex; gap: 10px; align-items: center; margin: 0 0 0 auto; font-size: .84rem; }
.key-hints { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--muted); font-size: .74rem; margin: 0; }
.key-hints kbd { color: var(--ink); background: #123967; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line); }
.key-hints kbd:not(:first-child) { margin-left: 4px; }
.dashboard dialog { background: #17243f; border-color: #456188; color: var(--ink); }
#settings { padding: clamp(18px, 4vw, 30px); background: linear-gradient(#16365b, #112541); box-shadow: 0 18px 60px #040e24b8; }
#settings button:focus { outline: 2px solid #d6f1ff; outline-offset: 3px; }
#settings h2 { margin: 0 0 16px; }
.settings-section { border-top: 1px solid var(--line); padding: 12px 0; font-size: .9rem; }
.settings-section h3 { margin: 0 0 8px; font-size: .95rem; }
.settings-section .switch { display: inline-flex; }
.settings-section p, .settings-section dl { margin: 7px 0 0; }
.settings-section dt { font-weight: 650; }
.settings-section dd { margin: 0 0 7px; color: var(--muted); line-height: 1.45; }
.dashboard .dialog-art { height: min(37vh, 260px); clear: both; border: 1px solid var(--line); border-radius: 9px; margin: 40px 0 15px; }
.dashboard #detailContent h2 { margin: 0 0 12px; }
.dashboard .play-link { background: var(--accent); color: #10213b; }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.game-actions p { margin: 0; flex-basis: 100%; }
.dashboard .favorite-action { display: inline-flex; gap: 7px; align-items: center; padding: 10px 13px; color: var(--ink); background: #18416b; border: 1px solid var(--line); font-size: .86rem; }
.dashboard .favorite-action svg { width: 16px; height: 16px; color: #ffe29c; }
.favorite-action[data-favorite="true"] svg { fill: currentColor; }
.favorite-message { color: var(--muted); font-size: .85rem; }
.favorite-message:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wave-running .console-badge { transition: transform 185ms cubic-bezier(.2,.8,.3,1), box-shadow 185ms, border-color 185ms; }
  .wave-running .game-row { transition: transform 155ms cubic-bezier(.2,.8,.3,1), border-color 155ms, box-shadow 155ms; }
  .wave-running .cover-layer { transition: opacity 140ms ease-out; }
  .wave-running .cover-layer.is-front { animation: cover-arrive 220ms ease-out; }
}
@keyframes cover-arrive {
  from { opacity: 0; transform: translateX(9px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@media (max-width: 680px) {
  .dashboard-main { width: calc(100% - 28px); }
  .dashboard-header { padding: 12px 14px; }
  .dashboard .brand { font-size: 16px; gap: 7px; }
  .brand-mark { width: 31px; height: 31px; }
  #settingsBtn { padding: 6px 8px; font-size: .75rem; }
  .dashboard #account button { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .xmb-stage { grid-template-columns: minmax(0, 1fr); }
  .game-list { max-height: clamp(170px, 34vh, 340px); }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); }
  .key-hints { display: none; }
}