/* Two deliberate, tap-first thinking activities. The host owns the topbar and success overlay. */
.thinking-question-body { flex: 1; min-height: 0; width: 100%; }
.tg-body { width: 100%; height: 100%; min-height: 0; display: grid; align-items: center; gap: clamp(14px, 3vw, 34px); color: #315c50; }
.tg-route { grid-template-columns: minmax(175px, .9fr) minmax(270px, 1.2fr); }
.tg-body section { min-width: 0; min-height: 0; }
.tg-heading { margin: 0 0 10px; text-align: center; color: #315c50; font-size: clamp(17px, 2.2vw, 25px); line-height: 1.35; font-weight: 800; }
.tg-map-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tg-map { display: grid; grid-template-columns: repeat(var(--tg-columns), var(--tg-route-cell)); gap: 5px; padding: 8px; border: 2px solid #c5cfae; background: #e9edd9; border-radius: 22px; --tg-route-cell: clamp(44px, 11vh, 72px); }
.tg-map-cell { display: grid; place-items: center; position: relative; width: var(--tg-route-cell); height: var(--tg-route-cell); border: 1px solid #dbd4b8; border-radius: 11px; background: #fffaf0; }
.tg-wall { background: #b9cdaa; border-color: #9cb28b; }
.tg-bush { color: #658661; font-size: calc(var(--tg-route-cell) * .8); line-height: 1; text-shadow: 6px -2px 0 #8ca779; }
.tg-goal { background: #fff0b5; border: 2px solid #dcb45b; }
.tg-goal-star { color: #d4a02d; font-size: calc(var(--tg-route-cell) * .72); line-height: 1; }
.tg-start-dot { position: absolute; left: 4px; bottom: 2px; color: #72948b; font-size: 11px; }
.tg-character { position: absolute; inset: 4px; display: grid; place-items: center; border-radius: 9px; background: #fffefa6e; animation: tg-friend-step .3s ease-out; }
.tg-character img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.tg-map-key { display: flex; gap: 22px; margin: 8px 0 0; color: #837451; font-size: 12px; }
.tg-map-key span:first-child { color: #5a8377; }
.tg-plan-panel { display: flex; flex-direction: column; gap: 10px; padding: clamp(8px, 1.6vw, 20px); border: 1px solid #dcd5bc; border-radius: 24px; background: #fffdf6ad; }
.tg-plan-panel .tg-heading { margin-bottom: 0; }
.tg-program { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; }
.tg-command-slot { position: relative; display: grid; place-items: center; width: 54px; height: 48px; border: 1.5px dashed #c7c5af; border-radius: 12px; color: #b2b499; background: #eeefdf; }
.tg-command-slot small { position: absolute; top: 3px; left: 5px; font-size: 9px; line-height: 1; color: #899074; }
.tg-command-slot b { font-size: 31px; line-height: 1; }
.tg-command-filled { border-style: solid; border-color: #9ebba4; background: #e6f0e1; color: #315c50; }
.tg-command-active { box-shadow: 0 0 0 3px #5b9679; }
.tg-command-blocked { box-shadow: 0 0 0 3px #d4ac54; background: #fff0bc; }
.tg-directions { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.5vw, 18px); }
.tg-direction { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 54px; min-height: 48px; padding: 5px 9px; border: 1.5px solid #b59a71; border-radius: 14px; background: #fff6dd; color: #315c50; box-shadow: 0 3px 0 #a38d6219; }
.tg-direction b { font-size: 26px; line-height: 1; }
.tg-direction small { font-size: 11px; font-weight: 800; }
.tg-program-actions { display: flex; gap: 12px; align-items: stretch; }
.tg-undo { flex: 1; min-height: 48px; padding: 7px; border: 1.5px solid #bea681; border-radius: 15px; background: #fffaf0; color: #6d7253; font-size: 18px; }
.tg-undo span { font-size: 12px; font-weight: 800; white-space: nowrap; }
.tg-primary { flex: 1.2; min-height: 48px; padding: 9px 14px; border: 2px solid #315c50; border-radius: 17px; background: #315c50; color: #fffbed; box-shadow: 0 4px 0 #315c5021; font-size: clamp(17px, 2vw, 22px); font-weight: 800; white-space: nowrap; }
.tg-primary:not(:disabled):active, .tg-direction:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #315c5021; }
.tg-primary:disabled { background: #d7e2cf; color: #5e725c; border-color: #b5c4a8; box-shadow: none; opacity: .75; }
.tg-direction:disabled, .tg-undo:disabled { opacity: .4; box-shadow: none; }
.tg-hint { margin: 0; min-height: 1.5em; color: #8a7654; text-align: center; font-size: clamp(11px, 1.4vw, 15px); line-height: 1.5; }
.tg-copy { grid-template-columns: minmax(165px, .75fr) minmax(310px, 1.3fr); }
.tg-copy-sample, .tg-copy-panel { display: flex; flex-direction: column; align-items: center; }
.tg-copy-sample { padding: 14px; background: #f4ead095; border: 1px solid #d7c8a8; border-radius: 23px; }
.tg-copy-panel { padding: 10px; }
.tg-copy-grid { display: grid; grid-template-columns: repeat(var(--tg-columns), var(--tg-copy-cell)); gap: 5px; padding: 7px; border: 2px solid #d1d3b5; border-radius: 17px; background: #ecedda; --tg-copy-cell: clamp(44px, 8.4vh, 70px); flex: 0 0 auto; }
.tg-copy-grid.tg-copy-grid-small { --tg-copy-cell: clamp(48px, 8.4vh, 70px); }
.tg-copy-cell { display: grid; place-items: center; width: var(--tg-copy-cell); height: var(--tg-copy-cell); padding: 0; border: 1.5px solid #dad2b2; border-radius: 10px; color: #ba7757; background: #fffbeb; }
button.tg-copy-cell { touch-action: manipulation; }
.tg-copy-cell.tg-flower-filled { background: #f9efda; }
.tg-flower { position: relative; display: block; font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--tg-copy-cell) * .84); font-weight: 400; line-height: 1; color: #d08878; text-shadow: 0 2px 0 #a1634920; }
.tg-flower::after { content: ""; position: absolute; width: 18%; height: 18%; left: 41%; top: 42%; border-radius: 50%; background: #e6bd59; }
.tg-soil-dot { font-size: 22px; color: #c2c4a0; }
.tg-evidence-highlight { outline: 3px solid #d6ad4d; outline-offset: 1px; }
.tg-copy-work { display: flex; justify-content: center; align-items: center; width: 100%; gap: clamp(12px, 2vw, 24px); }
.tg-copy-controls { display: flex; flex-direction: column; gap: 12px; width: min(150px, 40%); }
.tg-copy-controls .tg-primary { flex: 0 0 auto; width: 100%; }
.tg-copy-tip, .tg-sample-note { color: #8a7654; font-size: 12px; line-height: 1.6; margin: 0; text-align: center; }
.tg-sample-note { margin-top: 9px; }
.tg-copy-panel > .tg-hint { margin-top: 10px; }
@keyframes tg-friend-step { from { transform: translateY(-3px); } to { transform: none; } }
@media (max-height: 420px) and (min-width: 600px) {
  .tg-heading { margin-bottom: 7px; font-size: 18px; }
  .tg-plan-panel { gap: 7px; padding: 9px 12px; }
  .tg-map { padding: 6px; --tg-route-cell: 44px; }
  .tg-direction { gap: 3px; padding: 4px 6px; }
  .tg-directions { gap: 8px; }
  .tg-direction small { font-size: 10px; }
  .tg-hint { font-size: 11px; }
  .tg-copy-sample { padding: 9px; }
  .tg-copy-panel { padding: 4px; }
  .tg-copy-grid { --tg-copy-cell: 44px; }
  .tg-copy-tip, .tg-sample-note { font-size: 10px; }
  .tg-copy-controls { gap: 9px; }
}
@media (min-height: 341px) and (max-height: 420px) and (min-width: 600px) {
  .tg-map { --tg-route-cell: clamp(44px, calc((36vw - 34px) / var(--tg-columns)), 60px); }
  .tg-copy-grid { --tg-copy-cell: 48px; }
}
@media (max-height: 340px) and (min-width: 600px) {
  .tg-body { gap: 14px; }
  .tg-heading { font-size: 16px; margin-bottom: 5px; }
  .tg-plan-panel { gap: 5px; padding: 6px 8px; }
  .tg-command-slot { height: 38px; width: 46px; }
  .tg-command-slot b { font-size: 27px; }
  .tg-program { min-height: 38px; }
  .tg-map-key { margin-top: 5px; font-size: 10px; }
  .tg-program-actions { gap: 8px; }
  .tg-direction { min-width: 48px; }
  .tg-direction b { font-size: 24px; }
  .tg-primary { font-size: 16px; padding: 7px; }
  .tg-undo { padding: 4px; }
  .tg-undo span { font-size: 11px; }
  .tg-hint { font-size: 10px; }
  .tg-copy-sample { padding: 6px; }
  .tg-copy-sample .tg-sample-note { display: none; }
  .tg-copy-panel > .tg-hint { margin-top: 5px; font-size: 10px; }
  .tg-copy-work { gap: 10px; }
  .tg-copy-controls { min-width: 97px; }
}
@media (max-width: 599px) {
  .tg-body { gap: 10px; grid-template-columns: 1fr; height: auto; overflow-y: auto; }
  .tg-route { grid-template-columns: minmax(155px, .8fr) minmax(220px, 1.2fr); }
  .tg-copy-work { gap: 12px; }
}
.tg-cover-route { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; gap: 12px; color: #315c50; pointer-events: none; }
.tg-cover-route img { flex: 0 0 72px; width: 72px; height: 72px; max-width: 72px; max-height: 72px; object-fit: contain; }
.tg-cover-route > span, .tg-cover-route > b { font-size: 34px; line-height: 1; font-weight: 800; }
.tg-cover-route > :last-child { color: #d5a444; }
.tg-cover-pattern { display: grid; grid-template-columns: repeat(var(--tg-columns), 28px); justify-content: center; gap: 5px; width: 100%; pointer-events: none; }
.tg-cover-pattern > i { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #d8d1b5; border-radius: 6px; background: #fffbeb; color: #d08878; font: normal 26px/1 Georgia, "Times New Roman", serif; }
@media (prefers-reduced-motion: reduce) { .tg-character { animation: none; } .tg-primary:not(:disabled):active, .tg-direction:not(:disabled):active { transform: none; } }