/* Team-facing tool: plain, readable on a phone propped against a wall. */
:root {
  --ink: #1d2433; --muted: #6b7385; --line: #dde1ea; --bg: #f6f7fa;
  --blue: #1295d8; --good: #18b269; --bad: #e5484d;
  font-family: system-ui, sans-serif; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
header #who { margin-left: auto; color: var(--muted); }
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.3rem; }
.hidden { display: none !important; }

button { font: inherit; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; cursor: pointer; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button.danger { color: var(--bad); margin-top: 2rem; }
button.link { border: 0; background: none; color: var(--blue); padding: 0; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1rem; }

#move-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
button.move { width: 100%; text-align: left; display: grid; gap: .2rem; }
button.move .name { font-weight: 600; }
button.move .meta { color: var(--muted); font-size: .85rem; }

form { display: grid; gap: .6rem; }
label { display: grid; gap: .2rem; font-size: .9rem; color: var(--muted); }
input, select { font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: .4rem; color: var(--ink); background: #fff; }
fieldset { border: 1px solid var(--line); border-radius: .5rem; display: grid; gap: .6rem; }

#status { margin: 0; padding: .5rem 1rem; min-height: 2.2rem; color: var(--muted); }
#status.good { color: var(--good); }
#status.bad { color: var(--bad); }

.runbar { margin-bottom: .5rem; }
#stage { width: 100%; height: 70vh; min-height: 20rem; background: #000; border-radius: .5rem; overflow: hidden; }
#stage wikimoves-player { display: block; width: 100%; height: 100%; }