:root {
  --turquoise: #52DDC8;
  --gold: #C5A568;
  --black: #101615;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% 48%, #18312d 0%, #101615 52%, #080c0b 100%);
  color: #e9f5f0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
main { width: 100%; max-width: 1500px; padding: 20px; }
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 8px;
}
.eyebrow {
  color: var(--turquoise);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
}
h1 {
  margin: 7px 0;
  font-size: clamp(23px, 4vw, 43px);
  letter-spacing: 3px;
  font-weight: 800;
}
h1 span { color: var(--turquoise); }
.status {
  color: var(--gold);
  border: 1px solid #806e47;
  padding: 9px 12px;
  font-size: 10px;
  letter-spacing: 2px;
}
.stage {
  border: 1px solid #29423c;
  background: linear-gradient(145deg, #14201eaa, #080e0d88);
  box-shadow: 0 0 65px #52ddc810, inset 0 0 35px #0008;
  overflow: hidden;
}
svg { display: block; width: 100%; height: auto; }
footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 13px;
  color: #78938a;
  font-size: 10px;
  letter-spacing: 2px;
}
@media(max-width:600px) {
  main { padding: 10px; }
  .status { font-size: 8px; }
  footer { font-size: 8px; }
}
.game-controls{padding:14px;text-align:center;background:#0b1210;border:1px solid #29423c;color:#52DDC8}
.game-controls button{padding:10px;margin:5px;background:#101c18;color:#52DDC8;border:1px solid #52DDC8}
.stats{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
#gameStatus{color:#C5A568}

/* Personalizacion y accesibilidad */
:root {
  --page-bg: radial-gradient(ellipse at 50% 48%, #18312d 0%, #101615 52%, #080c0b 100%);
  --page-text: #e9f5f0;
  --panel-bg: #0b1210;
  --panel-text: #52DDC8;
  --panel-border: #29423c;
}
body { background: var(--page-bg); color: var(--page-text); }
#accessibilityPanel {
  margin-top: 12px; padding: 16px;
  background: var(--panel-bg); color: var(--panel-text);
  border: 1px solid var(--panel-border);
}
#accessibilityPanel h2 { margin: 0 0 12px; font-size: 1.15em; }
#accessibilityPanel .pref-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 12px 0;
}
#accessibilityPanel select, #accessibilityPanel button {
  min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--panel-text);
  border-radius: 3px; background: var(--panel-bg);
  color: var(--panel-text); font: inherit;
}
#accessibilityPanel button { cursor: pointer; }
#accessibilityPanel button:focus-visible,
#accessibilityPanel select:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px;
}
body.font-medium { font-size: 18px; }
body.font-large { font-size: 21px; }
body.theme-light {
  --page-bg: #f4f6f5; --page-text: #17211f;
  --panel-bg: #fff; --panel-text: #075e53; --panel-border: #8a9b96;
}
body.theme-dark {
  --page-bg: #080a0a; --page-text: #f4f4f4;
  --panel-bg: #111414; --panel-text: #79f5df; --panel-border: #66736f;
}
body.theme-contrast {
  --page-bg: #000; --page-text: #fff;
  --panel-bg: #000; --panel-text: #ff0; --panel-border: #fff;
}
#accessibilityPanel .pref-note { font-size: .9em; line-height: 1.5; }


/* Consola integrada v0.2: piezas táctiles, controles y adaptación */
:root { --console-brightness: 1; --piece-scale: 1; --symbol-scale: 1; }
body { display:block; }
main { margin:0 auto; }
.console-layout {
  display:grid; grid-template-columns:minmax(170px, 220px) minmax(0,1fr) minmax(190px,240px);
  gap:14px; align-items:stretch;
}
.console-panel {
  border:1px solid #28534d; border-radius:10px;
  background:linear-gradient(150deg,#111d1b 0%,#080d0d 100%);
  padding:15px; color:#b9d7d1; box-shadow:inset 0 0 20px #0008;
  min-width:0;
}
.console-panel h2,.console-panel h3 {
  color:var(--turquoise); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; margin:0 0 12px;
}
.console-panel p,.console-panel label {font-size:12px;line-height:1.5}
.console-panel .pref-row {display:flex;flex-direction:column;gap:6px;margin:13px 0}
.console-panel input[type="range"] {width:100%;accent-color:var(--turquoise)}
.console-panel select,.console-panel button,.game-controls button {
  min-height:40px; border:1px solid #397c73; border-radius:5px;
  background:linear-gradient(145deg,#172925,#0b1210); color:#c9f9f0;
  padding:9px 11px; font:inherit; cursor:pointer;
}
.console-panel button:hover,.game-controls button:hover {
  border-color:#f0d995; box-shadow:0 0 12px #52ddc840;
}
.console-panel button:focus-visible,.game-controls button:focus-visible,
.console-panel input:focus-visible,.console-panel select:focus-visible {
  outline:2px solid var(--gold);outline-offset:3px;
}
.stage { min-width:0; border-radius:12px; position:relative; }
#scene { filter:brightness(var(--console-brightness)); }
#accessibilityPanel {margin-top:14px}
.console-panel .hint {color:#78938a;font-size:11px}
.stats {justify-content:center}
.game-controls {margin-top:14px;border-radius:8px}
.console-panel .control-button {width:100%;margin:5px 0}
#scene g[data-layer] {cursor:pointer;transition:filter .16s ease,transform .16s ease}
#scene g[data-layer]:hover {filter:brightness(1.3)}
@media(max-width:1050px) {
  .console-layout {grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)}
  .console-layout .left-panel {grid-column:1;grid-row:1}
  .console-layout .stage {grid-column:2;grid-row:1 / span 2}
  .console-layout .right-panel {grid-column:1;grid-row:2}
}
@media(max-width:680px) {
  main{padding:10px}
  .console-layout {display:flex;flex-direction:column;gap:10px}
  .console-layout .stage {order:2}
  .console-layout .left-panel {order:1}
  .console-layout .right-panel {order:3}
  .console-panel {padding:12px}
  .console-panel .settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .console-panel .pref-row {margin:5px 0}
  .console-panel h2 {margin-bottom:8px}
  header {margin-bottom:12px}
}
@media(orientation:landscape) and (max-height:650px) {
  main {padding:8px}
  header .eyebrow {font-size:9px}
  h1 {font-size:clamp(18px,2.5vw,30px)}
  .console-layout {grid-template-columns:minmax(145px,190px) minmax(0,1fr) minmax(160px,205px);gap:8px}
  .console-panel {padding:9px}
  .console-panel p,.console-panel label {font-size:11px}
}