:root { --wind: #3d7fd9; --sun: #f0a020; --ink: #26313d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe3ff; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: pointer; }

/* the pads are a tap strip along the bottom showing each half's owner and strength; the hill above takes taps too */
#pads { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; display: flex; touch-action: none; cursor: pointer; }
.pad { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: max(1rem, env(safe-area-inset-bottom)); transition: background .15s; }
.pad + .pad { border-left: 2px dashed rgba(255,255,255,.55); }
.pad.wind.on { background: rgba(61,127,217,.12); }
.pad.sun.on { background: rgba(240,160,32,.12); }
.pad .label { font-weight: 800; font-size: clamp(1rem, 4vw, 1.6rem); letter-spacing: .04em; padding: .2rem .8rem;
  border-radius: 1rem; background: rgba(255,255,255,.75); }
.pad.wind .label { color: var(--wind); }
.pad.sun .label { color: #b26c00; }
.meter { width: min(10rem, 38vw); height: .6rem; margin-top: .4rem; border-radius: .3rem; background: rgba(255,255,255,.6); overflow: hidden; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; }
.pad.wind .meter i { background: var(--wind); }
.pad.sun .meter i { background: var(--sun); }
.meter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 85%; width: 2px; background: #c0392b; }

#hud { position: absolute; top: max(.6rem, env(safe-area-inset-top)); left: 0; right: 0; display: flex; gap: .8rem;
  justify-content: center; align-items: center; pointer-events: none; font-weight: 700; }
#hud > span { background: rgba(255,255,255,.75); padding: .2rem .6rem; border-radius: 1rem; }
#hud .steady { width: 6rem; height: .9rem; padding: 0; position: relative; overflow: hidden; }
#mute { position: absolute; z-index: 6; top: max(.5rem, env(safe-area-inset-top)); right: max(.5rem, env(safe-area-inset-right));
  margin: 0; padding: .35rem .55rem; font-size: 1.2rem; line-height: 1; border-radius: 1rem; background: rgba(255,255,255,.8); color: var(--ink); }
#mute[aria-pressed="true"] { opacity: .7; }
#hud .steady i { position: absolute; inset: 0 auto 0 0; width: 0; background: #4caf50; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 1.5rem; background: rgba(255,250,240,.92); z-index: 5; pointer-events: none; }
.screen button { pointer-events: auto; }
.screen.hidden { display: none; }
.screen h1 { font-size: clamp(2rem, 9vw, 3.4rem); margin: 0 0 .6rem; }
.screen h2 { font-size: clamp(1.8rem, 8vw, 3rem); margin: 0 0 .6rem; }
.screen p { max-width: 30rem; line-height: 1.45; margin: .3rem 0; }
.w { color: var(--wind); }
.s { color: #c77d00; }
button { margin-top: 1.2rem; font: inherit; font-weight: 800; font-size: 1.2rem; padding: .8rem 1.8rem; border: 0;
  border-radius: 2rem; background: var(--ink); color: #fff; cursor: pointer; }
button:active { transform: scale(.97); }

/* Fastest homes */
.screen { overflow-y: auto; justify-content: safe center; }
.screen form, .screen input, #start { pointer-events: auto; }
#start { cursor: pointer; }
.hidden { display: none !important; }
#submit { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: .8rem; }
#submit input { font: inherit; font-size: 1.05rem; padding: .7rem 1rem; width: 11rem; border: 2px solid #cdbf9f; border-radius: 2rem;
  background: #fff; color: var(--ink); -webkit-user-select: text; user-select: text; }
#submit button { margin-top: 0; font-size: 1rem; padding: .75rem 1.2rem; background: var(--wind); }
.note { font-size: .9rem; opacity: .75; min-height: 1em; }
.board { margin-top: 1rem; width: min(20rem, 90vw); background: rgba(255,255,255,.7); border-radius: 1rem; padding: .6rem 1rem .4rem; }
.board h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: #b26c00; }
.board ol { margin: 0; padding: 0 0 0 1.6rem; text-align: left; max-height: 30vh; overflow-y: auto; }
.board li { padding: .12rem 0; font-variant-numeric: tabular-nums; }
.board li span { display: inline-flex; }
.board li .nick { min-width: 9rem; }
.board li .time { font-weight: 700; }
.board li.first .nick::after { content: " ★"; color: var(--sun); }
.board li.mine { background: rgba(61,127,217,.15); border-radius: .4rem; }
.board ol:empty { display: none; }