/*
 * Race to the Gold — one stylesheet.
 *
 * Board sizes are in cells: --c is the width of one square of the board in
 * px, set on the stage by layout() in js/ui.js. The board is a CSS 3D scene
 * (blocks are boxes of faces, standing things are pictures turned to face
 * the viewer), so nothing inside it may use overflow, opacity or filter on a
 * parent of 3D children: those flatten the scene. Textures are pixel art made by js/art.js
 * and handed over as --tex-* variables on the root element; they are always
 * scaled up with `image-rendering: pixelated` so they stay crisp and blocky.
 *
 * The look follows Minecraft's own screens: grey bevelled buttons with white
 * shadowed text, light grey inventory panels, the dark dirt background of
 * the options screens, yellow splash text and the advancement pop-up.
 */

:root {
  --font: 'Pixelify Sans', ui-monospace, 'Courier New', monospace;
  --ink: #3f3f3f;          /* text on the light grey panels, as in the inventory */
  --gui: #c6c6c6;
  --gui-light: #ffffff;
  --gui-dark: #555555;
  --slot: #8b8b8b;
  --yellow: #ffff55;
  --gold: #fcd535;
  --green: #55ff55;
  --red: #ff5555;
  --c: 60px;
  --pf: 17px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  color: #fff;
  background: linear-gradient(#5d8fe6 0%, #8db6f7 55%, #c4dafc 100%) fixed;
  image-rendering: pixelated;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  text-transform: capitalize;          /* Capital Case everywhere, as in the other themed editions */
  touch-action: manipulation;
}
input, textarea, .nocap { text-transform: none; }
button { font: inherit; color: inherit; text-transform: inherit; }
img { image-rendering: pixelated; }
.px { image-rendering: pixelated; background-repeat: no-repeat; background-size: 100% 100%; }

/* ------------------------------------------------------------------ */
/* layout                                                               */
/* ------------------------------------------------------------------ */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  align-items: center;
  justify-content: center;
}
.app.landscape { flex-direction: row; }
.app.portrait { flex-direction: column; justify-content: flex-start; }
.stage { flex: 0 0 auto; position: relative; }

/* flat white Minecraft clouds drifting by */
.clouds { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.clouds i { position: absolute; display: block; height: 22px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 0 rgba(235, 242, 255, 0.85); animation: drift linear infinite; }
.clouds i::before { content: ''; position: absolute; left: 22%; right: 30%; top: -14px; height: 14px; background: inherit; }
.clouds i:nth-child(1) { top: 6%; width: 180px; animation-duration: 140s; animation-delay: -20s; }
.clouds i:nth-child(2) { top: 18%; width: 120px; animation-duration: 110s; animation-delay: -70s; }
.clouds i:nth-child(3) { top: 34%; width: 220px; animation-duration: 170s; animation-delay: -120s; }
.clouds i:nth-child(4) { top: 62%; width: 150px; animation-duration: 130s; animation-delay: -40s; }
.clouds i:nth-child(5) { top: 80%; width: 200px; animation-duration: 160s; animation-delay: -95s; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 40px)); } }
.panel {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--pf);
  min-height: 0;
}
.app.landscape .panel { width: var(--panel-w, 360px); max-height: 100%; }
.app.portrait .panel { width: 100%; max-width: 640px; flex: 1 1 auto; }

/* ------------------------------------------------------------------ */
/* the board: an island of blocks in 3D                                 */
/* ------------------------------------------------------------------ */

.board {
  position: absolute; left: 0; top: 0;
  width: calc(var(--c) * 8); height: calc(var(--c) * 10.4);
  font-size: calc(var(--c) * 0.3);
  --tilt: 47deg;          /* how far the board leans back */
  transform-style: preserve-3d;
  transform: perspective(calc(var(--c) * 24)) rotateX(var(--tilt));
  transform-origin: 50% 55%;
  pointer-events: none;
}
.board .lay, .board .cub { position: absolute; transform-style: preserve-3d; }
.board .lay { left: 0; top: 0; width: 100%; height: 100%; }

/* the faces of a block; each block is drawn without its north side or hidden sides */
.fc {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-size: var(--c) var(--c);
  image-rendering: pixelated;
}
.fc.top { box-shadow: inset 0 0 0 calc(var(--c) * 0.012) rgba(0, 0, 0, 0.22); }
.fc.s { transform-origin: 50% 100%; transform: rotateX(-90deg); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2); }
.fc.n { transform-origin: 50% 0; transform: rotateX(90deg); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.2); }
.fc.e { transform-origin: 100% 50%; transform: rotateY(90deg); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.38); }
.fc.w { transform-origin: 0 50%; transform: rotateY(-90deg); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.38); }

/* every world sets these textures (textures() in js/ui.js) */
.cub.grass .fc { background-image: var(--tex-land-side); }
.cub.grass .fc.e { background-image: var(--tex-land-e); }
.cub.grass .fc.w { background-image: var(--tex-land-w); background-position: 100% 0; }
.cub.grass .fc.top { background-image: var(--tex-land-top); }
.cub.path .fc, .cub.ghost .fc { background-image: var(--tex-path-side); }
.cub.path .fc.e, .cub.ghost .fc.e { background-image: var(--tex-path-e); }
.cub.path .fc.w, .cub.ghost .fc.w { background-image: var(--tex-path-w); background-position: 100% 0; }
.cub.path .fc.top, .cub.ghost .fc.top { background-size: 100% 100%; }
.cub.birch .fc { background-image: var(--tex-label); background-size: calc(var(--c) * 0.5) calc(var(--c) * 0.5); }
.cub.rack .fc { background-image: var(--tex-track); }
.cub.rack.on .fc { background-image: var(--tex-track-on); }
.cub.gate .fc { background-image: var(--tex-gate); }
.cub.goldb .fc { background-image: var(--tex-prize-block); background-size: 100% 100%; }
.cub.pile .fc { background-image: var(--tex-pile); background-size: 100% 100%; }
.cub.end.reached .fc.top { box-shadow: inset 0 0 0 calc(var(--c) * 0.03) #fff6c4, 0 0 calc(var(--c) * 0.45) #ffe96b; }

/* the island's cut-away front: grass, dirt, stone */
.chunk {
  position: absolute;
  background: var(--tex-chunk) 0 0 / var(--c) calc(var(--c) * 3);
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--c) * 0.3)) rotateX(-90deg);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.22);
  image-rendering: pixelated;
}

/* labels printed on the birch planks */
.lbl {
  position: absolute; display: flex; align-items: center; justify-content: center;
  color: var(--label-ink, #3b3220); font-weight: 700; font-size: calc(var(--c) * 0.36); line-height: 1;
  text-shadow: calc(var(--c) * 0.02) calc(var(--c) * 0.02) 0 var(--label-glow, rgba(255, 255, 255, 0.5));
}

/* water, flowing down a texel at a time, with faint lines between the squares */
.pond {
  position: absolute;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.24) calc(var(--c) * 0.02), transparent 0),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.24) calc(var(--c) * 0.02), transparent 0),
    var(--tex-floor);
  background-size: var(--c) var(--c);
  image-rendering: pixelated;
  animation: flow 4s steps(16) infinite;
}
@keyframes flow { to { background-position: 0 0, 0 0, 0 var(--c); } }
.anc { position: absolute; visibility: hidden; }

/* path blocks fall into place */
.cub.new { animation: drop3d 0.4s cubic-bezier(.35, 1.5, .6, 1); }
@keyframes drop3d { from { transform: translateZ(calc(var(--c) * 1.8)); } }

/* things standing on the board, turned to face the viewer */
.bb { position: absolute; transform-origin: 50% 100%; transform: translateZ(var(--z)) rotateX(calc(var(--tilt) * -1)); pointer-events: none; }
.bb .spr { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.bb .spr.strip { background-size: calc(var(--n) * 100%) 100%; animation: strip 1s steps(var(--n)) infinite; }
@keyframes strip { from { background-position: 0 0; } to { background-position: calc(var(--fw) * var(--n) * -1) 0; } }
.bb .say {
  position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap; line-height: 1.2;
  font-size: calc(var(--c) * 0.2); font-weight: 700; color: #fff; text-shadow: calc(var(--c) * 0.025) calc(var(--c) * 0.025) 0 #3f3f3f;
}
.bb.chest.reached .spr { filter: drop-shadow(0 0 calc(var(--c) * 0.12) #ffe96b); }
.bb.portal .spr.strip { animation-duration: 1.3s; }
.bb.portal .spr { transition: filter 0.3s; }
.bb.portal.burst .spr { filter: brightness(1.8) drop-shadow(0 0 calc(var(--c) * 0.2) #b06bff); }

/* keys and ingots: dropped items turning round and bobbing on the water */
.bb.item .spr { animation: strip 2.4s steps(12) infinite, bob 2s ease-in-out infinite; }
.bb.item.land .spr { animation: strip 2.4s steps(12) infinite, land 0.55s ease-out, bob 2s ease-in-out 0.55s infinite; }
.bb.item.ingot .spr { filter: drop-shadow(0 0 calc(var(--c) * 0.06) rgba(255, 230, 90, 0.9)); }
@keyframes bob { 0%, 100% { transform: translateY(-7%); } 50% { transform: translateY(7%); } }
@keyframes land { from { transform: translateY(-320%); } 60% { transform: translateY(8%); } }
.shadow { position: absolute; border-radius: 50%; background: rgba(0, 20, 40, 0.35); }
.shadow.halo { background: radial-gradient(closest-side, rgba(0, 20, 40, 0.38), rgba(0, 20, 40, 0.18) 60%, transparent); }
/* on the darker floors, keys and snacks sit in a pool of light and glow */
body[data-world='deep'] .shadow.halo { background: radial-gradient(closest-side, rgba(225, 255, 255, 0.75), rgba(127, 246, 246, 0.35) 55%, transparent); }
body[data-world='end'] .shadow.halo { background: radial-gradient(closest-side, rgba(240, 225, 255, 0.55), rgba(180, 120, 255, 0.25) 55%, transparent); }
body[data-world='deep'] .bb.item.key .spr { filter: drop-shadow(0 0 calc(var(--c) * 0.035) #ffffff) drop-shadow(0 0 calc(var(--c) * 0.12) #7ff6f6); }
body[data-world='end'] .bb.item.key .spr { filter: drop-shadow(0 0 calc(var(--c) * 0.08) rgba(190, 255, 210, 0.9)); }

/* the dragon flaps, the Warden lumbers; both roar when they win */
.bb.pig.boss .spr.strip { animation: strip 0.6s steps(2) infinite; }
.bb.pig.boss.end .spr.strip { animation: strip 0.5s steps(2) infinite, hover 1.6s ease-in-out infinite; }
.bb.pig.boss.deep .spr.strip { animation-duration: 0.8s; }
.bb.pig.boss.new .spr.strip { animation: strip 0.6s steps(2) infinite, arrive 0.5s ease-out; }
.bb.pig.boss.cheer .spr.strip { animation: strip 0.35s steps(2) infinite; }
@keyframes hover { 50% { transform: translateY(-6%); } }

/* piglins: the one in front walks, they all cheer when they win */
.bb.pig .spr.strip { animation: strip 0.55s steps(2) infinite; }
.bb.pig.new .spr { animation: arrive 0.5s ease-out; }
.bb.pig.new .spr.strip { animation: strip 0.55s steps(2) infinite, arrive 0.5s ease-out; }
.bb.pig.cheer .spr.strip { animation: strip 0.42s steps(2) infinite; }
@keyframes arrive { from { transform: translateY(-45%); opacity: 0; } }

/* where the drawn card may go */
.mark { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.mark::before {
  content: ''; position: absolute; inset: 7%;
  border: calc(var(--c) * 0.055) dashed rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.18);
  animation: pulse 1.1s ease-in-out infinite;
}
.mark.watch { cursor: default; }
.mark.watch::before { border-style: dotted; background: rgba(255, 255, 255, 0.08); }
@keyframes pulse { 50% { background: rgba(255, 255, 255, 0.36); transform: scale(0.92); } }
.mark:focus-visible { outline: calc(var(--c) * 0.05) solid var(--yellow); outline-offset: calc(var(--c) * -0.05); }

/* the card tried out on a square: a block hovering in place */
.cub.ghost .fc { opacity: 0.92; }
.cub.ghost .fc.top { outline: calc(var(--c) * 0.05) solid #fff; outline-offset: calc(var(--c) * -0.05); box-shadow: 0 0 calc(var(--c) * 0.3) rgba(255, 255, 255, 0.9); }
.cub.ghost.hint .fc.top { outline-color: var(--yellow); box-shadow: 0 0 calc(var(--c) * 0.4) var(--yellow); }
.cub.ghost.theirs .fc.top { outline-style: dashed; }
.cub.ghost.spin { animation: spin3d 0.2s ease-out; }
@keyframes spin3d { from { transform: rotateZ(-90deg); } }

/* a square's name popping up, and a flash round it */
.cell-flash { position: absolute; border: calc(var(--c) * 0.07) solid var(--yellow); animation: flash 1.4s ease-out forwards; }
.cell-flash.bad { border-color: var(--red); }
@keyframes flash { 0%, 60% { opacity: 1; } to { opacity: 0; } }
.bb.cell-tag span {
  display: block; text-align: center;
  font-weight: 700; font-size: calc(var(--c) * 0.42); color: var(--yellow);
  text-shadow: calc(var(--c) * 0.035) calc(var(--c) * 0.035) 0 #3f3f15;
  animation: rise 1.4s ease-out forwards;
}
.bb.cell-tag.bad span { color: var(--red); text-shadow: calc(var(--c) * 0.035) calc(var(--c) * 0.035) 0 #3f1515; }
@keyframes rise { from { transform: translateY(20%); opacity: 0; } 20%, 70% { opacity: 1; } to { transform: translateY(-60%); opacity: 0; } }

/* the hotbar under the island: keys collected and gold ingots */
.hud { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--c) * 1.15); justify-content: center; pointer-events: none; }
.hotbar { display: flex; align-items: flex-end; gap: calc(var(--c) * 0.3); }
.hotbar .group { display: flex; flex-direction: column; align-items: center; gap: calc(var(--c) * 0.04); }
.hotbar .cap { font-size: calc(var(--c) * 0.2); font-weight: 700; color: #fff; text-shadow: calc(var(--c) * 0.025) calc(var(--c) * 0.025) 0 #3f3f3f; white-space: nowrap; }
.hotbar .slots {
  display: flex; gap: 0; padding: calc(var(--c) * 0.04);
  background: rgba(0, 0, 0, 0.6); border: calc(var(--c) * 0.035) solid #000;
}
.slot {
  position: relative; width: calc(var(--c) * 0.82); height: calc(var(--c) * 0.82);
  border: calc(var(--c) * 0.04) solid var(--slot);
  box-shadow: inset 0 0 0 calc(var(--c) * 0.03) #5a5a5a;
  background: rgba(139, 139, 139, 0.25);
}
.slot .spr { position: absolute; inset: 10%; background-size: 100% 100%; image-rendering: pixelated; }
.slot .count { position: absolute; right: 4%; bottom: -2%; font-size: calc(var(--c) * 0.28); font-weight: 700; color: #fff; text-shadow: calc(var(--c) * 0.03) calc(var(--c) * 0.03) 0 #3f3f3f; }
.slot.full { border-color: #fff; }
.slot.got .spr { animation: got 0.5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes got { from { transform: scale(0.2); } }
.slot.used .spr { opacity: 0.35; filter: grayscale(0.6); }
.slot.used::after { content: '✓'; position: absolute; right: 6%; top: -4%; font-size: calc(var(--c) * 0.3); font-weight: 700; color: var(--green); text-shadow: calc(var(--c) * 0.03) calc(var(--c) * 0.03) 0 #153f15; }

/* ------------------------------------------------------------------ */
/* the panel                                                            */
/* ------------------------------------------------------------------ */

.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.logo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.logo img { display: block; max-width: 100%; height: auto; }
.logo .top { width: 92%; }
.logo .gold { width: 46%; margin-top: -2%; }
.brand-btns { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; }
.icon-btn {
  min-width: 2.4em; height: 2.4em; padding: 0 0.5em; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3em;
  color: #fff; text-shadow: 2px 2px 0 #3f3f3f; cursor: pointer;
  background: #6f6f6f var(--tex-stone) 0 0 / 32px 32px; background-blend-mode: multiply;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -3px 0 rgba(0, 0, 0, 0.45);
}
.icon-btn svg { width: 1.2em; height: 1.2em; }
.icon-btn:hover { outline: 2px solid #fff; outline-offset: -4px; }
.icon-btn.off { color: #a0a0a0; }
.room-pill { font-size: 13px; letter-spacing: 0.08em; text-transform: none; }
.room-pill .dot { width: 0.6em; height: 0.6em; background: var(--green); box-shadow: 0 0 0 2px #000; }
.room-pill.lost .dot { background: var(--red); }

/* the players, in turn order */
.players { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 0 0 auto; }
.chip {
  display: flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.6em 0.25em 0.3em; font-size: 0.9em; font-weight: 600;
  background: rgba(0, 0, 0, 0.55); border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #5a5a5a;
  color: #e0e0e0; text-shadow: 2px 2px 0 #3f3f3f;
}
.chip .head { width: 1.6em; height: 1.6em; }
.chip.now { color: var(--yellow); box-shadow: inset 0 0 0 2px #fff; background: rgba(0, 0, 0, 0.75); }
.chip.now .head { animation: nod 1s steps(2) infinite; }
@keyframes nod { 50% { transform: translateY(-10%); } }
.chip.away { opacity: 0.5; }
.chip .you { font-size: 0.75em; color: var(--green); }
.head { display: inline-block; background: no-repeat center / contain; flex: 0 0 auto; }
.chip .head { width: 1.75em; height: 1.75em; margin: -0.15em 0; }

/* the turn box: a Minecraft inventory panel */
.gui {
  background: var(--gui);
  color: var(--ink);
  border: 2px solid #000;
  box-shadow: inset 3px 3px 0 var(--gui-light), inset -3px -3px 0 var(--gui-dark);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.turn { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.turn-body { padding: 0.75em 0.85em 0.85em; display: flex; flex-direction: column; gap: 0.6em; overflow: auto; }
.turn h2 { margin: 0; font-size: 1.25em; line-height: 1.15; display: flex; align-items: center; gap: 0.4em; color: #2b2b2b; }
.turn h2 .head { width: 1.5em; height: 1.5em; }
.turn .msg { margin: 0; font-size: 0.95em; line-height: 1.3; min-height: 2.6em; color: #3f3f3f; }
.turn .msg b { color: #1f1f1f; }
.turn .msg .good { color: #1d7a12; }
.turn .msg .bad { color: #a01010; }

/* deck, drawn card, dice */
.table-row { display: flex; align-items: center; justify-content: center; gap: 1em; min-height: 5.4em; padding-bottom: 0.9em; }
.deck { position: relative; width: 5.4em; height: 5em; padding: 0; border: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.deck .vx, .slot3d .vx { position: absolute; inset: 0; background: no-repeat center bottom / contain; }
.deck .count { position: absolute; right: -0.2em; bottom: -0.2em; font-size: 1.15em; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.deck:disabled { cursor: default; filter: saturate(0.55) brightness(0.85); }
.deck.ready { animation: wiggle 1.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-4deg) translateY(-3%); } 90% { transform: rotate(4deg); } }
.deck.empty { visibility: hidden; }
.slot3d { position: relative; width: 5em; height: 5em; flex: 0 0 auto; }
.slot3d.empty { border: 3px dashed #8b8b8b; background: rgba(0, 0, 0, 0.06); }
.slot3d.piglin .vx { inset: -12% 0 0; }
.slot3d .shape-name { position: absolute; left: -15%; right: -15%; bottom: -1.25em; text-align: center; font-size: 0.72em; font-weight: 700; color: #3f3f3f; white-space: nowrap; }
.slot3d.flip .vx { animation: pop3d 0.4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop3d { from { transform: translateY(30%) scale(0.3); opacity: 0; } }

.dice { display: flex; gap: 0.9em; align-items: center; }
.die3d { position: relative; display: inline-block; width: 2.6em; height: 2.6em; perspective: 14em; }
.die3d .cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-32deg) var(--show); }
.die3d .cube b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
  background: var(--tex-die) 0 0 / 100% 100%; image-rendering: pixelated;
  border: 2px solid var(--die-edge, #3b2a15);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35);
}
.die3d .f0 { transform: translateZ(1.3em); }
.die3d .f1 { transform: rotateY(90deg) translateZ(1.3em); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.3); }
.die3d .f2 { transform: rotateY(180deg) translateZ(1.3em); }
.die3d .f3 { transform: rotateY(-90deg) translateZ(1.3em); box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.3); }
.die3d .f4 { transform: rotateX(90deg) translateZ(1.3em); box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.12); }
.die3d .f5 { transform: rotateX(-90deg) translateZ(1.3em); }
/* the face keeps the cube's font size (its distance from the middle is in em); the bigger label is inside */
.die3d .cube b span { font-size: 1.2em; }
.die3d.letter b { color: var(--die-letter, #a01818); }
.die3d.number b { color: var(--die-number, #1d6a17); }
body[data-world='end'] .die3d b, body[data-world='deep'] .die3d b { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
.die3d.rolling .cube { animation: roll3d 0.42s linear infinite; }
.die3d.number.rolling .cube { animation-duration: 0.36s; animation-direction: reverse; }
@keyframes roll3d { from { transform: rotateX(0) rotateY(0) rotateZ(0); } to { transform: rotateX(360deg) rotateY(720deg) rotateZ(180deg); } }
.die3d.settle .cube { animation: settle 0.6s cubic-bezier(.3, 1.35, .5, 1); }
@keyframes settle { from { transform: translateY(-40%) rotateX(150deg) rotateY(130deg) rotateZ(40deg); } }
.for-item { display: flex; flex-direction: column; align-items: center; gap: 0.2em; font-size: 0.75em; font-weight: 700; }
.for-item .spr { width: 3em; height: 3em; background-size: 100% 100%; image-rendering: pixelated; }

.btns { display: flex; gap: 0.5em; flex-wrap: wrap; }
.btns .btn { flex: 1 1 auto; }

/* status: piglins on the way, keys, cards left */
.status { display: flex; gap: 0.5em 1em; flex-wrap: wrap; align-items: center; font-size: 0.85em; font-weight: 600; color: #3f3f3f; padding-top: 0.15em; border-top: 2px solid #a0a0a0; }
.status span { display: inline-flex; align-items: center; gap: 0.3em; }
.status .mini { width: 1.3em; height: 1.3em; background: no-repeat center / contain; display: inline-block; image-rendering: pixelated; }
.meter { display: inline-flex; gap: 2px; }
.meter i { width: 0.55em; height: 0.85em; background: #8b8b8b; box-shadow: inset 0 0 0 1px #555; }
.meter i.on { background: #d0574f; box-shadow: inset 0 0 0 1px #5a1210; }
.meter i.gold { background: var(--gold); box-shadow: inset 0 0 0 1px #8a5c06; }

/* ------------------------------------------------------------------ */
/* buttons                                                              */
/* ------------------------------------------------------------------ */

.btn {
  min-height: 2.6em; padding: 0.45em 1em;
  font-size: 1em; font-weight: 600; line-height: 1.1;
  color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  cursor: pointer;
  background: #707070 var(--tex-stone) 0 0 / 40px 40px; background-blend-mode: multiply;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -3px 0 rgba(0, 0, 0, 0.45);
}
.btn:hover:not(:disabled) { outline: 2px solid #fff; outline-offset: -4px; }
.btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled, .btn.go:disabled, .btn.gold:disabled, .btn.red:disabled { cursor: default; color: #a0a0a0; text-shadow: none; background: #2c2c2c; box-shadow: none; }
.btn.go { background-color: #4f9a2e; }
.btn.gold { background-color: #e4b31e; text-shadow: 2px 2px 0 #6b4a00; }
.btn.red { background-color: #b33a2e; }
.btn.big { font-size: 1.2em; min-height: 2.8em; }
.btn .ic { width: 1.3em; height: 1.3em; background-size: 100% 100%; display: inline-block; flex: 0 0 auto; }
.btn.on { outline: 2px solid #fff; outline-offset: -4px; color: var(--yellow); }
.btn.seg-on { background-color: #4f9a2e; color: #fff; outline: 2px solid #fff; outline-offset: -4px; }

/* ------------------------------------------------------------------ */
/* toast: the advancement pop-up                                        */
/* ------------------------------------------------------------------ */

.toast {
  position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); z-index: 40;
  transform: translate(-50%, calc(-100% - 40px));
  transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1);
  min-width: min(320px, 92vw); max-width: 92vw;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
  background: #212121; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.25;
  border: 2px solid #000; box-shadow: inset 0 0 0 2px #555, 0 6px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); }
.toast .t-ic { width: 40px; height: 40px; flex: 0 0 auto; background-size: 100% 100%; }
.toast .t-title { color: var(--yellow); font-size: 0.85em; }
.toast .t-text { color: #fff; }

/* ------------------------------------------------------------------ */
/* pop-up screens                                                       */
/* ------------------------------------------------------------------ */

.modal {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.55);
  overflow: auto;
}
.modal[hidden] { display: none; }
.sheet {
  width: min(560px, 100%); max-height: 100%; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 20px;
  font-size: 17px;
}
.sheet.gui { color: var(--ink); }
.sheet.wide { width: min(760px, 100%); }
.sheet > * { flex-shrink: 0; }
.sheet h2 { margin: 0; font-size: 1.5em; line-height: 1.1; color: #2b2b2b; }
.sheet h3 { margin: 0.2em 0 0; font-size: 1em; color: #2b2b2b; }
.sheet p { margin: 0; line-height: 1.35; }
.sheet .fine { font-size: 0.82em; opacity: 0.8; }
.sheet .row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sheet .row .btn { flex: 1 1 200px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { flex: 1 1 0; min-width: 6.5em; flex-direction: column; gap: 0.1em; }
.seg.count .btn { min-width: 2.6em; }
.seg .btn small { font-size: 0.7em; opacity: 0.85; text-shadow: 1px 1px 0 #3f3f3f; }
.blurb { font-size: 0.85em; min-height: 1.3em; text-align: center; }

/* choosing a world */
.seg.worlds .btn.world { flex-direction: row; gap: 0.5em; min-height: 3em; }
.btn.world .wic { width: 2em; height: 2em; background: no-repeat center / contain; flex: 0 0 auto; }
.world-blurb { margin: -4px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--yellow); text-shadow: 2px 2px 0 #3f3f15; }
.sheet.lobby .seg.worlds .btn.world { color: #fff; }

/* the title screen */
.modal.title {
  background:
    var(--tex-island) center 62% / min(980px, 120vw) auto no-repeat,
    linear-gradient(#5d8fe6 0%, #8db6f7 55%, #c4dafc 100%);
  animation: float 9s ease-in-out infinite alternate;
}
.sheet.start { background: none; border: 0; box-shadow: none; clip-path: none; color: #fff; padding: 8px; gap: 10px; width: min(620px, 100%); }
.title-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 14px; }
.title-logo img { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.title-logo .top { width: min(520px, 94%); }
.title-logo .gold { width: min(300px, 54%); }
.edition { font-size: 15px; font-weight: 700; letter-spacing: 0.3em; color: #e8e8e8; text-shadow: 2px 2px 0 #3f3f3f; margin-top: 2px; }
.splash {
  position: absolute; right: 2%; bottom: 18%;
  color: var(--yellow); font-weight: 700; font-size: 19px; text-shadow: 2px 2px 0 #3f3f15;
  transform: rotate(-18deg); transform-origin: center;
  animation: splash 0.55s ease-in-out infinite alternate;
  white-space: nowrap; pointer-events: none;
}
@keyframes splash { to { transform: rotate(-18deg) scale(1.08); } }
.panel-box { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-box.dark { background: rgba(0, 0, 0, 0.9); border: 2px solid #000; box-shadow: inset 0 0 0 2px #444; color: #fff; }
.panel-box.dark h3 { color: #fff; text-shadow: 2px 2px 0 #3f3f3f; margin: 0; font-size: 1em; }
.panel-box.dark .fine { color: #d0d0d0; opacity: 1; }
.seats-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seat-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px;
  background: rgba(139, 139, 139, 0.25); border: 2px solid #000; box-shadow: inset 0 0 0 2px var(--slot);
  cursor: pointer; font-size: 0.85em; font-weight: 600; color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
}
.seat-pick .head { width: 2.6em; height: 2.6em; }
.seat-pick.off { opacity: 0.35; }
.seat-pick .swap { font-size: 0.75em; color: #cfcfcf; }
.seat-pick:hover { box-shadow: inset 0 0 0 2px #fff; }
.copyright { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; opacity: 0.85; padding: 0 2px; }
.join-row, .link-row { display: flex; gap: 8px; flex-wrap: wrap; }
.join-row .btn, .link-row .btn { flex: 0 0 auto; }
.code-input, .link-input {
  flex: 1 1 140px; min-width: 0; height: 2.6em; padding: 0 0.6em;
  font: 700 1.1em var(--font); letter-spacing: 0.12em; color: #fff;
  background: #000; border: 2px solid #a0a0a0; outline: none;
}
.code-input:focus { border-color: #fff; }
.link-input { font-size: 0.85em; letter-spacing: 0; }
.start-msg { min-height: 1.2em; color: var(--yellow); text-shadow: 2px 2px 0 #3f3f15; font-weight: 600; }
.warn { color: #a01010; font-weight: 600; }
.panel-box.dark .warn { color: #ff8a80; }

/* help */
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.help-list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.3; }
.help-list .ic { width: 44px; height: 44px; flex: 0 0 auto; background-size: 100% 100%; border: 2px solid #000; image-rendering: pixelated; }
.help-list .ic.bare { border: 0; background: no-repeat center / contain; image-rendering: auto; }

/* the lobby */
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seats li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: rgba(0, 0, 0, 0.08); border: 2px solid #8b8b8b; }
.seats li.in { border-color: #3a7d22; }
.seats li.away { opacity: 0.6; }
.seats li.empty { opacity: 0.55; border-style: dashed; }
.seats .head { width: 2em; height: 2em; }
.seats .seat-name { font-weight: 700; flex: 1 1 auto; }
.seats .seat-status { font-size: 0.85em; }
.seats button.swap { font-size: 0.8em; min-height: 2em; padding: 0.2em 0.6em; }
.tv-code { font-size: 2.2em; font-weight: 700; letter-spacing: 0.2em; text-align: center; }

/* the end of the game */
.modal.won { background: radial-gradient(circle at 50% 40%, rgba(120, 90, 10, 0.75), rgba(0, 0, 0, 0.82) 70%); }
.modal.died { background: rgba(110, 0, 0, 0.72); }
.sheet.ending { background: none; border: 0; box-shadow: none; clip-path: none; color: #fff; text-align: center; align-items: center; gap: 14px; }
.ending h2 { font-size: 2.3em; color: #fff; text-shadow: 3px 3px 0 #3f3f3f; }
.ending.win h2 { color: var(--gold); text-shadow: 3px 3px 0 #5a3c00; }
.ending .score { font-size: 1.1em; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; }
.ending .score b { color: var(--yellow); }
.ending .row { width: min(420px, 100%); flex-direction: column; }
.ending .row .btn { flex: 0 0 auto; width: 100%; }
.ending .pic { display: flex; gap: 6px; justify-content: center; align-items: flex-end; }
.ending .pic i { display: block; background: no-repeat center bottom / contain; }
.ending .pic i.hero { width: 76px; height: 76px; }
.ending .pic i.pig { width: 70px; height: 120px; background-size: calc(var(--n) * 100%) 100%; background-position: 0 0; animation: strip 0.42s steps(var(--n)) infinite; }

/* ------------------------------------------------------------------ */
/* effects layer: things flying across the screen                       */
/* ------------------------------------------------------------------ */

.fx { position: fixed; inset: 0; pointer-events: none; z-index: 35; overflow: hidden; }
.fx .fly { position: fixed; left: 0; top: 0; background-size: 100% 100%; will-change: transform; }
.fx .fly.px { image-rendering: pixelated; }
.fx .fly.contain { background: no-repeat center / contain; }
.fx .bit { position: fixed; background-size: 100% 100%; animation: fall linear forwards; }
@keyframes fall { from { transform: translateY(-10vh) rotate(0); } to { transform: translateY(110vh) rotate(540deg); } }
.fx .orb { position: fixed; background-size: 100% 100%; animation: float 2.2s ease-out forwards; }
@keyframes float { from { transform: translateY(0) scale(0.4); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-40vh) scale(1); opacity: 0; } }

/* ------------------------------------------------------------------ */
/* drawing a card: opening a booster pack (js/pack.js)                  */
/* ------------------------------------------------------------------ */

.pk {
  position: fixed; inset: 0; z-index: 34;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(30, 14, 50, 0.35), rgba(0, 0, 0, 0.74) 72%);
  --cw: min(260px, 60vw, 36vh);
  pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
  overflow: hidden;
}
.pk.in { opacity: 1; }
.pk.out, .pk.in.out { opacity: 0; }
.pk.mine { pointer-events: auto; cursor: pointer; }
.pk-who { margin: 0 0 calc(var(--cw) * 0.24); font-size: 22px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; text-align: center; }
.pk-hint { margin: calc(var(--cw) * 0.1) 0 0; min-height: 1.3em; font-size: 18px; font-weight: 700; color: var(--yellow); text-shadow: 2px 2px 0 #3f3f15; animation: pk-nudge 0.9s ease-in-out infinite alternate; }
@keyframes pk-nudge { to { transform: translateY(-4px) scale(1.04); } }
.pk-says { position: absolute; left: -9999px; }

.pk-box {
  position: relative; width: var(--cw); height: calc(var(--cw) * 1.4);
  font-size: calc(var(--cw) / 16);
  transform: translateY(75vh) rotate(-9deg);
  transition: transform 0.38s cubic-bezier(.25, 1.3, .5, 1);
}
.pk.in .pk-box { transform: none; }
.pk.shake .pk-box { animation: pk-shake 0.55s ease-in-out infinite; }
@keyframes pk-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-3deg) translateX(-2%); } 40% { transform: rotate(3deg) translateX(2%); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }

/* the wrapper: an inside, the card, the front, and the strip that tears off */
.pk-part { position: absolute; left: -6%; right: -6%; transition: transform 0.42s cubic-bezier(.4, 0, .6, 1), opacity 0.42s; }
.pk-inside { top: 3%; bottom: -7%; z-index: 1; background: linear-gradient(#08200d, #1a4a22); }
.pk-body { top: 3%; bottom: -7%; z-index: 3; }
.pk-top { top: -15%; height: 19%; z-index: 4; transition: transform 0.4s ease-in, opacity 0.4s ease-in; }
.pk-slot { position: absolute; inset: 0; z-index: 2; perspective: calc(var(--cw) * 4); transform: translateY(6%); transition: transform 0.42s cubic-bezier(.3, 1.2, .5, 1); }
.pk.rip .pk-top { transform: translate(55%, -170%) rotate(38deg); opacity: 0; }
.pk.rise .pk-slot { transform: translateY(-48%); }
.pk.rise .pk-inside, .pk.rise .pk-body { transform: translateY(46%); }
.pk.pull .pk-slot { transform: translateY(0) scale(1.05); z-index: 5; }
.pk.pull .pk-inside, .pk.pull .pk-body { transform: translateY(135%) rotate(-7deg); opacity: 0; }

.pk-foil {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 5px, transparent 5px 10px),
    linear-gradient(170deg, #154a1d 0%, #2c8a36 32%, #8fd65a 47%, #2c8a36 62%, #10391a 100%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.pk-crimp { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 3px, rgba(255, 255, 255, 0.12) 3px 6px); }
.pk-crimp.bottom { top: auto; bottom: 0; height: 7%; }
.pk-top .pk-crimp { height: 52%; }
.pk-tear { position: absolute; left: 4%; right: 4%; bottom: 16%; text-align: center; font-size: 0.6em; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); border-bottom: 2px dashed rgba(255, 255, 255, 0.65); }
.pk-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: pk-shine 2.4s ease-in-out infinite;
}
@keyframes pk-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.pk-art-front { position: absolute; inset: 9% 8% 10%; display: flex; flex-direction: column; align-items: center; gap: 2%; }
.pk-art-front img { image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.pk-logo-top { width: 94%; }
.pk-logo-gold { width: 58%; margin-top: -2%; }
.pk-edition { font-size: 0.68em; font-weight: 700; letter-spacing: 0.25em; color: #fff; text-shadow: 1px 1px 0 #2a2a2a; }
.pk-mascot { flex: 1 1 auto; width: 72%; min-height: 0; background: no-repeat center / contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35)); }
.pk-ribbon { background: #ffd83a; color: #3f2a00; font-weight: 700; font-size: 0.85em; padding: 0.2em 0.8em; border: 2px solid #6b4a00; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); white-space: nowrap; }
.pk-bit { position: absolute; top: 0; width: 8px; height: 8px; z-index: 6; }

/* glory rays behind the card once it is turned over */
.pk-rays {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: calc(var(--cw) * 3.4); height: calc(var(--cw) * 3.4); margin: calc(var(--cw) * -1.7) 0 0 calc(var(--cw) * -1.7);
  opacity: 0; transform: scale(0.3);
  transition: opacity 0.5s, transform 0.6s cubic-bezier(.3, 1.3, .5, 1);
}
.pk-rays i {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(var(--ray) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 60%);
  mask: radial-gradient(circle, #000 16%, transparent 60%);
  animation: pk-spin 10s linear infinite;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk.flip .pk-rays { opacity: 0.9; transform: scale(1); }
.pk-box.common { --ray: rgba(255, 255, 255, 0.5); }
.pk-box.uncommon { --ray: rgba(140, 225, 255, 0.6); }
.pk-box.rare { --ray: rgba(255, 214, 64, 0.8); }
.pk-box.hostile { --ray: rgba(255, 70, 50, 0.7); }

/* the trading card */
.pk-card { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform 0.62s cubic-bezier(.3, 1.3, .5, 1); }
.pk.flip .pk-card { transform: rotateY(0deg); }
.pk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6% / 4.3%; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.pk-back {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 6px, transparent 6px 12px), linear-gradient(160deg, #2c7a2a, #17451a);
  border: 0.35em solid #1a3312;
  display: flex; align-items: center; justify-content: center;
}
.pk-back span { font-size: 5em; font-weight: 700; color: #ffd83a; text-shadow: 0.08em 0.08em 0 #6b4a00; }
.pk-front { display: flex; flex-direction: column; gap: 0.35em; padding: 0.55em; background: var(--frame); border: 0.25em solid var(--edge); color: #2b2b2b; }
.pk-card.common { --frame: linear-gradient(160deg, #c4c4c4, #8d8d8d); --edge: #444; --bar: #ececec; --gem: #41d97c; --gem-edge: #0e6b33; }
.pk-card.uncommon { --frame: linear-gradient(160deg, #dbeaf3, #93adbf); --edge: #4a6276; --bar: #f4f9fc; --gem: #5fe6e6; --gem-edge: #136c79; }
.pk-card.rare { --frame: linear-gradient(160deg, #ffe680, #e0a315); --edge: #7a5200; --bar: #fff6cf; --gem: #ffd83a; --gem-edge: #7a5200; }
.pk-card.hostile { --frame: linear-gradient(160deg, #ad3d35, #5a1917); --edge: #2a0b0a; --bar: #f6d3ce; --gem: #ff5a3c; --gem-edge: #5a1917; }
.pk-name { display: flex; justify-content: space-between; align-items: center; gap: 0.3em; background: var(--bar); border: 2px solid var(--edge); padding: 0.2em 0.45em; font-weight: 700; font-size: 1.05em; white-space: nowrap; }
.pk-gems { display: flex; gap: 0.3em; padding-right: 0.15em; }
.pk-gem { width: 0.55em; height: 0.55em; background: var(--gem); border: 2px solid var(--gem-edge); transform: rotate(45deg); }
.pk-art { position: relative; flex: 0 0 auto; height: 45%; border: 2px solid var(--edge); overflow: hidden; }
.pk-art.meadow { background: linear-gradient(#7fb6ff 0%, #c4e2ff 58%, #6cb046 58.5%, #4c8a2e 100%); }
.pk-art.nether { background: radial-gradient(circle at 50% 85%, #ff9a3a 0%, #b02a1e 38%, #3c0d0b 82%); }
.pk-pic { position: absolute; inset: 7% 12%; background: no-repeat center / contain; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.35)); }
.pk-pic.px { image-rendering: pixelated; }
.pk-type { display: flex; justify-content: space-between; font-size: 0.72em; font-weight: 700; background: var(--bar); border: 2px solid var(--edge); padding: 0.15em 0.45em; }
.pk-text { flex: 1 1 auto; font-size: 0.78em; line-height: 1.25; background: #efe6c8; border: 2px solid var(--edge); padding: 0.35em 0.5em; color: #3a3020; }
.pk-foot { display: flex; justify-content: space-between; font-size: 0.58em; font-weight: 700; color: rgba(0, 0, 0, 0.6); }
.pk-card.hostile .pk-foot { color: rgba(255, 255, 255, 0.85); }
.pk-gloss {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.6) 48%, transparent 60%);
  background-size: 260% 100%; background-position: 130% 0;
}
.pk.flip .pk-gloss { animation: pk-shine 1.1s ease-out 0.35s 1 both; }
/* rare cards are holo, piglins shimmer red */
.pk-card.rare .pk-front::after, .pk-card.hostile .pk-front::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-size: 240% 240%; mix-blend-mode: color-dodge;
  animation: pk-holo 2.6s linear infinite;
}
.pk-card.rare .pk-front::after { background-image: linear-gradient(120deg, transparent 15%, rgba(255, 90, 170, 0.22) 30%, rgba(255, 235, 80, 0.22) 42%, rgba(80, 255, 170, 0.22) 54%, rgba(80, 170, 255, 0.22) 66%, transparent 82%); }
.pk-card.hostile .pk-front::after { background-image: linear-gradient(120deg, transparent 25%, rgba(255, 120, 60, 0.2) 45%, rgba(255, 60, 40, 0.18) 55%, transparent 75%); }
@keyframes pk-holo { from { background-position: 100% 0; } to { background-position: -140% 0; } }

/* short screens (a phone on its side): the card comes up less far */
@media (max-height: 520px) {
  .pk.rise .pk-slot { transform: translateY(-32%); }
  .pk.rise .pk-inside, .pk.rise .pk-body { transform: translateY(42%); }
}

/* for people who prefer less motion: the card simply appears */
.pk.quick .pk-part { display: none; }
.pk.quick .pk-box, .pk.quick .pk-slot, .pk.quick .pk-card { transition: none; transform: none; }

/* ------------------------------------------------------------------ */
/* small screens                                                        */
/* ------------------------------------------------------------------ */

/* underneath the board: players and the small buttons share one row */
.app.portrait .panel { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'players brand' 'turn turn'; align-content: start; gap: 8px; }
.app.portrait .brand { grid-area: brand; }
.app.portrait .players { grid-area: players; justify-content: flex-start; align-self: center; }
.app.portrait .turn { grid-area: turn; }
.app.portrait .brand .logo { display: none; }
.app.portrait .brand-btns { max-width: none; flex-wrap: nowrap; }
.app.portrait .icon-btn { font-size: calc(var(--pf) * 0.9); }
.app.portrait .chip { font-size: 0.85em; }
.app.tight .turn .msg { min-height: 0; }
.app.tight .table-row { min-height: 4.2em; }
.app.tight .card { width: 4em; height: 4em; }
.app.tight .die { width: 2.2em; height: 2.2em; }
.app.tight .turn-body { gap: 0.45em; padding: 0.55em 0.7em 0.65em; }
.app.tight .turn h2 { font-size: 1.1em; }
.app.short .logo { display: none; }
@media (max-width: 520px) {
  .seats-pick { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: 14px; font-size: 16px; }
  .ending h2 { font-size: 1.8em; }
  .splash { font-size: 14px; bottom: 32%; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

@keyframes float { to { background-position: center 58%, 0 0; } }

/* ------------------------------------------------------------------ */
/* the worlds: the sky behind the island                                */
/* ------------------------------------------------------------------ */

body[data-world='end'] {
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 12%, #e6d8ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 38% 64%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 86%, #cbb6ff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 58% 34%, #fff 50%, transparent 52%),
    linear-gradient(#0d0718 0%, #1c1030 55%, #2a1846 100%) fixed;
  background-size: 260px 260px, 300px 300px, 340px 340px, 220px 220px, 280px 280px, 380px 380px, auto;
}
body[data-world='deep'] { background: radial-gradient(ellipse at 50% 30%, #0f2a30 0%, #071417 55%, #030809 100%) fixed; }
body[data-world='end'] .clouds, body[data-world='deep'] .clouds { display: none; }
body[data-world='end'] .modal.title {
  background: var(--tex-island) center 62% / min(980px, 120vw) auto no-repeat, linear-gradient(#0d0718 0%, #1c1030 55%, #2a1846 100%);
}
body[data-world='deep'] .modal.title {
  background: var(--tex-island) center 62% / min(980px, 120vw) auto no-repeat, radial-gradient(ellipse at 50% 35%, #12333a 0%, #071417 60%, #020607 100%);
}
body[data-world='deep'] .hud .cap, body[data-world='end'] .hud .cap { color: #fff; }

/* the booster pack in each world's colours, and the picture window on enemy cards */
.pk.w-end .pk-foil {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 5px, transparent 5px 10px),
    linear-gradient(170deg, #2a1240 0%, #6b2fa0 32%, #c27ff0 47%, #6b2fa0 62%, #1d0b2e 100%);
}
.pk.w-deep .pk-foil {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 5px, transparent 5px 10px),
    linear-gradient(170deg, #062226 0%, #0f5a62 32%, #33d7e2 47%, #0f5a62 62%, #041619 100%);
}
.pk.w-end .pk-inside { background: linear-gradient(#12051f, #2a1240); }
.pk.w-deep .pk-inside { background: linear-gradient(#020a0c, #0b3a40); }
.pk-art.void { background: radial-gradient(circle at 50% 70%, #6b2fa0 0%, #241040 40%, #07030d 85%); }
.pk-art.deep { background: radial-gradient(circle at 50% 65%, #2be0e6 0%, #0f5a62 30%, #041619 80%); }
.slot3d.boss .vx { inset: -10% -18% 0; }
.ending .pic i.pig.boss { height: 150px; }

/* the draw-a-card screen in each world's colours */
.pk.w-end { background: radial-gradient(circle at 50% 45%, rgba(90, 30, 140, 0.45), rgba(6, 2, 14, 0.82) 72%); }
.pk.w-deep { background: radial-gradient(circle at 50% 45%, rgba(20, 110, 120, 0.4), rgba(1, 8, 10, 0.85) 72%); }
.pk.w-end .pk-back {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 6px, transparent 6px 12px), linear-gradient(160deg, #6a32a4, #2a1046);
  border-color: #1e0b30;
}
.pk.w-end .pk-back span { color: #f0eba8; text-shadow: 0.08em 0.08em 0 #3c1450; }
.pk.w-deep .pk-back {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px), linear-gradient(160deg, #11575f, #031a1e);
  border-color: #020f12;
}
.pk.w-deep .pk-back span { color: #7ff6f6; text-shadow: 0.08em 0.08em 0 #04262b; }
.pk.w-end .pk-ribbon { background: #f0eba8; border-color: #3c1450; color: #3c1450; }
.pk.w-deep .pk-ribbon { background: #7ff6f6; border-color: #04262b; color: #04262b; }