/* Main menu and operation selection */
.menu[hidden] {
  display: none;
}

.menu-hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: clamp(238px, 22.5vw, 326px);
  overflow: hidden;
  border: 1px solid #5a6148;
  border-radius: 5px;
  background: #171d12 url("assets/forward-valley.webp") 52% 48% / cover no-repeat;
  box-shadow: 0 8px 32px #06090432;
}

.menu-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #0a100ce8, #0c120d9c 29%, #10170d13 54%, transparent 76%),
    linear-gradient(0deg, #12180c47, transparent 60%);
}

.menu-hero-content {
  padding: clamp(24px, 3vw, 42px);
}

.menu-hero .eyebrow {
  margin: 0 0 clamp(13px, 1.2vw, 19px);
  color: #f0c480;
}

.menu-hero h1 {
  color: #f5f2dc;
  font: 800 clamp(51px, 5.2vw, 80px)/.88 "Field Display", var(--sans);
  letter-spacing: -.046em;
  text-shadow: 0 3px 14px #0d11094f;
}

.menu-intro {
  max-width: 330px;
  margin: 17px 0 0;
  font: 500 14px/1.45 var(--sans);
  color: #d7ddce;
  text-wrap: pretty;
}

.menu-hero .hero-hud {
  inset: 9% 2.7% 10% auto;
  width: 44%;
  height: auto;
  opacity: .78;
}

.menu-hero .hero-ticks {
  right: 4.5%;
  bottom: 10%;
}

.operation-select {
  margin-top: clamp(20px, 2.2vw, 31px);
}

.operation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.operation-header .eyebrow {
  margin: 0 0 5px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #b8bfa8;
}

.operation-header h2 {
  margin: 0;
  font: 700 clamp(25px, 2.4vw, 34px)/1.04 "Field Condensed", var(--sans);
  letter-spacing: .01em;
  color: #e9ecdf;
}

#resume-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 37px;
  padding: 7px 13px;
  border: 1px solid #726840;
  border-radius: 3px;
  background: #352f1e;
  color: #ead29b;
  font: 600 12px/1.3 var(--sans);
}

#resume-button[hidden] { display: none; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(13px, 1.5vw, 21px);
}

.mode-tile {
  --tile-accent: #c1d0a3;
  --tile-line: #657458;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4a5642;
  border-radius: 5px;
  background: linear-gradient(112deg, #252d22, #1c231b 85%);
  color: var(--paper);
  text-align: left;
  transition: border-color .18s, box-shadow .18s;
}

.command-tile {
  --tile-accent: #f0c37c;
  --tile-line: #99703f;
  border-color: #64543e;
  background: linear-gradient(112deg, #302c23, #26241e 85%);
}

.mode-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3.3;
  object-fit: cover;
  object-position: center 52%;
  transition: transform .3s ease;
}

.mode-shade {
  aspect-ratio: 3.3;
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #12180d20, transparent 35%, transparent 77%, #11180c3b);
  box-shadow: inset 0 -1px 0 #f5f6ca2b;
}

.mode-content {
  position: static;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
  flex: 1;
  gap: 4px 16px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--tile-line);
  background: inherit;
}

.mode-rating {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #a6ae9066;
  border-radius: 2px;
  background: #172015e8;
  color: #dde6cc;
  font: 600 10px/1.15 var(--mono);
  letter-spacing: .045em;
  font-variant-numeric: tabular-nums;
}

.command-tile .mode-rating {
  border-color: #bba17c88;
  background: #282317ed;
  color: #f2d5a0;
}

.mode-rating .icon,
.mode-rating svg {
  width: 13px;
  height: 13px;
}

.mode-name {
  grid-column: 1 / -1;
  margin: 0;
  color: #f1f1e1;
  font: 700 clamp(25px, 2.3vw, 32px)/1 "Field Condensed", var(--sans);
  letter-spacing: .005em;
}

.mode-desc {
  grid-column: 1;
  color: #bfc8b8;
  font: 400 13px/1.45 var(--sans);
  text-wrap: pretty;
}

.command-tile .mode-desc {
  color: #cec7b9;
}

.mode-cta {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tile-accent);
  white-space: nowrap;
  font: 700 11px/1.45 var(--sans);
}

.mode-cta::after {
  content: "→";
  font: 500 17px/1 var(--sans);
  transition: transform .17s ease;
}

.mode-cta:has(svg)::after { display: none; }

.menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #404a3780;
  color: #9da790;
  font: 10px/1.4 var(--mono);
  letter-spacing: .04em;
}

.menu-foot p {
  margin: 0;
}

@media (hover:hover) {
  .mode-tile:hover:not(:disabled) {
    filter: none;
    border-color: var(--tile-accent);
    box-shadow: 0 5px 16px #0003;
  }

  .mode-tile:hover .mode-art { transform: scale(1.025); }
  .mode-tile:hover .mode-cta::after { transform: translateX(3px); }
}

.mode-tile:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (min-width: 741px) and (max-height: 800px) {
  .menu-hero { min-height: clamp(200px, 29svh, 238px); }
  .menu-hero-content { padding-top: 22px; padding-bottom: 22px; }
  .menu-hero h1 { font-size: clamp(50px, 7.8svh, 65px); }
  .operation-select { margin-top: 20px; }
}

@media (max-width: 850px) {
  .mode-content { gap: 6px 10px; padding: 14px 15px 15px; }
  .mode-desc { grid-column: 1 / -1; }
  .mode-cta { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 4px; }
}

@media (max-width: 600px) {
  .menu-hero {
    min-height: 235px;
    align-items: flex-end;
    background-position: 61% 44%;
  }
  .menu-hero-content { padding: 21px 18px; }
  .menu-hero h1 { font-size: clamp(42px, 10.4vw, 57px); }
  .menu-hero .eyebrow { margin-bottom: 9px; }
  .menu-hero::before {
    background: linear-gradient(0deg, #0e160be0 0%, #10180d66 37%, transparent 76%),
      linear-gradient(90deg, #11190fc2, #0d140c2b 63%, transparent);
  }
  .menu-hero .hero-hud { height: 48%; width: 37%; inset: 7% 4% auto auto; }
  .menu-hero .hero-ticks { bottom: 8%; right: 4%; }
  .menu-intro { max-width: 240px; margin-top: 11px; font-size: 12px; }
  .operation-select { margin-top: 21px; }
  .operation-header { margin-bottom: 11px; flex-wrap: wrap; }
  .operation-header h2 { font-size: 26px; }
  .mode-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mode-art, .mode-shade { aspect-ratio: 3.5; }
  .mode-content { padding: 13px 15px 14px; gap: 4px 13px; }
  .mode-desc { grid-column: 1; }
  .mode-cta { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 0; }
  .mode-rating { top: 9px; right: 9px; font-size: 9px; }
  .menu-foot { flex-wrap: wrap; row-gap: 4px; margin-top: 16px; }
}

@media (max-width: 355px) {
  .mode-desc { grid-column: 1 / -1; }
  .mode-cta { grid-row: auto; grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-tile:hover .mode-art, .mode-tile:hover .mode-cta::after { transform: none; }
}

.hero-operations { position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
.hero-operations button { min-height:42px; }
.hero-operations .hero-online { gap:9px; background:#e5bd79; color:#182018; border:1px solid #f2d29a; padding:0 15px; border-radius:3px; font-size:13px; font-weight:700; box-shadow:0 4px 20px #10150e59; }
.hero-operations .hero-online .icon:last-child { width:15px; }
.hero-profile { display:inline-flex; gap:7px; align-items:center; max-width:185px; padding:0 12px; border:1px solid #b6bea58c; border-radius:3px; background:#182017cc; color:#eeefe2; font-size:12px; font-weight:600; }
#hero-crest { display:grid; place-items:center; flex:none; color:#d5c49a; }
#hero-crest svg { width:21px; height:21px; }
#hero-profile-label,#profile-nav-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-hero .menu-intro { max-width:355px; }
#dialog [data-group="mode"] .option { display:grid; place-items:center; min-height:42px; }
@media(max-width:600px) {
 .menu-hero .menu-intro { max-width:255px; }
 .hero-operations { gap:7px; margin-top:14px; }
 .hero-operations button { min-height:44px; }
 .hero-profile { max-width:150px; }
}

/* Online is a full game-mode choice, including on touch screens. */
a.mode-tile, a.hero-online { text-decoration:none; cursor:pointer; touch-action:manipulation; }
.hero-operations .hero-online { display:inline-flex; align-items:center; min-height:46px; }
.menu-hero-content { position:relative; z-index:2; }
.hero-ticks { pointer-events:none; }
.mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.online-tile { --tile-accent:#e8c78e; --tile-line:#b99a62; border-color:#b99a62; background:linear-gradient(120deg,#343529,#202b23); }
.online-tile .mode-rating { color:#f4d79c; }
.mode-tile:focus-visible,.hero-online:focus-visible { outline:3px solid #f4d79c; outline-offset:4px; }
@media(max-width:800px) { .mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .online-tile { grid-column:1/-1; } .online-tile .mode-art,.online-tile .mode-shade { aspect-ratio:4; } }
@media(max-width:550px) { .mode-grid { grid-template-columns:1fr; } .online-tile { grid-column:auto; } .online-tile .mode-art,.online-tile .mode-shade { aspect-ratio:3.3; } }