/* Games share the field guide's palette, type, cards, and controls. */
#gamesView .personality-shell { width: min(1180px, calc(100% - 48px)); max-width: none; margin: 40px auto 72px; }
.games-heading { margin-bottom: 24px; }
.games-heading h1 { margin: 0; color: var(--forest); font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.045em; }
.games-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 24px; }
#gamesView .game-selector { display: grid; gap: 5px; margin: 0; padding: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; position: sticky; top: 98px; }
#gamesView .game-selector button { border: 0; border-radius: 14px; padding: 13px 14px; min-height: 48px; text-align: left; background: transparent; color: var(--forest); font-size: .95rem; line-height: 1.35; font-weight: 800; }
#gamesView .game-selector button:hover { background: var(--sage); }
#gamesView .game-selector button.active { background: var(--forest); color: var(--cream); }
.game-stage { min-width: 0; }
.games-mobile-picker { display: none; }
#gamesView .daily-game-card, #gamesView .personality-intro, #gamesView .personality-question { background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); }
#gamesView .personality-result { background: var(--card); border-radius: 28px; box-shadow: var(--shadow); }
#gamesView .daily-game-heading { align-items: flex-start; gap: 16px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
#gamesView .daily-game-heading h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); letter-spacing: -.035em; line-height: 1.12; margin: 12px 0 0; }
#gamesView .daily-game-heading .eyebrow { background: var(--sage-soft); color: var(--forest); font-size: .75rem; letter-spacing: .045em; padding: 6px 9px; }
#gamesView .daily-game-count { background: var(--yellow); border-radius: 13px; font-size: .875rem; padding: 10px 12px; margin-top: 2px; }
#gamesView .daily-game-card > p { color: var(--muted); margin: 14px 0; line-height: 1.6; }
#gamesView .daily-game-card > .personality-small { border-top: 1px solid var(--line); padding-top: 16px; margin: 22px 0 0; font-size: .8rem; }
#gamesView .primary, #gamesView .secondary { min-height: 48px; border-radius: 14px; padding: 12px 18px; font-size: .95rem; line-height: 1.35; font-weight: 850; cursor: pointer; transition: background .15s, border-color .15s; }
#gamesView .primary { border: 1px solid var(--forest); background: var(--forest); color: white; }
#gamesView .primary:hover:not(:disabled) { background: var(--forest-2); border-color: var(--forest-2); }
#gamesView .secondary { border: 1px solid var(--line); background: var(--cream); color: var(--forest); }
#gamesView .secondary:hover:not(:disabled) { border-color: var(--forest); background: var(--sage-soft); }
#gamesView button:disabled { cursor: default; }
#gamesView .primary:disabled, #gamesView .secondary:disabled { opacity: .5; }
#gamesView .personality-text-button { min-height: 44px; padding: 10px 4px; color: var(--muted); font-size: .875rem; font-weight: 650; }
#gamesView .personality-text-button:hover { color: var(--forest); }
#gamesView .daily-guess-form { margin-top: 22px; }
#gamesView .daily-guess-form label { font-size: .9rem; }
#gamesView .daily-guess-form input { border: 1px solid var(--line); border-radius: 14px; background: var(--cream); min-height: 48px; padding: 12px 15px; }
#gamesView .daily-guess-form input:focus { border-color: var(--forest); }
#gamesView .daily-guess-form > div { align-items: stretch; }
#gamesView .daily-game-feedback { color: var(--forest); font-size: .95rem; min-height: 0; }
#gamesView .daily-game-feedback:empty { display: none; }
#gamesView .photo-game-frame { height: clamp(230px, 32vw, 355px); border: 1px solid var(--line); border-radius: 18px; background: var(--sage-soft); }
#gamesView .photo-game-credit { margin: 9px 0 18px; color: var(--muted); font-size: .75rem; }
#gamesView .photo-game-choices { gap: 10px; }
#gamesView .photo-game-choices .secondary { background: white; text-align: left; border-width: 1px; padding: 15px 18px; }
#gamesView .photo-game-choices .secondary:hover:not(:disabled) { background: var(--sage-soft); }
#gamesView .photo-game-actions, #gamesView .connections-actions, #gamesView .mini-actions { gap: 10px; align-items: center; }
#gamesView .photo-game-answer { padding: 20px; margin-top: 18px; border-radius: 18px; background: var(--sage-soft); }
#gamesView .photo-game-answer h3 { color: var(--forest); letter-spacing: -.025em; }
#gamesView .daily-game-columns { gap: 20px; }
#gamesView .daily-game-columns > section { padding: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; min-width: 0; }
#gamesView .daily-game-columns h3 { margin: 0 0 16px; }
#gamesView .daily-guesses li { background: white; }
#gamesView .daily-hints li { font-size: .95rem; }
#gamesView .daily-game-reveal { border: 1px solid var(--line); background: var(--sage-soft); }
#gamesView .mini-layout { grid-template-columns: minmax(230px, 330px) minmax(0, 1fr); gap: 24px; }
#gamesView .mini-grid { border-color: var(--forest); background: var(--forest); border-radius: 8px; overflow: hidden; }
#gamesView .mini-black { background: var(--forest); }
#gamesView .mini-cell { background: var(--cream); }
#gamesView .mini-cell input, #gamesView .mini-cell > span { color: var(--forest); }
#gamesView .mini-word { background: var(--sage); }
#gamesView .mini-selected { background: var(--yellow); }
#gamesView .mini-error { box-shadow: inset 0 0 0 3px var(--danger); }
#gamesView .mini-error input { color: var(--danger); }
#gamesView .mini-current { background: var(--yellow); color: var(--forest); margin: 0 0 14px; font-size: .95rem; }
#gamesView .mini-clues { grid-template-columns: 1fr; gap: 14px; }
#gamesView .mini-clues h3 { font-size: 1rem; color: var(--forest); margin-bottom: 8px; }
#gamesView .mini-clues ol { margin: 0; }
#gamesView .mini-clues button { font-size: .9rem; padding: 9px 10px; color: var(--forest); }
#gamesView .mini-clues button.active { background: var(--sage-soft); }
#gamesView .mini-clues button:hover { background: var(--sage); }
#gamesView .connections-grid { gap: 10px; }
#gamesView .connection-tile { background: var(--cream); border: 1px solid var(--line); color: var(--forest); min-height: 95px; border-radius: 14px; font-size: .95rem; }
#gamesView .connection-tile:hover { background: var(--sage-soft); border-color: var(--forest); }
#gamesView .connection-tile.selected { background: var(--forest); color: var(--cream); border-color: var(--forest); }
#gamesView .connections-group { border-radius: 14px; color: var(--forest); }
#gamesView .connections-color-0 { background: var(--yellow); }
#gamesView .connections-color-1 { background: var(--sage); }
#gamesView .connections-color-2 { background: #f1c69f; }
#gamesView .connections-color-3 { background: #d6e5c7; border: 1px solid var(--forest); }
#gamesView .odd-birds { gap: 12px; }
#gamesView .odd-bird { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; gap: 0; color: var(--forest); }
#gamesView .odd-bird img { border-radius: 0; height: 155px; background: var(--sage-soft); }
#gamesView .odd-bird strong { padding: 12px 10px 6px; font-size: .95rem; }
#gamesView .odd-bird span { padding: 0 10px 12px; color: var(--muted); }
#gamesView .odd-bird:not(:disabled):hover { background: var(--cream); box-shadow: 0 8px 26px rgba(23,63,42,.06); }
#gamesView .odd-bird.odd-answer { background: var(--yellow); border: 2px solid var(--forest); }
#gamesView .odd-explanation { background: var(--sage-soft); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
#gamesView .speed-result { color: var(--forest); letter-spacing: -.04em; }
#gamesView .speed-review { border: 1px solid var(--line); border-radius: 14px; background: var(--cream); padding: 16px; }
#gamesView .personality-intro h2 { font-size: clamp(2rem, 4vw, 2.7rem); letter-spacing: -.035em; }
@media(max-width:1000px) { .games-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; } #gamesView .mini-layout { grid-template-columns: 1fr; } #gamesView .mini-grid { max-width: 330px; margin: auto; } #gamesView .mini-clues { grid-template-columns: 1fr 1fr; } #gamesView .odd-birds { grid-template-columns: 1fr 1fr; } }
@media(max-width:760px) {
 #gamesView .personality-shell { width: calc(100% - 28px); margin: 28px auto 48px; }
 .games-heading { margin-bottom: 18px; }
 .games-layout { display: block; }
 #gamesView .game-selector { display: none; }
 .games-mobile-picker { display: block; margin-bottom: 18px; }
 .games-mobile-picker > span { display: block; margin-bottom: 7px; color: var(--forest); font-size: .875rem; font-weight: 800; }
 .games-mobile-picker select { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 15px; padding: 12px 15px; background: white; color: var(--forest); font-size: 1rem; font-weight: 750; }
 #gamesView .daily-game-card, #gamesView .personality-intro, #gamesView .personality-question { padding: 20px; border-radius: 22px; }
 #gamesView .daily-game-heading { gap: 12px; padding-bottom: 16px; margin-bottom: 16px; flex-wrap: wrap; }
 #gamesView .daily-game-heading h2 { font-size: 1.85rem; }
 #gamesView .daily-game-count { font-size: .875rem; }
 #gamesView .daily-game-columns { grid-template-columns: 1fr; }
 #gamesView .daily-game-columns > section { padding: 16px; }
 #gamesView .photo-game-frame { height: 270px; }
 #gamesView .daily-guess-form > div { flex-wrap: nowrap; }
 #gamesView .daily-guess-form .primary { width: auto; }
 #gamesView .connection-tile { font-size: .875rem; min-height: 90px; padding: 8px 4px; }
 #gamesView .connections-grid { gap: 6px; }
 #gamesView .connections-actions, #gamesView .mini-actions { gap: 8px; }
 #gamesView .mini-clues { gap: 12px; }
}
@media(max-width:390px) { #gamesView .daily-game-card { padding: 16px; } #gamesView .daily-guess-form > div { flex-wrap: wrap; } #gamesView .daily-guess-form .primary { width: 100%; } #gamesView .photo-game-frame { height: 230px; } #gamesView .photo-game-choices { grid-template-columns: 1fr; } #gamesView .odd-bird strong { font-size: .875rem; } }
@media(prefers-reduced-motion:reduce) { #gamesView button { transition: none; } }