/* playcombatcritters.com, built by tools/site_build.py. The game's own pieces do the talking: the real
   World of Mischief pack (tear it open), real Set 1 full arts that catch the light, real screens, real
   story panels and die-cut stickers, all on the press bed of the game's menus ("Fresh off the Press",
   docs/ART-DIRECTION.md). Type: Mochiy Pop One for titles, Zen Maru Gothic for reading (both OFL). */

@font-face { font-family: "Mochiy Pop One"; src: url("/fonts/mochiy-pop-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("/fonts/zen-maru-gothic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("/fonts/zen-maru-gothic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zen Maru Gothic"; src: url("/fonts/zen-maru-gothic-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
	--bed: #151a2e;
	--bed-hi: #2a3563;
	--stock: #f6ecd6;
	--ink: #191622;
	--ink-soft: #5d5468;
	--on-bed: #fff8ec;
	--on-bed-soft: rgba(255, 248, 236, 0.74);
	--pink: #ec3f7c;
	--cyan: #1fa7dc;
	--yellow: #ffc83a;
	--plate: var(--pink);
	--display: "Mochiy Pop One", "Arial Rounded MT Bold", sans-serif;
	--body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
	--gutter: clamp(16px, 4vw, 40px);
	--zig-top: polygon(0% 0%, 100% 0%, 100.00% 12.69%, 93.75% 14.01%, 87.50% 12.34%, 81.25% 14.43%, 75.00% 12.55%, 68.75% 13.91%, 62.50% 12.30%, 56.25% 14.15%, 50.00% 12.28%, 43.75% 14.21%, 37.50% 12.29%, 31.25% 14.11%, 25.00% 12.63%, 18.75% 13.90%, 12.50% 12.71%, 6.25% 13.96%, 0.00% 12.48%);
	--zig-body: polygon(0.00% 12.48%, 6.25% 13.96%, 12.50% 12.71%, 18.75% 13.90%, 25.00% 12.63%, 31.25% 14.11%, 37.50% 12.29%, 43.75% 14.21%, 50.00% 12.28%, 56.25% 14.15%, 62.50% 12.30%, 68.75% 13.91%, 75.00% 12.55%, 81.25% 14.43%, 87.50% 12.34%, 93.75% 14.01%, 100.00% 12.69%, 100% 100%, 0% 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0; min-height: 100vh; overflow-x: clip;
	background-color: var(--bed);
	background-image:
		radial-gradient(ellipse 90% 50% at 50% -6%, var(--bed-hi), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 248, 236, 0.05) 1px, transparent 1.5px);
	background-size: auto, 7px 7px;
	color: var(--on-bed);
	font: 400 1.08rem/1.75 var(--body);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 0.55em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); text-shadow: 0.06em 0.06em 0 var(--plate); }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--yellow); color: var(--ink); padding: 8px 14px; z-index: 30; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ the bar */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 18px var(--gutter); max-width: 1180px; margin: 0 auto; position: relative; z-index: 5; }
.mark { font-family: var(--display); font-size: 1.1rem; text-decoration: none; text-shadow: 2px 2px 0 var(--pink); }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.95rem; font-weight: 700; }
.bar nav a { text-decoration: none; color: var(--on-bed-soft); padding: 4px 0; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--on-bed); text-decoration: underline; text-decoration-color: var(--yellow); }
main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) 30px; }

/* ------------------------------------------------------------------ stickers */
.sticker { position: absolute; width: var(--s, 130px); height: auto; pointer-events: none; z-index: 4; filter: drop-shadow(0 6px 0 rgba(2, 3, 8, 0.42)); }

/* ------------------------------------------------------------------ the hero: the pack table */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 10px clamp(30px, 5vw, 70px); padding: 10px 0 clamp(50px, 8vw, 100px); }
.table { --pw: clamp(200px, 24vw, 290px); --w: clamp(120px, 13vw, 176px); position: relative; height: calc(var(--pw) * 1.625 + var(--w) * 0.9); }
.pack {
	position: absolute; left: 50%; bottom: 34px; width: var(--pw); aspect-ratio: 640 / 1040; margin: 0 0 0 calc(var(--pw) / -2);
	padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; touch-action: pan-y;
	transform: rotate(-3deg); filter: drop-shadow(0 14px 0 rgba(2, 3, 8, 0.5));
}
.pack-top, .pack-body { position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.6s ease; }
.pack-top, .pack-body > .wrap { width: 100%; height: 100%; border-radius: 6px; }
.pack-top { clip-path: var(--zig-top); }
.pack-body > .wrap { clip-path: var(--zig-body); }
.pack:hover .pack-top { transform: translateY(-4px) rotate(-1deg); }
.hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); margin: 0; white-space: nowrap; font-weight: 700; font-size: 0.95rem; color: var(--on-bed-soft); transition: opacity 0.3s; }
.again {
	position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-1.5deg); z-index: 6;
	font: 400 0.95rem var(--display); color: var(--ink); background: var(--stock); border: 0; border-radius: 4px; padding: 9px 16px 8px; cursor: pointer; white-space: nowrap;
	box-shadow: 0 0 0 2.5px var(--ink), 4px 4px 0 2.5px var(--cyan);
}
.again[hidden] { display: none; }

.hand { position: absolute; inset: 0; z-index: 2; }
.card {
	position: absolute; left: 50%; top: calc(50% - var(--w) * 0.86); width: var(--w); margin: 0 0 0 calc(var(--w) / -2); transform-origin: 50% 125%;
	transform: translateX(calc((var(--i) - 2) * var(--w) * 0.38)) rotate(calc((var(--i) - 2) * 7deg));
	transition: transform 0.75s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.4s ease;
	transition-delay: calc(0.32s + var(--i) * 0.08s);
	z-index: calc(10 - (var(--i) - 2) * (var(--i) - 2));
}
.js .table:not(.torn) .card { transform: translateY(70%) scale(0.85); opacity: 0; transition-delay: 0s; }
.torn .pack-top { transform: translate(40%, -80%) rotate(24deg); opacity: 0; }
.torn .pack-body { transform: translateY(70%) rotate(-5deg); opacity: 0; transition-delay: 0.12s; }
.torn .pack { pointer-events: none; }
.torn .hint { opacity: 0; }
html:not(.js) .hint { display: none; }

.card-face {
	position: relative; background: var(--stock); color: var(--ink); border-radius: 11px; padding: 7px 7px 6px; overflow: hidden;
	box-shadow: 0 0 0 3px var(--ink), 0 12px 0 3px rgba(2, 3, 8, 0.5);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s ease;
}
.card.lit .card-face { transition: none; }
.card-face::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
	background:
		radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 42%),
		linear-gradient(115deg, rgba(255, 90, 160, 0) 30%, rgba(255, 90, 160, 0.28) 42%, rgba(90, 220, 255, 0.28) 52%, rgba(255, 230, 90, 0.26) 62%, rgba(255, 230, 90, 0) 74%);
	background-size: 100% 100%, 220% 220%;
	background-position: 0 0, var(--mx, 50%) var(--my, 50%);
	mix-blend-mode: soft-light;
}
.card.lit .card-face::after { opacity: 1; }
.card-name { font-family: var(--display); font-size: calc(var(--w) * 0.088); line-height: 1.1; margin: 1px 2px 6px; padding-left: 7px; border-left: 5px solid var(--el); }
.card img { aspect-ratio: 2 / 3; width: 100%; height: auto; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px; }
.card-foot { display: flex; justify-content: space-between; gap: 6px; margin: 5px 2px 0; font-size: calc(var(--w) * 0.052); line-height: 1.2; font-weight: 700; color: var(--ink-soft); }
.s-rillip { --s: clamp(70px, 8vw, 110px); right: -15%; bottom: 31%; transform: rotate(9deg); }

.hero-words h1 { font-size: clamp(1.9rem, 4.1vw, 3.35rem); line-height: 1.12; text-shadow: 0.05em 0.05em 0 var(--pink); }
.hero-words h1 .line { display: block; white-space: nowrap; }
.lede { font-size: clamp(1.08rem, 1.8vw, 1.25rem); max-width: 34ch; color: var(--on-bed); }
.ticket {
	display: inline-block; margin: 4px 0 0; padding: 9px 18px 8px; background: var(--yellow); color: var(--ink);
	font-family: var(--display); font-size: 1rem; transform: rotate(-2deg);
	box-shadow: 0 0 0 2.5px var(--ink), 5px 5px 0 2.5px var(--pink);
}

/* ------------------------------------------------------------------ real screens */
.screens { position: relative; padding: 10px 0 80px; --plate: var(--cyan); }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; margin-top: 26px; }
.shot { margin: 0; }
.shot:nth-child(odd) { transform: rotate(-1.4deg); }
.shot:nth-child(even) { transform: rotate(1.2deg) translateY(16px); }
.phone { border-radius: 28px; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 9px var(--ink), 8px 8px 0 9px var(--plate), 0 18px 0 9px rgba(2, 3, 8, 0.45); }
.shot:nth-child(2) .phone { --plate: var(--yellow); }
.shot:nth-child(3) .phone { --plate: var(--pink); }
.shot:nth-child(4) .phone { --plate: var(--yellow); }
.phone img { width: 100%; height: auto; aspect-ratio: 720 / 1560; object-fit: cover; }
.shot figcaption { margin-top: 26px; font-size: 0.98rem; line-height: 1.6; color: var(--on-bed-soft); }
.shot figcaption strong { display: block; color: var(--on-bed); font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin-bottom: 2px; }
.s-wibbo { --s: clamp(80px, 8vw, 118px); right: 1%; top: -10px; transform: rotate(-8deg); }

/* ------------------------------------------------------------------ the story strip */
.strip { position: relative; padding: 10px 0 90px; --plate: var(--yellow); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: start; margin-top: 24px; }
.panel { position: relative; margin: 0; background: #fff; padding: 8px; box-shadow: 0 0 0 4px var(--ink), 0 14px 0 4px rgba(2, 3, 8, 0.45); }
.panel img { width: 100%; height: auto; border: 3px solid var(--ink); }
.p1 { transform: rotate(-1.2deg); }
.p2 { transform: rotate(0.9deg) translateY(30px); }
.panel figcaption {
	position: absolute; left: -10px; bottom: -22px; max-width: 86%; padding: 8px 14px 9px; background: var(--yellow); color: var(--ink);
	font-weight: 700; font-size: 0.98rem; line-height: 1.45; box-shadow: 0 0 0 3px var(--ink);
}
.s-voltaji { --s: clamp(84px, 10vw, 140px); right: 2%; top: -18px; transform: rotate(8deg) scaleX(-1); }

/* ------------------------------------------------------------------ fair */
.fair {
	position: relative; max-width: 780px; margin: 10px auto 60px; padding: clamp(26px, 4vw, 40px); color: var(--ink); background: var(--stock); border-radius: 3px;
	transform: rotate(-0.6deg); box-shadow: 0 0 0 3px var(--ink), 9px 8px 0 3px var(--pink), 0 16px 0 3px rgba(2, 3, 8, 0.45);
}
.fair h2 { text-shadow: none; color: var(--ink); }
.fair p { font-size: 1.12rem; max-width: 58ch; margin: 0; }
.s-chivalrat { --s: clamp(90px, 9vw, 130px); right: -46px; top: -54px; transform: rotate(12deg); }

/* ------------------------------------------------------------------ documents */
.piece-flat { background: var(--stock); color: var(--ink); border-radius: 3px; box-shadow: 0 0 0 3px var(--ink), 8px 7px 0 3px var(--plate), 0 14px 0 3px rgba(2, 3, 8, 0.45); }
.doc { max-width: 760px; margin: 20px auto 40px; padding: clamp(24px, 5vw, 48px); line-height: 1.75; }
.doc h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.doc h2 { font-size: 1.3rem; margin-top: 1.7em; text-shadow: none; }
.doc h3 { font-size: 1.05rem; margin-top: 1.3em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.4em; }
.doc a { color: #0f6f99; }
.doc strong { font-weight: 900; }
.lost { text-align: center; }

/* ------------------------------------------------------------------ the foot */
.foot { max-width: 1180px; margin: 0 auto; padding: 30px var(--gutter) 46px; color: var(--on-bed-soft); font-size: 0.92rem; border-top: 2px dashed rgba(255, 248, 236, 0.16); }
.foot p { margin: 0 0 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; }
.foot-small { font-size: 0.82rem; }

/* ------------------------------------------------------------------ tablets and phones */
@media (max-width: 980px) {
	.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.hero { grid-template-columns: minmax(0, 1fr); }
	.hero-words { order: -1; }
	.table { --pw: clamp(180px, 50vw, 270px); --w: clamp(104px, 27vw, 170px); }
	.panels { grid-template-columns: minmax(0, 1fr); gap: 50px; }
	.p2 { transform: rotate(0.9deg); }
	.panel figcaption { position: relative; left: -16px; bottom: auto; max-width: calc(100% + 8px); margin: -14px 0 -6px; }
	.s-chivalrat { right: -8px; top: -60px; }
}
@media (max-width: 560px) {
	.shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; padding: 12px 12px 26px; margin: 14px calc(var(--gutter) * -1) 0; }
	.shot { flex: 0 0 66%; scroll-snap-align: center; }
	.shot:nth-child(n) { transform: none; }
	.s-wibbo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.card, .pack img, .card-face { transition: none !important; }
}

/* cards: their place in the fan, their element's colour (tools/site_build.py) */
.card:nth-child(1) { --i: 0; }
.card:nth-child(2) { --i: 1; }
.card:nth-child(3) { --i: 2; }
.card:nth-child(4) { --i: 3; }
.card:nth-child(5) { --i: 4; }
.el-fire { --el: #e0602b; }
.el-water { --el: #2f86d6; }
.el-earth { --el: #9a6a3c; }
.el-nature { --el: #3f9a52; }
.el-electricity { --el: #d39a12; }
.el-light { --el: #c39a3a; }
.el-sand { --el: #c48a32; }
.el-ghost { --el: #6b5bb0; }
.el-neutral { --el: #7d7a70; }