:root {
  color-scheme: light;
  --sky-deep: #173454;
  --sky-mid: #2873aa;
  --panel: rgba(17, 49, 79, 0.94);
  --panel-2: rgba(24, 66, 101, 0.92);
  --cream: #fffaf0;
  --cream-2: #fff0cd;
  --text: #f8fbff;
  --dark-text: #173454;
  --muted: #bcd5e8;
  --border: rgba(246, 196, 105, 0.58);
  --accent: #f1a72f;
  --accent-2: #73dff7;
  --danger: #ff6670;
  --ok: #84df9a;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: var(--text);
  background: #78cfff url('assets/skins/sky/backgrounds/floating-kingdom.jpg') center/cover fixed no-repeat;
}
button, select, input { font: inherit; }
button, select, input[type=number] {
  min-height: 42px;
  border: 1px solid rgba(245, 201, 120, 0.62);
  background: #163d62;
  color: var(--text);
  border-radius: 10px;
  padding: .55rem .75rem;
}
button { cursor: pointer; font-weight: 800; }
button:hover { border-color: #ffd88b; }
button.primary {
  background: linear-gradient(#ffc967, #e89528);
  border-color: #ffe1a6;
  color: #39250d;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
button.ghost { background: rgba(11, 42, 70, .35); }

.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; }
.menu-screen {
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  background: linear-gradient(rgba(34, 111, 168, .16), rgba(15, 54, 91, .36));
}
.menu-card, .settings-card {
  width: min(820px, 100%);
  background: linear-gradient(180deg, rgba(24, 67, 102, .95), rgba(11, 42, 70, .95));
  border: 2px solid rgba(247, 202, 118, .72);
  border-radius: 20px;
  box-shadow: 0 22px 75px rgba(19, 68, 105, .42), inset 0 1px rgba(255,255,255,.14);
  padding: 28px;
  backdrop-filter: blur(8px);
}
.hero-card { text-align: center; max-width: 700px; }
.eyebrow { font-size: .72rem; letter-spacing: .16em; color: #ffe09b; font-weight: 900; }
.hero-card h1, .settings-card h2, .overlay-card h2 {
  margin: .35rem 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: -.04em;
  text-shadow: 0 2px 0 rgba(0,0,0,.16);
}
.settings-card h2, .overlay-card h2 { font-size: 2rem; }
.subtitle { color: #d5e7f5; max-width: 600px; margin: 8px auto 22px; line-height: 1.5; }
.menu-actions, .overlay-actions, .form-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.menu-actions button { min-width: 140px; }
.menu-summary {
  margin: 18px auto 24px;
  border: 1px solid rgba(255, 221, 153, .38);
  background: rgba(8, 38, 65, .58);
  border-radius: 12px;
  padding: 12px;
  color: #e2eff8;
}
.key-hint, .footnote, .game-hint { color: var(--muted); font-size: .84rem; }
.key-hint { margin: 22px 0 0; }
.screen-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.settings-card { max-width: 900px; }
fieldset {
  border: 1px solid rgba(204, 230, 246, .28);
  border-radius: 14px;
  padding: 10px 16px 14px;
  margin: 0 0 16px;
  background: rgba(8, 39, 66, .44);
}
legend { padding: 0 8px; color: #ffe09b; font-weight: 900; letter-spacing: .04em; }
.setting-row {
  display: grid;
  grid-template-columns: minmax(170px,1fr) minmax(200px,320px);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(174, 215, 239, .18);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row.unavailable { opacity: .42; }
.setting-row.unavailable .switch { cursor: not-allowed; }
.setting-row.unavailable .switch span { filter: saturate(.35); }
.setting-row label:first-child, .setting-row > span { font-weight: 700; }
.setting-row select, .setting-row input[type=number] { width: 100%; }
.toggle-row { grid-template-columns: 1fr auto; }
.read-only-row strong { justify-self: end; color: #fff1c7; }
.switch { display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span {
  width: 50px; height: 28px; border-radius: 999px;
  background: #35556f; border: 1px solid #64829a; position: relative; transition: .16s;
}
.switch span:after {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  left: 3px; top: 3px; background: #e6f1f8; transition: .16s;
}
.switch input:checked + span { background: #d98926; border-color: #ffca67; }
.switch input:checked + span:after { left: 25px; background: #fff; }
.subsettings { padding: 8px 8px 10px 18px; border-left: 2px solid #73b9df; margin: 0 0 4px 8px; }
.subsettings.hidden { display: none; }
.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.range-grid label { display: grid; grid-template-columns: 1fr 100px; gap: 10px; align-items: center; color: #d2e5f1; }
.volume-row { grid-template-columns: minmax(170px,1fr) minmax(180px,1fr) 54px; }
.volume-row output { text-align: right; color: #fff1c7; }
.settings-message { min-height: 1.2em; color: #ffd0d3; font-weight: 700; margin-bottom: 8px; }
.form-actions { justify-content: flex-end; margin-top: 22px; }

.game-screen.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: #86d6ff;
  overflow: hidden;
}
.hud {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 18px));
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  pointer-events: none;
}
.hud > div {
  background: linear-gradient(180deg, rgba(21, 60, 96, .95), rgba(12, 44, 73, .94));
  border: 1px solid rgba(255, 213, 132, .72);
  border-radius: 11px;
  padding: 7px 8px;
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 2px 7px rgba(27,77,112,.22);
  backdrop-filter: blur(5px);
}
.hud span { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: #bcdcf0; }
.hud strong { font-size: 1rem; color: #fffaf0; }
.canvas-shell { width: 100vw; height: 100vh; display: flex; }
.canvas-shell canvas { width: 100%; height: 100%; display: block; background: #8dd9ff; }
.game-hint {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(19, 59, 91, .72); color: #eff9ff; padding: 5px 11px; border-radius: 8px; white-space: nowrap;
  border: 1px solid rgba(255, 226, 167, .35);
}

.overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(13, 48, 77, .62);
  display: flex; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(5px);
}
.overlay[hidden] { display: none; }
.overlay-card {
  width: min(520px,100%);
  background: linear-gradient(180deg, #194b76, #0e3558);
  border: 2px solid rgba(255, 210, 125, .7);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  box-shadow: 0 20px 70px rgba(13, 48, 77, .5);
}
.gameover-grid, .stat-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 18px 0; }
.gameover-grid > div, .stat-summary-grid > div {
  background: rgba(8, 42, 70, .62); border: 1px solid rgba(196, 225, 242, .27); border-radius: 10px; padding: 12px;
}
.gameover-grid span, .stat-summary-grid span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.gameover-grid strong, .stat-summary-grid strong { font-size: 1.25rem; }
.stats-card { max-width: 1000px; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(198, 225, 241, .28); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(190, 219, 236, .2); }
th { color: #ffe09b; font-size: .76rem; text-transform: uppercase; background: rgba(8, 42, 70, .7); }
td { color: #ecf6fc; }
.footnote { line-height: 1.5; }
.hidden { display: none !important; }

@media (max-width: 700px) {
  .menu-screen { padding: 14px 10px; }
  .menu-card, .settings-card { padding: 18px; border-radius: 12px; }
  .setting-row { grid-template-columns: 1fr; gap: 7px; }
  .toggle-row { grid-template-columns: 1fr auto; }
  .read-only-row { grid-template-columns: 1fr auto; }
  .range-grid { grid-template-columns: 1fr; }
  .range-grid label { grid-template-columns: 1fr 90px; }
  .volume-row { grid-template-columns: 1fr 1fr 50px; }
  .hud { grid-template-columns: repeat(4,1fr); top: 5px; }
  .hud > div { padding: 4px; }
  .hud span { font-size: .56rem; }
  .hud strong { font-size: .85rem; }
  .game-hint { display: none; }
  .gameover-grid, .stat-summary-grid { grid-template-columns: repeat(2,1fr); }
}