[hidden] { display: none !important; }
.brand-mark { color: var(--gold); font-size: 38px; line-height: 1; }
button, input { font: inherit; }
button, a, input { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.game-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 54px 0 36px; }
.game-intro .eyebrow { margin-bottom: 16px; }
.game-intro h1 { font-size: clamp(40px, 5vw, 60px); letter-spacing: -1.8px; margin-bottom: 18px; }
.game-intro .intro { margin: 0; }
.hard-mode { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0 0 22px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; }
.hard-mode label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; cursor: pointer; }
.hard-mode input { width: 20px; height: 20px; accent-color: var(--mint); cursor: pointer; }
.hard-mode .help-text { margin: 0; }
.session-score { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 12px; }
.session-score > span { font: 48px/1 Georgia, serif; color: var(--mint); }
.session-score small { color: var(--muted); font-size: 11px; line-height: 1.7; }
.game-board { --feedback-bg: #172220; --feedback-ink: var(--text); --feedback-line: var(--line); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.game-board[data-verdict="correct"] { --feedback-bg: #193e2a; --feedback-ink: #d0f4cb; --feedback-line: #83c794; }
.game-board[data-verdict="secondary"] { --feedback-bg: #493c19; --feedback-ink: #fff0af; --feedback-line: #dbbc5d; }
.game-board[data-verdict="wrong"] { --feedback-bg: #48262c; --feedback-ink: #ffd6d9; --feedback-line: #d98c94; }
.photo-panel, .answer-panel { min-width: 0; border: 1px solid var(--feedback-line); border-radius: 16px; }
.photo-panel { overflow: hidden; background: #131e1a; }
.photo-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-size: 10px; letter-spacing: 1.4px; color: var(--gold); }
.zoom-badge { padding: 6px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--mint); font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.photo-window { position: relative; height: clamp(320px, 43vw, 530px); overflow: hidden; display: grid; place-items: center; background: #0d1512; container-type: size; }
.photo-rotator { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; translate: -50% -50%; display: grid; place-items: center; rotate: var(--rotation, 0deg); transition: rotate .55s cubic-bezier(.2, .7, .2, 1); }
/* A quarter turn swaps the frame so the turned photo still fills the window. */
.photo-window[data-rotation="90"] .photo-rotator, .photo-window[data-rotation="270"] .photo-rotator { width: 100cqh; height: 100cqw; }
#machine-photo { width: 100%; height: 100%; min-height: 0; object-fit: contain; transform: scale(var(--zoom, 6)); transform-origin: var(--focal-x, 50%) var(--focal-y, 50%); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.photo-window.loading #machine-photo { transition: none; }
.image-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; text-align: center; color: var(--muted); line-height: 1.7; }
.viewfinder { position: absolute; width: 46px; height: 46px; border: 1px solid #ffffff70; border-radius: 7px; box-shadow: 0 0 0 1px #0004; pointer-events: none; }
.photo-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 22px 10px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.photo-caption p { margin: 0; }
.caption-tags { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
#error-count { white-space: nowrap; color: var(--gold); }
#rotation-note { color: var(--mint); }
.photo-credit { margin: 0; padding: 0 22px 18px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.photo-credit a, .machine-reveal a { text-decoration: underline; text-underline-offset: 3px; }
.answer-panel { padding: 28px; color: var(--feedback-ink); background: var(--feedback-bg); transition: background-color .2s, border-color .2s; }
.answer-panel .eyebrow { margin-bottom: 16px; }
.answer-panel h2 { font: 34px/1.2 Georgia, serif; margin: 0 0 20px; letter-spacing: -.7px; }
.answer-panel h2 em { color: var(--mint); font-weight: 400; }
.answer-intro { font-size: 13px; line-height: 1.8; margin: 0 0 24px; }
.answer-intro strong { font-weight: 600; }
#guess-form label { display: block; font-size: 12px; margin-bottom: 10px; }
#muscle-guess { display: block; width: 100%; min-height: 50px; padding: 13px; color: var(--text); background: #101918; border: 1px solid #6e8172; border-radius: 7px; font-size: 14px; }
#muscle-guess[aria-invalid="true"] { border-color: #efb29c; }
#muscle-guess::placeholder { color: var(--muted); opacity: 1; }
.help-text { color: var(--muted); font-size: 11px; line-height: 1.65; margin: 9px 0 18px; }
.game-board:not([data-verdict="neutral"]) #guess-help { color: inherit; }
.suggestions-popup { color: var(--text); }
.game-button { display: inline-flex; justify-content: center; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 13px 18px; border: 1px solid #d4e5c1; border-radius: 8px; color: #1a2b1c; background: linear-gradient(125deg, #d9e8c8, #acc894); font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 #fff7, 0 4px 12px #0002; }
.game-button:hover:enabled { filter: brightness(1.06); }
.guess-feedback { min-height: 48px; margin: 22px 0 18px; font-size: 14px; line-height: 1.7; }
.verdict-key { display: flex; flex-wrap: wrap; gap: 10px 16px; list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--feedback-line); font-size: 10px; }
.verdict-key li { display: flex; align-items: center; gap: 6px; }
.key-dot { width: 7px; height: 7px; border-radius: 50%; }
.key-dot.correct { background: #91d19a; }
.key-dot.secondary { background: #edcf69; }
.key-dot.wrong { background: #e997a0; }
.guess-history { margin-top: 20px; }
.guess-history h3 { font: 12px/1.5 system-ui, sans-serif; margin-bottom: 10px; }
#guess-list { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
#guess-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 10px 12px; border-radius: 6px; font-size: 11px; line-height: 1.5; }
#guess-list li[data-verdict="wrong"] { background: #552831; color: #ffd6d9; }
#guess-list li[data-verdict="secondary"] { background: #51431c; color: #fff0af; }
#guess-list li[data-verdict="correct"] { background: #214d31; color: #d0f4cb; }
.machine-reveal { padding-top: 22px; }
.machine-reveal h3 { font: 24px/1.3 Georgia, serif; margin: 0 0 10px; }
.machine-reveal p { font-size: 12px; line-height: 1.8; margin-bottom: 12px; }
.machine-reveal a { font-size: 11px; }
.next-button { min-height: 44px; padding: 12px 0; border: 0; background: none; color: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
#next-machine { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 20px; color: var(--feedback-ink); }
/* Once the muscle is found, the way to the next machine turns into a real button. */
.game-board[data-verdict="correct"] #next-machine { justify-content: center; gap: 14px; min-height: 50px; padding: 13px 18px; border: 1px solid #e7d8ab; border-radius: 8px; color: #2b2413; background: linear-gradient(125deg, #e9daae, var(--gold)); font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 0 #fff7, 0 4px 12px #0002; }
.game-board[data-verdict="correct"] #next-machine:hover { filter: brightness(1.06); }
.game-note { max-width: 760px; margin: 24px auto 0; font-size: 11px; line-height: 1.8; color: var(--muted); text-align: center; }
.game-note:last-of-type { margin-top: 10px; margin-bottom: 42px; }
.notice { padding: 20px; border: 1px solid var(--gold); border-radius: 10px; line-height: 1.7; }
.congrats-dialog { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid #8dbf87; border-radius: 20px; color: #e3f2dd; background: #1a3425; box-shadow: 0 24px 80px #0008; }
.congrats-dialog::backdrop { background: #08120ed6; backdrop-filter: blur(5px); }
.congrats-dialog[open] { animation: celebrate .35s ease-out; }
.congrats-content { position: relative; padding: 38px 30px 22px; text-align: center; background: radial-gradient(ellipse at 50% 0%, #b7d57b30, transparent 75%); }
.close-dialog { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 6px; background: none; color: var(--mint); font-size: 28px; }
.success-mark { display: block; width: 78px; height: 78px; margin: 0 auto 22px; color: #c9e7a8; }
.congrats-content .eyebrow { font-size: 9px; margin-bottom: 12px; }
.congrats-content h2 { font: 40px/1.2 Georgia, serif; margin: 0 0 20px; color: #d2ebbe; }
#congrats-answer { font-size: 16px; line-height: 1.7; margin: 0; }
.congrats-attempts { font-size: 12px; line-height: 1.6; margin: 14px 0 25px; color: #bad0b6; }
@keyframes celebrate { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .game-board { grid-template-columns: 1fr 1fr; gap: 18px; }
  .answer-panel { padding: 22px; }
  .answer-panel h2 { font-size: 29px; }
  .session-score { padding: 14px; }
}
@media (max-width: 700px) {
  .game-intro { padding: 36px 0 28px; align-items: flex-start; }
  .session-score { gap: 8px; padding: 10px; }
  .session-score > span { font-size: 32px; }
  .session-score small { font-size: 9px; }
  .game-board { grid-template-columns: 1fr; }
  .photo-window { height: 350px; }
  .photo-heading, .photo-caption { padding-inline: 18px; }
  .photo-credit { padding-inline: 18px; }
  .congrats-content { padding-inline: 22px; }
}
@media (max-width: 420px) {
  .game-intro { flex-direction: column; gap: 18px; }
  .session-score { padding: 8px 12px; }
  .session-score > span { font-size: 24px; }
  .session-score small br { display: none; }
  .photo-window { height: 310px; }
  .photo-caption { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #machine-photo, .photo-rotator, .answer-panel { transition: none; }
  .congrats-dialog[open] { animation: none; }
}