/* Pig Shove — a platform, some holes, and four pigs who all shove differently. */
:root {
  --ink: #eef1f8;
  --dim: #99a2bb;
  --bg: #12141f;
  --panel: #1d2233;
  --edge: #2e3550;
  --hot: #ff7a3d;
  --good: #6ee7a0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at 50% 0%, #232941 0%, var(--bg) 70%);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--hot); color: #17110c;
  padding: .6rem 1rem; border-radius: 0 0 .6rem 0; z-index: 20; font-weight: 700;
}
.skip-link:focus { left: 0; }

.bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-bottom: 1px solid var(--edge);
}
.bar h1 { font-size: 1.15rem; margin: 0; }
.home { color: var(--dim); text-decoration: none; font-size: .9rem; }
.home:hover { color: var(--ink); }
.tag { margin: 0 0 0 auto; color: var(--dim); font-size: .8rem; }

main { padding: 1rem; display: flex; justify-content: center; }
.screen { display: none; width: 100%; max-width: 1000px; }
.screen.active { display: block; }

.panel {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 1rem;
  padding: 1.2rem 1.4rem; margin: 0 auto; max-width: 780px;
}
.panel h2 { margin: 0 0 .3rem; }
.panel h3 { margin: 1.2rem 0 .5rem; font-size: 1rem; color: var(--dim); }
.lede { margin: 0 0 .4rem; color: var(--dim); }
.hint { color: var(--dim); font-size: .88rem; margin: .8rem 0 0; }
kbd {
  background: #0d1020; border: 1px solid var(--edge); border-bottom-width: 2px;
  border-radius: .3rem; padding: 0 .35rem; font: 600 .85em/1.4 ui-monospace, monospace;
}

/* ---- picking a pig ---- */
.pigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.pig {
  background: #161a2a; border: 2px solid var(--edge); border-radius: .8rem;
  padding: .7rem; text-align: left; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; gap: .25rem; font: inherit;
}
.pig:hover { border-color: #47506f; }
.pig.on { border-color: var(--hot); background: #241d22; }
.pig .who { font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; gap: .4rem; }
.pig .dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.pig .says { color: var(--dim); font-size: .82rem; font-style: italic; }
.pig .mv { color: var(--dim); font-size: .8rem; }
.pig .mv b { color: var(--ink); font-weight: 700; }
.pig .always { color: #ffd36e; }
.pig .always b { color: #ffd36e; }

.modes { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn {
  background: #222941; color: var(--ink); border: 1px solid var(--edge);
  border-radius: .7rem; padding: .6rem 1rem; font: 600 1rem/1 inherit; cursor: pointer;
}
.btn:hover { background: #2b3352; }
.btn.primary { background: var(--hot); border-color: var(--hot); color: #1a1006; }
.btn.primary:hover { background: #ff8e59; }
.btn.ghost { background: none; border-color: transparent; color: var(--dim); }
.btn.ghost:hover { color: var(--ink); }

/* ---- the arena ---- */
#s-play { display: none; flex-direction: column; align-items: center; gap: .6rem; }
#s-play.active { display: flex; }
canvas {
  background: #0c0e18; border: 1px solid var(--edge); border-radius: 1rem;
  width: 100%; max-width: 960px; height: auto; touch-action: none; display: block;
}
.hud { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; width: 100%; }
.card {
  background: var(--panel); border: 1px solid var(--edge); border-radius: .6rem;
  padding: .35rem .6rem; min-width: 128px;
}
.card.out { opacity: .35; }
.card .n { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .85rem; }
.card .n .dot { width: 10px; height: 10px; border-radius: 50%; }
.card .cds { display: flex; gap: .25rem; margin-top: .25rem; }
.card .cd {
  flex: 1; height: 6px; border-radius: 3px; background: #0d1020; overflow: hidden;
}
.card .cd i { display: block; height: 100%; background: var(--good); width: 100%; }
.card .wins { color: var(--dim); font-size: .75rem; }

.say {
  margin: 0; min-height: 1.5em; font-weight: 700; color: var(--hot);
}
.score { display: flex; gap: .6rem; flex-wrap: wrap; margin: .8rem 0; }

/* ---- touch ---- */
.touch { display: none; width: 100%; max-width: 960px; justify-content: space-between; align-items: center; }
.touch.on { display: flex; }
.stick {
  width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--edge);
  background: #161a2a; position: relative; touch-action: none;
}
.stick span {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--hot);
}
.tbtns { display: flex; gap: .7rem; }
.tbtn {
  width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--edge);
  background: #222941; color: var(--ink); font: 800 1.3rem/1 inherit; cursor: pointer;
}
.tbtn:active { background: var(--hot); color: #1a1006; }

@media (max-width: 620px) {
  .bar h1 { font-size: 1rem; }
  .panel { padding: 1rem; }
}

/* ---- filling the screen ----
   The canvas is capped at 960 so it stays crisp on a page; in full screen
   there is no reason to cap it, and the arena should take the room it is
   given. */
body.full { display: flex; flex-direction: column; }
body.full .bar { padding: .35rem .8rem; }
body.full main { flex: 1; padding: .4rem; }
body.full #s-play.active { height: 100%; justify-content: center; }
body.full .hud .card { padding: .25rem .5rem; min-width: 110px; }

/* ---- waiting for somebody online ---- */
.queue { text-align: center; max-width: 520px; }
.waitpig { font-size: 3.4rem; line-height: 1; margin: 1rem 0; }
.waitpig span { display: inline-block; animation: shuffle 1.4s ease-in-out infinite; }
@keyframes shuffle {
  0%, 100% { transform: translateX(-14px) rotate(-6deg); }
  50%      { transform: translateX(14px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .waitpig span { animation: none; } }

/* ---- spending your kills ---- */
.purse {
  margin: .2rem 0 1rem; font-weight: 800; color: #ffd36e;
}
#purse-line { display: flex; align-items: center; gap: .6rem; }
#purse { color: #ffd36e; font-weight: 700; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tabs .tab { display: flex; align-items: center; gap: .4rem; padding: .45rem .7rem; font-size: .9rem; }
.tabs .tab .dot { width: 11px; height: 11px; border-radius: 50%; }
.tabs .tab.on { border-color: var(--hot); background: #241d22; }
.ups { display: flex; flex-direction: column; gap: .5rem; }
.up {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .3rem .8rem; background: #161a2a; border: 1px solid var(--edge);
  border-radius: .7rem; padding: .6rem .8rem;
}
.up.own { border-color: #7a6320; background: #1d1a14; }
.up-t { font-weight: 700; }
.up-b { color: var(--dim); font-size: .85rem; grid-column: 1; }
.up .btn { grid-row: 1 / span 2; grid-column: 2; min-width: 96px; white-space: nowrap; }
.up .btn[disabled] { opacity: .45; cursor: default; }
.pips { color: #ffd36e; letter-spacing: .12em; font-size: .8rem; margin-left: .3rem; }
.pig .bought { color: #ffd36e; font-size: .78rem; font-weight: 700; }
.where { background: #0d1020; border: 1px solid var(--edge); border-radius: .6rem;
         padding: .6rem; word-break: break-all; }
.where b { color: var(--good); }

/* ---- settings ---- */
.up.pick { cursor: pointer; }
.up.pick:hover { border-color: #47506f; }
.up.on { border-color: var(--hot); background: #241d22; }
.up .tick { color: var(--hot); font-weight: 800; }
.warn { background: #241d14; border: 1px solid #7a6320; border-radius: .6rem;
        padding: .6rem .7rem; color: #e8d6a8; }
.warn b { color: #ffd36e; }

/* ==========================================================
   On a phone
   ========================================================== */
/* The arena and its controls are one thing, so the controls can sit on top
   of the picture. Underneath it means off the bottom of the screen. */
.stage canvas { width: 100%; height: auto; display: block; }

.touch { position: absolute; inset: 0; display: none; }
.touch.on { display: block; }
/* Nothing here should ever scroll, zoom, select or pop up a menu. */
.touch, .pad, .tbtn, .stick {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* the left half is one big thumb pad */
.pad { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; }
.stick {
  position: absolute; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%; border: 2px solid rgba(160,175,220,.5);
  background: rgba(20,24,40,.42);
}
.stick span {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: var(--hot); box-shadow: 0 0 18px rgba(255,122,61,.5);
}

.tbtns {
  position: absolute; right: 2.5%; bottom: 6%;
  display: flex; gap: .8rem; align-items: flex-end;
}
.tbtn {
  width: 86px; height: 86px; border-radius: 50%;
  border: 2px solid rgba(160,175,220,.5); background: rgba(24,29,48,.62);
  color: var(--ink); font: 800 1.2rem/1 inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.tbtn i { font-style: normal; font-size: .58rem; letter-spacing: .02em; color: var(--dim); }
.tbtn:active { background: var(--hot); color: #1a1006; }
.tbtn.cool { opacity: .4; }

.turnme {
  position: absolute; inset: auto 0 8% 0; margin: 0; text-align: center;
  font-weight: 800; color: #ffd36e; line-height: 1.4;
  text-shadow: 0 2px 8px #000;
}

/* ---- filling the screen on a phone ----
   iPhones will not do requestFullscreen at all, so "full" is also a plain CSS
   mode: the page furniture goes away and the arena takes the viewport. It is
   the same class either way, so one button does both. */
body.full .bar, body.full .say, body.full #quit { display: none; }
body.full main { padding: 0; height: 100dvh; }
body.full #s-play.active { height: 100dvh; justify-content: center; gap: 0; }
body.full .hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3; justify-content: center;
  padding: calc(env(safe-area-inset-top) + .2rem) .4rem .2rem;
  background: linear-gradient(#0b0e18cc, #0b0e1800);
}
body.full .tbtns { bottom: calc(6% + env(safe-area-inset-bottom)); }

@media (pointer: coarse) {
  /* A phone never wants the page to bounce or rubber-band under the game. */
  html, body { overscroll-behavior: none; }
  body.playing { overflow: hidden; }
  .bar { padding: .4rem .6rem; }
  .hud .card { min-width: 92px; padding: .2rem .4rem; }
  .hud .card .n { font-size: .72rem; }
  .hud .card .wins { font-size: .62rem; }
  .panel { padding: .9rem; }
  .tbtn { width: 78px; height: 78px; }
}

/* ---- making the arena fit the screen it is on ----
   The picture is 960x640, so exactly 3:2. Left to itself "width: 100%" makes
   it as wide as the page and then as TALL as that demands — which on a phone
   held sideways is half again taller than the screen, so half the platform is
   below the fold and the controls are nowhere. It has to be bounded by the
   HEIGHT as well, and the stage has to shrink with it, because the buttons
   are positioned against the stage and would otherwise float off the side. */

@media (pointer: coarse) {
  .stage { width: min(100%, calc((100dvh - 7.5rem) * 1.5)); }
}
/* \u2b1b THE ONE PLACE THE ARENA IS SIZED.
   The picture is 960x640, so exactly 3:2. Left to itself, "width: 100%" makes
   it as wide as the page and then as TALL as that demands \u2014 which on a phone
   held sideways is half again taller than the screen, so half the platform is
   below the fold and the controls are nowhere. So it is bounded by the HEIGHT
   too, and the stage shrinks with it, because the buttons are positioned
   against the stage and would otherwise float off the side of the picture.
   Three rules used to say this in three different ways and a fourth, left
   over from the desktop work, quietly won and capped it at 369px. */
.stage {
  position: relative; line-height: 0; margin: 0 auto;
  width: min(100%, 960px);
}
@media (pointer: coarse) {
  .stage { width: min(100%, calc((100dvh - 8rem) * 1.5)); }
}
/* In full screen the HUD floats over the top of the picture rather than
   sitting above it, so the arena gets the whole height. */
body.full .stage { width: min(100vw, calc(100dvh * 1.5)); }
body.full main { display: flex; align-items: center; justify-content: center; }
body.full, body.full main { overflow: hidden; }

/* the thumb-knob was swallowing its own ring */
.stick span { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.up.shut { opacity: .45; cursor: default; }
.pig .trained { color: #6ee7a0; font-size: .78rem; font-weight: 700; }
/* the once-a-round special: a light that is on or off, not a bar */
.card .cd.sp { flex: 0 0 14px; background: #2a2440; }
.card .cd.sp i { background: #ffd36e; width: 100%; }
.card .cd.sp.spent i { background: #3a3350; }
.tbtn.star { border-color: rgba(255,211,110,.6); }
.tbtn.star b { color: #ffd36e; }
.pig .star { color: #ffd36e; font-size: .8rem; }
.pig .star b { color: #ffd36e; }