@media (max-width: 1140px) {
  .game-intro { grid-template-columns: minmax(200px, 1fr) auto; gap: 12px; }
  .action-guide { grid-column: 1 / -1; }
  .action-guide > span { grid-template-columns: 28px auto 1fr; }
  .action-guide .action-icon { grid-row: auto; }
  .action-guide b { align-self: center; }
}

@media (max-width: 767.98px) {
  .game-topbar { flex-basis: 52px; min-height: 52px; padding: 0 9px; }
  .icon-button { width: 42px; height: 42px; }
  .save-state { margin-right: 2px; font-size: 0.58rem; }
  .game-main { gap: 6px; padding: 7px 7px 8px; }

  .game-intro {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 8px;
  }

  .eyebrow { font-size: 0.52rem; }
  .title-block h1 { font-size: clamp(1.7rem, 8vw, 2.25rem); }
  .title-block > p:last-child { max-width: 31ch; margin-top: 2px; font-size: 0.63rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .time-control > span { display: none; }
  .time-control button { min-width: 34px; height: 34px; padding: 0 6px; }

  .action-guide { grid-column: 1 / -1; gap: 4px; }
  .action-guide > span { grid-template-columns: 24px minmax(0, 1fr); column-gap: 5px; padding: 4px 5px; font-size: 0; }
  .action-guide b { font-size: 0.55rem; overflow: hidden; text-overflow: ellipsis; }
  .action-guide .action-icon { width: 24px; height: 24px; grid-row: auto; }
  .action-icon--food::after { inset: 7px; }
  .action-icon--cross::before,
  .action-icon--cross::after { top: 8px; width: 9px; }
  .action-icon--remove::before,
  .action-icon--remove::after { left: 5px; top: 11px; width: 13px; }

  .status-strip { min-height: 40px; flex-basis: 40px; }
  .status-strip > span { min-width: 0; flex: 1; height: 30px; display: grid; gap: 0; justify-content: center; padding: 1px 4px; text-align: center; }
  .status-strip small { font-size: 0.45rem; }
  .status-strip strong { font-size: 0.88rem; line-height: 1; }
  .event-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .aquarium-layout { grid-template-columns: 1fr; }
  .tank { border-radius: 20px; }
  #aquarium-canvas { border-radius: 17px; }

  .species-card {
    position: absolute;
    z-index: 8;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 7px 12px;
    max-height: 220px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(248, 250, 248, 0.94);
    backdrop-filter: blur(12px);
  }

  .species-header { grid-column: 1; grid-template-columns: 43px minmax(0, 1fr); gap: 8px; padding-right: 0; }
  .species-icon { width: 43px; height: 34px; }
  .species-icon--orb { width: 38px; height: 38px; }
  .species-header h2 { font-size: 1.05rem; }
  .species-header p { font-size: 0.48rem; }
  .species-summary { grid-column: 2; padding-right: 24px; }
  .species-summary span { display: grid; gap: 1px; padding: 5px; }
  .trait-tags { grid-column: 1 / -1; }
  .trait-tags span { padding: 4px 6px; }
  .trait-bars { grid-column: 1; gap: 5px; }
  .culture-status { grid-column: 2; margin-top: 0; padding: 7px; }
  .culture-status small { max-height: 2.6em; overflow: hidden; }
  .observation-notice { bottom: 10px; }

  .game-modal { margin: 8px; border-radius: 20px; }
  .start-card .modal-body,
  .game-modal .modal-body { padding: 18px; }
  .start-actions { grid-template-columns: 1fr; gap: 6px; }
  .start-actions li { grid-template-columns: 30px 1fr; gap: 0 8px; padding: 8px 10px; }
  .start-actions li > span { grid-row: 1 / 3; margin: 0; }
  .start-actions small { margin-top: 1px; }
  .help-grid { grid-template-columns: 1fr; gap: 13px; }
  .help-grid__wide,
  .help-note { grid-column: 1; }
}

@media (max-width: 374px) {
  .brand-name { display: none; }
  .save-state { max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .time-control button { min-width: 31px; }
  .species-card { left: 7px; right: 7px; bottom: 7px; }
}

@media (max-height: 690px) and (min-width: 768px) {
  .game-intro { min-height: 56px; }
  .title-block h1 { font-size: 2.1rem; }
  .title-block > p:last-child { display: none; }
  .action-guide > span { padding-block: 4px; }
}