/* Desktop Chroma: the question is the surface; controls stay in a quiet rail. */
@media (min-width:761px) and (min-height:501px), (min-width:1001px) {
  .desktop-chroma-page .game-layout {
    --chroma-board-size: max(276px,min(var(--desktop-game-height,calc(100dvh - 94px)),calc(100vw - 252px)));
    display: grid;
    grid-template-columns: var(--chroma-board-size) 148px;
    grid-template-rows: 44px 60px minmax(150px,1fr) 24px 58px 44px;
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
    width: max-content;
    max-width: 100%;
    height: var(--chroma-board-size);
    min-height: 380px;
    margin: 0 auto;
  }
  .desktop-chroma-page .intro,
  .desktop-chroma-page .game-column,
  .desktop-chroma-page .console { display: contents; }
  .desktop-chroma-page .intro > .eyebrow,
  .desktop-chroma-page .intro-description,
  .desktop-chroma-page .keyboard-hint,
  .desktop-chroma-page .console-top,
  .desktop-chroma-page #board-caption { display: none; }
  .desktop-chroma-page .intro h1 { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-family: inherit; font-size: 29px; font-weight: 350; letter-spacing: -.055em; line-height: 1.2; color: #d2d2d2; }
  .desktop-chroma-page .chroma-difficulty { display: flex; grid-column: 2; grid-row: 2; width: 100%; margin: 0; gap: 4px; font-size: 9px; line-height: 12px; color: #929292; }
  .desktop-chroma-page .chroma-difficulty > span:not(.select-control) { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip-path: none; }
  .desktop-chroma-page .chroma-difficulty .select-trigger { min-height: 40px; height: 40px; padding-inline: 11px; font-size: 12px; border-radius: 9px; }
  .desktop-chroma-page .chroma-difficulty select { min-height: 40px; font-size: 12px; border: 0; }
  .desktop-chroma-page .metrics { display: flex; flex-direction: column; grid-column: 2; grid-row: 3; gap: 12px; margin: 0; padding: 14px 0 0; border: 0; }
  .desktop-chroma-page .metric { display: block; padding: 0; border: 0; }
  .desktop-chroma-page .metric-label { display: block; font-size: 9px; line-height: 12px; color: #949494; letter-spacing: .02em; margin: 0 0 4px; }
  .desktop-chroma-page .metric-number { font-size: 29px; line-height: 1; letter-spacing: -.045em; color: #d3d3d3; font-variant-numeric: tabular-nums; }
  .desktop-chroma-page .metric .unit { font-size: 10px; color: #7e7e7e; margin-left: 5px; letter-spacing: 0; }
  .desktop-chroma-page .board-wrap { grid-column: 1; grid-row: 1 / 7; width: var(--chroma-board-size); height: var(--chroma-board-size); aspect-ratio: 1; margin: 0; padding: 12px; border: 0; border-radius: 17px; background: #1b1b1b; box-shadow: inset 0 2px 5px #00000050,inset 0 -1px 2px #ffffff04,0 12px 35px #00000018; }
  .desktop-chroma-page .board { width: 100%; height: 100%; aspect-ratio: 1; gap: clamp(6px,1vw,10px); }
  .desktop-chroma-page .timer-track { grid-column: 1; grid-row: 1 / 7; align-self: end; z-index: 2; height: 2px; margin: 0 14px 6px; background: #323232; border-radius: 2px; pointer-events: none; }
  .desktop-chroma-page .console-bottom { grid-column: 2; grid-row: 4; display: block; margin: 0; padding: 0; min-height: 0; font-size: 10px; line-height: 16px; }
  .desktop-chroma-page .streak { gap: 5px; color: #8c8c8c; }
  .desktop-chroma-page .streak.active { color: #c8c8c8; }
  .desktop-chroma-page .streak-mark { font-size: 13px; }
  .desktop-chroma-page .game-actions { grid-column: 2; grid-row: 5; position: static; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .desktop-chroma-page .game-actions .primary-button { width: 100%; min-width: 0; min-height: 46px; padding: 0 14px; gap: 12px; font-size: 12px; border: 0; border-radius: 10px; background: linear-gradient(155deg,#303030,#252525); color: #d0d0d0; box-shadow: inset 0 1px 1px #ffffff08,0 3px 7px #00000033; }
  .desktop-chroma-page .game-actions .button-arrow { font-size: 20px; color: #939393; }
  .desktop-chroma-page .console-footnote { grid-column: 2; grid-row: 6; display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; padding: 0; font-size: 9px; line-height: 1.5; color: #929292; }
  .desktop-chroma-page .console-footnote #best-label { font-size: 9px; white-space: normal; }
  .desktop-chroma-page .console-footnote #best { font-size: 11px; color: #b8b8b8; }
  .desktop-chroma-page .board-overlay { border-radius: 17px; background: #202020e8; }
  .desktop-chroma-page .board-overlay .overlay-content { max-width: 360px; }
  .desktop-chroma-page .board-overlay h2 { font-size: clamp(30px,4vw,44px); font-weight: 350; }
  .desktop-chroma-page .board-overlay .primary-button { min-width: 150px; min-height: 48px; }
}

@media (min-width:761px) and (min-height:501px) and (max-height:620px), (min-width:1001px) and (max-height:620px) {
  .desktop-chroma-page .game-layout { grid-template-rows: 29px 44px minmax(96px,1fr) 20px 49px 38px; min-height: 276px; }
  .desktop-chroma-page .intro h1 { font-size: 23px; }
  .desktop-chroma-page .chroma-difficulty > span:not(.select-control) { display: none; }
  .desktop-chroma-page .metrics { gap: 8px; padding-top: 8px; }
  .desktop-chroma-page .metric { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
  .desktop-chroma-page .metric-label { margin: 0; font-size: 8px; }
  .desktop-chroma-page .metric-number { font-size: 23px; }
  .desktop-chroma-page .metric .unit { font-size: 8px; margin-left: 3px; }
  .desktop-chroma-page .board-wrap { padding: 10px; border-radius: 14px; }
  .desktop-chroma-page .board { gap: 6px; }
  .desktop-chroma-page .timer-track { margin: 0 12px 5px; }
}