* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.dev-banner {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #7a2200;
    color: #ffb38a;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: #0f0d0b;
    color: #e6dccd;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

input,
textarea,
select,
button {
    font: inherit;
}

.container {
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(0.9rem, 3vw, 1.6rem);
}

header {
    text-align: center;
    margin-bottom: 1rem;
}

.site-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.site-header h1 {
    min-width: 0;
}

header h1 a {
    color: #beb0a0;
    text-decoration: none;
    font-size: clamp(1rem, 2vw, 1.2rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.4;
}

header h1 a:hover {
    color: #beb0a0;
}

.main-nav {
    margin-top: 0.55rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.nav-link {
    font-size: 0.84rem;
    color: #c8baa9;
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border: 1px solid #423c30;
    border-radius: 20px;
    background: #1f1a14;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-link:hover {
    color: #beb0a0;
    border-color: #504840;
    background: #1c1810;
}

.global-identity {
    margin-top: 0.4rem;
    display: flex;
    justify-content: center;
}

.global-identity-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.global-identity-btn {
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #423c30;
    background: #1d1914;
    color: #b8aa98;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.global-identity-btn.active {
    background: #2b3328;
    border-color: #4c7b5b;
    color: #9dd0ad;
}

.global-identity-btn:hover {
    border-color: #5a5246;
    background: #2b241d;
}

.global-session {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.global-session-user {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #4c7b5b;
    background: #20281f;
    color: #a9d5b7;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
}

.global-logout-btn {
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #423c30;
    background: #1d1914;
    color: #b8aa98;
    font-size: 0.84rem;
    cursor: pointer;
}

.global-logout-btn:hover {
    border-color: #5a5246;
    background: #2b241d;
}

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-shell {
    width: 100%;
    max-width: 360px;
}

.login-panel {
    background: #382c20;
    border: 1px solid #342818;
    border-radius: 8px;
    padding: 1.35rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.login-panel h1 {
    margin-bottom: 1rem;
    color: #d8c9b8;
    font-size: 1.1rem;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.login-form {
    display: grid;
    gap: 0.7rem;
}

.login-form label {
    color: #c8baa9;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-form input,
.login-form select {
    width: 100%;
    min-height: 2.55rem;
    border: 1px solid #4a3c2f;
    border-radius: 6px;
    background: #18140f;
    color: #eadfce;
    padding: 0.65rem 0.75rem;
}

.login-form input:focus,
.login-form select:focus {
    outline: 2px solid #7b5b36;
    outline-offset: 2px;
}

.login-error {
    border: 1px solid #7a3428;
    border-radius: 6px;
    background: #2a1714;
    color: #f0b7a8;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
}

.login-submit {
    min-height: 2.65rem;
    border: 1px solid #775d3c;
    border-radius: 6px;
    background: #6d4926;
    color: #fff4e6;
    font-weight: 700;
    cursor: pointer;
}

.login-submit:hover {
    background: #7c552d;
}

/* Rulesets management page */
.rs-add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: transparent;
    border: 1px dashed #423c30;
    border-radius: 6px;
    color: #4a7052;
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.rs-add-btn:hover {
    color: #4a7;
    border-color: #4a7052;
    background: rgba(68, 170, 119, 0.04);
}

.rs-new-card {
    background: #1e1a14;
    border: 1px solid #342818;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.rulesets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ruleset-mgmt-card {
    background: #1e1a14;
    border: 1px solid #342818;
    border-radius: 6px;
    overflow: hidden;
}

.rs-read {
    padding: 0.75rem 1rem;
}

.rs-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.rs-type-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.45rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.rs-type-lessons_learned_simple {
    background: #142018;
    color: #6a9a70;
    border: 1px solid #285230;
}

.rs-type-lessons_learned_locked {
    background: #141428;
    color: #6a70a0;
    border: 1px solid #242240;
}

.rs-type-lessons_learned_daily {
    background: #201610;
    color: #9a7a6a;
    border: 1px solid #3e2c2c;
}

.rs-name {
    flex: 1;
    font-size: 0.875rem;
    color: #bbb;
    font-weight: 500;
    min-width: 0;
}

.rs-date {
    font-size: 0.8rem;
    color: #706254;
    flex-shrink: 0;
}

.rs-context,
.ruleset-context-summary {
    color: #b9ab9b;
    font-size: 0.92rem;
    line-height: 1.55;
}

.rs-context {
    margin: -0.15rem 0 0.6rem;
}

.rs-tags,
.ruleset-context-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rs-tags {
    margin-bottom: 0.75rem;
}

.rs-tag,
.ruleset-context-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid #42382d;
    border-radius: 999px;
    background: #17130f;
    color: #9f8e7d;
    font-size: 0.72rem;
    line-height: 1;
}

.ruleset-context {
    margin-top: -0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #2f281f;
    border-radius: 6px;
    background: #14100c;
}

.ruleset-context-summary + .ruleset-context-tags {
    margin-top: 0.55rem;
}

.rs-btn-row {
    display: flex;
    gap: 0.4rem;
}

.btn-rs {
    padding: 0.55rem 0.85rem;
    background: transparent;
    border: 1px solid #3e3630;
    border-radius: 4px;
    color: #8a8090;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.btn-rs:hover {
    color: #a09082;
    border-color: #3c3a58;
}

.btn-rs-danger:hover {
    color: #c44;
    border-color: rgba(204, 68, 68, 0.3);
}

.rs-text-preview {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #342818;
}

.rs-edit {
    padding: 0.75rem 1rem;
}

.rs-edit-field {
    margin-bottom: 0.65rem;
}

.rs-edit-field label {
    display: block;
    font-size: 0.8rem;
    color: #9a8070;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.3rem;
}

.rs-edit-field input,
.rs-edit-field textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: #0f0d0b;
    border: 1px solid #362e24;
    border-radius: 5px;
    color: #e0d4c0;
    font-size: 0.875rem;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.5;
}

.rs-edit-field input:focus,
.rs-edit-field textarea:focus {
    outline: none;
    border-color: #3c3a58;
}

.rs-edit-btn-row {
    display: flex;
    gap: 0.5rem;
}

.rs-empty {
    color: #706254;
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 0;
}

.rs-group {
    margin-bottom: 1.25rem;
}

.rs-group-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.4rem;
    border-radius: 4px;
    color: #b0a090;
    background: #1e1a14;
}

.rs-group-lessons_learned_simple { color: #4a7; }
.rs-group-lessons_learned_locked  { color: #67a; }
.rs-group-lessons_learned_daily   { color: #a74; }

.rs-default-badge {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    background: rgba(68, 170, 102, 0.15);
    color: #4a7;
    border: 1px solid rgba(68, 170, 102, 0.25);
    white-space: nowrap;
}

.game-card,
.game-page,
.create-game {
    background: #382c20;
    border-radius: 8px;
    padding: clamp(1.15rem, 3vw, 2rem);
    border: 1px solid #342818;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* ── Help / About ───────────────────────────────────────────────────────── */
.help-about {
    display: grid;
    gap: 1rem;
    color: #d8c9b8;
}

.help-section {
    display: grid;
    gap: 0.45rem;
}

.help-section + .help-section {
    padding-top: 0.9rem;
    border-top: 1px solid rgba(180, 150, 100, 0.12);
}

.help-section h2,
.help-section h3 {
    margin: 0;
    color: #e3d2be;
    line-height: 1.25;
}

.help-section h2 {
    font-size: 1.18rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.help-section h3 {
    font-size: 0.88rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.help-section p,
.help-list dd {
    color: #bda995;
    font-size: 0.92rem;
    line-height: 1.55;
}

.help-list {
    display: grid;
    gap: 0.65rem;
}

.help-list div {
    display: grid;
    gap: 0.15rem;
}

.help-list dt {
    color: #e0c7ac;
    font-size: 0.92rem;
    font-weight: 700;
}

.help-list dd {
    margin: 0;
}

.help-link-list {
    display: grid;
    gap: 0.45rem;
    list-style: none;
}

.help-link-list a {
    color: #e0c7ac;
    font-size: 0.94rem;
    line-height: 1.4;
    text-decoration-color: rgba(224, 199, 172, 0.35);
    text-underline-offset: 0.18rem;
}

.help-link-list a:hover {
    color: #f0d8bc;
    text-decoration-color: rgba(240, 216, 188, 0.65);
}

.help-modal-sheet {
    max-height: min(78vh, 42rem);
    overflow: auto;
}

/* ── Game header: name + type badge ─────────────────────────────────────── */
.game-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.game-header h2 {
    margin-bottom: 0;
}

.game-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #556;
    border: 1px solid #423c30;
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    background: #1e1a14;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */
.game-progress-wrap {
    margin: 0.5rem 0 1rem;
}

.game-progress-bar {
    height: 5px;
    background: #252018;
    border-radius: 3px;
    overflow: hidden;
}

.game-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7a5020 0%, #c87830 100%);
    border-radius: 3px;
    transition: width 1s linear;
    box-shadow: 0 0 6px rgba(180, 100, 30, 0.35);
}

.game-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
}

.game-progress-pct {
    font-size: 0.8rem;
    color: #a09070;
    letter-spacing: 0.04em;
}

.game-ends-at {
    font-size: 0.8rem;
    color: #8888a0;
    letter-spacing: 0.02em;
}

/* ── Countdown suppressed (instruction active) ───────────────────────────── */
.countdown.countdown-suppressed {
    opacity: 0.3;
    filter: grayscale(1);
    pointer-events: none;
}

/* ── Denial game stat dashboard row ─────────────────────────────────────── */
.denial-stats-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #1e1a14;
    border: 1px solid #382e22;
    border-radius: 10px;
    margin: 1.25rem 0 1.5rem;
    overflow: hidden;
}

.denial-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    gap: 0.3rem;
}

.denial-stat-number {
    font-size: 3rem;
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    color: #f2ede4;
    line-height: 1;
}

.denial-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9a8272;
}

.denial-stat-divider {
    width: 1px;
    background: #382e22;
    margin: 0.75rem 0;
}

/* ── History section (activities / tasks) ───────────────────────────────── */
.history-section {
    margin-top: 1.5rem;
}

.history-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #9a8878;
    margin-bottom: 0.5rem;
}

.history-cards {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.history-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e1a14;
    border: 1px solid #342818;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    gap: 0.75rem;
}

.history-card-text {
    font-size: 0.875rem;
    color: #beb0a0;
    flex: 1;
    min-width: 0;
}

.history-card-time {
    font-size: 0.8rem;
    color: #907878;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
    font-size: 0.875rem;
    color: #706254;
    text-align: center;
    padding: 0.75rem 0;
    font-style: italic;
}

/* ── Game footer: grouped action buttons ─────────────────────────────────── */
.game-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #181824;
    flex-wrap: wrap;
}

.cancel-game-form {
    display: contents;
}

.btn-cancel-game {
    background: transparent;
    border: 1px solid #3a1a1a;
    color: #7a3c3c;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-cancel-game:hover {
    border-color: #962a2a;
    color: #c44;
    background: #240e0e;
}

.btn-ghost {
    background: transparent;
    border: 1px solid #4a4030;
    color: #9a8e7e;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: border-color 0.15s, color 0.15s;
}

.btn-ghost:hover {
    border-color: #605040;
    color: #9a8e7e;
}

h2 {
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    margin-bottom: 1rem;
    text-align: center;
    color: #ddd0be;
    line-height: 1.25;
}

.subtitle {
    text-align: center;
    color: #ac9b88;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.notice {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #c44;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem;
    padding-bottom: 0.5rem;
}

.game-duration {
    text-align: center;
    font-size: 1.05rem;
    color: #b2a08d;
    margin-bottom: 0.5rem;
}

.today-challenges {
    text-align: center;
    font-size: 1rem;
    color: #7fbe93;
    margin-bottom: 1rem;
}

.countdown {
    text-align: center;
    padding: 2rem 1rem;
    margin: 1rem 0;
}

.countdown-value {
    display: block;
    font-size: 5rem;
    font-weight: 200;
    font-variant-numeric: tabular-nums;
    color: #f2ede4;
}

.countdown-label {
    display: block;
    font-size: 1rem;
    color: #c2af99;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.countdown.complete .countdown-value {
    color: #2d5a3d;
}

.countdown.ready {
    background: rgba(74, 119, 74, 0.2);
    border-radius: 8px;
}

.countdown.ready .countdown-value {
    color: #4a7;
    font-size: 3rem;
}

.challenge-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.complete-form,
.postpone-form,
.decline-form,
.consequence-form {
    text-align: center;
}

.period-badge {
    text-align: center;
    font-size: 0.82rem;
    color: #b5a28f;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.countdown-label-top {
    display: block;
    font-size: 0.82rem;
    color: #b09f8b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.btn-complete {
    background: linear-gradient(180deg, #3a6040 0%, #1a3a1a 100%);
    border: 1px solid #4a7050;
    color: #8c8;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
}

.btn-complete:hover {
    background: linear-gradient(180deg, #4a7050 0%, #3a6040 100%);
    color: #aca;
}

.btn-complete:active {
    transform: scale(0.98);
}

.countdown.cancelled .countdown-label {
    font-size: 1.5rem;
    color: #7a3838;
}

.next-action-type {
    text-align: center;
    font-size: 1.2rem;
    color: #8ac49c;
    margin-bottom: 1rem;
    line-height: 1.35;
}

/* Form styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group > label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #ccb9a4;
}

.form-group input[type="text"],
.form-group input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #3e3428;
    border-radius: 4px;
    font-size: 1rem;
    background: #0f0d0b;
    color: #f2ede4;
}

.form-group input:focus {
    outline: none;
    border-color: #504840;
}

/* Game type selection grid */
.game-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.game-type-card {
    cursor: pointer;
    display: block;
}

.game-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.game-type-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.1rem 0.5rem;
    background: #1e1a14;
    border: 1px solid #362e22;
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}

.game-type-card:hover .game-type-card-inner {
    border-color: #504840;
    background: #382c20;
}

.game-type-card:has(input:checked) .game-type-card-inner {
    border-color: #4a7;
    background: #122018;
}

.game-type-icon {
    color: #706254;
    transition: color 0.2s;
    line-height: 0;
}

.game-type-card:hover .game-type-icon,
.game-type-card:has(input:checked) .game-type-icon {
    color: #4a7;
}

.game-type-name {
    color: #beb0a0;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    transition: color 0.2s;
}

.game-type-card:has(input:checked) .game-type-name {
    color: #e0d4c0;
}

.game-type-desc {
    color: #706254;
    font-size: 0.75rem;
    transition: color 0.2s;
}

.game-type-card:has(input:checked) .game-type-desc {
    color: #4a7;
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 1rem;
}

.radio-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: #0f0d0b;
    border: 1px solid #3e3428;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.radio-option:hover {
    border-color: #504840;
}

.radio-option input[type="radio"] {
    margin-bottom: 0.5rem;
}

.radio-option span {
    color: #beb0a0;
    font-weight: 500;
}

.radio-option small {
    color: #706254;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.radio-option:has(input:checked) {
    border-color: #5e5244;
    background: #1e1a14;
}

/* Daily configuration */
.days-config {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.day-config {
    background: #0f0d0b;
    border: 1px solid #3e3428;
    border-radius: 4px;
    padding: 1rem;
}

.day-config h3 {
    font-size: 0.875rem;
    color: #a09082;
    margin: 0;
}

.day-header {
    margin-bottom: 0.75rem;
}

.day-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.day-input label {
    font-size: 0.85rem;
    color: #b4a390;
}

.day-input input {
    width: 60px;
    padding: 0.5rem;
    border: 1px solid #3e3428;
    border-radius: 0;
    font-size: 1.25rem;
    background: #382c20;
    color: #f2ede4;
    text-align: center;
    -moz-appearance: textfield;
}

.day-input input::-webkit-outer-spin-button,
.day-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stepper for mobile-friendly number input */
.stepper {
    display: flex;
    align-items: center;
}

.stepper-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #3e3428;
    background: #342818;
    color: #a09082;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.stepper-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.stepper-btn:hover {
    background: #423c30;
    color: #beb0a0;
}

.stepper-btn:active {
    background: #443e30;
}

.stepper input {
    border-radius: 0;
    border-left: none;
    border-right: none;
    height: 44px;
}

.time-inputs {
    display: flex;
    gap: 0.75rem;
}

.time-input {
    flex: 1;
}

.time-input label {
    display: block;
    font-size: 0.75rem;
    color: #706254;
    margin-bottom: 0.25rem;
}

.time-input input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #3e3428;
    border-radius: 4px;
    font-size: 1rem;
    background: #382c20;
    color: #f2ede4;
    text-align: center;
}

.time-input input:focus {
    outline: none;
    border-color: #504840;
}

/* Actions configuration (step 3) */
.actions-config {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.action-config {
    background: #0f0d0b;
    border: 1px solid #3e3428;
    border-radius: 4px;
    padding: 1rem;
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.action-day {
    font-size: 0.95rem;
    color: #d1c2b0;
}

.action-period {
    font-size: 0.82rem;
    color: #b3a28e;
    text-transform: uppercase;
}

.action-inputs {
    display: flex;
    gap: 0.75rem;
}

.action-input {
    flex: 1;
}

.action-input.action-type {
    flex: 2;
}

.action-input label {
    display: block;
    font-size: 0.85rem;
    color: #b8a592;
    margin-bottom: 0.25rem;
}

.action-input input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #3e3428;
    border-radius: 4px;
    font-size: 0.875rem;
    background: #382c20;
    color: #f2ede4;
}

.action-input input:focus {
    outline: none;
    border-color: #504840;
}

/* Time select dropdowns */
.time-select {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.time-select .custom-select {
    flex: 1;
}

.time-select .custom-select select {
    padding: 0.6rem 1.5rem 0.6rem 0.5rem;
    min-width: 65px;
}

.time-sep {
    color: #706254;
    font-weight: bold;
}

/* Custom select styling */
.custom-select {
    position: relative;
}

.custom-select select {
    width: 100%;
    padding: 0.75rem 2rem 0.75rem 0.75rem;
    border: 1px solid #3e3428;
    border-radius: 4px;
    font-size: 1rem; /* min 16px prevents iOS auto-zoom */
    background: linear-gradient(180deg, #342818 0%, #382c20 100%);
    color: #e0d4c0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-select::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    pointer-events: none;
}

.custom-select select:focus {
    outline: none;
    border-color: #5e5244;
}

.custom-select select option {
    background: #382c20;
    color: #e0d4c0;
    padding: 0.5rem;
}

/* Remove button */
.remove-btn {
    background: none;
    border: none;
    color: #706254;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.remove-btn:hover {
    color: #c44;
}

/* Add challenge section */
.add-challenge-section {
    margin: 1.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid #342818;
}

.add-challenge-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.add-day-select {
    flex: 1;
}

.add-day-select select {
    width: 100%;
}

.btn-add {
    padding: 0.6rem 1rem;
    background: #285230;
    border: 1px solid #384e38;
    color: #6a8;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-add:hover {
    background: #384e38;
    color: #8ca;
}

/* Actions table */
.actions-progress {
    text-align: center;
    margin-bottom: 1rem;
}

.progress-text {
    color: #b9a892;
    font-size: 0.98rem;
}

.actions-table {
    margin-top: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #342818;
    border-radius: 8px;
    background: rgba(20, 16, 12, 0.32);
}

.actions-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 36rem;
}

.actions-table th,
.actions-table td {
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #342818;
}

.actions-table th {
    color: #bca995;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    background: rgba(30, 26, 20, 0.9);
}

.actions-table tr.complete td {
    color: #a09082;
}

.actions-table tr.incomplete td {
    color: #a09082;
}

.status-complete {
    color: #4a7 !important;
}

.status-incomplete {
    color: #c44 !important;
}

.status-declined {
    color: #a09082 !important;
}

.status-failed {
    color: #a55 !important;
}

.actions-table tr.failed td {
    color: #7a3a3a;
}

.status-time {
    display: block;
    font-size: 0.8em;
    color: #9a8272;
    font-weight: 400;
    margin-top: 0.15em;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
    -webkit-appearance: none;
    appearance: none;
    min-height: 2.75rem;
}

.btn-primary {
    background: #4a3820;
    color: #d4b880;
    width: 100%;
    border: 1px solid #7a5e32;
}

.btn-primary:hover {
    background: #5e4a2c;
    color: #f0d4a0;
}

.btn-danger {
    background: #2e1e1e;
    color: #c07070;
    border: 1px solid #5a3030;
}

.btn-danger:hover {
    background: #3e2828;
    color: #e08080;
}

.btn-secondary {
    background: #252018;
    color: #9a8e7e;
    border: 1px solid #504838;
    margin-left: 0;
}

.btn-secondary:hover {
    background: #322a20;
    color: #beb0a0;
}

.btn-secondary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Error message */
.error-message {
    background: #3e2c2c;
    border: 1px solid #3a2222;
    color: #c66;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Notification prompt */
.notification-prompt {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    width: min(22rem, calc(100vw - 2rem));
    background: #342818;
    border: 1px solid #443e30;
    border-radius: 8px;
    padding: 0.8rem;
    text-align: left;
    z-index: 1000;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.notification-prompt p {
    margin-bottom: 0.65rem;
    color: #d4c5b4;
    font-size: 0.88rem;
    line-height: 1.4;
}

.notification-prompt-actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.notification-prompt .btn {
    width: auto;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.84rem;
    flex: 1;
}

body.has-active-game .notification-prompt {
    top: calc(3rem + env(safe-area-inset-top));
    bottom: auto;
}

.debug-info {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0.35rem 1rem 0.75rem;
    color: #6e6256;
    font-size: 0.7rem;
}

.debug-info summary {
    cursor: pointer;
    color: #807064;
    text-align: center;
}

.debug-info div {
    margin-top: 0.4rem;
    text-align: center;
}

.debug-info a {
    color: #807064;
}

/* In-app alert (fallback for when notifications don't work) */
.in-app-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.alert-content {
    background: #342818;
    border: 1px solid #4a7;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 300px;
    margin: 1rem;
}

.alert-content strong {
    display: block;
    font-size: 1.25rem;
    color: #4a7;
    margin-bottom: 0.5rem;
}

.alert-content p {
    color: #a09082;
    margin-bottom: 1.5rem;
}

.alert-content .btn {
    min-width: 100px;
}

.actions {
    text-align: center;
    margin-top: 1rem;
}

.actions form {
    display: inline;
}

.back-link {
    text-align: center;
    margin-top: 1.5rem;
}

.back-link a {
    color: #8a7860;
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link a:hover {
    color: #807064;
}

/* Consequence banner — shown above challenge in red */
.consequence-banner {
    background: #2e1010;
    border: 1px solid #962a2a;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.consequence-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.consequence-banner-label {
    font-size: 0.6rem;
    color: #c44;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.consequence-banner-text {
    font-size: 1.35rem;
    color: #f55;
    font-weight: 700;
    line-height: 1.25;
}

.btn-consequence-done {
    flex-shrink: 0;
    background: #3a0e0e;
    border: 1px solid #8a2525;
    color: #e44;
    padding: 0.65rem 1.1rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-consequence-done:hover {
    background: #4a1515;
    color: #f55;
    border-color: #aa3333;
}

/* Consequence button */
.btn-consequence {
    background: #3e2020;
    border: 1px solid #602e2e;
    color: #c55;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-consequence:hover {
    background: #502222;
    color: #e66;
}

/* Instruction banner — denial game, shown above countdown in red */
.instruction-banner {
    background: #2e1010;
    border: 1px solid #962a2a;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.instruction-banner-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.instruction-banner-label {
    font-size: 0.6rem;
    color: #c44;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.instruction-banner-text {
    font-size: 1.35rem;
    color: #f55;
    font-weight: 700;
    line-height: 1.25;
}


.instruction-banner-due {
    font-size: 0.85rem;
    color: #c44;
    margin-top: 0.3rem;
    font-weight: 600;
}

.instruction-banner-btns {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Fail button */
.btn-fail {
    flex-shrink: 0;
    background: #240e0e;
    border: 1px solid #5a1515;
    color: #844;
    padding: 0.75rem 1.1rem;
    border-radius: 5px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.btn-fail:hover {
    background: #3e2020;
    color: #a55;
}

/* Instruction / red action button */
.btn-instruction {
    background: #2a0808;
    border: 1px solid #962a2a;
    color: #e44;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-instruction:hover {
    background: #3a1010;
    color: #f55;
}

/* Denial game action buttons row */
.denial-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: stretch;
}

.denial-actions form {
    margin: 0;
}

.denial-actions > .btn,
.denial-actions > a,
.denial-actions > form {
    flex: 1 1 12rem;
}

.denial-actions > form > .btn {
    width: 100%;
}

/* ── Control game action pills ───────────────────────────────────────── */
.control-actions-row {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
}

.action-pill {
    background: transparent;
    border: 1px solid rgba(180, 150, 100, 0.12);
    color: #907a58;
    padding: 0.45rem 0.9rem;
    border-radius: 16px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.action-pill:hover {
    background: rgba(200, 160, 80, 0.06);
    border-color: rgba(200, 160, 80, 0.25);
    color: #c8a060;
}

.action-pill--instruction {
    border-color: rgba(200, 60, 60, 0.2);
    color: #b05050;
}

.action-pill--instruction:hover {
    background: rgba(200, 60, 60, 0.05);
    border-color: rgba(200, 60, 60, 0.35);
    color: #d06060;
}

/* ── Secondary recording links ──────────────────────────────────────── */

/* Inline collapsible forms (activity / instruction) */
.denial-inline-form {
    background: #382c20;
    border: 1px solid #443e30;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.denial-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.instruction-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.instruction-preset-btn {
    background: #1e1a14;
    border: 1px solid #443e30;
    border-radius: 20px;
    color: #807064;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.instruction-preset-btn:hover {
    border-color: #962a2a;
    color: #c44;
}

.instruction-preset-btn.active {
    border-color: #962a2a;
    background: #240e0e;
    color: #e44;
}

.denial-textarea {
    width: 100%;
    background: #1e1a14;
    border: 1px solid #443e30;
    border-radius: 4px;
    color: #e0d4c0;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 0.6rem;
}

.denial-textarea:focus {
    outline: none;
    border-color: #4a7;
}

.denial-due-label {
    font-size: 0.9rem;
    color: #cfbca8;
    white-space: nowrap;
}

.denial-due-input {
    background: #1e1a14;
    border: 1px solid #443e30;
    border-radius: 4px;
    color: #e0d4c0;
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
    font-family: inherit;
    flex: 1;
    min-width: 0;
}

.denial-due-input:focus {
    outline: none;
    border-color: #4a7;
}

/* Activity modal */
.activity-modal-sheet {
    max-height: 80vh;
    overflow-y: auto;
}

.activity-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.activity-option-btn {
    background: #1e1a14;
    border: 1px solid #443e30;
    border-radius: 6px;
    color: #beb0a0;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.3;
}

.activity-option-btn:hover {
    background: #1e1a14;
    border-color: #4a7;
    color: #e0d4c0;
}

.activity-custom-trigger {
    border-style: dashed;
    color: #706254;
}

.activity-custom-trigger:hover {
    color: #4a7;
    border-color: #4a7;
}

.custom-activity-row {
    margin-top: 0.25rem;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 3000;
    padding: 0;
}

@media (min-width: 480px) {
    .modal-overlay {
        align-items: center;
    }
}

.modal-sheet {
    background: #382c20;
    border: 1px solid #3e2c2c;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: min(85vh, 52rem);
}

@media (min-width: 480px) {
    .modal-sheet {
        border-radius: 12px;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.modal-title {
    font-size: 1rem;
    color: #dacbb8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

.modal-close {
    background: none;
    border: none;
    color: #706254;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.modal-close:hover {
    color: #a09082;
}

.modal-field {
    margin-bottom: 1rem;
}

.modal-field label {
    display: block;
    font-size: 0.75rem;
    color: #706254;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.modal-field input[type="text"],
.modal-field input[type="datetime-local"] {
    width: 100%;
    padding: 0.75rem;
    background: #0f0d0b;
    border: 1px solid #3e3428;
    border-radius: 4px;
    color: #e0d4c0;
    font-size: 1rem; /* min 16px prevents iOS auto-zoom */
    -webkit-appearance: none;
    appearance: none;
}

.modal-field input:focus {
    outline: none;
    border-color: #602e2e;
}

.modal-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.4);
}

.btn-consequence-submit {
    display: block;
    width: 100%;
    padding: 0.85rem;
    margin-top: 1.25rem;
    background: #3e2020;
    border: 1px solid #6e2828;
    border-radius: 4px;
    color: #e66;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-consequence-submit:hover {
    background: #502222;
}

/* Upcoming consequences section */
.consequences-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #342818;
}

.consequences-header {
    font-size: 0.75rem;
    color: #706254;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.consequences-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.consequence-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #1a1010;
    border: 1px solid #3e2424;
    border-radius: 4px;
    font-size: 0.875rem;
}

.consequence-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.consequence-type {
    color: #c55;
    font-weight: 500;
}

.consequence-location {
    color: #a09082;
}

.consequence-time {
    color: #706254;
    font-size: 0.8rem;
    white-space: nowrap;
}

.consequence-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.consequence-btn-edit,
.consequence-btn-delete {
    background: none;
    border: 1px solid #443e30;
    border-radius: 3px;
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.consequence-btn-edit {
    color: #807064;
}

.consequence-btn-edit:hover {
    color: #beb0a0;
    border-color: #5e5244;
}

.consequence-btn-delete {
    color: #7a3a3a;
    border-color: #522222;
}

.consequence-btn-delete:hover {
    color: #c55;
    border-color: #6e2828;
}

/* Admin consequence management (edit page) */
.consequences-admin-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #342818;
}

.consequences-admin-title {
    font-size: 0.75rem;
    color: #706254;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    font-weight: 500;
}

.consequences-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.consequence-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: #1a1010;
    border: 1px solid #3e2424;
    border-radius: 4px;
}

.consequence-admin-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
}

.ca-type { color: #c55; font-weight: 500; }
.ca-location { color: #a09082; }
.ca-time { color: #706254; font-size: 0.8rem; }

.consequence-admin-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ca-btn-edit,
.ca-btn-delete {
    border-radius: 3px;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid;
    background: none;
}

.ca-btn-edit { color: #807064; border-color: #443e30; }
.ca-btn-edit:hover { color: #beb0a0; border-color: #5e5244; }
.ca-btn-delete { color: #7a3a3a; border-color: #522222; }
.ca-btn-delete:hover { color: #c55; border-color: #6e2828; }

.ca-empty {
    color: #706254;
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem 0;
}

/* Demo section */
.demo-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #342818;
    text-align: center;
}

.demo-section .btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* ── Chat ─────────────────────────────────────────────────────────────────── */

.btn-chat {
    background: #1e2822;
    color: #8fcdab;
    border: 1px solid #3a6050;
}

.btn-chat:hover {
    background: #28382e;
    color: #9ac4aa;
}

.chat-modal-sheet {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-user-label {
    font-size: 0.75rem;
    color: #706254;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 0.4rem;
}

#chat-messages-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 0.75rem;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.chat-empty {
    color: #ab9b88;
    font-size: 0.95rem;
    text-align: center;
    padding: 1.5rem 0;
}

.msg {
    max-width: 82%;
}

.msg-iain {
    align-self: flex-start;
}

.msg-erin {
    align-self: flex-end;
    text-align: right;
}

.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.msg-erin .msg-meta {
    flex-direction: row-reverse;
}

.msg-sender {
    font-size: 0.82rem;
    color: #c55;
    font-variant: small-caps;
    letter-spacing: 0.05em;
}

.msg-time {
    display: block;
    font-size: 0.8rem;
    color: #9f8d79;
}

.msg-text {
    background: #342818;
    border: 1px solid #443e30;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    color: #e0d4c0;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

.msg-text a {
    color: #d4a85a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.msg-text a:hover { color: #e8c178; }

.msg-iain .msg-text {
    border-radius: 4px 12px 12px 12px;
}

.msg-erin .msg-text {
    border-radius: 12px 4px 12px 12px;
}

.msg-bubble-wrap {
    position: relative;
    padding-top: 1.8rem;
    display: inline-block;
    max-width: 100%;
}

.msg-erin .msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.msg-reactions {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 0.3rem;
    flex-wrap: nowrap;
}

.msg-erin .msg-reactions {
    left: auto;
    right: 0;
    justify-content: flex-end;
}

.reaction-btn {
    background: #0f0d0a;
    border: 1px solid #382e22;
    color: #706254;
    font-size: 1rem;
    padding: 0.25rem 0.55rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    line-height: 1.4;
    min-width: 2.2rem;
    text-align: center;
}

.reaction-btn:hover {
    background: #1e1610;
    color: #c0b090;
    border-color: #504840;
    transform: scale(1.12);
}

.reaction-btn:active {
    transform: scale(0.92);
}

.reaction-btn.reacted {
    background: #3e2c2c;
    border-color: #c55;
    color: #e88;
    font-size: 1.05rem;
}

#chat-compose {
    border-top: 1px solid #342818;
    padding-top: 0.75rem;
    margin-top: auto;
}

#chat-compose textarea {
    width: 100%;
    background: #1e1a14;
    border: 1px solid #443e30;
    border-radius: 8px;
    color: #e0d4c0;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

#chat-compose textarea:focus {
    outline: none;
    border-color: #5e5244;
}

.chat-identity-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.chat-identity-label {
    font-size: 0.8rem;
    color: #706254;
}

.chat-send-row {
    display: flex;
    gap: 0.5rem;
}

.btn-chat-sender {
    background: #252018;
    border: 1px solid #504838;
    color: #9a8e7e;
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-chat-sender.active {
    background: #285230;
    border-color: #3a6a3a;
    color: #4a7;
}

.btn-chat-sender:hover:not(.active) {
    background: #423c30;
    color: #beb0a0;
}



/* Rules modal */
.rules-modal-body {
    padding: 0.25rem 0 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.rules-name {
    font-size: 1rem;
    color: #d7c8b5;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.rules-text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 1rem;
    color: #ddcfbc;
    line-height: 1.75;
    margin: 0;
}

.ruleset-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ruleset-list-item {
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: #1e1a14;
    border: 1px solid #2e261c;
    border-radius: 4px;
    color: #a09082;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.12s, color 0.12s;
}

.ruleset-date {
    font-size: 0.82rem;
    color: #9a8773;
    white-space: nowrap;
    flex-shrink: 0;
}

.ruleset-list-item:hover {
    background: #1e1a14;
    color: #beb0a0;
}

/* ── Activity/task count badge ───────────────────────────────────────────── */
.section-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
}

.section-header-label {
    font-size: 0.75rem;
    color: #706254;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    background: #282018;
    border: 1px solid #3e3428;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a09082;
    line-height: 1;
}

/* ── Lock button ─────────────────────────────────────────────────────────── */
.btn-lock {
    background: #2a1e0c;
    border: 1px solid #6a4818;
    color: #c8a060;
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-lock:hover {
    background: #3a2a12;
    color: #e0b878;
}

.btn-lock-active {
    border-color: #c84;
    color: #c84;
}

/* ── Control layout — flex column for ordering ──────────────────────────── */
.control-layout {
    display: flex;
    flex-direction: column;
}

/* display:contents makes countdown's children direct flex items */
.control-countdown {
    display: contents;
}

/* Status elements — top of the page */
.control-countdown .instruction-banner { order: 1; }
.control-countdown .game-progress-wrap { order: 2; }
.control-countdown .control-status { order: 3; }
.control-countdown .erin-says-banner { order: 3; }
.control-countdown .punishment-banner { order: 3; }
.control-countdown .countdown { order: 4; }
.control-countdown .control-needs-action { order: 4; }

/* Identity picker & header */
.identity-gate { order: 1; }
.identity-header { order: 1; }
#erin-controls { order: 5; }
#iain-controls { order: 5; }

/* Inline forms */
.control-layout > .denial-inline-form { order: 8; }
.control-layout > .modal-overlay { order: 9; }
.control-layout > script { order: 100; }

/* History — pushed below everything */
.control-countdown .history-shell { order: 20; }
.control-countdown .denial-stats-row { order: 20; }
.control-countdown .history-section { order: 21; }
.control-countdown .actions-table { order: 22; }
.control-countdown .empty-state { order: 21; }

/* Shared footer belongs at the end of the flow */
.control-layout > .control-footer { order: 30; }

/* ── Identity picker ────────────────────────────────────────────────────── */
.identity-gate {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
}

.identity-prompt {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
    color: #c8b090;
    margin-bottom: 1.5rem;
}

.identity-choices {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.identity-choice {
    background: transparent;
    border: 1px solid rgba(180, 150, 100, 0.25);
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 7rem;
    min-height: 2.75rem;
}

.identity-choice-name {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.identity-choice--erin {
    color: #e0b4b4;
    border-color: rgba(200, 140, 140, 0.35);
}

.identity-choice--erin:hover {
    background: rgba(200, 140, 140, 0.08);
    border-color: rgba(200, 140, 140, 0.55);
}

.identity-choice--iain {
    color: #b0c8e0;
    border-color: rgba(140, 170, 200, 0.35);
}

.identity-choice--iain:hover {
    background: rgba(140, 170, 200, 0.08);
    border-color: rgba(140, 170, 200, 0.55);
}

.identity-choice:active {
    transform: scale(0.97);
}

/* ── Identity header (active state) ────────────────────────────────────── */
.identity-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.5rem 0 0.3rem;
}

.identity-header-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #c8b090;
    letter-spacing: 0.03em;
}

.identity-header-switch {
    background: none;
    border: none;
    color: #b0b0b8;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    letter-spacing: 0.03em;
    transition: color 0.15s;
    font-style: italic;
    min-height: 2.75rem;
}

.identity-header-switch:hover {
    color: #d8d8e0;
}

/* ── Floating switch button (always reachable on iOS) ────────────────── */
.floating-switch {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: #1a1610;
    border: 1px solid #3a3028;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, background 0.15s;
    min-height: 2.5rem;
}
.floating-switch:hover {
    border-color: #5a4e40;
    background: #221c14;
}
.floating-switch-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #c8b090;
    letter-spacing: 0.02em;
}
.floating-switch-label {
    font-size: 0.78rem;
    color: #908070;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ── Erin controls ──────────────────────────────────────────────────────── */
.erin-controls {
    margin: 0.3rem 0 0.6rem;
}

.erin-welcome {
    max-width: 22rem;
    margin: 0 auto 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: rgba(200, 140, 140, 0.05);
    border: 1px solid rgba(200, 140, 140, 0.14);
    text-align: center;
}

.erin-welcome-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    color: #e0b8aa;
    margin-bottom: 0.2rem;
}

.erin-welcome-body {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #ba9a8a;
}

.iain-welcome {
    max-width: 22rem;
    margin: 0 auto 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 12px;
    background: rgba(120, 150, 190, 0.05);
    border: 1px solid rgba(120, 150, 190, 0.14);
    text-align: center;
}

.iain-welcome-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    color: #b8cde0;
    margin-bottom: 0.2rem;
}

.iain-welcome-body {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #96aabf;
}

/* Grant label */
.erin-grant-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    color: #dcc0a8;
    text-align: center;
    margin-bottom: 0.6rem;
}

/* Unlock group — the hero interaction */
.erin-unlock-group {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Slot machine reel */
.slot-reel {
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(200, 140, 140, 0.28);
    background: rgba(200, 140, 140, 0.06);
    margin-bottom: 0.75rem;
    position: relative;
    transition: border-color 0.2s ease;
    width: 100%;
    height: 3.5rem;
}

.slot-reel-strip {
    display: flex;
    flex-direction: column;
}

.slot-reel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #e0b4b4;
    flex-shrink: 0;
    user-select: none;
}

.slot-reel-item--punish {
    color: #c88080;
}

.erin-random-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.erin-random-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: #a88d80;
    letter-spacing: 0.04em;
}

.erin-random-toggle input[type="checkbox"] {
    accent-color: #c08878;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.erin-regenerate-btn {
    background: transparent;
    border: 1px solid rgba(200, 140, 140, 0.2);
    color: #a88d80;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.erin-regenerate-btn:hover {
    color: #d0a898;
    border-color: rgba(200, 140, 140, 0.45);
}

.weights-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.weights-label-text {
    font-size: 0.75rem;
    color: #a88d80;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.erin-unlock {
    background: rgba(200, 140, 140, 0.06);
    border: 1px solid rgba(200, 140, 140, 0.28);
    color: #e0b4b4;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    flex: 1;
}

.erin-unlock:hover {
    background: rgba(200, 140, 140, 0.1);
    border-color: rgba(200, 140, 140, 0.35);
    color: #e0b0b0;
}

.erin-unlock:active {
    transform: scale(0.97);
}

.erin-unlock--full {
    border-color: rgba(200, 140, 140, 0.3);
    background: rgba(200, 140, 140, 0.07);
}

.erin-unlock--full:hover {
    background: rgba(200, 140, 140, 0.14);
    border-color: rgba(200, 140, 140, 0.45);
}

.erin-unlock--punish {
    border-color: rgba(180, 60, 60, 0.35);
    background: rgba(160, 40, 40, 0.08);
    color: #c88080;
}

.erin-unlock--punish:hover {
    background: rgba(160, 40, 40, 0.14);
    border-color: rgba(180, 60, 60, 0.5);
    color: #d09090;
}

/* Erin tool buttons — warm and soft, 2x2 grid */
.erin-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    max-width: 22rem;
    margin: 0 auto;
}

.erin-tools--three-up {
    grid-template-columns: repeat(3, 1fr);
    max-width: 30rem;
}

.erin-section-label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: #b09080;
    letter-spacing: 0.04em;
    margin-top: 0.6rem;
}

.erin-section-label:first-child {
    margin-top: 0.2rem;
}

.erin-section-label::before,
.erin-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(200, 140, 120, 0.22);
}

.persona-helper {
    grid-column: 1 / -1;
    margin: -0.2rem 0 0.15rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #a88d80;
    text-align: center;
}

.erin-tool {
    background: transparent;
    border: 1px solid rgba(200, 140, 140, 0.2);
    color: #d0a898;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}

.erin-tool:hover {
    background: rgba(200, 140, 140, 0.08);
    border-color: rgba(200, 140, 140, 0.35);
    color: #e0b4a8;
}

.erin-tool:active {
    transform: scale(0.97);
}

/* ── Iain iOS readability boosts (mirrors viewer-erin) ─────────────────── */
.viewer-iain .game-ends-at {
    font-size: 0.875rem;
    color: #a0a0c0;
}
.viewer-iain .history-toggle {
    font-size: 1rem;
    color: #d4b078;
    min-height: 2.75rem;
    padding: 0.25rem 0;
}
.viewer-iain .history-toggle-counts {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem 0.4rem;
    font-size: 0.875rem;
    color: #a89880;
}
.viewer-iain .history-heading {
    font-size: 0.875rem;
    color: #b0a080;
}
.viewer-iain .history-card {
    padding: 0.75rem 1rem;
}
.viewer-iain .history-card-text {
    font-size: 1rem;
}
.viewer-iain .history-card-time {
    font-size: 0.875rem;
    color: #9a8878;
}
.viewer-iain .control-status-pill {
    padding: 0.5rem 1.4rem;
    font-size: 1rem;
}

/* ── Iain instruction banner buttons ────────────────────────────────────── */
.viewer-iain .btn-consequence-done {
    background: rgba(140, 170, 200, 0.08);
    border: 1px solid rgba(140, 170, 200, 0.25);
    color: #a0c0d8;
}

.viewer-iain .btn-consequence-done:hover {
    background: rgba(140, 170, 200, 0.14);
    border-color: rgba(140, 170, 200, 0.4);
    color: #b8d4e8;
}

.viewer-iain .btn-fail {
    background: transparent;
    border: 1px solid rgba(140, 170, 200, 0.18);
    color: #90b0c8;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
}

.viewer-iain .btn-fail:hover {
    background: rgba(140, 170, 200, 0.08);
    border-color: rgba(140, 170, 200, 0.3);
    color: #b0ccde;
}

/* ── Erin compact countdown ─────────────────────────────────────────────── */
.viewer-erin .countdown {
    padding: 0.75rem 0.5rem;
    margin: 0.25rem 0;
}

.viewer-erin .countdown-value {
    font-size: 2rem;
    color: #c8b8a0;
}

.viewer-erin .countdown-label {
    font-size: 0.875rem;
    margin-top: 0.2rem;
}

.viewer-erin .game-progress-wrap {
    margin: 0.4rem 0 0.5rem;
}

/* ── Erin iOS readability boosts ────────────────────────────────────────── */

/* Progress labels — extra boost for Erin */
.viewer-erin .game-ends-at {
    font-size: 0.875rem;
    color: #a0a0c0;
}

/* History toggle — big tap target, clearly visible */
.viewer-erin .history-toggle-wrap {
    padding: 0.9rem 0;
    border-top: 1px solid rgba(180, 150, 100, 0.18);
    margin-top: 0.75rem;
}
.viewer-erin .history-toggle {
    font-size: 1rem;
    color: #d4b078;
    min-height: 2.75rem;
    padding: 0.25rem 0;
}
.viewer-erin .history-toggle:hover {
    color: #e8c888;
}
.viewer-erin .history-toggle-counts {
    font-size: 0.875rem;
    color: #a89880;
}
.viewer-erin .history-count-dot {
    font-size: 0.8rem;
    color: #806a58;
}

/* History content — readable heading and timestamps */
.viewer-erin .history-heading {
    font-size: 0.875rem;
    color: #b0a080;
}
.viewer-erin .history-card {
    padding: 0.75rem 1rem;
}
.viewer-erin .history-card-text {
    font-size: 1rem;
}
.viewer-erin .history-card-time {
    font-size: 0.875rem;
    color: #9a8878;
}

/* Footer links — readable and tap-friendly */
.viewer-erin .control-footer {
    padding-top: 1rem;
    gap: 2rem;
}
.viewer-erin .control-footer-link {
    font-size: 0.875rem;
    color: #9a8878;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}
.viewer-erin .control-footer-link:hover {
    color: #c8b090;
}
.viewer-erin .control-footer-link--danger {
    color: #a07070;
}
.viewer-erin .control-footer-link--danger:hover {
    color: #c89090;
}

/* Lock now button — iOS tap target */
.viewer-erin .btn-lock-now-inline {
    font-size: 0.95rem;
    padding: 0.7rem 2.5rem;
    min-height: 2.75rem;
}

/* Status pill — slightly more padding for iOS */
.viewer-erin .control-status-pill {
    padding: 0.5rem 1.4rem;
    font-size: 1rem;
}

/* Hide % elapsed — Erin needs end date, not percentage */
.viewer-erin .game-progress-pct {
    display: none;
}

/* History counts — wrap on narrow iOS screens */
.viewer-erin .history-toggle-counts {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem 0.4rem;
}

.viewer-erin .persona-helper,
.viewer-iain .persona-helper {
    font-size: 0.9rem;
}

/* ── Per-persona body-level layout ──────────────────────────────────────── */

/* Hide header — neither player needs the title or Rulesets link mid-game */
body.is-erin header,
body.is-iain header {
    display: none;
}

/* Strip the brown game-card frame — saves ~160px of wasted space on iOS */
.game-card:has(.control-layout),
body.is-erin .game-card,
body.is-iain .game-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

/* Tighten the container padding for both players */
body.is-erin .container,
body.is-iain .container {
    padding: 1rem;
}

/* ── Erin inline forms — warm styling ──────────────────────────────────── */
.control-layout.is-erin .denial-inline-form {
    background: rgba(200, 140, 140, 0.04);
    border: 1px solid rgba(200, 140, 140, 0.12);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.control-layout.is-erin .denial-inline-form .btn-instruction {
    background: rgba(200, 140, 140, 0.08);
    border: 1px solid rgba(200, 140, 140, 0.25);
    color: #d4a0a0;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.control-layout.is-erin .denial-inline-form .btn-instruction:hover {
    background: rgba(200, 140, 140, 0.14);
    border-color: rgba(200, 140, 140, 0.4);
    color: #e0b0b0;
}

.control-layout.is-erin .denial-inline-form .btn-secondary {
    background: transparent;
    border: 1px solid rgba(180, 150, 100, 0.18);
    color: #a89880;
    padding: 0.7rem 1.1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-left: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.control-layout.is-erin .denial-inline-form .btn-secondary:hover {
    border-color: rgba(180, 150, 100, 0.3);
    color: #c0b098;
}

.control-layout.is-erin .denial-inline-form .instruction-preset-btn {
    background: rgba(200, 140, 140, 0.04);
    border: 1px solid rgba(200, 140, 140, 0.12);
    color: #b09080;
    border-radius: 20px;
}

.control-layout.is-erin .denial-inline-form .instruction-preset-btn:hover {
    border-color: rgba(200, 140, 140, 0.3);
    color: #d4a0a0;
}

.control-layout.is-erin .denial-inline-form .instruction-preset-btn.active {
    border-color: rgba(200, 140, 140, 0.35);
    background: rgba(200, 140, 140, 0.08);
    color: #d4a0a0;
}

.control-layout.is-erin .denial-inline-form .denial-textarea {
    background: rgba(30, 26, 20, 0.6);
    border-color: rgba(200, 140, 140, 0.1);
}

.control-layout.is-erin .denial-inline-form .denial-textarea:focus {
    border-color: rgba(200, 140, 140, 0.3);
}

.control-layout.is-erin .denial-inline-form .denial-due-input {
    border-color: rgba(200, 140, 140, 0.1);
}

.control-layout.is-erin .denial-inline-form .denial-due-input:focus {
    border-color: rgba(200, 140, 140, 0.3);
}

/* ── Control game footer ────────────────────────────────────────────────── */
.control-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(180, 150, 100, 0.06);
}

.control-footer-link {
    background: none;
    border: none;
    color: #8a7860;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.2rem 0;
    letter-spacing: 0.02em;
    transition: color 0.15s;
    font-style: italic;
}

.control-footer-link:hover {
    color: #907a58;
}

.control-footer-link--danger {
    color: #906060;
}

.control-footer-link--danger:hover {
    color: #a06060;
}

/* ── Iain controls ─────────────────────────────────────────────────────── */
.iain-controls {
    margin: 0.3rem 0 0.6rem;
}

.iain-tools {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.iain-tool {
    background: transparent;
    border: 1px solid rgba(140, 170, 200, 0.2);
    color: #a0bcd0;
    padding: 0.65rem 1.1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
    min-width: 8.75rem;
}

.iain-tool:hover {
    background: rgba(140, 170, 200, 0.08);
    border-color: rgba(140, 170, 200, 0.35);
    color: #b8d4e8;
}

.iain-tool:active {
    transform: scale(0.97);
}

.iain-tool:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* ── Control lock section — hero interaction ────────────────────────────── */
.control-lock-section {
    margin: 0.5rem 0 0.6rem;
    padding: 0.6rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(180, 150, 100, 0.08);
}

.duration-pills {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.duration-pill {
    background: transparent;
    border: 1px solid rgba(180, 150, 100, 0.12);
    color: #907a58;
    padding: 0.55rem 1.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    letter-spacing: 0.02em;
}

.duration-pill:hover {
    background: rgba(200, 160, 80, 0.06);
    border-color: rgba(200, 160, 80, 0.3);
    color: #d4b070;
}

.duration-pill:active {
    background: rgba(200, 160, 80, 0.1);
    transform: scale(0.95);
}

/* ── Inline lock-now button (inside countdown) ─────────────────────────── */
.lock-now-inline {
    margin-top: 0.5rem;
}

.btn-lock-now-inline {
    background: transparent;
    border: 1px solid rgba(180, 40, 40, 0.3);
    color: #c86060;
    padding: 0.65rem 2rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.15s ease;
}

.btn-lock-now-inline:hover {
    background: rgba(180, 40, 40, 0.08);
    border-color: rgba(180, 40, 40, 0.5);
}

.btn-lock-now-inline:active {
    transform: scale(0.97);
}

/* Unlock type labels in countdown */
.unlock-type-label {
    font-weight: 500;
}

.unlock-type-full {
    color: #6a9a6a;
}

.unlock-type-edge {
    color: #c8a060;
}

/* ── Activity lock banner ────────────────────────────────────────────────── */
.activity-lock-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1a1500;
    border: 1px solid #6a4800;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.activity-lock-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.activity-lock-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.activity-lock-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #8a6820;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.activity-lock-countdown {
    font-size: 1.2rem;
    color: #d4941a;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Control status pill ─────────────────────────────────────────────────── */
.control-status {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.control-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1.1rem;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.control-status-locked {
    background: rgba(180, 40, 40, 0.15);
    border: 1px solid rgba(180, 40, 40, 0.45);
    color: #c86060;
}

.control-status-unlocked {
    background: rgba(40, 150, 60, 0.15);
    border: 1px solid rgba(40, 150, 60, 0.45);
    color: #50b060;
}

/* ── Erin says banner (shown to Iain after unlock with message) ─────────── */
.erin-says-banner {
    background: rgba(110, 75, 10, 0.18);
    border: 1px solid rgba(185, 135, 35, 0.35);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.erin-says-label {
    font-size: 0.6rem;
    color: #b08030;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.erin-says-text {
    font-size: 1.15rem;
    color: #e8c060;
    font-style: italic;
    line-height: 1.45;
}

/* ── Unlock prompt screen ────────────────────────────────────────────────── */
.unlock-prompt {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0.25rem;
    max-width: 24rem;
    margin: 0 auto;
}

.unlock-prompt-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 400;
    color: #e0b8aa;
    text-align: center;
    line-height: 1.2;
}

.unlock-prompt-sub {
    font-size: 0.85rem;
    color: #9a8070;
    text-align: center;
    margin-top: -1rem;
}

.unlock-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.unlock-prompt-duration-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.unlock-prompt-duration-btn {
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(200, 140, 140, 0.2);
    background: rgba(200, 140, 140, 0.04);
    color: #c8a09a;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.unlock-prompt-duration-btn:hover {
    background: rgba(200, 140, 140, 0.1);
    border-color: rgba(200, 140, 140, 0.35);
    color: #e0b4b4;
}

.unlock-prompt-duration-btn.selected {
    background: rgba(200, 140, 140, 0.16);
    border-color: rgba(200, 140, 140, 0.52);
    color: #ecc0b8;
}

.unlock-prompt-section-label {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: #ba9a8a;
    padding-left: 0.1rem;
}

.unlock-prompt-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.unlock-prompt-radio-label {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(200, 140, 140, 0.2);
    background: rgba(200, 140, 140, 0.04);
    color: #c8a09a;
    font-size: 0.95rem;
    line-height: 1.45;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.unlock-prompt-radio-label:hover {
    background: rgba(200, 140, 140, 0.08);
    border-color: rgba(200, 140, 140, 0.32);
    color: #e0b4b4;
}

.unlock-prompt-radio-label.selected {
    background: rgba(200, 140, 140, 0.13);
    border-color: rgba(200, 140, 140, 0.45);
    color: #ecc0b8;
}

.unlock-prompt-radio-label input[type="radio"] {
    display: none;
}

.unlock-prompt-textarea-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.unlock-prompt-textarea-label {
    font-size: 0.8rem;
    color: #9a8070;
    letter-spacing: 0.01em;
}

.unlock-prompt-textarea {
    width: 100%;
    background: rgba(30, 15, 12, 0.7);
    border: 1px solid rgba(200, 140, 140, 0.22);
    border-radius: 8px;
    color: #e8c8bc;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    padding: 0.75rem 0.9rem;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.unlock-prompt-textarea:focus {
    outline: none;
    border-color: rgba(200, 140, 140, 0.42);
}

.unlock-prompt-textarea::placeholder {
    color: #6a5050;
}

.unlock-prompt-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1rem;
}

.unlock-prompt-actions form {
    width: 100%;
}

.btn-unlock-send {
    width: 100%;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(200, 140, 140, 0.32);
    background: rgba(200, 140, 140, 0.08);
    color: #e8c0b8;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-unlock-send:hover {
    background: rgba(200, 140, 140, 0.14);
    border-color: rgba(200, 140, 140, 0.48);
    color: #f0c8c0;
}

.btn-unlock-send:active {
    transform: scale(0.98);
}

.btn-unlock-send:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.unlock-prompt-skip-form {
    display: flex;
    justify-content: center;
}

.unlock-prompt-skip {
    background: none;
    border: none;
    color: #6a5a52;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    transition: color 0.12s;
}

.unlock-prompt-skip:hover {
    color: #9a8070;
}

/* ── Punishment banner (shown to Iain when punishment active) ───────────── */
.punishment-banner {
    background: rgba(140, 30, 30, 0.15);
    border: 1px solid rgba(180, 50, 50, 0.4);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.punishment-banner-label {
    font-size: 0.6rem;
    color: #c05050;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.punishment-banner-text {
    font-size: 1.15rem;
    color: #e08080;
    font-style: italic;
    line-height: 1.45;
}

.punishment-banner-days {
    font-size: 0.78rem;
    color: #a06060;
    margin-top: 0.4rem;
}

/* ── History collapsible ────────────────────────────────────────────────── */
.history-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(180, 150, 100, 0.08);
    margin-top: 0.5rem;
}

.history-toggle {
    background: none;
    border: none;
    color: #c0a870;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.history-toggle:hover {
    color: #c8a060;
}

.history-toggle-chevron {
    transition: transform 0.2s ease;
}

.history-toggle--open .history-toggle-chevron {
    transform: rotate(180deg);
}

.history-toggle-counts {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #9a8878;
    letter-spacing: 0.01em;
}

.history-toggle-counts span:not(.history-count-dot) {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(120, 96, 70, 0.12);
    border: 1px solid rgba(170, 140, 100, 0.14);
    line-height: 1;
}

.history-count-dot {
    color: #6a5e52;
    font-size: 0.75rem;
}

.control-history {
    display: none;
    padding-top: 0.25rem;
}

.control-history--open {
    display: block;
}

/* ── Control unlock button (appears when lock timer expires) ────────────── */
.control-needs-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.btn-control-unlock {
    display: inline-block;
    text-decoration: none;
    background: linear-gradient(180deg, #2a1e00 0%, #1a1200 100%);
    border: 1px solid #7a5a00;
    color: #d4a820;
    padding: 0.875rem 2.75rem;
    font-size: 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-control-unlock:hover {
    background: linear-gradient(180deg, #3a2c00 0%, #2a1e00 100%);
    border-color: #a07a00;
    color: #f0c830;
}

.btn-control-unlock:active {
    transform: scale(0.97);
}

/* ── Control mode option (create game) ─────────────────────────────────── */
.control-mode-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background: #1e1a14;
    border: 1px solid #342818;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.control-mode-option input[type="radio"] {
    display: none;
}

.control-mode-option:has(input:checked) {
    border-color: #c8a060;
    background: #201808;
}

.control-mode-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e0d4c0;
}

.control-mode-desc {
    font-size: 0.8rem;
    color: #9a9090;
    line-height: 1.3;
}

/* ── Chat unread badge ───────────────────────────────────────────────────── */
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(204, 68, 68, 0.7); }
    50% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(204, 68, 68, 0); }
}

@keyframes btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204, 68, 68, 0.3); }
    50% { box-shadow: 0 0 8px 2px rgba(204, 68, 68, 0.25); }
}

.chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    background: #c44;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-left: 0.35rem;
    vertical-align: middle;
    animation: badge-pulse 1.8s ease-in-out infinite;
}

.btn-chat.has-unread,
.erin-tool.has-unread,
.iain-tool.has-unread {
    animation: btn-glow 1.8s ease-in-out infinite;
    border-color: rgba(204, 68, 68, 0.4) !important;
}


/* Invitation buttons — compact size, not full width */
.inv-btn {
    width: auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    margin-left: 0;
}

.inv-btn + .inv-btn {
    margin-left: 0.4rem;
}

.inv-actions-cell {
    white-space: nowrap;
}

/* Notice row — pill + break link side by side */
.notice-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.break-link-form {
    display: inline;
}

.btn-break-link {
    background: rgba(180, 150, 100, 0.08);
    border: 1px solid rgba(180, 150, 100, 0.15);
    color: #a09078;
    font-size: 0.68rem;
    cursor: pointer;
    padding: 0.25rem 0.7rem;
    letter-spacing: 0.03em;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.btn-break-link:hover {
    background: rgba(180, 150, 100, 0.14);
    border-color: rgba(180, 150, 100, 0.25);
    color: #c0a880;
}

/* Break card — warm glow in the dark */
@keyframes breakFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes moonGlow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 3px rgba(200, 170, 100, 0.3)); }
    50% { opacity: 0.7; filter: drop-shadow(0 0 8px rgba(200, 170, 100, 0.5)); }
}

.break-card {
    margin: 0.8rem 0 0.5rem;
    background: #161310;
    border: 1px solid rgba(180, 150, 100, 0.15);
    border-radius: 14px;
    padding: 2rem 1.4rem 1.6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: breakFadeIn 0.4s ease-out;
}

.break-card-glow {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse, rgba(200, 160, 80, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.break-card-inner {
    position: relative;
    z-index: 1;
}

.break-card-icon {
    color: #c4a06a;
    margin-bottom: 0.8rem;
    animation: moonGlow 4s ease-in-out infinite;
}

.break-card-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    color: #d4b88a;
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
}

.break-card-body {
    font-size: 0.78rem;
    color: #7a6e5a;
    line-height: 1.65;
    margin-bottom: 1.4rem;
    letter-spacing: 0.01em;
}

.btn-resume {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(200, 160, 80, 0.3);
    color: #c4a06a;
    padding: 0.5rem 1.5rem;
    border-radius: 22px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.25s ease;
}

.btn-resume:hover {
    background: rgba(200, 160, 80, 0.08);
    border-color: rgba(200, 160, 80, 0.5);
    color: #dcc090;
    box-shadow: 0 0 16px rgba(200, 160, 80, 0.1);
}

.btn-resume:active {
    background: rgba(200, 160, 80, 0.12);
}

.chat-paused-msg {
    text-align: center;
    color: #7a6e5a;
    font-size: 0.82rem;
    padding: 0.9rem 1rem;
    font-style: italic;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS / Mobile global optimisations
   ══════════════════════════════════════════════════════════════════════════ */

/* Hide header when a game is active — saves ~80px of wasted real estate */
body.has-active-game header {
    display: none;
}

/* When no game is active but IS-erin identity is set (shouldn't normally
   happen, but keep consistent with the per-persona rule above) */
body.has-active-game.is-erin header {
    display: none;
}

@media (max-width: 480px) {
    /* Tighten outer container */
    .container {
        padding: 0.75rem 1rem;
    }

    /* Strip game card frame — saves 128px horizontal and removes visual clutter */
    .game-card,
    .game-page,
    .create-game {
        padding: 1.25rem 1rem;
        border-radius: 6px;
    }

    /* Modal sheet — less padding on small screens */
    .modal-sheet {
        padding: 1rem;
    }

    /* Countdown value — slightly smaller on very narrow screens */
    .countdown-value {
        font-size: 4rem;
    }

    /* Instruction banner — more compact */
    .instruction-banner {
        padding: 0.75rem 1rem;
    }

    /* Denial actions row — allow wrap */
    .denial-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .challenge-actions,
    .game-footer,
    .instruction-banner-btns,
    .action-inputs,
    .add-challenge-row,
    .day-input,
    .time-inputs,
    .radio-group,
    .rs-btn-row,
    .rs-edit-btn-row {
        flex-direction: column;
    }

    .challenge-actions > form,
    .game-footer > a,
    .game-footer > form,
    .instruction-banner-btns > form,
    .action-input,
    .add-day-select {
        width: 100%;
    }

    .challenge-actions .btn,
    .game-footer .btn,
    .instruction-banner-btns .btn,
    .btn-cancel-game,
    .btn-ghost {
        width: 100%;
    }

    .history-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-toggle-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .history-toggle-counts {
        justify-content: flex-start;
        gap: 0.3rem;
    }

    .history-toggle-counts span:not(.history-count-dot) {
        min-height: 1.9rem;
        padding: 0.15rem 0.45rem;
    }

    .history-count-dot {
        display: none;
    }

    .history-card-time {
        white-space: normal;
    }

    .erin-tools {
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }

    .erin-tools--three-up {
        grid-template-columns: repeat(3, 1fr);
    }

    .erin-tool {
        width: 100%;
    }

    .iain-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }

    .iain-tool {
        width: 100%;
        min-width: 0;
    }

    .persona-helper,
    .erin-welcome-body,
    .iain-welcome-body {
        font-size: 0.92rem;
    }

    .notification-prompt {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    .notification-prompt .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
    }

    /* Ensure all interactive buttons meet 44px iOS tap target */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-instruction,
    .btn-complete,
    .btn-fail,
    .btn-ghost {
        min-height: 2.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOW-LIGHT MODE  —  activated by html.low-light
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text-size toggle in the page header. */
.low-light-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    background: #1a1610;
    border: 1px solid #3a3028;
    color: #c8b090;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.low-light-toggle:hover {
    border-color: #5a4e40;
    background: #221c14;
}

html.low-light .low-light-toggle {
    background: #1a1610;
    border-color: #5a4e40;
    color: #e8c870;
}

/* Body */
html.low-light body {
    background: #080604;
    color: #e8dfd0;
    font-family: 'Lora', Georgia, serif;
    font-size: 1.2rem;
}

/* Navigation */
html.low-light .nav-link {
    background: #0e0c0a;
    border-color: #2a2218;
    color: #c8baa9;
}

html.low-light .nav-link:hover {
    background: #160f0a;
    border-color: #3a2e20;
    color: #d8c8b8;
}

html.low-light .global-identity-btn {
    background: #0e0c0a;
    border-color: #2a2218;
    color: #b8a880;
}

html.low-light .global-identity-btn.active {
    background: #1a2018;
    border-color: #3a5a40;
    color: #7ab890;
}

html.low-light .global-identity-btn:hover {
    background: #160f0a;
    border-color: #3a2e20;
}

/* Cards and primary surfaces */
html.low-light .game-card,
html.low-light .game-page,
html.low-light .create-game {
    background: #0e0c0a;
    border-color: #2a2218;
}

html.low-light .denial-inline-form {
    background: #0e0c0a;
    border-color: #2a2218;
}

/* Modal */
html.low-light .modal-overlay {
    background: rgba(0, 0, 0, 0.85);
}

html.low-light .modal-sheet {
    background: #0e0c0a;
    border-color: #2a2218;
}

html.low-light .modal-title {
    color: #c8baa9;
}

html.low-light .modal-close {
    color: #5a5048;
}

/* Chat — message bubbles */
html.low-light .msg-text {
    background: #1a1510;
    border-color: #3a2e20;
    color: #e8dfd0;
}

html.low-light .msg-erin .msg-text {
    background: #160e1a;
    border-color: #3a2a48;
}

html.low-light .msg-sender {
    color: #d4956a;
}

html.low-light .msg-erin .msg-sender {
    color: #a87dba;
}

html.low-light .msg-time {
    color: #8a7a68;
}

html.low-light .chat-empty {
    color: #8a7a68;
}

/* Chat — reaction buttons */
html.low-light .reaction-btn {
    background: #080604;
    border-color: #2a2218;
    color: #8a7a68;
}

html.low-light .reaction-btn.reacted {
    background: #2a1a2a;
    border-color: #8a5aaa;
    color: #c898e8;
}

/* Chat — compose area */
html.low-light #chat-compose {
    border-top-color: #2a2218;
}

html.low-light #chat-compose textarea {
    background: #100e0c;
    border-color: #3a2e20;
    color: #e8dfd0;
}

html.low-light #chat-compose textarea:focus {
    border-color: #4a3e2e;
}

html.low-light .chat-identity-label {
    color: #8a7a68;
}

html.low-light .btn-chat-sender {
    background: #1a1510;
    border-color: #4a3a28;
    color: #b8a890;
}

html.low-light .btn-chat-sender.active {
    background: #1a2018;
    border-color: #3a5a40;
    color: #7ab890;
}

/* Buttons */
html.low-light .btn-primary {
    background: #2a1e10;
    border-color: #5a3e20;
    color: #c8a870;
}

html.low-light .btn-primary:hover {
    background: #381e10;
    color: #e0c890;
}

html.low-light .btn-secondary {
    background: #1a1510;
    border-color: #3a2e20;
    color: #8a7a68;
}

html.low-light .btn-secondary:hover {
    background: #241c12;
    color: #b8a880;
}

html.low-light .btn-danger {
    background: #180e0e;
    border-color: #3a1818;
    color: #a06060;
}

html.low-light .control-footer-link {
    color: #9a8870;
}

html.low-light .control-footer-link--danger {
    color: #a07060;
}

/* Forms */
html.low-light .denial-textarea {
    background: #100e0c;
    border-color: #3a2e20;
    color: #e8dfd0;
}

html.low-light .denial-textarea:focus {
    border-color: #4a3e2e;
}

html.low-light .denial-due-input {
    background: #100e0c;
    border-color: #3a2e20;
    color: #e8dfd0;
}

html.low-light .denial-due-input:focus {
    border-color: #4a3e2e;
}

html.low-light .instruction-preset-btn {
    background: #100e0c;
    border-color: #2a2218;
    color: #7a6a58;
}

/* Activity option buttons (modal) */
html.low-light .activity-option-btn {
    background: #1a1510;
    border-color: #3a2e20;
    color: #c8b898;
}

/* Erin welcome card */
html.low-light .erin-welcome {
    background: rgba(180, 100, 100, 0.04);
    border-color: rgba(180, 100, 100, 0.1);
}

html.low-light .erin-welcome-title {
    color: #d0a898;
}

html.low-light .erin-welcome-body {
    color: #9a7a6a;
}

/* Iain welcome card */
html.low-light .iain-welcome {
    background: rgba(100, 130, 170, 0.04);
    border-color: rgba(100, 130, 170, 0.1);
}

html.low-light .iain-welcome-title {
    color: #a0b8d0;
}

html.low-light .iain-welcome-body {
    color: #7a8a9a;
}

/* Erin / Iain tool buttons */
html.low-light .erin-tool {
    border-color: rgba(200, 140, 140, 0.15);
    color: #c8a090;
}

html.low-light .erin-tool:hover {
    background: rgba(200, 140, 140, 0.06);
    border-color: rgba(200, 140, 140, 0.28);
    color: #d8b0a0;
}

html.low-light .iain-tool {
    border-color: rgba(140, 170, 200, 0.15);
    color: #90a8c0;
}

html.low-light .iain-tool:hover {
    background: rgba(140, 170, 200, 0.06);
    border-color: rgba(140, 170, 200, 0.28);
    color: #a8c0d8;
}

/* ==========================================================================
   MIDNIGHT ROSE ACCESSIBLE REFRESH
   Default theme optimized for poor eyesight in low-light use.
   ========================================================================== */

:root {
    color-scheme: dark;
    --mr-bg: #100d12;
    --mr-bg-deep: #0a080c;
    --mr-surface: #1c1620;
    --mr-surface-raised: #271d2a;
    --mr-surface-soft: #211824;
    --mr-border: #4a3946;
    --mr-border-strong: #756171;
    --mr-text: #fff8fa;
    --mr-text-soft: #e8dce4;
    --mr-text-muted: #cfc0ca;
    --mr-text-dim: #b9aab5;
    --mr-rose: #ff6f9a;
    --mr-rose-hover: #ff86aa;
    --mr-rose-soft: rgba(255, 111, 154, 0.14);
    --mr-rose-border: rgba(255, 111, 154, 0.48);
    --mr-gold: #ffd37a;
    --mr-gold-soft: rgba(255, 211, 122, 0.12);
    --mr-success: #8fe3b0;
    --mr-success-bg: rgba(143, 227, 176, 0.14);
    --mr-danger: #ff8a8a;
    --mr-danger-bg: rgba(255, 138, 138, 0.14);
    --mr-info: #9fd3ff;
    --mr-info-bg: rgba(159, 211, 255, 0.12);
    --mr-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

html {
    background: var(--mr-bg);
}

html.low-light {
    font-size: 112.5%;
}

body,
html.low-light body {
    background:
        linear-gradient(180deg, rgba(255, 111, 154, 0.035), transparent 16rem),
        var(--mr-bg);
    color: var(--mr-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 1.125rem;
    line-height: 1.65;
}

html.low-light body {
    font-size: 1.18rem;
}

body::selection {
    background: var(--mr-rose);
    color: #16080d;
}

a {
    color: var(--mr-gold);
    text-decoration-color: rgba(255, 211, 122, 0.55);
    text-underline-offset: 0.16rem;
}

a:hover {
    color: #ffe3a3;
}

button,
input,
textarea,
select {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mr-gold);
    outline-offset: 3px;
}

.dev-banner {
    background: #5a1530;
    color: #ffe0ea;
}

header h1 a {
    color: var(--mr-text);
    font-weight: 800;
    letter-spacing: 0.08em;
}

header h1 a:hover {
    color: var(--mr-text);
}

.low-light-toggle {
    min-width: 4.5rem;
    min-height: 2.55rem;
    background: var(--mr-surface-raised);
    border-color: var(--mr-border-strong);
    color: var(--mr-text);
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: none;
}

.low-light-toggle:hover,
html.low-light .low-light-toggle,
html.low-light .low-light-toggle:hover {
    background: #37243c;
    border-color: var(--mr-rose);
    color: var(--mr-text);
}

.nav-link,
.global-identity-btn,
.global-logout-btn,
.global-session-user,
html.low-light .nav-link,
html.low-light .global-identity-btn {
    background: var(--mr-surface);
    border-color: var(--mr-border);
    color: var(--mr-text-soft);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.nav-link:hover,
.global-identity-btn:hover,
.global-logout-btn:hover,
html.low-light .nav-link:hover,
html.low-light .global-identity-btn:hover {
    background: var(--mr-surface-raised);
    border-color: var(--mr-border-strong);
    color: var(--mr-text);
}

.global-identity-btn.active,
.global-session-user,
html.low-light .global-identity-btn.active {
    background: var(--mr-success-bg);
    border-color: rgba(143, 227, 176, 0.58);
    color: var(--mr-success);
}

.game-card,
.game-page,
.create-game,
.login-panel,
.ruleset-mgmt-card,
.rs-new-card,
.ruleset-context,
.denial-stats-row,
.history-card,
.notification-prompt,
.alert-content,
.modal-sheet,
.activity-modal-sheet,
.denial-inline-form,
.control-mode-option,
.break-card-inner,
html.low-light .game-card,
html.low-light .game-page,
html.low-light .create-game,
html.low-light .modal-sheet,
html.low-light .denial-inline-form {
    background: var(--mr-surface);
    border-color: var(--mr-border);
    color: var(--mr-text);
    box-shadow: var(--mr-shadow);
}

.game-card:has(.control-layout),
body.is-erin .game-card,
body.is-iain .game-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

h2,
.game-header h2,
.modal-title,
.login-panel h1,
.notice,
.rules-name,
.break-card-heading {
    color: var(--mr-text);
    font-weight: 800;
}

.subtitle,
.game-duration,
.help-about,
.help-section p,
.help-list dd,
.rules-text,
.history-card-text,
.notification-prompt p,
.alert-content p,
.rs-context,
.ruleset-context-summary,
.modal-field label,
.form-group > label,
.denial-form-help,
.persona-helper,
.erin-welcome-body,
.iain-welcome-body {
    color: var(--mr-text-soft);
}

.empty-state,
.history-card-time,
.history-heading,
.period-badge,
.countdown-label,
.countdown-label-top,
.game-progress-pct,
.game-ends-at,
.rs-date,
.rs-empty,
.modal-user-label,
.chat-identity-label,
.modal-field label,
.weights-label-text,
.erin-random-toggle,
.control-footer-link,
html.low-light .msg-time,
html.low-light .chat-empty,
html.low-light .chat-identity-label {
    color: var(--mr-text-muted);
}

.notice {
    color: var(--mr-rose);
    letter-spacing: 0.06em;
}

.game-progress-bar {
    background: var(--mr-bg-deep);
}

.game-progress-fill {
    background: linear-gradient(90deg, var(--mr-rose) 0%, var(--mr-gold) 100%);
    box-shadow: 0 0 14px rgba(255, 111, 154, 0.35);
}

.game-type-badge,
.rs-tag,
.ruleset-context-tag,
.rs-group-header,
.period-badge,
.control-status-pill {
    background: var(--mr-surface-raised);
    border-color: var(--mr-border);
    color: var(--mr-text-soft);
}

.btn,
.login-submit,
.btn-rs,
.btn-ghost,
.btn-cancel-game,
.erin-tool,
.iain-tool,
.erin-unlock,
.btn-chat-sender,
.reaction-btn,
.activity-option-btn,
.instruction-preset-btn,
.unlock-prompt-duration-btn,
.unlock-prompt-radio-label,
.erin-regenerate-btn,
.btn-break-link,
.btn-resume,
html.low-light .btn-secondary,
html.low-light .activity-option-btn,
html.low-light .instruction-preset-btn,
html.low-light .btn-chat-sender {
    min-height: 3rem;
    background: var(--mr-surface-raised);
    border-color: var(--mr-border);
    color: var(--mr-text-soft);
    font-weight: 750;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.login-submit,
.btn-rs,
.btn-ghost,
.btn-cancel-game,
.erin-tool,
.iain-tool,
.erin-unlock,
.btn-chat-sender,
.activity-option-btn,
.instruction-preset-btn,
.unlock-prompt-duration-btn,
.unlock-prompt-radio-label,
.erin-regenerate-btn,
.btn-break-link,
.btn-resume,
.control-footer-link {
    font-size: 1rem;
}

.erin-welcome-body,
.iain-welcome-body,
.persona-helper,
.history-card-text,
.rules-text,
.help-section p,
.help-list dd,
.notification-prompt p,
.alert-content p,
.rs-context,
.ruleset-context-summary {
    font-size: 1rem;
}

.control-footer-link {
    min-height: 3rem;
    min-width: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.viewer-iain .btn-fail,
.viewer-erin .btn-fail,
.viewer-iain .btn-consequence-done,
.viewer-erin .btn-consequence-done,
.viewer-iain .btn-lock-now-inline,
.viewer-erin .btn-lock-now-inline {
    font-size: 1rem;
}

.btn:hover,
.btn-rs:hover,
.btn-ghost:hover,
.erin-tool:hover,
.iain-tool:hover,
.erin-unlock:hover,
.btn-chat-sender:hover:not(.active),
.reaction-btn:hover,
.activity-option-btn:hover,
.instruction-preset-btn:hover,
.unlock-prompt-duration-btn:hover,
.unlock-prompt-radio-label:hover,
.erin-regenerate-btn:hover,
.btn-resume:hover {
    background: #35263a;
    border-color: var(--mr-border-strong);
    color: var(--mr-text);
}

.btn-primary,
.login-submit,
.btn-control-unlock,
.btn-unlock-send,
html.low-light .btn-primary {
    background: var(--mr-rose);
    border-color: var(--mr-rose);
    color: #18070d;
    font-weight: 900;
}

.btn-primary:hover,
.login-submit:hover,
.btn-control-unlock:hover,
.btn-unlock-send:hover,
html.low-light .btn-primary:hover {
    background: var(--mr-rose-hover);
    border-color: var(--mr-rose-hover);
    color: #18070d;
}

.btn-secondary,
.btn-ghost,
.global-logout-btn {
    background: var(--mr-surface);
    border-color: var(--mr-border-strong);
    color: var(--mr-text);
}

.btn-danger,
.btn-cancel-game,
.btn-consequence,
.btn-instruction,
.btn-fail,
.btn-lock-now-inline,
.btn-consequence-done,
.btn-consequence-submit,
.erin-unlock--punish,
html.low-light .btn-danger {
    background: var(--mr-danger-bg);
    border-color: rgba(255, 138, 138, 0.46);
    color: var(--mr-danger);
}

.btn-danger:hover,
.btn-cancel-game:hover,
.btn-consequence:hover,
.btn-instruction:hover,
.btn-fail:hover,
.btn-lock-now-inline:hover,
.btn-consequence-done:hover,
.btn-consequence-submit:hover,
.erin-unlock--punish:hover {
    background: rgba(255, 138, 138, 0.2);
    border-color: rgba(255, 138, 138, 0.7);
    color: #ffc0c0;
}

.btn-complete,
.btn-add,
.btn-chat,
.btn-chat-sender.active,
.countdown.ready,
.game-type-card:has(input:checked) .game-type-card-inner,
.radio-option:has(input:checked),
.control-mode-option:has(input:checked),
html.low-light .btn-chat-sender.active {
    background: var(--mr-success-bg);
    border-color: rgba(143, 227, 176, 0.52);
    color: var(--mr-success);
}

.btn-complete:hover,
.btn-add:hover,
.btn-chat:hover {
    background: rgba(143, 227, 176, 0.2);
    border-color: rgba(143, 227, 176, 0.7);
    color: #c5ffd8;
}

input,
textarea,
select,
.form-group input[type="text"],
.form-group input[type="number"],
.login-form input,
.login-form select,
.rs-edit-field input,
.rs-edit-field textarea,
.modal-field input[type="text"],
.modal-field input[type="datetime-local"],
.denial-textarea,
.denial-due-input,
.day-input input,
.time-input input,
.action-input input,
.custom-select select,
#chat-compose textarea,
.unlock-prompt-textarea,
html.low-light .denial-textarea,
html.low-light .denial-due-input,
html.low-light #chat-compose textarea {
    background: var(--mr-bg-deep);
    border-color: var(--mr-border);
    color: var(--mr-text);
    font-size: max(1rem, 18px);
}

input::placeholder,
textarea::placeholder,
.unlock-prompt-textarea::placeholder {
    color: #8f7d89;
}

input:focus,
textarea:focus,
select:focus,
.form-group input:focus,
.login-form input:focus,
.login-form select:focus,
.rs-edit-field input:focus,
.rs-edit-field textarea:focus,
.modal-field input:focus,
.denial-textarea:focus,
.denial-due-input:focus,
#chat-compose textarea:focus,
.unlock-prompt-textarea:focus,
html.low-light .denial-textarea:focus,
html.low-light .denial-due-input:focus,
html.low-light #chat-compose textarea:focus {
    outline: 3px solid var(--mr-gold);
    outline-offset: 2px;
    border-color: var(--mr-gold);
}

.custom-select select option {
    background: var(--mr-bg-deep);
    color: var(--mr-text);
}

.countdown-value,
.denial-stat-number {
    color: var(--mr-text);
    font-weight: 650;
}

.countdown.ready .countdown-value,
.today-challenges,
.next-action-type,
.control-status-unlocked,
.rs-group-lessons_learned_simple,
.rs-default-badge {
    color: var(--mr-success);
}

.control-status-locked,
.instruction-banner-label,
.consequence-banner-label,
.instruction-banner-message,
.consequence-banner-message {
    color: var(--mr-danger);
}

.erin-welcome,
.control-layout.is-erin .denial-inline-form {
    background: var(--mr-rose-soft);
    border-color: var(--mr-rose-border);
}

.erin-welcome-title,
.erin-grant-label,
.erin-section-label,
.identity-choice--erin,
.slot-reel-item,
.erin-tool,
.erin-unlock,
.unlock-prompt-title,
.btn-unlock-send {
    color: #ffc1d2;
}

.iain-welcome,
.iain-tool,
.identity-choice--iain {
    background: var(--mr-info-bg);
    border-color: rgba(159, 211, 255, 0.35);
}

.iain-welcome-title,
.iain-tool,
.identity-choice--iain {
    color: var(--mr-info);
}

.slot-reel,
.erin-unlock,
.erin-tool,
.control-layout.is-erin .denial-inline-form .instruction-preset-btn,
.unlock-prompt-duration-btn,
.unlock-prompt-radio-label {
    background: var(--mr-rose-soft);
    border-color: var(--mr-rose-border);
}

.msg-text,
html.low-light .msg-text {
    background: var(--mr-surface-raised);
    border-color: var(--mr-border);
    color: var(--mr-text);
    font-size: 1.05rem;
}

.msg-erin .msg-text,
html.low-light .msg-erin .msg-text {
    background: #311f35;
    border-color: rgba(255, 111, 154, 0.42);
}

.msg-sender,
html.low-light .msg-sender {
    color: var(--mr-gold);
    font-size: 0.9rem;
    font-weight: 850;
}

.msg-erin .msg-sender,
html.low-light .msg-erin .msg-sender {
    color: #ffc1d2;
}

.msg-time {
    color: var(--mr-text-muted);
}

.msg-text a {
    color: var(--mr-gold);
}

.reaction-btn {
    background: var(--mr-bg-deep);
    border-color: var(--mr-border);
    color: var(--mr-text-soft);
}

.reaction-btn.reacted,
html.low-light .reaction-btn.reacted {
    background: var(--mr-rose-soft);
    border-color: var(--mr-rose);
    color: #ffc1d2;
}

#chat-compose {
    border-top-color: var(--mr-border);
}

.modal-overlay,
html.low-light .modal-overlay {
    background: rgba(5, 4, 6, 0.88);
}

.modal-close {
    color: var(--mr-text-muted);
}

.modal-close:hover {
    color: var(--mr-text);
}

.login-form label,
.rs-edit-field label,
.modal-field label,
.form-group > label,
.denial-due-label,
.weights-label-text,
.action-input label,
.day-input label,
.time-input label {
    color: var(--mr-text-soft);
    font-size: 0.92rem;
    font-weight: 800;
}

.login-error {
    background: var(--mr-danger-bg);
    border-color: rgba(255, 138, 138, 0.55);
    color: #ffd6d6;
}

.rs-type-lessons_learned_simple,
.control-status-unlocked {
    background: var(--mr-success-bg);
    border-color: rgba(143, 227, 176, 0.45);
    color: var(--mr-success);
}

.rs-type-lessons_learned_locked,
.rs-group-lessons_learned_locked,
.viewer-iain .game-ends-at,
.viewer-erin .game-ends-at {
    color: var(--mr-info);
}

.rs-type-lessons_learned_daily,
.rs-group-lessons_learned_daily,
.btn-control-unlock,
.activity-lock-countdown,
.unlock-type-label--timed {
    color: var(--mr-gold);
}

.break-card-inner {
    background: linear-gradient(180deg, rgba(255, 111, 154, 0.1), var(--mr-surface));
}

.break-card-glow {
    background: radial-gradient(ellipse, rgba(255, 111, 154, 0.14) 0%, transparent 70%);
}

.break-card-heading,
.break-card-icon,
.btn-resume {
    color: var(--mr-gold);
}

.chat-unread-badge {
    background: var(--mr-rose);
    color: #18070d;
    font-weight: 900;
}

.debug-info,
.debug-info summary {
    color: var(--mr-text-muted);
}

@media (max-width: 560px) {
    body,
    html.low-light body {
        font-size: 1.08rem;
    }

    html.low-light {
        font-size: 108%;
    }

    .container {
        padding: 0.9rem;
    }

    .nav-link,
    .global-identity-btn,
    .global-logout-btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-instruction,
    .btn-complete,
    .btn-fail,
    .btn-ghost,
    .erin-tool,
    .iain-tool {
        min-height: 3rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   iOS HOME SCREEN / PWA POLISH
   ========================================================================== */

body {
    min-height: 100svh;
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}

.container {
    padding-top: calc(clamp(0.9rem, 3vw, 1.6rem) + env(safe-area-inset-top));
    padding-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + env(safe-area-inset-bottom));
}

body.is-erin .container,
body.is-iain .container {
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

button,
.btn,
.nav-link,
.global-identity-btn,
.global-logout-btn,
.erin-tool,
.iain-tool,
.erin-unlock,
.control-footer-link,
.reaction-btn {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.install-prompt {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        calc(1rem + env(safe-area-inset-top))
        1rem
        calc(1rem + env(safe-area-inset-bottom));
    background: rgba(8, 6, 10, 0.9);
}

.install-prompt[hidden] {
    display: none;
}

.install-card {
    width: min(28rem, 100%);
    max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
    overflow: auto;
    padding: 1.25rem;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
    background: var(--mr-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    color: var(--mr-text);
}

.install-icon {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 0.9rem;
    border-radius: 22%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.install-card h2 {
    margin-bottom: 0.6rem;
    font-size: 1.35rem;
}

.install-card p {
    margin-bottom: 0.9rem;
    color: var(--mr-text-soft);
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
}

.install-steps {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding-left: 1.35rem;
    color: var(--mr-text);
    font-weight: 700;
}

.install-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.offline-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 2500;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(255, 211, 122, 0.45);
    border-radius: 8px;
    background: #2a210c;
    color: #ffe5a8;
    box-shadow: var(--mr-shadow);
    font-size: 0.95rem;
    font-weight: 750;
    text-align: center;
}

.offline-banner[hidden] {
    display: none;
}

.notification-prompt {
    border-radius: 10px;
    padding: 0.9rem;
}

.notification-prompt-title {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--mr-text);
    font-size: 1rem;
    font-weight: 900;
}

.notification-status {
    margin: 0.45rem 0 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    background: var(--mr-info-bg);
    border: 1px solid rgba(159, 211, 255, 0.35);
    color: var(--mr-info);
    font-weight: 750;
}

.notification-prompt[data-state="success"] .notification-status {
    background: var(--mr-success-bg);
    border-color: rgba(143, 227, 176, 0.45);
    color: var(--mr-success);
}

.notification-prompt[data-state="warning"] .notification-status,
.notification-prompt[data-state="install"] .notification-status {
    background: var(--mr-gold-soft);
    border-color: rgba(255, 211, 122, 0.45);
    color: var(--mr-gold);
}

body.keyboard-open .low-light-toggle,
body.keyboard-open .notification-prompt,
body.keyboard-open .offline-banner {
    display: none !important;
}

@media (max-width: 640px) {
    .site-header-top {
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
    }

    .site-header h1 {
        flex: 1;
    }

    .low-light-toggle {
        flex: none;
    }

    .notification-prompt {
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    body.has-active-game .notification-prompt {
        top: calc(0.75rem + env(safe-area-inset-top));
        bottom: auto;
    }

    .notification-prompt-actions,
    .install-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .modal-overlay {
        align-items: flex-end;
        padding: calc(0.5rem + env(safe-area-inset-top)) 0 0;
    }

    .modal-sheet,
    .chat-modal-sheet,
    .activity-modal-sheet,
    .help-modal-sheet {
        width: 100%;
        max-width: none;
        max-height: calc(100svh - env(safe-area-inset-top) - 0.5rem);
        border-radius: 14px 14px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .modal-header {
        position: sticky;
        top: 0;
        z-index: 2;
        margin: -1rem -1rem 1rem;
        padding: 1rem;
        background: var(--mr-surface);
        border-bottom: 1px solid var(--mr-border);
    }

    .modal-close {
        min-width: 3rem;
        min-height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   HELP / RULESETS SCANNABILITY
   ========================================================================== */

.help-hero {
    display: grid;
    gap: 0.7rem;
    padding-bottom: 0.35rem;
}

.help-kicker {
    margin: 0;
    color: var(--mr-gold);
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-hero h2 {
    margin: 0;
    color: var(--mr-text);
    font-size: clamp(1.45rem, 3vw, 1.8rem);
    line-height: 1.15;
    text-align: left;
}

.help-hero p {
    max-width: 42rem;
    margin: 0;
    color: var(--mr-text);
    font-size: 1.08rem;
    line-height: 1.65;
}

.help-quick-grid,
.help-mode-grid,
.help-roles,
.rulesets-overview {
    display: grid;
    gap: 0.65rem;
}

.help-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-roles article,
.rulesets-overview > div {
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background: var(--mr-surface);
    padding: 0.9rem;
}

.help-invitation {
    padding: 0.95rem 0;
    border-top: 1px solid rgba(255, 248, 250, 0.1);
    border-bottom: 1px solid rgba(255, 248, 250, 0.1);
}

.help-invitation h3,
.help-roles h3,
.rulesets-overview strong {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--mr-text);
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.help-invitation p,
.help-roles p,
.rulesets-overview span {
    display: block;
    margin: 0;
    color: var(--mr-text-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.help-roles,
.help-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-detail {
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background: var(--mr-surface);
    overflow: hidden;
}

.help-detail + .help-detail {
    margin-top: -0.35rem;
}

.help-detail summary {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    color: var(--mr-text);
    cursor: pointer;
    font-weight: 850;
    list-style: none;
}

.help-detail summary::-webkit-details-marker {
    display: none;
}

.help-detail summary::after {
    content: "+";
    color: var(--mr-gold);
    font-size: 1.25rem;
    line-height: 1;
}

.help-detail[open] summary::after {
    content: "-";
}

.help-detail p,
.help-detail .help-list,
.help-detail .help-mode-list,
.help-detail .help-link-list {
    padding: 0 0.95rem 0.95rem;
}

.help-detail p {
    margin: 0;
    color: var(--mr-text-soft);
    font-size: 1rem;
    line-height: 1.6;
}

.help-detail p + p {
    padding-top: 0;
    margin-top: -0.35rem;
}

.help-mode-list {
    display: grid;
    gap: 0.65rem;
}

.help-mode-list p {
    padding: 0;
}

.help-mode-list strong {
    color: var(--mr-text);
}

.help-detail .help-list {
    gap: 0.5rem;
}

.help-detail .help-list div {
    border-top: 1px solid rgba(255, 248, 250, 0.08);
    padding-top: 0.55rem;
}

.rulesets-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.rs-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rs-group-header span:last-child {
    color: var(--mr-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ruleset-mgmt-card {
    border-radius: 8px;
}

.rs-header {
    align-items: flex-start;
}

.rs-name {
    color: var(--mr-text);
    font-size: 1rem;
    font-weight: 850;
}

.rs-btn-row {
    flex-wrap: wrap;
}

.btn-rs {
    min-height: 3rem;
    font-size: 0.95rem;
}

.rs-text-preview {
    max-height: min(18rem, 52vh);
    overflow: auto;
}

@media (max-width: 640px) {
    .help-quick-grid,
    .help-mode-grid,
    .help-roles,
    .rulesets-overview {
        grid-template-columns: 1fr;
    }

    .help-roles article,
    .rulesets-overview > div {
        padding: 0.85rem;
    }

    .rs-btn-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}