* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1a1410; color: #f3e6d4; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; overflow: hidden; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

#orient {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem; background: #1a1410; font-size: 1.3rem;
}
@media (orientation: portrait) and (max-width: 900px) {
  #orient { display: flex; }
  #menu, #game { visibility: hidden; }
}

.screen { position: fixed; inset: 0; }
.menu-inner { max-width: 780px; margin: 6vh auto 0; padding: 0 24px 24px; }
.eyebrow { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; color: #d7b07a; margin: 0 0 0.4rem; }
h1 { font-size: 3.2rem; margin: 0 0 0.6rem; letter-spacing: 0.02em; }
.lede { font-size: 1.15rem; line-height: 1.45; color: #e8d7c0; max-width: 38rem; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.4rem 0 1.2rem; }
.pick h2 { font-size: 1rem; margin: 0 0 0.5rem; color: #d7b07a; font-weight: 600; }
.factions { display: flex; flex-direction: column; gap: 8px; }
.faction {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 10px 12px; border: 1px solid #5a4634;
  background: #241c16; border-radius: 10px; cursor: pointer;
}
.faction b { font-size: 1.1rem; }
.faction span { font-size: 0.88rem; color: #c9b7a2; }
.faction.sel { border-color: var(--f, #e8b84a); box-shadow: inset 0 0 0 1px var(--f, #e8b84a); }
.primary {
  background: #c45c26; border: 0; border-radius: 12px; padding: 14px 28px;
  font-size: 1.15rem; cursor: pointer; color: #fff8ee;
}
.primary:active { transform: scale(0.98); }
.hint { color: #b9a48c; font-size: 0.92rem; margin-top: 0.9rem; }

#game { display: flex; flex-direction: column; }
#hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px max(10px, env(safe-area-inset-left));
  gap: 10px; background: #14100c; border-bottom: 1px solid #3a2c22;
  min-height: 52px; flex-shrink: 0;
}
.hud-left, .hud-right { display: flex; align-items: center; gap: 12px; }
.hud-mid { text-align: center; }
.stat .k { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b9a48c; }
.stat .v { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
#ridgeLamp { font-size: 0.85rem; color: #d7b07a; }
#ridgeLamp b { display: block; color: #f3e6d4; font-size: 1rem; }
#waveLamp { font-size: 0.9rem; margin-top: 2px; }
.ghost, .pace select {
  background: #2a221c; border: 1px solid #5a4634; border-radius: 8px;
  padding: 6px 10px; color: #f3e6d4;
}
.pace { font-size: 0.78rem; color: #b9a48c; display: flex; align-items: center; gap: 6px; }

#field { flex: 1 1 auto; width: 100%; display: block; background: #3d2a18; touch-action: none; }

#banner {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(20,16,12,0.88); padding: 14px 22px; border-radius: 12px;
  border: 1px solid #e8b84a; font-size: 1.3rem; pointer-events: none;
}
#game { position: relative; }

#dock {
  display: grid; grid-template-columns: minmax(280px, 38%) 1fr;
  gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #120e0b; border-top: 1px solid #3a2c22; flex-shrink: 0;
  max-height: 38vh;
}
.dock-title { font-size: 0.78rem; color: #d7b07a; margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
#yardHint { color: #b9a48c; text-transform: none; letter-spacing: 0; margin-left: 8px; }
#yard {
  display: grid; grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr); gap: 3px; min-height: 150px; height: calc(38vh - 48px);
}
.cell {
  border: 1px solid #3f3126; background: #1c1612; border-radius: 5px;
  position: relative; min-height: 24px;
}
.cell.front { background: #231a14; }
.cell.on { outline: 2px solid #e8b84a; outline-offset: -2px; }
.cell .chip {
  position: absolute; inset: 2px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; color: #fff8ee; overflow: hidden;
}

.econ-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.econ {
  background: #2a221c; border: 1px solid #5a4634; border-radius: 8px;
  padding: 8px 10px; font-size: 0.86rem; cursor: pointer;
}
.econ:disabled { opacity: 0.4; }
.econ.danger { border-color: #8a3a28; }
#shop {
  display: flex; flex-wrap: wrap; gap: 6px; overflow: auto;
  max-height: calc(38vh - 78px); -webkit-overflow-scrolling: touch;
}
.unit {
  width: 86px; min-height: 64px; padding: 6px;
  background: #1c1612; border: 1px solid #4a382c; border-radius: 8px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  cursor: pointer; text-align: left;
}
.unit .nm { font-size: 0.82rem; font-weight: 700; }
.unit .meta { font-size: 0.7rem; color: #c9b7a2; }
.unit.sel { border-color: #e8b84a; box-shadow: inset 0 0 0 1px #e8b84a; }
.unit.lock { opacity: 0.38; }
.unit.doc { box-shadow: none; }

@media (max-height: 700px) {
  h1 { font-size: 2.4rem; }
  #dock { max-height: 42vh; }
}