/* Three additional game tables. Shared rules retain every cube feedback color. */
body[data-style="workshop"] { background: #bfa176; }
body[data-style="orbit"] { background: #192730; }
body[data-style="toybox"] { background: #deb79f; }

.cr-app[data-style="workshop"] {
  --ink: #304431;
  --muted: #716b50;
  --surface: #ddbe85;
  --line: #baa06e;
  --accent: #36553b;
  --accent-ink: #fff5da;
  --tile: #f8e9c5;
  --tile-edge: #c5aa72;
  --tile-bottom: #967745;
  --target: #c8bed3;
  --target-edge: #96879c;
  --target-ink: #504256;
  --port: #b7734e;
  --port-edge: #865334;
  --port-ink: #fff1d2;
  --key: #eacb94;
  --key-edge: #b3945e;
  --key-bottom: #8a6b40;
  --radius: 7px;
  --counter-bg: #354d36;
  --counter-edge: #263b29;
  --counter-label: #d6dec0;
  --counter-number: #fff3cc;
  --counter-rolls: #f7c190;
  --counter-shadow: #a38a5c;
  --action-bg: #354d36;
  --action-ink: #fff3cf;
  --action-soft: #efe0b7;
  --action-edge: #ac9462;
  --restart-bg: #dcb394;
  --restart-ink: #65422a;
  --restart-edge: #a87d5b;
  --disabled-bg: #d2bc8d;
  --disabled-ink: #968364;
  --disabled-edge: #b69d73;
  --selection-ring: #334e35;
  --selection-badge: #334e35;
  --selection-label: #fff3cf;
  --piece-token-radius: 50%;
  --hint-kit-bg: #caaa72;
  --hint-paper: #fff0c8;
  --hint-paper-ink: #45513a;
  --hint-paper-line: #c6b58c;
  --hint-tool-bg: #425b3f;
  --hint-tool-ink: #fff3cf;
  --hint-tool-edge: #293d2b;
  --hint-tool-radius: 8px;
  max-width: 1400px;
}
.cr-app[data-style="workshop"] .cr-cell { box-shadow: 0 4px 0 var(--tile-bottom), inset 0 2px 0 #fffc; }
.cr-app[data-style="workshop"] .cr-net-face { background: #fff1d1; border-color: #b79f6c; }
.cr-app[data-style="workshop"] .cr-net-face.is-top { background: var(--state-bg, #3b5235); color: var(--state-ink, #fff2c8); border-color: var(--state-edge, #30412c); }
.cr-app[data-style="workshop"] .cr-net-face strong,
.cr-app[data-style="workshop"] .cr-board-cube .cr-cube-face { font-family: Georgia, "Times New Roman", serif; }
.cr-app[data-style="workshop"] .cr-direction-pad > button { background: #f6e7bd; border-color: #b69b66; box-shadow: 0 4px 0 #947843; }
.cr-app[data-style="workshop"] .cr-metric { border-radius: 5px; }
.cr-app[data-style="workshop"] .cr-hints { box-shadow: inset 0 1px 0 #fff4, 0 4px 0 #9c7d4e; }

.cr-app[data-style="orbit"] {
  --ink: #e1e8e6;
  --muted: #a4b2b8;
  --surface: #273640;
  --line: #52606a;
  --accent: #d3af8a;
  --accent-ink: #27363c;
  --tile: #d7dccf;
  --tile-edge: #a2afa9;
  --tile-bottom: #12252e;
  --target: #b8b3cf;
  --target-edge: #838299;
  --target-ink: #37394e;
  --port: #c89d77;
  --port-edge: #967051;
  --port-ink: #2e3230;
  --key: #364952;
  --key-edge: #657b83;
  --key-bottom: #152830;
  --radius: 4px;
  --counter-bg: #1a2a33;
  --counter-edge: #627276;
  --counter-label: #aebfc2;
  --counter-number: #edf0dc;
  --counter-rolls: #e4ba8f;
  --counter-shadow: #15242b;
  --action-bg: #d0d9cc;
  --action-ink: #2c3d41;
  --action-soft: #40545f;
  --action-edge: #71838a;
  --restart-bg: #604c40;
  --restart-ink: #f0d7b7;
  --restart-edge: #977b61;
  --disabled-bg: #31444e;
  --disabled-ink: #788d98;
  --disabled-edge: #526873;
  --selection-ring: #d4b491;
  --selection-badge: #d4b491;
  --selection-label: #273640;
  --piece-token-radius: 4px;
  --hint-kit-bg: #20303a;
  --hint-paper: #e5e1d0;
  --hint-paper-ink: #31434b;
  --hint-paper-line: #b2b8a7;
  --hint-tool-bg: #c6a47e;
  --hint-tool-ink: #293a41;
  --hint-tool-edge: #876d52;
  --hint-tool-radius: 4px;
  max-width: 1280px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.cr-app[data-style="orbit"] .cr-header { border-bottom-color: #8b7965; }
.cr-app[data-style="orbit"] .cr-notes-link { color: #e0c4a2; }
.cr-app[data-style="orbit"] .cr-cell { border-radius: 3px; box-shadow: 0 3px 0 var(--tile-bottom); }
.cr-app[data-style="orbit"] .cr-net-face { background: #dfe3d5; color: #283b41; border-color: #93a6a5; }
.cr-app[data-style="orbit"] .cr-net-face.is-top { background: var(--state-bg, #172d36); color: var(--state-ink, #eff0db); border-color: var(--state-edge, #11242c); }
.cr-app[data-style="orbit"] .cr-direction-pad > button { background: #d0d8cc; border-color: #92a5a4; color: #283e48; box-shadow: 0 4px 0 #152932; }
.cr-app[data-style="orbit"] .cr-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid #627276; background: #627276; border-radius: 4px; overflow: hidden; }
.cr-app[data-style="orbit"] .cr-metric { min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
.cr-app[data-style="orbit"] .cr-hints { border: 1px solid #647176; box-shadow: 0 4px 0 #152932; }

.cr-app[data-style="toybox"] {
  --ink: #344c5d;
  --muted: #7c6e66;
  --surface: #f7dbc6;
  --line: #d9b79e;
  --accent: #aa4f70;
  --accent-ink: #fff4de;
  --tile: #c8dfe9;
  --tile-edge: #94b8c8;
  --tile-bottom: #668b9e;
  --target: #d4bedb;
  --target-edge: #a18aac;
  --target-ink: #594264;
  --port: #bd6786;
  --port-edge: #98516b;
  --port-ink: #fff1dd;
  --key: #f2c9ad;
  --key-edge: #c89f84;
  --key-bottom: #a97f69;
  --radius: 14px;
  --counter-bg: #547a90;
  --counter-edge: #426a7e;
  --counter-label: #dceaf0;
  --counter-number: #fff6df;
  --counter-rolls: #ffddbc;
  --counter-shadow: #c2a08a;
  --action-bg: #5e8094;
  --action-ink: #fff3dd;
  --action-soft: #fbe8cc;
  --action-edge: #c7ac88;
  --restart-bg: #b86683;
  --restart-ink: #fff0df;
  --restart-edge: #96516d;
  --disabled-bg: #e9cdb6;
  --disabled-ink: #b19b88;
  --disabled-edge: #d2b299;
  --selection-ring: #a24b70;
  --selection-badge: #a24b70;
  --selection-label: #fff3df;
  --piece-token-radius: 8px;
  --hint-kit-bg: #ddba9f;
  --hint-paper: #fff3d9;
  --hint-paper-ink: #544e59;
  --hint-paper-line: #d7b9a3;
  --hint-tool-bg: #b4cfe0;
  --hint-tool-ink: #374f67;
  --hint-tool-edge: #7695ac;
  --hint-tool-radius: 13px;
  max-width: 1200px;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cr-app[data-style="toybox"] .cr-cell { border-radius: 9px; box-shadow: 0 4px 0 var(--tile-bottom), inset 0 2px 0 #fff9; }
.cr-app[data-style="toybox"] .cr-net-face { background: #fff2d9; color: #3d5363; border-color: #c4a991; border-radius: 5px; }
.cr-app[data-style="toybox"] .cr-net-face.is-top { background: var(--state-bg, #567d92); color: var(--state-ink, #fff0d6); border-color: var(--state-edge, #3f6478); }
.cr-app[data-style="toybox"] .cr-direction-pad > button { border-radius: 12px; background: #fff0d6; border-color: #adbac0; color: #3e5e73; box-shadow: 0 5px 0 #728c9a; }
.cr-app[data-style="toybox"] .cr-metric { border-radius: 15px; }
.cr-app[data-style="toybox"] .cr-hints { border-radius: 16px; box-shadow: 0 4px 0 #b08b75; }

@media (min-width: 701px) {
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-header { min-height: 82px; }
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-brand img { width: 190px; max-height: 64px; }
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-edition { font-size: 10px; }
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-board-stage { width: min(100%, calc(350px * var(--cols) / var(--rows))); }

  /* One workbench: clue card, rolling space, and tool rest. */
  .cr-app[data-style="workshop"] .cr-layout { grid-template-columns: 215px minmax(0, 1fr) 190px; grid-template-areas: "clue play controls" "rack rack rack" "hints hints hints"; gap: 24px 28px; padding-top: 23px; }
  .cr-app[data-style="workshop"] .cr-game-column { display: contents; }
  .cr-app[data-style="workshop"] .cr-clue { padding: 17px 16px 19px; background: #f7e8c4; border: 1px solid #bda374; border-radius: 3px; box-shadow: 0 3px 0 #b09565; }
  .cr-app[data-style="workshop"] .cr-eyebrow { margin-bottom: 12px; font-size: 10px; }
  .cr-app[data-style="workshop"] .cr-instruction { font-size: 15px; margin-bottom: 14px; }
  .cr-app[data-style="workshop"] .cr-terms[data-clue-type="common-link"] .cr-term { font-family: Georgia, "Times New Roman", serif; font-size: 31px; line-height: 1.1; }
  .cr-app[data-style="workshop"] .cr-answer { gap: 5px; margin-top: 20px; }
  .cr-app[data-style="workshop"] .cr-answer-slot { width: 28px; }
  .cr-app[data-style="workshop"] .cr-answer-slot strong { height: 33px; font-size: 20px; }
  .cr-app[data-style="workshop"] .cr-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 17px; justify-items: center; padding: 17px 15px; background: #cfad76; border: 1px solid #b18f59; border-radius: 11px; box-shadow: inset 0 2px 0 #e9cd99, 0 4px 0 #9e7f4d; }
  .cr-app[data-style="workshop"] .cr-selected { justify-items: center; text-align: center; }
  .cr-app[data-style="workshop"] .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 5px; }
  .cr-app[data-style="workshop"] .cr-game-actions { width: 100%; grid-template-columns: minmax(0, 1fr); justify-self: stretch; gap: 8px; }
  .cr-app[data-style="workshop"] .cr-game-actions .cr-button { width: 100%; min-width: 0; }
  .cr-app[data-style="workshop"] .cr-rack { padding: 13px 18px 18px; background: #cba773; border: 1px solid #ad8a55; border-radius: 11px; box-shadow: inset 0 2px 0 #e4c28c, 0 4px 0 #9a7849; }

  /* Navigation deck: one continuous play column beside its mission notes. */
  .cr-app[data-style="orbit"] .cr-layout { grid-template-columns: minmax(0, 1fr) 342px; grid-template-areas: "game clue" "game rack" "hints hints"; gap: 20px 34px; padding-top: 24px; }
  .cr-app[data-style="orbit"] .cr-game-column { display: grid; grid-area: game; grid-template-areas: "play" "controls"; gap: 22px; min-width: 0; align-content: start; }
  .cr-app[data-style="orbit"] .cr-clue { padding: 16px 18px 18px; border-left: 3px solid #b79671; background: #21313a; }
  .cr-app[data-style="orbit"] .cr-eyebrow { margin-bottom: 13px; color: #dac4a6; }
  .cr-app[data-style="orbit"] .cr-instruction { font-size: 14px; }
  .cr-app[data-style="orbit"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 29px; line-height: 1.15; letter-spacing: -.06em; }
  .cr-app[data-style="orbit"] .cr-answer { margin-top: 18px; }
  .cr-app[data-style="orbit"] .cr-answer-slot { width: 41px; }
  .cr-app[data-style="orbit"] .cr-answer-slot strong { border-bottom-color: #bda888; }
  .cr-app[data-style="orbit"] .cr-rack { padding-top: 7px; border-top: 1px solid #62716e; }
  .cr-app[data-style="orbit"] .cr-metrics { width: min(100%, 505px); margin-inline: auto; }
  .cr-app[data-style="orbit"] .cr-controls { width: min(100%, 505px); margin-inline: auto; grid-template-columns: minmax(65px, 1fr) auto minmax(95px, 1fr); gap: 16px; padding-top: 17px; border-top: 1px solid #8b7965; }
  .cr-app[data-style="orbit"] .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 5px; }
  .cr-app[data-style="orbit"] .cr-game-actions .cr-button { min-width: 0; width: 100%; padding-inline: 6px; }

  /* Toy console: the cube tray sits between its clue and its controls. */
  .cr-app[data-style="toybox"] { border-inline: 7px solid #cf9f82; }
  .cr-app[data-style="toybox"] .cr-layout { grid-template-columns: minmax(0, 1fr) 215px; grid-template-areas: "clue clue" "rack rack" "play controls" "hints hints"; gap: 22px 36px; padding-top: 18px; max-width: 1030px; margin-inline: auto; }
  .cr-app[data-style="toybox"] .cr-game-column { display: contents; }
  .cr-app[data-style="toybox"] .cr-clue { display: grid; grid-template-columns: 1fr auto auto 1fr; justify-items: center; text-align: center; }
  .cr-app[data-style="toybox"] .cr-eyebrow, .cr-app[data-style="toybox"] .cr-instruction, .cr-app[data-style="toybox"] .cr-terms { grid-column: 1 / -1; }
  .cr-app[data-style="toybox"] .cr-eyebrow { margin-bottom: 6px; }
  .cr-app[data-style="toybox"] .cr-instruction { max-width: none; margin-bottom: 9px; font-size: 16px; }
  .cr-app[data-style="toybox"] .cr-terms[data-clue-type="common-link"] { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
  .cr-app[data-style="toybox"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 34px; font-weight: 850; }
  .cr-app[data-style="toybox"] .cr-answer { grid-column: 2; grid-row: 4; margin-top: 12px; }
  .cr-app[data-style="toybox"] .cr-answer-slot strong { height: 30px; border-bottom: 2px solid #b68797; }
  .cr-app[data-style="toybox"] .cr-notes-link { grid-column: 3; grid-row: 4; align-self: center; margin: 12px 0 0 24px; }
  .cr-app[data-style="toybox"] .cr-rack { padding: 13px 17px 19px; border: 2px solid #d0a58b; border-radius: 18px; background: #e9bea1; box-shadow: inset 0 3px 0 #f8d8bb, 0 4px 0 #b88e75; }
  .cr-app[data-style="toybox"] .cr-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; padding: 20px 18px; border: 2px solid #bd9c90; border-radius: 24px; background: #e4c9b8; box-shadow: inset 0 3px 0 #f8e4d1, 0 5px 0 #b89988; }
  .cr-app[data-style="toybox"] .cr-selected { justify-items: center; text-align: center; }
  .cr-app[data-style="toybox"] .cr-direction-pad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 6px; }
  .cr-app[data-style="toybox"] .cr-game-actions { width: 100%; grid-template-columns: minmax(0, 1fr); justify-self: stretch; }
  .cr-app[data-style="toybox"] .cr-game-actions .cr-button { min-width: 0; width: 100%; border-radius: 12px; }

  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-rack .cr-section-heading { max-width: 900px; margin: 0 auto 12px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-list { width: 100%; margin-inline: auto; gap: 12px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-list[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 540px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-list[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 900px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-list > .cr-cube-button:nth-child(n) { grid-column: auto; width: 100%; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-net { --net-cell: 24px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-net-face strong { font-size: 17px; }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .cr-app[data-style="workshop"] .cr-layout { grid-template-columns: 185px minmax(0, 1fr); grid-template-areas: "clue game" "rack rack" "hints hints"; gap: 20px 24px; }
  .cr-app[data-style="workshop"] .cr-game-column { display: grid; grid-area: game; grid-template-areas: "play" "controls"; gap: 19px; min-width: 0; align-content: start; }
  .cr-app[data-style="workshop"] .cr-clue { padding-inline: 12px; }
  .cr-app[data-style="workshop"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 28px; }
  .cr-app[data-style="workshop"] .cr-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 15px 12px; }
  .cr-app[data-style="workshop"] .cr-game-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-app[data-style="workshop"] .cr-game-actions:has([data-action="open-result"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-app[data-style="workshop"] .cr-game-actions .cr-button { font-size: 10px; padding-inline: 4px; }
  .cr-app[data-style="orbit"] .cr-layout { grid-template-columns: minmax(0, 1fr) 238px; gap: 20px 24px; }
  .cr-app[data-style="orbit"] .cr-cube-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-app[data-style="orbit"] .cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(4) { grid-column: span 2; }
  .cr-app[data-style="orbit"] .cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(5) { grid-column: 2 / span 2; }
  .cr-app[data-style="orbit"] .cr-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .cr-app[data-style="orbit"] .cr-game-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .cr-app[data-style="orbit"] .cr-game-actions:has([data-action="open-result"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-app[data-style="orbit"] .cr-game-actions .cr-button { font-size: 10px; padding-inline: 4px; }
  .cr-app[data-style="orbit"] .cr-metric { gap: 6px; padding-inline: 9px; }
  .cr-app[data-style="orbit"] .cr-metric strong { font-size: 22px; }
  .cr-app[data-style="orbit"] .cr-answer-slot { width: 30px; }
  .cr-app[data-style="toybox"] .cr-layout { grid-template-columns: minmax(0, 1fr) 190px; column-gap: 23px; }
  .cr-app[data-style="toybox"] .cr-controls { padding-inline: 12px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-cube-net { --net-cell: 22px; }
  .cr-app:is([data-style="workshop"], [data-style="toybox"]) .cr-net-face strong { font-size: 16px; }
}

@media (max-width: 700px) {
  .cr-app[data-style="workshop"] .cr-header { border-bottom-color: #a88b56; }
  .cr-app[data-style="workshop"] .cr-clue { border-bottom: 1px solid #b89a65; padding-bottom: 6px; }
  .cr-app[data-style="workshop"] .cr-terms[data-clue-type="common-link"] .cr-term { font-family: Georgia, "Times New Roman", serif; font-size: 25px; }
  .cr-app[data-style="workshop"] .cr-rack { border-top: 0; }
  .cr-app[data-style="orbit"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 23px; letter-spacing: -.065em; }
  .cr-app[data-style="orbit"] .cr-metrics { gap: 1px; border: 1px solid #627276; }
  .cr-app[data-style="orbit"] .cr-controls { border-top-color: #8b7965; }
  .cr-app[data-style="toybox"] .cr-clue { text-align: center; }
  .cr-app[data-style="toybox"] .cr-terms[data-clue-type="common-link"] { justify-content: center; }
  .cr-app[data-style="toybox"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 25px; }
  .cr-app[data-style="toybox"] .cr-cell { border-radius: 6px; box-shadow: 0 3px 0 var(--tile-bottom); }
  .cr-app[data-style="toybox"] .cr-controls { border-top: 2px solid #cfaa91; padding-top: 14px; }
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-net-face { border-radius: 3px; }
  .cr-app:is([data-style="workshop"], [data-style="orbit"], [data-style="toybox"]) .cr-game-column { display: contents; }
}

@media (max-width: 360px) {
  .cr-app[data-style="workshop"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 23px; }
  .cr-app[data-style="orbit"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 21px; }
  .cr-app[data-style="toybox"] .cr-terms[data-clue-type="common-link"] .cr-term { font-size: 23px; }
}