/*
================================================================================
NEW LAYOUT ENGINE STYLES
================================================================================
*/

/* Basic setup for the aspect-ratio layout */
body {
    margin: 0;
    overflow: hidden;
    background-color: #111; /* Color for letter/pillarboxing */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #e2e8f0; /* Slate-200 */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main-container {
    position: absolute;
    background-color: #475569; /* Slate-600 */
    overflow: hidden;
    box-shadow: 0 0 3rem rgba(0,0,0,0.6);
    box-sizing: border-box;
}

/* All direct children of the container are positioned absolutely with `rem` units */
#game-title {
    position: absolute;
    top: 1rem;
    left: 2rem;
    right: 2rem;
    height: 5rem;
    font-size: 2.5rem;
    text-shadow: 0.05em 0.05em 0.1em #000;
    color: #93c5fd; /* sky-300 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#help-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    background-color: #0ea5e9;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 3rem;
    cursor: pointer;
    font-size: 2rem;
    font-weight: bold;
    z-index: 1000;
}

.game-section {
    position: absolute;
    background-color: #1e293b; /* Slate-800 */
    border: 1px solid #334155; /* Slate-700 */
    border-radius: 0.8rem; /* Use rem for scaling border */
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Enable container queries for scalable text */
    container-type: inline-size;
    --base-font-size: 2cqw;
}

/* Define the layout of the three main columns */
#wff-construction-area {
    top: 7rem;
    left: 2rem;
    width: 28rem;
    bottom: 2rem;
}

#proof-area {
    top: 7rem;
    left: 32rem;
    width: 40rem;
    bottom: 2rem;
}

#rules-and-subproofs-column {
    top: 7rem;
    right: 2rem;
    width: 24rem;
    bottom: 2rem;
}


/*
================================================================================
EXISTING COMPONENT STYLES (ADAPTED FOR NEW ENGINE)
================================================================================
*/

/* General typography inside game sections. Use `cqw` for scalable text. */
.game-section h2 {
    font-size: calc(var(--base-font-size) * 2.5);
    margin-bottom: 0.5em; /* em scales with the h2's font size */
    color: #cbd5e1; /* Slate-300 */
    border-bottom: 1px solid #475569; /* Slate-600 */
    padding-bottom: 0.3em;
    margin-top: 0;
}

.game-section h3 {
    font-size: calc(var(--base-font-size) * 2);
    margin-bottom: 0.4em;
    color: #94a3b8; /* Slate-400 */
}

p, button, span, div, li {
    font-size: calc(var(--base-font-size) * 1.8); /* Base text size inside sections */
}
button {
    padding: 0.5em 1em; /* em for padding relative to button text */
}


/* Proof Area Specifics */
#proof-area ol { list-style-type: none; padding-left: 0; flex-grow: 1; overflow-y: auto; margin: 0; border: 2px dashed transparent; }
#proof-area ol.drag-over-proof { border-color: #60a5fa; background-color: rgba(96, 165, 250, 0.1); }

#proof-area li {
    background-color: #334155;
    margin-bottom: 0.3em;
    padding: 0.4em 0.6em;
    border-radius: 0.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #475569;
    transition: background-color 0.3s ease;
    position: relative;
    font-size: calc(var(--base-font-size) * 1.9); /* Make proof lines scale */
}
.subproof-line {
    border-left: 2px solid #60a5fa;
    padding-left: 0.8em !important;
}
.subproof-assumption {
    background-color: #4b5563 !important;
}
.show-line {
    background-color: #0f172a;
    border-style: dashed;
    border-color: #f59e0b;
}
.show-line .formula { color: #f59e0b; }
.show-line.proven-show-line {
    background-color: #334155;
    border-style: solid;
    border-color: #22c55e;
}
.show-line.proven-show-line .formula { color: #f1f5f9; }
.subproof-header-collapsible .formula { cursor: pointer; }
.subproof-header-collapsible .line-number::after {
    content: ' [+]';
    font-size: 0.7em;
    color: #94a3b8;
    font-family: monospace;
}
.subproof-header-collapsible[data-collapsed="false"] .line-number::after {
    content: ' [-]';
    font-family: monospace;
}
.subproof-content-hidden { display: none !important; }

#proof-area li.proof-line-complete { background-color: #166534; border-color: #22c55e; }
#proof-area li.proof-line-complete .formula,
#proof-area li.proof-line-complete .line-number,
#proof-area li.proof-line-complete .justification { color: #f0fdf4; }

.line-number { color: #94a3b8; margin-right: 0.5em; font-weight: bold; }
.formula {
    font-family: monospace;
    color: #f1f5f9;
    cursor: grab;
    padding: 0.2em 0.4em;
    background-color: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 0.15em;
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
    margin-right: auto;
    transition: transform 0.2s ease-in-out;
}
.formula.dragging { opacity: 0.5; cursor: grabbing; box-shadow: 0 0 5px #60a5fa; }
.justification { font-size: 0.8em; color: #64748b; white-space: nowrap; flex-shrink: 0; }
.proof-header, .proof-goal, .subproof-goal-display { padding: 0.5em; margin-bottom: 0.5em; background-color: #0f172a; border-radius: 0.25em; }
.proof-header span, .proof-goal span, .subproof-goal-display span { font-weight: bold; color: #60a5fa; }
.subproof-goal-display { color: #f59e0b; }

/* Feedback Area Styles */
#feedback-container { display: flex; align-items: center; justify-content: center; margin-top: 0.5em; min-height: 1.5em; }
#proof-feedback { text-align: center; font-weight: bold; flex-grow: 1; margin: 0 0.5em; font-size: calc(var(--base-font-size) * 1.8); }
.feedback-nav-button {
    width: 1.5em;
    height: 1.5em;
    font-size: calc(var(--base-font-size) * 1.5); /* Scale buttons */
}

/* WFF Construction & Inference Rules Specifics */
.tool-area { margin-bottom: 0.8em; }
.tool-button, .draggable-var, .connective-hotspot {
    border: none;
    padding: 0.5em;
    margin: 0.25em;
    border-radius: 0.25em;
    transition: background-color 0.2s;
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--base-font-size) * 1.9);
}
.tool-button { background-color: #3b82f6; color: white; cursor: pointer; }
.tool-button:hover { background-color: #2563eb; }
.draggable-var { background-color: #f5f5dc; color: #3b271a; border: 1px solid #a0522d; cursor: grab; display: inline-block; }
.draggable-var.fol-predicate { background-color: #dcfce7; color: #14532d; border-color: #16a34a; }
.draggable-var.fol-variable { background-color: transparent; color: inherit; border: none; padding: 0.1em 0.2em; margin: 0.1em; }
.draggable-var.dragging { opacity: 0.5; cursor: grabbing; }
.connective-hotspot { background-color: #4b5563; color: white; border: 2px dashed #6b7280; cursor: copy; min-width: 3em; display: inline-block; padding: 0.5em 0.3em; }
.connective-hotspot.waiting { border-style: solid; border-color: #f59e0b; }
.connective-hotspot.drag-over { border-color: #60a5fa; background-color: #334155; }

.wff-output-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em; }
.wff-output-header h3 { margin-bottom: 0; }

#wff-output-tray {
    background-color: #0f172a;
    padding: 0.5em;
    border-radius: 0.25em;
    min-height: 5em;
    font-family: monospace;
    color: #f1f5f9;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-content: flex-start;
    align-items: center;
    border: 2px dashed transparent;
    position: relative;
    font-size: calc(var(--base-font-size) * 2.2); /* Make WFF tray text scale */
}
#wff-output-tray.drag-over-tray { border-color: #60a5fa; background-color: rgba(96, 165, 250, 0.1); }
#wff-output-tray .formula { background-color: #3b82f6; color: white; border-color: #1d4ed8; cursor: grab; }
#wff-output-tray .formula.drag-over { border: 2px dashed #60a5fa; transform: scale(1.1); }
#wff-output-tray .formula.dragging { opacity: 0.5; cursor: grabbing; }

.wff-zoom-controls button {
    background-color: #4b5563;
    color: white;
    border: none;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    margin-left: 0.25em;
    cursor: pointer;
    line-height: 1.5em;
    padding: 0;
}
.wff-zoom-controls button:hover { background-color: #64748b; }

#trash-can-drop-area {
    padding: 0.1em 0.3em;
    border: 1px dashed #4a5568;
    border-radius: 0.25em;
    font-size: calc(var(--base-font-size) * 1.5);
    color: #64748b;
    cursor: default;
    flex-shrink: 0;
}
#trash-can-drop-area.trash-can-drag-over { border-color: #ef4444; background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Accordion Styles */
.accordion-header {
    cursor: pointer;
    background-color: #334155;
    padding: 0.4em 0.6em;
    border-radius: 0.25em;
    margin-bottom: 0.3em;
    border: 1px solid #475569;
    font-size: calc(var(--base-font-size) * 2.2);
}
.accordion-header::after { content: ' ▼'; float: right; transition: transform 0.2s ease; }
.accordion-header.closed::after { transform: rotate(-90deg); }
.accordion-content { padding: 0.5em; border: 1px solid #334155; border-top: none; border-radius: 0 0 0.25em 0.25em; }
.accordion-content.hidden { display: none; }

/* Rule Item Styles */
.rule-item {
    background-color: #334155;
    padding: 0.5em;
    margin-bottom: 0.3em;
    border-radius: 0.25em;
    cursor: pointer;
    text-align: center;
    border: 1px solid #475569;
    user-select: none;
    font-size: calc(var(--base-font-size) * 2);
}
.rule-item:hover { background-color: #475569; }
.rule-item.active { background-color: #4a5568; }
.rule-slots { display: none; padding: 0.5em; margin-top: 0.3em; background-color: #2d3748; border-radius: 0.25em; border: 1px dashed #4a5568; }
.rule-item.active .rule-slots { display: flex; flex-direction: column; gap: 0.5em; }
.drop-slot {
    background-color: #4a5568;
    border: 2px dashed #64748b;
    min-height: 2.5em;
    border-radius: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-style: italic;
    font-size: calc(var(--base-font-size) * 2.75);
    padding: 0.3em;
    transition: transform 0.2s ease-in-out;
}
.drop-slot.drag-over { border-color: #60a5fa; background-color: #334155; transform: scale(1.05); }
.apply-rule-button { background-color: #10b981; margin-top: 0.5em; color: white; border: none; cursor: pointer; }
.apply-rule-button:hover { background-color: #059669; }

/* Intro.js overrides */
.introjs-tooltip { color: #1f2937; }
.introjs-tooltiptext { color: #1f2937; }

/* Remove obsolete styles */
html, #game-wrapper, .main-content-grid {
    /* These are no longer used by the new layout engine */
}