/* Designer QA: shared alignment, readable labels, and consistent control targets. */
:root {
  --console-content-start: 10.1%;
  --console-content-end: 5.6%;
  --console-copy: #425236;
  --console-selection: linear-gradient(#567c20, #385c13);
}
.library-heading { left: var(--console-content-start); }
.library-switch { right: var(--console-content-end); }
.deck-caption { left: var(--console-content-start); right: var(--console-content-end); }
.boot-account > button,
.profile-menu button,
.game-case[aria-current=true] .case-label { background: var(--console-selection); }
.boot-account p { color: #526347; }
.boot-screen[data-phase=playing] .boot-controls { opacity: 1; }
.case-label { height: 26%; padding: 6px 9px; }
.cover-art { bottom: 26%; }
.case-label strong { font-size: clamp(13px, 1.43cqw, 20px); line-height: 1.15; }
.case-label small { font-size: clamp(10px, .85cqw, 12px); line-height: 1.3; white-space: normal; color: var(--console-copy); }
.library-switch button { font-size: clamp(12px, 1.1cqw, 16px); }
.controller-action { font-size: clamp(12px, 1.16cqw, 17px); }
.deck-caption p { font-size: clamp(11px, 1.07cqw, 16px); color: var(--console-copy); }
.deck-help { font-size: 11px; color: var(--console-copy); }
.counter { font-size: clamp(12px, 1.06cqw, 16px); }
.profile-trigger small { font-size: clamp(11px, .8cqw, 13px); color: var(--console-copy); }
.profile-trigger .profile-name { font-size: clamp(13px, 1.16cqw, 17px); }
.settings small { font-size: 11px; color: var(--console-copy); }
.settings button { color: #4a6039; min-width: 32px; min-height: 32px; }
.setting-label { display: none; }
.project-step span,
.work-caption small,
.story-heading > p,
.film-caption,
.team-credit,
.project-end,
.profile-content p { color: var(--console-copy); }
.project-intro .intro-copy { color: #4d5e41; }
.work-caption { align-items: flex-start; flex-wrap: wrap; gap: 5px 12px; }
.work-caption strong { font-size: clamp(13px, 1.07cqw, 16px); line-height: 1.4; }
.work-caption small { font-size: 12px; line-height: 1.4; white-space: normal; }
.film-caption, .team-credit { font-size: 12px; line-height: 1.5; }
.viewer-bottom > small { font-size: 12px; line-height: 1.5; }
.project-toolbar button { min-height: 32px; }
.project-end button { min-height: 44px; }
.profile-menu { transform-origin: top right; }
.profile-menu button { min-height: 44px; }
.toast-copy small { font-size: 12px; }
.arrow { min-width: 32px; min-height: 32px; }
#profile-trigger { min-width: 44px; min-height: 44px; }
@media (hover: none) {
  .blade-button:hover { transform: none; filter: none; }
  .work-item:hover .work-media img { filter: none; }
}
@media (max-width: 1050px) {
  .settings small { display: none; }
  .settings { gap: 5px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  :root { --console-content-start: 9%; --console-content-end: 7%; }
  .library-switch { left: var(--console-content-start); right: auto; }
  .library-switch button { min-height: 36px; padding-inline: 12px; }
  .case-label strong { font-size: clamp(13px, 4cqw, 18px); }
  .case-label small { font-size: 10px; }
  .controller-actions { gap: 8px; }
  .controller-action { font-size: 12px; }
  .deck-caption { align-items: center; }
  .deck-caption p { font-size: 11px; max-width: 46%; }
  .deck-caption .navigation { gap: 6px; }
  .deck-caption .arrow { width: 36px; height: 36px; }
  .counter { font-size: 12px; }
  .settings { gap: 4px; }
  .settings button { display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 44px; height: 44px; padding: 3px 0; }
  .settings button svg { width: 18px; height: 18px; }
  .setting-label { display: block; font-size: 11px; line-height: 1; }
  .project-intro .intro-copy { font-size: 14px; line-height: 1.55; }
  .project-facts { font-size: 12px; line-height: 1.5; }
  .project-toolbar { font-size: 12px; }
  .project-toolbar .project-step { font-size: 11px; }
  .work-caption strong { font-size: 13px; line-height: 1.4; }
  .work-caption small { font-size: 12px; }
  .story-heading > p { font-size: 13px; }
  .film-caption { flex-wrap: wrap; gap: 5px 16px; }
  .team-credit a { white-space: normal; }
  .viewer-bottom > small { font-size: 12px; }
  .viewer-bottom .arrow { width: 44px; height: 44px; }
  .viewer-bottom .navigation { gap: 6px; }
  .gamer-card .text-link { font-size: 12px; line-height: 1.5; }
  .gamer-card p { font-size: 12px; }
  .experience strong { font-size: 14px; }
  .experience span, .experience small { font-size: 12px; }
}
@media (max-height: 550px) {
  .case-label { height: 32%; padding: 5px 7px; }
  .cover-art { bottom: 32%; }
  .case-label small { display: none; }
}
@media (max-width: 380px) and (orientation: portrait) {
  #action-profile { display: none; }
  .case-label { height: 30%; padding: 4px 6px; }
  .cover-art { bottom: 30%; }
  .case-label small { display: none; }
}
.deck.is-resetting .game-case { transition: none; }
.project-toolbar button:focus-visible { outline-offset: -2px; border-radius: 3px; }
.project-tools { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }
.project-toolbar .project-jump { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 1px solid #9aaf82; border-radius: 3px; background: linear-gradient(#f6faed, #dce7ce); font-size: 12px; color: #3e5c2b; }
.project-view, .profile-content { scrollbar-gutter: stable; }
.project-view::-webkit-scrollbar, .profile-content::-webkit-scrollbar { width: 6px; }
.project-view::-webkit-scrollbar-track, .profile-content::-webkit-scrollbar-track { background: #d8e1ca; border-radius: 4px; }
.project-view::-webkit-scrollbar-thumb, .profile-content::-webkit-scrollbar-thumb { background: #8da26d; border-radius: 4px; }
@media (max-width: 800px) {
  .project-breadcrumb > b, .project-breadcrumb > span[aria-hidden=true], .project-tools .project-step { display: none; }
  .project-tools { gap: 0; }
  .project-toolbar .project-jump { min-height: 36px; padding-inline: 8px; }
}
.project-toolbar .project-jump { min-width: 108px; justify-content: space-between; }
/* A wide TV can be short even in a tall tablet viewport. */
@container (max-height: 450px) and (min-aspect-ratio: 13 / 10) {
  .deck { height: 42%; }
  .case-label { height: 32%; padding: 5px 7px; }
  .cover-art { bottom: 32%; }
  .case-label small { display: none; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .viewer-top h2 { font-size: 13px; }
  .viewer-top button, .viewer-bottom .text-link { font-size: 12px; }
  .viewer { grid-template-rows: auto minmax(0, 1fr) auto; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .profile-view { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8da26d #d8e1ca; scrollbar-gutter: stable; padding-bottom: 20px; }
  .profile-layout { height: auto; min-height: 100%; }
  .profile-content { flex: none; overflow: visible; }
}
.profile-content h3 { font-size: clamp(14px, 1.2cqw, 18px); }
/* Role and biography text stays readable as the TV shrinks. */
.profile-content p { font-size: clamp(14px, 1.18cqw, 18px); line-height: 1.55; }
.gamer-card p, .gamer-card .text-link { font-size: clamp(12px, 1.07cqw, 16px); }
.experience strong { font-size: clamp(14px, 1.24cqw, 18px); }
.experience span, .experience small { font-size: clamp(12px, 1cqw, 14px); }
@container (max-height: 450px) and (min-aspect-ratio: 13 / 10) {
  .profile-view { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8da26d #d8e1ca; scrollbar-gutter: stable; padding-bottom: 20px; }
  .profile-layout { height: auto; min-height: 100%; align-items: start; }
  .profile-content { overflow: visible; }
}
.gamer-card h2 { font-size: clamp(20px, 2.35cqw, 34px); }
.profile-content h2 { font-size: clamp(21px, 2.3cqw, 34px); }
.viewer-top h2 { font-size: clamp(13px, 1.6cqw, 22px); }
.viewer-top button, .viewer-bottom .text-link { font-size: clamp(12px, 1.03cqw, 15px); }
.project-end, .project-end button { font-size: clamp(12px, 1.1cqw, 16px); }
/* D-pad focus and mouse hover share the console's existing green selection language. */
.keyboard-navigation button:focus,
.keyboard-navigation a:focus { outline: 3px solid #386507; outline-offset: 4px; }
.keyboard-navigation .project-toolbar button:focus { outline-offset: -2px; }
.keyboard-navigation .work-item:focus .work-media { box-shadow: 0 0 0 2px #bddb83, 0 0 0 4px #567e29; }
.keyboard-navigation .work-item:focus .work-zoom { opacity: 1; transform: none; }
#project-view { scroll-padding-block: 72px 18px; }
.work-item { scroll-margin-block: 8px 12px; }
@media (hover: hover) and (pointer: fine) {
  .game-case:not([aria-current=true]):hover .case-label { background: linear-gradient(#f3fae6, #c8dfa8); }
  .game-case:hover .cover-logo { filter: drop-shadow(0 2px 5px #0007); }
  .controller-action:not(:disabled):hover { color: #315415; text-shadow: 0 1px #fff9; }
  .settings button:hover { background: #b5cf924d; border-radius: 4px; }
  .work-item:hover .work-caption strong { color: #315415; }
}
/* Keep the 3D reel plane from intercepting its receding project covers. */
.deck { pointer-events: none; }
.game-case { pointer-events: auto; }
.keyboard-navigation .work-item:focus { outline-offset: -2px; }

.case-band .case-wordmark{display:block;width:clamp(50px,6.4cqw,92px);height:auto;max-height:65%;object-fit:contain;object-position:left center;flex-shrink:0}