@import url('https://fonts.googleapis.com/css?family=Cinzel:700');

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

:root {
    --bg: #0a0a0a;
    --panel-bg: #1111;
    --text: #e8e4dc;
    --muted: #9b907f;
    --accent: #c8a96e;
    --divider: #2a241b;
    --stone-off: #3a342b;
    --stone-on: #d5b57a;
    --stone-on-glow: rgba(213, 181, 122, 0.45);
}

#story {
    --story-size: 1.1rem; /* Your current default */
}

#story p {
    font-size: var(--story-size);
    color: var(--text);
    
    /* THE KEY: Use a unitless multiplier. 
       1.6 to 1.7 is the "Golden Ratio" for readability in fiction. */
    line-height: 1.62; 
    
    font-weight: normal;
    margin-bottom: 1.4rem;
    transition: font-size 0.15s ease-out;
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: normal;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

@media screen and (prefers-reduced-motion: no-preference) {
    body.switched,
    .written-in-ink,
    #controls,
    .container,
    .arch-stone polygon,
    .state-panel,
    .arch-panel {
        transition: color 0.6s, background-color 0.6s, opacity 0.6s, transform 0.35s ease;
    }
}

h1,
h2 {
    text-align: center;
    font-family: "Cinzel", Georgia, 'Times New Roman', serif;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2.4rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: normal;
	margin-bottom: 2px;
	margin-top: -50px;
}

h2 {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: lighter;
    color: var(--accent);
	margin-left: -13px;
	margin-bottom: -20px;
}

h4.panel-title {
    font-family: "Cinzel", Georgia, serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--accent);
	margin-bottom: 0.9rem;
}

.header {
    padding-top: 0;
    padding-bottom: 3em;
}

.byline {
    font-style: normal;
}

.written-in-ink {
    z-index: 30;
    font-size: 9pt;
    font-family: sans-serif;
    text-align: center;
    font-weight: 700;
    position: fixed;
    display: block;
    width: 100%;
    background: var(--bg);
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
    /* Changed height to auto to prevent text clipping */
    min-height: 24px; 
    top: 0;
    border-bottom: 1px solid var(--divider);
    
    /* THE FIX: Tone down the white to a warm grey/gold that 
       complements your accent color */
    color: rgba(255, 255, 255, 0.7); 
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.written-in-ink strong {
    /* Make the Fiction label stand out in the accent color */
    color: var(--accent); 
    letter-spacing: 0.1em;
}

.written-in-ink a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.written-in-ink a:hover {
    color: #fff;
    text-decoration: none;
}

#arch-tooltip {
    /* LOCK THE HEIGHT */
    min-height: 180px; 
    
    /* Ensure it doesn't collapse to 0 height when empty */
    display: block; 
    
    /* Visual styling to make the 'box' look intentional */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--divider);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    
    /* Smooth out the text appearing */
    transition: color 0.2s ease;
    overflow: hidden;
}

#controls {
    display: flex;
    align-items: center;
    position: fixed;
    right: 14px;
    top: 4px;
    font-size: 9pt;
    font-family: sans-serif;
    user-select: none;
    z-index: 100; /* Ensure it stays above other elements */
}

/* 1. Reset all after-elements first */
#controls > *:after {
    content: none;
}

/* 2. Style the Label */
#controls .text-label {
    color: var(--text);
    opacity: 0.6;
    margin-right: 10px; /* Gap between 'text:' and '+' */
}

/* 3. Style the Links */
#controls a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

#controls a:hover {
    color: var(--text);
}

/* 4. Add the Pipes ONLY after specific items */
#font-increase:after,
#font-decrease:after,
#rewind:after,
#undo:after,
#save:after,
#reload:after {
    content: "|";
    margin-left: 7px; 
    margin-right: 7px;
    color: #333;
    font-weight: normal;
    /* Ensure the pipe doesn't pick up the gold color of the link */
    display: inline-block; 
}

/* 5. Center the tiny symbols */
#font-increase, #font-decrease {
    min-width: 14px;
    justify-content: center;
}

#controls [disabled] {
    color: #333;
}

.game-layout {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) minmax(220px, 280px);
    grid-template-areas: "arch scene state";
}

.arch-panel,
.state-panel {
    background: linear-gradient(180deg, #121212 0%, #0d0d0d 100%);
    border-inline: 1px solid var(--divider); 
    padding: 1rem 1rem 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.arch-panel {
    grid-area: arch;
    border-left: 0;
}

.state-panel {
    grid-area: state;
    border-right: 0;
}

.panel-toggle {
    display: none;
    border: 1px solid var(--divider);
    background: #171717;
    color: var(--accent);
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.panel-toggle:hover {
    color: var(--text);
    border-color: var(--accent);
}

.outerContainer {
    grid-area: scene;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.container {
    display: block;
    max-width: 760px;
    min-height: 100%;
    margin: 0 auto;
    padding: 20px 26px 6rem;
    padding-top: 4em;
    background: var(--bg);
}

p {
    font-size: var(--story-size); /* This replaces the static 1.1rem */
    color: var(--text);
    line-height: 1.85em;
    font-weight: normal;
    margin-bottom: 1.4rem;
	transition: font-size 0.15s ease-out; /* Makes the scaling look elegant */
}

.node-image {
    display: block;
    width: 100%;
    margin: 0 auto 2rem;
}

.node-title {
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2rem;
    font-family: sans-serif;
    font-weight: normal;
}

a {
    font-weight: 700;
    color: var(--accent);
    font-family: sans-serif;
    text-decoration: none;
}

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

.choice {
    text-align: left;
    line-height: 1.7em;
    margin-bottom: 0.5rem;
}

:not(.choice) + .choice {
    padding-top: 1em;
}

.choice a,
.choice span {
    font-size: 14pt;
    color: var(--accent);
}

.choice a:hover {
    color: var(--text);
}

.unclickable {
    font-weight: 700;
    color: #4a3f2f !important;
    font-family: sans-serif;
    text-decoration: none;
    cursor: not-allowed;
    pointer-events: none;
}

strong {
    color: var(--text);
    font-weight: bold;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.container .hide {
    opacity: 0;
}

.container .invisible {
    display: none;
}

.container > * {
    opacity: 1;
}

@media screen and (prefers-reduced-motion: no-preference) {
    .container > * {
        transition: opacity 1s;
    }
}

.end {
    text-align: center;
    font-weight: bold;
    color: var(--text);
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Arch panel */
#arch-svg {
    width: 100%;
    height: auto;
    max-height: 360px;
    display: block;
}

.arch-stone {
    cursor: pointer;
}

.arch-stone polygon {
    fill: var(--stone-off);
    stroke: #5f5240;
    stroke-width: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.arch-stone text {
    fill: #e7d9bc;
    font-size: 18px;
    font-family: "Cinzel", serif;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.arch-stone:focus {
    outline: none;
}

.arch-stone.keystone text {
    font-weight: 700;
}

.arch-tooltip {
    margin-top: 0.8rem;
    border: 1px solid var(--divider);
    border-radius: 10px;
    background: rgba(20, 20, 20, 0.85);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.45;
    padding: 0.8rem;
    min-height: 84px;
}

/* Endings panel */
.endings-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(200, 169, 110, 0.24);
}

.endings-grid {
    --ending-hex-width: clamp(62px, 10vw, 72px);
    --ending-hex-height: calc(var(--ending-hex-width) * 1.1547005);
    position: relative;
    width: calc(var(--ending-hex-width) * 3);
    height: calc(var(--ending-hex-height) * 2.5);
    margin: 0 auto;


}

.ending-card {
    --ending-hue: 34;
    position: absolute;
    width: var(--ending-hex-width);
    height: var(--ending-hex-height);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: default;
}

.ending-hex-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Locked/default visual state: desaturated thumbnail until ending variable is reached. */
    filter: grayscale(1) saturate(0.35) brightness(0.78);
    opacity: 0.82;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.ending-fill {
    fill: hsl(var(--ending-hue), 58%, 42%);
}

.ending-outline {
    fill: none;
    stroke: rgba(222, 197, 148, 0.5);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.ending-image {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 180ms ease;
}

.ending-card.has-image .ending-image {
    opacity: 1;
}

.ending-card:focus {
    outline: none;
}

.ending-card:focus .ending-hex-svg,
.ending-card:focus-within .ending-hex-svg {
    transform: scale(1.03);
}

.ending-card[data-reached="1"] .ending-hex-svg {
    /* Unlocked visual state: full color when eN_reached is true in Ink variables. */
    filter: grayscale(0) saturate(1) brightness(1.03);
    opacity: 1;
}

.ending-card[data-reached="1"] .ending-outline {
    stroke: rgba(232, 215, 182, 0.84);
}

/* Pyramid ordering from uploaded SVG: top E6, middle E4-E5, base E1-E2-E3 */
.ending-card[data-ending="E6"] {
    --ending-hue: 46;
    left: calc(var(--ending-hex-width) * 1);
    top: 0;
}

.ending-card[data-ending="E4"] {
    --ending-hue: 280;
    left: calc(var(--ending-hex-width) * 0.5);
    top: calc(var(--ending-hex-height) * 0.75);
}

.ending-card[data-ending="E5"] {
    --ending-hue: 128;
    left: calc(var(--ending-hex-width) * 1.5);
    top: calc(var(--ending-hex-height) * 0.75);
}

.ending-card[data-ending="E1"] {
    --ending-hue: 22;
    left: 0;
    top: calc(var(--ending-hex-height) * 1.5);
}

.ending-card[data-ending="E2"] {
    --ending-hue: 352;
    left: calc(var(--ending-hex-width) * 1);
    top: calc(var(--ending-hex-height) * 1.5);
}

.ending-card[data-ending="E3"] {
    --ending-hue: 202;
    left: calc(var(--ending-hex-width) * 2);
    top: calc(var(--ending-hex-height) * 1.5);
}

/* ====
   ARTIFACTS 
   ==== */

.artifacts-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(200, 169, 110, 0.24);
}
.artifacts-grid {
    --artifact-size: clamp(62px, 10vw, 72px);
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 0 auto 1rem auto;
}
.artifact-card {
    position: relative;
    width: var(--artifact-size);
    height: var(--artifact-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: default;
}
.artifact-circle-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Locked/default visual state: desaturated */
    filter: grayscale(1) saturate(0.35) brightness(0.78);
    opacity: 0.82;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.artifact-fill {
    fill: #2a2a2a; /* Fallback baseline fill */
}
.artifact-outline {
    fill: none;
    stroke: rgba(222, 197, 148, 0.5);
    stroke-width: 1.0;
    vector-effect: non-scaling-stroke;
}
.artifact-image {
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 180ms ease;
}

.artifact-card.has-image .artifact-image {
    opacity: 1;
}
.artifact-card:focus {
    outline: none;
}
.artifact-card:focus .artifact-circle-svg,
.artifact-card:focus-within .artifact-circle-svg {
    transform: scale(1.05); /* Slight bounce focus */
}
.artifact-card[data-reached="1"] .artifact-circle-svg {
    /* Unlocked visual state */
    filter: grayscale(0) saturate(1) brightness(1.03);
    opacity: 1;
}
.artifact-card[data-reached="1"] .artifact-outline {
    stroke: rgba(232, 215, 182, 0.84);
}
.light .artifact-card {
    background: transparent;
}



/* ====
   ARCH STONE STATES
   ==== */

/* Keep the dark default the same for all stones */
.arch-stone polygon {
    fill: #3a2e1e;         /* dark default */
    stroke: #5f5240;
    stroke-width: 2;
    transition: fill 0.8s ease, filter 0.8s ease;
}

/* --- L1 Necessity (#stone-2) --- */
#stone-2.active polygon, #stone-2:hover polygon, #stone-2:focus polygon { 
    fill: #456177; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.6)); 
}

/* --- L2 Structure (#stone-3) --- */
#stone-3.active polygon, #stone-3:hover polygon, #stone-3:focus polygon { 
    fill: #6D527D; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(179, 136, 255, 0.6)); 
}

/* --- L3 Security (#stone-4) --- */
#stone-4.active polygon, #stone-4:hover polygon, #stone-4:focus polygon { 
    fill: #84546E; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(255, 136, 255, 0.6)); 
}

/* --- L4 Desire (#stone-5) --- */
#stone-5.active polygon, #stone-5:hover polygon, #stone-5:focus polygon { 
    fill: #9F6854; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(255, 170, 136, 0.6)); 
}

/* --- L5 Community (#stone-6) --- */
#stone-6.active polygon, #stone-6:hover polygon, #stone-6:focus polygon { 
    fill: #906940; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(255, 204, 0, 0.6)); 
}

/* --- L6 Timing (#stone-7) --- */
#stone-7.active polygon, #stone-7:hover polygon, #stone-7:focus polygon { 
    fill: #507669; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(0, 204, 204, 0.6)); 
}

/* --- L7 Meaning / Keystone (#stone-1) --- */
#stone-1.active polygon, #stone-1:hover polygon, #stone-1:focus polygon { 
    fill: #86142F; 
    stroke: #e8d7b6;
    filter: drop-shadow(0 0 6px rgba(255, 85, 136, 0.6)); 
}
.arch-stone.stone--faint polygon {
    fill: #DB95A5;         
}

.choice.hero-choice {
    text-align: center;
}

/* State panel */
.state-panel-body {
    display: block;
}

.state-row {
    display: block;
    margin-bottom: 0.3rem;
    padding: 0.6rem 0.65rem 0rem;
    /* border: 1px solid var(--divider); */
    border-radius: 10px;
    background: rgba(18, 18, 18, 0.75);
}

.state-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.42rem;
}

.state-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-family: sans-serif;
}

.state-value {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--accent);
    font-family: sans-serif;
    white-space: nowrap;
}

.state-bar-track {
    position: relative;
    width: 100%;
    height: 0.72rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.9), rgba(24, 24, 24, 0.95));
    border: 1px solid rgba(200, 169, 110, 0.28);
    overflow: hidden;
}

.state-bar-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    /* This creates a gradient based on your JS color */
    background: linear-gradient(
        90deg, 
        rgba(0, 0, 0, 0.3) 0%, 
        var(--row-color) 45%, 
        white 300% /* Pulls a highlight from the end */
    );
    transition: width 220ms ease, background-color 220ms ease, filter 220ms ease;
}

/* The overflow stays red as you requested, overriding the custom color */
.state-row.is-overflow .state-bar-fill {
    background: linear-gradient(90deg, #8e2e2e 0%, #ca4b4b 52%, #f37a7a 100%) !important;
    filter: drop-shadow(0 0 5px rgba(202, 75, 75, 0.45));
}

.state-overflow {
    display: block;
    min-height: 1.1em;
    margin-top: 0.28rem;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-align: right;
    color: #d96d6d;
    font-family: sans-serif;
    opacity: 0;
    transition: opacity 150ms ease;
}

.state-overflow.active {
    opacity: 1;
}

.state-panel.collapsed {
    width: 70px;
    min-width: 70px;
    padding-inline: 0.45rem;
}

.state-panel-body {
    display: none; /* Hide body on mobile by default */
}
.state-panel.open .state-panel-body {
    display: block; /* Show body only when open */
}


.character-panel {
    margin-top: 0rem;
    padding-top: 0rem;
    border-top: 1px solid var(--divider);
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.55rem;
}

.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0rem 0.2rem 0.2rem;
  /*  border: 1px solid var(--divider); */
    border-radius: 10px;
    background: rgba(18, 18, 18, 0.7);
    transition: border-color 180ms ease, background 180ms ease;
}

.character-portrait {
    width: min(78px, 100%);
    aspect-ratio: 196 / 226;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    border: 1px solid #333;
    background: rgba(20, 20, 20, 0.55);
}

.character-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) saturate(0.35) brightness(0.78);
    opacity: 0.82;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.character-name {
    font-size: 0.64rem;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    text-align: center;
    line-height: 1.22;
    color: var(--muted);
}

.character-card.met {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--divider) 40%);
    background: color-mix(in srgb, var(--accent) 10%, rgba(18, 18, 18, 0.78));
}

.character-card[data-met="1"] .character-image,
.character-card.met .character-image {
    filter: grayscale(0) saturate(1) brightness(1.03);
    opacity: 1;
    transform: translateY(-1px);
}

.character-card[data-met="1"] .character-name,
.character-card.met .character-name {
    color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
}



.kofi-widget { 
    margin-top: 6px; 
    text-align: center;
    
    /* 1. Lower brightness to stay moody */
    /* 2. Sepia (100%) turns it into a warm brown/gold base */
    /* 3. Hue-rotate (-10deg) shifts the sepia toward a more 'true' gold */
    /* 4. Contrast (110%) ensures the text is still readable */
    filter: brightness(0.65) sepia(80%) hue-rotate(-10deg) contrast(110%);
    
	/* THE STABILITY FIX: Ensures the widget stays sharp and doesn't flicker on mobile */
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
	
    /* Optional: Small transition for a subtle hover effect */
    transition: filter 0.3s ease;
}

.kofi-widget:hover {
    filter: brightness(1) sepia(50%) hue-rotate(-10deg);
}
.sidebar-source-book {
    margin-top: 0;         /* Removed the 4rem gap */
    padding-top: 0;        /* Removed the padding */
    border-top: none;      /* REMOVED THE UNWANTED LINE */
    text-align: center;
}

.foundation-panel {
    margin-top: 1rem;      
    padding-top: 0.5rem;   /* Reduced from 1.5rem to bring the line closer to the text */
    border-top: 2px solid var(--divider); 
}

.foundation-panel h4.panel-title {
    /* REMOVE BROWSER DEFAULTS */
    margin-top: 0 !important; 
    padding-top: 0.25rem;
    
    line-height: 1;        /* Prevents extra height from the font's line box */
    margin-bottom: 1rem;   
    text-align: left;      
}


.book-cover-mini {
	margin-top: 1.5rem; 
    width: 240px; /* Adjust based on your sidebar width */
    height: auto;
    border: 1px solid var(--divider);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Gives it some physical "weight" */
    transition: transform 0.3s ease, border-color 0.3s ease;
    filter: sepia(20%) contrast(100%); /* Warms it up to match the gold theme */
}

.book-cover-mini:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    filter: sepia(0%) contrast(110%); /* Brings back full color on hover */
}

.book-tagline {
    font-family: inherit;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-style: italic;
}

.support-container {
    margin-top: 0.5rem;
    /* This overrides the standard Ko-fi button height if needed */
    display: flex;
    justify-content: center;
}


/* Light theme */
body.light {
    --bg: #f5f2ee;
    --panel-bg: #f0ece6;
    --text: #1a1a1a;
    --muted: #5c554d;
    --accent: #b97c2c;
    --divider: #d8cfc3;
    --stone-off: #d2c6b4;
    --stone-on: #e2a95d;
    --stone-on-glow: rgba(185, 124, 44, 0.35);
    background: var(--bg);
    color: var(--text);
}

body.light .container,
body.light .written-in-ink,
body.light .arch-panel,
body.light .state-panel {
    background: var(--bg);
}

body.light #controls a {
    color: var(--accent);
}

body.light #controls [disabled] {
    color: #bbb;
}

body.light .choice a,
body.light .choice span,
body.light strong,
body.light p,
body.light .end {
    color: var(--text);
}

body.light .choice a:hover {
    color: var(--accent);
}

body.light .arch-tooltip,
body.light .state-row {
    background: rgba(255, 255, 255, 0.65);
}

body.light .ending-card {
    background: transparent;
    border-color: transparent;
}

body.light .state-bar-track {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(240, 232, 220, 0.92));
    border-color: rgba(185, 124, 44, 0.35);
}

body.light .state-value {
    color: #8a5d1d;
}

body.light .state-overflow {
    color: #b73f3f;
}

body.light .panel-toggle {
    background: #fffaf4;
}

/* Light Theme Header Overrides */
body.light .written-in-ink {
    /* Darken the general text so it's readable on the cream bg */
    color: rgba(0, 0, 0, 0.6); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light .written-in-ink strong {
    /* Keep the 'Interactive Fiction' label in a darker version of your gold */
    color: #8a5d1d; 
}

/* Fix the menu pipes and label for Light Mode */
body.light #controls .text-label {
    color: #1a1a1a;
    opacity: 0.5;
}

body.light #font-increase:after,
body.light #font-decrease:after,
body.light #rewind:after,
body.light #undo:after,
body.light #save:after,
body.light #reload:after {
    color: #bbb; /* Subtle grey pipes that don't distract */
}

/* Ensure the Ko-fi widget looks good in light mode too */
body.light .kofi-widget {
    /* Lower brightness to 0.4 so the button looks dark/bronze */
    /* High sepia to maintain the warm/gold tone */
    /* Increased contrast to keep the heart icon sharp against the dark background */
    filter: brightness(0.4) sepia(100%) hue-rotate(-10deg) contrast(1.1);
    opacity: 0.8; /* Makes it sit a bit softer on the light background */
}

body.light .kofi-widget:hover {
    filter: brightness(0.2) sepia(100%) hue-rotate(-10deg) contrast(1.2);
    opacity: 1;
}

/* Responsive */

/* SCENARIO 1: Desktop (Wide) 
   No changes here, the sidebars are full width. */
@media screen and (min-width: 1151px) {
    .state-panel-body {
        display: block;
    }
}

/* SCENARIO 2: Intermediate & Mobile  
   We trigger the Stacked Header (two rows) at 1150px to prevent the overlap. */
@media screen and (max-width: 1150px) {
    .mobile-header-group {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        flex-direction: column; 
        background: var(--bg);
        border-bottom: 1px solid var(--divider);
        padding-bottom: 6px;
    }

    #controls {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-right: 14px;
        padding-top: 4px;
        background: transparent;
    }

    .written-in-ink {
        position: relative;
        width: 100%;
        padding: 8px 14px 4px;
        border-bottom: none;
        text-align: center;
        height: auto;
    }

    /* While we are in the "Intermediate" zone (1150px down to 981px), 
       keep the sidebars visible but slightly slimmer. */
    @media (min-width: 981px) {
        .game-layout {
            top: 84px; 
            grid-template-columns: minmax(210px, 240px) minmax(400px, 1fr) minmax(210px, 240px);
            grid-template-areas: "arch scene state";
        }

        /* THE ADDITION: Undo the mobile drawer physics for the State Panel */
        .state-panel {
            position: relative !important;
            transform: none !important; /* Force it to stay in the grid column */
            background: var(--panel-bg) !important;
            border-left: 1px solid var(--divider) !important;
            width: auto !important;
        }

        .state-panel-body {
            display: block !important; /* Force content to be visible */
        }

        .panel-toggle {
            display: none !important; /* Hide the 'State' button in this view */
        }
        
        /* Ensure the Potential Endings hexagons shrink to fit the slimmer sidebar */
        .endings-grid {
            --ending-hex-width: clamp(52px, 8vw, 68px);
        }
    }
}

/* SCENARIO 3: Mobile Sidebar Logic 
   This remains 980px so your sidebars only turn into buttons when the screen is small. */
@media screen and (max-width: 980px) {
    .game-layout {
        top: 84px;
        grid-template-columns: 1fr;
        grid-template-areas: "scene";
    }

    /* --- Arch Panel (Left) --- */
	.arch-panel {
		position: fixed;
		top: 64px;
		left: 0;           /* Changed from 10px to align to edge like State */
		z-index: 28;
		width: auto;       /* Let it fit the toggle */
		max-height: calc(100vh - 100px);
		border: 1px solid transparent; /* Hide the panel border by default */
		background: transparent;       /* Hide the panel bg by default */
		padding: 0.6rem;
		transition: width 0.35s ease, background 0.35s ease;
	}

    .arch-panel .panel-toggle {
        display: block;
        margin-left: auto;
        width: 72px;
        font-size: 0.78rem;
        padding: 0.42rem 0.35rem;
        text-align: center;
    }

    .arch-panel-body {
        display: none;
        margin-top: 0.6rem;
    }

	.arch-panel.open {
		width: min(78vw, 320px);
		background: rgba(10, 10, 10, 1);
		border: 1px solid var(--divider);
		border-left: 0; /* Align flat against the left edge */
	}

    .arch-panel.open .arch-panel-body {
        display: block;
    }

    /* --- State Panel (Right) --- */
    .state-panel {
        position: fixed;
        top: 84px;
        right: 0;
        bottom: 0;
        z-index: 32;
        width: 320px; 
        transform: translateX(calc(100% - 88px)); 
        border: 1px solid transparent;
        background: transparent;
        border-radius: 12px 0 0 0;
        padding: 0.6rem;
        transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    }

    .state-panel .panel-toggle {
        display: inline-block;
        width: 72px;
        margin: 0;
        font-size: 0.78rem;
        padding: 0.42rem 0.35rem;
        text-align: center;
        background: #171717;
        border: 1px solid var(--divider);
    }

    .state-panel-body {
        display: none;
        margin-top: 0.6rem;
    }

    .state-panel.open {
        transform: translateX(0);
        background: rgba(10, 10, 10, 0.98); 
        border-left: 1px solid var(--divider);
        border-top: 1px solid var(--divider);
    }

    .state-panel.open .state-panel-body {
        display: block;
    }

    .outerContainer {
        height: 100%;
    }

    .container {
        padding: 20px 16px 5rem;
        padding-top: 2.8rem;
        max-width: 100%;
    }
}


body.light .character-card {
    background: rgba(255, 255, 255, 0.72);
}

body.light .character-card.met {
    background: rgba(225, 198, 161, 0.48);
}

body.light .character-name {
    color: #5c554d;
}