.main-menu-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  min-height: 100dvh;
  overflow: hidden;
  color: #e6bd45;
  background: #100b09 url("../assets/main-menu-bg.png") center center / cover no-repeat;
  isolation: isolate;
}

.main-menu-screen[hidden] { display: none; }
.main-menu-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 48%, #0906058a 69%, #070504e8 100%);
}

.main-menu-content {
  width: min(70vw, 1000px);
  margin: clamp(7vh, 10vh, 120px) auto 0;
  display: grid;
  justify-items: center;
}

.main-menu-content h1 { margin: 0; width: 100%; }
.main-menu-content h1 img {
  display: block;
  width: 100%;
  max-height: 42vh;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px #000b);
}

.main-menu-actions {
  position: absolute;
  left: 50%;
  bottom: clamp(5rem, 9vh, 7rem);
  transform: translateX(-50%);
  width: min(440px, 72vw);
  display: grid;
  gap: clamp(.55rem, 1.2vh, 1rem);
}

.main-menu-actions button {
  padding: .35rem 1.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #e8bd41;
  font: 700 clamp(1.65rem, 3.2vw, 3rem)/1.15 Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 2px #000, 0 0 15px #000;
  transition: color 140ms ease, transform 140ms ease, text-shadow 140ms ease;
}
.main-menu-actions button:hover:not(:disabled),.main-menu-actions button:focus-visible {
  color: #ffe188;
  transform: scale(1.045);
  text-shadow: 0 2px 2px #000, 0 0 18px #c47f1b;
  outline: none;
}
.main-menu-actions button:disabled { color: #957d49; cursor: default; opacity: .65; }
.main-menu-actions small { display: block; margin-top: .15rem; font: 600 .65rem/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.main-menu-disclaimer,.main-menu-copyright {
  position: absolute;
  bottom: clamp(1rem, 2.4vh, 2rem);
  margin: 0;
  color: #c6ad91;
  font: 500 clamp(.62rem, .85vw, .8rem)/1.3 Arial, sans-serif;
  text-shadow: 0 1px 4px #000;
}
.main-menu-copyright strong{color:#d4ad45;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.main-menu-platform-note{position:absolute;z-index:2;right:10px;top:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;width:88px;height:88px;box-sizing:border-box;padding:10px;background:#100b09c7;border:1px solid #9c7b368f;border-radius:50%;box-shadow:0 4px 18px #0008;color:#c9bda8;text-align:center;font:600 .55rem/1.25 Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase}.desktop-icon{position:relative;display:block;width:24px;height:17px;box-sizing:border-box;border:2px solid #d1aa45;border-radius:2px}.desktop-icon:before{content:"";position:absolute;left:8px;top:16px;width:5px;height:4px;background:#d1aa45}.desktop-icon:after{content:"";position:absolute;left:4px;top:20px;width:13px;height:2px;background:#d1aa45;border-radius:2px}.desktop-icon i{position:absolute;inset:2px;background:#59451f55}
.main-menu-disclaimer { left: clamp(1rem, 2.5vw, 2.5rem); }
.main-menu-copyright { right: clamp(1rem, 2.5vw, 2.5rem); }
body.main-menu-open { overflow: hidden; }

.tutorial-warning{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:1rem;background:#090605c9}.tutorial-warning[hidden]{display:none}.tutorial-warning-panel{box-sizing:border-box;width:min(540px,94vw);padding:2rem;background:#17120f;border:2px solid #b98a31;border-radius:16px;box-shadow:0 24px 70px #000;color:#d5c8b3;text-align:center}.tutorial-warning-panel>p{margin:0;color:#d2a638;font:.7rem/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}.tutorial-warning-panel h2{margin:.5rem 0;color:#f0d16c;font:700 2rem/1.1 Georgia,serif}.tutorial-warning-panel>span{display:block;line-height:1.5}.tutorial-warning-panel footer{display:flex;justify-content:center;gap:.8rem;margin-top:1.5rem}.tutorial-warning-panel button{padding:.75rem 1rem}.tutorial-warning-panel .primary{background:#c99b35;color:#171006}

.tutorial-guide{box-sizing:border-box;position:fixed;z-index:1050;width:min(360px,calc(100vw - 24px));padding:1rem 1.1rem;background:#17120ff5;border:2px solid #d0a438;border-radius:12px;box-shadow:0 15px 42px #000e;color:#ddd0bb}.tutorial-guide[hidden]{display:none}.tutorial-guide .eyebrow{margin:0 0 .35rem;color:#d9ad3d;font:.66rem/1 Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}.tutorial-guide h2{margin:0 0 .45rem;color:#f4df9a;font:700 1.25rem/1.15 Georgia,serif}.tutorial-guide p{margin:0;line-height:1.45}.tutorial-guide footer{display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin-top:.9rem}.tutorial-guide footer span{color:#998d7c;font:.65rem/1 Arial,sans-serif;text-transform:uppercase}.tutorial-guide button{padding:.55rem .8rem}.tutorial-guide .tutorial-exit{background:transparent;color:#b9aa92;border-color:#685b48}.tutorial-guide .tutorial-next{margin-left:auto;background:#c99b35;color:#171006}.tutorial-target{z-index:1049!important;outline:4px solid #f0c443!important;outline-offset:5px;animation:tutorial-pulse 1.35s ease-in-out infinite}.tutorial-target:not(.district-placement-target){position:relative}.tutorial-target.hand-card{transform:translateY(-12px)!important}@keyframes tutorial-pulse{50%{outline-color:#fff0a2;filter:drop-shadow(0 0 10px #e5b52e)}}

.new-game-setup{position:fixed;inset:0;z-index:1001;display:grid;place-items:center;padding:clamp(1rem,4vw,4rem);background:linear-gradient(#080504b8,#080504e8),url("../assets/main-menu-bg.png") center/cover no-repeat;color:#eadfc9}
.new-game-setup[hidden]{display:none}.new-game-setup-panel{box-sizing:border-box;width:min(920px,96vw);max-height:94dvh;overflow:auto;padding:clamp(1.25rem,3vw,2.5rem);background:#15110eef;border:2px solid #b98a31;border-radius:20px;box-shadow:0 28px 80px #000f,inset 0 0 42px #0009}
.new-game-setup-panel>header{text-align:center}.new-game-setup-panel>header p{margin:0;color:#d4a536;font:.7rem/1 Georgia,serif;letter-spacing:.22em;text-transform:uppercase}.new-game-setup-panel h2{margin:.35rem 0;color:#f1d069;font:700 clamp(2rem,4vw,3.2rem)/1 Georgia,serif}.new-game-setup-panel>header span{color:#bcae99}
.new-game-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin:2rem 0}.new-game-players fieldset{min-width:0;margin:0;padding:1.2rem;background:#201a15;border:1px solid #665132;border-radius:12px}.new-game-players legend{padding:0 .55rem;color:#e1b94e;font:700 1.1rem/1 Georgia,serif}.new-game-players label,.setup-color-label{display:block;margin:.3rem 0 .45rem;color:#c9b997;font:.68rem/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.new-game-players input{box-sizing:border-box;width:100%;padding:.75rem .85rem;background:#0f0c0a;border:1px solid #78613a;border-radius:6px;color:#fff1d4;font:700 1.1rem/1.2 Georgia,serif}.setup-color-label{margin-top:1.1rem}
.setup-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.45rem}.setup-color{aspect-ratio:1;margin:0!important;padding:0;border:2px solid #100d0a;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #6d604c;cursor:pointer}.setup-color:hover:not(:disabled),.setup-color:focus-visible{outline:2px solid #fff0bd;outline-offset:2px}.setup-color.selected{border-color:#fff2bd;box-shadow:0 0 0 3px #d2a438,0 4px 10px #000}.setup-color:disabled{opacity:.18;cursor:not-allowed;filter:grayscale(.8)}
.new-game-setup-panel>footer{display:flex;justify-content:center;gap:1rem}.new-game-setup-panel>footer button{min-width:180px;padding:.8rem 1.2rem;font:700 1rem/1 Georgia,serif}.new-game-setup-panel .setup-start{background:#c99b35;color:#1b1306;border-color:#f2d272}
@media(max-width:700px){.new-game-players{grid-template-columns:1fr}.setup-color-grid{grid-template-columns:repeat(8,1fr)}}

@media (max-aspect-ratio: 4/3) {
  .main-menu-screen { background-position: center; }
  .main-menu-content { width: min(90vw, 900px); margin-top: 12vh; }
}
@media (max-height: 700px) {
  .main-menu-content { width: min(58vw, 720px); margin-top: 4vh; }
  .main-menu-content h1 img { max-height: 45vh; }
  .main-menu-actions { bottom: 3.5rem; gap: .1rem; }
  .main-menu-actions button { font-size: clamp(1.3rem, 2.6vw, 2rem); }
}
@media (max-width: 700px) {
  .main-menu-content { width: 96vw; margin-top: 15vh; }
  .main-menu-actions { width: 86vw; bottom: 5.2rem; }
  .main-menu-disclaimer { right: 1rem; bottom: 2.7rem; text-align: center; }
  .main-menu-copyright { left: 1rem; text-align: center; }
}