@layer components {
  .back-link {
    display: inline-flex;
    margin-bottom: .55rem;
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
  }

  .back-link:hover { color: var(--deep); }
  .heading-actions { display: flex; gap: .5rem; }
  .progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--line); }
  .progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--sea),var(--aqua)); }
  .status-pill { padding: .35rem .65rem; border-radius: 999px; background: var(--mist); color: var(--ink-soft); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
  .status-published { background: color-mix(in srgb,var(--match) 14%,var(--white)); color: var(--match); }
  .status-review,.status-scheduled { background: color-mix(in srgb,var(--close) 14%,var(--white)); color: var(--close); }
}

@layer pages {
  .today-header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1rem}
  .today-header h1{max-width:780px;margin:.35rem 0 .45rem}
  .today-streak-inline{display:flex;align-items:baseline;gap:.45rem;padding-bottom:.4rem;color:var(--ink-soft);white-space:nowrap}
  .today-streak-inline>span{color:var(--gold);font-size:1.2rem}.today-streak-inline strong{color:var(--deep);font-size:1.35rem;line-height:1}.today-streak-inline small{font-size:.7rem;font-weight:700}

  /* Rules stay available without competing with the puzzle or playfield. */
  .game-help-disclosure{margin:.35rem 0 1rem;color:var(--ink-soft);font-size:.72rem}
  .game-help-disclosure summary{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .4rem;border:0;color:color-mix(in srgb,var(--ink-soft) 72%,transparent);cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink-soft) 38%,transparent);text-underline-offset:3px}
  .game-help-disclosure summary::-webkit-details-marker{display:none}
  .game-help-disclosure summary::before{content:'+';font-size:.85rem;font-weight:800;text-decoration:none}
  .game-help-disclosure[open] summary::before{content:'−'}
  .game-help-disclosure summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
  .today-shell { max-width: 1120px; }
  .today-hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
  .today-hero h1 { max-width: 780px; margin: .35rem 0 .65rem; }
  .today-streak { display: grid; min-width: 130px; place-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-sm); }
  .today-streak > span { color: var(--gold); font-size: 1.5rem; }
  .today-streak strong { color: var(--deep); font-size: 2rem; line-height: 1; }
  .today-streak small { color: var(--ink-soft); font-weight: 700; }
  .daily-progress { display: grid; grid-template-columns: minmax(150px,.5fr) minmax(180px,1.5fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .85rem 1rem; }
  .daily-progress > div:first-child { display: grid; }
  .daily-score { color: var(--deep); font-size: 1.35rem; }
  .daily-score small { color: var(--ink-soft); font-size: .65rem; text-transform: uppercase; }
  .mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
  .mode-card { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-md); transition: transform .2s var(--ease),border-color .2s; }
  .mode-card:hover { transform: translateY(-3px); border-color: var(--aqua); }
  .mode-card.is-complete { border-color: color-mix(in srgb,var(--match) 55%,var(--line)); }
  .mode-art { position: relative; display: grid; min-height: 170px; place-items: center; overflow: hidden; background: #062d46; isolation: isolate; }
  [data-theme=dark] .mode-art { background: linear-gradient(145deg,#173c43,#14505a); }
  .mode-art::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,transparent 52%,rgb(1 13 30 / 28%)); content: ""; pointer-events: none; }
  .mode-art::after { position: absolute; z-index: 2; inset: 0; border: 1px solid rgb(121 226 220 / 13%); content: ""; pointer-events: none; }
  .mode-key-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; transform: scale(1.01); transition: transform .55s var(--ease),filter .35s var(--ease); }
  .mode-card:hover .mode-key-art { filter: saturate(1.08) brightness(1.04); transform: scale(1.045); }
  .tile-mosaic { position: relative; z-index: 1; display: grid; width: 75%; height: 105px; grid-template-columns: repeat(4,1fr); gap: 4px; transform: rotate(-2deg); }
  .tile-mosaic i { border-radius: 4px; background: color-mix(in srgb,var(--deep) 84%,var(--aqua)); }
  .tile-mosaic i:nth-child(2n) { background: color-mix(in srgb,var(--gold) 42%,var(--deep)); }
  .tile-mosaic i:nth-child(3n) { opacity: .35; }
  .clue-bubbles { position: relative; z-index: 1; display: flex; gap: .65rem; align-items: center; }
  .clue-bubbles i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50% 50% 50% 12px; background: var(--deep); color: var(--gold); font-size: 1.5rem; font-style: normal; font-weight: 900; }
  .clue-bubbles i:nth-child(2) { transform: translateY(-18px); }
  .mode-card-body { display: grid; gap: .85rem; padding: 1.15rem; }
  .mode-card-body > p { min-height: 4.7em; color: var(--ink-soft); font-size: .86rem; }
  .mode-card-heading { display: flex; justify-content: space-between; gap: .5rem; }
  .mode-card-heading h2 { margin-top: .25rem; font-size: 1.35rem; }
  .completion-seal { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--match); color: white; font-weight: 900; }
  .mode-result { display: flex; align-items: baseline; gap: .3rem; color: var(--deep); }
  .mode-result strong { font-size: 1.5rem; }
  .mode-result span { color: var(--ink-soft); font-size: .7rem; text-transform: uppercase; }
  .today-lower-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; margin-top: 1rem; }
  .weekly-card,.share-combined { min-height: 145px; padding: 1.1rem; }
  .weekly-card { display: grid; align-content: space-between; }
  .weekly-card h2,.share-combined h2 { margin-top: .25rem; font-size: 1.2rem; }
  .week-dots { display: grid; grid-template-columns: repeat(7,1fr); gap: .4rem; }
  .week-dots span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
  .week-dots span.done { border-color: var(--match); background: var(--match); color: white; }
  .share-combined { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }
  .share-combined p { color: var(--ink-soft); font-size: .82rem; }
  .share-combined .share-feedback { grid-column: 1/-1; }
  .share-combined.is-locked { opacity: .75; }
  .save-progress-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 1rem 1.2rem; border-color: color-mix(in srgb,var(--gold) 50%,var(--line)); }
  .save-progress-prompt p { color: var(--ink-soft); font-size: .8rem; }

  .compact-heading { margin-bottom: 1.2rem; }
  .engagement-game-shell { max-width: 940px; }
  .mode-game-card { overflow: visible; padding: clamp(.75rem,2vw,1.25rem); border-radius: 30px; }
  .photo-reveal-stage { position: relative; display: grid; min-height: 430px; place-items: center; overflow: hidden; border-radius: 22px; background: #0a3741; }
  .photo-reveal-stage img { width: 100%; height: min(56vw,520px); object-fit: contain; background: #0a3741; }
  .photo-stage-badge { position: absolute; right: .8rem; bottom: .8rem; padding: .4rem .7rem; border-radius: 999px; background: #062c35d9; color: #fff; font-size: .72rem; font-weight: 800; backdrop-filter: blur(8px); }
  .facts-stage { min-height: 360px; padding: clamp(1rem,4vw,2.5rem); border-radius: 22px; background: radial-gradient(circle at 90% 0,color-mix(in srgb,var(--aqua) 22%,transparent),transparent 18rem),linear-gradient(145deg,var(--foam),var(--mist)); }
  .facts-stage-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
  .facts-stage-head > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; background: var(--deep); color: var(--gold); font-size: 1.4rem; }
  .fact-clue-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
  .fact-clue-list li { display: grid; grid-template-columns: 38px 1fr; align-items: start; gap: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--white) 88%,transparent); }
  .fact-clue-list li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--deep); color: white; font-weight: 900; }
  .fact-clue-list li small { grid-column: 2; color: var(--ink-soft); }
  .mode-game-meta { display: grid; grid-template-columns: repeat(3,1fr); margin: .8rem 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
  .mode-game-meta > div { display: grid; gap: .1rem; padding: .65rem .8rem; }
  .mode-game-meta > div + div { border-left: 1px solid var(--line); }
  .mode-game-meta span { color: var(--ink-soft); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
  .mode-actions { display: flex; gap: .65rem; margin-top: .8rem; }
  .mode-actions small { opacity: .75; }
  .simple-history { margin-top: 1rem; overflow: hidden; }
  .simple-history summary { display: flex; justify-content: space-between; padding: 1rem; cursor: pointer; }
  .simple-history ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
  .simple-history li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .65rem; padding: .65rem 1rem; background: var(--white); }
  .simple-history li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--foam); color: var(--deep); font-size: .72rem; font-weight: 850; }
  .simple-history li small { color: var(--ink-soft); font-style: italic; }
  .score-hero { display: grid; margin: 1rem auto; }
  .score-hero strong { color: var(--deep); font-size: 3rem; line-height: 1; }
  .score-hero span { color: var(--ink-soft); font-size: .7rem; text-transform: uppercase; }
  .fishdex-unlock { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; margin: 1rem 0; padding: .8rem; border: 1px solid color-mix(in srgb,var(--gold) 55%,var(--line)); border-radius: 15px; background: color-mix(in srgb,var(--gold) 8%,var(--white)); text-align: left; }
  .fishdex-unlock > div { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--deep); color: var(--gold); font-size: 1.3rem; }
  .fishdex-unlock p { display: grid; }
  .fishdex-unlock p span { color: var(--ink-soft); font-size: .74rem; }

  .tutorial-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; margin: -1rem 0 1rem; padding: .8rem 1rem; border-color: color-mix(in srgb,var(--aqua) 45%,var(--line)); }
  .tutorial-example { display: flex; }
  .tutorial-example i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: white; font-style: normal; font-weight: 850; }
  .tutorial-example .exact { background: var(--match); }
  .tutorial-example .close { margin-left: -.25rem; background: var(--close); }
  .tutorial-example .different { margin-left: -.25rem; background: var(--wrong); }
  .tutorial-card p { color: var(--ink-soft); font-size: .76rem; }
  .settings-list { display: grid; gap: .6rem; margin: 1rem 0; }
  .settings-list label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
  .settings-list label > span { display: grid; }
  .settings-list small { color: var(--ink-soft); }
  .settings-list input { width: 22px; height: 22px; accent-color: var(--sea); }
  .trait-cell details { margin-top: .25rem; }
  .trait-cell details summary { cursor: pointer; font-size: .62rem; font-weight: 850; text-decoration: underline; }
  .trait-cell details p { margin-top: .25rem; color: inherit; font-size: .62rem; line-height: 1.35; }
  .closeness-summary { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
  .closeness-summary span { padding: .25rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 800; }
  .closeness-summary .exact { background: color-mix(in srgb,var(--match) 16%,var(--white)); color: var(--match); }
  .closeness-summary .close { background: color-mix(in srgb,var(--close) 16%,var(--white)); color: var(--close); }
  .closeness-summary .different { background: color-mix(in srgb,var(--wrong) 14%,var(--white)); color: var(--wrong); }
  .hide-scientific .scientific-name { display: none !important; }

  .archive-mode-grid { grid-template-columns: 1fr; }
  .archive-day { grid-template-columns: 74px 1fr; align-items: stretch; }
  .archive-day:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
  .archive-day-body { min-width: 0; }
  .archive-mode-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin-top: .6rem; }
  .archive-mode-links a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .05rem .5rem; padding: .55rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
  .archive-mode-links a:hover { border-color: var(--aqua); background: var(--foam); }
  .archive-mode-links a > span { grid-row: 1/3; color: var(--sea); font-size: 1.2rem; }
  .archive-mode-links small { color: var(--ink-soft); font-size: .65rem; }
  .archive-mode-links .is-complete { border-color: color-mix(in srgb,var(--match) 40%,var(--line)); }

  .fishdex-heading { align-items: center; }
  .fishdex-progress-ring { display: grid; width: 120px; height: 120px; flex: 0 0 auto; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle,var(--white) 57%,transparent 59%),conic-gradient(var(--aqua) calc(var(--progress)*1%),var(--line) 0); box-shadow: var(--shadow-sm); }
  .fishdex-progress-ring strong { color: var(--deep); font-size: 1.6rem; }
  .fishdex-progress-ring span { color: var(--ink-soft); font-size: .65rem; text-transform: uppercase; }
  .fishdex-summary { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 1.5rem; margin-bottom: .8rem; padding: .8rem 1rem; }
  .fishdex-summary > div:not(.progress-track) { display: grid; }
  .fishdex-summary strong { color: var(--deep); font-size: 1.35rem; }
  .fishdex-summary span { color: var(--ink-soft); font-size: .7rem; }
  .fishdex-filters { display: grid; grid-template-columns: 1.35fr repeat(4,minmax(100px,.75fr)) minmax(135px,1.1fr) auto auto; gap: .5rem; margin-bottom: 1rem; padding: .75rem; }
  .fishdex-filters input,.fishdex-filters select { min-width: 0; height: 44px; padding: 0 .65rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
  .view-switch { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
  .view-switch a { display: grid; min-width: 40px; place-items: center; text-decoration: none; }
  .view-switch a.active { background: var(--foam); color: var(--deep); }
  .fishdex-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
  .fishdex-card { overflow: hidden; }
  .fishdex-card-media { position: relative; min-height: 190px; background: var(--foam); }
  .fishdex-card-media > img { width: 100%; height: 210px; object-fit: cover; }
  .fishdex-card-media > img.is-original-art { background: #073b48; object-fit: contain; }
  .fishdex-card-media > img.is-silhouette { padding: 1rem; object-fit: contain; filter: brightness(.15); }
  .mode-pills { position: absolute; left: .6rem; bottom: .6rem; display: flex; gap: .25rem; }
  .mode-pills i { padding: .22rem .4rem; border-radius: 999px; background: #062c35db; color: white; font-size: .58rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
  .fishdex-card-body { display: grid; gap: .8rem; padding: 1rem; }
  .fishdex-card-body h2 { margin: .15rem 0; font-size: 1.35rem; }
  .fishdex-card-body > p { color: var(--ink-soft); font-size: .8rem; }
  .fishdex-card-body dl { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; }
  .fishdex-card-body dl > div { min-width: 0; padding: .45rem; border-radius: 8px; background: var(--mist); }
  .fishdex-card-body dt { color: var(--ink-soft); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
  .fishdex-card-body dd { overflow: hidden; font-size: .7rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  .fishdex-card-actions { display: flex; justify-content: flex-end; gap: .4rem; }
  .fishdex-credit { color: var(--ink-soft); font-size: .62rem; }
  .fishdex-grid.is-list { grid-template-columns: 1fr; }
  .fishdex-grid.is-list .fishdex-card { display: grid; grid-template-columns: 280px 1fr; }
  .locked-collection { display: grid; grid-template-columns: repeat(8,1fr); gap: .6rem; margin-top: 1rem; }
  .locked-fish { display: grid; aspect-ratio: 1; place-items: center; border: 1px dashed var(--line); border-radius: 16px; background: color-mix(in srgb,var(--white) 65%,transparent); color: var(--ink-soft); font-size: 1.4rem; }

  .admin-create { margin-bottom: 1rem; padding: 1rem; }
  .admin-create form { display: grid; grid-template-columns: 1fr 1fr 2fr .7fr 1fr; gap: .6rem; margin-top: 1rem; }
  .admin-create label,.admin-edit-form label { display: grid; gap: .25rem; color: var(--ink-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
  .admin-create input,.admin-create select,.admin-create textarea,.admin-edit-form input,.admin-edit-form select,.admin-edit-form textarea,.admin-clue-list input,.admin-clue-list select,.admin-clue-list textarea { width: 100%; min-height: 42px; padding: .55rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); }
  .admin-notes { grid-column: 1/-2; }
  .admin-schedule { display: grid; gap: 1rem; }
  .admin-puzzle-card { padding: 1rem; }
  .admin-puzzle-card > header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
  .admin-puzzle-card h2 { margin: .2rem 0; }
  .admin-photo-preview { overflow: hidden; border-radius: 14px; background: #0a3741; }
  .admin-photo-preview img { width: 100%; max-height: 360px; object-fit: contain; }
  .admin-photo-preview figcaption { padding: .45rem .65rem; color: #d8eeee; font-size: .68rem; }
  .admin-clue-list { display: grid; gap: .5rem; padding-left: 1.2rem; }
  .admin-clue-list form { display: grid; grid-template-columns: 60px 1fr 110px auto; gap: .4rem; }
  .admin-clue-list .has-warning { color: var(--coral); }
  .admin-clue-list small { color: var(--ink-soft); }
  .admin-silhouette-preview { display: grid; min-height: 100px; place-items: center; border-radius: 14px; background: var(--mist); color: var(--ink-soft); }
  .readiness-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .4rem; margin: .8rem 0; }
  .readiness-grid > div { padding: .55rem; border-radius: 9px; background: var(--mist); }
  .readiness-grid dt { color: var(--ink-soft); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
  .readiness-grid dd { font-size: .75rem; font-weight: 750; }
  .admin-edit-form { display: grid; grid-template-columns: 2fr .6fr 1fr 2fr auto; align-items: end; gap: .5rem; }
}

@layer responsive {
  @media (max-width: 980px) {
    .mode-grid { grid-template-columns: 1fr; }
    .mode-card { grid-template-columns: 230px 1fr; }
    .mode-art { min-height: 100%; }
    .mode-card-body > p { min-height: auto; }
    .fishdex-filters { grid-template-columns: repeat(3,1fr); }
    .fishdex-search { grid-column: span 2; }
    .fishdex-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-create form,.admin-edit-form { grid-template-columns: repeat(2,1fr); }
    .admin-notes { grid-column: 1/-1; }
    .readiness-grid { grid-template-columns: repeat(3,1fr); }
  }

  @media (max-width: 640px) {
    .mobile-nav { grid-template-columns: repeat(4,1fr); padding-inline: .35rem; }
    .today-header { align-items: flex-start; flex-direction: column; gap: .35rem; margin-bottom: .75rem; }
    .today-header h1 { font-size: 2.4rem; }
    .today-streak-inline { padding: 0; }
    .today-hero { align-items: flex-start; }
    .today-streak { min-width: 90px; padding: .7rem; }
    .today-streak strong { font-size: 1.5rem; }
    .daily-progress { grid-template-columns: 1fr auto; }
    .daily-progress .progress-track { grid-column: 1/-1; grid-row: 2; }
    .mode-card { grid-template-columns: 1fr; border-radius: 22px; }
    .mode-art { min-height: 128px; }
    .mode-card-body { padding: .9rem; }
    .today-lower-grid { grid-template-columns: 1fr; }
    .share-combined { grid-template-columns: 1fr; }
    .save-progress-prompt { align-items: stretch; flex-direction: column; }
    .heading-actions { display: none; }
    .photo-reveal-stage { min-height: 260px; }
    .photo-reveal-stage img { height: 65vw; min-height: 240px; }
    .facts-stage { min-height: 200px; padding: .8rem; }
    .fact-clue-list li { grid-template-columns: 32px 1fr; padding: .65rem; }
    .mode-game-meta > div { padding: .55rem .4rem; }
    .mode-actions { display: grid; grid-template-columns: 1fr; }
    .simple-history li { grid-template-columns: 30px 1fr; }
    .simple-history li small { grid-column: 2; }
    .fishdex-unlock { grid-template-columns: auto 1fr; }
    .fishdex-unlock .button { grid-column: 1/-1; }
    .tutorial-card { grid-template-columns: auto 1fr auto; margin-top: 0; }
    .tutorial-example { display: none; }
    .archive-day { grid-template-columns: 56px 1fr; }
    .archive-mode-links { grid-template-columns: 1fr; }
    .fishdex-progress-ring { width: 88px; height: 88px; }
    .fishdex-progress-ring strong { font-size: 1.2rem; }
    .fishdex-summary { grid-template-columns: auto auto; }
    .fishdex-summary .progress-track { grid-column: 1/-1; }
    .fishdex-filters { grid-template-columns: 1fr 1fr; }
    .fishdex-search { grid-column: 1/-1; }
    .fishdex-grid { grid-template-columns: 1fr; }
    .fishdex-grid.is-list .fishdex-card { grid-template-columns: 110px 1fr; }
    .fishdex-grid.is-list .fishdex-card-media { min-height: 100%; }
    .fishdex-grid.is-list .fishdex-card-media > img { height: 100%; }
    .fishdex-grid.is-list .fishdex-card-body dl { grid-template-columns: 1fr; }
    .locked-collection { grid-template-columns: repeat(4,1fr); }
    .admin-create form,.admin-edit-form { grid-template-columns: 1fr; }
    .readiness-grid { grid-template-columns: repeat(2,1fr); }
    .admin-clue-list form { grid-template-columns: 45px 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mode-card { transform: none !important; }
  }
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}