/* R24: opt-in tray only. Frozen A, other styles and puzzle geometry stay intact. */
.cr-entry-picker, .cr-status-short { display: none; }
.cr-app[data-tray-ui] .cr-save-alert {
  grid-area: warning; width: 100%; max-width: none; margin: 0; padding: 0;
  border: 2px solid #937a48; background: #fff2ce; color: #624c24;
}
.cr-app[data-tray-ui][data-tray-mobile="false"] .cr-workspace:has(.cr-save-alert) {
  grid-template-areas: "warning warning" "rack rack" "play controls" "play hints";
  grid-template-rows: auto auto auto 1fr;
}
.cr-app[data-tray-ui] .cr-save-alert > button {
  display: flex; justify-content: start; width: 100%; min-height: 44px;
  padding: 3px 8px; border: 0; color: inherit; text-align: left;
}
.cr-app[data-tray-ui] .cr-save-alert > button > span:nth-child(2) { display: grid; gap: 2px; }
.cr-app[data-tray-ui] .cr-save-alert strong { font-size: 12px; }
.cr-app[data-tray-ui] .cr-save-alert small { font-size: 10px; line-height: 1.2; }
.cr-app[data-tray-ui] .cr-save-alert > button > span:last-child { margin-left: auto; font-size: 20px; }
.cr-app[data-tray-ui] .cr-save-alert > button > span:first-child { font-size: 22px; font-weight: 900; }
.cr-app[data-tray-ui] :is(.cr-help-dialog, .cr-result-dialog, .cr-save-info-dialog) {
  border: 2px solid #9b8c76; border-radius: 12px; background: #f6efdf;
  box-shadow: inset 0 3px 0 #fffaf0, 0 5px 0 #726552, 0 12px 30px #23323d40;
}
.cr-app[data-tray-ui] :is(.cr-help-dialog, .cr-result-dialog, .cr-save-info-dialog) .cr-dialog-header {
  background: #e8dfcd; border-bottom: 2px solid #c5b89e;
}
.cr-app[data-tray-ui] :is(.cr-help-dialog, .cr-save-info-dialog) button {
  border: 1px solid #b6a68d; border-radius: 8px; min-height: 44px;
  background: #f9f2e3; color: #514438; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b6a68d;
}
.cr-app[data-tray-ui] .cr-result-dialog .is-primary { background: #57465f; color: #fff8e8; border-color: #57465f; box-shadow: 0 2px 0 #392e40; }
.cr-app[data-tray-ui] .cr-result-metrics > div { padding: 9px; border: 1px solid #c5b89e; border-radius: 8px; background: #fff9ee; }
.cr-app[data-tray-ui] .cr-help-steps { padding-left: 22px; }
.cr-app[data-tray-ui] .cr-help-steps li::marker { color: #665374; font-weight: 850; }

@media (max-width: 700px), (max-width: 1000px) and (max-height: 540px) {
  .cr-app[data-tray-ui] { padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .cr-app[data-tray-ui] .cr-workspace {
    height: calc(100svh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    scroll-margin-top: calc(6px + env(safe-area-inset-top, 0px));
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "context" "play" "rack" "dock";
  }
  .cr-app[data-tray-ui] .cr-workspace:has(.cr-save-alert) {
    grid-template-areas: "warning" "context" "play" "rack" "dock";
    grid-template-rows: 48px 40px minmax(0, 1fr) auto 172px;
  }
  .cr-app[data-tray-ui] .cr-save-alert { grid-area: warning; align-self: stretch; }
  .cr-app[data-tray-ui] .cr-game-column { display: contents; }
  .cr-app[data-tray-ui] .cr-play { grid-area: play; border-block: 1px solid var(--line); }
  .cr-app[data-tray-ui] .cr-play > .cr-metrics { display: none; }
  .cr-app[data-tray-ui] .cr-rack { grid-area: rack; padding: 0; border: 0; background: transparent; }
  .cr-app[data-tray-ui] .cr-rack > .cr-section-heading { display: block; }
  .cr-app[data-tray-ui] .cr-rack-metrics { color: var(--muted); white-space: nowrap; }
  .cr-app[data-tray-ui] .cr-cube-list[data-count] { max-width: none; margin: 0; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-cube-status { font-size: 10px; line-height: 12px; gap: 3px; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-status-full { display: none; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-status-short { display: inline; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-tray-dialog .cr-status-full { display: inline; }
  .cr-app[data-tray-ui][data-tray-expanded="false"] .cr-tray-dialog .cr-status-short { display: none; }
  .cr-app[data-tray-ui] .cr-board-stage { --board-gap: 3px; }
  .cr-app[data-tray-ui] .cr-board-cube { grid-template-rows: 6px minmax(0, 1fr); font-size: min(18px, calc(var(--board-cell) - 8px)); }
  .cr-app[data-tray-ui] .cr-board-cube > .cr-cube-code { top: 0; left: 2px; font-size: 6px; line-height: 1; }
  .cr-app[data-tray-ui] .cr-board-cube > .cr-cube-face { grid-row: 2; align-self: center; line-height: 1; }
  .cr-app[data-tray-ui] .cr-workspace-clue {
    grid-area: context; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 7px;
    min-width: 0; height: 40px; padding: 1px 6px; border: 2px solid #223b46; border-radius: 9px 5px 9px 5px;
    background: #3a5360; box-shadow: inset 0 2px 0 #66808a, inset 0 -2px 0 #2a424e, 0 3px 0 #192f39;
    color: #fff5df; overflow-y: auto; overflow-wrap: anywhere;
  }
  .cr-app[data-tray-ui] .cr-workspace-clue p { display: none; }
  .cr-app[data-tray-ui] .cr-workspace-clue-mark { display: grid; place-items: center; width: 29px; height: 32px; }
  .cr-app[data-tray-ui] .cr-workspace-clue-mark svg { width: 29px; height: 32px; stroke: #282d42; stroke-width: 1.2; }
  .cr-app[data-tray-ui] .cr-clue-cube-top { fill: #e2daf7; }
  .cr-app[data-tray-ui] .cr-clue-cube-side { fill: #887ba9; }
  .cr-app[data-tray-ui] .cr-clue-cube-front { fill: #c5b8e9; }
  .cr-app[data-tray-ui] .cr-clue-cube-question { fill: none; stroke: #36304e; stroke-width: 2.5; }
  .cr-app[data-tray-ui] .cr-workspace-clue-content { display: grid; min-width: 0; font-size: 13px; font-weight: 700; line-height: 16px; text-shadow: 0 1px 0 #253c47; }
  .cr-app[data-tray-ui] .cr-workspace-clue-part { display: block; }
  .cr-app[data-tray-ui] .cr-workspace-clue[data-clue-type="common-link"] .cr-workspace-clue-content { display: flex; flex-wrap: wrap; column-gap: 9px; }
  .cr-app[data-tray-ui] .cr-workspace-clue[data-clue-type="common-link"] .cr-workspace-clue-part + .cr-workspace-clue-part { border-left: 2px solid #8f84af; padding-left: 9px; }
  .cr-app[data-tray-ui] .cr-touch-dock { grid-area: dock; display: grid; grid-template-columns: minmax(0, 1fr) 172px; grid-template-rows: 112px 52px; gap: 8px; min-width: 0; }
  .cr-app[data-tray-ui] .cr-controls { display: contents; }
  .cr-app[data-tray-ui] .cr-controls > .cr-selected { display: none; }
  .cr-app[data-tray-ui] .cr-controls > .cr-direction-pad { grid-area: 1 / 2 / span 2; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 8px; }
  .cr-app[data-tray-ui] .cr-direction-pad > .cr-direction-button { min-width: 52px; min-height: 52px; gap: 3px; font-size: 25px; }
  .cr-app[data-tray-ui] .cr-direction-pad [data-direction="S"] { grid-area: 3 / 2; }
  .cr-app[data-tray-ui] .cr-direction-center { grid-area: 2 / 2; position: relative; padding-top: 9px; border-color: var(--selection-ring); font-size: 25px; }
  .cr-app[data-tray-ui] .cr-direction-center::before { content: attr(data-cube-code); position: absolute; top: 2px; left: 3px; font-size: 10px; font-weight: 800; line-height: 1; }
  .cr-app[data-tray-ui] .cr-controls > .cr-game-actions { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .cr-app[data-tray-ui] .cr-game-actions .cr-button { min-width: 0; min-height: 52px; padding-inline: 2px; font-size: 11px; }
  .cr-app[data-tray-ui] .cr-game-actions [data-action="undo"],
  .cr-app[data-tray-ui] .cr-game-actions:has([data-action="open-result"]) [data-action="undo"] { grid-column: auto; grid-row: auto; }
  .cr-app[data-tray-ui] .cr-game-actions :is([data-action="open-restart"], [data-action="open-result"]) { display: none; }
  .cr-app[data-tray-ui] .cr-direction-pad > .cr-touch-result { display: grid; place-items: center; grid-area: 3 / 3; min-width: 52px; min-height: 52px; padding: 3px; font-size: 11px; background: var(--action-bg); color: var(--action-ink); }
  .cr-app[data-tray-ui] .cr-controls:has(.cr-entry-picker) > .cr-direction-pad { display: none; }
  .cr-app[data-tray-ui] .cr-entry-picker { grid-area: 1 / 2 / span 2; display: grid; align-content: center; gap: 8px; width: 172px; }
  .cr-app[data-tray-ui] .cr-entry-picker > strong { font-size: 12px; color: #53616a; }
  .cr-app[data-tray-ui] .cr-entry-picker > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cr-app[data-tray-ui] .cr-entry-picker button { min-width: 44px; min-height: 52px; padding: 4px; border: 2px solid #596670; border-radius: 8px; background: #66737c; color: #fffaf0; font-size: 15px; box-shadow: inset 0 2px 0 #94a0a7, 0 3px 0 #3f4a53; }
  .cr-app[data-tray-ui] .cr-entry-picker button:disabled { background: #e0e5e4; color: #7b8688; border-color: #b4bfbe; box-shadow: none; }
  .cr-app[data-tray-ui] .cr-touch-dock > .cr-hints { grid-area: 1 / 1; display: block; height: 112px; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .cr-app[data-tray-ui] .cr-touch-dock > .cr-hints > :not(.cr-hint-peek) { display: none; }
  .cr-app[data-tray-ui] .cr-hint-peek { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; height: 112px; min-width: 0; padding: 7px 9px; border: 2px solid #76658d; border-radius: 10px 10px 7px 7px; background: #f9f4e7; color: #40394e; box-shadow: inset 0 2px 0 #fffdf6, 0 3px 0 #8e81a4; text-align: left; touch-action: none; user-select: none; }
  .cr-app[data-tray-ui] .cr-hint-peek-grip { width: 28px; height: 3px; min-height: 3px; border-radius: 3px; background: #9b8bb7; align-self: center; }
  .cr-app[data-tray-ui] .cr-hint-peek-heading { display: flex; justify-content: space-between; gap: 5px; font-size: 10px; }
  .cr-app[data-tray-ui] .cr-hint-peek-heading strong { font-size: 13px; }
  .cr-app[data-tray-ui] .cr-hint-peek-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12px; font-weight: 500; line-height: 14px; }
  .cr-app[data-tray-ui] .cr-hint-peek-pull { display: flex; justify-content: space-between; margin-top: auto; font-size: 9px; font-weight: 800; color: #726187; }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-list[data-count] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-app[data-tray-ui] .cr-tray-dialog .cr-cube-button { min-height: 80px; }
  .cr-app[data-tray-ui] .cr-hints-dialog {
    position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%, 500px); max-width: 100%; height: min(440px, 70svh);
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 16px); padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: hidden; border: 3px solid #76658d; border-bottom: 0; border-radius: 20px 20px 0 0; background: #eee9da; color: #40394e;
  }
  .cr-app[data-tray-ui] .cr-hints-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 44px 52px minmax(0, 1fr); gap: 8px; }
  .cr-app[data-tray-ui] .cr-hints-dialog > :nth-child(1) { grid-area: 1 / 1; }
  .cr-app[data-tray-ui] .cr-hints-dialog > :nth-child(2) { grid-area: 2 / 1; }
  .cr-app[data-tray-ui] .cr-hints-dialog > :nth-child(3) { grid-area: 3 / 1; }
  .cr-app[data-tray-ui] .cr-hints-dialog > :nth-child(4) { grid-area: 4 / 1; }
  .cr-app[data-tray-ui] .cr-hint-drawer-handle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 44px; padding: 4px; border: 0; background: transparent; color: #655777; font-size: 11px; touch-action: none; user-select: none; }
  .cr-app[data-tray-ui] .cr-hint-drawer-grip { display: block; width: 44px; height: 5px; border-radius: 4px; background: #9b8bb7; }
  .cr-app[data-tray-ui] .cr-hint-drawer-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 3px; }
  .cr-app[data-tray-ui] .cr-hint-drawer-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 23px; }
  .cr-app[data-tray-ui] .cr-hint-drawer-heading h2 > span { padding: 1px 8px; border: 2px solid #76658d; border-radius: 5px; background: #c5b8e9; }
  .cr-app[data-tray-ui] .cr-hint-drawer-count { font-size: 19px; font-weight: 800; }
  .cr-app[data-tray-ui] .cr-hint-drawer-count small { font-size: 11px; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: auto; margin: 0; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-actions .cr-button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; min-width: 0; height: 50px; padding: 8px 10px; border: 2px solid #87789e; border-radius: 9px; background: #c3b5df; box-shadow: inset 0 2px 0 #ded3f1, 0 3px 0 #87789e; color: #40394e; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-tool-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-tool-label { font-size: 13px; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-charges { grid-column: auto; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hints-body { height: auto; min-height: 0; max-height: none; padding: 7px; border: 1px solid #d1c7ba; border-radius: 11px; background: #ded8c9; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; }
  .cr-app[data-tray-ui] .cr-hints-dialog :is(.cr-inline-hints, .cr-inline-hint-group) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-inline-hint-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 3px 10px; padding: 12px 10px; border: 1px solid #d4c9de; border-radius: 8px; background: #fffaf0; box-shadow: 0 2px 0 #c9bdb0; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-inline-hint-label { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 3px; font-size: 9px; text-transform: uppercase; color: #786487; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-inline-hint-label strong { font-size: 23px; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-inline-hint-text { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
  .cr-app[data-tray-ui] .cr-hints-dialog .cr-hint-context { grid-column: 2; margin-top: 3px; font-size: 11px; line-height: 1.35; color: #736a7a; }
}

/* Landscape is a side-by-side game surface, including phones wider than 700px. */
@media (max-width: 1000px) and (max-height: 540px) and (orientation: landscape) {
  .cr-app[data-tray-ui] .cr-layout { max-width: none; width: 100%; }
  .cr-app[data-tray-ui] .cr-workspace {
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 40px minmax(0, 1fr) 172px;
    grid-template-areas: "context rack" "play rack" "play dock"; gap: 6px 12px;
  }
  .cr-app[data-tray-ui] .cr-workspace:has(.cr-save-alert) {
    grid-template-areas: "warning warning" "context rack" "play rack" "play dock";
    grid-template-rows: 48px 40px minmax(0, 1fr) 172px;
  }
  .cr-app[data-tray-ui] .cr-rack { align-self: start; }
  .cr-app[data-tray-ui] .cr-play { display: grid; place-items: center; }
  .cr-app[data-tray-ui] .cr-board-frame { width: min(100%, 307px, calc(100svh - 70px)); }
  .cr-app[data-tray-ui] .cr-workspace:has(.cr-save-alert) .cr-board-frame { width: min(100%, 307px, calc(100svh - 124px)); }
  .cr-app[data-tray-ui] .cr-port { width: 100%; height: 100%; font-size: 9px; }
  .cr-app[data-tray-ui] .cr-hints-dialog { height: calc(100svh - 16px); }
  .cr-app[data-tray-ui] .cr-tray-dialog { max-height: calc(100svh - 16px); }
}

/* R25: compact controls use remaining height, including the save-warning row. */
.cr-app[data-tray-ui][data-compact-dock="true"][data-tray-landscape="false"] .cr-workspace { grid-template-rows: 40px minmax(0, 1fr) auto 104px; }
.cr-app[data-tray-ui][data-compact-dock="true"][data-tray-landscape="false"] .cr-workspace:has(.cr-save-alert) { grid-template-rows: 48px 40px minmax(0, 1fr) auto 104px; }
.cr-app[data-tray-ui][data-compact-dock="true"][data-tray-landscape="true"] .cr-workspace { grid-template-rows: 40px minmax(0, 1fr) 104px; }
.cr-app[data-tray-ui][data-compact-dock="true"][data-tray-landscape="true"] .cr-workspace:has(.cr-save-alert) { grid-template-rows: 48px 40px minmax(0, 1fr) 104px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-touch-dock { height: 104px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 48px 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-controls > .cr-direction-pad { grid-area: 1 / 1 / auto / -1; grid-template-columns: repeat(5, minmax(44px, 1fr)); grid-template-rows: 48px; gap: 6px; width: 100%; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad > .cr-direction-button { min-width: 44px; min-height: 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad [data-direction="W"] { grid-area: 1 / 1; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad [data-direction="N"] { grid-area: 1 / 2; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad .cr-direction-center { grid-area: 1 / 3; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad [data-direction="S"] { grid-area: 1 / 4; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad [data-direction="E"] { grid-area: 1 / 5; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-direction-pad > .cr-touch-result { grid-area: 1 / 3; z-index: 1; min-width: 44px; min-height: 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-controls > .cr-game-actions { grid-area: 2 / 1 / auto / span 2; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-game-actions .cr-button { min-height: 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-touch-dock > .cr-hints { grid-area: 2 / 3; height: 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-hint-peek { height: 48px; padding: 4px; gap: 2px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-hint-peek-heading { gap: 2px; font-size: 9px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-hint-peek-heading strong { font-size: 11px; }
.cr-app[data-tray-ui][data-compact-dock="true"] :is(.cr-hint-peek-grip, .cr-hint-peek-pull) { display: none; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-hint-peek-summary { -webkit-line-clamp: 1; font-size: 10px; line-height: 13px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-entry-picker { grid-area: 1 / 1 / auto / -1; width: 100%; gap: 0; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-entry-picker > strong { display: none; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-entry-picker > div { grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 4px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-entry-picker button { min-height: 48px; }
.cr-app[data-tray-ui][data-compact-dock="true"] .cr-hints-dialog { height: calc(100svh - 16px); }