/* ==========================================================
   VIGTHORIA REALMS // AAA CHRONICLE SURFACE
   Obsidian, forged iron, vellum, and restrained ember light.
   ========================================================== */

:root {
    --realm-void: #050607;
    --realm-obsidian: #090b0d;
    --realm-iron: #12161a;
    --realm-steel: #2d3139;
    --realm-steel-hi: #555c63;
    --realm-vellum: #d7d2c8;
    --realm-muted: #8b8f91;
    --realm-ember: #a56e31;
    --realm-ember-hi: #d4a75e;
    --realm-blood: #602d27;
}

html,
body {
    background: var(--realm-void);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(3, 4, 5, .97), rgba(5, 6, 7, .88)),
        url("assets/realms/veiled-chronicler.webp") 72% 50% / cover no-repeat;
    filter: saturate(.45) brightness(.44);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000000;
    pointer-events: none;
    opacity: .13;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.loading-screen {
    background:
        radial-gradient(circle at 50% 42%, rgba(135, 100, 49, .11), transparent 24%),
        #050607 !important;
}

.chronicler-seal {
    filter: drop-shadow(0 14px 38px rgba(0,0,0,.8));
}

.chronicler-seal .rune-svg {
    animation: none !important;
}

.loader-title {
    color: #d6d2ca !important;
    font-family: "Cinzel", serif !important;
    letter-spacing: 3px !important;
    text-shadow: none !important;
}

.loader-status {
    color: #85775f !important;
    font-family: "Orbitron", sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.bg-effects {
    opacity: .36;
    filter: grayscale(1) sepia(.15);
}

.realms-chronicle-shell {
    position: fixed;
    inset: 0;
    z-index: 90000;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 76px minmax(0, 1fr) 48px;
    overflow: hidden;
    color: var(--realm-vellum);
    background: var(--realm-void);
    transition: opacity .32s ease, visibility .32s ease;
}

.realms-chronicle-shell.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.chronicle-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(2, 3, 4, .99) 0%, rgba(3, 4, 5, .95) 32%, rgba(3, 4, 5, .54) 62%, rgba(3, 4, 5, .78) 100%),
        linear-gradient(0deg, rgba(2, 3, 4, .92), transparent 48%),
        url("assets/realms/veiled-chronicler.webp") 68% center / cover no-repeat;
    animation: chroniclerBreath 18s ease-in-out infinite alternate;
    transform: translate3d(0, 0, 0) scale(1.015);
    will-change: transform, filter;
}

.chronicle-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(190, 177, 153, .025) 120px),
        linear-gradient(115deg, transparent 0 68%, rgba(255, 255, 255, .035) 68.08%, transparent 68.16%);
    mask-image: linear-gradient(#000, transparent 86%);
}

@keyframes chroniclerBreath {
    from { transform: translate3d(0, 0, 0) scale(1.015); filter: brightness(.83); }
    to { transform: translate3d(-.35%, -.25%, 0) scale(1.035); filter: brightness(.92); }
}

@media (prefers-reduced-motion: reduce) {
    .chronicle-atmosphere { animation: none; }
}

.chronicle-topbar {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
    align-items: stretch;
    border-bottom: 1px solid #363a3e;
    background: rgba(5, 6, 7, .88);
    backdrop-filter: blur(18px);
}

.chronicle-brand,
.chronicle-identity,
.chronicle-nav button {
    color: inherit;
    text-decoration: none;
}

.chronicle-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 26px;
}

.brand-mark {
    width: 39px;
    height: 45px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 100% 18%, 89% 78%, 50% 100%, 11% 78%, 0 18%);
    background: linear-gradient(145deg, #30363b, #0a0d10 72%);
    box-shadow: inset 0 0 0 1px #646a6f;
    color: #d8d5ce;
    font: 700 12px "Cinzel", serif;
    letter-spacing: 1px;
}

.chronicle-brand b,
.chronicle-brand small {
    display: block;
}

.chronicle-brand b {
    font: 700 12px "Cinzel", serif;
    letter-spacing: 2.2px;
}

.chronicle-brand small {
    margin-top: 3px;
    color: #777d81;
    font: 600 7px "Orbitron", sans-serif;
    letter-spacing: 1.8px;
}

.chronicle-nav {
    display: flex;
}

.chronicle-nav button,
.chronicle-identity,
.chronicle-footer button,
.chronicle-footer a,
.deck-heading button {
    border: 0;
    border-left: 1px solid #25292d;
    background: transparent;
    color: #888e92;
    cursor: pointer;
    font: 700 9px "Orbitron", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.chronicle-nav button {
    min-width: 118px;
    padding: 0 17px;
}

.chronicle-nav button:hover,
.chronicle-nav button.active {
    color: #ece8df;
    background: rgba(176, 138, 78, .08);
    box-shadow: inset 0 -2px var(--realm-ember);
}

.chronicle-identity {
    justify-self: end;
    min-width: 250px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.identity-signal {
    width: 7px;
    height: 7px;
    border: 1px solid #777d82;
    transform: rotate(45deg);
}

.chronicle-identity.verified .identity-signal {
    border-color: #9c8052;
    background: #9c8052;
    box-shadow: 0 0 14px rgba(164, 117, 54, .45);
}

.chronicle-identity.sovereign {
    color: #d5b77e;
}

.chronicle-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(420px, 670px) minmax(320px, 1fr);
    align-items: center;
    padding: clamp(40px, 7vw, 110px);
}

.chronicle-stage[hidden],
.chronicle-deck[hidden] {
    display: none;
}

.chronicle-copy {
    align-self: center;
}

.chronicle-kicker,
.deck-heading span,
.detail-code,
.chronicler-dossier span {
    color: #8f7550;
    font: 700 8px "Orbitron", sans-serif;
    letter-spacing: 2.3px;
}

.chronicle-copy h1 {
    margin: 23px 0 24px;
    color: #e3e0da;
    font: 600 clamp(48px, 6.4vw, 100px)/.86 "Cinzel", serif;
    letter-spacing: -4px;
    text-shadow: 0 13px 55px #000;
}

.chronicle-copy > p {
    max-width: 580px;
    color: #a9a7a1;
    font: 400 clamp(16px, 1.45vw, 21px)/1.6 "Rajdhani", sans-serif;
}

.chronicle-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.forged-primary,
.forged-secondary {
    min-height: 50px;
    padding: 0 23px;
    border-radius: 0;
    cursor: pointer;
    font: 700 9px "Orbitron", sans-serif;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.forged-primary {
    border: 1px solid #b68d50;
    color: #0a0907;
    background: linear-gradient(180deg, #d2b477, #9c7136);
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 12px 40px rgba(0,0,0,.36);
}

.forged-primary:hover {
    filter: brightness(1.09);
}

.forged-secondary {
    border: 1px solid #555a5e;
    color: #d0cec8;
    background: linear-gradient(180deg, #1b1f22, #0b0d0f);
}

.chronicle-contract {
    display: flex;
    margin: 34px 0 0;
    border-top: 1px solid #33373a;
}

.chronicle-contract div {
    min-width: 150px;
    padding: 15px 20px 0 0;
}

.chronicle-contract dt {
    color: #6f7477;
    font: 700 7px "Orbitron", sans-serif;
    letter-spacing: 1.4px;
}

.chronicle-contract dd {
    margin: 7px 0 0;
    color: #b4b1aa;
    font-size: 13px;
}

.chronicler-dossier {
    justify-self: end;
    align-self: end;
    width: min(360px, 88%);
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(116, 111, 101, .48);
    background: rgba(6, 7, 8, .76);
    backdrop-filter: blur(12px);
}

.chronicler-dossier img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    filter: saturate(.65) contrast(1.08);
}

.chronicler-dossier h2 {
    margin: 7px 0 5px;
    color: #d7d2c9;
    font: 600 19px "Cinzel", serif;
}

.chronicler-dossier p {
    margin: 0;
    color: #777c7f;
    font-size: 12px;
    line-height: 1.45;
}

.chronicle-deck {
    min-height: 0;
    overflow: auto;
    padding: clamp(28px, 4vw, 58px) clamp(24px, 6vw, 90px);
    background:
        linear-gradient(90deg, rgba(5, 6, 7, .98), rgba(5, 6, 7, .91)),
        url("assets/realms/veiled-chronicler.webp") right center / cover no-repeat;
}

.deck-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #34383b;
}

.deck-heading h2 {
    margin: 9px 0 0;
    font: 600 clamp(30px, 4vw, 54px) "Cinzel", serif;
}

.deck-heading button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #44494d;
}

.deck-layout {
    display: grid;
    grid-template-columns: minmax(320px, .78fr) minmax(420px, 1.22fr);
    gap: 1px;
    margin-top: 30px;
    border: 1px solid #383c3f;
    background: #383c3f;
}

.chronicle-list,
.chronicle-detail {
    background: rgba(7, 9, 10, .96);
}

.chronicle-list {
    display: grid;
    align-content: start;
}

.chronicle-card {
    min-height: 83px;
    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #2d3134;
    color: #9da0a0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.chronicle-card:hover,
.chronicle-card.selected {
    color: #e0ddd6;
    background: linear-gradient(90deg, rgba(165,110,49,.16), transparent);
    box-shadow: inset 3px 0 var(--realm-ember);
}

.chronicle-act {
    height: 100%;
    display: grid;
    place-items: center;
    border-right: 1px solid #2d3134;
    color: #7d6749;
    font: 600 21px "Cinzel", serif;
}

.chronicle-card > span:last-child {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 0 20px;
}

.chronicle-card small {
    color: #6f7477;
    font: 700 7px "Orbitron", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.chronicle-card b {
    font: 600 17px "Cinzel", serif;
}

.chronicle-card em {
    position: absolute;
    right: 15px;
    top: 12px;
    color: #88704d;
    font: 700 7px "Orbitron", sans-serif;
    font-style: normal;
}

.chronicle-detail {
    min-height: 445px;
    padding: clamp(30px, 4vw, 65px);
}

.chronicle-detail h3 {
    margin: 17px 0 12px;
    color: #e1ded7;
    font: 600 clamp(33px, 4vw, 59px)/1 "Cinzel", serif;
}

.chronicle-detail blockquote {
    margin: 20px 0;
    padding: 13px 0 13px 19px;
    border-left: 2px solid var(--realm-ember);
    color: #c7ad7a;
    font: italic 18px/1.5 "Cinzel", serif;
}

.chronicle-detail > p {
    max-width: 720px;
    color: #9ea09e;
    font-size: 17px;
    line-height: 1.65;
}

.chronicle-detail ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.chronicle-detail li {
    padding: 8px 10px;
    border: 1px solid #3b4043;
    color: #8d9293;
    font: 700 8px "Orbitron", sans-serif;
    text-transform: uppercase;
}

.detail-access {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding-top: 23px;
    border-top: 1px solid #303437;
}

.detail-access > span {
    color: #7d8284;
    font-size: 13px;
}

.chronicle-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 26px;
    border-top: 1px solid #272b2e;
    color: #5f6568;
    background: #060708;
    font: 700 7px "Orbitron", sans-serif;
    letter-spacing: 1.2px;
}

.chronicle-footer div {
    height: 100%;
    display: flex;
}

.chronicle-footer button,
.chronicle-footer a {
    min-width: 130px;
    display: grid;
    place-items: center;
    padding: 0 14px;
}

/* In-game command surface */
.game-nav {
    background: linear-gradient(180deg, #111417, #07090b) !important;
    border-bottom-color: #3a3e42 !important;
}

.app-container {
    background:
        radial-gradient(circle at 72% 16%, rgba(164, 113, 46, .06), transparent 28%),
        linear-gradient(135deg, #080a0c, #030405) !important;
}

.game-layout {
    gap: 1px !important;
    background: #33373a;
}

.narrative-panel,
.character-panel {
    background:
        linear-gradient(145deg, rgba(19, 22, 24, .97), rgba(6, 8, 9, .99)) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.narrative-header,
.panel-header {
    min-height: 53px;
    border-bottom: 1px solid #34383b !important;
    background: linear-gradient(180deg, #171b1e, #0c0f11) !important;
}

.narrative-header .header-text,
.panel-header .header-text {
    color: #bebbb5 !important;
    font-family: "Cinzel", serif !important;
    letter-spacing: 1.5px;
}

.message {
    animation-duration: .2s !important;
}

.message-content {
    border: 1px solid #2f3437 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(145deg, rgba(23, 26, 28, .92), rgba(10, 12, 13, .96)) !important;
    box-shadow: inset 3px 0 rgba(128, 99, 54, .22);
}

.message.player .message-content {
    border-color: #4b4338 !important;
    background: linear-gradient(145deg, rgba(40, 33, 25, .82), rgba(12, 11, 10, .97)) !important;
}

.speaker {
    color: #b39058 !important;
    font-family: "Cinzel", serif;
}

.gm-avatar,
.player-avatar,
.system-avatar {
    width: 48px;
    height: 48px;
    border: 1px solid #554a39;
    border-radius: 0 !important;
    overflow: hidden;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: #b8a27b;
    background: #0b0d0e !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.42) !important;
    font: 700 9px "Orbitron", sans-serif !important;
}

.gm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.6) contrast(1.08);
}

.narrative-content::-webkit-scrollbar-thumb,
.settings-content::-webkit-scrollbar-thumb {
    background: #555048 !important;
    border-radius: 0 !important;
}

.quick-btn,
.voice-btn,
.send-btn,
.voice-control-btn,
.realm-nav-action,
.command-item,
.action-btn,
.new-campaign-btn,
.settings-save-btn,
.preview-voice-btn,
.create-final-btn,
.step-btn {
    border-radius: 0 !important;
}

.quick-btn {
    border-color: #34383b !important;
    background: linear-gradient(180deg, #15191c, #090b0d) !important;
}

.quick-btn:hover {
    border-color: #776344 !important;
    color: #d4c6aa !important;
    box-shadow: inset 0 -2px #755b35 !important;
}

.action-glyph,
.oracle-glyph,
.dagger-glyph,
.voice-command-glyph,
.voice-label-glyph {
    stroke: #a18551 !important;
    filter: none !important;
}

.input-wrapper {
    border: 1px solid #44484b !important;
    background: linear-gradient(180deg, #111416, #080a0b) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 24px rgba(0,0,0,.45) !important;
}

.input-wrapper:focus-within {
    border-color: #8d7146 !important;
    box-shadow: inset 0 0 24px rgba(0,0,0,.45), 0 0 0 1px rgba(169,132,76,.22) !important;
}

.send-btn {
    border-left: 1px solid #4d4539 !important;
    background: linear-gradient(145deg, #332a20, #12100d) !important;
}

.dice-tray-inline {
    min-height: 70px;
    border-top: 1px solid #3c4043 !important;
    background: linear-gradient(180deg, #141719, #080a0b) !important;
}

.dice-buttons-inline {
    gap: 7px !important;
    overflow: visible !important;
}

.dice-btn-inline {
    width: 50px !important;
    height: 50px !important;
    padding: 3px !important;
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    clip-path: none !important;
}

.dice-btn-inline:hover,
.dice-btn-inline:focus-visible {
    border-color: #665438 !important;
    background: rgba(160, 115, 52, .08) !important;
    transform: translateY(-2px) !important;
}

.dice-btn-inline svg {
    width: 44px !important;
    height: 44px !important;
    overflow: visible;
    fill: rgba(13, 15, 16, .94) !important;
    stroke: #80735f !important;
    stroke-width: 1.25 !important;
    stroke-linejoin: round;
}

.dice-btn-inline svg path,
.dice-btn-inline svg polygon {
    vector-effect: non-scaling-stroke;
}

.dice-btn-inline svg text {
    fill: #d5c29c !important;
    stroke: none !important;
    font: 700 8px "Orbitron", sans-serif !important;
    text-anchor: middle;
}

.dice-btn-inline.d20 svg {
    filter: drop-shadow(0 0 7px rgba(173, 126, 59, .18));
}

.dice-face {
    min-width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #776544;
    color: #d6bc88;
    font: 700 9px "Orbitron", sans-serif;
    background: #0c0e0f;
}

.roll-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid #776544;
    color: #c5a56b;
    font: 700 10px "Cinzel", serif;
}

.item-icon {
    display: none !important;
}

/* Character forge, settings, and campaign vault */
.modal-overlay {
    background: rgba(2, 3, 4, .9) !important;
    backdrop-filter: blur(10px) saturate(.55);
}

.modal-content,
.modal {
    border: 1px solid #555b5f !important;
    border-radius: 0 !important;
    color: #d5d2cb !important;
    background:
        linear-gradient(145deg, rgba(24, 28, 31, .99), rgba(7, 9, 10, .995) 74%) !important;
    box-shadow: 0 40px 140px #000 !important;
}

.modal-header {
    min-height: 66px;
    border-bottom: 1px solid #3b4043 !important;
    background:
        linear-gradient(90deg, rgba(151, 107, 48, .09), transparent 42%),
        #0d1012 !important;
}

.modal-header h2,
.auth-header h2,
.subscribe-header h2 {
    color: #d9d5ce !important;
    font-family: "Cinzel", serif !important;
    letter-spacing: 1px;
}

.modal-close {
    border: 1px solid #41464a !important;
    border-radius: 0 !important;
    color: #94999b !important;
    background: #0b0d0f !important;
}

.settings-modal {
    width: min(900px, 94vw) !important;
}

.settings-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px !important;
    padding: 1px !important;
    background: #34383b;
}

.setting-group {
    margin: 0 !important;
    padding: 23px !important;
    border: 0 !important;
    background: #0b0e10 !important;
}

.setting-group.setting-section,
.setting-group.settings-actions {
    grid-column: 1 / -1;
}

.setting-group label,
.section-title {
    color: #b9b6af !important;
    font-family: "Cinzel", serif !important;
}

.setting-group select,
.setting-group input[type="range"] {
    border: 1px solid #404549 !important;
    border-radius: 0 !important;
    color: #c4c1ba !important;
    background: #080a0b !important;
}

.setting-hint {
    color: #6f7477 !important;
}

.settings-save-btn,
.new-campaign-btn,
.create-final-btn {
    border: 1px solid #a07940 !important;
    color: #090806 !important;
    background: linear-gradient(180deg, #d0ad6b, #8f632e) !important;
}

.creation-progress {
    border-bottom-color: #383d40 !important;
    background: #0b0e0f !important;
}

.progress-step {
    color: #696f72 !important;
}

.progress-step.active,
.progress-step.completed {
    color: #c8ae7e !important;
}

.mode-btn,
.race-btn,
.class-btn,
.scenario-btn {
    position: relative;
    border: 1px solid #34393c !important;
    border-radius: 0 !important;
    color: #aaa9a4 !important;
    background:
        linear-gradient(145deg, #15191b, #090b0c) !important;
    box-shadow: none !important;
}

.mode-btn:hover,
.race-btn:hover,
.class-btn:hover,
.scenario-btn:hover,
.mode-btn.selected,
.race-btn.selected,
.class-btn.selected,
.scenario-btn.selected {
    border-color: #876b42 !important;
    background:
        linear-gradient(145deg, rgba(113, 81, 42, .28), #0a0c0d 74%) !important;
    box-shadow: inset 3px 0 #8e6b38 !important;
    transform: none !important;
}

.mode-icon,
.race-icon,
.class-icon,
.scenario-icon {
    width: 33px !important;
    min-width: 33px;
    height: 38px !important;
    display: grid !important;
    place-items: center;
    border: 1px solid #625741;
    clip-path: polygon(50% 0, 100% 21%, 88% 78%, 50% 100%, 12% 78%, 0 21%);
    background: linear-gradient(145deg, #262521, #0b0d0e);
}

.mode-icon::before,
.race-icon::before,
.class-icon::before,
.scenario-icon::before {
    content: "R";
    color: #a88b59;
    font: 700 10px "Cinzel", serif;
}

.scenario-icon::before { content: "C"; }
.class-icon::before { content: "O"; }
.race-icon::before { content: "I"; }

.campaign-empty,
.no-character {
    border: 1px dashed #363b3e !important;
    border-radius: 0 !important;
    background: rgba(9, 11, 12, .6) !important;
}

.empty-icon,
.guest-icon,
.user-icon {
    width: 40px;
    height: 46px;
    display: inline-grid !important;
    place-items: center;
    border: 1px solid #554b3b;
    clip-path: polygon(50% 0, 100% 20%, 88% 79%, 50% 100%, 12% 79%, 0 20%);
    background: #111416;
}

.empty-icon::before { content: "Ø"; color: #827151; font: 700 12px "Cinzel", serif; }
.guest-icon::before { content: "ID"; color: #827151; font: 700 8px "Orbitron", sans-serif; }
.user-icon::before { content: "V"; color: #827151; font: 700 11px "Cinzel", serif; }

.guest-notice {
    border: 1px solid #4b443a !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(126, 86, 39, .13), #0b0e10) !important;
}

.subscription-status,
.plan-card,
.account-stats .stat {
    border-radius: 0 !important;
}

.plan-card {
    border-color: #3d4245 !important;
    background: #0b0e10 !important;
}

.plan-card.recommended {
    border-color: #80643d !important;
    box-shadow: inset 0 3px #8f6a35 !important;
}

.recommended-badge {
    color: #d6bd8a !important;
    background: #3c2c18 !important;
}

@media (max-width: 1080px) {
    .chronicle-topbar {
        grid-template-columns: 1fr auto;
    }
    .chronicle-nav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 48px;
        height: 44px;
        border-top: 1px solid #2b2f32;
        border-bottom: 1px solid #2b2f32;
        background: #07090a;
    }
    .chronicle-nav button {
        flex: 1;
        min-width: 0;
    }
    .chronicle-stage,
    .chronicle-deck {
        padding-bottom: 88px;
    }
    .chronicle-stage {
        grid-template-columns: minmax(0, 1fr) 270px;
        padding-inline: 7vw;
    }
    .chronicle-copy h1 {
        font-size: clamp(44px, 8vw, 72px);
    }
}

@media (max-width: 760px) {
    .realms-chronicle-shell {
        grid-template-rows: 64px minmax(0, 1fr) 44px;
    }
    .chronicle-brand {
        padding: 0 13px;
    }
    .chronicle-brand b {
        font-size: 10px;
    }
    .chronicle-identity {
        min-width: 0;
        max-width: 175px;
        padding: 0 12px;
        font-size: 7px;
    }
    .chronicle-stage {
        display: block;
        overflow: auto;
        padding: 56px 22px 106px;
    }
    .chronicle-copy h1 {
        margin-top: 18px;
        font-size: clamp(39px, 13vw, 60px);
        letter-spacing: -2px;
    }
    .chronicle-contract {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .chronicle-contract div {
        min-width: 0;
        padding-right: 8px;
    }
    .chronicle-contract dd {
        font-size: 10px;
    }
    .chronicler-dossier {
        width: 100%;
        margin-top: 30px;
    }
    .chronicle-footer {
        padding-left: 12px;
    }
    .chronicle-footer > span,
    .chronicle-footer button:not(:first-child),
    .chronicle-footer a {
        display: none;
    }
    .chronicle-footer button {
        border-right: 1px solid #292d30;
    }
    .deck-heading {
        align-items: start;
    }
    .deck-heading h2 {
        font-size: 30px;
    }
    .deck-layout {
        grid-template-columns: 1fr;
    }
    .chronicle-list {
        max-height: 270px;
        overflow: auto;
    }
    .chronicle-detail {
        min-height: 0;
        padding: 28px 23px 90px;
    }
    .detail-access {
        align-items: stretch;
        flex-direction: column;
    }
    .detail-access .forged-primary {
        width: 100%;
    }
    .settings-content {
        grid-template-columns: 1fr;
    }
    .setting-group.setting-section,
    .setting-group.settings-actions {
        grid-column: auto;
    }
    .dice-btn-inline {
        width: 44px !important;
        height: 44px !important;
    }
    .dice-btn-inline svg {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 430px) {
    .brand-mark {
        width: 31px;
        height: 37px;
    }
    .chronicle-brand small {
        display: none;
    }
    .chronicle-identity {
        max-width: 145px;
    }
    .chronicle-nav button {
        padding-inline: 6px;
        font-size: 6.5px;
    }
    .chronicle-primary-actions {
        display: grid;
    }
    .chronicle-primary-actions button {
        width: 100%;
    }
    .chronicler-dossier {
        grid-template-columns: 72px 1fr;
    }
    .chronicler-dossier img {
        width: 72px;
        height: 72px;
    }
    .deck-heading button {
        font-size: 0;
        min-width: 42px;
    }
    .deck-heading button::after {
        content: "BACK";
        font-size: 7px;
    }
}

/* Forged character identity plate. The previous circular cartoon portrait is
   intentionally replaced without changing the approved Chronicle layout. */
.portrait-frame {
    width: 72px !important;
    height: 82px !important;
    flex: 0 0 72px;
}

.portrait.avatar-display {
    border: 0 !important;
    border-radius: 0 !important;
    background: #080a0b !important;
    clip-path: polygon(50% 0, 93% 13%, 100% 70%, 76% 94%, 50% 100%, 24% 94%, 0 70%, 7% 13%);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .55);
}

.avatar-display svg {
    border-radius: 0 !important;
    filter: saturate(.64) contrast(1.08);
}

.portrait-frame .level-badge {
    right: -3px;
    bottom: -2px;
    width: 25px;
    height: 25px;
    border: 1px solid #746144;
    border-radius: 0;
    color: #d8d0c2;
    background: #111416;
    font-family: "Orbitron", sans-serif;
    font-size: 8px;
    clip-path: polygon(50% 0, 100% 23%, 100% 77%, 50% 100%, 0 77%, 0 23%);
}

.char-mode {
    border: 1px solid #353a3d !important;
    border-radius: 0 !important;
    color: #9d9a92 !important;
    background: #0d1011 !important;
}
/* Chronicle state: authored objectives, failure clocks, and campaign sheet */
.chronicle-state-content {
    width: min(1080px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    overflow: hidden;
    border: 1px solid #554a3b;
    background:
        linear-gradient(135deg, rgba(145, 104, 48, .06), transparent 42%),
        #0b0d0f;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .72);
}

.chronicle-state-kicker,
.chronicle-panel-label {
    color: #a7906c;
    font: 600 10px/1.2 var(--font-tech, sans-serif);
    letter-spacing: .2em;
}

.chronicle-state-body {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 18px;
    padding: 22px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-color: #65533c #101317;
}

.chronicle-panel {
    border: 1px solid #2d3139;
    background: linear-gradient(180deg, rgba(34, 37, 41, .55), rgba(12, 14, 16, .9));
    padding: 18px;
}

.chronicle-objectives {
    grid-row: span 2;
}

.chronicle-objective {
    position: relative;
    margin-top: 14px;
    padding: 16px 16px 16px 46px;
    border-left: 2px solid #4b4f55;
    background: rgba(255, 255, 255, .018);
}

.chronicle-objective::before {
    content: attr(data-index);
    position: absolute;
    left: 12px;
    top: 15px;
    color: #887354;
    font: 700 12px var(--font-tech, sans-serif);
}

.chronicle-objective.active { border-left-color: #b99458; }
.chronicle-objective.complete { border-left-color: #637764; }
.chronicle-objective.failed { border-left-color: #874c45; }
.chronicle-objective.locked { opacity: .48; }
.chronicle-objective h4 { margin: 0 0 6px; color: #e3dfd4; }
.chronicle-objective p { margin: 0; color: #94979a; line-height: 1.55; }
.chronicle-state-tag { color: #a7906c; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

.chronicle-clock { margin-top: 14px; }
.chronicle-clock-head { display: flex; justify-content: space-between; gap: 12px; color: #d8d4ca; }
.chronicle-clock-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 10px 0; }
.chronicle-clock-segment { height: 8px; border: 1px solid #3c4045; background: #15181b; }
.chronicle-clock-segment.filled { border-color: #876149; background: #704637; }
.chronicle-clock.critical .chronicle-clock-segment.filled,
.chronicle-clock.triggered .chronicle-clock-segment.filled { background: #793c36; }
.chronicle-clock small { color: #85888c; line-height: 1.45; }

.chronicle-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.chronicle-sheet-stat {
    min-height: 62px;
    padding: 10px;
    border: 1px solid #292e33;
    background: #0d1012;
}
.chronicle-sheet-stat span { display: block; color: #777d82; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.chronicle-sheet-stat strong { display: block; margin-top: 7px; color: #ddd8ce; font: 500 17px var(--font-display, sans-serif); }

@media (max-width: 760px) {
    .chronicle-state-body { grid-template-columns: 1fr; padding: 12px; }
    .chronicle-objectives { grid-row: auto; }
    .chronicle-state-content { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}