:root {
  --bg: #eef4f7;
  --panel: #ffffff;
  --ink: #17212b;
  --muted: #677887;
  --line: #cbd8df;
  --accent: #234e70;
  --ok: #206a42;
  --warn: #9a5a00;
  --bad: #8d2727;
}

* { box-sizing: border-box; }
body { margin: 0; padding-bottom: 2.8rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .25rem; font-size: 1.35rem; }
h2 { font-size: 1rem; margin-bottom: .75rem; }
.topbar { position: sticky; top: 0; z-index: 45; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.25rem; background: #d9e8ee; border-bottom: 1px solid var(--line); }
.topbar p { margin-bottom: 0; color: var(--muted); }
.topActions { display: flex; gap: .65rem; align-items: end; }
.inlineControl { font-size: .85rem; color: var(--muted); }
.inlineControl select { display: block; min-width: 150px; margin-top: .2rem; }

.stickyPanel { position: sticky; top: 74px; z-index: 35; display: grid; grid-template-columns: 1fr 1.25fr 1fr 1.15fr; gap: .75rem; padding: .75rem 1rem; background: rgba(238,244,247,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(4px); }
.layout { padding: 1rem; }
.mapPanel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mapPanel { position: relative; overflow: auto; min-height: 680px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; }
canvas { display: block; cursor: crosshair; max-width: none; }
.card { padding: .85rem; }
.compactCard { min-width: 0; }
.compactCard h2 { margin-bottom: .45rem; }
.metric { display: flex; justify-content: space-between; gap: .75rem; padding: .24rem 0; border-bottom: 1px solid #eef2f4; font-size: .9rem; }
.metric:last-child { border-bottom: 0; }
.metric span, .hint { color: var(--muted); }
.metric strong { text-align: right; }
label { display: block; font-weight: 650; margin-bottom: .3rem; }
select, button, input { width: 100%; font: inherit; border-radius: 8px; border: 1px solid var(--line); padding: .5rem .6rem; background: white; }
button { margin-top: .55rem; background: var(--accent); color: white; border-color: var(--accent); cursor: pointer; font-weight: 650; }
button:disabled { background: #aeb9bf; border-color: #aeb9bf; cursor: not-allowed; }
.secondaryBtn { background: #ffffff; color: var(--accent); border-color: var(--accent); }
.buttonRow { display: grid; grid-template-columns: 1fr .75fr 2.6rem; gap: .5rem; align-items: end; }
.buttonRow button { margin-top: .25rem; }
.iconActionBtn { width: 2.55rem; height: 2.55rem; padding: 0; font-size: 1.15rem; background: #fff; color: var(--accent); border-color: var(--accent); }
.hint { font-size: .86rem; line-height: 1.32; margin-bottom: 0; }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.formGrid label { font-size: .86rem; color: var(--muted); margin-bottom: 0; }
.formGrid input { margin-top: .2rem; }
.altitudeWarning { display: none; color: #fff; background: var(--bad); border-radius: 8px; padding: .35rem .45rem; margin-bottom: .45rem; font-weight: 750; font-size: .88rem; }
.altitudeWarning.show { display: block; }
.legend { display: grid; gap: .35rem; margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.swatch.forming { background: #d7eef7; border: 1px solid #82b9cb; }
.swatch.stable { background: #ffffff; border: 2px solid #526b7a; }
.swatch.decaying { background: #e9e9e9; border: 1px dashed #727272; }
.swatch.revealed { background: #fff6a4; border: 1px solid #a88a00; }
.lineSample { display: inline-block; width: 1.4rem; height: .18rem; background: #7fa3bd; margin-right: .4rem; vertical-align: middle; }
.competitor { border-top: 1px solid #eef2f4; padding: .45rem 0; font-size: .9rem; }
.competitor:first-child { border-top: 0; }
.competitor strong { display: inline-block; min-width: 2.5rem; }
.logCard ol { max-height: 380px; overflow: auto; padding-left: 1.1rem; margin-bottom: 0; }
.logCard li { margin-bottom: .45rem; color: var(--muted); font-size: .88rem; }

.modalBackdrop { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(10,20,30,.45); padding: 1rem; }
.modalBackdrop.open { display: grid; }
.modalCard { width: min(620px, 100%); background: var(--panel); border-radius: 14px; border: 1px solid var(--line); padding: 1rem; box-shadow: 0 12px 35px rgba(0,0,0,.22); }
.modalHeader, .offcanvasHeader { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modalHeader h2, .offcanvasHeader h2 { margin-bottom: 0; }
.iconBtn { width: 2.2rem; height: 2.2rem; padding: 0; margin: 0; border-radius: 50%; background: #fff; color: var(--ink); border-color: var(--line); font-size: 1.4rem; line-height: 1; }
.offcanvas { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(390px, 92vw); transform: translateX(102%); transition: transform .18s ease; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0,0,0,.16); padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .75rem; }
.offcanvas.open { transform: translateX(0); }

@media (max-width: 1180px) { .stickyPanel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  body { padding-bottom: 3.4rem; }
  .topbar { align-items: stretch; flex-direction: column; gap: .65rem; padding: .65rem .75rem; }
  .topbar h1 { font-size: 1.15rem; }
  .topbar p { font-size: .82rem; line-height: 1.25; }
  .topActions { align-items: stretch; flex-wrap: wrap; gap: .45rem; }
  .topActions > button, .topActions > label { flex: 1 1 44%; min-width: 0; }
  .inlineControl select { min-width: 0; }
  .stickyPanel { position: static; grid-template-columns: 1fr; padding: .55rem; gap: .55rem; }
  .compactCard { padding: .6rem; }
  .compactCard h2 { font-size: .92rem; margin-bottom: .3rem; }
  .metric { font-size: .82rem; padding: .16rem 0; }
  .hint { font-size: .8rem; }
  .layout { padding: .5rem; }
  .mapPanel { min-height: 62dvh; max-height: 68dvh; border-radius: 10px; }
  .formGrid { grid-template-columns: 1fr; }
  .bottomBar { font-size: .72rem; flex-direction: column; gap: .2rem; padding: .45rem .65rem; }
  .windIndicator { position: sticky; top: .45rem; left: .45rem; }
}
.weatherCard hr { border: 0; border-top: 1px solid #eef2f4; margin: .45rem 0; }
.resultCard p { margin: .5rem 0; color: var(--muted); }
.swatch.terrainField { background: linear-gradient(90deg, #cfe5a8, #ead58a, #d2aa73); border: 1px solid #9a8750; border-radius: 2px; }
.swatch.terrainForest { background: #5f8b5a; border: 1px solid #3e6640; border-radius: 2px; }
.swatch.terrainUrban { background: #a8a8a8; border: 1px solid #777; border-radius: 2px; }
.swatch.terrainLake { background: #87b7d6; border: 1px solid #5284a4; border-radius: 2px; }
.leaderboard { width: 100%; border-collapse: collapse; margin-top: .75rem; font-size: .88rem; }
.leaderboard th, .leaderboard td { border-bottom: 1px solid #eef2f4; padding: .42rem .35rem; text-align: left; }
.leaderboard th { color: var(--muted); font-weight: 750; }
.leaderboard .playerRow { background: #fff7d9; font-weight: 700; }
.resultCard { width: min(860px, 100%); }

.howToCard h3 { margin: .9rem 0 .35rem; font-size: .98rem; }
.howToCard p { color: var(--muted); line-height: 1.42; margin: .35rem 0; }
.bottomBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; background: #17212b; color: #fff; font-size: .9rem; box-shadow: 0 -2px 10px rgba(0,0,0,.14); }
.bottomBar a { color: #fff; font-weight: 750; text-decoration: none; }
.bottomBar a:hover { text-decoration: underline; }

.windIndicator { position: sticky; top: .75rem; left: .75rem; z-index: 25; width: fit-content; display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.14); pointer-events: none; }
.windArrow { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; background: #eef4f7; border: 1px solid var(--line); font-weight: 900; font-size: 1.15rem; transform-origin: center; }
.windText { font-size: .86rem; font-weight: 750; color: var(--accent); white-space: nowrap; }

/* v2.11: desktop drag-pan and mobile soaring HUD */
.iconLabel { display: none; }
.mobileHud, .mobileBottomInfo, .mobileControlBar { display: none; }
.mapPanel.dragPanning { cursor: grabbing; user-select: none; }
.mapPanel.dragPanning canvas { cursor: grabbing; }

.hudModalCard p { color: var(--muted); line-height: 1.38; margin: .45rem 0; }
.hudModalCard .miniMetric { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eef2f4; padding: .4rem 0; }
.hudModalCard .miniMetric strong { text-align: right; }
.hudModalCard ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--muted); }

@media (max-width: 760px) {
  body { padding-bottom: 6.7rem; overflow-x: hidden; }
  .topbar { flex-direction: row; align-items: center; gap: .4rem; padding: .38rem .5rem; min-height: 3rem; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar h1 { font-size: 1rem; margin: 0; white-space: nowrap; }
  .topbar p { display: none; }
  .topActions { flex: 0 0 auto; display: flex; align-items: center; gap: .28rem; flex-wrap: nowrap; }
  .topActions > button, .topActions > label { flex: 0 0 auto; min-width: 0; }
  .inlineControl { font-size: 0; margin: 0; }
  .inlineControl select { width: 5.6rem; min-width: 0; margin: 0; padding: .38rem .35rem; font-size: .74rem; }
  .topIconBtn { width: 2rem; height: 2rem; padding: 0; margin: 0; border-radius: 50%; display: inline-grid; place-items: center; }
  .topIconBtn .fullLabel { display: none; }
  .topIconBtn .iconLabel { display: inline; font-size: 1rem; line-height: 1; }

  .stickyPanel { display: none; }
  .layout { padding: 0; }
  .mapPanel { border-radius: 0; border-left: 0; border-right: 0; min-height: calc(100dvh - 9.7rem); max-height: calc(100dvh - 9.7rem); height: calc(100dvh - 9.7rem); }
  .windIndicator { display: none; }

  .mobileHud { display: block; position: sticky; left: 0; top: 0; z-index: 28; pointer-events: none; }
  .mobileHudRow { position: sticky; left: .35rem; right: .35rem; display: grid; gap: .35rem; width: calc(100vw - .7rem); pointer-events: none; }
  .topHud { top: .35rem; grid-template-columns: repeat(3, 1fr); }
  .bottomHud { top: calc(100dvh - 15.3rem); grid-template-columns: repeat(4, 1fr); margin-top: calc(100dvh - 16.4rem); }
  .navBox { margin: 0; padding: .35rem .3rem; min-height: 2.7rem; border-radius: 9px; background: rgba(255,255,255,.91); color: var(--ink); border: 1px solid rgba(23,33,43,.18); box-shadow: 0 2px 7px rgba(0,0,0,.14); display: flex; flex-direction: column; justify-content: center; gap: .08rem; pointer-events: auto; }
  .navBox span { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .navBox strong { font-size: .88rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mobileBottomInfo { display: block; position: fixed; left: 0; right: 0; bottom: 4.25rem; z-index: 72; background: #e8f0f4; border-top: 1px solid var(--line); }
  .mobileBottomInfo button { margin: 0; width: 100%; border-radius: 0; border: 0; background: #e8f0f4; color: var(--ink); padding: .38rem .55rem; display: grid; grid-template-columns: 1fr 1fr 1.3rem; gap: .4rem; align-items: center; font-size: .78rem; font-weight: 650; }
  .mobileBottomInfo span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobileControlBar { display: grid; position: fixed; left: 0; right: 0; bottom: 1.85rem; z-index: 72; grid-template-columns: 1.25fr 1fr .8fr .6fr; gap: .35rem; padding: .35rem .45rem; background: #f7fafb; border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
  .mobileControlBar button, .mobileControlBar select { margin: 0; min-height: 2rem; padding: .34rem .35rem; font-size: .82rem; }
  .mobileMcLabel { margin: 0; font-size: .64rem; color: var(--muted); font-weight: 750; }
  .mobileMcLabel select { margin-top: .1rem; width: 100%; }
  .bottomBar { min-height: 1.85rem; padding: .28rem .5rem; flex-direction: row; font-size: .68rem; align-items: center; }
  .bottomBar div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modalCard { max-height: 86dvh; overflow: auto; }
}


/* v2.12 mobile/control refinements */
.subtle { display: block; color: var(--muted); font-size: .76rem; font-weight: 500; line-height: 1.2; margin-top: .12rem; }
.mcChoiceList { display: grid; gap: .4rem; margin-top: .65rem; max-height: 44dvh; overflow: auto; }
.mcChoice { margin: 0; display: flex; justify-content: space-between; gap: .75rem; align-items: center; background: #fff; color: var(--ink); border-color: var(--line); text-align: left; }
.mcChoice span { color: var(--muted); font-size: .78rem; font-weight: 600; text-align: right; }
.mcChoice.active { border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(35,78,112,.18); }
.mobileMcBtn { margin: 0; text-align: center; }
#hudWind strong::before { content: '↑'; display: inline-block; margin-right: .2rem; transform: rotate(var(--wind-blow, 0deg)); transform-origin: center; font-weight: 900; }

@media (max-width: 760px) {
  .mapPanel { position: relative; }
  .mobileHud { position: absolute; inset: 0 0 auto 0; height: 100%; z-index: 28; pointer-events: none; }
  .mobileHudRow { position: absolute; left: .35rem; right: .35rem; width: auto; }
  .topHud { top: .35rem; }
  .bottomHud { top: auto; bottom: .45rem; margin-top: 0; }
  .mobileBottomInfo button { grid-template-columns: 1fr 1.3rem; padding: .55rem .6rem; line-height: 1.15; }
  .mobileBottomInfo #mobileTerrain { text-align: center; }
  .mobileBottomInfo #mobileLastMove { display: none; }
  .mobileControlBar { grid-template-columns: 1.25fr 1fr .8fr .6fr; }
  .mobileMcBtn { min-height: 2.45rem; }
  .windIndicator { display: none; }
}

/* v2.13: keep mobile nav boxes fixed to the viewport, not inside the scrollable canvas content. */
@media (max-width: 760px) {
  .mobileHud {
    display: block;
    position: fixed;
    inset: 3.15rem 0 6.85rem 0;
    height: auto;
    z-index: 80;
    pointer-events: none;
  }
  .mobileHudRow {
    position: fixed;
    left: .35rem;
    right: .35rem;
    width: auto;
    display: grid;
    gap: .35rem;
    pointer-events: none;
  }
  .topHud {
    top: 3.35rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .bottomHud {
    top: auto;
    bottom: 6.95rem;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0;
  }
  .navBox {
    pointer-events: auto;
  }
}