/* Memoria y Visión 0.6 — editorial identity. Board geometry stays in responsive.css. */
:root {
  --bg:#111315; --surface:#1b1e20; --raised:#25292c;
  --red:#bf3048; --gold:#d8bb83; --muted:#adb2b3;
  --text:#f4f0e7; --line:#363b3d;
  --display: "Noto Serif", Georgia, serif;
}
body { background:var(--bg); }
h1,h2,h3 { letter-spacing:-.025em; }
p { color:var(--muted); }
.eyebrow { color:var(--gold); letter-spacing:.13em; }
.topbar { padding:19px 0 23px; }
.brand { gap:12px; }
.brand strong { font-weight:600; letter-spacing:-.035em; }
.brand .eyebrow { font-size:9px; letter-spacing:.12em; }
.page-heading h1,.welcome h1 {
  font-family:var(--display); font-weight:400; letter-spacing:-.045em;
  line-height:1.16; text-wrap:balance;
}
.page-heading h1 { font-size:clamp(30px,4.5vw,48px); }
.page-heading p { color:var(--muted); }
.page-heading h1 em,.welcome h1 em { font-style:italic; }
.primary,.secondary,.filter-btn { border-radius:10px; }
.primary { background:var(--red); box-shadow:none; color:#fff8f0; }
.primary:hover { background:#d13b54; }
.primary:active { background:#a4263b; }
.secondary { background:var(--raised); border-color:#4c5355; }
.secondary:hover { background:#2d3235; border-color:#81827b; }
.icon-btn { border-color:var(--line); background:transparent; border-radius:12px; }
.icon-btn:hover { background:var(--raised); }
.icon-btn[aria-pressed=true] { background:#332e24; color:var(--gold); border-color:#8a7550; }
.quiet { color:var(--gold); }
input,select { background:var(--surface); border-color:#687174; border-radius:9px; }
input::placeholder { color:#929a9e; }
.switch:before { background:#596164; }
.switch:after { background:#d9dedb; }
.switch[aria-checked=true]:after { background:#fff8ed; }

/* Home: one expressive image, then two compact, fully tappable routes. */
.home-hero {
  position:relative; isolation:isolate; overflow:hidden; border-radius:20px;
  background:#0e1011; min-height:390px; padding:40px;
  border:1px solid #393d3d;
}
.hero-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.home-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0e1011e8 0%,#0e1011aa 31%,#0e101130 56%,transparent 76%); }
.hero-copy { position:relative; width:60%; }
.hero-copy>.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.hero-copy h1 { font-family:var(--display); font-weight:400; font-size:clamp(38px,5vw,62px); line-height:1.07; letter-spacing:-.045em; margin:22px 0 17px; }
.hero-copy h1 em { font-style:italic; color:#e4c894; }
.hero-copy p { color:#bfc4c3; line-height:1.65; font-size:14px; margin-bottom:24px; }
.hero-copy .primary { min-height:48px; padding:12px 18px; }
.hero-resume { display:flex; font-size:12px; margin-top:4px; }
.hero-caption { display:block; margin-top:25px; color:#a7aeaf; font-size:10px; letter-spacing:.04em; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin:27px 0 12px; }
.section-heading .eyebrow { font-size:10px; }
.section-heading>span:last-child { font-size:10px; color:#899093; font-variant-numeric:tabular-nums; }
.home-modes { grid-template-columns:1fr 1fr; gap:14px; }
.home-modes .mode-card {
  display:flex; flex-direction:row; align-items:center; gap:18px; padding:23px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface); text-align:left;
}
.home-modes .mode-card:hover { border-color:#7d725d; background:#222629; }
.mode-mark { color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mode-mark>.icon { width:30px; height:30px; }
.mode-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.mode-copy strong { font-size:18px; font-weight:600; letter-spacing:-.025em; }
.mode-copy>span { font-size:12px; color:#b9bfbe; line-height:1.5; }
.mode-copy small { font-size:10px; color:#919a9d; line-height:1.5; }
.home-modes .mode-card>.icon { width:20px; height:20px; margin:0; color:#b6b9af; }
.continue-card { padding:22px 0; background:transparent; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; margin-top:24px; }
.continue-card h3 { font-weight:550; font-size:17px; }
.continue-card p { font-size:12px; }
.creator { color:#a7aeaf; font-size:11px; margin:25px 0; }
.creator img { width:32px; height:32px; }
.creator b { font-weight:550; color:#d8bb83; }

/* Neutral navigation leaves the red primary action in charge. */
.bottom-nav { background:#181b1ef5; border-color:#3c4143; border-radius:18px 18px 0 0; gap:6px; box-shadow:0 -6px 24px #0002; }
.nav-item { color:#a7afb1; align-items:center; justify-content:center; font-size:11px; gap:5px; }
.nav-item.active { background:#d8bb8310; color:var(--gold); }
.nav-item.active::before { display:none; }
.nav-item.active .icon { stroke-width:2; }

/* The repertoire reads as a collection instead of a stack of equal cards. */
.library-tools { background:#111315f5; }
.library-info summary { color:#b4bcbd; }
.list-count { color:#a7aeaf; letter-spacing:.02em; }
.opening-list { gap:0 24px; }
.opening-row { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; padding:4px 0; }
.opening-row:hover { background:#ffffff03; }
.opening-link { padding:12px 4px; gap:14px; }
.opening-info strong { font-size:14px; font-weight:550; }
.opening-info>span { color:#a2abad; }
.eco { border:0; border-radius:6px; background:#d8bb8310; color:var(--gold); padding:10px 7px; min-width:38px; text-align:center; font-size:11px; font-weight:550; font-variant-numeric:tabular-nums; }
.opening-row>.icon-btn { color:#929c9e; }
.opening-row>.icon-btn[aria-pressed=true] { color:var(--gold); }
.filter-btn[aria-pressed=true] { background:#332e24; border-color:#8a7550; }
.completion-mark.perfect { background:#193b30; color:#a3edbd; }
.completion-mark.completed { background:#433820; color:#ffe195; }

/* Study and play: calm surround, unchanged pieces and board colours. */
.work-header { border-color:#343a3c; }
.work-header strong { font-weight:550; }
.work-header span { color:#a7afb1; }
.board-frame { background:#202627; border-color:#4b5757; border-radius:12px; box-shadow:0 8px 22px #0003; }
.board coords coord { color:#d8d5c9!important; }
.current-move,.turn-card,.game-ribbon { border-color:var(--line); background:var(--surface); border-radius:9px; }
.current-move>strong { color:var(--text); font-weight:600; }
.turn-card>strong { color:#f0e4cb; font-weight:550; }
.move-chip { background:transparent; padding:6px; border-radius:5px; }
.move-chip small { color:#9ba5a6; }
.move-chip.current { background:#403828; color:#f2dba9; }
.move-strip { border-bottom:1px solid var(--line); padding-bottom:9px; }
.idea-card { background:#d8bb8308; border-left-color:#99815a; border-radius:0 8px 8px 0; }
.idea-card strong { color:#d8bb83; font-weight:550; }
.idea-card p { color:#b8c0bf; }
.feedback { color:#ffb9ba; }
.result-score { font-family:var(--display); font-weight:400; letter-spacing:-.05em; }
.result-score.perfect { color:#a3edbd; }
.result-score.completed { color:#ffe195; }
.result-label { display:flex; align-items:center; gap:8px; }
.result-label.perfect { color:#a3edbd; }
.result-label.completed { color:#ffe195; }
.result-label .icon { width:20px; height:20px; }
.workspace:has(.result-score) .result-score { font-size:56px; line-height:1.05; margin:14px 0 8px; }
.workspace:has(.result-score) .result-score>span { font-size:26px; }
.workspace:has(.result-score) .attempt-stats { margin-top:12px; padding-top:10px; }
.workspace:has(.result-score) .button-stack { margin-top:12px; gap:8px; }
.practice:has(.result-score) .work-side>.eyebrow,.practice:has(.result-score) .work-side>h1,
.rebuild.phase-done .work-side>.eyebrow,.rebuild.phase-done .work-side>p:first-of-type,
.workspace:has(.result-score) .board-caption { display:none; }
.rebuild.phase-done .work-side>h1 { font-size:20px; margin:8px 0 0; }
@media(orientation:portrait) {
  .workspace:has(.result-score) .board-column { max-width:min(100%,500px,max(224px,calc(100dvh - 380px - var(--header-extra,0px)))); }
}
.piece-option { border-color:#5d625b; border-radius:7px; background:#303735; }
.piece-option.active { background:#64553c; border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.check-alert { background:#502631; border-color:#9b4d5d; }

/* Supporting screens and overlays use the same restrained surface scale. */
.panel { border-color:var(--line); border-radius:14px; background:var(--surface); }
.panel h2 { font-size:20px; font-weight:550; }
.level-card { border-color:#4b5356; background:#22272a; border-radius:10px; }
.level-card.selected { background:#392329; border-color:#e08593; box-shadow:inset 0 0 0 1px #bf304850; }
.level-card.selected:after { color:#ffbec7; }
.level-card>strong { font-weight:550; }
.setup-note { background:transparent; border:0; border-left:1px solid var(--line); border-radius:0; }
.setup-note>.icon { width:38px; height:38px; }
.setting-row { border-color:#363e40; }
.stat-row strong { font-family:var(--display); font-weight:400; font-size:38px; color:var(--gold); }
.stat-row span { font-size:11px; line-height:1.5; }
.about { background:transparent; }
.welcome { background:radial-gradient(ellipse at 50% 14%,#d8bb830c,transparent 60%); }
.welcome-icon { box-shadow:none; margin-bottom:26px; }
.welcome-path { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; gap:16px; }
.welcome-path>div { color:#d3d9d6; }
@media(max-height:760px) {
  .welcome { padding:16px 22px; }
  .welcome-icon { width:76px; height:76px; margin-bottom:16px; }
  .welcome h1 { font-size:44px; line-height:1.08; margin:12px 0; }
  .welcome>p { font-size:13px; line-height:1.5; }
  .welcome-path { display:none; }
  .welcome-language { margin:12px 0; }
}
dialog { background:#1b1f21; border-color:#535953; border-radius:16px; box-shadow:0 24px 80px #0009; }
dialog::backdrop { background:#070909da; backdrop-filter:blur(8px); }
dialog h2 { font-weight:550; letter-spacing:-.025em; }
.history-moves { color:var(--text); }
#toast { background:#ebe1cb; color:#172021; border-radius:10px; }

@media(min-width:600px) {
  .hero-art { object-fit:contain; object-position:right center; }
}
@media(max-width:900px) {
  .setup-note { border-left:0; border-top:1px solid var(--line); }
  .home-hero { min-height:350px; padding:32px; }
  .home-modes .mode-card { padding:20px 18px; gap:14px; }
  .mode-copy strong { font-size:17px; }
}
@media(max-width:599px) {
  .shell { padding-left:18px; padding-right:18px; }
  .topbar { padding:13px 0 17px; }
  .brand>img { width:40px; height:40px; }
  .brand strong { font-size:17px; }
  .brand .eyebrow { font-size:8px; }
  .page-heading h1 { font-size:31px; }
  body[data-page=library] .page-heading h1 { font-size:28px; }
  .home-hero { min-height:0; padding:23px 20px 16px; border-radius:16px; }
  .hero-copy { width:68%; }
  .hero-copy>.eyebrow { font-size:9px; letter-spacing:.08em; }
  .hero-copy h1 { font-size:37px; margin:18px 0 13px; }
  .hero-copy p { font-size:12px; line-height:1.65; margin-bottom:19px; }
  .hero-copy .primary { padding:11px 13px; font-size:12px; min-height:46px; gap:7px; }
  .hero-copy .primary .icon { width:19px; height:19px; }
  .hero-caption { margin-top:19px; font-size:9px; }
  .hero-art { object-position:60% center; }
  .home-hero::after { background:linear-gradient(90deg,#0e1011e8 0%,#0e1011ad 34%,#0e101145 60%,transparent 83%); }
  .section-heading { margin-top:21px; margin-bottom:10px; }
  .home-modes { grid-template-columns:1fr; gap:9px; }
  .home-modes .mode-card { padding:16px 14px; gap:13px; border-radius:11px; }
  .mode-mark>.icon { width:25px; height:25px; }
  .mode-copy { gap:4px; }
  .mode-copy strong { font-size:16px; }
  .mode-copy>span { font-size:11px; }
  .mode-copy small { font-size:10px; }
  .home-modes .mode-card>.icon { width:18px; height:18px; }
  .continue-card { padding:17px 0; margin-top:20px; }
  .continue-card h3 { font-size:16px; }
  .continue-card p { font-size:11px; }
  .creator { font-size:10px; }
  .opening-link { gap:10px; padding:11px 2px; }
  .opening-info strong { font-size:13px; }
  .panel { padding:21px 18px; }
  .board-frame { border-radius:10px; }
}
@media(max-width:359px) {
  .shell { padding-left:14px; padding-right:14px; }
  .brand { gap:8px; }
  .brand strong { font-size:15px; }
  .brand .eyebrow { font-size:7px; }
  .hero-copy { width:74%; }
  .hero-copy h1 { font-size:32px; }
  .hero-copy p { font-size:11px; }
  .hero-copy>.eyebrow { font-size:8px; }
  .hero-copy .primary { padding:11px; font-size:11px; }
  .mode-copy>span { font-size:11px; }
  .mode-copy strong { font-size:15px; }
  .home-modes .mode-card { gap:10px; padding:14px 11px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .shell { margin-left:74px; padding:0 18px 20px; }
  .bottom-nav { border-radius:0; }
  .topbar { padding:10px 0 12px; }
  .home-hero { min-height:240px; padding:26px; }
  .hero-copy { width:65%; }
  .hero-copy h1 { font-size:38px; margin:16px 0 12px; }
  .hero-copy p { margin-bottom:18px; font-size:12px; }
  .hero-caption { margin-top:18px; }
  .home-modes { grid-template-columns:1fr; }
  .page-heading h1 { font-size:28px; }
  .keyboard-open .shell { margin-left:0; }
  .work-side { scrollbar-color:#726a58 transparent; }
}