/* yapkins.com: Merlo's night sky and colours (as his chat in the app), and the app's pixel font */

/* Pixelify Sans as the app has it (its 2 and 5 redrawn, so they never read as Z and S), served from here */
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/pixelify-sans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
:root {
  --sky-top: #16102A; --sky-bottom: #100C20;   /* his deep purple, darker toward the bottom */
  --card: rgba(42, 34, 72, 0.78);              /* his text box colour, the sky faintly through it */
  --edge: #B8A8F0;                              /* his border lavender */
  --ink: #F0ECFF; --soft: #B8B0D8;              /* his words, and his notes */
  --title: #B48CFF;                             /* his purple, for titles and links */
  --button: #6A50D0;                            /* his speech bubble violet */
}
* { box-sizing: border-box; }
/* no square flash over a tapped button or link on phones (round and see-through ones included), and no box
   left round one after a click: only a keyboard's focus shows, following each button's own round shape */
html { background: var(--sky-bottom); -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
body { margin: 0; color: var(--ink); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* the sky behind everything: his stars, and two purple cloud layers gliding slowly back and forth
   in opposite directions at different speeds, the nearer one brightening and dimming a little */
html::before, body::before, body::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; }
html::before { z-index: -3; background: url("/sky/stars.png") repeat, linear-gradient(var(--sky-top), var(--sky-bottom)); image-rendering: pixelated; }
/* at least half as wide again as the screen (slid within it) and as tall, never squashed (the pictures are 1.8 times as wide as tall) */
body::before, body::after { background-size: max(150vw, 180vh) max(100vh, 83.4vw); background-repeat: no-repeat; }
body::before { z-index: -2; background-image: url("/sky/clouds_far.webp"); animation: drift-far 45s ease-in-out infinite alternate; }
body::after { z-index: -1; background-image: url("/sky/clouds_near.webp"); animation: drift-near 28s ease-in-out infinite alternate, glow 5s ease-in-out infinite alternate; }
@keyframes drift-far { from { background-position: 0 0; } to { background-position: -50vw 0; } }
@keyframes drift-near { from { background-position: -50vw 0; } to { background-position: 0 0; } }
@keyframes glow { from { opacity: 0.7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
h1, h2 { font-family: "Pixelify Sans", system-ui, sans-serif; color: var(--title); line-height: 1.2; }
h1 { font-size: 2.2rem; margin: 0.4em 0; }
h2 { font-size: 1.35rem; margin-top: 2em; }
a { color: var(--title); }
p, li { color: var(--ink); }
.muted { color: var(--soft); font-size: 0.95rem; }
/* the bar at the top (as Portal 23's): one glass pill, staying at the top. The menu icon and the page
   you're on open a list of every page; on wider screens Join the list sits in the bar too, on phones
   only in the list, so the bar stays one tidy pill */
.bar { position: sticky; top: 16px; z-index: 10; display: flex; align-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(184, 168, 240, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
  0 10px 22px -8px rgba(0, 0, 0, 0.45), 0 0 22px -6px rgba(180, 140, 255, 0.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color 0.8s ease-out, box-shadow 0.8s ease-out; }
.bar:hover, .bar:focus-within { border-color: rgba(184, 168, 240, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 26px -8px rgba(0, 0, 0, 0.5), 0 0 36px -4px rgba(180, 140, 255, 0.7); }
.jump { flex: 1; min-width: 0; }
.jump summary { position: relative; display: flex; justify-content: center; align-items: center; list-style: none; cursor: pointer;
  padding: 10px 52px; border-radius: 999px; font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 1.15rem; color: var(--ink); }
.jump summary::-webkit-details-marker { display: none; }
.jump summary:hover { background: rgba(255, 255, 255, 0.05); }
.menu-icon { position: absolute; left: 20px; width: 18px; height: 18px; fill: none; stroke: var(--soft); stroke-width: 5; stroke-linecap: round; }
.here-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; border-radius: 18px;
  background: var(--sky-top); border: 1px solid rgba(184, 168, 240, 0.4); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6); }   /* solid: nothing shows through */
.drop a { display: block; padding: 10px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.drop a:hover { background: rgba(255, 255, 255, 0.1); }
.drop a.here { color: var(--title); font-weight: 600; }
.drop .line { margin: 6px 8px; border-top: 1px solid rgba(184, 168, 240, 0.3); }
.quick { display: flex; padding-right: 6px; flex: none; }
/* Join the list: a little button pill inside the bar's pill, as the page's other buttons */
.quick a { padding: 4px 14px; border-radius: 999px; background: var(--button); border: 2px solid var(--edge); color: var(--ink);
  font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 0.95rem; text-decoration: none; }
.quick a:hover { background: #7A60E0; }
@media (max-width: 600px) { .quick { display: none; } }
/* Yapkins, big under the bar on every page (above Merlo where he is) */
.wordmark { display: block; width: fit-content; margin: 32px auto 20px; font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--title); text-decoration: none; position: relative; }
/* the trademark mark, small and raised after the wordmark, kept out of its width so the word stays centred */
.wordmark .tm { position: absolute; left: 100%; top: 0; margin-left: 2px; font-size: 0.35em; font-weight: 500; }
.hero { text-align: center; padding: 0 0 8px; }
.hero img { width: 240px; max-width: 70%; image-rendering: pixelated; }
.card { background: var(--card); border: 3px solid var(--edge); border-radius: 16px; padding: 20px 22px; margin-top: 24px; }
footer { margin-top: 56px; color: var(--soft); font-size: 0.9rem; text-align: center; }
/* the same empty space above the social buttons on every page: whatever comes last before the footer
   (a paragraph, the home page's hero, the Characters grid) brings no space of its own. The grid's own
   last card (whoever's newest) keeps its padding, so its pill stays off its edge and level with the row's */
main > :nth-last-child(2), main > :nth-last-child(2):not(.cast) > :last-child { margin-bottom: 0; padding-bottom: 0; }
/* our social pages, round glass buttons above the footer's words (as Portal 23's): each lights up in its own colour */
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.social a { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid transparent; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color 0.15s, background 0.15s, border-color 0.15s; }
.social a:hover { border-color: var(--brand); background: rgba(255, 255, 255, 0.2); color: var(--brand); }
.social a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand); }
.social a[hidden] { display: none; }
.social svg { width: 20px; height: 20px; }
.social .youtube { --brand: #FF0000; }
/* TikTok lights up as its logo does: a white note with its cyan and red edges either side */
.social .tiktok { --brand: #25F4EE; }
.social .tiktok:hover { color: #FFFFFF; }
.social .tiktok:hover svg { filter: drop-shadow(-1.5px -1.5px 0 #25F4EE) drop-shadow(1.5px 1.5px 0 #FE2C55); }
/* Instagram lights up in its sunset gradient, ring and camera both (a plain colour can't be a gradient,
   so a masked ring and a masked copy of the camera take over from the border and the drawn icon) */
.social .instagram { --brand: #D62976; --insta: linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF 80%, #4F5BD5);
  position: relative; }
.social .instagram::before, .social .instagram::after { content: ""; position: absolute; opacity: 0; transition: opacity 0.15s; background: var(--insta); pointer-events: none; }
.social .instagram::before { inset: -2px; border-radius: 50%; padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.social .instagram::after { width: 20px; height: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.social .instagram:hover { border-color: transparent; }
.social .instagram:hover::before, .social .instagram:hover::after { opacity: 1; }
.social .instagram svg { transition: opacity 0.15s; }
.social .instagram:hover svg { opacity: 0; }
.social .facebook { --brand: #1877F2; }
.social .linkedin { --brand: #0A66C2; }
.social .discord { --brand: #5865F2; }

/* the Characters page: a grid of Yapkins, each on its own card */
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
/* every card in a row as tall as the tallest, and the line taking up the spare room, so the Included and
   Collectible pills all sit along the bottom, level across the row however long each line is */
.yapkin { background: var(--card); border: 3px solid var(--edge); border-radius: 16px; padding: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.yapkin img { width: 100%; max-width: 200px; image-rendering: pixelated; }
.yapkin h2 { margin: 8px 0 4px; font-size: 1.3rem; }
.yapkin p { flex: 1; margin: 0 0 12px; font-size: 0.95rem; color: var(--soft); }
.tag { display: inline-block; font-family: "Pixelify Sans", system-ui, sans-serif; font-size: 0.9rem; padding: 2px 12px; border-radius: 999px; }
.tag.free { background: var(--button); border: 2px solid var(--edge); color: var(--ink); }
.tag.collect { border: 2px solid var(--title); color: var(--title); }
.tag.early { border: 2px dashed var(--title); color: var(--title); }   /* Villagers First: everyone's in so many days */
.button { display: inline-block; margin-top: 8px; padding: 8px 18px; border-radius: 999px; background: var(--button); border: 3px solid var(--edge); color: var(--ink); font-family: "Pixelify Sans", system-ui, sans-serif; text-decoration: none; }
.button:hover { background: #7A60E0; }
.button.outline { background: transparent; color: var(--edge); }
.button.outline:hover { background: rgba(184, 168, 240, 0.12); }
.button.danger { background: #C8404A; }   /* deleting an account */
.button.danger:hover { background: #D85058; }
/* two buttons side by side, the same size whatever their words */
.pair { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .button { margin-top: 0; display: flex; align-items: center; justify-content: center; text-align: center; }   /* the words in the middle, however tall the pair gets */

/* the Join the list form */
.form label { display: block; margin-top: 14px; font-family: "Pixelify Sans", system-ui, sans-serif; color: var(--title); }
.form label.tick { display: flex; gap: 10px; align-items: flex-start; font-family: inherit; color: var(--ink); line-height: 1.4; }
.form label.tick input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--title); flex: none; }
.form input:not([type=checkbox]), .form textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--soft); background: #2A2248; color: var(--ink); font: inherit; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--title); }
.form textarea { resize: vertical; }
.form #testing { margin: 6px 0 0 28px; }
.form .button { margin-top: 20px; cursor: pointer; font-size: 1rem; }
.form .button:disabled { opacity: 0.6; cursor: default; }
.problem { color: #FFB4A8; margin: 14px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.human { display: flex; justify-content: center; }
.form input.code { max-width: 220px; font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; font-family: "Pixelify Sans", system-ui, sans-serif; }