/* Native dialog supplies keyboard focus containment and Escape-to-close. */
body.album_open { overflow: hidden; }
#album_dialog { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--color_border); border-radius: 1rem; background: var(--color_background); color: var(--color_text); overflow-y: auto; }
#album_dialog::backdrop { background: rgb(3 10 20 / 85%); }
.dialog_top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.dialog_top .eyebrow { margin: 0; font-size: 0.65rem; }
#challenge_title { font-size: clamp(1.8rem, 5vw, 2.7rem); }
#challenge_title:focus { outline: none; }
.game_secondary, .game_choice, .memory_card, .heart_tile { font: inherit; color: var(--color_text); border: 1px solid var(--color_border); background: var(--color_surface); border-radius: 0.5rem; cursor: pointer; min-height: 44px; padding: 0.7rem 1rem; }
.game_secondary { font-size: 0.875rem; }
.game_choice:hover, .game_secondary:hover { border-color: var(--color_teal); }
.game_actions, .game_choices { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.game_actions .button, .album_open_button { border: 0; cursor: pointer; font-family: inherit; }
.challenge_hint { margin-top: 1rem; font-size: 0.85rem; color: var(--color_teal); }
/* Album cards fit their content instead of stretching to the tallest neighbour. */
.album_card { align-self: start; }
#game_feedback { min-height: 3.5rem; margin-block: 1rem; color: var(--color_amber); }
#game_board:empty + #game_feedback { display: none; }
.number_sequence { font-size: clamp(1.4rem, 5vw, 2.5rem); color: var(--color_teal); text-align: center; padding-block: 1rem; }
.game_choices { justify-content: center; }
.game_choices button { min-width: 5rem; font-size: 1.25rem; }
.memory_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.memory_card { min-height: 7rem; font-size: 1.6rem; padding: 0.5rem; overflow-wrap: anywhere; }
.memory_card.face_up { font-size: 1rem; background: #284753; }
.memory_card.matched { color: var(--color_teal); border: 2px solid var(--color_teal); opacity: 1; }
/* Orange training cones on a striped football pitch. */
.cone_stage {
  position: relative;
  height: 14rem;
  margin-block: 1rem;
  overflow: hidden;
  border: 1px solid #639b79;
  border-radius: 0.75rem;
  background: repeating-linear-gradient(90deg, #23563e 0 16.666%, #2a6247 16.666% 33.333%);
}
.cone_stage::before {
  content: '';
  position: absolute;
  inset: 1rem;
  border: 2px solid #ffffff70;
  border-radius: 0.2rem;
  pointer-events: none;
}
.shuffle_cone {
  position: absolute;
  top: 2.5rem;
  width: 28%;
  margin-left: 2.5%;
  height: 10rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
}
.shuffle_cone:disabled { cursor: default; opacity: 1; }
.training_cone {
  position: absolute;
  bottom: 1rem;
  left: 10%;
  width: 80%;
  height: 7rem;
  filter: drop-shadow(3px 7px 3px #071c2466);
}
.training_cone::before {
  content: '';
  position: absolute;
  inset: 0 13% 0.6rem;
  clip-path: polygon(39% 0, 61% 0, 100% 100%, 0 100%);
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #bd4318aa, transparent 45%, #ffffff35 65%, #a22c1955), linear-gradient(to bottom, #ff8c36 0 35%, #fff1d7 35% 47%, #ff8c36 47% 68%, #fff1d7 68% 79%, #f66b22 79%);
}
.training_cone::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8rem;
  border-radius: 45%;
  background: linear-gradient(#ffab56, #d54b16);
  border-bottom: 3px solid #a73513;
}
.hidden_football {
  position: absolute;
  bottom: 0.35rem;
  left: 50%;
  width: clamp(2.8rem, 10vw, 3.8rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: url('../assets/icons/football.svg') center / contain no-repeat;
  font-size: 0;
  filter: drop-shadow(0 2px 3px #071c2499) drop-shadow(0 0 4px #fff3bf55);
}
.shuffle_cone.ball_revealed .training_cone { transform: translateY(-3.5rem); }
.shuffle_cone:enabled:hover .training_cone { filter: drop-shadow(0 0 6px #fff1d799); }
@media (prefers-reduced-motion: no-preference) {
  .shuffle_cone { transition: left 650ms ease-in-out; }
  .training_cone { transition: transform 220ms ease; }
}
.heart_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; max-width: 21rem; margin: auto; }
.heart_tile { position: relative; padding: 0; aspect-ratio: 1; overflow: hidden; border-radius: 0.25rem; }
.heart_piece { display: block; width: 100%; height: 100%; background-image: url('../assets/icons/heart_puzzle.svg'); background-size: 200% 200%; }
.piece_0 { background-position: left top; }.piece_1 { background-position: right top; }.piece_2 { background-position: left bottom; }.piece_3 { background-position: right bottom; }
.tile_label { position: absolute; bottom: 0.3rem; left: 0.3rem; padding: 0.1rem 0.4rem; background: #101c2b; border-radius: 0.2rem; color: var(--color_text); font-size: 0.7rem; }
.tile_ready { border-color: var(--color_teal); }
.album_empty { padding: 1.5rem; background: var(--color_surface); border-radius: 0.5rem; }
@media (max-width: 400px) { .memory_card { min-height: 5.5rem; }.memory_card.face_up { font-size: 0.8rem; } }

/* A friendly temporary mascot; it can be replaced with a portrait later. */
.game_welcome { text-align: center; padding-block: 0.5rem 1rem; }
.welcome_character { position: relative; width: 11rem; height: 9rem; margin: 0 auto 1.5rem; }
.character_face { position: absolute; left: 1.5rem; top: 1rem; width: 7rem; height: 7rem; border-radius: 45% 45% 40% 40%; background: linear-gradient(145deg, #a4efdb, #56bda8); border: 3px solid #c8f9e8; transform: rotate(-7deg); box-shadow: 0 8px 0 #071c2444; }
.character_eyes::before, .character_eyes::after { content: ''; position: absolute; top: 2.25rem; width: 0.65rem; height: 1rem; border-radius: 50%; background: #17313b; }
.character_eyes::before { left: 1.7rem; }.character_eyes::after { right: 1.7rem; }
.character_smile { position: absolute; left: 2.05rem; top: 3.5rem; width: 2.5rem; height: 1.25rem; border-bottom: 4px solid #17313b; border-radius: 0 0 50% 50%; }
.character_hand { position: absolute; right: 0; bottom: 0.6rem; font-size: 2.8rem; transform: rotate(15deg); }
.character_spark { position: absolute; right: 0.3rem; top: -0.4rem; color: var(--color_amber); font: italic 3rem Georgia, serif; }
.welcome_note { max-width: 34ch; margin: 0 auto 1.5rem; }
.welcome_actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.welcome_actions .button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
#game_board:has(.game_welcome) + #game_feedback { display: none; }
@media (max-width: 400px) { .welcome_actions { flex-direction: column; } }

/* Each album host has its own colours, expression, and themed accessory. */
.character_work .character_face { background: linear-gradient(145deg, #bedcf4, #6baac9); border-color: #d9eeff; }
.character_work .character_eyes::before, .character_work .character_eyes::after { width: 1.55rem; height: 1.25rem; border: 3px solid #17313b; border-radius: 0.35rem; background: radial-gradient(circle, #17313b 0 3px, transparent 4px); }
.character_work .character_eyes::before { left: 1.2rem; }.character_work .character_eyes::after { right: 1.2rem; }
.character_graduation .character_face { background: linear-gradient(145deg, #eddbff, #b596df); border-color: #f1e4ff; }
.character_graduation .character_spark { z-index: 1; top: -1.1rem; right: 3rem; font-size: 3.5rem; transform: rotate(-10deg); }
.character_graduation .character_eyes::after, .character_friends .character_eyes::after { top: 2.65rem; height: 0.25rem; width: 1rem; border-radius: 1rem; transform: rotate(-10deg); }
.character_friends .character_face { background: linear-gradient(145deg, #ffd79e, #efac67); border-color: #ffe9c7; }
.character_family .character_face { background: linear-gradient(145deg, #ffd4c9, #e8a091); border-color: #ffe6df; }
.character_family .character_eyes::before, .character_family .character_eyes::after { height: 0.65rem; background: transparent; border-top: 3px solid #17313b; border-radius: 50%; }

/* Four columns on desktop, square previews, and uncropped photos in the viewer. */
#album_dialog.showing_album { width: min(68rem, calc(100% - 2rem)); }
#album_contents .media_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 0.75rem; }
#album_contents .media_grid figure { min-width: 0; padding: 0.4rem; background: var(--color_surface); border: 1px solid var(--color_border); border-radius: 0.6rem; }
.photo_thumbnail { display: block; width: 100%; padding: 0; border: 0; border-radius: 0.4rem; background: transparent; cursor: zoom-in; overflow: hidden; }
#album_contents .media_grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; max-height: none; }
#album_contents .media_grid figcaption { padding: 0.5rem 0.25rem 0.1rem; font-size: 0.8rem; }
body.photo_open { overflow: hidden; }
#photo_dialog { width: min(76rem, calc(100% - 1rem)); max-height: calc(100dvh - 1rem); padding: clamp(0.75rem, 2vw, 1.5rem); border: 1px solid var(--color_border); border-radius: 0.75rem; background: #0d1726; color: var(--color_text); overflow: auto; }
#photo_dialog::backdrop { background: #050b14ed; }
.photo_toolbar, .photo_controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.photo_toolbar p { margin: 0; font-size: 0.9rem; }
.full_photo { margin: 1rem 0; }
#viewer_image { display: block; width: 100%; height: min(65dvh, 50rem); object-fit: contain; }
#viewer_caption { text-align: center; padding-top: 0.75rem; color: var(--color_muted); font-size: 0.9rem; }
.photo_controls button { min-width: 7rem; }
@media (max-width: 760px) { #album_contents .media_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { #album_contents .media_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cover_just_me { background: linear-gradient(125deg, #826044, #3c3657); }
.character_just_me .character_face { background: linear-gradient(145deg, #ffe7aa, #efbd68); border-color: #fff1ce; }
.character_just_me .character_eyes::after { top: 2.65rem; height: 0.25rem; width: 1rem; border-radius: 1rem; transform: rotate(-10deg); }
.wink_face { min-height: 5rem; font-size: clamp(1.75rem, 7vw, 2.5rem); }
.wink_face:hover { background: #284753; }

/* Compact album rows fill the space beneath shorter cards. */
.album_grid.compact_albums { grid-auto-rows: 1px; row-gap: 0; column-gap: 1.25rem; }
@media (max-width: 640px) {
  .album_grid.compact_albums { grid-auto-rows: auto; row-gap: 1.25rem; }
  .album_grid.compact_albums > .album_card { grid-row-end: auto !important; }
}

/* Tactile game pieces on a quiet tabletop. */
#album_dialog { background: var(--color_surface); box-shadow: 0 24px 90px #20271f40; border-radius: 0.85rem; }
#album_dialog::backdrop { background: rgb(30 36 28 / 55%); }
#photo_dialog { background: var(--color_surface); }
#photo_dialog::backdrop { background: #080a08ed; }
#game_board > .game_secondary { display: block; margin: 1.25rem auto 0; }
.game_score { color: var(--color_muted); font-size: 0.8rem; letter-spacing: 0.045em; font-variant-numeric: tabular-nums; }
.number_sequence { display: flex; justify-content: center; gap: 0.45rem; font-variant-numeric: tabular-nums; }
.number_sequence span { display: grid; place-items: center; min-width: 0; flex: 1; max-width: 5rem; padding: 0.8rem 0.2rem; background: linear-gradient(#f1f0e9, #dce0d3); border: 1px solid var(--color_border); border-radius: 0.4rem; box-shadow: 0 3px 0 #a7ae9d; }
.number_sequence span:last-child { border-style: dashed; color: var(--color_text); }
.memory_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; perspective: 800px; }
.memory_card { aspect-ratio: 0.8; min-height: 5rem; background: repeating-linear-gradient(45deg, #ffffff04 0 1px, transparent 1px 7px), linear-gradient(140deg, #343c32, #232a22); border: 1px solid #616b5a; box-shadow: inset 0 0 0 5px #242b23, inset 0 0 0 6px #424d3e, 0 4px 0 #101510, 0 8px 12px #0003; color: #c4cbbb; }
.memory_card.face_up { background: linear-gradient(145deg, #e4dfd1, #bfb6a4); color: #292b24; border-color: #d1c8b8; box-shadow: inset 0 0 0 4px #c8bfac, 0 3px 0 #7a7262, 0 7px 12px #0003; }
.memory_card.matched { background: #bac4af; border-color: #a6b49a; color: #252d22; box-shadow: inset 0 0 0 4px #acb89f; }
.cone_stage { border-color: #46553d; background: radial-gradient(ellipse at 50% 20%, #ffffff0a, #0004), repeating-linear-gradient(90deg, #34452e 0 16.666%, #3a4c33 16.666% 33.333%); box-shadow: inset 0 1px 12px #0005; }
.cone_stage::before { border-color: #cbd0b06b; }
.cone_stage::after { content: ''; position: absolute; inset: 0; opacity: 0.18; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 3px, #b2bb951f 3px 4px); }
.training_cone::before { background: linear-gradient(90deg, #3b241477, transparent 42%, #ffe2ac44 63%, #39221577), linear-gradient(to bottom, #bb743e 0 35%, #d9d2bc 35% 47%, #bb743e 47% 68%, #d9d2bc 68% 79%, #a46033 79%); }
.training_cone::after { background: linear-gradient(#b98553, #86502d); border-bottom-color: #60361f; }
.shuffle_cone.passing_front { z-index: 2; }
.shuffle_cone.passing_back { z-index: 1; }
.heart_grid { padding: 0.6rem; gap: 0.35rem; background: #11140f; border: 1px solid #424a3d; border-radius: 0.6rem; box-shadow: inset 0 2px 10px #0008; }
.heart_tile { border: 1px solid #626557; box-shadow: inset 0 0 0 2px #ffffff0a, 0 3px 4px #0007; }
.heart_tile.tile_ready { border-color: #aebaa0; }
.tile_label { background: #171918eb; color: #e9e7e0; }
.wink_grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; padding: 0.75rem; border: 1px solid var(--color_border); background: #d6dbcf; border-radius: 0.7rem; }
.wink_face { display: grid; place-items: center; min-width: 0; min-height: 44px; aspect-ratio: 1; padding: 0.2rem; font-size: clamp(1.35rem, 4.6vw, 2.15rem); background: linear-gradient(145deg, #f1f0e7, #e0e3d7); border: 1px solid #aeb8a2; box-shadow: 0 2px 0 #a0aa94; }
.wink_face span { display: block; filter: saturate(0.65); }
.wink_face:hover { background: #c9d2bc; border-color: #697c5d; }
.wink_face.wink_found { border-color: #4f654c; box-shadow: 0 0 0 2px #4f654c; }
.wink_face.wink_missed { border-color: #b58d79; }
.wink_face:focus-visible { outline-offset: 1px; position: relative; z-index: 1; }
.welcome_character { transform: scale(0.85); margin-bottom: 0; }
.welcome_character .character_face { background: linear-gradient(145deg, #b6bfa6, #7f8d74); border-color: #c2c9b7; box-shadow: inset -8px -5px 14px #39462b55, inset 5px 5px 10px #ffffff30, 0 9px 12px #0004; }
.character_work .character_face { background: linear-gradient(145deg, #bdc4bf, #829188); }
.character_graduation .character_face { background: linear-gradient(145deg, #c5bfc7, #978d9c); }
.character_friends .character_face, .character_just_me .character_face { background: linear-gradient(145deg, #cebea1, #a18a64); }
.character_family .character_face { background: linear-gradient(145deg, #c7b4a7, #9e8475); }
.character_hand, .character_spark { filter: saturate(0.5); }
.cover_just_me { background: var(--color_surface); }
@media (prefers-reduced-motion: no-preference) {
  .memory_card.face_up { animation: card_reveal 240ms ease-out; }
  .heart_piece { transition: transform 220ms ease; }
  .shuffle_cone { transition: left 650ms cubic-bezier(.4,0,.2,1); }
  .shuffle_cone.passing_front { animation: cone_front 650ms ease-in-out; }
  .shuffle_cone.passing_back { animation: cone_back 650ms ease-in-out; }
  @keyframes card_reveal { from { transform: rotateY(-75deg); } to { transform: rotateY(0); } }
  @keyframes cone_front { 50% { transform: translateY(18px) scale(1.06); } }
  @keyframes cone_back { 50% { transform: translateY(-18px) scale(0.94); } }
}
@media (max-width: 400px) {
  .wink_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.5rem; }
  .wink_face { font-size: 1.65rem; }
  .memory_grid { gap: 0.4rem; }
  .memory_card.face_up { font-size: 0.75rem; }
}
/* Game surrounds match the charcoal and amber workstation theme. */
#album_dialog { background: var(--color_surface); }
#album_dialog::backdrop, #photo_dialog::backdrop { background: #0e110ddb; }
#photo_dialog { background: var(--color_page); }
.number_sequence span { background: linear-gradient(#363b32, #252a24); box-shadow: 0 3px 0 #10120f; }
.wink_grid { background: #1c211b; }
.wink_face { background: linear-gradient(#383d33, #2b3028); border-color: #5b6651; box-shadow: 0 2px 0 #141910; }
.wink_face:hover { background: #46513b; border-color: var(--color_teal); }
.wink_face.wink_found { border-color: var(--color_teal); box-shadow: 0 0 0 2px var(--color_teal); }

/* Slightly larger album-card text for easier reading over the video. */
.album_card h2 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
.album_card p { font-size: 1.1rem; line-height: 1.6; }
.album_card :is(.tag, .empty_note, .challenge_hint) { font-size: 1rem; }
.album_card .album_open_button.shiny-cta { font-size: 1.05rem; }