@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=IM+Fell+English+SC&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
    --parch-0: #f8f1e2;
    --parch-1: #efe4c8;
    --parch-2: #dfcfaa;
    --parch-3: #bea678;
    --parch-4: #8f734c;

    --ink-0: #1a140f;
    --ink-1: #31261b;
    --ink-2: #4a3b2b;
    --ink-3: #675540;
    --ink-4: #89745e;

    --tint: #8b3a2d;
    --tint-player: #8b3a2d;
    --tint-enemy: #4b446f;

    --blood: #8f2a1e;
    --lapis: #315684;
    --verdant: #305c3f;
    --gilt: #9d7322;

    --shadow-soft: 0 2px 0 rgba(26,20,15,0.06), 0 14px 30px -18px rgba(26,20,15,0.24);

    --font-serif: "EB Garamond", Georgia, serif;
    --font-smallcaps: "IM Fell English SC", "EB Garamond", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --rule: 1px solid rgba(74, 59, 43, 0.28);
    --rule-heavy: 2px solid rgba(49, 38, 27, 0.82);

    --grid: 18px;
    --base-size: clamp(19px, 0.7vw + 14px, 24px);
    --panel-body-size: clamp(18px, 0.45vw + 15px, 22px);
    --label-size: clamp(14px, 0.25vw + 12px, 17px);
    --title-size: clamp(26px, 0.8vw + 20px, 38px);
}

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

html, body {
    height: 100%;
    font-family: var(--font-serif);
    font-size: var(--base-size);
    color: var(--ink-0);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "onum" 1;
}

body {
    background-color: var(--parch-1);
    background-image:
        linear-gradient(rgba(49, 38, 27, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(49, 38, 27, 0.04) 1px, transparent 1px),
        radial-gradient(circle at top left, rgba(255,255,255,0.42), transparent 28%),
        radial-gradient(circle at bottom right, rgba(93,72,44,0.16), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(93,72,44,0.06));
    background-size: var(--grid) var(--grid), var(--grid) var(--grid), 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 0;
}

body.opt-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse at 18% 10%, rgba(255,255,255,0.22), transparent 40%),
        radial-gradient(ellipse at 84% 88%, rgba(26,20,15,0.12), transparent 52%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.52;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse at center, transparent 58%, rgba(26,20,15,0.18) 100%);
}

#app {
    position: relative;
    z-index: 3;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 34px 14px;
    border-bottom: var(--rule);
    gap: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
}

#topbar .side-l,
#topbar .side-r {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.08em;
    color: var(--ink-2);
}

#topbar .side-r {
    justify-content: flex-end;
    flex-wrap: wrap;
}

#topbar h1 {
    font-family: var(--font-smallcaps);
    font-weight: 400;
    font-size: var(--title-size);
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--ink-0);
    white-space: nowrap;
}

#topbar h1 .orn {
    color: var(--parch-4);
    margin: 0 0.45em;
}

.folio {
    font-family: var(--font-serif);
    font-size: calc(var(--label-size) + 1px);
    color: var(--ink-2);
}

.conn-dot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--label-size);
    color: var(--ink-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conn-dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--parch-4);
    box-shadow: 0 0 0 4px rgba(143,115,76,0.18);
    transition: background .3s, box-shadow .3s;
}

.conn-dot.connected::before {
    background: var(--verdant);
    box-shadow: 0 0 0 4px rgba(48,92,63,0.16);
    animation: breathe 3s ease-in-out infinite;
}

.conn-dot.disconnected::before {
    background: var(--blood);
    box-shadow: 0 0 0 4px rgba(143,42,30,0.16);
    animation: breathe 1.5s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.chrome-btn {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(74,59,43,0.28);
    border-radius: 2px;
    padding: 9px 14px;
    color: var(--ink-1);
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.chrome-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(49,38,27,0.55);
}

.chrome-btn.active {
    background: var(--ink-0);
    color: var(--parch-0);
    border-color: var(--ink-0);
}

.page-view {
    overflow: auto;
    padding: 34px 48px 48px;
}

#lobby-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0 18px;
    border-bottom: var(--rule-heavy);
    margin-bottom: 24px;
}

#lobby-header h2 {
    font-family: var(--font-smallcaps);
    font-size: clamp(24px, 0.65vw + 20px, 34px);
    letter-spacing: 0.12em;
    color: var(--ink-0);
    font-weight: 400;
}

#new-character-btn,
.back-to-lobby-btn {
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.12em;
    padding: 12px 20px;
    background: var(--ink-0);
    color: var(--parch-0);
    border: 1px solid var(--ink-0);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

#new-character-btn:hover,
.back-to-lobby-btn:hover {
    background: var(--ink-1);
    border-color: var(--ink-1);
}

#pack-list {
    display: flex;
    flex-direction: column;
}

.pack-card {
    display: grid;
    grid-template-columns: 84px minmax(180px, 0.7fr) minmax(260px, 1.3fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 18px 18px 22px;
    border-bottom: 1px dashed rgba(74,59,43,0.28);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    position: relative;
}

.pack-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: var(--pack-tint, var(--ink-2));
}

.pack-card .pack-folio {
    font-family: var(--font-mono);
    font-size: var(--label-size);
    color: var(--ink-3);
}

.pack-name {
    font-family: var(--font-smallcaps);
    font-size: clamp(22px, 0.35vw + 18px, 28px);
    letter-spacing: 0.06em;
    color: var(--ink-0);
}

.pack-archetype {
    font-family: var(--font-serif);
    font-size: calc(var(--panel-body-size) + 1px);
    color: var(--ink-2);
}

.pack-details {
    display: grid;
    gap: 12px;
}

.pack-build {
    display: grid;
    gap: 10px;
}

.pack-build-slot {
    border: 0;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.pack-build-slot legend {
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.1em;
    color: var(--ink-3);
}

.pack-build-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pack-build-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid rgba(74,59,43,0.3);
    background: rgba(248,241,226,0.58);
    font-family: var(--font-serif);
    font-size: var(--label-size);
    color: var(--ink-1);
    cursor: pointer;
}

.pack-build-option input {
    accent-color: var(--ink-0);
}

.pack-play-btn {
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.12em;
    padding: 10px 18px;
    background: transparent;
    color: var(--ink-0);
    border: 1px solid rgba(49,38,27,0.7);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.pack-play-btn:hover {
    background: var(--ink-0);
    color: var(--parch-0);
    border-color: var(--ink-0);
}

.lobby-empty {
    font-size: calc(var(--panel-body-size) + 1px);
    color: var(--ink-2);
    text-align: center;
    padding: 72px 24px;
}

#generation-status,
#generation-log {
    padding: 18px 20px;
    border: 1px solid rgba(74,59,43,0.24);
    background: rgba(248,241,226,0.78);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

#generation-status {
    margin-bottom: 16px;
}

.gen-status-line {
    font-size: calc(var(--panel-body-size) + 1px);
    color: var(--ink-1);
    animation: pulse-text 1.8s ease-in-out infinite;
}

.gen-status-line::before {
    content: "Status: ";
    font-family: var(--font-smallcaps);
    letter-spacing: 0.08em;
    color: var(--ink-2);
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.58; }
}

#generation-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 52vh;
    overflow: auto;
}

.gen-log-entry {
    font-family: var(--font-mono);
    font-size: clamp(14px, 0.2vw + 12px, 16px);
    color: var(--ink-2);
    padding: 5px 0;
    border-bottom: 1px dotted rgba(74,59,43,0.22);
}

.gen-log-entry:last-child { border-bottom: none; }
.gen-error { color: var(--blood); font-weight: 700; }
.gen-done  { color: var(--verdant); font-weight: 700; }

#canvas-wrap {
    position: relative;
    overflow: hidden;
    padding: 18px 22px;
}

#canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

#canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(49,38,27,0.07) 1px, transparent 1px) 0 0/var(--grid) var(--grid),
        linear-gradient(90deg, rgba(49,38,27,0.05) 1px, transparent 1px) 0 0/var(--grid) var(--grid);
    pointer-events: none;
    z-index: 0;
    transition: opacity .2s;
}

#canvas.dragging::before {
    background:
        linear-gradient(rgba(49,38,27,0.14) 1px, transparent 1px) 0 0/var(--grid) var(--grid),
        linear-gradient(90deg, rgba(49,38,27,0.12) 1px, transparent 1px) 0 0/var(--grid) var(--grid);
}

/* subtle table-edge vignette only — red margin rule now lives on the log panel */

.panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s;
}

.panel:not([class*="pack-"]) {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 26%),
        linear-gradient(90deg, rgba(255,255,255,0.05), transparent 18%, rgba(49,38,27,0.02) 100%),
        var(--parch-0);
    border: 1px solid rgba(74,59,43,0.22);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.18),
        inset 0 0 0 2px rgba(190,166,120,0.34),
        var(--shadow-soft);
}

.panel[class*="pack-"] {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.panel.focused {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.18),
        inset 0 0 0 2px rgba(49,38,27,0.6),
        0 18px 38px -18px rgba(26,20,15,0.34);
    z-index: 20;
}

.panel.hidden { display: none; }
.panel[data-panel="player"] { --tint: var(--tint-player); }
.panel[data-panel="enemy"]  { --tint: var(--tint-enemy); }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.panel:not([class*="pack-"]) .panel-head {
    border-bottom: var(--rule);
    background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
}

.panel-head:active { cursor: grabbing; }

.panel-title {
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 2px);
    letter-spacing: 0.14em;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.panel:not([class*="pack-"]) .panel-title {
    color: var(--ink-1);
}

.panel-title .folio-num {
    font-family: var(--font-mono);
    font-size: calc(var(--label-size) - 1px);
    letter-spacing: 0.04em;
}

.panel:not([class*="pack-"]) .panel-title .folio-num {
    color: var(--ink-3);
}

.panel-ctrls {
    display: flex;
    gap: 8px;
    opacity: 0.65;
    transition: opacity .15s;
}

.panel:hover .panel-ctrls,
.panel.focused .panel-ctrls { opacity: 1; }

.panel-ctrls button {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.panel:not([class*="pack-"]) .panel-ctrls button {
    border: 1px solid rgba(74,59,43,0.24);
    background: rgba(255,255,255,0.08);
    color: var(--ink-2);
}

.panel:not([class*="pack-"]) .panel-ctrls button:hover {
    color: var(--ink-0);
    border-color: rgba(49,38,27,0.5);
}

.panel-ctrls button svg {
    width: 11px;
    height: 11px;
}

.panel-body {
    flex: 1;
    overflow: auto;
    padding: 20px 22px;
    min-height: 0;
    font-size: var(--panel-body-size);
}

.panel-body::-webkit-scrollbar { width: 12px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }

.panel-body::-webkit-scrollbar-thumb {
    background: rgba(143,115,76,0.8);
    border: 3px solid var(--parch-0);
    border-radius: 999px;
}

.panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--parch-4);
}

.resize-handle {
    position: absolute;
    background: transparent;
    z-index: 5;
}

.resize-handle.e  { top: 6px; bottom: 6px; right: -4px; width: 8px; cursor: ew-resize; }
.resize-handle.s  { left: 6px; right: 6px; bottom: -4px; height: 8px; cursor: ns-resize; }
.resize-handle.w  { top: 6px; bottom: 6px; left: -4px; width: 8px; cursor: ew-resize; }
.resize-handle.n  { left: 6px; right: 6px; top: -4px; height: 8px; cursor: ns-resize; }
.resize-handle.se { right: -4px; bottom: -4px; width: 12px; height: 12px; cursor: nwse-resize; }
.resize-handle.sw { left: -4px; bottom: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.resize-handle.ne { right: -4px; top: -4px; width: 12px; height: 12px; cursor: nesw-resize; }
.resize-handle.nw { left: -4px; top: -4px; width: 12px; height: 12px; cursor: nwse-resize; }

.panel:not([class*="pack-"])::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(135deg, transparent 45%, rgba(143,115,76,0.8) 45%, rgba(143,115,76,0.8) 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, rgba(143,115,76,0.8) 65%, rgba(143,115,76,0.8) 75%, transparent 75%);
    pointer-events: none;
    opacity: 0.7;
}

.panel[class*="pack-"] .panel-head {
    background: rgba(0, 0, 0, 0.2);
    color: inherit;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.panel[class*="pack-"] .panel-title,
.panel[class*="pack-"] .panel-title .folio-num {
    color: inherit;
    opacity: 0.75;
}

.panel[class*="pack-"] .panel-ctrls button {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.panel[class*="pack-"] .panel-ctrls button:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.panel[class*="pack-"] .panel-body {
    padding: 0;
}

.drag-tip {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    background: var(--parch-0);
    border: 1px solid rgba(74,59,43,0.18);
    padding: 3px 7px;
    letter-spacing: 0.04em;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.panel.being-dragged .drag-tip { opacity: 1; }

.panel.being-dragged {
    box-shadow: 0 20px 42px -16px rgba(26,20,15,0.38);
    opacity: 0.97;
}

/* Index-card tape for character / enemy panels — small washi strip at top-center */
.panel[data-panel="player"]::before,
.panel[data-panel="enemy"]::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-1.2deg);
    width: 96px;
    height: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0)),
        var(--tint, var(--ink-2));
    opacity: 0.78;
    box-shadow: 0 2px 4px -2px rgba(26,20,15,0.35);
    border-radius: 1px;
    z-index: 6;
    pointer-events: none;
}

.panel[data-panel="enemy"]::before {
    transform: translateX(-50%) rotate(1.2deg);
    left: 52%;
}

/* Spiral-notebook holes + red margin rule for the log panel */
.panel[data-panel="log"] .panel-body {
    position: relative;
    padding-left: 42px;
    background-image: radial-gradient(circle at 12px 12px, rgba(26,20,15,0.55) 0 3.5px, transparent 4.5px);
    background-size: 100% 26px;
    background-repeat: repeat-y;
    background-position: 0 14px;
}

.panel[data-panel="log"] .panel-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 32px;
    width: 1.5px;
    background: rgba(143,42,30,0.55);
    pointer-events: none;
    z-index: 1;
}

#character_info, #enemy_info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
}

#character_info h1:not(.ui-title), #character_info h2:not(.ui-title),
#enemy_info h1:not(.ui-title), #enemy_info h2:not(.ui-title) {
    font-family: var(--font-smallcaps);
    font-size: clamp(24px, 0.45vw + 20px, 32px);
    letter-spacing: 0.08em;
    color: var(--ink-0);
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(74,59,43,0.26);
}

#character_info h3:not(.ui-title), #enemy_info h3:not(.ui-title) {
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 1px);
    letter-spacing: 0.1em;
    color: var(--ink-1);
    font-weight: 400;
}

.panel:not([class*="pack-"]) #character_info p,
.panel:not([class*="pack-"]) #enemy_info p {
    font-size: var(--panel-body-size);
    line-height: 1.62;
    color: var(--ink-1);
}

.stat-bar {
    position: relative;
    height: 14px;
    background:
        repeating-linear-gradient(90deg, rgba(223,207,170,0.9) 0, rgba(223,207,170,0.9) 1px, transparent 1px, transparent 8px);
    border-top: 1px solid rgba(143,115,76,0.65);
    border-bottom: 1px solid rgba(143,115,76,0.65);
    margin: 6px 0;
    overflow: hidden;
}

.stat-bar-fill {
    position: absolute;
    inset: 0;
    width: var(--w, 100%);
    background: var(--fill, var(--ink-2));
    transition: width .6s cubic-bezier(.2,.7,.2,1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}

.stat-bar-fill.hp       { background: linear-gradient(180deg, #a43f2d, #742117); }
.stat-bar-fill.mp       { background: linear-gradient(180deg, #47689a, #29466f); }
.stat-bar-fill.energy,
.stat-bar-fill.en       { background: linear-gradient(180deg, #bf9441, #835c1f); }

.stat-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.08em;
    color: var(--ink-1);
    margin-top: 8px;
}

.stat-value {
    font-family: var(--font-mono);
    font-size: calc(var(--label-size) + 1px);
    color: var(--ink-0);
    font-variant-numeric: tabular-nums;
}

#character_interface {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.action-btn,
button[data-action]:not(.end-turn-btn):not(.pack-play-btn):not(.chrome-btn):not(#new-character-btn):not(.back-to-lobby-btn):not(.panel-ctrls button):not(.ui-action-button) {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px 14px 18px;
    margin: 4px;
    min-width: 160px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.05) 100%),
        var(--parch-0);
    border: 1px solid rgba(74,59,43,0.32);
    border-top: 3px solid var(--tint, var(--ink-2));
    border-radius: 2px;
    color: var(--ink-0);
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 1px);
    letter-spacing: 0.06em;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 4px 10px -6px rgba(26,20,15,0.24),
        0 14px 22px -18px rgba(26,20,15,0.3);
    transition: transform .12s, box-shadow .12s, background .12s;
}

.action-btn::after,
button[data-action]:not(.end-turn-btn):not(.pack-play-btn):not(.chrome-btn):not(#new-character-btn):not(.back-to-lobby-btn):not(.panel-ctrls button):not(.ui-action-button)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 44px;
    height: 1px;
    background: rgba(74,59,43,0.22);
    pointer-events: none;
}

.action-btn:hover,
button[data-action]:not(.end-turn-btn):not(.pack-play-btn):not(.chrome-btn):not(#new-character-btn):not(.back-to-lobby-btn):not(.panel-ctrls button):not(.ui-action-button):hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 6px 14px -6px rgba(26,20,15,0.32),
        0 20px 28px -18px rgba(26,20,15,0.4);
    border-top-color: var(--tint, var(--ink-1));
}

.action-btn.disabled,
button[data-action].disabled {
    opacity: 0.52;
    cursor: not-allowed;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 6px, rgba(239,228,200,0.65) 6px 12px);
    box-shadow: none;
}

.action-btn.disabled:hover,
button[data-action].disabled:hover {
    transform: none;
    box-shadow: none;
}

.end-turn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px;
    border-top: var(--rule);
    background: linear-gradient(0deg, rgba(255,255,255,0.22), transparent);
    flex-shrink: 0;
}

.end-turn-info {
    font-size: calc(var(--panel-body-size) - 1px);
    color: var(--ink-2);
}

.end-turn-btn {
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 1px);
    letter-spacing: 0.12em;
    padding: 12px 22px;
    background: var(--ink-0);
    color: var(--parch-0);
    border: 1px solid var(--ink-0);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.end-turn-btn:hover {
    background: var(--ink-1);
    border-color: var(--ink-1);
}

.end-turn-btn .kbd {
    color: var(--parch-1);
    border-color: rgba(248,241,226,0.24);
}

#log-root {
    display: flex;
    flex-direction: column;
}

.turn-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 0 14px;
    border-bottom: var(--rule-heavy);
    margin-bottom: 12px;
}

.turn-banner .rule-l,
.turn-banner .rule-r {
    height: 1px;
    background: rgba(49,38,27,0.75);
}

.turn-banner .label {
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 2px);
    letter-spacing: 0.16em;
    color: var(--ink-0);
    white-space: nowrap;
    text-align: center;
}

.turn-banner .sub {
    font-size: calc(var(--label-size) - 1px);
    color: var(--ink-2);
    display: block;
    margin-top: 4px;
    letter-spacing: 0.02em;
    text-align: center;
}

#log-entries {
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif);
    font-size: var(--panel-body-size);
    line-height: 1.62;
    color: var(--ink-1);
    padding-left: 18px;
}

.log-block {
    padding: 12px 0 14px;
    border-bottom: 1px solid rgba(74,59,43,0.18);
    position: relative;
}

.log-block:last-child { border-bottom: none; }

.log-header {
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 1px);
    letter-spacing: 0.1em;
    color: var(--ink-0);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(49,38,27,0.08);
}

.log-children {
    padding-left: 16px;
    border-left: 1px dashed rgba(74,59,43,0.2);
    margin-left: 2px;
    margin-top: 6px;
}

.log-children .log-entry {
    padding: 2px 0;
    font-size: calc(var(--panel-body-size) - 1px);
    color: var(--ink-2);
}

.log-entry {
    padding: 2px 0;
}

body.opt-dice-hidden .log-entry span[style*="font-family"] {
    display: none;
}

#log-entries:empty::before {
    content: "The combat log is waiting for the first action.";
    font-size: calc(var(--panel-body-size) - 1px);
    color: var(--ink-3);
    padding: 22px 0;
    display: block;
    text-align: center;
}

#tweaks {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    width: min(360px, calc(100vw - 40px));
    background: var(--parch-0);
    border: 1px solid rgba(49,38,27,0.5);
    box-shadow: 0 20px 42px -18px rgba(26,20,15,0.34), 0 2px 0 rgba(26,20,15,0.04);
    font-family: var(--font-serif);
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s, opacity .2s;
}

#tweaks.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* Pocket-notebook elastic strap along the left spine */
#tweaks::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    width: 7px;
    background: linear-gradient(180deg, rgba(74,59,43,0.6), rgba(49,38,27,0.82) 50%, rgba(74,59,43,0.6));
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.12), 0 2px 3px -1px rgba(26,20,15,0.4);
    border-radius: 1px;
    pointer-events: none;
}

#tweaks .tw-head {
    padding: 12px 16px;
    border-bottom: var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.14em;
    color: var(--ink-0);
    background: linear-gradient(180deg, rgba(255,255,255,0.26), transparent);
}

#tweaks .tw-head button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--ink-2);
    line-height: 1;
    padding: 0 4px;
}

#tweaks .tw-body {
    padding: 12px 16px 16px;
    max-height: 72vh;
    overflow: auto;
}

.tw-section {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(74,59,43,0.22);
}

.tw-section:last-child { border-bottom: none; }

.tw-section .h {
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.1em;
    color: var(--ink-1);
    margin-bottom: 10px;
}

.preset-grid,
.panel-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.preset-btn {
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.06em;
    padding: 10px 12px;
    border: 1px solid rgba(74,59,43,0.22);
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    color: var(--ink-1);
    text-align: left;
}

.preset-btn .sub {
    display: block;
    font-family: var(--font-serif);
    letter-spacing: 0;
    font-size: calc(var(--label-size) - 1px);
    color: var(--ink-3);
    margin-top: 3px;
}

.preset-btn:hover { background: rgba(255,255,255,0.24); }

.preset-btn.active {
    background: var(--ink-0);
    color: var(--parch-0);
    border-color: var(--ink-0);
}

.preset-btn.active .sub { color: var(--parch-2); }

.tw-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-smallcaps);
    font-size: var(--label-size);
    letter-spacing: 0.07em;
    color: var(--ink-1);
    padding: 8px 10px;
    border: 1px solid rgba(74,59,43,0.22);
    cursor: pointer;
    background: rgba(255,255,255,0.12);
}

.tw-toggle .pill {
    width: 26px;
    height: 14px;
    border-radius: 999px;
    background: rgba(190,166,120,0.85);
    position: relative;
    flex-shrink: 0;
    transition: background .15s;
}

.tw-toggle .pill::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--parch-0);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left .15s;
}

.tw-toggle.on .pill { background: var(--ink-1); }
.tw-toggle.on .pill::after { left: 14px; }

#tweaks-trigger {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 49;
    border: 1px solid rgba(49,38,27,0.45);
    background: var(--parch-0);
    padding: 12px 18px;
    font-family: var(--font-smallcaps);
    font-size: calc(var(--label-size) + 1px);
    letter-spacing: 0.12em;
    color: var(--ink-0);
    cursor: pointer;
    box-shadow: 0 10px 24px -14px rgba(26,20,15,0.28);
    transition: background .15s;
}

#tweaks-trigger:hover { background: rgba(255,255,255,0.28); }
#tweaks-trigger.hidden { display: none; }

#bottombar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 34px 18px;
    border-top: var(--rule);
    font-size: var(--label-size);
    color: var(--ink-2);
}

#bottombar .center {
    font-family: var(--font-smallcaps);
    letter-spacing: 0.12em;
    color: var(--ink-1);
    text-align: center;
}

#bottombar .side-r { text-align: right; }

.kbd {
    font-family: var(--font-mono);
    font-size: calc(var(--label-size) - 1px);
    padding: 2px 6px;
    border: 1px solid rgba(74,59,43,0.24);
    color: var(--ink-1);
    letter-spacing: 0;
    margin: 0 2px;
}

@media (max-width: 1100px) {
    #topbar,
    #bottombar {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #topbar .side-l,
    #topbar .side-r,
    #bottombar .side-r {
        justify-content: center;
        text-align: center;
    }

    #lobby-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pack-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
        padding-left: 24px;
    }
}

@media (max-width: 900px) {
    html, body {
        overflow: auto;
    }

    #canvas-wrap {
        overflow: auto;
    }

    #canvas {
        min-height: 1280px;
    }

    .end-turn-row {
        flex-direction: column;
        align-items: stretch;
    }
}