@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap');

:root {
    --c-bg: #0e1726;
    --c-panel: #182236;
    --c-surface: #22314a;
    --c-border: #2a3852;
    --c-text: #cdd7e6;
    --c-muted: #93a4ba;
    --c-theme-accent: #4fa3c7;
    --c-aquarium-top: #24577a;
    --c-aquarium-bottom: #0b2338;
    --c-aquarium-detail: #4fa3c7;
    --c-energy: #6bbf7a;
    --c-water: #4fa3c7;
    --c-temp: #e0954a;
    --c-oxygen: #7fb0d6;
    --c-money: #d4b15a;
    --c-warn: #d76a64;
}

body[data-theme="deep-sea"] {
    --c-bg: #0e1726;
    --c-panel: #182236;
    --c-surface: #22314a;
    --c-border: #2a3852;
    --c-text: #cdd7e6;
    --c-muted: #93a4ba;
    --c-theme-accent: #4fa3c7;
    --c-aquarium-top: #24577a;
    --c-aquarium-bottom: #0b2338;
    --c-aquarium-detail: #4fa3c7;
}

body[data-theme="soda"] {
    --c-bg: #dff7ff;
    --c-panel: #f8fdff;
    --c-surface: #c7eff8;
    --c-border: #8bcbd8;
    --c-text: #244654;
    --c-muted: #5d7d88;
    --c-theme-accent: #54c7dd;
    --c-aquarium-top: #bcefff;
    --c-aquarium-bottom: #65c9e5;
    --c-aquarium-detail: #ffffff;
}

body[data-theme="yumekawa"] {
    --c-bg: #f6eaff;
    --c-panel: #fff8ff;
    --c-surface: #e9dcff;
    --c-border: #d2bde7;
    --c-text: #55445f;
    --c-muted: #816f89;
    --c-theme-accent: #e49acb;
    --c-aquarium-top: #efc9ff;
    --c-aquarium-bottom: #9dcfff;
    --c-aquarium-detail: #ffd1e8;
}

body[data-theme="coral"] {
    --c-bg: #fff1e3;
    --c-panel: #fffaf4;
    --c-surface: #ffd9c9;
    --c-border: #e8b7a5;
    --c-text: #5b4038;
    --c-muted: #86675c;
    --c-theme-accent: #e98272;
    --c-aquarium-top: #ffd7ba;
    --c-aquarium-bottom: #ef8f82;
    --c-aquarium-detail: #fff4cf;
}

body[data-theme="forest"] {
    --c-bg: #dfe9dc;
    --c-panel: #f7f4e8;
    --c-surface: #cedcc5;
    --c-border: #9fb296;
    --c-text: #30483a;
    --c-muted: #65786b;
    --c-theme-accent: #6f9b78;
    --c-aquarium-top: #a9c9aa;
    --c-aquarium-bottom: #496f5a;
    --c-aquarium-detail: #e6d8a8;
}

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.aquarium-view {
    isolation: isolate;
    z-index: 0;
}

.text-c-energy { color: var(--c-energy); }
.text-c-water { color: var(--c-water); }
.text-c-temp { color: var(--c-temp); }
.text-c-oxygen { color: var(--c-oxygen); }
.text-c-money { color: var(--c-money); }
.text-c-warn { color: var(--c-warn); }
.text-c-text { color: var(--c-text); }
.text-c-muted { color: var(--c-muted); }
.text-c-theme-accent { color: var(--c-theme-accent); }
.text-c-bg { color: var(--c-bg); }
.bg-c-bg { background-color: var(--c-bg); }
.bg-c-panel { background-color: var(--c-panel); }
.bg-c-surface { background-color: var(--c-surface); }
.bg-c-energy { background-color: var(--c-energy); }
.bg-c-water { background-color: var(--c-water); }
.bg-c-temp { background-color: var(--c-temp); }
.bg-c-oxygen { background-color: var(--c-oxygen); }
.bg-c-money { background-color: var(--c-money); }
.bg-c-warn { background-color: var(--c-warn); }
.border-c-border { border-color: var(--c-border); }
.border-c-energy { border-color: var(--c-energy); }
.border-c-water { border-color: var(--c-water); }
.border-c-temp { border-color: var(--c-temp); }
.border-c-oxygen { border-color: var(--c-oxygen); }
.border-c-money { border-color: var(--c-money); }
.border-c-warn { border-color: var(--c-warn); }

/* Tailwindの固定された暗色を、明るいテーマでも読めるテーマ色へ寄せる。 */
body[data-theme] .text-slate-200,
body[data-theme] .text-slate-300,
body[data-theme] .text-slate-400,
body[data-theme] .text-slate-500 {
    color: var(--c-muted);
}
body[data-theme] .bg-slate-700,
body[data-theme] .bg-slate-800,
body[data-theme] .bg-slate-900 {
    background-color: var(--c-surface);
}
body[data-theme] .border-slate-900 {
    border-color: var(--c-border);
}
body[data-theme] .hover\:bg-slate-700:hover,
body[data-theme] .hover\:bg-slate-800:hover {
    background-color: color-mix(in srgb, var(--c-text) 8%, var(--c-panel));
}
body[data-theme] .hover\:text-slate-300:hover {
    color: var(--c-text);
}

/* スムーズスクロール */
.log-container {
    scroll-behavior: smooth;
}
#action-buttons-group .control-btn {
    display: none;
}
.action-btn,
.control-btn,
.shop-btn,
.panel-tab {
    min-width: 0;
}
.panel-tab {
    border: 1px solid var(--c-border);
    background: var(--c-panel);
    color: var(--c-muted);
}
.panel-tab.is-active {
    border-color: var(--c-water);
    background: color-mix(in srgb, var(--c-water) 16%, var(--c-panel));
    color: var(--c-text);
}
.action-btn {
    background: var(--c-panel);
    border-color: var(--c-border);
    color: var(--c-text);
}
.action-btn:hover {
    background: color-mix(in srgb, var(--c-text) 6%, var(--c-panel));
}
.action-energy {
    background: color-mix(in srgb, var(--c-energy) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-energy) 55%, transparent);
}
.action-energy:hover {
    background: color-mix(in srgb, var(--c-energy) 24%, var(--c-panel));
}
/* 元気列（エサ／高級エサ）は黄色寄りで統一して 高級エサとの視認性を揃える */
.action-money {
    background: color-mix(in srgb, var(--c-money) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-money) 55%, transparent);
}
.action-money:hover {
    background: color-mix(in srgb, var(--c-money) 24%, var(--c-panel));
}
.action-water {
    background: color-mix(in srgb, var(--c-water) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-water) 55%, transparent);
}
.action-water:hover {
    background: color-mix(in srgb, var(--c-water) 24%, var(--c-panel));
}
.action-oxygen {
    background: color-mix(in srgb, var(--c-oxygen) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-oxygen) 55%, transparent);
}
.action-oxygen:hover {
    background: color-mix(in srgb, var(--c-oxygen) 24%, var(--c-panel));
}
.action-temperature {
    background: color-mix(in srgb, var(--c-temp) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-temp) 55%, transparent);
}
.action-temperature:hover {
    background: color-mix(in srgb, var(--c-temp) 24%, var(--c-panel));
}
.action-medicine {
    background: color-mix(in srgb, var(--c-warn) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-warn) 55%, transparent);
}
.action-medicine:hover {
    background: color-mix(in srgb, var(--c-warn) 24%, var(--c-panel));
}
/* 薬は4列目下段だが酸素列とは無関係（緊急枠）。左に細い区切りを入れて隣と分離する。 */
.action-emergency-divider {
    position: relative;
}
.action-emergency-divider::before {
    content: "";
    position: absolute;
    left: -0.3rem;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: color-mix(in srgb, var(--c-border) 70%, transparent);
    pointer-events: none;
}
.action-filter {
    background: color-mix(in srgb, var(--c-water) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-water) 55%, transparent);
}
.action-filter:hover {
    background: color-mix(in srgb, var(--c-water) 24%, var(--c-panel));
}
.action-plant {
    background: color-mix(in srgb, var(--c-energy) 14%, var(--c-panel));
    border-color: color-mix(in srgb, var(--c-energy) 55%, transparent);
}
.action-plant:hover {
    background: color-mix(in srgb, var(--c-energy) 24%, var(--c-panel));
}
.aquarium-status-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    padding: 0.28rem 0.5rem;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 900;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.aquarium-size-pill {
    background: color-mix(in srgb, var(--c-panel) 90%, transparent);
    border: 1px solid var(--c-border);
    color: var(--c-text);
}
#aquarium-presence-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    max-width: calc(100% - 1rem);
}
.aquarium-presence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 9999px;
    border: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-panel) 84%, transparent);
    font-size: 0.95rem;
    line-height: 1;
    backdrop-filter: blur(8px);
}
.aquarium-presence-icon.is-plant {
    border-color: color-mix(in srgb, var(--c-energy) 45%, var(--c-border));
}
.aquarium-presence-icon.is-snail {
    border-color: color-mix(in srgb, var(--c-water) 45%, var(--c-border));
}
#aquarium-crop-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    max-width: min(11rem, calc(100% - 1rem));
}
.aquarium-crop-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--c-energy) 28%, var(--c-border));
    background: color-mix(in srgb, var(--c-panel) 84%, transparent);
    color: color-mix(in srgb, var(--c-energy) 85%, var(--c-text));
    padding: 0.24rem 0.46rem;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    backdrop-filter: blur(8px);
}
.aquarium-crop-badge.is-moss {
    border-color: color-mix(in srgb, var(--c-water) 30%, var(--c-border));
    color: color-mix(in srgb, var(--c-water) 85%, var(--c-text));
}
.action-btn span,
.control-btn span {
    overflow-wrap: anywhere;
}
#settings-menu {
    z-index: 40;
}
.modal-card.theme-modal-card {
    width: min(42rem, 100%);
    max-height: min(86vh, 44rem);
    overflow-y: auto;
}
.theme-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.theme-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 0.85rem;
    background: var(--c-panel);
    color: var(--c-text);
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.theme-card:hover {
    border-color: var(--c-theme-accent);
    background: color-mix(in srgb, var(--c-theme-accent) 10%, var(--c-panel));
}
.theme-card:active {
    transform: scale(0.985);
}
.theme-card.is-selected {
    border-color: var(--c-theme-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-theme-accent) 28%, transparent);
}
.theme-card__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.theme-card__heading strong {
    font-size: 0.82rem;
    font-weight: 900;
}
.theme-card__check {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--c-theme-accent);
    font-size: 0.62rem;
    font-weight: 900;
}
.theme-card__check[hidden] {
    display: none;
}
.theme-card__check svg {
    width: 0.85rem;
    height: 0.85rem;
}
.theme-card__description {
    color: var(--c-muted);
    font-size: 0.7rem;
    line-height: 1.5;
}
.theme-card__swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 2.3rem;
    overflow: hidden;
    border: 1px solid var(--c-border);
    border-radius: 0.55rem;
}
.theme-card__swatch {
    min-width: 0;
}
.screen-panel.faq-screen-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.faq-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-right: 2.25rem;
}
.faq-heading h3 {
    color: var(--c-text);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}
.faq-heading p {
    margin-top: 0.15rem;
}
.faq-bot-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--c-theme-accent) 55%, var(--c-border));
    border-radius: 9999px;
    background: color-mix(in srgb, var(--c-theme-accent) 14%, var(--c-bg));
    color: var(--c-theme-accent);
}
.faq-bot-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}
.faq-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
}
.faq-panel[hidden] {
    display: none;
}
.faq-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
.faq-top-category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq-top-category-button {
    min-height: 3.6rem;
}
.faq-home-more {
    grid-template-columns: 1fr;
}
.faq-search-dock {
    position: fixed;
    right: 0;
    bottom: calc(3.6rem + max(0.25rem, env(safe-area-inset-bottom)) - 0.45rem);
    left: 0;
    z-index: 44;
    padding: 0.5rem max(0.8rem, env(safe-area-inset-right)) 0.5rem max(0.8rem, env(safe-area-inset-left));
    background: var(--c-bg);
}
.faq-search-form,
.faq-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 0.85rem;
    background: var(--c-bg);
}
.faq-search-form--dock {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.faq-search-form--dock label {
    font-size: 0.68rem;
}
.faq-search-form label,
.faq-search-results h4 {
    color: var(--c-text);
    font-size: 0.78rem;
    font-weight: 900;
}
.faq-search-form > p {
    color: var(--c-muted);
    font-size: 0.68rem;
}
.faq-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}
.faq-search-form--dock .faq-search-row {
    grid-template-columns: minmax(0, 1fr) 2.4rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.3rem 0.28rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--c-theme-accent) 45%, var(--c-border));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--c-panel) 92%, transparent);
}
.faq-search-row input {
    min-width: 0;
    min-height: 2.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 0.7rem;
    background: var(--c-panel);
    color: var(--c-text);
    font-size: 0.74rem;
}
.faq-search-form--dock .faq-search-row input {
    min-height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.faq-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 5rem;
}
.faq-search-submit svg {
    width: 0.95rem;
    height: 0.95rem;
}
.faq-chat-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--c-theme-accent) 82%, white);
    color: #ffffff;
    line-height: 1;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.faq-chat-submit svg {
    width: 1.05rem;
    height: 1.05rem;
}
.faq-chat-submit:active {
    transform: scale(0.94);
}
.faq-entry-button,
.faq-chapter-button,
.faq-detail-link-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 0.8rem;
    background: var(--c-panel);
    color: var(--c-text);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
}
.faq-entry-button {
    min-height: 4.4rem;
    border-color: color-mix(in srgb, var(--c-water) 45%, var(--c-border));
    background: color-mix(in srgb, var(--c-water) 10%, var(--c-panel));
}
.faq-entry-button:hover,
.faq-chapter-button:hover,
.faq-detail-link-button:hover {
    border-color: var(--c-water);
    background: color-mix(in srgb, var(--c-water) 16%, var(--c-panel));
}
.faq-entry-button svg,
.faq-chapter-button svg,
.faq-detail-link-button svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--c-water);
}
.faq-bot-message,
.faq-answer-wrap {
    align-self: flex-start;
    width: min(92%, 29rem);
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 0.25rem 0.85rem 0.85rem 0.85rem;
    background: color-mix(in srgb, white 90%, var(--c-panel));
    color: #2b3442;
    font-size: 0.72rem;
    line-height: 1.65;
}
.faq-answer-wrap .faq-answer-text p {
    color: #2b3442;
}
.faq-question-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.faq-question-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 3.25rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    background: var(--c-panel);
    color: var(--c-text);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.45;
    text-align: left;
}
.faq-question-button:hover {
    border-color: var(--c-water);
    background: color-mix(in srgb, var(--c-water) 12%, var(--c-panel));
}
.faq-question-button svg {
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--c-water);
}
.faq-question-button span,
.faq-entry-button span,
.faq-control-button span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.faq-user-message {
    align-self: flex-end;
    width: min(88%, 27rem);
    padding: 0.65rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--c-theme-accent) 55%, var(--c-border));
    border-radius: 0.85rem 0.25rem 0.85rem 0.85rem;
    background: color-mix(in srgb, var(--c-theme-accent) 16%, var(--c-panel));
    color: var(--c-text);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.5;
}
.faq-bot-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
    color: color-mix(in srgb, var(--c-theme-accent) 72%, #2b3442);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}
.faq-bot-label svg {
    width: 0.9rem;
    height: 0.9rem;
}
.faq-answer-text {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.faq-answer-text p {
    color: var(--c-text);
    font-size: 0.72rem;
    line-height: 1.7;
}
.faq-answer-text strong {
    color: var(--c-theme-accent);
    font-weight: 900;
}
.faq-answer-wrap .faq-answer-text strong {
    color: color-mix(in srgb, var(--c-theme-accent) 78%, #2b3442);
}
.faq-conversation,
.faq-exchange {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-conversation {
    gap: 1rem;
}
.faq-exchange + .faq-exchange {
    padding-top: 0.25rem;
    border-top: 1px dashed var(--c-border);
}
.faq-related {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: 0.15rem;
}
.faq-related h4,
.faq-logic-article h4,
.faq-chapter-notice h4 {
    color: var(--c-text);
    font-size: 0.78rem;
    font-weight: 900;
}
.faq-related h4::before {
    content: "💬 ";
}
.faq-chapter-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faq-chapter-button {
    min-height: 2.9rem;
}
.faq-detail-link-button {
    margin-top: 0.15rem;
    border-color: color-mix(in srgb, var(--c-money) 45%, var(--c-border));
    background: color-mix(in srgb, var(--c-money) 8%, var(--c-panel));
}
.faq-logic-article {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: 0.85rem;
    background: var(--c-bg);
}
.faq-detail-eyebrow {
    color: var(--c-water);
    font-size: 0.62rem;
    font-weight: 900;
}
.faq-detail-lead {
    color: var(--c-muted);
    font-size: 0.68rem;
    line-height: 1.6;
}
.faq-detail-content {
    gap: 0.75rem;
}
.faq-detail-heading {
    margin-top: 0.2rem;
    color: var(--c-text);
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1.5;
}
.faq-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 1.35rem;
    color: var(--c-text);
    font-size: 0.7rem;
    line-height: 1.6;
}
.faq-detail-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: 0.7rem;
    background: var(--c-panel);
    overscroll-behavior-inline: contain;
}
.faq-detail-table-wrap:focus-visible {
    outline: 2px solid var(--c-water);
    outline-offset: 2px;
}
.faq-detail-table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    color: var(--c-text);
    font-size: 0.68rem;
    line-height: 1.5;
}
.faq-detail-table caption {
    padding: 0.55rem 0.65rem;
    color: var(--c-water);
    font-weight: 900;
    text-align: left;
}
.faq-detail-table th,
.faq-detail-table td {
    padding: 0.55rem 0.65rem;
    border-top: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    text-align: left;
    vertical-align: top;
    white-space: normal;
}
.faq-detail-table th:last-child,
.faq-detail-table td:last-child {
    border-right: 0;
}
.faq-detail-table th {
    background: color-mix(in srgb, var(--c-water) 10%, var(--c-panel));
    font-weight: 900;
}
.faq-detail-formula {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--c-money) 40%, var(--c-border));
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--c-money) 7%, var(--c-panel));
    color: var(--c-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.67rem;
    line-height: 1.65;
    white-space: pre-wrap;
}
.faq-detail-example {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem;
    border-left: 3px solid var(--c-water);
    border-radius: 0.25rem 0.7rem 0.7rem 0.25rem;
    background: color-mix(in srgb, var(--c-water) 8%, var(--c-panel));
    color: var(--c-text);
    font-size: 0.68rem;
    line-height: 1.6;
}
.faq-detail-example strong {
    color: var(--c-water);
}
.faq-detail-example p {
    color: var(--c-text);
}
.faq-detail-note {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--c-warn) 50%, var(--c-border));
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--c-warn) 8%, var(--c-panel));
    color: var(--c-text);
    font-size: 0.68rem;
    line-height: 1.6;
}
.faq-detail-note > strong {
    color: var(--c-warn);
}
.faq-detail-note ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.1rem;
}
.faq-chapter-notice {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faq-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.faq-chapter-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
}
.faq-control-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 2.6rem;
    font-size: 0.66rem;
}
.faq-control-button svg {
    width: 0.9rem;
    height: 0.9rem;
}
.faq-entry-button:focus-visible,
.faq-question-button:focus-visible,
.faq-chapter-button:focus-visible,
.faq-detail-link-button:focus-visible,
.faq-control-button:focus-visible,
.faq-search-row input:focus-visible,
.faq-search-submit:focus-visible,
.faq-chat-submit:focus-visible,
.faq-search-results:focus-visible,
.faq-answer-wrap:focus-visible,
.faq-logic-article:focus-visible {
    outline: 2px solid var(--c-water);
    outline-offset: 2px;
}
.faq-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
}
.faq-back-button svg {
    width: 0.95rem;
    height: 0.95rem;
}
#event-text,
#log-list,
#gameover-reason,
.panel-tab,
.shop-btn {
    overflow-wrap: anywhere;
}
#new-water-card,
#new-fish-card,
#event-banner,
#action-buttons-group,
#shop-buttons-group,
#control-buttons-group,
#log-list {
    min-width: 0;
}

.owner-time-display {
    margin-top: -0.25rem;
    padding: 0 0.25rem;
    color: var(--c-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: right;
}

.fish-detail-hall-of-fame {
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 0.75rem;
    background: rgba(251, 191, 36, 0.1);
    padding: 0.55rem 0.75rem;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
}

.long-term-celebration-icon {
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
}
#new-water-card > .grid,
#new-fish-card > .grid {
    grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
}
#gameover-modal {
    overflow-y: auto;
}
.result-modal-card {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.result-modal-card > * {
    flex-shrink: 0;
}
.screen.is-hidden {
    display: none;
}
#screen-faq {
    padding-bottom: 3.75rem;
}
.screen-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    background: var(--c-panel);
}
.screen-header h2 {
    color: var(--c-text);
    font-size: 1.1rem;
    font-weight: 900;
}
.screen-header p,
.screen-section-title p {
    color: var(--c-muted);
    font-size: 0.68rem;
}
.screen-back-button {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    background: var(--c-bg);
    color: var(--c-text);
}
.screen-back-button svg {
    width: 1.1rem;
    height: 1.1rem;
}
.screen-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    background: var(--c-panel);
}
.screen-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--c-text);
}
.screen-section-title > svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--c-water);
}
.screen-section-title h3 {
    font-size: 0.82rem;
    font-weight: 900;
}
#bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 3.6rem;
    padding: 0.25rem max(0.4rem, env(safe-area-inset-right)) max(0.25rem, env(safe-area-inset-bottom)) max(0.4rem, env(safe-area-inset-left));
    border-top: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-panel) 96%, transparent);
    backdrop-filter: blur(12px);
}
#bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 0;
    border-radius: 0.65rem;
    color: var(--c-muted);
    font-size: 0.65rem;
    font-weight: 900;
}
#bottom-nav button svg {
    width: 1rem;
    height: 1rem;
}
#bottom-nav button[aria-current="page"] {
    background: color-mix(in srgb, var(--c-water) 16%, var(--c-panel));
    color: var(--c-water);
}
.fish-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.7rem;
}
.fish-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 0.9rem;
    background: var(--c-bg);
    color: var(--c-text);
}
.fish-card__summary {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}
.fish-card__icon,
.fish-detail-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--fish-color, var(--c-water)) 55%, var(--c-border));
    border-radius: 9999px;
    background: color-mix(in srgb, var(--fish-color, var(--c-water)) 15%, var(--c-panel));
    color: var(--fish-color, var(--c-water));
}
.fish-card__icon svg,
.fish-detail-icon svg {
    width: 1.6rem;
    height: 1.6rem;
}
.fish-card__body {
    min-width: 0;
    flex: 1;
}
.fish-card__name {
    font-size: 0.84rem;
    font-weight: 900;
}
.fish-card__species,
.fish-card__pitch,
.fish-card__record {
    color: var(--c-muted);
    font-size: 0.65rem;
    line-height: 1.45;
}
.fish-card__difficulty {
    color: var(--c-money);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.fish-card__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fish-card__price {
    margin-right: auto;
    color: var(--c-money);
    font-size: 0.75rem;
    font-weight: 900;
}
.fish-card button,
.primary-modal-button,
.secondary-modal-button,
.danger-modal-button {
    min-height: 2.35rem;
    border-radius: 0.65rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 900;
}
.fish-card button,
.primary-modal-button {
    border: 1px solid var(--c-water);
    background: color-mix(in srgb, var(--c-water) 18%, var(--c-panel));
    color: var(--c-water);
}
.secondary-modal-button {
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
}
.danger-modal-button {
    border: 1px solid var(--c-warn);
    background: color-mix(in srgb, var(--c-warn) 18%, var(--c-panel));
    color: var(--c-warn);
}
.danger-modal-button:disabled {
    cursor: wait;
    opacity: 0.6;
}
.full-reset-menu-button:hover {
    background: color-mix(in srgb, var(--c-warn) 10%, var(--c-panel));
}
.fish-card button:disabled {
    border-color: var(--c-border);
    color: color-mix(in srgb, var(--c-muted) 72%, var(--c-panel));
    opacity: 0.7;
}
.fish-card.is-active {
    border-color: var(--c-water);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-water) 35%, transparent);
}
.fish-card.is-locked .fish-card__icon {
    filter: brightness(0) opacity(0.45);
}
.fish-card.is-locked .fish-card__body {
    color: color-mix(in srgb, var(--c-muted) 72%, var(--c-panel));
}
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem;
    background: color-mix(in srgb, var(--c-bg) 94%, transparent);
    backdrop-filter: blur(10px);
}
.modal-overlay.hidden {
    display: none;
}
.modal-card {
    position: relative;
    display: flex;
    width: min(100%, 28rem);
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid var(--c-border);
    border-radius: 1rem;
    background: var(--c-panel);
    color: var(--c-text);
}
.modal-card h2 {
    font-size: 1rem;
    font-weight: 900;
}
.modal-card h3 {
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 900;
}
.modal-card p {
    color: var(--c-muted);
    font-size: 0.72rem;
    line-height: 1.6;
}
.modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    background: var(--c-bg);
    color: var(--c-text);
    font-weight: 900;
}
.modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}
.full-reset-modal-card {
    border-color: color-mix(in srgb, var(--c-warn) 65%, var(--c-border));
}
.full-reset-warning-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-warn);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--c-warn) 12%, var(--c-panel));
    color: var(--c-warn);
}
.full-reset-warning-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.full-reset-loss-list {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.7rem;
    line-height: 1.5;
    list-style: disc inside;
}
.modal-card .full-reset-note {
    color: var(--c-warn);
    font-weight: 700;
}
.fish-detail-card {
    align-items: stretch;
}
.fish-detail-card .fish-detail-icon {
    width: 4rem;
    height: 4rem;
}
.fish-detail-species,
.fish-detail-difficulty {
    color: var(--c-money);
    font-size: 0.72rem;
    font-weight: 900;
}
.fish-detail-fun-fact {
    padding: 0.7rem;
    border: 1px solid var(--c-border);
    border-radius: 0.7rem;
    background: var(--c-bg);
}
.ability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.ability-list span {
    border: 1px solid var(--c-border);
    border-radius: 9999px;
    padding: 0.25rem 0.45rem;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.62rem;
    font-weight: 700;
}
.fish-detail-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--c-border);
    border-radius: 0.7rem;
    padding: 0.7rem;
    background: var(--c-bg);
    font-size: 0.7rem;
}
.fish-detail-record strong {
    color: var(--c-money);
    font-size: 1rem;
}
#toast {
    bottom: 4.4rem;
}
[data-fish-color="popo"] { --fish-color: #f59e0b; }
[data-fish-color="papa"] { --fish-color: #d97706; }
[data-fish-color="meme"] { --fish-color: #60a5fa; }
[data-fish-color="neo"] { --fish-color: #22d3ee; }
[data-fish-color="betan"] { --fish-color: #a78bfa; }
[data-fish-color="coco"] { --fish-color: #c08457; }
[data-fish-color="king"] { --fish-color: #f472b6; }
@media (max-width: 640px) {
    .theme-card-grid {
        grid-template-columns: 1fr;
    }
    .faq-entry-grid {
        grid-template-columns: 1fr;
    }
    .faq-entry-button {
        min-height: 3.5rem;
    }
    .faq-question-list {
        grid-template-columns: 1fr;
    }
    .faq-search-row {
        grid-template-columns: 1fr;
    }
    .faq-search-submit {
        width: 100%;
    }
    .faq-search-form--dock .faq-search-row {
        grid-template-columns: minmax(0, 1fr) 2.4rem;
    }
    .faq-question-button {
        min-height: 2.8rem;
    }
    header > div {
        align-items: stretch;
    }
    header > div > div:first-child {
        min-width: 0;
        flex: 1 1 100%;
    }
    #header-status-strip {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 2.5rem;
        gap: 0.45rem;
    }
    #header-status-strip > div {
        min-width: 0;
        justify-content: center;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    #settings-menu-wrap {
        padding-left: 0;
        padding-right: 0;
    }
    #settings-menu-button {
        width: 100%;
    }
    header h1 {
        font-size: 1.12rem;
        line-height: 1.45rem;
    }
    header p,
    header .text-xs,
    header [class*="text-[10px]"] {
        font-size: 0.68rem;
        line-height: 1.25;
    }
    #day-display {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    #event-banner {
        align-items: flex-start;
        gap: 0.45rem;
        padding: 0.65rem;
        line-height: 1.45;
    }
    #warning-label {
        max-width: 6rem;
        text-align: center;
        line-height: 1.25;
    }
    #new-water-card,
    #new-fish-card {
        padding: 0.75rem;
        gap: 0.65rem;
    }
    #new-water-card > div:first-child,
    #new-fish-card > div:first-child,
    .actions-panel h3,
    .log-panel .flex.justify-between {
        align-items: flex-start;
        gap: 0.45rem;
    }
    #new-water-card > div:first-child,
    #new-fish-card > div:first-child,
    .actions-panel h3 {
        flex-wrap: wrap;
    }
    #new-water-card > div:first-child > span,
    #new-fish-card > div:first-child > span {
        min-width: 0;
    }
    #new-water-card > .grid,
    #new-fish-card > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }
    #new-water-card > .grid > div,
    #new-fish-card > .grid > div {
        padding: 0.45rem 0.5rem;
    }
    #money-display,
    #filter-display,
    #water-plant-display,
    #condition-display {
        font-size: 0.72rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    #action-buttons-group {
        gap: 0.4rem;
    }
    #action-buttons-group .action-btn {
        min-height: 66px;
        padding: 0.45rem 0.2rem;
        gap: 0.18rem;
    }
    #action-buttons-group .action-btn i {
        width: 1rem;
        height: 1rem;
    }
    #action-buttons-group .action-btn span:first-of-type {
        font-size: 0.7rem;
        line-height: 1.25;
    }
    #action-buttons-group .action-btn span:last-of-type {
        font-size: 0.56rem;
        line-height: 1.3;
    }
    #control-buttons-group {
        gap: 0.5rem;
    }
    #shop-buttons-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }
    #shop-buttons-group .shop-btn {
        min-height: 74px;
        padding: 0.55rem 0.45rem;
        line-height: 1.25;
    }
    #control-buttons-group .control-btn {
        min-height: 2.5rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        line-height: 1.2;
    }
    #aquarium-status-labels {
        max-width: calc(100% - 1rem);
    }
    #aquarium-size-label {
        max-width: calc(100% - 1rem);
    }
    #aquarium-crop-badges {
        top: 2.65rem;
        max-width: min(9rem, calc(100% - 1rem));
    }
    .aquarium-presence-icon {
        width: 1.45rem;
        height: 1.45rem;
        font-size: 0.82rem;
    }
    .aquarium-crop-badge {
        font-size: 0.56rem;
        padding: 0.2rem 0.38rem;
    }
    .aquarium-status-label {
        font-size: 0.6rem;
        padding: 0.24rem 0.42rem;
    }
    #log-list {
        height: 6rem;
        line-height: 1.45;
    }
    #gameover-modal {
        padding: 0.75rem;
    }
    .result-modal-card {
        padding: 1rem;
        max-height: calc(100dvh - 1.5rem);
    }
    #result-modal-icon-wrap {
        margin-bottom: 0.5rem;
        padding: 0.65rem;
    }
    #result-modal-icon-wrap i {
        width: 1.75rem;
        height: 1.75rem;
    }
    #result-modal-title {
        font-size: 1.15rem;
        line-height: 1.45rem;
    }
    #gameover-reason {
        max-width: 100%;
        margin-bottom: 0.75rem;
        line-height: 1.45;
    }
    .result-score-card {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
    }
    #btn-restart {
        width: 100%;
        justify-content: center;
        padding: 0.75rem;
    }
    .fish-card-grid {
        grid-template-columns: 1fr;
    }
    .screen-header,
    .screen-panel {
        padding: 0.7rem;
    }
}
@media (max-width: 360px) {
    #new-water-card > .grid,
    #new-fish-card > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #header-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) 2.25rem;
        gap: 0.3rem;
    }
    #header-status-strip > div {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        gap: 0.15rem;
    }
    #header-status-strip .text-sm {
        font-size: 0.78rem;
    }
    #action-buttons-group .action-btn span:first-of-type {
        font-size: 0.64rem;
        line-height: 1.28;
    }
    #action-buttons-group .action-btn span:last-of-type {
        font-size: 0.52rem;
        line-height: 1.32;
    }
}
@media (min-width: 1024px) {
    .play-layout.play-layout {
        grid-template-columns: minmax(0, 1.78fr) minmax(360px, 0.66fr);
        grid-template-rows: auto auto auto auto;
        align-items: stretch;
    }
    .event-panel.event-panel {
        grid-column: 1;
        grid-row: 2;
    }
    .aquarium-panel.aquarium-panel {
        grid-column: 1;
        grid-row: 1;
    }
    .aquarium-view.aquarium-view {
        height: min(55vh, 520px);
        min-height: 390px;
    }
    .actions-panel.actions-panel {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: sticky;
        top: 5.25rem;
        align-self: start;
    }
    .log-panel.log-panel {
        grid-column: 1;
        grid-row: 3;
    }
    #action-buttons-group {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }
    #action-buttons-group .action-btn {
        min-height: 96px;
        padding: 0.55rem 0.4rem;
        gap: 0.3rem;
    }
    #action-buttons-group .action-btn i {
        width: 1.4rem;
        height: 1.4rem;
    }
    #action-buttons-group .action-btn span:first-of-type {
        font-size: 0.82rem;
        line-height: 1.2;
    }
    #action-buttons-group .action-btn span:last-of-type {
        font-size: 0.66rem;
        line-height: 1.3;
    }
    #shop-buttons-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }
    #shop-buttons-group .shop-btn {
        min-height: 104px;
        padding: 0.8rem 0.65rem;
        font-size: 0.82rem;
        line-height: 1.35;
    }
    #shop-buttons-group .shop-btn i {
        width: 1.55rem;
        height: 1.55rem;
    }
    #control-buttons-group .control-btn {
        min-height: 2.8rem;
        font-size: 0.85rem;
    }
    #log-list {
        height: 4.5rem;
        font-size: 0.82rem;
        line-height: 1.45;
    }
    header h1 {
        font-size: 1.55rem;
        line-height: 2rem;
    }
    header p,
    header .text-xs,
    header [class*="text-[10px]"] {
        font-size: 0.78rem;
        line-height: 1.25;
    }
    #day-display {
        font-size: 1.45rem;
        line-height: 1.8rem;
    }
    #event-banner {
        font-size: 0.88rem;
        line-height: 1.45;
        padding: 0.8rem;
    }
    #new-status-card {
        gap: 0.5rem;
    }
    #new-status-card > div {
        padding: 0.45rem 0.6rem;
    }
    #new-status-card > div > span:first-child {
        font-size: 0.78rem;
    }
    #new-status-card > div > span:last-child {
        font-size: 1.1rem;
    }
    .actions-panel h3,
    .log-panel h3 {
        font-size: 0.88rem;
        line-height: 1.35;
    }
    .actions-panel h3 [class*="text-[10px]"],
    .log-panel button {
        font-size: 0.76rem;
        line-height: 1.35;
    }
}

/* ---- スタートスクリーン ---- */
.start-screen-card {
    width: min(100%, 30rem);
    gap: 1.2rem;
    align-items: center;
}
.start-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.9rem;
}
.start-slide h2 {
    text-align: center;
}
.start-slide__icon {
    font-size: 2.8rem;
    line-height: 1;
    text-align: center;
}
.start-slide__lead {
    color: var(--c-muted);
    font-size: 0.78rem;
    line-height: 1.65;
    text-align: center;
}
.start-slide__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.start-slide__list li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
}
.start-slide__list li:last-child {
    border-bottom: none;
}
.start-slide__label {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--c-text);
    line-height: 1.4;
}
.start-slide__desc {
    font-size: 0.75rem;
    color: var(--c-text);
    font-weight: 700;
    line-height: 1.5;
}
.start-slide__note {
    display: block;
    color: var(--c-muted);
    font-size: 0.68rem;
    font-weight: 400;
}
.start-slide__warning {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-water);
    text-align: center;
    margin-top: 0.2rem;
}
.start-slide__list--crops li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
}
.start-slide__list--crops li:last-child {
    border-bottom: none;
}
.start-slide__list--crops .start-slide__label {
    font-size: 0.78rem;
}
.start-slide__list--crops .start-slide__desc {
    font-size: 0.72rem;
    color: var(--c-money);
    font-weight: 700;
}
.start-slide__screenshot-placeholder {
    width: 100%;
    height: 9rem;
    border: 2px dashed var(--c-border);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-muted);
    font-size: 0.72rem;
}
.start-slide__screenshot {
    width: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
    border: 1px solid var(--c-text);
}
.start-screen-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.start-screen-dots {
    display: flex;
    gap: 0.4rem;
}
.start-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--c-border);
    cursor: pointer;
    transition: background 0.2s;
}
.start-dot.active {
    background: var(--c-water);
}