/* Punchline, cosy edition: a scrapbook on the kitchen table of a woodland lodge.
   The palette follows the viewer's clock: morning, day, dusk and night. */
:root {
  --paper: #F3E7CF;
  --paper-2: #EADAB9;
  --card: #FBF4E4;
  --sunken: #EFE1C4;
  --ink: #4A3526;
  --ink-soft: #7A6450;
  --stitch: rgba(122, 84, 52, .38);
  --wood: #B98352;
  --wood-hi: #CF9A66;
  --wood-dark: #6E4527;
  --sage: #93B27E;
  --sage-dark: #56744A;
  --berry: #D46A5C;
  --honey: #F0BE58;
  --leaf: #7DB26A;
  --polaroid: #FFFDF7;
  --sky-top: #F7E6C4;
  --doodle: #C9A06A;
  --doodle-2: #A7B98B;
  --glow: transparent;
  --shadow: 0 5px 0 rgba(90, 60, 35, .18);
  --shadow-lift: 0 10px 24px rgba(90, 60, 35, .16);
  --display: 'Fredoka', 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --meme: Anton, Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  color-scheme: light;
}
:root[data-time="morning"] { --sky-top: #E3EEEA; --doodle: #C4A673; }
:root[data-time="dusk"] { --sky-top: #F6C9A0; --paper: #F2E1C6; --doodle: #D08A62; }
:root[data-time="night"] {
  --paper: #2A2233; --paper-2: #342A3E; --card: #3A2F44; --sunken: #2B2334;
  --ink: #F6EAD7; --ink-soft: #CBB9A4; --stitch: rgba(246, 234, 215, .28);
  --wood: #9E6A40; --wood-hi: #B77E4F; --wood-dark: #4F301B;
  --polaroid: #F7EFE2; --sky-top: #1D1A33; --doodle: #6E5A7E; --doodle-2: #5E6E5A;
  --glow: rgba(255, 196, 110, .10);
  --shadow: 0 5px 0 rgba(0, 0, 0, .35); --shadow-lift: 0 10px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--sky-top), transparent 70%),
    radial-gradient(circle at 50% 30%, var(--glow), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--ink);
  font: 600 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sage-dark); outline-offset: 3px; border-radius: 10px; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
::selection { background: var(--honey); color: #3a2a1d; }

/* ---------- ambient doodles ---------- */
.doodles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dd { position: absolute; width: 30px; height: 30px; fill: var(--doodle); opacity: .55; animation: bob 7s ease-in-out infinite; }
.dd .vein, .dd .steam, .dd .handle { fill: none; stroke: var(--doodle); stroke-width: 2; stroke-linecap: round; }
.dd.leaf { fill: var(--doodle-2); }
.dd.leaf .vein { stroke: var(--paper); }
.dd.cup { width: 44px; height: 34px; }
.dd .stem { fill: var(--doodle-2); }
.d1 { top: 14%; left: 3%; } .d2 { top: 58%; left: 2%; animation-delay: -2s; width: 34px; height: 34px; }
.d3 { top: 40%; right: 2.5%; animation-delay: -4s; } .d4 { top: 11%; right: 6%; width: 22px; height: 22px; animation-delay: -1s; }
.d5 { top: 72%; right: 4%; animation-delay: -3s; } .d6 { top: 24%; right: 3%; animation-delay: -5s; width: 26px; height: 26px; }
.d7 { bottom: 8%; left: 5%; animation-delay: -6s; } .d8 { bottom: 14%; right: 12%; width: 20px; height: 20px; animation-delay: -2.5s; }
.dd.moon { display: none; }
:root[data-time="night"] .dd.moon { display: block; fill: #F3D98B; opacity: .85; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(6deg); } }
.firefly { display: none; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 10px 3px rgba(255, 216, 110, .6); animation: drift 11s ease-in-out infinite; }
:root[data-time="night"] .firefly, :root[data-time="dusk"] .firefly { display: block; }
:root[data-time="dusk"] .firefly { opacity: .5; }
.f1 { top: 30%; left: 8%; } .f2 { top: 65%; left: 90%; animation-delay: -3s; } .f3 { top: 85%; left: 30%; animation-delay: -6s; }
.f4 { top: 18%; left: 70%; animation-delay: -8s; } .f5 { top: 50%; left: 50%; animation-delay: -4.5s; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(40px, -30px); opacity: .5; } 75% { transform: translate(-20px, 20px); opacity: 1; } }

.app { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0) 16px calc(env(safe-area-inset-bottom, 0) + 28px); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px 12px; max-width: 1100px; width: 100%; margin-inline: auto; margin-bottom: 14px; border-bottom: 2px dashed var(--stitch); }
.logo { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--ink); }
.logo-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font: 700 20px/1 var(--display); color: #FFF6E3; background: var(--wood) repeating-linear-gradient(8deg, transparent 0 6px, rgba(0,0,0,.07) 6px 7px); border: 2px solid var(--wood-dark); box-shadow: 0 3px 0 var(--wood-dark); transform: rotate(-4deg); }
.logo-word { font: 700 24px/1 var(--display); letter-spacing: .005em; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.view { flex: 1; width: 100%; max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }

/* ---------- building blocks ---------- */
.card { position: relative; background: var(--card); border: 3px solid var(--wood); border-radius: 22px; padding: 24px 22px 22px; box-shadow: var(--shadow), var(--shadow-lift); }
/* Sewn-on look: a dashed stitch just inside the edge. */
.card::before { content: ''; position: absolute; inset: 7px; border: 2px dashed var(--stitch); border-radius: 16px; pointer-events: none; }
.card > * { position: relative; }
.card.tight { padding: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.h-display { font: 700 clamp(40px, 7.4vw, 70px)/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.h-display.center { text-align: center; }
.h-display .cursor { display: inline-block; width: .62em; height: .62em; margin-left: .12em; vertical-align: .05em; background: var(--honey); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(14deg) scale(1.12); } }
.squiggle { position: relative; white-space: nowrap; }
.squiggle::after { content: ''; position: absolute; left: 0; right: .2em; bottom: -.08em; height: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q 12 2 22 7 T 42 7 T 62 7 T 82 7 T 102 7 T 118 6' fill='none' stroke='%2393B27E' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.h2 { font: 700 26px/1.1 var(--display); color: var(--ink); }
.h3 { font: 700 19px/1.2 var(--display); color: var(--ink); }
.lede { font-size: 19px; max-width: 34ch; color: var(--ink-soft); }
.label { font: 800 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }
.on-ground { color: var(--ink); }
.hand { font: 700 24px/1.1 var(--hand); color: var(--sage-dark); }
:root[data-time="night"] .hand { color: #C8DDA8; }

/* Buttons: a plank of wood, a patch of felt, or a paper tag. */
.btn { appearance: none; position: relative; border: 3px solid var(--wood-dark); border-radius: 14px; background: #EFE3CB; color: #3E2C1F; box-shadow: 0 5px 0 var(--wood-dark); padding: 12px 18px; font: 700 17px/1.1 var(--display); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; transition: transform .08s, box-shadow .08s; touch-action: manipulation; text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--wood-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--wood-dark); filter: grayscale(.4); }
.btn.primary { color: #FFF6E3; text-shadow: 0 2px 0 rgba(70, 40, 20, .5); background: var(--wood) repeating-linear-gradient(3deg, transparent 0 9px, rgba(70, 40, 20, .1) 9px 10px, transparent 10px 17px, rgba(255, 230, 190, .12) 17px 18px); }
.btn.primary.big::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--wood-dark); box-shadow: inset 1px 1px 0 rgba(255,255,255,.25); left: 12px; }
.btn.primary.big::before { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--wood-dark); box-shadow: inset 1px 1px 0 rgba(255,255,255,.25); right: 12px; }
.btn.big { font-size: 22px; padding: 16px 30px; min-height: 64px; border-radius: 16px; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 15px; border-width: 2px; box-shadow: 0 3px 0 var(--wood-dark); border-radius: 12px; }
.btn.small:active { box-shadow: 0 0 0 var(--wood-dark); transform: translateY(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--wood); box-shadow: 0 3px 0 var(--wood); }
.btn.sage { background: var(--sage); color: #22321C; border-color: var(--sage-dark); box-shadow: 0 5px 0 var(--sage-dark); }
.btn.block { width: 100%; }

.field { display: flex; flex-direction: column; gap: 8px; }
.input { width: 100%; border: 2px solid var(--stitch); border-radius: 14px; padding: 12px 16px; font: 700 19px/1.2 var(--body); background: var(--sunken); color: var(--ink); min-height: 54px; box-shadow: inset 0 3px 0 rgba(90, 60, 35, .08); caret-color: var(--berry); }
.input:focus { outline: none; border-color: var(--sage-dark); background: var(--card); }
.input.code { font: 700 30px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; text-align: center; background: var(--sage); border-color: var(--sage-dark); color: #22321C; }
.input.code::placeholder { color: rgba(34, 50, 28, .45); }
.input::placeholder { color: color-mix(in srgb, var(--ink-soft) 60%, transparent); letter-spacing: normal; }

.pill { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--stitch); border-radius: 999px; padding: 3px 12px; font: 800 13px/1.4 var(--body); background: var(--sunken); color: var(--ink); }
.pill.sun { background: var(--honey); border-color: #C9962F; color: #3E2C1F; }
.code-badge { font: 700 16px/1 var(--mono); letter-spacing: .2em; color: #22321C; background: var(--sage); border: 2px solid var(--sage-dark); border-radius: 10px; padding: 9px 8px 9px 12px; box-shadow: 0 3px 0 var(--sage-dark); }

/* ---------- avatars ---------- */
.avatar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--sunken); border: 2px solid var(--wood); border-radius: 12px; overflow: hidden; padding: 3px; }
.avatar img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.avatar.lg { width: 64px; height: 64px; border-radius: 16px; }
.picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.pick { position: relative; aspect-ratio: 1; background: var(--sunken); border: 2px solid var(--stitch); border-radius: 12px; padding: 4px; box-shadow: 0 3px 0 rgba(90, 60, 35, .15); transition: transform .12s; }
.pick img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.pick:hover:not(:disabled) { transform: translateY(-3px) rotate(-3deg); }
.pick[aria-pressed="true"] { background: #FFF0C9; border-color: var(--wood-dark); box-shadow: 0 3px 0 var(--wood-dark); transform: translateY(-3px); }
.pick[aria-pressed="true"]::after { content: ''; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; background: var(--honey); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pick:disabled { opacity: .3; cursor: not-allowed; filter: grayscale(1); }
.pick-name { font: 700 26px/1 var(--hand); color: var(--sage-dark); min-height: 26px; }
:root[data-time="night"] .pick-name { color: #C8DDA8; }

/* ---------- home ---------- */
.home { display: grid; gap: 30px; grid-template-columns: 1.1fr 1fr; align-items: start; }
.home-hero { display: flex; flex-direction: column; gap: 18px; }
.bootline { font: 700 26px/1 var(--hand); color: var(--sage-dark); transform: rotate(-2deg); transform-origin: left; }
:root[data-time="night"] .bootline { color: #C8DDA8; }
.bootline b { font-weight: 700; color: var(--berry); }
.home-strip { display: flex; gap: 16px; margin-top: 10px; padding-inline: 4px; }
.home-strip .meme { width: 33%; border: 7px solid var(--polaroid); border-bottom-width: 22px; border-radius: 3px; box-shadow: 0 6px 14px rgba(70, 45, 25, .25); }
.home-strip .meme:nth-child(1) { transform: rotate(-4deg); }
.home-strip .meme:nth-child(2) { transform: rotate(2.5deg) translateY(12px); }
.home-strip .meme:nth-child(3) { transform: rotate(-1.5deg); }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font: 800 12px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; }
.or::before, .or::after { content: ''; flex: 1; border-top: 2px dashed var(--stitch); }
.how { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.how li { display: flex; gap: 12px; align-items: center; counter-increment: step; }
.how li::before { content: counter(step, decimal-leading-zero); font: 700 14px/1 var(--mono); color: #22321C; background: var(--sage); border: 2px solid var(--sage-dark); border-radius: 8px; padding: 5px 7px; flex: none; }

/* ---------- lobby ---------- */
.lobby { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; align-items: start; }
/* The room code hangs on a little wooden sign. */
.sign { position: relative; align-self: flex-start; margin-top: 26px; padding: 14px 26px 12px; border-radius: 14px; border: 3px solid var(--wood-dark); color: #FFF6E3; text-shadow: 0 3px 0 rgba(70, 40, 20, .5); background: var(--wood) repeating-linear-gradient(2deg, transparent 0 11px, rgba(70, 40, 20, .12) 11px 12px, transparent 12px 19px, rgba(255, 230, 190, .14) 19px 20px); box-shadow: 0 6px 0 var(--wood-dark); transform: rotate(-2deg); }
.sign::before, .sign::after { content: ''; position: absolute; top: -28px; width: 2px; height: 30px; background: var(--wood-dark); }
.sign::before { left: 22%; transform: rotate(14deg); }
.sign::after { right: 22%; transform: rotate(-14deg); }
.bigcode { font: 700 clamp(44px, 12vw, 70px)/1 var(--mono); letter-spacing: .14em; }
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.player { display: flex; align-items: center; gap: 10px; border: 2px solid var(--stitch); border-radius: 16px; padding: 8px 10px; background: var(--sunken); min-width: 0; }
.player.off { opacity: .45; }
.player.me { border-color: var(--sage-dark); background: color-mix(in srgb, var(--sage) 22%, var(--sunken)); }
.player-name { font: 700 18px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .tag { font: 700 19px/1 var(--hand); color: var(--ink-soft); margin-top: 2px; }
.kick { margin-left: auto; border: 0; background: none; font: 700 20px/1 var(--display); color: var(--berry); padding: 4px 6px; }
.setting { display: grid; gap: 6px; }
.setting-head { display: flex; justify-content: space-between; align-items: baseline; }
.setting-val { font: 700 18px/1 var(--mono); color: var(--wood-dark); }
:root[data-time="night"] .setting-val { color: var(--honey); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: var(--sunken); border: 2px solid var(--stitch); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--sunken); border: 2px solid var(--stitch); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--honey); border: 3px solid var(--wood-dark); box-shadow: 0 3px 0 var(--wood-dark); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--honey); border: 3px solid var(--wood-dark); }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--stitch); border-radius: 999px; padding: 8px 14px; font: 700 16px/1 var(--display); background: var(--sunken); color: var(--ink-soft); cursor: pointer; user-select: none; min-height: 44px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.toggle:has(input:checked) { background: var(--sage); border-color: var(--sage-dark); color: #22321C; }
.toggle:has(input:checked)::before { background: #22321C; box-shadow: inset 0 0 0 2px var(--sage); }
.toggle:has(input:focus-visible) { outline: 3px solid var(--sage-dark); outline-offset: 2px; }
.toggle .count { font: 700 13px/1 var(--mono); opacity: .7; }

/* ---------- game header ---------- */
.gamebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gamebar .round { font: 700 22px/1.1 var(--display); }
/* Timer: a honey-coloured candle burning down, with a tiny flame. */
.timer { position: relative; flex: 1 1 120px; min-width: 90px; height: 20px; border-radius: 999px; border: 2px solid var(--wood-dark); background: var(--sunken); box-shadow: inset 0 3px 0 rgba(90, 60, 35, .1); }
.timer-fill { position: absolute; inset: 2px auto 2px 2px; border-radius: 999px; background: var(--honey) repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .25) 14px 17px); transition: width .25s linear; max-width: calc(100% - 4px); }
.timer-fill::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 18px; margin-top: -13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFF3B0 0 25%, #FFB347 45%, rgba(255, 120, 50, .0) 72%); animation: flicker .5s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scale(1.1, .92) rotate(4deg); } }
.timer.low .timer-fill { background-color: var(--berry); }
.timer-num { font: 700 18px/1 var(--mono); min-width: 3.4ch; text-align: right; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--stitch); background: var(--sunken); }
.dot.done { background: var(--leaf); border-color: var(--sage-dark); }

/* ---------- meme renderer ---------- */
.meme { position: relative; width: 100%; overflow: hidden; background: #1c1712; user-select: none; -webkit-user-select: none; }
.meme > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.cap { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 0 .5%; }
.cap-text { width: 100%; font-family: var(--meme); line-height: 1.12; color: #fff; word-break: break-word; overflow-wrap: anywhere; letter-spacing: .01em;
  text-shadow: -.06em -.06em 0 #000, .06em -.06em 0 #000, -.06em .06em 0 #000, .06em .06em 0 #000, 0 .07em 0 #000, 0 -.07em 0 #000, .07em 0 0 #000, -.07em 0 0 #000; }
.cap.black .cap-text { color: #000; text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, -.05em .05em 0 #fff, .05em .05em 0 #fff, 0 .06em 0 #fff, 0 -.06em 0 #fff, .06em 0 0 #fff, -.06em 0 0 #fff; }
.meme.editing .cap { outline: 2px dashed rgba(255, 246, 227, .9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); border-radius: 6px; cursor: move; touch-action: none; }
.meme.editing .cap.active { outline: 3px solid var(--honey); }
.meme.editing .cap.empty .cap-text { opacity: .55; }
.cap .handle { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 8px 0 6px 0; background: var(--honey); border: 2px solid var(--wood-dark); cursor: nwse-resize; touch-action: none; display: none; }
.cap .handle::after { content: ''; position: absolute; inset: -10px; }
.meme.editing .cap.active .handle { display: block; }
.cap .num { position: absolute; left: 0; top: 0; font: 700 12px/1 var(--mono); background: var(--honey); color: #3E2C1F; padding: 4px 6px; border-radius: 6px 0 8px 0; display: none; }
.meme.editing .cap .num { display: block; }
/* Every meme is a polaroid taped into the scrapbook. */
.frame { position: relative; background: var(--polaroid); padding: 10px 10px 34px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 12px 26px rgba(70, 45, 25, .22); }
.frame::before, .frame::after { content: ''; position: absolute; top: -12px; width: 86px; height: 26px; background: rgba(168, 196, 150, .75); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); box-shadow: 0 1px 2px rgba(0,0,0,.1); z-index: 2; }
.frame::before { left: -14px; transform: rotate(-32deg); }
.frame::after { right: -14px; transform: rotate(32deg); background-color: rgba(240, 190, 88, .7); }
.frame .meme { border-radius: 2px; }

/* ---------- caption editor ---------- */
.editor { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.stage-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
.template-name { font: 700 22px/1.1 var(--hand); color: var(--ink-soft); }
.boxes { display: flex; flex-direction: column; gap: 10px; }
.box-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: start; }
.box-num { font: 700 14px/1 var(--mono); background: var(--sunken); border: 2px solid var(--stitch); border-radius: 10px; padding: 8px 0; text-align: center; margin-top: 8px; }
.box-row.active .box-num { background: var(--honey); border-color: #C9962F; color: #3E2C1F; }
.box-row textarea { width: 100%; border: 2px solid var(--stitch); border-radius: 14px; padding: 10px 14px; font: 700 18px/1.3 var(--body); resize: none; min-height: 56px; background: var(--sunken); color: var(--ink); caret-color: var(--berry); }
.box-row textarea:focus { outline: none; background: var(--card); }
.box-row.active textarea { border-color: var(--sage-dark); }
.box-tools { display: flex; flex-direction: column; gap: 6px; }
.icon-btn { width: 40px; height: 40px; border: 2px solid var(--wood-dark); border-radius: 12px; background: #EFE3CB; color: #3E2C1F; box-shadow: 0 3px 0 var(--wood-dark); display: grid; place-items: center; font: 700 16px/1 var(--display); padding: 0; }
.icon-btn:active { transform: translateY(3px); box-shadow: none; }
.icon-btn.swatch-white { background: #fff; }
.icon-btn.swatch-black { background: #2a1d16; color: #fff; }
.submitted-banner { background: color-mix(in srgb, var(--leaf) 30%, var(--card)); border: 2px dashed var(--sage-dark); border-radius: 14px; padding: 12px 14px; font: 700 17px/1.3 var(--display); }

/* ---------- voting ---------- */
.vote { display: grid; gap: 22px; justify-items: center; padding-top: 10px; }
.vote .frame { transform: rotate(-1.2deg); }
.vote-meta { color: var(--ink-soft); font: 700 22px/1 var(--hand); text-align: center; }
.vote-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(100%, 600px); }
.vbtn { position: relative; border: 3px solid var(--wood-dark); border-radius: 22px; color: #3E2C1F; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 17px/1.1 var(--display); min-height: 104px; justify-content: center; touch-action: manipulation; box-shadow: 0 6px 0 var(--wood-dark); transition: transform .1s, box-shadow .1s; }
.vbtn::before { content: ''; position: absolute; inset: 5px; border: 2px dashed rgba(62, 44, 31, .3); border-radius: 16px; pointer-events: none; }
.vbtn .emo { font-size: 38px; line-height: 1; font-family: system-ui, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; transition: transform .15s; }
.vbtn:hover .emo { transform: scale(1.12) rotate(-6deg); }
.vbtn.down { background: #EBA095; }
.vbtn.meh { background: #F5D48B; }
.vbtn.up { background: #AFD39A; }
.vbtn:active, .vbtn.chosen { transform: translateY(5px); box-shadow: 0 1px 0 var(--wood-dark); }
.vbtn.chosen { outline: 3px solid var(--ink); outline-offset: 4px; }
.vbtn.chosen .emo { transform: scale(1.18); }
.vbtn.faded { opacity: .45; }
.yours { background: var(--card); border: 2px dashed var(--wood); border-radius: 16px; padding: 14px 18px; font: 700 26px/1.1 var(--hand); color: var(--sage-dark); text-align: center; width: min(100%, 600px); }
:root[data-time="night"] .yours { color: #C8DDA8; }
.reveal { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; width: min(100%, 600px); }
.reveal .who { font: 700 26px/1.1 var(--display); }
.tally { display: flex; gap: 8px; flex-wrap: wrap; }
/* The score lands like an ink stamp. */
.score-pop { font: 700 32px/1 var(--display); color: var(--berry); padding: 6px 16px; border: 4px solid var(--berry); border-radius: 12px; transform: rotate(-8deg); background: color-mix(in srgb, var(--berry) 8%, transparent); animation: stamp .35s cubic-bezier(.2, 1.4, .4, 1); }
.score-pop:not(.neg) { color: var(--sage-dark); border-color: var(--sage-dark); background: color-mix(in srgb, var(--sage) 12%, transparent); }
:root[data-time="night"] .score-pop:not(.neg) { color: #C8DDA8; border-color: #C8DDA8; }
@keyframes stamp { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* ---------- results ---------- */
.results { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
.board { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.board li { display: grid; grid-template-columns: 34px 44px 1fr auto; align-items: center; gap: 10px; border: 2px solid var(--stitch); border-radius: 16px; padding: 6px 12px; background: var(--sunken); font-variant-numeric: tabular-nums; }
.board li:first-child { background: color-mix(in srgb, var(--honey) 30%, var(--sunken)); border-color: #C9962F; }
.board li.me .player-name { text-decoration: underline wavy var(--sage) 2px; text-underline-offset: 4px; }
.board .pos { font: 700 16px/1 var(--mono); color: var(--ink-soft); }
.board .pts { font: 700 18px/1 var(--mono); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 20px; align-items: start; padding-top: 12px; }
.tile { position: relative; background: var(--polaroid); padding: 9px 9px 0; border-radius: 4px; box-shadow: 0 10px 22px rgba(70, 45, 25, .2); display: flex; flex-direction: column; color: #3E2C1F; }
.tile:nth-child(3n+1) { transform: rotate(-1.5deg); } .tile:nth-child(3n+2) { transform: rotate(1deg); } .tile:nth-child(3n) { transform: rotate(-.5deg); }
.tile::before { content: ''; position: absolute; top: -11px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(240, 190, 88, .7); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px); transform: rotate(-3deg); z-index: 2; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px 10px; flex-wrap: wrap; }
.tile-foot .by { font: 700 24px/1 var(--hand); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-foot .mini { font: 700 13px/1 var(--mono); color: #7A6450; }
.tile-foot .pts { font: 700 15px/1 var(--mono); color: var(--sage-dark); }
.tile .btn.small { background: #EFE3CB; color: #3E2C1F; }
.crown { position: absolute; top: 18px; right: -8px; z-index: 3; font: 700 13px/1 var(--display); background: var(--honey); color: #3E2C1F; border: 2px solid #C9962F; padding: 6px 10px; border-radius: 8px; transform: rotate(6deg); box-shadow: 0 3px 0 #C9962F; }
/* Final podium: three tree stumps. */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; max-width: 620px; width: 100%; margin-inline: auto; }
.step { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.step .block { width: 100%; display: grid; place-items: center; font: 700 30px/1 var(--display); color: #FFF6E3; text-shadow: 0 2px 0 rgba(70, 40, 20, .5); border: 3px solid var(--wood-dark); border-radius: 50% 50% 12px 12px / 22px 22px 12px 12px; background: var(--wood) repeating-linear-gradient(90deg, transparent 0 12px, rgba(70, 40, 20, .12) 12px 14px); box-shadow: inset 0 14px 0 -4px #E0B684, 0 5px 0 var(--wood-dark); padding-top: 12px; }
.step.p1 .block { height: 140px; }
.step.p2 .block { height: 104px; }
.step.p3 .block { height: 78px; }
.step.p1 .avatar::before { content: ''; }
.step .who { font: 700 20px/1.1 var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .pts { font: 700 15px/1 var(--mono); color: var(--ink-soft); }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0) + 18px); transform: translateX(-50%) rotate(-1deg); background: #FFF6D8; color: #3E2C1F; border: 2px solid #C9962F; border-radius: 6px; padding: 12px 18px; font: 700 17px/1.3 var(--display); z-index: 100; max-width: calc(100% - 32px); box-shadow: 0 8px 18px rgba(70, 45, 25, .25); }
.center { text-align: center; }
.footnote { color: var(--ink-soft); font-size: 14px; text-align: center; }

@media (max-width: 820px) {
  .home, .lobby, .editor, .results { grid-template-columns: 1fr; gap: 26px; }
  .card { padding: 20px 18px 18px; border-radius: 20px; }
  .logo-word { font-size: 21px; }
  .gamebar .round { flex-basis: 100%; }
  .dd { opacity: .3; }
  .dd.cup, .d6, .d8 { display: none; }
}
@media (max-width: 420px) {
  .vbtn { min-height: 92px; font-size: 15px; }
  .vbtn .emo { font-size: 32px; }
  .gallery { grid-template-columns: 1fr; }
  .picker { gap: 5px; }
  .btn.big { font-size: 20px; }
  .frame { padding: 7px 7px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Loading and missing memes */
.meme.loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 246, 227, .18) 50%, transparent 70%) #2a211a; background-size: 200% 100%; animation: shimmer 1.2s linear infinite; z-index: 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
.meme.broken { background: repeating-linear-gradient(45deg, #EADAB9 0 14px, #E3CFA8 14px 28px); }
.broken-note { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; color: #6E4527; padding: 10%; }
.broken-note span { font: 700 24px/1.1 var(--hand); }
.broken-note small { font: 700 13px/1.2 var(--body); opacity: .7; }

/* Meme King crown */
.crown-ico { display: inline-block; width: 1.4em; height: 1.05em; vertical-align: -.15em; }
.crown-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pill .crown-ico { width: 20px; height: 15px; }
.tile-foot .crowns { display: inline-flex; align-items: center; gap: 2px; }

/* The crown button: a big golden medallion that glows while your crown is unspent. */
.crown-btn { position: relative; display: flex; align-items: center; gap: 16px; width: min(100%, 600px); padding: 12px 22px 12px 14px; border: 3px solid #A8741C; border-radius: 999px; color: #3E2C1F; text-align: left;
  background: linear-gradient(180deg, #FFE9A6, #F5C24E); box-shadow: 0 6px 0 #A8741C, 0 0 0 0 rgba(255, 196, 60, .6); transition: transform .1s, box-shadow .1s; }
.crown-btn.ready { animation: beckon 2.2s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { box-shadow: 0 6px 0 #A8741C, 0 0 0 0 rgba(255, 196, 60, .55); } 50% { box-shadow: 0 6px 0 #A8741C, 0 0 0 14px rgba(255, 196, 60, 0); } }
.crown-disc { flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF8DC, #F7D071 55%, #D99A2B); border: 3px solid #A8741C; box-shadow: inset 0 -4px 0 rgba(120, 70, 10, .25); }
.crown-disc .crown-ico { width: 48px; height: 36px; transition: transform .25s; }
.crown-btn.ready .crown-disc .crown-ico { animation: wobble 2.2s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.crown-text { display: flex; flex-direction: column; gap: 4px; }
.crown-label { font: 700 26px/1 var(--display); }
.crown-btn small { font: 700 14px/1.2 var(--body); opacity: .75; }
.crown-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #A8741C; }
.crown-btn.given { background: linear-gradient(180deg, #FFD95E, #F0B429); transform: translateY(5px); box-shadow: 0 1px 0 #A8741C; animation: none; }
.crown-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); animation: none; }

/* A crowned polaroid: golden glow and a crown perched on top. */
.frame.kinged, .tile.kinged { box-shadow: 0 0 0 4px #F5C24E, 0 0 38px 8px rgba(255, 196, 60, .55), 0 12px 26px rgba(70, 45, 25, .22); }
.perch { position: absolute; left: 50%; top: 0; z-index: 4; width: 130px; height: 96px; margin-left: -65px; margin-top: -84px; display: grid; place-items: center; pointer-events: none; }
.perch > .crown-ico { width: 124px; height: 92px; filter: drop-shadow(0 4px 0 rgba(110, 69, 39, .35)); transform: rotate(-8deg); }
.perch.fresh > .crown-ico { animation: crown-drop .7s cubic-bezier(.2, 1.5, .45, 1) both; }
@keyframes crown-drop { 0% { transform: translateY(-120px) rotate(-40deg) scale(1.4); opacity: 0; } 70% { opacity: 1; } 100% { transform: rotate(-8deg); } }
.perch-count { position: absolute; right: -8px; top: 6px; font: 700 20px/1 var(--display); background: #D46A5C; color: #fff; border: 3px solid #fff; border-radius: 999px; padding: 4px 8px; transform: rotate(10deg); }
.perch-banner { position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; font: 700 16px/1 var(--display); letter-spacing: .04em; color: #3E2C1F; background: #F5C24E; border: 2px solid #A8741C; border-radius: 6px; padding: 5px 12px; box-shadow: 0 3px 0 #A8741C; }
.perch.fresh .perch-banner { animation: banner-in .4s .45s both cubic-bezier(.2, 1.6, .4, 1); }
@keyframes banner-in { from { transform: translateX(-50%) rotate(-3deg) scale(0); } }
.sparkles { position: absolute; inset: 0; }
.sparkles i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: #FFD95E; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(var(--a)) translateY(-10px) scale(0); }
.perch.fresh .sparkles i { animation: burst .9s .35s ease-out both; }
.perch:not(.fresh) .sparkles i { animation: glint 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .2s); }
@keyframes burst { 0% { transform: rotate(var(--a)) translateY(-10px) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-78px) scale(1.4); opacity: 0; } }
@keyframes glint { 0%, 80%, 100% { transform: rotate(var(--a)) translateY(-56px) scale(0); } 90% { transform: rotate(var(--a)) translateY(-56px) scale(1); } }
.vote .frame.kinged { margin-top: 110px; }
.tile.kinged { margin-top: 76px; }
.tile.kinged::before { display: none; }
.tile .perch { width: 84px; height: 62px; margin-left: -42px; margin-top: -54px; }
.tile .perch > .crown-ico { width: 78px; height: 58px; }
.tile .perch-banner { top: -24px; font-size: 13px; }
.crown.king { background: #F5C24E; border-color: #A8741C; box-shadow: 0 3px 0 #A8741C; }
@media (max-width: 420px) {
  .crown-disc { width: 56px; height: 56px; } .crown-disc .crown-ico { width: 38px; height: 29px; }
  .crown-label { font-size: 21px; }
}

/* About the creator + support */
.about { border: 0; padding: 0; background: transparent; max-width: min(560px, calc(100% - 32px)); width: 100%; color: var(--ink); }
.about::backdrop { background: rgba(40, 28, 20, .45); backdrop-filter: blur(2px); }
.about-inner { position: relative; background: var(--card); border: 3px solid var(--wood); border-radius: 22px; padding: 26px 24px 22px; box-shadow: var(--shadow), var(--shadow-lift); display: flex; flex-direction: column; gap: 14px; max-height: 85vh; overflow: auto; }
.about-inner::before { content: ''; position: absolute; inset: 7px; border: 2px dashed var(--stitch); border-radius: 16px; pointer-events: none; }
.about-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--wood-dark); background: #EFE3CB; color: #3E2C1F; font: 700 22px/1 var(--display); box-shadow: 0 3px 0 var(--wood-dark); }
.about-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.about-mark { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font: 700 32px/1 var(--display); color: #FFF6E3; background: var(--wood) repeating-linear-gradient(8deg, transparent 0 6px, rgba(0,0,0,.07) 6px 7px); border: 3px solid var(--wood-dark); box-shadow: 0 4px 0 var(--wood-dark); transform: rotate(-5deg); }
.about-bio { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.about-support { display: flex; flex-direction: column; gap: 10px; border-top: 2px dashed var(--stitch); padding-top: 14px; color: var(--ink-soft); }
.about-support .btn { align-self: flex-start; }
.support-card { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.support-cup { position: relative; flex: none; width: 70px; height: 70px; }
.support-cup .mug { position: absolute; left: 8px; bottom: 4px; width: 46px; height: 38px; background: var(--berry); border: 3px solid var(--wood-dark); border-radius: 4px 4px 14px 14px; }
.support-cup .mug::after { content: ''; position: absolute; right: -16px; top: 6px; width: 14px; height: 16px; border: 3px solid var(--wood-dark); border-left: 0; border-radius: 0 10px 10px 0; }
.support-cup .steam { position: absolute; bottom: 46px; width: 6px; height: 16px; border-radius: 6px; background: var(--stitch); animation: steam 2.4s ease-in-out infinite; }
.support-cup .steam:nth-child(1) { left: 20px; } .support-cup .steam:nth-child(2) { left: 34px; animation-delay: -1.2s; }
@keyframes steam { 0%, 100% { transform: translateY(0) scaleY(1); opacity: .3; } 50% { transform: translateY(-6px) scaleY(1.3); opacity: .8; } }
.inline-link { color: var(--sage-dark); font-weight: 800; text-decoration: underline wavy var(--sage) 2px; text-underline-offset: 3px; }
:root[data-time="night"] .inline-link { color: #C8DDA8; }