:root {
    --game-width: 1280px;
    --game-height: 720px;
    --ui-scale: 1;

    /* Chants of Sennaar Palette */
    --bg-deep: #12101b;
    --terracotta: #d96b43;
    --terracotta-dark: #9e3f22;
    --ochre: #e8a849;
    --sandstone: #f4e7d3;
    --parchment: #fbf3e4;
    --parchment-shadow: #e2d1b5;
    --ink-dark: #251d29;
    --ink-muted: #6c5b6e;
    --lapis: #2a4b7c;
    --lapis-bright: #4172b8;
    --turquoise: #2ca6a4;
    --gold: #f5c242;
    --crimson: #c93b4b;
    --validated-green: #2b8a64;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at center, #1f192c 0%, #0d0a14 100%);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--sandstone);
}

#app-shell {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#game-area {
    position: relative;
    width: var(--game-width);
    height: var(--game-height);
    background: #1a1524;
    border: 2px solid rgba(232, 168, 73, 0.35);
    border-radius: calc(12px * var(--ui-scale));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    font-size: calc(15px * var(--ui-scale));
}

#world-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* ================= HUD BAR ================= */
#hud-bar {
    position: absolute;
    top: calc(12px * var(--ui-scale));
    left: calc(14px * var(--ui-scale));
    right: calc(14px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--ui-scale));
    z-index: 20;
    pointer-events: none;
}

.hud-left, .hud-center, .hud-right {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
    pointer-events: auto;
}

.hud-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(7px * var(--ui-scale));
    background: rgba(26, 20, 35, 0.88);
    color: var(--sandstone);
    border: 1.5px solid rgba(232, 168, 73, 0.45);
    padding: calc(8px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale));
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hud-btn:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    background: rgba(45, 34, 60, 0.95);
}

.hud-btn-primary {
    background: linear-gradient(135deg, #c75b35 0%, #99391c 100%);
    border-color: var(--gold);
    color: #fff;
    box-shadow: 0 4px 15px rgba(217, 107, 67, 0.35);
}

.hud-btn-primary:hover {
    background: linear-gradient(135deg, #db6940 0%, #b04322 100%);
}

.badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    border-radius: 50%;
    background: var(--gold);
    color: var(--ink-dark);
    font-weight: 800;
    font-size: calc(12px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--gold);
    animation: pulseBadge 1.4s infinite;
}

@keyframes pulseBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

#zone-indicator {
    display: flex;
    flex-direction: column;
    background: rgba(26, 20, 35, 0.85);
    border: 1px solid rgba(232, 168, 73, 0.35);
    padding: calc(5px * var(--ui-scale)) calc(12px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    backdrop-filter: blur(8px);
}

#zone-caste-badge {
    font-size: calc(10px * var(--ui-scale));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.caste-devotee { color: var(--ochre); }
.caste-warrior { color: #ff7585; }
.caste-scholar { color: #5ce1df; }

#zone-title {
    font-size: calc(14px * var(--ui-scale));
    font-weight: 700;
    color: var(--sandstone);
}

#objective-banner {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale));
    background: rgba(26, 20, 35, 0.85);
    border: 1px solid rgba(232, 168, 73, 0.35);
    padding: calc(7px * var(--ui-scale)) calc(16px * var(--ui-scale));
    border-radius: 999px;
    font-size: calc(13px * var(--ui-scale));
    color: #efe1c9;
    backdrop-filter: blur(8px);
}

#inventory-bar {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--ui-scale));
}

.inv-item {
    display: flex;
    align-items: center;
    gap: calc(5px * var(--ui-scale));
    background: rgba(44, 166, 164, 0.22);
    border: 1.5px solid var(--turquoise);
    padding: calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    font-size: calc(12px * var(--ui-scale));
    font-weight: 600;
    color: #dffaf9;
}

/* ================= MAIN MENU ================= */
.menu-screen {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 28%, rgba(217, 107, 67, 0.28) 0%, rgba(22, 17, 33, 0.96) 72%);
    backdrop-filter: blur(6px);
}

.menu-content {
    width: min(92%, calc(760px * var(--ui-scale)));
    background: linear-gradient(180deg, rgba(36, 27, 48, 0.96) 0%, rgba(23, 18, 32, 0.98) 100%);
    border: 2px solid rgba(232, 168, 73, 0.55);
    border-radius: calc(18px * var(--ui-scale));
    padding: calc(32px * var(--ui-scale)) calc(38px * var(--ui-scale));
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
}

.menu-glyphs-deco {
    display: flex;
    justify-content: center;
    gap: calc(16px * var(--ui-scale));
    margin-bottom: calc(16px * var(--ui-scale));
}

.deco-glyph {
    width: calc(44px * var(--ui-scale));
    height: calc(44px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));
    background: rgba(232, 168, 73, 0.12);
    border: 1.5px solid rgba(232, 168, 73, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(6px * var(--ui-scale));
    color: var(--gold);
}

.menu-eyebrow {
    font-size: calc(12px * var(--ui-scale));
    letter-spacing: 0.25em;
    color: var(--ochre);
    font-weight: 700;
    margin-bottom: calc(6px * var(--ui-scale));
}

.menu-title {
    font-size: calc(40px * var(--ui-scale));
    font-weight: 900;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, #fce5b8 0%, #e8a849 50%, #d96b43 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: calc(12px * var(--ui-scale));
}

.menu-subtitle {
    font-size: calc(15px * var(--ui-scale));
    line-height: 1.55;
    color: #d7c7b2;
    max-width: calc(600px * var(--ui-scale));
    margin: 0 auto calc(24px * var(--ui-scale));
}

.menu-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(12px * var(--ui-scale));
    margin-bottom: calc(20px * var(--ui-scale));
}

.btn-menu-main {
    background: linear-gradient(135deg, #e07246 0%, #b5431e 100%);
    color: #fff;
    border: 2px solid var(--gold);
    padding: calc(13px * var(--ui-scale)) calc(28px * var(--ui-scale));
    font-size: calc(16px * var(--ui-scale));
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: calc(10px * var(--ui-scale));
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(217, 107, 67, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-menu-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(217, 107, 67, 0.6);
}

.btn-menu-sub {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sandstone);
    border: 1.5px solid rgba(232, 168, 73, 0.45);
    padding: calc(12px * var(--ui-scale)) calc(20px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale));
    font-weight: 700;
    border-radius: calc(10px * var(--ui-scale));
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-menu-sub:hover {
    background: rgba(232, 168, 73, 0.16);
    border-color: var(--gold);
}

.how-to-play-box {
    background: rgba(15, 11, 22, 0.72);
    border: 1px solid rgba(232, 168, 73, 0.3);
    border-radius: calc(12px * var(--ui-scale));
    padding: calc(14px * var(--ui-scale));
    margin-bottom: calc(16px * var(--ui-scale));
    text-align: left;
}

.htp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(10px * var(--ui-scale));
}

.htp-step {
    background: rgba(255, 255, 255, 0.03);
    padding: calc(9px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    font-size: calc(12.5px * var(--ui-scale));
    line-height: 1.4;
}

.htp-step strong {
    color: var(--ochre);
    display: block;
    margin-bottom: 3px;
}

kbd {
    background: #2f263d;
    border: 1px solid #6e5b82;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
}

.menu-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(12px * var(--ui-scale));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: calc(12px * var(--ui-scale));
    color: #9e8ea8;
}

.version-badge {
    background: rgba(232, 168, 73, 0.15);
    border: 1px solid rgba(232, 168, 73, 0.4);
    color: var(--gold);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: Consolas, monospace;
    font-weight: 700;
}

/* ================= OVERLAYS & DIALOGUE ================= */
.overlay-panel {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(12, 9, 18, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px * var(--ui-scale));
}

.dialogue-card {
    width: min(94%, calc(760px * var(--ui-scale)));
    max-height: 88%;
    overflow-y: auto;
    background: linear-gradient(180deg, #271e35 0%, #1b1426 100%);
    border: 2px solid var(--ochre);
    border-radius: calc(16px * var(--ui-scale));
    padding: calc(22px * var(--ui-scale));
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.8);
}

.dialogue-header {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--ui-scale));
    margin-bottom: calc(16px * var(--ui-scale));
    padding-bottom: calc(12px * var(--ui-scale));
    border-bottom: 1px solid rgba(232, 168, 73, 0.25);
}

.speaker-avatar {
    width: calc(48px * var(--ui-scale));
    height: calc(48px * var(--ui-scale));
    border-radius: 50%;
    background: rgba(232, 168, 73, 0.18);
    border: 2px solid var(--ochre);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(24px * var(--ui-scale));
    flex-shrink: 0;
}

.speaker-meta {
    flex: 1;
}

.speaker-meta h3 {
    font-size: calc(18px * var(--ui-scale));
    color: var(--gold);
}

.speaker-meta span {
    font-size: calc(12.5px * var(--ui-scale));
    color: #b5a3bf;
}

.icon-close {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sandstone);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: calc(34px * var(--ui-scale));
    height: calc(34px * var(--ui-scale));
    border-radius: 50%;
    font-size: calc(16px * var(--ui-scale));
    cursor: pointer;
}

.icon-close:hover {
    background: var(--crimson);
    color: #fff;
}

.dialogue-visual {
    background: #f5ebd8;
    color: var(--ink-dark);
    border: 2px solid #c9b28b;
    border-radius: calc(12px * var(--ui-scale));
    padding: calc(14px * var(--ui-scale));
    margin-bottom: calc(16px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(120px * var(--ui-scale));
}

/* ================= GLYPH SENTENCE ROW ================= */
.glyph-sentence-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(12px * var(--ui-scale));
    padding: calc(16px * var(--ui-scale));
    background: rgba(251, 243, 228, 0.96);
    border: 2px solid #cbb48e;
    border-radius: calc(12px * var(--ui-scale));
    margin-bottom: calc(14px * var(--ui-scale));
}

.glyph-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(82px * var(--ui-scale));
    padding: calc(8px * var(--ui-scale)) calc(6px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));
    background: #fff9ef;
    border: 2px solid #d5c19f;
    cursor: pointer;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.glyph-token:hover {
    transform: translateY(-3px);
    border-color: var(--terracotta);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.glyph-token.validated {
    border-color: var(--validated-green);
    background: #eefaf4;
}

.glyph-token.warrior-glyph {
    border-color: #8ea5c9;
    background: #f4f7fc;
}

.glyph-token.warrior-glyph.validated {
    border-color: var(--lapis-bright);
    background: #eaf1fc;
}

.glyph-svg-wrap {
    width: calc(46px * var(--ui-scale));
    height: calc(46px * var(--ui-scale));
    color: var(--ink-dark);
    margin-bottom: calc(5px * var(--ui-scale));
}

.glyph-label {
    font-size: calc(11.5px * var(--ui-scale));
    text-align: center;
    line-height: 1.15;
    min-height: calc(16px * var(--ui-scale));
    word-break: break-word;
}

.glyph-label.unknown {
    color: #9b8c7c;
    font-style: italic;
}

.glyph-label.guess {
    color: #b85b28;
    font-style: italic;
    font-weight: 700;
}

.glyph-label.confirmed {
    color: #196949;
    font-weight: 800;
    text-transform: uppercase;
}

.dialogue-narration {
    font-size: calc(14px * var(--ui-scale));
    color: #d8c8b6;
    line-height: 1.5;
    text-align: center;
    margin-bottom: calc(16px * var(--ui-scale));
}

.dialogue-actions {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--ui-scale));
}

.action-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(10px * var(--ui-scale));
}

.btn-primary, .btn-secondary, .btn-action {
    padding: calc(10px * var(--ui-scale)) calc(18px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale));
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #d96b43 0%, #aa3e1b 100%);
    color: #fff;
    border: 1.5px solid var(--gold);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sandstone);
    border: 1.5px solid rgba(232, 168, 73, 0.4);
}

.btn-secondary:hover {
    background: rgba(232, 168, 73, 0.18);
}

/* Composer Box inside Dialogue */
.composer-box {
    background: rgba(15, 11, 22, 0.75);
    border: 1.5px solid rgba(232, 168, 73, 0.4);
    border-radius: calc(12px * var(--ui-scale));
    padding: calc(14px * var(--ui-scale));
}

.composer-title {
    font-size: calc(13px * var(--ui-scale));
    color: var(--gold);
    font-weight: 700;
    margin-bottom: calc(8px * var(--ui-scale));
    text-align: center;
}

.composer-slots {
    display: flex;
    justify-content: center;
    gap: calc(10px * var(--ui-scale));
    margin-bottom: calc(12px * var(--ui-scale));
    min-height: calc(74px * var(--ui-scale));
}

.composer-slot {
    width: calc(78px * var(--ui-scale));
    height: calc(74px * var(--ui-scale));
    border: 2px dashed rgba(232, 168, 73, 0.55);
    border-radius: calc(10px * var(--ui-scale));
    background: rgba(251, 243, 228, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sandstone);
    padding: 4px;
}

.composer-slot.filled {
    background: #fbf3e4;
    border-style: solid;
    border-color: var(--gold);
    color: var(--ink-dark);
}

.composer-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(8px * var(--ui-scale));
    margin-bottom: calc(12px * var(--ui-scale));
}

.bank-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(68px * var(--ui-scale));
    padding: calc(5px * var(--ui-scale));
    background: #fbf3e4;
    color: var(--ink-dark);
    border: 1.5px solid #bfa782;
    border-radius: calc(8px * var(--ui-scale));
    cursor: pointer;
    font-size: calc(10.5px * var(--ui-scale));
}

.bank-chip:hover {
    border-color: var(--terracotta);
    transform: translateY(-2px);
}

.bank-chip svg {
    width: calc(32px * var(--ui-scale));
    height: calc(32px * var(--ui-scale));
}

/* ================= QUICK NOTE MODAL ================= */
#quick-note-modal {
    z-index: 55;
}

.quick-note-card {
    width: min(92%, calc(420px * var(--ui-scale)));
    background: var(--parchment);
    color: var(--ink-dark);
    border: 3px solid #bfa47b;
    border-radius: calc(14px * var(--ui-scale));
    padding: calc(20px * var(--ui-scale));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}

.qn-header {
    display: flex;
    align-items: center;
    gap: calc(14px * var(--ui-scale));
    margin-bottom: calc(14px * var(--ui-scale));
}

.qn-glyph-preview {
    width: calc(60px * var(--ui-scale));
    height: calc(60px * var(--ui-scale));
    background: #fff;
    border: 2px solid #cbb48e;
    border-radius: calc(10px * var(--ui-scale));
    padding: calc(8px * var(--ui-scale));
    flex-shrink: 0;
}

#qn-title {
    font-size: calc(17px * var(--ui-scale));
    color: var(--ink-dark);
}

#qn-subtitle {
    font-size: calc(12.5px * var(--ui-scale));
    color: var(--ink-muted);
}

#qn-input {
    width: 100%;
    padding: calc(10px * var(--ui-scale)) calc(12px * var(--ui-scale));
    font-size: calc(15px * var(--ui-scale));
    border: 2px solid #bfa47b;
    border-radius: calc(8px * var(--ui-scale));
    background: #fff;
    color: var(--ink-dark);
    font-weight: 700;
    margin-bottom: calc(10px * var(--ui-scale));
    outline: none;
}

#qn-input:focus {
    border-color: var(--terracotta);
}

.qn-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(6px * var(--ui-scale));
    margin-bottom: calc(14px * var(--ui-scale));
}

.qn-chip {
    background: #ede0c8;
    color: var(--ink-dark);
    border: 1px solid #c5b08e;
    padding: 4px 9px;
    border-radius: 99px;
    font-size: calc(11.5px * var(--ui-scale));
    cursor: pointer;
    font-weight: 600;
}

.qn-chip:hover {
    background: var(--ochre);
    color: #fff;
}

.qn-buttons {
    display: flex;
    justify-content: flex-end;
    gap: calc(8px * var(--ui-scale));
}

/* ================= TRAVELER'S NOTEBOOK ================= */
#notebook-modal {
    z-index: 50;
}

.notebook-book {
    width: min(96%, calc(980px * var(--ui-scale)));
    height: min(92%, calc(620px * var(--ui-scale)));
    background: #3b261e;
    border: 3px solid #8c6239;
    border-radius: calc(16px * var(--ui-scale));
    padding: calc(12px * var(--ui-scale));
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 75px rgba(0, 0, 0, 0.85);
}

.notebook-tabs {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--ui-scale));
    margin-bottom: calc(8px * var(--ui-scale));
}

.nb-tab {
    background: #593a2c;
    color: #e2ccb5;
    border: 1.5px solid #8c6239;
    border-bottom: none;
    padding: calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale));
    border-radius: calc(8px * var(--ui-scale)) calc(8px * var(--ui-scale)) 0 0;
    font-size: calc(13.5px * var(--ui-scale));
    font-weight: 700;
    cursor: pointer;
}

.nb-tab.active {
    background: var(--parchment);
    color: var(--ink-dark);
}

.nb-close {
    margin-left: auto;
    background: #7c2d2d;
    color: #fff;
    border: none;
    width: calc(32px * var(--ui-scale));
    height: calc(32px * var(--ui-scale));
    border-radius: 50%;
    cursor: pointer;
    font-weight: 800;
}

.notebook-spread {
    flex: 1;
    display: flex;
    background: var(--parchment);
    color: var(--ink-dark);
    border-radius: calc(10px * var(--ui-scale));
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(139, 98, 57, 0.25);
}

.nb-page {
    flex: 1;
    padding: calc(18px * var(--ui-scale));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.nb-spine {
    width: calc(18px * var(--ui-scale));
    background: linear-gradient(90deg, rgba(120,85,50,0.28) 0%, rgba(60,40,20,0.45) 50%, rgba(120,85,50,0.28) 100%);
}

.nb-page-title {
    font-size: calc(16px * var(--ui-scale));
    font-weight: 800;
    color: #543824;
    border-bottom: 2px solid #d5c09e;
    padding-bottom: calc(6px * var(--ui-scale));
    margin-bottom: calc(12px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.validation-list {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--ui-scale));
}

.validation-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(12px * var(--ui-scale));
    background: #fff9ef;
    border: 1.5px solid #d6c3a5;
    border-radius: calc(10px * var(--ui-scale));
    padding: calc(10px * var(--ui-scale)) calc(14px * var(--ui-scale));
}

.validation-entry.solved {
    background: #eaf7f0;
    border-color: var(--validated-green);
}

.val-sketch {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--ui-scale));
}

.val-sketch-art {
    width: calc(56px * var(--ui-scale));
    height: calc(56px * var(--ui-scale));
    background: #f3e7d1;
    border: 1.5px solid #c5ae89;
    border-radius: calc(8px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.val-concept-title {
    font-size: calc(15px * var(--ui-scale));
    font-weight: 800;
    color: var(--ink-dark);
}

.val-concept-hint {
    font-size: calc(12px * var(--ui-scale));
    color: #786655;
}

.val-slot {
    width: calc(68px * var(--ui-scale));
    height: calc(68px * var(--ui-scale));
    border: 2.5px dashed #a88d67;
    border-radius: calc(10px * var(--ui-scale));
    background: #f5ebd8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 4px;
}

.val-slot.selected-target {
    border-color: var(--terracotta);
    background: #ffeadd;
    box-shadow: 0 0 0 3px rgba(217, 107, 67, 0.25);
}

.val-slot.locked {
    border-style: solid;
    border-color: var(--validated-green);
    background: #dff5ea;
    cursor: default;
}

.val-slot svg {
    width: calc(38px * var(--ui-scale));
    height: calc(38px * var(--ui-scale));
}

.nb-glyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(86px * var(--ui-scale)), 1fr));
    gap: calc(10px * var(--ui-scale));
}

.nb-glyph-card {
    background: #fff9ef;
    border: 2px solid #d5c09e;
    border-radius: calc(10px * var(--ui-scale));
    padding: calc(8px * var(--ui-scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.nb-glyph-card:hover {
    transform: translateY(-2px);
    border-color: var(--terracotta);
}

.nb-glyph-card.validated {
    border-color: var(--validated-green);
    background: #eefaf4;
}

.nb-glyph-card svg {
    width: calc(40px * var(--ui-scale));
    height: calc(40px * var(--ui-scale));
    margin-bottom: 4px;
}

.notebook-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(8px * var(--ui-scale));
    color: var(--sandstone);
}

.btn-page-nav {
    background: #593a2c;
    color: var(--sandstone);
    border: 1.5px solid #9c7147;
    padding: calc(6px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border-radius: calc(6px * var(--ui-scale));
    font-weight: 700;
    cursor: pointer;
}

.btn-page-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ================= TOOLTIP & TOAST ================= */
#glyph-tooltip {
    position: absolute;
    z-index: 70;
    background: #231b2e;
    border: 1.5px solid var(--gold);
    border-radius: calc(10px * var(--ui-scale));
    padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale));
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
}

.tt-glyph-box {
    width: calc(36px * var(--ui-scale));
    height: calc(36px * var(--ui-scale));
    background: var(--parchment);
    color: var(--ink-dark);
    border-radius: 6px;
    padding: 4px;
}

.tt-caste {
    font-size: calc(10px * var(--ui-scale));
    color: var(--ochre);
    text-transform: uppercase;
    font-weight: 700;
}

.tt-meaning {
    font-size: calc(14px * var(--ui-scale));
    font-weight: 800;
    color: #fff;
}

.tt-status {
    font-size: calc(11px * var(--ui-scale));
    color: #b5a3bf;
}

#toast-container {
    position: absolute;
    bottom: calc(20px * var(--ui-scale));
    left: 50%;
    transform: translateX(-50%);
    z-index: 65;
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--ui-scale));
    pointer-events: none;
}

.toast-msg {
    background: rgba(27, 20, 38, 0.95);
    border: 1.5px solid var(--gold);
    color: var(--sandstone);
    padding: calc(10px * var(--ui-scale)) calc(18px * var(--ui-scale));
    border-radius: 999px;
    font-size: calc(13.5px * var(--ui-scale));
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
    animation: toastIn 0.25s ease;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Victory Modal */
.victory-card {
    width: min(92%, calc(560px * var(--ui-scale)));
    background: linear-gradient(180deg, #2b203b 0%, #191224 100%);
    border: 2.5px solid var(--gold);
    border-radius: calc(18px * var(--ui-scale));
    padding: calc(28px * var(--ui-scale));
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85);
}

.victory-crown {
    font-size: calc(48px * var(--ui-scale));
    margin-bottom: calc(10px * var(--ui-scale));
}

.victory-card h2 {
    color: var(--gold);
    font-size: calc(26px * var(--ui-scale));
    margin-bottom: calc(12px * var(--ui-scale));
}

.victory-stats {
    background: rgba(255, 255, 255, 0.05);
    border-radius: calc(10px * var(--ui-scale));
    padding: calc(14px * var(--ui-scale));
    margin: calc(16px * var(--ui-scale)) 0;
    font-size: calc(14px * var(--ui-scale));
    line-height: 1.7;
}

.victory-actions {
    display: flex;
    justify-content: center;
    gap: calc(12px * var(--ui-scale));
}