/*
 * Dare Me – gemensam premiumgrund
 * Detta lager ligger sist och förädlar befintlig layout utan att ändra spellogik.
 */

:root {
    color-scheme: dark;
    --dm-ink: #070706;
    --dm-ink-warm: #0b0a08;
    --dm-panel: #11100e;
    --dm-panel-raised: #181612;
    --dm-surface: #1d1b17;
    --dm-surface-hover: #242119;
    --dm-gold: #d7ad2f;
    --dm-gold-strong: #e3bd47;
    --dm-champagne: #f3d575;
    --dm-bronze: #846826;
    --dm-text: #fffaf0;
    --dm-text-soft: #e8e0d2;
    --dm-muted: #b2aa9d;
    --dm-muted-dark: #766f65;
    --dm-line: #383329;
    --dm-line-strong: #554a2e;
    --dm-danger: #8f3f43;
    --dm-danger-soft: #d1a0a2;
    --dm-success: #78a77c;
    --dm-radius-sm: 8px;
    --dm-radius-md: 13px;
    --dm-radius-lg: 20px;
    --dm-shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
    --dm-shadow-md: 0 20px 58px rgba(0, 0, 0, .48);
    --dm-focus: 0 0 0 3px rgba(234, 217, 154, .17);
    --dm-ease: 180ms cubic-bezier(.2, .75, .25, 1);
    --dm-font-ui: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --dm-font-display: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

html {
    background: var(--dm-ink);
}

body.app-shell,
body.rules-page,
body.architect-page {
    color: var(--dm-text);
    font-family: var(--dm-font-ui);
    background:
        radial-gradient(ellipse 70% 36rem at 50% -15rem, rgba(199, 166, 74, .12), transparent 72%),
        linear-gradient(180deg, var(--dm-ink-warm), var(--dm-ink) 55%, #050504);
}

body.app-shell::before,
body.rules-page::before,
body.architect-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .23;
    background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px);
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body.app-shell button,
body.app-shell input,
body.app-shell select,
body.rules-page button,
body.rules-page input,
body.rules-page select,
body.architect-page button,
body.architect-page input,
body.architect-page select,
body.architect-page textarea {
    font-family: inherit;
}

body.app-shell :focus-visible,
body.rules-page :focus-visible,
body.architect-page :focus-visible {
    outline: 2px solid var(--dm-champagne);
    outline-offset: 3px;
}

/* ---------- Dare Me ---------- */

body.app-shell h1,
body.app-shell .intro-title {
    color: var(--dm-champagne);
    font-family: var(--dm-font-display);
    font-weight: 500;
    text-wrap: balance;
}

body.app-shell h1 {
    letter-spacing: .14em;
    text-shadow: 0 12px 34px rgba(199, 166, 74, .13);
}

body.app-shell .intro-title {
    letter-spacing: .025em;
}

body.app-shell .intro-body {
    color: var(--dm-muted);
}

body.app-shell .intro-highlight {
    color: var(--dm-text-soft);
}

body.app-shell .setup-container,
body.app-shell .modal-box {
    border-color: var(--dm-line);
    background:
        linear-gradient(145deg, rgba(255,255,255,.022), transparent 35%),
        linear-gradient(160deg, var(--dm-panel-raised), var(--dm-panel));
    box-shadow: var(--dm-shadow-md), inset 0 1px rgba(255,255,255,.035);
}

body.app-shell .setup-container {
    border-radius: var(--dm-radius-lg);
}

body.app-shell input[type="text"],
body.app-shell select {
    color: var(--dm-text);
    border-color: #454036;
    border-radius: var(--dm-radius-sm);
    background: #0a0908;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

body.app-shell input[type="text"]::placeholder {
    color: var(--dm-muted-dark);
}

body.app-shell input[type="text"]:focus,
body.app-shell select:focus {
    border-color: var(--dm-gold-strong);
    box-shadow: var(--dm-focus);
}

body.app-shell .setup-section {
    border-color: var(--dm-line);
    border-radius: var(--dm-radius-md);
    background: rgba(9, 8, 7, .67);
}

body.app-shell .setup-section > summary {
    color: var(--dm-text-soft);
    font-size: .76rem;
    letter-spacing: .09em;
}

body.app-shell .section-heading {
    min-width: 0;
}

body.app-shell .section-summary {
    flex: 0 1 auto;
    max-width: 46%;
    margin-left: auto;
    overflow: hidden;
    color: var(--dm-muted);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .025em;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

body.app-shell .setup-section[open] .section-summary {
    color: var(--dm-gold-strong);
}

body.app-shell .setup-section > summary::after {
    border-color: var(--dm-gold);
}

body.app-shell .setup-section > summary:hover {
    color: var(--dm-champagne);
    background: rgba(234,217,154,.025);
}

body.app-shell .setup-section-body {
    border-color: #29261f;
}

body.app-shell .veto-title {
    color: var(--dm-gold-strong);
}

body.app-shell .veto-option {
    color: var(--dm-text-soft) !important;
}

body.app-shell .veto-option input[type="checkbox"] {
    border-color: #8a8378;
    background: #24211d;
}

body.app-shell .veto-option input[type="checkbox"]:checked {
    border-color: var(--dm-champagne);
    background: var(--dm-gold);
    box-shadow: inset 0 0 0 4px #211c10, 0 0 0 2px rgba(199,166,74,.12);
}

body.app-shell .btn {
    min-height: 46px;
    border-radius: 11px;
    letter-spacing: .075em;
    transition:
        transform var(--dm-ease),
        border-color var(--dm-ease),
        color var(--dm-ease),
        background-color var(--dm-ease),
        box-shadow var(--dm-ease);
}

body.app-shell .lobby-actions .btn-start {
    min-height: 44px;
}

body.app-shell .lobby-utilities .btn,
body.app-shell .lobby-utilities a.btn {
    min-height: 38px;
    padding: 8px 6px;
}

/* Lobby – mörkt lack, varm guldglöd och kompakt premiumhierarki. */
body.app-shell #lobby-page {
    max-width: 1180px;
    padding-top: clamp(14px, 3vw, 34px);
}

body.app-shell .lobby-layout {
    display: grid;
    gap: clamp(14px, 2.4vw, 28px);
}

body.app-shell .lobby-brand-panel {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 0;
    padding: clamp(24px, 4vw, 46px) clamp(18px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(243,213,117,.36);
    border-radius: var(--dm-radius-lg);
    background:
        radial-gradient(ellipse at 50% 58%, rgba(199,166,74,.22), transparent 38%),
        radial-gradient(ellipse at 50% 110%, rgba(113,23,29,.34), transparent 54%),
        linear-gradient(145deg, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(155deg, #252321, #0b0a09 64%, #160a0b);
    box-shadow: var(--dm-shadow-md), inset 0 1px rgba(255,255,255,.14), inset 0 0 42px rgba(0,0,0,.42);
}

body.app-shell .lobby-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
    mix-blend-mode: soft-light;
}

body.app-shell .lobby-brand-panel > * { position: relative; }

body.app-shell #lobby-page .lobby-brand-panel h1 {
    margin: 0 0 18px;
    font-size: clamp(2rem, 4vw, 3.8rem);
    font-weight: 500;
    letter-spacing: .18em;
    text-shadow: 0 0 24px rgba(243,213,117,.24), 0 14px 34px rgba(0,0,0,.54);
}

body.app-shell #lobby-page .lobby-brand-panel .small-logo {
    width: min(72%, 220px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto clamp(24px, 4vw, 42px);
    animation: pulseGlow 3s infinite ease-in-out;
}

body.app-shell #lobby-page .lobby-brand-panel .small-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(231,188,71,.18));
}

body.app-shell .lobby-brand-panel .room-tag,
body.app-shell .lobby-brand-panel .connection-status {
    margin: 0;
    color: var(--dm-text-soft);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.app-shell .lobby-brand-panel .connection-status { margin-top: 8px; color: var(--dm-muted); }

body.app-shell .lobby-workspace .setup-container {
    min-height: 100%;
    padding: clamp(14px, 2.4vw, 28px);
    border-color: rgba(243,213,117,.25);
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), transparent 26%),
        linear-gradient(160deg, rgba(29,27,24,.96), rgba(11,10,9,.98));
    box-shadow: var(--dm-shadow-md), inset 0 1px rgba(255,255,255,.06);
}

body.app-shell .profile-panel {
    padding: 10px;
    border: 1px solid rgba(243,213,117,.16);
    border-radius: var(--dm-radius-md);
    background: rgba(5,5,4,.48);
}

body.app-shell .lobby-settings-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px 12px;
    margin: 10px 0 14px;
}

body.app-shell .lobby-mode-setting {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    grid-column: 1 / -1;
}

body.app-shell .lobby-mode-setting select { max-width: 100%; }
body.app-shell .lobby-settings-toolbar .lobby-manual-stars { margin: 0; white-space: nowrap; }
body.app-shell .lobby-settings-toolbar .lobby-setting-select { gap: 8px; margin: 0; min-width: 0; white-space: nowrap; }

body.app-shell .level-up-control {
    display: grid;
    min-width: min(100%, 280px);
    gap: 8px;
    margin: 2px 0;
    padding: 10px 12px 8px;
    border: 1px solid rgba(243,213,117,.17);
    border-radius: 10px;
    background: rgba(6,6,5,.48);
}

body.app-shell .lobby-settings-toolbar .lobby-level-up-control {
    grid-column: 1 / -1;
    width: min(100%, 360px);
    min-width: 0;
    margin: 0;
}

body.app-shell .level-up-heading,
body.app-shell .level-up-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

body.app-shell .level-up-heading {
    color: var(--dm-gold-strong);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body.app-shell .level-up-heading output {
    color: var(--dm-text-soft);
    letter-spacing: .015em;
    text-transform: none;
}

body.app-shell input[type="range"]#auto-level-setting {
    --level-progress: 0%;
    width: 100%;
    height: 5px;
    margin: 4px 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #554016, #f5d76d) 0 / var(--level-progress) 100% no-repeat, #302b22;
    accent-color: var(--dm-gold-strong);
    cursor: pointer;
}

body.app-shell input[type="range"]#auto-level-setting::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    appearance: none;
    border: 2px solid var(--dm-champagne);
    border-radius: 50%;
    background: #211b0d;
    box-shadow: 0 0 0 4px rgba(243,213,117,.12), 0 3px 10px rgba(0,0,0,.52);
}

body.app-shell .level-up-scale { color: var(--dm-muted); font-size: .57rem; letter-spacing: .04em; }

body.app-shell #level-selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    grid-auto-flow: row dense;
}

body.app-shell #level-selection-grid .veto-option {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .78rem;
    border: 1px solid rgba(243,213,117,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.012);
}

body.app-shell #level-selection-grid .veto-option:has(input:checked) {
    border-color: var(--dm-gold-strong);
    background: linear-gradient(145deg, rgba(227,189,71,.18), rgba(62,43,11,.32));
    box-shadow: inset 0 1px rgba(255,255,255,.09), 0 0 18px rgba(199,166,74,.08);
}

@media (min-width: 880px) {
    body.app-shell .lobby-layout {
        grid-template-columns: minmax(250px, .72fr) minmax(0, 1.6fr);
        align-items: start;
    }

    body.app-shell .lobby-brand-panel { position: sticky; top: 20px; min-height: 0; height: fit-content; }
}

@media (max-width: 879px) {
    body.app-shell .lobby-brand-panel {
        grid-template-columns: auto 1fr;
        justify-items: start;
        min-height: 0;
        padding: 16px 18px;
    }

    body.app-shell #lobby-page .lobby-brand-panel h1 { align-self: end; margin: 0 0 0 14px; font-size: 1.65rem; }
    body.app-shell #lobby-page .lobby-brand-panel .small-logo { grid-row: 1 / span 2; width: 58px; margin: 0; }
    body.app-shell .lobby-brand-panel .room-tag { margin-left: 14px; align-self: end; }
    body.app-shell .lobby-brand-panel .connection-status { margin: 3px 0 0 14px; align-self: start; }
}

@media (max-width: 760px) {
    body.app-shell .lobby-settings-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
    }

    body.app-shell .lobby-mode-setting,
    body.app-shell .lobby-settings-toolbar .lobby-manual-stars,
    body.app-shell .lobby-settings-toolbar .lobby-level-up-control { grid-column: 1 / -1; }

    body.app-shell .lobby-settings-toolbar .lobby-level-up-control {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 420px) {
    body.app-shell .lobby-settings-toolbar { grid-template-columns: minmax(0, 1fr); }
    body.app-shell .lobby-settings-toolbar .lobby-setting-select { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    /* Mixed Truth/Dare mode is two columns on desktop only.  On a phone each
       deck needs the full row; otherwise the Dare labels collapse into narrow,
       tall cards beside the Truth cards. */
    body.app-shell #level-selection-grid.mix-level-layout {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row;
    }
    body.app-shell #level-selection-grid.mix-level-layout .dare-level-option,
    body.app-shell #level-selection-grid.mix-level-layout .truth-level-option {
        grid-column: 1 !important;
    }
    body.app-shell #level-selection-grid.mix-level-layout .dare-level-option { order: 1; }
    body.app-shell #level-selection-grid.mix-level-layout .truth-level-option { order: 2; }
    body.app-shell #level-selection-grid:not(.mix-level-layout) { grid-template-columns: 1fr !important; }
    body.app-shell #level-selection-grid .veto-option { min-height: 34px; padding: 6px 8px; font-size: .72rem; }
    body.app-shell .level-up-control { width: 100%; }
}

body.app-shell .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--dm-bronze);
    box-shadow: var(--dm-shadow-sm);
}

body.app-shell .btn:active:not(:disabled) {
    transform: translateY(0) scale(.985);
}

body.app-shell .btn-start,
body.app-shell .btn-next {
    color: #100e08;
    border: 1px solid var(--dm-champagne);
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), transparent 42%),
        linear-gradient(180deg, #e4bd38, #bd8915);
    box-shadow: 0 10px 32px rgba(199,166,74,.17), inset 0 1px rgba(255,255,255,.35);
}

body.app-shell .btn-start:hover:not(:disabled),
body.app-shell .btn-next:hover:not(:disabled) {
    border-color: var(--dm-champagne);
    box-shadow: 0 12px 34px rgba(199,166,74,.22);
}

body.app-shell .btn-add,
body.app-shell .btn-rules,
body.app-shell .btn-lvl-up,
body.app-shell .btn-architect,
body.app-shell .btn-install {
    color: var(--dm-champagne);
    border: 1px solid var(--dm-line-strong);
    background: linear-gradient(180deg, #19170f, #11100c);
}

body.app-shell .btn-back {
    color: var(--dm-text-soft);
    border-color: #403c35;
    background: #171613;
}

body.app-shell .btn-reset-danger {
    color: #9e9190;
    border-color: #4d2d2e;
    background: #160e0f;
}

body.app-shell .room-tag,
body.app-shell .connection-status,
body.app-shell .turn-help,
body.app-shell #active-lvl-display {
    color: var(--dm-muted) !important;
}

body.app-shell .connection-status[data-status="local"] { color: var(--dm-muted) !important; display: none !important; }
body.app-shell .connection-status[data-status="online"] {
    color: #8fcf93 !important;
    text-shadow: 0 0 12px rgba(143,207,147,.18);
}
body.app-shell .connection-status[data-status="connecting"] { color: #d7b95c !important; }
body.app-shell .connection-status[data-status="offline"],
body.app-shell .connection-status[data-status="error"] { color: #d98b8b !important; }

body.app-shell .room-code-display,
body.app-shell .gold-name,
body.app-shell #current-lvl-text,
body.app-shell #next-up-info,
body.app-shell .star-count {
    color: var(--dm-champagne) !important;
}

body.app-shell .player-item,
body.app-shell .p-chip {
    border-color: var(--dm-line);
    background: var(--dm-panel-raised);
}

body.app-shell .player-item {
    border-left-color: var(--dm-gold);
}

body.app-shell .p-chip.active-turn {
    border-color: var(--dm-gold-strong);
    background: linear-gradient(180deg, #211c10, #15130e);
    box-shadow: 0 9px 26px rgba(0,0,0,.3), 0 0 0 1px rgba(234,217,154,.07);
}

body.app-shell .status-bar {
    border-color: var(--dm-line);
    background: rgba(8,7,6,.9);
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.025);
}

body.app-shell .card-area {
    border-color: #51462b;
    background:
        radial-gradient(ellipse 80% 38% at 50% 0%, rgba(199,166,74,.11), transparent 72%),
        linear-gradient(145deg, #1a1814, #0e0d0b 72%);
    box-shadow: 0 28px 70px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.04);
}

body.app-shell .card-area::before {
    opacity: .7;
    background: linear-gradient(112deg, transparent 18%, rgba(234,217,154,.035), transparent 62%);
}

body.app-shell .task-text {
    color: var(--dm-text);
    font-weight: 700;
    line-height: 1.45;
    text-wrap: balance;
}

body.app-shell #game-page {
    isolation: isolate;
}

body.app-shell #game-page #next-up-info {
    margin-bottom: 5px !important;
    color: var(--dm-champagne) !important;
    font-family: var(--dm-font-display);
    font-size: clamp(1.15rem, 3vw, 1.42rem) !important;
    font-weight: 600 !important;
    letter-spacing: .055em;
    line-height: 1.2;
    text-wrap: balance;
}

body.app-shell #game-page #active-lvl-display {
    margin-bottom: clamp(18px, 4vh, 30px) !important;
    font-size: .68rem !important;
    letter-spacing: .09em;
}

body.app-shell #game-page #task-box {
    width: min(100%, 30ch);
    margin-inline: auto;
}

body.app-shell .card-tools {
    gap: 4px 8px;
    margin-top: 12px;
}

body.app-shell .card-tools > .card-tool-btn {
    margin: 0;
}

body.app-shell .card-timer-widget {
    display: inline-flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    margin-top: 2px;
}

body.app-shell .card-timer-widget[hidden],
body.app-shell .card-timer-widget [hidden] { display: none !important; }

body.app-shell .card-timer-widget select {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--dm-line-strong);
    border-radius: 9px;
    background: #11100d;
    font-size: .7rem;
}

body.app-shell .card-timer-widget .card-tool-btn {
    min-height: 34px;
    margin: 0;
    padding: 6px 9px;
    font-size: .65rem;
}

body.app-shell .card-timer-display {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid var(--dm-line-strong);
    border-radius: 9px;
    color: var(--dm-champagne);
    background: rgba(199,166,74,.08);
    font-size: .72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

body.app-shell .card-timer-widget.is-finished .card-timer-display {
    color: #fff0c0;
    border-color: var(--dm-gold-strong);
    background: rgba(199,166,74,.2);
    box-shadow: 0 0 16px rgba(199,166,74,.18);
}

body.app-shell .card-tool-btn {
    min-height: 38px;
    padding: 7px 11px;
    color: var(--dm-muted);
    border-color: #403a2a;
    background: rgba(15,14,11,.72);
}

body.app-shell .game-controls {
    padding: 2px;
    grid-auto-flow: dense;
}

body.app-shell .game-controls #turn-help {
    margin: 0 0 3px;
    color: var(--dm-muted) !important;
}

body.app-shell .game-controls #btn-skip-card,
body.app-shell .game-controls #btn-complete-card,
body.app-shell .game-controls #btn-pause-game,
body.app-shell .game-controls #btn-request-pause,
body.app-shell .game-controls #lvl-up-btn {
    min-height: 44px;
}

body.app-shell .game-controls #btn-skip-card,
body.app-shell .game-controls #btn-complete-card,
body.app-shell .game-controls #btn-pause-game,
body.app-shell .game-controls #btn-request-pause {
    height: 44px;
    padding: 10px;
    font-size: clamp(.62rem, 2.5vw, .74rem);
    letter-spacing: .04em;
}

body.app-shell .game-controls #btn-skip-card { grid-column: 1; }
body.app-shell .game-controls #btn-complete-card { grid-column: 2; }
body.app-shell .game-controls #btn-pause-game,
body.app-shell .game-controls #btn-request-pause { grid-column: 3; }

body.app-shell .game-controls #btn-exit-room {
    min-height: 34px;
    height: 34px;
    padding: 5px 14px;
    margin-top: 8px !important;
    color: var(--dm-muted);
}

body.app-shell .modal-box {
    border-color: var(--dm-line-strong);
}

body.app-shell #level-banner {
    color: var(--dm-champagne);
    border-color: var(--dm-gold);
    background: rgba(16,14,10,.96);
    box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 24px rgba(199,166,74,.13);
}

/* ---------- Regler ---------- */

body.rules-page .container {
    border-color: var(--dm-line);
    background:
        linear-gradient(145deg, rgba(255,255,255,.018), transparent 30%),
        linear-gradient(160deg, var(--dm-panel-raised), var(--dm-panel));
    box-shadow: var(--dm-shadow-md), inset 0 1px rgba(255,255,255,.03);
}

body.rules-page h1,
body.rules-page h2 {
    color: var(--dm-champagne);
    font-family: var(--dm-font-display);
    font-weight: 500;
}

body.rules-page h1 {
    letter-spacing: .12em;
}

body.rules-page h2 {
    border-color: var(--dm-line);
    letter-spacing: .035em;
}

body.rules-page p,
body.rules-page li {
    color: var(--dm-text-soft);
}

body.rules-page .rules-nav a {
    color: var(--dm-champagne);
    border-color: var(--dm-line-strong);
    background: #15130e;
}

body.rules-page .quick-safety,
body.rules-page .level-guide,
body.rules-page .warning-box {
    border-color: var(--dm-line-strong);
    background: rgba(13,12,10,.72);
}

body.rules-page .btn-back {
    color: #100e08;
    border: 1px solid var(--dm-champagne);
    background: linear-gradient(180deg, #e4bd38, #bd8915);
}

/* ---------- Arkitekterna ---------- */

body.architect-page {
    min-height: 100dvh;
}

body.architect-page .container {
    border-color: var(--dm-line);
    background:
        linear-gradient(145deg, rgba(255,255,255,.018), transparent 32%),
        linear-gradient(160deg, var(--dm-panel-raised), var(--dm-panel));
    box-shadow: var(--dm-shadow-md), inset 0 1px rgba(255,255,255,.03);
}

body.architect-page h2 {
    color: var(--dm-champagne);
    font-family: var(--dm-font-display);
    font-weight: 500;
    letter-spacing: .11em;
    text-shadow: 0 12px 30px rgba(199,166,74,.11);
}

body.architect-page .header-img {
    filter: drop-shadow(0 10px 24px rgba(199,166,74,.15));
}

body.architect-page .deck-settings input,
body.architect-page .deck-settings select,
body.architect-page .architect-toolbar input,
body.architect-page .remove-card-row select {
    color: var(--dm-text);
    border-color: #454036;
    background: #0a0908;
}

body.architect-page .deck-settings input:focus,
body.architect-page .deck-settings select:focus,
body.architect-page .architect-toolbar input:focus,
body.architect-page .remove-card-row select:focus {
    border-color: var(--dm-gold-strong);
    box-shadow: var(--dm-focus);
}

body.architect-page .composer {
    border-color: var(--dm-line-strong);
    background: rgba(12,11,9,.94);
    box-shadow: 0 15px 38px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025);
}

body.architect-page textarea#dareText {
    color: var(--dm-text);
    border-color: var(--dm-bronze);
    background: #090806;
}

body.architect-page textarea#dareText:focus {
    border-color: var(--dm-gold-strong);
    box-shadow: var(--dm-focus);
}

body.architect-page .word-bank,
body.architect-page .tags-container {
    border-color: var(--dm-line);
    background: rgba(12,11,9,.74);
}

body.architect-page .category-box {
    border-color: #343128;
    background: #151411;
}

body.architect-page .category-title,
body.architect-page .section-title,
body.architect-page .placeholder-group::before {
    color: var(--dm-gold-strong);
}

body.architect-page .btn-word {
    color: #e5e0d7;
    border-color: #3a3731;
    background: #292723;
}

body.architect-page .btn-word:hover {
    color: #fff;
    border-color: var(--dm-bronze);
    background: var(--dm-surface-hover);
}

body.architect-page .placeholder-group {
    border-color: var(--dm-line-strong);
    background: #15130e;
}

body.architect-page .placeholder-group .btn-target {
    color: #fff8f4;
    border-color: #b94770;
    background: linear-gradient(180deg, #d3507e, #ac2f5b);
}

body.architect-page .btn-undo {
    color: var(--dm-champagne);
    border-color: var(--dm-line-strong);
    background: #211d12;
}

body.architect-page .btn-punct {
    color: var(--dm-text-soft);
    background: #24221e;
}

body.architect-page .tag-item {
    color: var(--dm-text-soft);
}

body.architect-page .tag-item:hover {
    border-color: #48402b;
    background: #1b1913;
}

body.architect-page .tag-item input {
    accent-color: var(--dm-gold);
}

body.architect-page .btn-gen {
    color: #100e08;
    border-color: var(--dm-champagne);
    background: linear-gradient(180deg, #e4bd38, #bd8915);
    box-shadow: 0 8px 24px rgba(199,166,74,.13), inset 0 1px rgba(255,255,255,.28);
}

body.architect-page .btn-copy,
body.architect-page .btn-import,
body.architect-page .btn-export,
body.architect-page .btn-copy-json,
body.architect-page .examples-toggle,
body.architect-page .keyboard-toggle {
    color: var(--dm-champagne);
    border-color: var(--dm-line-strong);
    background: #17150f;
}

body.architect-page .btn-clear,
body.architect-page .btn-remove-last {
    color: var(--dm-danger-soft);
    border-color: #603538;
    background: #190f10;
}

body.architect-page #output {
    color: #d9ca8b;
    border-color: var(--dm-line);
    background: #070706;
}

body.architect-page .card-count {
    color: var(--dm-champagne);
}

@media (max-width: 700px) {
    body.app-shell .page {
        padding-inline: 10px;
    }

    body.app-shell .setup-container {
        border-radius: 16px;
    }

    body.app-shell .btn {
        letter-spacing: .055em;
    }

    body.app-shell .section-summary {
        max-width: 40%;
        font-size: .63rem;
    }

    body.app-shell #game-page #task-box {
        width: min(100%, 27ch);
    }

    body.app-shell #game-page .card-area {
        min-height: clamp(245px, 40vh, 350px);
    }

    body.architect-page {
        padding: 7px;
    }

    body.architect-page .container {
        border-radius: 15px;
    }
}

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