/* ------------------------------------------------------------------
   pokember.borbola.me
   Mobile-first. Almost everyone arrives by scanning a QR with a phone.
   ------------------------------------------------------------------ */

:root{
  --red:#c1272d;
  --red-dark:#8e1a1f;
  --blue:#1f4b99;
  --ink:#1a1d22;
  --ink-soft:#4a5058;
  --paper:#fdfbf7;
  --paper-2:#f3eee4;
  --line:#e4dccd;
  --web:#fff;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#ece8e1;
    --ink-soft:#a8a49c;
    --paper:#16181c;
    --paper-2:#1e2126;
    --line:#2c3037;
    --red:#e8474e;
    --blue:#5b8ae0;
    --web:#fff;
  }
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;

  /* faint web-ish texture in the corner, cheap and thematic */
  background-image:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--red) 7%, transparent) 0%, transparent 42%);
  background-repeat:no-repeat;
}

/* ---------- content ---------- */

.card{
  max-width:34rem;
  margin:0 auto;
  padding:
    calc(2.5rem + env(safe-area-inset-top))
    calc(1.35rem + env(safe-area-inset-right))
    2rem
    calc(1.35rem + env(safe-area-inset-left));
  position:relative;
  z-index:1;
}

h1{
  font-size:clamp(1.9rem, 8vw, 2.5rem);
  line-height:1.15;
  margin:0 0 1.1rem;
  letter-spacing:-.02em;
}

.lead{
  font-size:1.16em;
  color:var(--ink);
}

p{margin:0 0 1.15rem}

strong{
  font-weight:650;
  color:var(--red);
}

.sign{
  margin-top:2rem;
  color:var(--ink-soft);
  font-style:italic;
}

.wave{display:inline-block}

/* ---------- scoreboard ---------- */

.board{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.5rem;
  font-size:.92em;
}
.board th,.board td{
  text-align:left;
  padding:.5rem .55rem;
  border-bottom:1px solid var(--line);
}
.board th{
  font-size:.78em;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
.board .num{text-align:right}
.board .mono{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-weight:600;
  color:var(--red);
  letter-spacing:.06em;
}
.board .is-lost{opacity:.5}
.board .is-lost .mono{color:var(--ink-soft)}

a{color:var(--red)}
a:hover{text-decoration:none}

/* ---------- back-office ---------- */

.card-wide{max-width:56rem}

.admin-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.admin-head h1{margin-bottom:.6rem}

.admin-block{margin:0 0 2.2rem}
.admin-block h2{
  font-size:1.05rem;margin:0 0 .4rem;
  letter-spacing:-.01em;
}

.hint{font-size:.84em;color:var(--ink-soft);margin:0 0 .6rem}
.hint code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.94em;
}

textarea,.cell-input,.admin-login input{
  width:100%;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.88rem;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:.35rem;
  padding:.5rem .6rem;
}
textarea{resize:vertical;line-height:1.5}
textarea:focus,.cell-input:focus,.admin-login input:focus{
  outline:2px solid var(--red);outline-offset:-1px;
}

.cell-input{padding:.3rem .4rem;font-size:.82rem;min-width:8rem}
.cell-input.is-saving{opacity:.5}

.admin-actions{display:flex;align-items:center;gap:.8rem;margin-top:.6rem}

.primary-btn{
  background:var(--red);color:#fff;
  border:0;border-radius:.35rem;
  padding:.5rem 1rem;font-size:.9rem;font-weight:600;
  cursor:pointer;
}
.primary-btn:disabled{opacity:.5;cursor:default}

.link-btn{
  background:none;border:0;padding:0;
  color:var(--red);font-size:.88rem;cursor:pointer;
  text-decoration:underline;
}
.link-btn:disabled{opacity:.4;cursor:default;text-decoration:none}

.admin-login{max-width:20rem}
.admin-login label{
  display:block;font-size:.8em;color:var(--ink-soft);margin:0 0 .3rem;
}
.admin-login button{margin-top:.7rem;width:100%}
.admin-error{color:var(--red);font-size:.86em;margin:.6rem 0 0}

.board td .cell-input{margin:0}

/* ---------- footer ---------- */

.foot{
  max-width:34rem;
  margin:0 auto;
  padding:0 1.35rem calc(2.5rem + env(safe-area-inset-bottom));
  position:relative;
  z-index:1;
}
.foot p{
  margin:0;
  font-size:.8em;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:1rem;
}

/* ------------------------------------------------------------------
   swing layer
   Everything here is transform/opacity only so it stays on the
   compositor and never triggers layout.
   ------------------------------------------------------------------ */

.swing-layer{
  position:fixed;
  inset:0;
  z-index:5;
  overflow:hidden;
  pointer-events:none;   /* the hero re-enables it on itself */
}

/* the rope + hero assembly; rotates about its own top-left = the anchor */
.rig{
  position:absolute;
  top:0;
  transform-origin:0 0;
  will-change:transform,opacity;
}

/* Pivots at the anchor: carries the release swing-away and the fade. */
.rope-pivot{
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
  will-change:transform,opacity;
}

/* Pivots at the far (hand) end so it can be *shot* up towards the anchor. */
.rope{
  position:absolute;
  top:0;
  left:-1.5px;
  width:3px;
  transform-origin:50% 100%;
  background:var(--web);
  border-radius:0 0 2px 2px;
  opacity:.96;
  filter:drop-shadow(0 0 1px rgba(14,17,20,.72));
}

/* hero hangs at the end of the rope; carries its own lagging rotation */
.hero{
  position:absolute;
  will-change:transform;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* The SVG carries intrinsic width/height attributes. Without this it renders
   at that intrinsic size and overflows the scaled .hero box, which puts the
   drawn hand nowhere near the transform-origin the rope ends at. */
.hero svg{display:block;width:100%;height:100%}

/* No prefers-reduced-motion rule here on purpose: swing.js treats it as the
   default but lets an explicit toggle override it in both directions, and a
   display:none here would silently win over that choice. */

/* ---------- animation on/off ---------- */

.anim-control{
  position:fixed;
  top:calc(.6rem + env(safe-area-inset-top));
  right:calc(.6rem + env(safe-area-inset-right));
  z-index:10;
  display:flex;
  align-items:center;
  gap:.45rem;
}

.anim-label{
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  user-select:none;
  white-space:nowrap;
}

.anim-toggle{
  position:relative;
  width:2.5rem;
  height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;

  line-height:1;
  background:var(--paper-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  padding:0;

  -webkit-tap-highlight-color:transparent;
  transition:opacity .18s ease, transform .18s ease;
}
.anim-toggle:hover{transform:scale(1.06)}
.anim-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.anim-icon{
  width:1.25rem;
  height:1.25rem;
  display:block;
  overflow:visible;
}

/* off state: dimmed, with a line struck through the spider */
.anim-toggle.is-off{opacity:.55}
.anim-toggle.is-off::after{
  content:"";
  position:absolute;
  left:22%;
  right:22%;
  height:1.5px;
  background:var(--ink);
  transform:rotate(-45deg);
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}