/* Shared geometry keeps the three visual editions on the same playable rules. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
  --state-blue: #c3e5fa;
  --state-blue-ink: #173e59;
  --state-blue-edge: #649ab9;
  --state-yellow: #ffe180;
  --state-yellow-ink: #624c06;
  --state-yellow-edge: #b6962e;
  --state-red: #efada1;
  --state-red-ink: #702a23;
  --state-red-edge: #b3675b;
  --state-green: #acdfbc;
  --state-green-ink: #1b5035;
  --state-green-edge: #579773;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .45; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent, #e66b4d);
  outline-offset: 4px;
}
button { color: inherit; }
[hidden] { display: none !important; }

body[data-style="paper"] { background: #ece9df; }
body[data-style="arcade"] { background: #111a2c; }
body[data-style="studio"] { background: #e8f1f4; }

.cr-app {
  --ink: #22352f;
  --muted: #6b756c;
  --surface: #faf8f1;
  --line: #d5d6c9;
  --accent: #c75037;
  --accent-ink: #fffaf0;
  --tile: #eeecdc;
  --tile-edge: #a9b0a1;
  --tile-bottom: #737f70;
  --target: #d8d1ec;
  --target-edge: #958bae;
  --target-ink: #4d3f69;
  --port: #e46c52;
  --port-edge: #bb4936;
  --port-ink: #fffaf2;
  --key: #fffdf8;
  --key-edge: #b9beb1;
  --key-bottom: #89917d;
  --radius: 5px;
  color: var(--ink);
  background: var(--surface);
  min-height: 100svh;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 38px 34px;
  font-size: 14px;
  line-height: 1.4;
}

.cr-header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 100px;
  border-bottom: 1px solid var(--line);
}
.cr-brand { display: flex; align-items: center; text-decoration: none; }
.cr-brand img, img.cr-brand { display: block; width: 208px; height: auto; max-height: 75px; object-fit: contain; }
.cr-edition { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cr-date { font-size: .85em; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.cr-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cr-header-actions a { color: var(--muted); font-size: 12px; text-underline-offset: 4px; }
.cr-layout { display: grid; gap: 24px 42px; padding-top: 28px; align-items: start; }
.cr-game-column { display: contents; }
.cr-clue { grid-area: clue; min-width: 0; }
.cr-play { grid-area: play; min-width: 0; }
.cr-rack { grid-area: rack; min-width: 0; }
.cr-controls { grid-area: controls; min-width: 0; }
.cr-eyebrow { display: block; font-size: 11px; line-height: 1.4; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }
.cr-instruction { margin: 0 0 18px; max-width: 330px; font-size: 18px; line-height: 1.4; font-weight: 500; }
.cr-terms { margin: 0; display: grid; gap: 5px; min-width: 0; }
.cr-term { font-size: clamp(27px, 3vw, 42px); font-weight: 750; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cr-answer { display: flex; gap: 8px; margin-top: 27px; }
.cr-answer-slot { display: grid; text-align: center; gap: 7px; width: 48px; }
.cr-answer-slot strong { display: grid; place-items: center; height: 43px; border-bottom: 2px solid var(--ink); font-size: 22px; font-weight: 650; }
.cr-answer-slot small { font-size: 10px; font-weight: 750; line-height: 1; color: var(--muted); letter-spacing: .08em; }
.cr-hint-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.cr-button, .cr-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.2;
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.cr-button.is-primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.cr-button.is-subtle { border-color: transparent; color: var(--muted); }
.cr-icon-button { min-width: 44px; padding: 8px; font-size: 20px; }
.cr-button:not(:disabled):hover, .cr-icon-button:not(:disabled):hover { border-color: var(--ink); }
.cr-button:not(:disabled):active, .cr-icon-button:not(:disabled):active { transform: translateY(1px); }

.cr-metrics { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.cr-metric { display: flex; align-items: baseline; gap: 9px; font-variant-numeric: tabular-nums; }
.cr-metric span { font-size: 10px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cr-metric strong { font-size: 23px; letter-spacing: -.02em; font-weight: 650; }
.cr-board-stage {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 6px;
  width: min(100%, 575px);
  aspect-ratio: var(--cols) / var(--rows);
  margin: 0 auto;
  isolation: isolate;
}
.cr-cell, .cr-board-cube, .cr-port {
  min-width: 0;
  min-height: 0;
  position: relative;
  border-radius: var(--radius);
}
.cr-cell {
  border: 1px solid var(--tile-edge);
  background: var(--tile);
  box-shadow: 0 3px 0 var(--tile-bottom);
  color: var(--ink);
}
.cr-cell.is-target, .cr-cell[data-kind="target"], .cr-cell[data-target], .cr-cell.is-destination {
  background: var(--target);
  border-color: var(--target-edge);
  color: var(--target-ink);
  box-shadow: 0 3px 0 var(--target-edge);
}
.cr-cell > span, .cr-cell > small { position: absolute; top: 4px; left: 5px; font-size: 9px; font-weight: 750; }
.cr-board-cube {
  z-index: 2;
  border: 1px solid var(--state-edge, var(--state-blue-edge));
  background: var(--state-bg, var(--state-blue));
  color: var(--state-ink, var(--state-blue-ink));
  box-shadow: 0 3px 0 var(--state-edge, var(--state-blue-edge));
  display: grid;
  place-items: center;
  padding: 0;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 750;
  transition: background .15s ease, color .15s ease;
}
.cr-board-cube .cr-cube-code, .cr-board-cube small { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; }
.cr-board-cube .cr-cube-face { font-size: inherit; line-height: 1; }
.cr-board-cube.is-selected { outline: 1px dashed var(--ink); outline-offset: 3px; }
.cr-port {
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--port-ink);
  font-size: 11px;
  font-weight: 800;
  padding: 0;
  transition: filter .16s ease, transform .16s ease;
}
.cr-port::before { content: ""; position: absolute; z-index: -1; inset: 12%; border: 1px solid var(--port-edge); border-radius: inherit; background: var(--port); box-shadow: 0 2px 0 var(--port-edge); pointer-events: none; }
.cr-port.is-ready::before { outline: 1px dashed var(--port-edge); outline-offset: 2px; }
.cr-port:not(:disabled):active { transform: translateY(1px); }
.cr-port:disabled { opacity: .75; }
.cr-notice { min-height: 20px; margin: 18px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

.cr-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cr-section-heading h2 { margin: 0; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.cr-cube-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
.cr-cube-list > .cr-cube-button { grid-column: span 2; }
.cr-cube-list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(4) { grid-column: 2 / span 2; }
.cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(5) { grid-column: 4 / span 2; }
.cr-cube-button {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  padding: 7px 5px;
  background: var(--key);
  color: var(--ink);
  border: 1px solid var(--key-edge);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--key-bottom);
  transition: transform .14s ease, border-color .14s ease;
}
.cr-cube-code { font-size: 11px; font-weight: 750; line-height: 1; }
.cr-cube-face { font-size: 28px; font-weight: 750; line-height: 1.1; }
.cr-cube-status { font-size: 9px; line-height: 1.15; color: var(--muted); }
.cr-cube-net { --net-cell: 22px; display: grid; grid-template-columns: repeat(4, var(--net-cell)); grid-template-rows: repeat(3, var(--net-cell)); gap: 2px; }
.cr-net-face { display: grid; place-items: center; min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--key-edge); border-radius: min(var(--radius), 4px); }
.cr-net-face strong { font-size: 16px; line-height: 1; font-weight: 750; }
.cr-net-face[data-face="north"] { grid-area: 1 / 2; }
.cr-net-face[data-face="west"] { grid-area: 2 / 1; }
.cr-net-face[data-face="top"] { grid-area: 2 / 2; }
.cr-net-face[data-face="east"] { grid-area: 2 / 3; }
.cr-net-face[data-face="bottom"] { grid-area: 2 / 4; }
.cr-net-face[data-face="south"] { grid-area: 3 / 2; }
.cr-net-face.is-top { background: var(--state-bg, var(--ink)); color: var(--state-ink, var(--surface)); border-color: var(--state-edge, var(--ink)); }
.cr-cube-button.is-selected { outline: 1.5px dashed var(--ink); outline-offset: 3px; }
.cr-cube-button:not(:disabled):hover { transform: translateY(-2px); }
.cr-cube-button:not(:disabled):active { transform: translateY(1px); box-shadow: 0 1px 0 var(--key-bottom); }

.cr-controls { display: grid; grid-template-columns: minmax(85px, 1fr) auto minmax(85px, 1fr); gap: 24px; align-items: center; }
.cr-selected { display: grid; justify-items: start; gap: 5px; }
.cr-selected-code { font-size: 12px; font-weight: 750; }
.cr-selected-face {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  background: var(--state-bg, var(--key));
  color: var(--state-ink, var(--ink));
  border: 1px solid var(--state-edge, var(--key-edge));
  border-radius: var(--radius);
  font-size: 28px;
  font-weight: 750;
}
.cr-selected-status { font-size: 10px; color: var(--muted); }
.cr-direction-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 5px; }
.cr-direction-pad > button {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: var(--key);
  border: 1px solid var(--key-edge);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--key-bottom);
  font-size: 22px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cr-direction-pad > button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-bottom); }
.cr-direction-pad > .cr-direction-button { display: flex; gap: 4px; align-items: center; justify-content: center; }
.cr-direction-button > span { line-height: 1; }
.cr-direction-button > small { font-size: 11px; line-height: 1; font-weight: 700; }
.cr-direction-pad [data-direction="N"] { grid-area: 1 / 2; }
.cr-direction-pad [data-direction="W"] { grid-area: 2 / 1; }
.cr-direction-pad [data-direction="E"] { grid-area: 2 / 3; }
.cr-direction-pad [data-direction="S"] { grid-area: 3 / 2; }
.cr-direction-center {
  grid-area: 2 / 2;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--state-edge, var(--line));
  background: var(--state-bg, transparent);
  color: var(--state-ink, var(--muted));
  font-size: 25px;
  font-weight: 750;
}
.cr-game-actions { display: grid; gap: 5px; justify-self: end; }
.cr-game-actions .cr-button { justify-content: flex-start; min-width: 86px; border: 0; font-size: 11px; padding: 9px 5px; }

/* PAPER CLUB — an editorial clue column and a generous tabletop. */
.cr-app[data-style="paper"] { border-left: 1px solid #dad9ce; border-right: 1px solid #dad9ce; padding-bottom: 20px; }
[data-style="paper"] .cr-header { min-height: 78px; }
[data-style="paper"] .cr-brand img { width: 190px; max-height: 62px; }
[data-style="paper"] .cr-layout { grid-template-columns: minmax(370px, 33%) minmax(0, 1fr); grid-template-areas: "clue game" "rack game" "hints hints"; gap: 14px 52px; padding-top: 20px; }
[data-style="paper"] .cr-game-column, [data-style="arcade"] .cr-game-column { display: grid; grid-area: game; grid-template-areas: "play" "controls"; gap: 16px; min-width: 0; align-content: start; }
[data-style="paper"] .cr-clue { padding: 14px 30px 15px 0; border-right: 1px solid var(--line); }
[data-style="paper"] .cr-term { font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.3vw, 46px); font-weight: 700; letter-spacing: -.04em; }
[data-style="paper"] .cr-play { padding: 0 18px; }
[data-style="paper"] .cr-board-stage { width: min(100%, calc(330px * var(--cols) / var(--rows))); }
[data-style="paper"] .cr-metrics { margin-bottom: 12px; }
[data-style="paper"] .cr-metric strong { font-size: 20px; }
[data-style="paper"] .cr-notice { margin-top: 12px; font-size: 11px; }
[data-style="paper"] .cr-rack { border-top: 1px solid var(--line); padding: 9px 30px 0 0; }
[data-style="paper"] .cr-controls { border-top: 1px solid var(--line); padding: 12px 18px 0; }
[data-style="paper"] .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
[data-style="paper"] .cr-board-cube, [data-style="paper"] .cr-cube-face, [data-style="paper"] .cr-net-face strong, [data-style="paper"] .cr-direction-center, [data-style="paper"] .cr-selected-face { font-family: Georgia, "Times New Roman", serif; }

/* POCKET ARCADE — the board leads, with a narrow mission HUD at its side. */
.cr-app[data-style="arcade"] {
  --ink: #ecf7fa;
  --muted: #95a7bc;
  --surface: #151f34;
  --line: #35425a;
  --accent: #91efd2;
  --accent-ink: #112c2a;
  --tile: #304159;
  --tile-edge: #596f89;
  --tile-bottom: #0b1323;
  --target: #aaa0e3;
  --target-edge: #7467b4;
  --target-ink: #271d53;
  --port: #ef9a85;
  --port-edge: #a4594b;
  --port-ink: #3e2120;
  --key: #26364e;
  --key-edge: #556b83;
  --key-bottom: #081320;
  --radius: 3px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  max-width: 1220px;
  border-inline: 1px solid #29364c;
  padding-bottom: 20px;
}
[data-style="arcade"] .cr-header { min-height: 78px; }
[data-style="arcade"] .cr-brand img { width: 193px; }
[data-style="arcade"] .cr-edition { color: var(--accent); font-size: 10px; }
[data-style="arcade"] .cr-layout { grid-template-columns: minmax(0, 1.9fr) minmax(350px, 1fr); grid-template-areas: "game clue" "game rack" "hints hints"; gap: 16px 44px; padding-top: 18px; }
[data-style="arcade"] .cr-clue { padding: 11px 0 25px; border-bottom: 1px solid var(--line); }
[data-style="arcade"] .cr-eyebrow { color: var(--accent); }
[data-style="arcade"] .cr-instruction { font-size: 15px; }
[data-style="arcade"] .cr-terms { gap: 7px; }
[data-style="arcade"] .cr-term { font-size: clamp(24px, 2.9vw, 35px); letter-spacing: -.065em; font-weight: 800; }
[data-style="arcade"] .cr-answer-slot strong { border-bottom-color: var(--accent); color: var(--accent); }
[data-style="arcade"] .cr-metrics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; margin-bottom: 24px; }
[data-style="arcade"] .cr-metric strong { color: var(--accent); font-size: 21px; }
[data-style="arcade"] .cr-board-stage { gap: 6px; width: min(100%, calc(330px * var(--cols) / var(--rows))); }
[data-style="arcade"] .cr-cell { box-shadow: 0 2px 0 var(--tile-bottom), inset 0 1px 0 #7892ad26; }
[data-style="arcade"] .cr-cube-list { gap: 11px 7px; }
[data-style="arcade"] .cr-cube-button.is-selected { outline-color: var(--accent); }
[data-style="arcade"] .cr-controls { padding-top: 14px; border-top: 1px solid var(--line); }
[data-style="arcade"] .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
[data-style="arcade"] .cr-direction-pad > button { border-color: #7d91a6; box-shadow: 0 4px 0 #071322; }

/* SOFT STUDIO — one centered puzzle, with quiet, rounded physical pieces. */
.cr-app[data-style="studio"] {
  --ink: #2c4352;
  --muted: #697f8a;
  --surface: #edf4f5;
  --line: #cbdcdf;
  --accent: #bd6236;
  --accent-ink: #fffaf2;
  --tile: #fff5df;
  --tile-edge: #d3c7ae;
  --tile-bottom: #9eaeb0;
  --target: #c2bce6;
  --target-edge: #9490b4;
  --target-ink: #444269;
  --port: #ea9971;
  --port-edge: #c57b57;
  --port-ink: #4e2c19;
  --key: #fffcf4;
  --key-edge: #d3ddd9;
  --key-bottom: #a7bcbc;
  --radius: 11px;
  max-width: 1240px;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-style="studio"] .cr-header { border-bottom: 0; min-height: 84px; }
[data-style="studio"] .cr-brand img { width: 190px; max-height: 65px; }
[data-style="studio"] .cr-layout { grid-template-columns: minmax(0, 1fr) 350px; grid-template-areas: "clue clue" "play rack" "play controls" "hints hints"; gap: 18px 40px; max-width: 1000px; margin: 0 auto; padding-top: 0; }
[data-style="studio"] .cr-clue { display: grid; grid-template-columns: 1fr auto auto 1fr; text-align: center; padding-bottom: 4px; }
[data-style="studio"] .cr-clue > .cr-eyebrow, [data-style="studio"] .cr-clue > .cr-instruction, [data-style="studio"] .cr-clue > .cr-terms { grid-column: 1 / -1; }
[data-style="studio"] .cr-eyebrow { margin-bottom: 8px; }
[data-style="studio"] .cr-instruction { max-width: none; margin-bottom: 10px; font-size: 17px; }
[data-style="studio"] .cr-terms { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 27px; }
[data-style="studio"] .cr-term { font-size: clamp(26px, 3.3vw, 40px); font-weight: 800; letter-spacing: -.035em; }
[data-style="studio"] .cr-answer { grid-column: 2; grid-row: 4; justify-content: center; margin-top: 12px; }
[data-style="studio"] .cr-answer-slot strong { border: 0; height: 33px; }
[data-style="studio"] .cr-answer-slot { gap: 3px; }
[data-style="studio"] .cr-hint-actions { grid-column: 3; grid-row: 4; justify-content: center; align-self: center; margin: 12px 0 0 20px; }
[data-style="studio"] .cr-button { border-radius: 20px; }
[data-style="studio"] .cr-rack { padding-top: 0; }
[data-style="studio"] .cr-cube-list { gap: 12px 8px; }
[data-style="studio"] .cr-cube-button { box-shadow: 0 4px 0 var(--key-bottom); }
[data-style="studio"] .cr-cell { box-shadow: 0 3px 0 var(--tile-bottom), inset 0 2px 0 #fff9; }
[data-style="studio"] .cr-port { border-radius: 8px; }
[data-style="studio"] .cr-board-stage { width: min(100%, calc(335px * var(--cols) / var(--rows))); }
[data-style="studio"] .cr-controls { grid-template-columns: 1fr auto; gap: 9px 12px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; margin: 0; }
[data-style="studio"] .cr-selected { grid-column: 1; }
[data-style="studio"] .cr-direction-pad { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
[data-style="studio"] .cr-game-actions { grid-column: 1 / -1; display: flex; justify-self: stretch; justify-content: space-between; }
[data-style="studio"] .cr-game-actions .cr-button { min-width: 0; }
[data-style="studio"] .cr-direction-pad { gap: 6px; }
[data-style="studio"] .cr-direction-pad > button { box-shadow: 0 4px 0 var(--key-bottom); border-radius: 12px; }

/* State colors describe the rules and do not change with the edition. */
[data-state="moving"], [data-state="selected"], [data-state="blue"] { --state-bg: var(--state-blue); --state-ink: var(--state-blue-ink); --state-edge: var(--state-blue-edge); }
[data-state="misplaced"], [data-state="wrong"], [data-state="removable"], [data-state="yellow"] { --state-bg: var(--state-yellow); --state-ink: var(--state-yellow-ink); --state-edge: var(--state-yellow-edge); }
[data-state="absent"], [data-state="red"] { --state-bg: var(--state-red); --state-ink: var(--state-red-ink); --state-edge: var(--state-red-edge); }
[data-state="correct"], [data-state="locked"], [data-state="green"] { --state-bg: var(--state-green); --state-ink: var(--state-green-ink); --state-edge: var(--state-green-edge); }
.cr-cube-button[data-state="moving"], .cr-cube-button[data-state="wrong"], .cr-cube-button[data-state="misplaced"], .cr-cube-button[data-state="absent"], .cr-cube-button[data-state="correct"] { border-color: var(--state-edge); box-shadow: 0 3px 0 var(--state-edge); }

.cr-button.is-hint-control { background: var(--target); color: var(--target-ink); border-color: var(--target-edge); }
.cr-button.is-hint-control:disabled { opacity: .7; }
.cr-inline-hints { grid-column: 1 / -1; grid-row: 6; display: grid; gap: 15px; margin-top: 17px; text-align: left; }
.cr-inline-hint-group { display: grid; align-content: start; gap: 11px; }
.cr-inline-hint-card { padding: 1px 0 2px 11px; border-left: 2px solid var(--target-edge); }
.cr-inline-hint-label { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.cr-inline-hint-text { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink); }
.cr-hint-context { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.cr-hint-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 701px) {
  [data-style="studio"] .cr-inline-hints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.cr-dialog {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: max(10px, var(--radius));
  width: min(540px, calc(100vw - 30px));
  max-height: min(85svh, 740px);
  padding: 0;
  box-shadow: 0 24px 80px #0a162a40;
}
.cr-dialog::backdrop { background: #09152570; backdrop-filter: blur(3px); }
.cr-dialog[open] { animation: cr-dialog-enter .18s ease-out; }
.cr-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 21px 13px; gap: 20px; border-bottom: 1px solid var(--line); }
.cr-dialog-header h2 { margin: 0; font-size: 19px; font-weight: 750; }
.cr-dialog-body { padding: 20px 22px 25px; overflow-wrap: anywhere; }
.cr-dialog-body p:first-child { margin-top: 0; }
.cr-dialog-body p { line-height: 1.55; }
.cr-dialog-body > .cr-button { margin-top: 12px; }
.cr-dialog-intro, .cr-result-note, .cr-keyboard-help { color: var(--muted); font-size: 12px; }
.cr-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cr-help-steps { margin: 0; padding-left: 19px; }
.cr-help-steps li { padding-left: 3px; margin-bottom: 16px; line-height: 1.5; }
.cr-dialog textarea { width: 100%; min-height: 120px; margin-top: 15px; padding: 10px; color: var(--ink); background: var(--key); border: 1px solid var(--line); border-radius: var(--radius); }
.cr-result-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.cr-result-metrics > * { display: grid; gap: 4px; }
.cr-result-metrics strong { font-size: 26px; }
.cr-result-metrics span { font-size: 11px; color: var(--muted); }
.cr-answer-slot[data-state="moving"] strong, .cr-answer-slot[data-state="misplaced"] strong, .cr-answer-slot[data-state="absent"] strong, .cr-answer-slot[data-state="correct"] strong { background: var(--state-bg); color: var(--state-ink); border-color: var(--state-edge); border-radius: 4px 4px 0 0; }
@keyframes cr-dialog-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) and (min-width: 701px) {
  .cr-app { padding-inline: 23px; }
  [data-style="paper"] .cr-layout { grid-template-columns: 238px minmax(0, 1fr); column-gap: 25px; }
  [data-style="paper"] .cr-clue { padding-right: 20px; }
  [data-style="paper"] .cr-play, [data-style="paper"] .cr-rack, [data-style="paper"] .cr-controls { padding-inline: 0; }
  [data-style="arcade"] .cr-layout { grid-template-columns: minmax(0, 1.5fr) 238px; column-gap: 24px; }
  [data-style="studio"] .cr-layout { grid-template-columns: minmax(0, 1fr) 238px; column-gap: 24px; }
  [data-style] .cr-cube-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-style] .cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(4) { grid-column: span 2; }
  [data-style] .cr-cube-list[data-count="5"] > .cr-cube-button:nth-child(5) { grid-column: 2 / span 2; }
  .cr-controls { gap: 10px; }
  .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .cr-game-actions .cr-button { min-width: 65px; }
}

@media (max-width: 700px) {
  [data-style] .cr-game-column { display: contents; }
  .cr-app, .cr-app[data-style] { padding: 0 15px max(22px, env(safe-area-inset-bottom)); min-height: 100svh; border: 0; }
  .cr-header, [data-style] .cr-header { min-height: 62px; gap: 10px; }
  .cr-brand img, img.cr-brand, [data-style] .cr-brand img { width: 142px; max-height: 50px; }
  .cr-edition, [data-style] .cr-edition { font-size: 9px; letter-spacing: .07em; }
  .cr-header-actions { gap: 2px; }
  .cr-header-actions .cr-button { font-size: 10px; padding-inline: 8px; }
  .cr-header-actions .cr-icon-button { min-width: 40px; }
  .cr-header-actions a { font-size: 10px; }
  .cr-layout, [data-style] .cr-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "clue" "rack" "play" "controls" "hints";
    gap: 10px;
    padding-top: 10px;
    max-width: 500px;
    margin: 0 auto;
  }
  .cr-clue, [data-style] .cr-clue { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; text-align: left; padding: 0; border: 0; }
  .cr-clue > .cr-eyebrow, .cr-clue > .cr-instruction, .cr-clue > .cr-terms { grid-column: 1 / -1; }
  .cr-eyebrow, [data-style] .cr-eyebrow { margin-bottom: 5px; font-size: 9px; letter-spacing: .1em; }
  .cr-instruction, [data-style] .cr-instruction { max-width: none; margin: 0 0 8px; font-size: 13px; line-height: 1.35; }
  .cr-terms, [data-style] .cr-terms { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; }
  .cr-term, [data-style] .cr-term { font-size: 25px; letter-spacing: -.035em; line-height: 1.1; }
  .cr-answer, [data-style] .cr-answer { gap: 4px; margin-top: 9px; justify-content: flex-start; grid-column: 1; grid-row: 4; }
  .cr-answer-slot { width: 28px; gap: 4px; }
  .cr-answer-slot strong, [data-style] .cr-answer-slot strong { height: 25px; font-size: 19px; border-bottom: 1px solid var(--ink); }
  .cr-answer-slot small { font-size: 9px; }
  .cr-hint-actions, [data-style] .cr-hint-actions { flex-wrap: nowrap; gap: 6px; margin: 7px 0 0; justify-content: flex-end; align-self: center; grid-column: 2; grid-row: 4; }
  .cr-hint-actions .cr-button { min-height: 44px; padding: 7px 5px; font-size: 10px; gap: 4px; white-space: nowrap; }
  .cr-inline-hints { gap: 13px; margin-top: 12px; }
  .cr-inline-hint-text { font-size: 12px; line-height: 1.5; }
  .cr-clue:has(.cr-answer-slot:nth-child(5)) .cr-answer { grid-column: 1 / -1; }
  .cr-clue:has(.cr-answer-slot:nth-child(5)) .cr-hint-actions { grid-column: 1 / -1; grid-row: 5; justify-content: flex-start; margin-top: 0; }
  .cr-rack, [data-style] .cr-rack { border-top: 1px solid var(--line); padding: 4px 0 0; }
  .cr-section-heading { margin-bottom: 4px; }
  .cr-section-heading h2 { font-size: 10px; }
  .cr-cube-list, [data-style] .cr-cube-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; }
  .cr-cube-list[data-count="4"], [data-style] .cr-cube-list[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cr-cube-button, [data-style] .cr-cube-button { min-height: 108px; padding: 6px 3px; gap: 3px; box-shadow: 0 3px 0 var(--key-bottom); }
  .cr-cube-net { --net-cell: 20px; }
  .cr-net-face strong { font-size: 15px; }
  .cr-cube-code { font-size: 10px; }
  .cr-cube-face { font-size: 22px; }
  .cr-cube-status { font-size: 9px; min-height: 10px; }
  .cr-cube-button.is-selected { outline-width: 1.5px; outline-offset: 2px; }
  .cr-play, [data-style] .cr-play { padding: 0; }
  .cr-metrics, [data-style] .cr-metrics { margin-bottom: 9px; border: 0; padding: 0; }
  .cr-metric { gap: 6px; }
  .cr-metric span { font-size: 9px; letter-spacing: .06em; }
  .cr-metric strong, [data-style] .cr-metric strong { font-size: 17px; }
  .cr-board-stage, [data-style] .cr-board-stage { width: 100%; gap: 4px; max-width: 500px; }
  .cr-cell, .cr-board-cube { border-radius: min(var(--radius), 6px); box-shadow: 0 2px 0 var(--tile-bottom); }
  .cr-cell.is-target, .cr-cell[data-kind="target"], .cr-cell[data-target], .cr-cell.is-destination { box-shadow: 0 2px 0 var(--target-edge); }
  .cr-cell > span, .cr-cell > small { top: 2px; left: 3px; font-size: 7px; }
  .cr-board-cube { font-size: 22px; box-shadow: 0 2px 0 var(--state-edge, var(--state-blue-edge)); }
  .cr-board-cube .cr-cube-code, .cr-board-cube small { font-size: 7px; top: 1px; left: 2px; }
  .cr-board-cube.is-selected { outline-offset: 2px; }
  .cr-port, [data-style] .cr-port { width: 100%; height: 100%; border-radius: min(var(--radius), 5px); font-size: 8px; box-shadow: none; }
  .cr-port::before { box-shadow: 0 1px 0 var(--port-edge); }
  .cr-port.is-ready::before { outline-offset: 1px; }
  .cr-notice, [data-style] .cr-notice { margin-top: 9px; min-height: 14px; font-size: 10px; }
  .cr-controls, [data-style] .cr-controls { grid-template-columns: minmax(54px, 1fr) auto minmax(64px, 1fr); gap: 10px; width: 100%; max-width: 500px; border-top: 1px solid var(--line); padding: 10px 0 0; margin: 0; }
  .cr-selected-code { font-size: 11px; }
  .cr-selected-face { width: 36px; height: 36px; font-size: 25px; }
  .cr-selected-status { font-size: 9px; }
  .cr-direction-pad, [data-style] .cr-direction-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 5px; }
  [data-style] .cr-controls > .cr-selected, [data-style] .cr-controls > .cr-direction-pad, [data-style] .cr-controls > .cr-game-actions { grid-column: auto; grid-row: auto; }
  .cr-direction-pad > button, [data-style] .cr-direction-pad > button { min-width: 44px; min-height: 44px; font-size: 20px; border-radius: min(var(--radius), 9px); }
  .cr-direction-center { font-size: 23px; border-radius: min(var(--radius), 9px); }
  .cr-game-actions, [data-style] .cr-game-actions { display: grid; justify-self: end; gap: 3px; }
  .cr-game-actions .cr-button, [data-style] .cr-game-actions .cr-button { min-width: 62px; font-size: 10px; min-height: 44px; padding: 7px 0; }
  [data-style="paper"] .cr-clue { padding-bottom: 1px; }
  [data-style="paper"] .cr-term { font-size: 27px; }
  [data-style="arcade"] .cr-header { border-bottom-color: var(--accent); }
  [data-style="arcade"] .cr-eyebrow { color: var(--accent); }
  [data-style="arcade"] .cr-term { font-size: 24px; letter-spacing: -.055em; }
  [data-style="arcade"] .cr-metrics { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  [data-style="studio"] .cr-header { border-bottom: 1px solid var(--line); }
  [data-style="studio"] .cr-clue { text-align: center; }
  [data-style="studio"] .cr-terms { justify-content: center; }
  [data-style="studio"] .cr-term { font-size: 26px; }
  [data-style="studio"] .cr-cube-button { border-radius: 11px; }
  .cr-dialog { width: calc(100vw - 20px); max-height: 88svh; border-radius: 13px; }
  .cr-dialog-header { padding: 10px 15px; }
  .cr-dialog-header h2 { font-size: 17px; }
  .cr-dialog-body { padding: 17px 17px 23px; font-size: 13px; }
}

@media (max-width: 360px) {
  .cr-app, .cr-app[data-style] { padding-inline: 12px; }
  .cr-header, [data-style] .cr-header { gap: 5px; }
  .cr-brand img, img.cr-brand, [data-style] .cr-brand img { width: 128px; }
  .cr-edition, [data-style] .cr-edition { font-size: 8px; letter-spacing: .02em; }
  .cr-header-actions .cr-button { padding-inline: 5px; font-size: 9px; }
  .cr-header-actions .cr-icon-button { min-width: 34px; }
  .cr-layout, [data-style] .cr-layout { gap: 9px; }
  .cr-term, [data-style] .cr-term { font-size: 23px; }
  [data-style="paper"] .cr-term { font-size: 24px; }
  .cr-terms, [data-style] .cr-terms { column-gap: 10px; }
  .cr-cube-list, [data-style] .cr-cube-list { gap: 10px 5px; }
  .cr-cube-button, [data-style] .cr-cube-button { min-height: 100px; }
  .cr-cube-net { --net-cell: 18px; }
  .cr-net-face strong { font-size: 14px; }
  .cr-clue, [data-style] .cr-clue { column-gap: 3px; }
  .cr-answer-slot { width: 21px; }
  .cr-hint-actions .cr-button { font-size: 9px; padding-inline: 3px; gap: 2px; }
  .cr-board-stage, [data-style] .cr-board-stage { gap: 3px; }
  .cr-board-cube { font-size: 20px; }
  .cr-controls, [data-style] .cr-controls { gap: 7px; grid-template-columns: minmax(48px, 1fr) auto minmax(58px, 1fr); }
  .cr-game-actions .cr-button { min-width: 56px; font-size: 9px; }
}

.cr-terms:is([data-clue-type="two-meanings"], [data-clue-type="missing-link"], [data-clue-type="word-analogy"]) { display: grid; gap: 12px; }
.cr-terms:is([data-clue-type="two-meanings"], [data-clue-type="missing-link"], [data-clue-type="word-analogy"]) .cr-term { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.3; letter-spacing: -.015em; font-weight: 650; }
@media (max-width: 700px) {
  .cr-terms:is([data-clue-type="two-meanings"], [data-clue-type="missing-link"], [data-clue-type="word-analogy"]) { gap: 7px; }
  .cr-terms:is([data-clue-type="two-meanings"], [data-clue-type="missing-link"], [data-clue-type="word-analogy"]) .cr-term { font-size: 19px; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}