/* Graphwar — light page, dark battlefield. Teams are the site's teal vs a warm amber. */
:root{
  --bg:#e9e9e7;
  --surface:#ffffff;
  --ink:#141414;
  --muted:#6b6b6b;
  --line:#e2e2df;
  --teal:#19c2c2;
  --teal-soft:#d9f4f6;
  --teal-ink:#0c7d86;
  --amber:#ef8b2c;
  --amber-ink:#a8530b;
  --field:#0f1b24;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  display:flex;justify-content:center;
  padding:14px;
}

#app{
  width:100%;max-width:900px;
  display:flex;flex-direction:column;gap:12px;
  padding-top:max(0px,env(safe-area-inset-top));
}

/* ===== Header ===== */
.bar{display:flex;align-items:center;gap:10px}
.wordmark{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1;flex:1}

.btn{
  font-family:inherit;font-size:14px;font-weight:700;
  background:var(--ink);color:#fff;
  border:2px solid var(--ink);border-radius:999px;
  padding:10px 20px;cursor:pointer;
  transition:opacity .15s ease,transform .1s ease,background .15s ease,color .15s ease;
}
.btn:hover:not(:disabled){opacity:.85}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--ink);color:#fff;opacity:1}
.btn.small{font-size:12px;padding:8px 15px}

.icon-btn{
  position:relative;
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;
  border:2px solid var(--ink);border-radius:11px;
  background:transparent;color:var(--ink);
  font-family:inherit;font-size:15px;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.icon-btn:hover{background:var(--ink);color:#fff}
/* Muted = struck-through note; a 🔇 emoji renders in colour and breaks the row. */
.icon-btn.off{opacity:.45}
.icon-btn.off::after{
  content:'';position:absolute;left:50%;top:50%;
  width:19px;height:2px;border-radius:2px;background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* ===== Turn strip ===== */
.turnbar{
  display:flex;align-items:center;gap:10px;
  min-height:26px;
}
.roster{display:flex;gap:5px;flex:1}
.roster.right{justify-content:flex-end}
.pip{
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;
  border:2px solid transparent;
}
.pip.a{background:var(--teal-ink)}
.pip.b{background:var(--amber-ink)}
.pip.dead{background:#c9c9c6;color:#f3f3f1}
.pip.active{border-color:var(--ink);transform:scale(1.15)}
.turn{
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;white-space:nowrap;
}
.turn.a{color:var(--teal-ink)}
.turn.b{color:var(--amber-ink)}

/* ===== Battlefield ===== */
.field-wrap{position:relative;width:100%}
#field{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;
  background:var(--field);
  border-radius:14px;
}

.field-overlay{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding:14px;border-radius:14px;
  background:rgba(15,27,36,.82);
  backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
.field-overlay.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.field-overlay .card{
  width:min(400px,100%);max-height:100%;overflow:auto;
  background:var(--surface);
  border-radius:18px;padding:22px 20px;
  display:flex;flex-direction:column;gap:12px;align-items:center;
  text-align:center;
}
.field-overlay h2{font-size:clamp(21px,5vw,27px);font-weight:900;letter-spacing:-.02em}
.field-overlay h2.a{color:var(--teal-ink)}
.field-overlay h2.b{color:var(--amber-ink)}
.field-overlay p{font-size:13px;line-height:1.55;color:var(--muted)}
.choices{display:flex;flex-direction:column;gap:8px;width:100%}
.choices.row{flex-direction:row;justify-content:center;flex-wrap:wrap}
.choices .btn{width:100%}
.choices.row .btn{width:auto}

/* ===== Controls ===== */
.controls{
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.fn-row{display:flex;align-items:center;gap:9px}
.fn-label{
  font-size:19px;font-weight:800;font-style:italic;
  font-family:'Iowan Old Style','Palatino Linotype',Georgia,serif;
  flex:none;
}
.fn-input{
  flex:1;min-width:0;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:16px;                     /* 16px keeps iOS from zooming on focus */
  padding:11px 13px;
  border:2px solid var(--line);border-radius:11px;
  background:#fbfbfa;color:var(--ink);
  transition:border-color .15s ease;
}
.fn-input:focus{outline:none;border-color:var(--teal)}
.fn-input.bad{border-color:#d9481f}
.btn.fire{flex:none;padding:11px 24px}

.opt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:flex;border:2px solid var(--line);border-radius:11px;overflow:hidden;flex:none}
.seg-btn{
  font-family:inherit;font-size:14px;
  width:44px;height:38px;
  border:none;background:transparent;color:var(--muted);
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.seg-btn:hover{background:#f1f1ef}
.seg-btn.on{background:var(--ink);color:#fff}

.angle{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px}
.angle span{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.angle b{color:var(--ink);font-size:12px}
.angle input[type=range]{width:100%;accent-color:var(--teal-ink)}

.examples{display:flex;gap:6px;flex-wrap:wrap}
.ex{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:11px;
  background:#f4f4f3;color:#4a4a4a;
  border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.ex:hover{background:var(--ink);color:#fff}

.msg{font-size:12px;line-height:1.4;min-height:17px;color:var(--muted)}
.msg.err{color:#d9481f;font-weight:600}
.msg.good{color:var(--teal-ink);font-weight:600}

/* ===== Modal ===== */
.modal{
  position:fixed;inset:0;z-index:30;
  display:grid;place-items:center;padding:16px;
  background:rgba(20,20,20,.55);
  backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
.modal.hidden{display:none}
.modal-card{
  width:min(520px,100%);max-height:88vh;overflow:auto;
  background:var(--surface);border-radius:20px;
  padding:24px 22px;
  display:flex;flex-direction:column;gap:13px;
}
.modal-card h2{font-size:21px;font-weight:900;letter-spacing:-.02em}
.modal-card h3{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.modal-card ol{display:flex;flex-direction:column;gap:9px;padding-left:20px}
.modal-card li{font-size:13.5px;line-height:1.6;color:#3d3d3d}
.modal-card code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;background:#f2f2f0;padding:2px 5px;border-radius:5px;
}
.fnlist{font-size:12.5px;line-height:2;color:#3d3d3d}
.modal-card .tip{
  font-size:12.5px;line-height:1.6;color:var(--teal-ink);
  background:var(--teal-soft);padding:11px 13px;border-radius:11px;
}
.modal-card .btn{align-self:flex-start}

/* ===== Footer ===== */
.foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);
  padding-bottom:max(4px,env(safe-area-inset-bottom));
}
.foot a{color:var(--ink);text-decoration:none;font-weight:700}
.foot a:hover{color:var(--teal-ink)}

/* On a phone the 16:9 canvas is only ~210px tall — far too short to hold the mode
   picker, which would silently scroll inside the overlay and hide most of the
   options. Below this width the field overlays become full-viewport instead. */
@media (max-width:700px){
  .field-overlay{
    position:fixed;inset:0;
    z-index:25;border-radius:0;padding:16px;
  }
}

@media (max-width:520px){
  body{padding:10px}
  .wordmark{font-size:21px}
  /* Keep "y =" beside the input and drop Fire onto its own row. */
  .fn-row{flex-wrap:wrap}
  .fn-label{order:1}
  .fn-input{order:2;flex:1 1 auto}
  .btn.fire{order:3;flex:1 1 100%}
  .foot .hint{display:none}
}