html[data-ui="zine"] body {
  background: #d9d4c6;
  color: #151515;
  font-family: "Courier Prime", Courier, monospace;
}

html[data-ui="zine"] .ui-switcher {
  border: 3px solid #111;
  border-radius: 0;
  background: #f6e52e;
  color: #111;
  box-shadow: 4px 4px 0 #111;
  font-family: "Courier Prime", Courier, monospace;
  transform: rotate(1deg);
}

.zine-shell {
  --z-black: #111;
  --z-paper: #eee9dc;
  --z-white: #fffef5;
  --z-yellow: #f6e52e;
  --z-red: #e02727;
  --z-blue: #1261b9;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--z-black);
  background-color: var(--z-paper);
  background-image:
    linear-gradient(90deg, transparent 49.7%, rgba(0, 0, 0, .045) 50%, transparent 50.3%),
    radial-gradient(ellipse at 12% 22%, rgba(0, 0, 0, .08), transparent 21%),
    radial-gradient(ellipse at 83% 68%, rgba(224, 39, 39, .08), transparent 32%);
  isolation: isolate;
}

.zine-shell *,
.zine-shell *::before,
.zine-shell *::after { box-sizing: border-box; }

.z-grain {
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, transparent 0 1px, rgba(0, 0, 0, .18) 1px 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(93deg, transparent 0 8px, rgba(0, 0, 0, .025) 8px 9px);
  background-size: 13px 17px, auto;
}

.zine-shell button,
.zine-shell select {
  font: inherit;
}

.zine-shell button:focus-visible,
.zine-shell select:focus-visible,
.zine-shell [tabindex]:focus-visible {
  outline: 4px solid var(--z-blue);
  outline-offset: 4px;
}

.z-masthead {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(45px, 8vw, 110px) 2vw clamp(40px, 8vw, 100px) 7vw;
}

.z-issue,
.z-kicker {
  margin: 0;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.z-issue {
  width: max-content;
  max-width: 100%;
  padding: 7px 10px 5px;
  background: var(--z-black);
  color: var(--z-white);
  font-size: clamp(9px, 1vw, 13px);
  transform: rotate(-1.5deg);
}

.z-masthead h1 {
  margin: 20px 0 8px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(78px, 13vw, 190px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.1em;
  text-transform: uppercase;
  transform: scaleX(.9);
  transform-origin: left;
}

.z-masthead h1 span {
  display: block;
  width: max-content;
  padding: 0 .07em .06em 0;
  color: var(--z-red);
  filter: url("#none");
  text-shadow: 4px 2px 0 var(--z-black);
  transform: rotate(-4deg) translateX(-.04em);
}

.z-ransom {
  display: inline-block;
  margin: 32px 0 0 13%;
  padding: 10px 14px 8px;
  background: var(--z-white);
  box-shadow: 7px 8px 0 var(--z-black);
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: clamp(17px, 2.2vw, 30px);
  line-height: 1.08;
  transform: rotate(2deg);
}

.zine-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: center;
}

.z-flyer {
  position: relative;
  z-index: 2;
  width: min(520px, calc(100% - 56px));
  margin: 80px auto;
  padding: clamp(34px, 5vw, 62px);
  border: 4px solid var(--z-black);
  background: var(--z-white);
  box-shadow: 14px 16px 0 var(--z-black);
  transform: rotate(1.3deg);
}

.z-flyer::after {
  content: "";
  position: absolute;
  inset: -13px 30px auto 52%;
  height: 28px;
  background: rgba(230, 67, 62, .66);
  transform: translateX(-50%) rotate(-2deg);
}

.z-tape {
  display: inline-block;
  margin: 0 0 16px -60px;
  padding: 8px 22px;
  background: var(--z-blue);
  color: var(--z-white);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(-4deg);
}

.z-flyer h2 {
  margin: 0 0 24px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .9;
  text-transform: uppercase;
}

.z-setup-grid { display: grid; gap: 18px; margin: 0 0 28px; }
.z-setup-grid fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.z-setup-grid legend,
.z-setup-grid > label > span {
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.z-setup-name input,
.z-setup-decks select {
  width: 100%;
  min-height: 46px;
  border: 3px solid var(--z-black);
  border-radius: 0;
  padding: 8px 11px;
  background: var(--z-white);
  color: var(--z-black);
  font: 700 15px/1.2 "Special Elite", "Courier Prime", monospace;
}
.z-setup-bots > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.z-setup-bots input,
.z-setup-rules input { position: absolute; opacity: 0; pointer-events: none; }
.z-setup-bots label span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid var(--z-black);
  background: var(--z-white);
  font-family: "Archivo Black", Impact, sans-serif;
  cursor: pointer;
}
.z-setup-bots input:checked + span { background: var(--z-yellow); box-shadow: 3px 3px 0 var(--z-black); transform: translate(-2px, -2px) rotate(-2deg); }
.z-setup-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.z-setup-rules legend { grid-column: 1 / -1; }
.z-setup-rules label > span { min-height: 76px; display: grid; align-content: center; border: 3px solid var(--z-black); padding: 10px; background: var(--z-white); cursor: pointer; }
.z-setup-rules b,
.z-setup-rules small { display: block; }
.z-setup-rules b { font-family: "Archivo Black", Impact, sans-serif; font-size: 11px; text-transform: uppercase; }
.z-setup-rules small { margin-top: 5px; font-size: 9px; line-height: 1.25; }
.z-setup-rules input:checked + span { background: var(--z-black); color: var(--z-white); box-shadow: inset 0 -6px var(--z-yellow); }
.z-setup-bots input:focus-visible + span,
.z-setup-rules input:focus-visible + span { outline: 4px solid var(--z-blue); outline-offset: 3px; }

.z-slam,
.z-cutout {
  border: 3px solid var(--z-black);
  border-radius: 0;
  padding: 14px 18px 11px;
  background: var(--z-white);
  color: var(--z-black);
  font-family: "Archivo Black", Impact, sans-serif !important;
  font-size: 14px;
  text-transform: uppercase;
  box-shadow: 5px 6px 0 var(--z-black);
  cursor: pointer;
  transition: transform 90ms, box-shadow 90ms;
}

.z-slam:hover,
.z-cutout:hover { transform: translate(2px, 3px) rotate(-1deg); box-shadow: 3px 3px 0 var(--z-black); }
.z-slam:active,
.z-cutout:active { transform: translate(5px, 6px); box-shadow: none; }
.z-yellow { background: var(--z-yellow); }
.z-slam span { float: right; margin-left: 20px; font-size: 21px; }
.z-flyer .z-slam { width: 100%; }

.z-scrawl {
  margin: 25px 0 -6px;
  font-family: "Special Elite", monospace;
  font-size: 12px;
  line-height: 1.35;
  transform: rotate(-1deg);
}

.z-warning {
  position: absolute;
  z-index: 1;
  right: -88px;
  bottom: 14%;
  padding: 12px 110px;
  background: var(--z-red);
  color: var(--z-white);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 13px;
  transform: rotate(-44deg);
}

.z-game-head {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px clamp(18px, 3vw, 48px);
  border-bottom: 4px solid var(--z-black);
  background: var(--z-white);
}

.z-game-head strong {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(18px, 2.3vw, 31px);
  letter-spacing: -.06em;
}
.z-game-head strong span { color: var(--z-red); }
.z-game-head p { margin: 0 118px 0 20px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-align: right; }
.z-game-head p i { color: var(--z-red); font-style: normal; }

.zine-ritual {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(480px, 1.25fr);
  grid-template-rows: auto 1fr;
}
.zine-ritual .z-game-head { grid-column: 1 / -1; }
.z-ritual-copy { align-self: center; padding: clamp(50px, 8vw, 120px); }
.z-kicker { width: max-content; padding: 6px 9px 4px; background: var(--z-black); color: var(--z-white); font-size: 11px; transform: rotate(-2deg); }
.z-ritual-copy h2,
.z-race-copy h2 {
  margin: 17px 0 25px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(68px, 9vw, 138px);
  line-height: .7;
  letter-spacing: -.09em;
}
.z-ritual-copy h2 span,
.z-race-copy h2 span { color: var(--z-red); text-shadow: 3px 3px 0 var(--z-black); }
.z-ritual-copy > p:not(.z-kicker),
.z-race-copy > p:not(.z-kicker) { max-width: 470px; font-family: "Special Elite", monospace; line-height: 1.45; }
.z-ritual-copy .z-slam { margin-top: 22px; }

.z-packets {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: clamp(15px, 2.5vw, 28px);
  align-content: center;
  padding: 60px clamp(30px, 7vw, 100px) 60px 0;
}
.z-packet {
  position: relative;
  min-height: 180px;
  padding: 24px 20px 18px 106px;
  border: 3px solid var(--z-black);
  background: var(--z-white);
  box-shadow: 7px 8px 0 var(--z-black);
  transform: rotate(var(--packet-r, -1deg));
}
.z-packet:nth-child(2n) { --packet-r: 1.5deg; }
.z-packet.dealer::after {
  content: "LEGAL";
  position: absolute;
  top: 13px;
  right: 9px;
  border: 3px solid var(--z-red);
  padding: 4px 5px 2px;
  color: var(--z-red);
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 10px;
  transform: rotate(8deg);
}
.z-packet h3 { margin: 40px 0 4px; font-family: "Archivo Black", Impact, sans-serif; font-size: 20px; text-transform: uppercase; }
.z-packet p { margin: 0; font-size: 9px; letter-spacing: .1em; }
.z-packet button { margin: 13px 0 0; border: 0; border-bottom: 2px solid; padding: 2px 0; background: none; font-size: 10px; cursor: pointer; }
.z-mini-stack { position: absolute; left: 23px; top: 40px; width: 64px; height: 90px; }
.z-mini-stack i,
.z-back-fan i,
.z-draw-pile i,
.z-deal-deck i {
  position: absolute;
  inset: 0;
  border: 4px solid var(--z-white);
  background-color: var(--z-black);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(246, 229, 46, .8) 5px 7px), repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, .2) 7px 8px);
  box-shadow: 0 0 0 2px var(--z-black);
}
.z-mini-stack i:nth-child(1) { transform: rotate(-8deg) translate(-5px, 1px); }
.z-mini-stack i:nth-child(2) { transform: rotate(4deg) translate(5px, -2px); }
.z-margin-note { position: absolute; right: 2vw; bottom: 16px; margin: 0; font-family: "Special Elite", monospace; font-size: 12px; transform: rotate(-2deg); }

.z-notice {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 20px;
  max-width: min(580px, calc(100% - 40px));
  padding: 13px 21px 10px;
  border: 3px solid var(--z-black);
  background: var(--z-yellow);
  box-shadow: 5px 6px 0 var(--z-black);
  font-family: "Special Elite", monospace;
  font-weight: 700;
  transform: translateX(-50%) rotate(-1deg);
}
.z-notice.bad { background: var(--z-red); color: var(--z-white); }

.zine-race {
  display: grid;
  grid-template-columns: minmax(250px, .65fr) minmax(550px, 1.35fr) 210px;
  grid-template-rows: auto 1fr;
}
.zine-race .z-game-head { grid-column: 1 / -1; }
.z-race-copy { align-self: center; padding: clamp(38px, 6vw, 88px); }
.z-race-zone { align-self: center; min-width: 0; padding: 45px 20px; text-align: center; }
.z-race-roster { align-self: center; padding: 25px; border-left: 1px solid var(--z-black); }
.z-race-roster > p { padding: 6px; background: var(--z-black); color: var(--z-white); font-size: 10px; font-weight: 700; }
.z-race-roster span { display: block; padding: 11px 3px 8px; border-bottom: 2px dotted; font-family: "Archivo Black", Impact, sans-serif; font-size: 13px; text-transform: uppercase; }
.z-race-roster i { display: block; margin-top: 4px; color: var(--z-red); font-family: "Courier Prime", monospace; font-size: 9px; font-style: normal; }
.z-action-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 24px; }

.z-hand {
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 30px 28px 16px;
  scrollbar-color: var(--z-black) transparent;
}
.z-race-hand { justify-content: center; }
.z-card {
  position: relative;
  flex: 0 0 clamp(82px, 8vw, 116px);
  height: clamp(126px, 12.2vw, 174px);
  margin-left: clamp(-34px, -2.5vw, -22px);
  border: 3px solid var(--z-black);
  border-radius: 2px;
  padding: 0;
  background: #fffdf3;
  color: var(--z-black);
  box-shadow: 4px 5px 0 var(--z-black);
  cursor: grab;
  transform: rotate(var(--card-r, 0deg)) translateY(0);
  transition: transform 110ms, box-shadow 110ms;
}
.z-card:first-child { margin-left: 0; }
.z-card:nth-child(4n+1) { --card-r: -1.5deg; }
.z-card:nth-child(4n+2) { --card-r: 1deg; }
.z-card:nth-child(4n+3) { --card-r: -.4deg; }
.z-card.red { color: var(--z-red); }
.z-card:hover:not(:disabled) { z-index: 4; transform: rotate(0) translateY(-13px); }
.z-card.is-selected { z-index: 5; margin-right: 10px; transform: rotate(-2deg) translateY(-24px); box-shadow: 7px 10px 0 var(--z-red); }
.z-card.is-muted { opacity: .26; filter: grayscale(.75); }
.z-card:disabled { cursor: default; }
.z-card.is-dragging { opacity: .45; }
.z-card-corner { position: absolute; top: 7px; left: 8px; display: grid; font-family: "Archivo Black", Impact, sans-serif; font-size: 17px; line-height: .9; text-align: center; }
.z-card-corner.bottom { inset: auto 8px 7px auto; transform: rotate(180deg); }
.z-card-pip { display: grid; height: 100%; place-items: center; font-family: Georgia, serif; font-size: clamp(35px, 4vw, 61px); }
.z-card.race-ten { box-shadow: 5px 7px 0 var(--z-red); }

.z-drop-zone {
  width: 170px;
  height: 108px;
  display: grid;
  place-content: center;
  margin: 15px auto 0;
  border: 4px dashed var(--z-black);
  background: rgba(255, 255, 255, .42);
  font-family: "Archivo Black", Impact, sans-serif;
  transform: rotate(1deg);
}
.z-drop-zone span,
.z-drop-zone small { display: block; }
.z-drop-zone small { margin-top: 5px; font-family: "Courier Prime", monospace; font-size: 9px; }
.z-drop-zone.drag-over,
.z-play-pile.drag-over { background: var(--z-yellow); transform: rotate(-3deg) scale(1.06); }

.zine-turn { min-height: 100svh; padding-bottom: 270px; }
.z-table-stage {
  position: relative;
  min-height: max(520px, calc(100svh - 340px));
  max-width: 1800px;
  margin: 0 auto;
}
.z-table-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: clamp(86px, 11vh, 128px) clamp(145px, 11vw, 210px) clamp(42px, 6vh, 72px);
  border: 3px solid rgba(17, 17, 17, .54);
  background:
    linear-gradient(102deg, rgba(255, 254, 245, .48), rgba(213, 207, 191, .42)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(17, 17, 17, .035) 34px 36px);
  box-shadow: 12px 14px 0 rgba(17, 17, 17, .12), inset 0 0 0 9px rgba(255, 254, 245, .34);
  clip-path: polygon(3% 4%, 96% 0, 100% 92%, 94% 98%, 5% 100%, 0 88%);
  transform: rotate(-.35deg);
}
.z-table-stage::after {
  content: "THE TABLE // HANDS WHERE WE CAN SEE THEM";
  position: absolute;
  z-index: 1;
  right: clamp(165px, 12vw, 230px);
  bottom: clamp(54px, 7vh, 82px);
  padding: 5px 8px 3px;
  background: var(--z-black);
  color: var(--z-white);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  transform: rotate(1deg);
}
.z-opponents {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.z-opponent {
  position: absolute;
  width: clamp(160px, 11vw, 205px);
  min-width: 0;
  padding: 9px 8px 5px;
  text-align: center;
  opacity: .72;
  transform: rotate(var(--opp-r, -1deg));
  transition: opacity 180ms ease, filter 180ms ease, background 180ms ease;
}
.z-opponent:nth-child(2n) { --opp-r: 1deg; }
.z-opponent.current { z-index: 5; background: rgba(246, 229, 46, .72); opacity: 1; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .18)); }
.z-opponent.current::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 3px dashed var(--z-red);
  pointer-events: none;
}
.z-opponent.seat-north { top: 2%; left: 50%; transform: translateX(-50%) rotate(var(--opp-r, -1deg)); }
.z-opponent.seat-northwest { top: 4%; left: 31%; transform: translateX(-50%) rotate(var(--opp-r, -1deg)); }
.z-opponent.seat-northeast { top: 4%; right: 31%; transform: translateX(50%) rotate(var(--opp-r, -1deg)); }
.z-opponent.seat-west { top: 49%; left: 2%; transform: translateY(-50%) rotate(var(--opp-r, -1deg)); }
.z-opponent.seat-east { top: 49%; right: 2%; transform: translateY(-50%) rotate(var(--opp-r, -1deg)); }
.z-opponent.seat-west-upper { top: 15%; left: 3%; }
.z-opponent.seat-west-lower { bottom: 9%; left: 2%; }
.z-opponent.seat-east-upper { top: 15%; right: 3%; }
.z-opponent.seat-east-lower { right: 2%; bottom: 9%; }
.z-opponent.out { opacity: .25; filter: grayscale(1); }
.z-opponent-name b,
.z-opponent-name small { display: block; }
.z-opponent-name {
  position: relative;
  z-index: 6;
  display: inline-block;
  min-width: 118px;
  border: 2px solid var(--z-black);
  padding: 5px 8px 4px;
  background: var(--z-white);
  box-shadow: 3px 3px 0 var(--z-black);
}
.z-opponent.current .z-opponent-name { background: var(--z-black); color: var(--z-white); box-shadow: 4px 4px 0 var(--z-red); }
.z-opponent-name b { font-family: "Archivo Black", Impact, sans-serif; font-size: 16px; line-height: 1; text-transform: uppercase; }
.z-opponent-name small { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.z-back-fan { position: relative; width: 154px; height: 105px; margin: 7px auto 0; }
.z-back-fan i {
  width: 52px;
  height: 75px;
  left: 51px;
  top: 7px;
  transform: translateX(calc((var(--i) - var(--n) / 2) * 9px)) rotate(calc((var(--i) - var(--n) / 2) * 3deg));
  transform-origin: 50% 110%;
}
.z-back-fan em { position: absolute; z-index: 5; right: -4px; bottom: 2px; padding: 3px 4px; background: var(--z-red); color: white; font-size: 9px; font-style: normal; }
.z-opponent.current .z-back-fan { filter: drop-shadow(0 7px 5px rgba(224, 39, 39, .2)); }
.z-seat-turn { position: absolute; z-index: 7; top: 58px; left: -9px; padding: 7px 9px 5px; background: var(--z-red); color: var(--z-white); box-shadow: 3px 3px 0 var(--z-black); font-family: "Archivo Black", Impact, sans-serif; font-size: 11px; transform: rotate(-11deg); }

/* Card motion must never replace the translate that anchors a side seat. */
.z-opponent.card-motion-player-impact,
.z-opponent.card-motion-player-impact.is-fjommer,
.z-opponent.card-motion-player-impact.is-penalty { animation: z-opponent-impact 320ms ease-out both !important; }
.z-human-area.card-motion-player-impact,
.z-human-area.card-motion-player-impact.is-fjommer,
.z-human-area.card-motion-player-impact.is-penalty { animation: z-human-impact 320ms ease-out both !important; }
.z-play-pile.card-motion-pile-impact { animation: z-pile-flash 260ms ease-out both !important; }
@keyframes z-opponent-impact { 50% { filter: brightness(1.1) drop-shadow(0 9px 7px rgba(224, 39, 39, .22)); } }
@keyframes z-human-impact { 50% { box-shadow: inset 0 7px 0 var(--z-yellow), 0 -10px 30px rgba(0, 0, 0, .14), inset 0 0 0 3px rgba(224, 39, 39, .25); } }
@keyframes z-pile-flash { 50% { filter: brightness(1.12); } }

.z-deal .z-opponent { opacity: .82; }
.z-deal.dealing .z-back-fan,
.z-deal.dealing .z-facedown-hand { opacity: 0; }
.z-deal .z-back-fan,
.z-deal .z-facedown-hand { transition: opacity 220ms ease; }
.z-deal-center { grid-template-columns: minmax(170px, .55fr) minmax(140px, 240px) minmax(210px, .7fr); }
.z-deal-deck { position: relative; width: 110px; height: 152px; margin: auto; }
.z-deal-deck i { position: absolute; inset: 0; }
.z-deal-deck i:nth-child(1) { transform: translate(-7px, 6px); }
.z-deal-deck i:nth-child(2) { transform: translate(-3px, 3px); }
.z-deal-deck span { position: absolute; z-index: 3; top: 50%; left: 50%; padding: 6px 9px 4px; background: var(--z-yellow); font-family: "Archivo Black", Impact, sans-serif; font-size: 13px; transform: translate(-50%, -50%) rotate(-8deg); }
.z-deal-rule { max-width: 230px; margin: 0; padding: 14px; border: 2px solid var(--z-black); background: var(--z-white); font: 12px/1.35 "Special Elite", monospace; transform: rotate(1deg); }
.z-deal-rule b { font-family: "Archivo Black", Impact, sans-serif; text-transform: uppercase; }
.z-deal-flight-layer { --z-black: #111; --z-white: #fffef5; --z-yellow: #f6e52e; position: fixed; z-index: 70; inset: 0; overflow: hidden; pointer-events: none; }
.z-deal-flight-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 68px;
  border: 4px solid var(--z-white);
  background-color: var(--z-black);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(246, 229, 46, .8) 5px 7px), repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255, 255, 255, .2) 7px 8px);
  box-shadow: 0 0 0 2px var(--z-black), 3px 7px 10px rgba(0, 0, 0, .2);
}
.z-facedown-hand { display: flex; justify-content: center; align-items: end; min-height: 180px; padding: 36px 24px 18px; }
.z-hand-back {
  position: relative;
  flex: 0 0 clamp(70px, 7vw, 98px);
  height: clamp(108px, 10.3vw, 147px);
  margin-left: clamp(-31px, -2.2vw, -20px);
  border: 5px solid var(--z-white);
  background-color: var(--z-black);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(246, 229, 46, .82) 6px 8px), repeating-linear-gradient(-45deg, transparent 0 8px, rgba(255, 255, 255, .22) 8px 9px);
  box-shadow: 0 0 0 2px var(--z-black), 4px 5px 0 var(--z-black);
  transform: rotate(calc((var(--i) - var(--n) / 2) * 1.2deg));
}
.z-hand-back:first-child { margin-left: 0; }
.z-dealer-controls { align-self: center; }
.z-dealer-controls > .z-slam { width: 100%; }
.z-dealer-controls > p { margin: 0; font: 12px/1.35 "Special Elite", monospace; }
.z-touch-early { margin-top: 12px; }
.z-countdown { position: fixed; z-index: 90; inset: 0; display: none; place-items: center; align-content: center; gap: 18px; background: rgba(17, 17, 17, .94); color: var(--z-white); }
.z-countdown.active { display: grid; }
.z-countdown span { font-family: "Archivo Black", Impact, sans-serif; font-size: min(48vw, 430px); line-height: .75; color: var(--z-yellow); text-shadow: 8px 10px 0 var(--z-red); }
.z-countdown small { font-size: 12px; font-weight: 700; letter-spacing: .18em; }

.z-table-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(210px, .65fr) minmax(350px, 520px) minmax(255px, .8fr);
  gap: clamp(28px, 3vw, 52px);
  align-items: center;
  width: min(1180px, calc(100% - 430px));
  transform: translate(-50%, -50%);
}
.z-turn-banner { justify-self: end; width: min(225px, 100%); padding: 16px 13px 13px; border: 5px solid var(--z-red); background: var(--z-white); color: var(--z-red); box-shadow: 7px 8px 0 rgba(17, 17, 17, .18); text-align: center; transform: rotate(-5deg); }
.z-turn-banner span,
.z-turn-banner b,
.z-turn-banner small { display: block; }
.z-turn-banner span { font-family: "Archivo Black", Impact, sans-serif; font-size: 11px; letter-spacing: .08em; }
.z-turn-banner b { margin: 7px 0 8px; overflow: hidden; text-overflow: ellipsis; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(34px, 3vw, 48px); line-height: .82; text-transform: uppercase; }
.z-turn-banner small { border-top: 2px solid; padding-top: 7px; font-size: 9px; font-weight: 700; line-height: 1.3; }
.turn-handoff .z-turn-banner { animation: z-turn-fade 220ms ease-out both; }
.turn-handoff .z-opponent.current { animation: z-seat-fade 220ms ease-out both; }
@keyframes z-turn-fade { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes z-seat-fade { 0% { opacity: .55; } 100% { opacity: 1; } }
.z-piles { display: flex; justify-content: center; align-items: center; gap: clamp(52px, 5vw, 82px); }
.z-draw-pile {
  position: relative;
  width: 118px;
  height: 168px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.z-draw-pile i:nth-child(1) { transform: translate(-7px, 6px); }
.z-draw-pile i:nth-child(2) { transform: translate(-3px, 3px); }
.z-draw-pile span { position: relative; z-index: 2; display: inline-block; padding: 6px 9px 4px; background: var(--z-yellow); font-family: "Archivo Black", Impact, sans-serif; font-size: 13px; transform: rotate(-8deg); }
.z-draw-pile:hover { transform: translateY(-6px) rotate(-2deg); }
.z-draw-pile.is-required { outline: 5px solid var(--z-red); outline-offset: 7px; filter: drop-shadow(0 8px 6px rgba(224, 39, 39, .2)); }
.z-draw-pile.is-required span { background: var(--z-red); color: var(--z-white); }
.z-play-pile { position: relative; width: 126px; height: 174px; border: 3px dashed rgba(0, 0, 0, .45); transition: 120ms; }
.z-pile-card { position: absolute; inset: 5px; display: grid; place-items: center; border: 3px solid var(--z-black); background: var(--z-white); font-family: Georgia, serif; font-size: 45px; transform: rotate(calc((var(--pile-i) - 1) * 4deg)) translate(calc((var(--pile-i) - 1) * 2px), calc((var(--pile-i) - 1) * -2px)); }
.z-pile-card b { position: absolute; top: 7px; left: 8px; font-family: "Archivo Black", Impact, sans-serif; font-size: 18px; }
.z-pile-card.red { color: var(--z-red); }
.z-play-pile em { position: absolute; z-index: 6; left: 50%; bottom: -29px; width: max-content; max-width: 190px; padding: 4px 6px; background: var(--z-black); color: var(--z-white); font-size: 8px; font-style: normal; transform: translateX(-50%) rotate(1deg); }
.z-scrap-log { max-height: 185px; overflow: hidden; margin: 0; padding: 16px; border: 3px solid var(--z-black); background: var(--z-white); box-shadow: 7px 8px 0 var(--z-black); list-style-position: inside; transform: rotate(1deg); }
.z-scrap-log li { padding: 6px 0; border-bottom: 1px dotted; font-family: "Special Elite", monospace; font-size: 11px; line-height: 1.3; }
.z-scrap-log li.bad { color: var(--z-red); font-weight: 700; }

.z-cards-live .z-opponent { opacity: .82; }
.z-cards-live .z-opponent-name small { color: var(--z-red); }
.z-live-banner { background: var(--z-yellow); color: var(--z-black); border-color: var(--z-black); }
.z-live-piles .z-draw-pile.is-locked { cursor: default; opacity: .55; }
.z-live-piles .z-draw-pile.is-locked:hover { transform: none; }
.z-play-pile.live-empty { display: grid; place-content: center; justify-items: center; background: rgba(255, 255, 255, .4); }
.z-play-pile.live-empty small { font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.z-live-controls { grid-template-columns: 1fr; align-self: center; }
.z-live-controls > p { margin: 0 0 3px; font: 11px/1.3 "Special Elite", monospace; }
.z-live-controls > button { width: 100%; }
.opening-draw .z-turn-banner { background: var(--z-yellow); color: var(--z-black); border-color: var(--z-black); }

.z-human-area {
  position: fixed;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: 255px;
  border-top: 4px solid var(--z-black);
  background: rgba(238, 233, 220, .96);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .11);
  transition: background 180ms ease, box-shadow 180ms ease;
}
.z-human-area.current { background: #fff9c9; box-shadow: inset 0 7px 0 var(--z-yellow), 0 -10px 30px rgba(0, 0, 0, .14); }
.z-human-seat { position: absolute; z-index: 2; top: 10px; left: 22px; display: flex; align-items: baseline; gap: 12px; }
.z-human-seat b { font-family: "Archivo Black", Impact, sans-serif; font-size: 14px; text-transform: uppercase; }
.z-human-seat span { font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.turn-handoff .z-human-area.current .z-human-seat { animation: z-human-turn-fade 180ms ease-out both; }
@keyframes z-human-turn-fade { 0% { opacity: .55; } 100% { opacity: 1; } }
.z-human-area .z-hand { justify-content: center; min-width: 0; padding: 50px 18px 21px 48px; }
.z-controls { display: grid; grid-template-columns: repeat(2, minmax(115px, 1fr)); gap: 10px; width: 365px; padding: 23px 28px 23px 10px; }
.z-calls { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
.z-calls button { min-height: 42px; border: 3px solid var(--z-black); background: var(--z-white); font-family: "Archivo Black", Impact, sans-serif; font-size: 11px; cursor: pointer; transform: rotate(-1deg); }
.z-calls button:nth-child(2) { transform: rotate(1deg); }
.z-calls button.active { background: var(--z-red); color: var(--z-white); box-shadow: 4px 4px 0 var(--z-black); }
.z-suit-picker { grid-column: 1 / -1; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.z-suit-picker select { width: 100%; margin-top: 4px; border: 3px solid var(--z-black); border-radius: 0; padding: 7px; background: var(--z-white); }

.zine-over { background-image: repeating-linear-gradient(-8deg, var(--z-paper) 0 37px, #d3cec1 37px 39px); }
.z-verdict { position: relative; z-index: 2; width: min(720px, calc(100% - 40px)); margin: clamp(50px, 9vh, 110px) auto; padding: clamp(35px, 6vw, 75px); border: 5px solid var(--z-black); background: var(--z-white); box-shadow: 16px 18px 0 var(--z-black); transform: rotate(-1deg); }
.z-verdict h2 { max-width: 80%; margin: 25px 0 10px; overflow-wrap: anywhere; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(58px, 10vw, 130px); line-height: .75; letter-spacing: -.08em; text-transform: uppercase; }
.z-loser-stamp { position: absolute; top: 50px; right: 38px; border: 7px solid var(--z-red); border-radius: 50%; padding: 18px 23px; color: var(--z-red); font-family: "Archivo Black", Impact, sans-serif; font-size: 19px; line-height: .8; text-align: center; transform: rotate(12deg); }
.z-verdict ol { columns: 2; max-width: 440px; margin: 35px 0; padding: 0; list-style: none; }
.z-verdict li { padding: 8px 0; border-bottom: 2px dotted; font-family: "Special Elite", monospace; }
.z-verdict li b { margin-right: 16px; color: var(--z-red); }
.z-over-scrawl { position: absolute; right: 5vw; bottom: 4vh; font-family: "Special Elite", monospace; transform: rotate(3deg); }
.z-over-scrawl span { text-decoration: line-through; }

@media (max-width: 980px) {
  .zine-setup { grid-template-columns: 1fr; }
  .z-masthead { padding-bottom: 20px; }
  .z-flyer { margin-top: 10px; }
  .z-warning { display: none; }
  .zine-ritual { grid-template-columns: 1fr; }
  .zine-ritual .z-game-head { grid-column: 1; }
  .z-ritual-copy { padding: 45px 8vw 15px; }
  .z-packets { padding: 25px 8vw 80px; }
  .zine-race { grid-template-columns: minmax(230px, .7fr) minmax(450px, 1.3fr); }
  .zine-race .z-game-head { grid-column: 1 / -1; }
  .z-race-roster { display: none; }
  .z-table-stage { min-height: 430px; }
  .z-table-center { width: min(700px, calc(100% - 250px)); grid-template-columns: 125px 1fr; }
  .z-deal-center { grid-template-columns: 125px 1fr; }
  .z-deal-rule { display: none; }
  .z-scrap-log { display: none; }
}

@media (max-width: 720px) {
  html[data-ui="zine"] .ui-switcher { left: 12px; transform: rotate(1deg); }
  .z-game-head { min-height: 58px; padding-inline: 14px; }
  .z-game-head strong,
  .z-game-head p { visibility: hidden; }
  .zine-ritual,
  .zine-race { display: block; }
  .z-ritual-copy,
  .z-race-copy { padding: 32px 24px 10px; }
  .z-ritual-copy h2,
  .z-race-copy h2 { font-size: 66px; }
  .z-packets { grid-template-columns: 1fr 1fr; padding: 20px 20px 80px; }
  .z-packet { min-height: 130px; padding: 14px 10px 12px 74px; }
  .z-packet h3 { margin-top: 25px; font-size: 14px; }
  .z-mini-stack { left: 14px; top: 27px; width: 44px; height: 63px; }
  .z-race-zone { padding: 15px 8px 90px; }
  .z-race-hand { justify-content: flex-start; }
  .zine-turn { padding-bottom: 325px; }
  .z-table-stage { min-height: 390px; padding-top: 118px; }
  .z-table-stage::before { inset: 112px 8px 10px; clip-path: polygon(2% 2%, 98% 0, 100% 94%, 96% 100%, 3% 98%, 0 91%); }
  .z-table-stage::after { display: none; }
  .z-opponents { position: absolute; inset: 0 0 auto; display: flex; gap: 16px; min-height: 126px; overflow-x: auto; padding: 14px 88px 8px 14px; pointer-events: auto; }
  .z-opponent,
  .z-opponent.seat-north,
  .z-opponent.seat-northwest,
  .z-opponent.seat-northeast,
  .z-opponent.seat-west,
  .z-opponent.seat-east,
  .z-opponent.seat-west-upper,
  .z-opponent.seat-west-lower,
  .z-opponent.seat-east-upper,
  .z-opponent.seat-east-lower { position: relative; inset: auto; flex: 0 0 100px; width: 100px; transform: rotate(var(--opp-r, -1deg)); }
  .z-opponent-name { min-width: 92px; padding: 4px 5px 3px; }
  .z-opponent-name b { font-size: 12px; }
  .z-opponent-name small { margin-top: 2px; font-size: 7px; }
  .z-back-fan { transform: scale(.68); transform-origin: top center; }
  .z-opponent.current .z-back-fan { filter: drop-shadow(0 6px 4px rgba(224, 39, 39, .2)); }
  .z-table-center { position: relative; inset: auto; display: grid; grid-template-columns: 105px 1fr; width: 100%; padding: 12px 16px 30px; transform: none; }
  .z-turn-banner { width: 105px; padding: 8px 6px; }
  .z-turn-banner b { font-size: 21px; }
  .z-piles { min-height: 175px; gap: 18px; }
  .z-draw-pile { width: 86px; height: 123px; }
  .z-play-pile { width: 92px; height: 127px; }
  .z-pile-card { font-size: 37px; }
  .z-human-area { display: block; min-height: 316px; }
  .z-human-seat { top: 9px; left: 13px; }
  .z-human-area .z-hand { min-height: 176px; justify-content: flex-start; padding: 41px 13px 9px; }
  .z-controls { grid-template-columns: 1fr 1fr; width: 100%; padding: 8px 12px 12px; }
  .z-dealer-controls,
  .z-live-controls { grid-template-columns: 1fr 1fr; }
  .z-dealer-controls > p,
  .z-live-controls > p { grid-column: 1 / -1; }
  .z-facedown-hand { min-height: 180px; justify-content: flex-start; overflow: hidden; padding: 45px 13px 9px; }
  .z-hand-back { flex-basis: 76px; height: 116px; margin-left: -25px; }
  .z-hand-back:first-child { margin-left: 0; }
  .z-suit-picker { display: none; }
  .z-card { flex-basis: 78px; height: 119px; margin-left: -26px; }
  .z-card:first-child { margin-left: 0; }
  .z-verdict { margin-top: 45px; }
  .z-verdict h2 { max-width: 100%; padding-top: 75px; }
  .z-loser-stamp { top: 38px; right: 28px; }
  .z-verdict ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .zine-shell *,
  .zine-shell *::before,
  .zine-shell *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}