/* The Set Theory Game: layout on top of the Workbench tokens.
   Part of the Grace17 proof assistant for mathematics based on set theory.
   Copyright (c) 2026 Grant Passmore.
   Released under the Apache License 2.0. See LICENSE in the repository root.
   Authors: Grant Passmore */

.game-body { overflow: hidden; }
.game-topbar .toolbar { gap: 7px; }
.game-progress { color: var(--muted); font: 11px var(--mono); margin-right: 6px; }
.game-link { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid transparent; border-radius: 2px; color: var(--muted); font: 650 11px var(--serif); text-decoration: none; }
.game-link:hover { border-color: var(--line-strong); color: var(--paper); background: var(--panel-raised); }

.game { height: calc(100dvh - 42px); min-height: 0; display: grid; grid-template-columns: 236px minmax(360px, 1.3fr) minmax(300px, 1fr); background: var(--ink-deep); }
.game.worlds-hidden { grid-template-columns: 0 minmax(360px, 1.3fr) minmax(300px, 1fr); }
.game.worlds-hidden .worlds { display: none; }

.worlds { overflow: auto; border-right: 1px solid var(--line-strong); background: var(--panel); padding: 12px 0 24px; }
.worlds h2 { margin: 14px 14px 4px; color: var(--paper-dim); font: 600 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.worlds h2 small { display: block; margin-top: 2px; color: var(--muted); font: 10px/1.35 var(--serif); letter-spacing: 0; text-transform: none; }
.worlds ol { margin: 0; padding: 0; list-style: none; }
.worlds li a { display: flex; align-items: center; gap: 8px; padding: 5px 14px; color: var(--paper-dim); font: 12px/1.35 var(--serif); text-decoration: none; }
.worlds li a:hover { color: var(--paper); background: var(--panel-raised); }
.worlds li a.current { color: var(--paper); background: var(--panel-raised); box-shadow: inset 3px 0 var(--signal); }
.worlds li a .mark { flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 2px; }
.worlds li a.solved .mark { border-color: var(--proven); background: var(--proven); }
.worlds li a .index { color: var(--muted); font: 10px var(--mono); min-width: 14px; }

.lesson { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line-strong); }
.lesson-scroll { overflow: auto; padding: 22px 26px 40px; }
.world-title { margin: 0 0 4px; color: var(--signal); font: 600 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.lesson h1 { margin: 0 0 14px; color: var(--qed-cream); font: 600 clamp(22px, 2.6vw, 30px)/1.1 var(--serif); letter-spacing: -.02em; }
.world-intro, .level-text { color: var(--paper); font: 14px/1.6 var(--serif); }
.world-intro { padding: 10px 14px; border-left: 3px solid var(--line-strong); color: var(--paper-dim); margin-bottom: 14px; }
.world-intro p, .level-text p { margin: 0 0 10px; }
.world-intro code, .level-text code, .hints code { padding: 1px 4px; border-radius: 2px; background: var(--ink-deep); color: var(--cyan-bright); font: 12px var(--mono); }
.section-label { margin: 18px 0 6px; color: var(--paper-dim); font: 600 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.statement { margin: 0; padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--ink-deep); color: var(--paper); font: 13px/1.55 var(--mono); white-space: pre; overflow-x: auto; }
.statement code { font: inherit; }
.rules { margin: 8px 0 0; color: var(--warning); font: 12px/1.5 var(--serif); }
.rules code { padding: 1px 4px; border-radius: 2px; background: var(--ink-deep); color: var(--warning); font: 11px var(--mono); }
.editor-frame { position: relative; }
.proof-editor { display: block; width: 100%; min-height: 150px; padding: 12px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--signal); border-radius: 0 2px 2px 0; background: var(--ink-deep); color: var(--paper); font: 13px/1.55 var(--mono); resize: vertical; tab-size: 2; }
.proof-editor:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.game-symbols { position: absolute; top: 6px; right: 10px; }
.game-symbols > div { right: 0; }
.hints { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--warning); background: #120f08; color: var(--paper); font: 13px/1.55 var(--serif); }
.hints p { margin: 0 0 6px; }
.hints p:last-child { margin-bottom: 0; }
.proof-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.proof-actions .hint { border: 1px solid var(--warning); background: transparent; color: var(--warning); }
.proof-actions .hint:hover { background: #120f08; }
.proof-actions-note { color: var(--muted); font: 12px var(--serif); }
.level-nav { display: flex; justify-content: space-between; margin-top: 22px; }
.level-nav button { font-size: 12px; }

.result { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); }
.result .pane-heading h1 { font: 600 14px/1.2 var(--mono); }
.result-meta { color: var(--muted); font: 10px var(--mono); }
.result-body { overflow: auto; padding: 14px; }
.result-body .muted { color: var(--muted); font: 13px/1.5 var(--serif); }
.result-error { margin: 0 0 12px; padding: 10px 13px; border-left: 3px solid var(--red); background: #140a0a; color: var(--paper); font: 12px/1.5 var(--mono); white-space: pre-wrap; }
.result-solved { padding: 16px 14px; border-left: 3px solid var(--proven); background: #07161a; }
.result-solved h2 { margin: 0 0 6px; color: var(--proven); font: 600 18px/1.2 var(--serif); }
.result-solved p { margin: 0; color: var(--paper-dim); font: 13px/1.5 var(--serif); }
.result-solved button { margin-top: 12px; }
.goal-card .goal-meta { display: flex; justify-content: space-between; padding: 7px 13px 0; color: var(--muted); font: 10px var(--mono); }
.goal-card .goal-meta code { color: var(--muted); }

@media (max-width: 980px) {
  .game, .game.worlds-hidden { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: auto; }
  .game-body { overflow: auto; }
  .worlds { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .lesson { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .lesson-scroll { overflow: visible; }
  .result-body { max-height: 50dvh; }
}