/* Game identities remain readable at small sizes; decorative effects never add layout height. */
.study-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:center; }
.hang-lives { color:#ffd477; letter-spacing:6px; font-size:24px; line-height:1; }
@media (max-height:440px) {
  .hangstage { gap:4px; }
  .hang-lives { font-size:18px; }
  .hangstage .clue, .hangstage .metric { margin:0; }
}
body[data-game="word"] {
  --accent: #80e3bc;
  background: radial-gradient(ellipse at top, #12372f, #100d26 65%);
}
body[data-game="word"] .letter.right {
  background: #22795c;
  box-shadow: inset 0 -3px 0 #0e513b;
}
body[data-game="word"] .wordstage {
  background-image: radial-gradient(#80e3bc12 1px, transparent 1px);
  background-size: 18px 18px;
}
body[data-game="hex"] {
  background: radial-gradient(ellipse at top, #19384c, #100d26 65%);
}
body[data-game="hex"] .hexboard .cell {
  border-radius: 12px 4px 12px 4px;
  box-shadow: inset 0 -3px 0 #0004;
}
body[data-game="hex"] .hexboard .hexred {
  background: #35aeb8;
}
body[data-game="hex"] .hexboard .hexblue {
  background: #211c33;
  color: #a59ab8;
}
body[data-game="hex"] .hexboard {
  border-color: #35aeb8;
}
body[data-game="hangman"] .largeword {
  color: #ffe7aa;
  letter-spacing: 2px;
}
body[data-game="hangman"] .hangstage {
  background-image: radial-gradient(ellipse at bottom, #e7bd671c, transparent);
}
body[data-game="jumble"] .largeword {
  color: #c9f2e4;
  text-shadow: 0 3px 0 #0004;
}
body[data-game="groups"] .groupboard button {
  font-size: clamp(11px, 2.4vw, 16px);
  overflow-wrap: anywhere;
}
.practice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.practice-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid #927eac;
  color: #fff8ed;
  text-decoration: none;
  background: #352b4b;
}
.tileboard.upper-layer {
  grid-template-columns: repeat(2, minmax(44px, 78px));
  padding: 8px;
  box-shadow: 0 6px 0 #0004;
}
.tube {
  position: relative;
  overflow: visible;
  background: linear-gradient(
    90deg,
    #ffffff0c,
    transparent 30%,
    #ffffff15 70%,
    transparent
  );
}
.liquid {
  background-image: linear-gradient(
    90deg,
    transparent,
    #ffffff44 40%,
    transparent 70%
  );
  border-top: 1px solid #ffffff88;
}
.pour-stream {
  position: fixed;
  height: 7px;
  transform-origin: left center;
  pointer-events: none;
  z-index: 30;
  border-radius: 8px;
  box-shadow: 0 2px 8px #0003;
}
.hang-lives {
  display: inline-flex;
  gap: 5px;
  color: #ffd45c;
  font-size: 18px;
  vertical-align: middle;
}
.equation-example {
  font-family: ui-monospace, monospace;
  background: #17122d;
  padding: 8px;
  border-radius: 8px;
}
@media (max-height: 440px) {
  .subtitle {
    display: none;
  }
  body:is([data-game="mini"], [data-game="letter-swap"]) .stage.split {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(230px, 1fr);
    gap: 5px;
    padding: 4px;
  }
  body:is([data-game="mini"], [data-game="letter-swap"]) .split .crossboard {
    grid-column: 1;
    grid-row: 1/4;
  }
  body:is([data-game="mini"], [data-game="letter-swap"])
    .split
    :is(.clue, .actions, .entry, .metric) {
    grid-column: 2;
    max-width: 100%;
  }
  body[data-game="mini"] .split .entry input {
    width: 70px;
  }
  .wordstage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 4px;
  }
  .wordstage .wordboard {
    grid-column: 1;
    grid-row: 1/3;
  }
  .wordstage .entry,
  .wordstage .metric {
    grid-column: 2;
  }
  .wordstage .entry {
    flex-direction: column;
    max-width: 220px;
    width: 100%;
  }
  .wordstage .entry input {
    width: 100%;
  }
  main {
    grid-template-rows: 44px minmax(0, 1fr) 22px 44px;
    gap: 4px;
  }
  main > header {
    grid-row: 1;
  }
  main > .stage {
    grid-row: 2;
  }
  main > .status {
    grid-row: 3;
  }
  main > .footer {
    grid-row: 4;
  }
  .pourstage {
    display: grid;
    grid-template-columns: minmax(264px, 1fr) minmax(160px, 1fr);
    gap: 5px;
    padding: 4px;
  }
  .pourstage .tubegrid {
    grid-column: 1;
    grid-row: 1/3;
  }
  .pourstage .actions,
  .pourstage .metric {
    grid-column: 2;
  }
  .hexstage {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(170px, 1fr);
    gap: 5px;
    padding: 4px;
  }
  .hexstage .hexboard {
    grid-column: 1;
    grid-row: 1/4;
  }
  .hexstage .actions,
  .hexstage .metric {
    grid-column: 2;
  }
  body[data-game="catdoku"] .stage.split {
    display: grid;
    grid-template-columns: minmax(264px, 1fr) minmax(220px, 1fr);
    grid-template-rows: 94px 44px;
    gap: 3px;
    padding: 3px;
  }
  body[data-game="catdoku"] .sudokuboard {
    grid-row: 1/3;
    grid-column: 1;
  }
  body[data-game="catdoku"] .split .numbers {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(2, 44px);
    gap: 3px;
    justify-content: center;
    margin: 0;
  }
  body[data-game="catdoku"] .split .actions {
    grid-column: 2;
    grid-row: 2;
    flex-wrap: nowrap;
    gap: 3px;
  }
  body[data-game="catdoku"] .split .actions button {
    font-size: 12px;
    padding: 5px;
    min-width: 44px;
  }
  .pourstage .tubegrid {
    padding-top: 0;
  }
  .pourstage .tube {
    height: 160px;
    min-height: 160px;
    padding: 3px;
  }
  .pourstage .liquid {
    height: 28px;
  }
  .pourstage .tube-label {
    top: 3px;
  }
  .practice-options {
    gap: 4px;
  }
  .practice-choice {
    min-height: 44px;
  }
  .tileboard.upper-layer {
    grid-template-columns: repeat(2, minmax(44px, 64px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pour-stream {
    display: none;
  }
}
.tile-number {
  position: absolute;
  left: 4px;
  top: 3px;
  background: #fff;
  color: #29223d;
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  pointer-events: none;
}
#dialog label {
  display: block;
  margin: 8px 0;
}
#dialog select,
#dialog textarea {
  font: inherit;
  max-width: 100%;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
}
#dialog #feedback-note,
#dialog #feedback-copy {
  height: 64px;
  resize: none;
}
body[data-memory-theme="1"] .tile-face {
  filter: hue-rotate(65deg);
}
body[data-memory-theme="2"] .tile-face {
  filter: hue-rotate(190deg);
}
body[data-memory-theme="3"] .tile-face {
  filter: hue-rotate(290deg);
}
@media (max-height: 440px) {
  #dialog:has(#feedback-save) h2,
  #dialog:has(#feedback-copy) h2 {
    font-size: 18px;
    margin: 0;
  }
  #dialog:has(#feedback-save) label {
    margin: 3px 0;
  }
  #dialog:has(#feedback-save) .dialog-actions,
  #dialog:has(#feedback-copy) .dialog-actions {
    margin-top: 4px;
  }
  .footer .toolbar {
    gap: 4px;
  }
  .footer .toolbar button {
    padding: 0 7px;
  }
}
.teaching-grid {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 4px;
  justify-content: center;
}
.teaching-grid button {
  width: 44px;
  height: 44px;
  padding: 0;
}
.teaching-grid button:disabled {
  opacity: 1;
  color: #3de1c9;
}
.teaching-grid button:disabled:nth-child(3n + 2) {
  color: #bbb;
}
@media (max-height: 440px) {
  #dialog:has(.teaching-grid) > p:first-of-type {
    display: none;
  }
  #dialog:has(.teaching-grid) h2 {
    font-size: 18px;
    margin: 0 0 6px;
  }
  #dialog:has(.teaching-grid) .dialog-actions {
    margin-top: 6px;
  }
}
#dialog p#feedback-copy {
  height: auto;
  overflow-wrap: anywhere;
}
#dialog #feedback-note {
  height: 96px;
}
@media (max-height: 440px) {
  #dialog:has(#feedback-save) {
    padding: 12px;
  }
  #dialog:has(#feedback-save) label {
    font-size: 14px;
  }
  #dialog:has(#feedback-save) select {
    height: 44px;
  }
  #dialog:has(#feedback-save) #feedback-note {
    height: 80px;
  }
  #dialog:has(#feedback-save) .dialog-actions {
    gap: 4px;
  }
}
@media (max-height: 440px) and (min-width: 500px) {
  .groupsstage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 44px 18px;
    gap: 4px;
    align-content: center;
  }
  .groupsstage .groupboard {
    grid-area: 1/1;
    grid-template-columns: repeat(8, minmax(44px, 1fr));
    width: 100%;
    gap: 3px;
  }
  .groupsstage .groupboard button {
    height: 44px;
    min-height: 44px;
    padding: 2px;
    font-size: 11px;
  }
  .groupsstage .actions {
    grid-area: 2/1;
    justify-self: end;
  }
  .groupsstage [data-group-list] {
    grid-area: 2/1;
    justify-self: start;
  }
  .groupsstage .metric {
    grid-area: 3/1;
    margin: 0;
  }
}
@media (max-height: 440px) and (min-width: 500px) {
  .hivestage .entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    width: 100%;
    gap: 4px;
  }
  .hivestage .entry input {
    width: 100%;
    min-width: 0;
  }
  .hivestage .entry button {
    padding: 4px;
    font-size: 13px;
  }
  .hivestage .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    width: 100%;
    gap: 4px;
  }
  .hivestage .actions button {
    padding: 3px;
    font-size: 13px;
    min-height: 44px;
  }
  .hivestage .metric {
    margin: 0;
  }
}
@media (max-height: 440px) and (min-width: 500px) {
  .roundstage .entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    width: 100%;
    gap: 4px;
  }
  .roundstage .entry input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  .roundstage .entry button {
    padding: 4px;
  }
  .roundstage .clue,
  .roundstage .metric {
    margin: 0;
  }
  .roundstage .riddle {
    font-size: 17px;
    line-height: 1.15;
  }
}
@media (max-height: 440px) and (min-width: 500px) {
  .questionstage h2 {
    grid-column: 1;
    grid-row: 1/4;
    font-size: 18px;
    line-height: 1.2;
    align-self: center;
  }
  .questionstage .choices {
    grid-column: 2;
    grid-row: 2/4;
    gap: 4px;
  }
  .questionstage .choices button {
    min-height: 44px;
    padding: 4px;
    font-size: 14px;
  }
  .questionstage .metric {
    margin: 0;
  }
}

.stage [hidden] {
  display: none !important;
}
@media (max-height: 440px) {
  #dialog:has(.layer-guide-map) {
    padding: 12px;
  }
  #dialog:has(.layer-guide-map) h2 {
    font-size: 18px;
    margin: 0;
  }
  #dialog:has(.layer-guide-map) p {
    font-size: 14px;
    margin: 4px 0;
  }
  #dialog:has(.layer-guide-map) .dialog-actions {
    margin-top: 4px;
  }
}
@media (max-height: 440px) and (max-width: 499px) {
  body:is([data-game="mini"], [data-game="letter-swap"], [data-game="catdoku"])
    .stage.split,
  .wordstage,
  .phrase-stage,
  .pourstage,
  .hexstage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 3px;
    max-width: 100%;
  }
  .wordstage .entry {
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    gap: 4px;
  }
  .wordstage .entry input {
    width: min(240px, 65vw);
  }
  .hivestage {
    gap: 4px;
  }
  .hivestage .hive {
    grid-template-columns: repeat(3, 44px);
    gap: 4px;
  }
  .hivestage .hive button {
    height: 44px;
  }
  .hivestage .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    width: 100%;
    gap: 4px;
  }
  .hivestage .actions button {
    padding: 4px;
    font-size: 13px;
    min-height: 44px;
  }
  .hivestage .metric {
    margin: 0;
  }
  body[data-game="catdoku"] .split .numbers {
    display: grid;
    grid-template-columns: repeat(6, 44px);
    grid-template-rows: 44px;
    gap: 3px;
    margin: 0;
  }
  body[data-game="catdoku"] .split .actions {
    flex-wrap: wrap;
  }
  .phrase-stage .phrase-entry,
  .phrase-stage .phrase-pattern,
  .phrase-stage .phraseboard {
    width: 100%;
    grid-area: auto;
  }
  .phrase-stage .phrase-entry textarea {
    width: 100%;
  }
  body[data-game="rebus"] .rebusstage .riddle {
    font-size: 17px;
    line-height: 1.15;
    padding: 8px;
  }
}
body[data-game] input,
body[data-game] textarea,
body[data-game] select {
  font-size: 16px;
}
main {
  height: calc(var(--daily-effective-height, 100dvh) - 16px);
}
.keyboard-compact body {
  height: var(--daily-effective-height, 100dvh);
}
.keyboard-compact .subtitle {
  display: none;
}
.keyboard-compact main {
  grid-template-rows: 44px minmax(0, 1fr) 22px 44px;
  gap: 4px;
}
.keyboard-compact main > header {
  grid-row: 1;
}
.keyboard-compact main > .stage {
  grid-row: 2;
}
.keyboard-compact main > .status {
  grid-row: 3;
}
.keyboard-compact main > .footer {
  grid-row: 4;
}
.keyboard-compact .stage.split,
.keyboard-compact .wordstage,
.keyboard-compact .phrase-stage,
.keyboard-compact .hivestage,
.keyboard-compact .roundstage,
.keyboard-compact .hangstage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 3px;
  max-width: 100%;
}
.keyboard-compact .wordstage .entry {
  flex-direction: row;
  width: 100%;
  max-width: 100%;
  gap: 4px;
}
.keyboard-compact .wordstage .entry input {
  width: min(240px, 65vw);
}
.keyboard-compact .wordboard .letter {
  width: 26px;
  height: 28px;
  font-size: 16px;
}
.keyboard-compact .wordboard {
  gap: 3px;
}
.keyboard-compact .guessrow {
  gap: 3px;
}
.keyboard-compact .hive {
  grid-template-columns: repeat(3, 44px);
  gap: 4px;
}
.keyboard-compact .hive button {
  height: 44px;
}
.keyboard-compact .hivestage .actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  width: 100%;
  gap: 4px;
}
.keyboard-compact .hivestage .actions button {
  padding: 4px;
  font-size: 13px;
  min-height: 44px;
}
.keyboard-compact .hivestage .metric {
  margin: 0;
}
.keyboard-compact .phrase-stage .phrase-entry,
.keyboard-compact .phrase-stage .phrase-pattern,
.keyboard-compact .phrase-stage .phraseboard {
  width: 100%;
  grid-area: auto;
}
.keyboard-compact .phrase-stage textarea {
  width: 100%;
}
.keyboard-compact body[data-game="rebus"] .rebusstage .riddle {
  font-size: 17px;
  line-height: 1.15;
  padding: 8px;
}
.keyboard-compact #dialog {
  max-height: calc(var(--daily-effective-height, 100dvh) - 20px);
}
.depth-dialog h2 {
  font-size: 20px;
  margin: 0 0 6px;
}
.depth-dialog p {
  font-size: 14px;
  line-height: 1.3;
  margin: 5px 0;
}
.depth-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}
.depth-field input {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  font-size: 16px;
  background: #17122d;
  color: #fff;
  border: 1px solid #927eac;
  border-radius: 8px;
  padding: 6px;
}
.depth-dialog .dialog-actions button {
  font-size: 14px;
  padding: 6px 10px;
  min-height: 44px;
  min-width: 44px;
}
.focus-picture {
  width: 54px;
  height: 60px;
  margin: 0 auto;
}
.focus-picture .tile-face {
  width: 100%;
  height: 100%;
}
.hang-entry input {
  width: 60px !important;
  min-width: 44px;
}
.hang-entry {
  gap: 5px !important;
  flex-wrap: nowrap !important;
}
.hang-entry button {
  padding: 6px 9px;
  font-size: 14px;
}
.phrase-actions {
  gap: 4px;
}
.phrase-actions button {
  padding: 6px 8px;
  font-size: 14px;
  min-width: 44px;
  min-height: 44px;
}
.comparison-answer {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}
.comparison-three .choices button:last-child {
  grid-column: 1/-1;
  min-height: 44px;
  font-size: 16px;
  padding: 7px;
}
@media (max-height: 440px) {
  .comparison-three .choices {
    gap: 5px;
  }
  .comparison-three .choices button {
    min-height: 60px;
    font-size: 15px;
    padding: 6px;
  }
  .comparison-three h2 {
    font-size: 19px;
    margin: 0;
  }
  .comparison-three {
    gap: 4px !important;
  }
}