/* PENIFLY. The arrangement is the HUMBO one on purpose: a small window on a living video world,
   the meme strip under it, a sound dock and two link buttons in the corners. What is PENIFLY's
   own is the material: every surface is a plate drawn with his marker, generated in Codex and
   nine sliced with border-image so the wobble stays whatever the size. No vector anywhere. */

@font-face { font-family: Marker; src: url("/assets/fonts/gloria-hallelujah.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Hand; src: url("/assets/fonts/patrick-hand.woff2") format("woff2"); font-display: swap; }

:root {
  --lime: #c0f53a;
  --green: #3f7a35;
  --tree: #4b7128;
  --ink: #111611;
  --paper: #fff;
  --display: Marker, "Comic Sans MS", cursive;
  --body: Hand, "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--body);
  font-synthesis: none;
  color: var(--ink);
  background: var(--lime);
  overflow-x: hidden;
  /* the pointer is a drawn fly swatter, drawn by the compositor so it never lags */
  cursor: url("/assets/img/cursor.png") 20 4, auto;
}
button, a, input { -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; }
:where(a[href], button:not(:disabled), input[type="range"]) { cursor: url("/assets/img/cursor-hit.png") 20 4, pointer; }
button:disabled { opacity: .5; }
button:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px); }
:focus-visible { outline: 3px dashed var(--green); outline-offset: 4px; }

/* the drawn plates every surface is made of */
.plate {
  border: 24px solid transparent;
  border-image-slice: 26 fill;
  border-image-width: 24px;
  border-image-repeat: round;
}
.plate.white { border-image-source: url("/assets/img/plate_white.png"); }
.plate.lime { border-image-source: url("/assets/img/plate_lime.png"); }
.plate.green { border-image-source: url("/assets/img/plate_green.png"); color: #fff; }
.plate.thin { border-width: 14px; border-image-width: 14px; }

/* -------------------------------------------------------------- the world */

#world { position: fixed; inset: 0; z-index: -3; overflow: hidden; }
#worldposter, #worldvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#worldvid { opacity: 0; transition: opacity .6s ease; }
#worldvid.on { opacity: 1; }
#shade {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(0deg, #2d4a1a33, transparent 40%);
}

/* --------------------------------------------------- the dock and the links */

#dock {
  position: fixed; top: 12px; left: 12px; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  border-width: 16px; border-image-width: 16px;
  padding: 0 2px;
}
#sound { position: relative; width: 28px; height: 28px; }
#sound img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; opacity: .45; transition: opacity .2s ease; }
#sound.playing img { opacity: 1; animation: wiggle .5s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: translate(-50%, -50%) rotate(-8deg); } to { transform: translate(-50%, -50%) rotate(8deg) scale(1.08); } }
#sound-state { font: 12px/1 var(--display); width: 52px; white-space: nowrap; }
#vol { -webkit-appearance: none; appearance: none; width: 62px; height: 4px; background: var(--ink); }
#vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 18px; background: var(--lime); border: 3px solid var(--ink); border-radius: 40% 60% 50% 50%; }
#vol::-moz-range-thumb { width: 14px; height: 18px; background: var(--lime); border: 3px solid var(--ink); border-radius: 40% 60% 50% 50%; }

#links { position: fixed; top: 12px; right: 12px; z-index: 30; display: flex; gap: 6px; }
#links a { position: relative; width: 44px; height: 44px; display: block; border-width: 18px; border-image-width: 18px; }
#links img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
#links a[aria-disabled="true"] { opacity: .55; }

/* -------------------------------------------------------------- the window */

#stage { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 62px 16px 18px; }
#stack { width: 100%; max-width: 440px; min-width: 0; }

#window { border-width: 22px; border-image-width: 22px; padding: 0; }
.bar {
  min-height: 40px; margin: -10px -10px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 14px/1 var(--display);
  border-width: 16px; border-image-width: 16px;
  padding: 0 2px;
}
.bar-symbols { display: flex; gap: 6px; font: 15px/1 var(--body); opacity: .8; }
.close { width: 22px; height: 22px; font: 22px/1 var(--body); color: #fff; }
.menu { display: flex; gap: 14px; padding: 8px 4px 2px; font: 17px/1.2 var(--body); }
.body { padding: 4px 0 2px; }

/* the panel is the mechanic: a lime field he buzzes around in and nobody hits */
#monitor {
  position: relative; height: 186px; overflow: hidden;
  border-width: 20px; border-image-width: 20px;
  margin: 0 -4px;
}
#scene { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
#scene:active { cursor: url("/assets/img/cursor-slam.png") 20 4, auto; }
#scene img.fly { position: absolute; left: 0; top: 0; width: 84px; height: auto; pointer-events: none; will-change: transform; }
#scene img.splat { position: absolute; left: 0; top: 0; width: 70px; height: 70px; pointer-events: none; }
.tag {
  position: absolute; top: -2px; left: -2px; z-index: 3;
  font: 11px/1 var(--display);
  border-width: 12px; border-image-width: 12px;
  padding: 0 1px; white-space: nowrap;
}
.sticker {
  position: absolute; right: -4px; top: -6px; z-index: 3; width: 86px; height: 86px;
  transform: rotate(9deg); display: grid; place-items: center;
}
.sticker img { position: absolute; inset: 0; }
.sticker b { position: relative; font: 11px/1.3 var(--display); text-align: center; }
#gohint {
  position: absolute; right: -2px; bottom: -4px; z-index: 3;
  font: 12px/1 var(--display);
  border-width: 12px; border-image-width: 12px;
  padding: 0 1px; white-space: nowrap;
  transition: opacity .25s ease;
}
#monitor.busy #gohint { opacity: 0; }

#brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 6px; }
#mark { width: min(100%, 244px); height: auto; display: block; }
#ticker { font: 14px/1 var(--display); letter-spacing: 1px; border-width: 14px; border-image-width: 14px; padding: 0 2px; }

#line { margin: 0 -2px; text-align: center; font-size: 22px; line-height: 1.1; border-width: 18px; border-image-width: 18px; padding: 0; }
#line strong { font-weight: 400; color: var(--green); }

#acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 12px/1.3 var(--display); }
.act img { width: 66px; height: 66px; display: block; }
.act:hover img { transform: rotate(-4deg); }

#ca { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; border-width: 18px; border-image-width: 18px; padding: 0; }
#ca-label { font: 11px/1.5 var(--display); letter-spacing: 1px; }
#ca-value { font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; user-select: text; }
#ca-hint { font: 11px/1.6 var(--display); color: var(--green); }

.status { display: flex; gap: 2px; margin: 6px -6px -2px; font-size: 16px; }
.status > span { display: flex; align-items: center; white-space: nowrap; font: 12px/1 var(--display); border-width: 12px; border-image-width: 12px; padding: 0 1px; }
.marquee { flex: 1; overflow: hidden; white-space: nowrap; border-width: 12px; border-image-width: 12px; padding: 0; min-width: 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: slide 20s linear infinite; }
@keyframes slide { to { transform: translateX(-100%); } }

/* --------------------------------------------------------- the meme folder */

#catalog { display: flex; gap: 6px; margin: 10px 0 6px; }
#open-folder { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 13px/1.5 var(--display); border-width: 16px; border-image-width: 16px; padding: 0 2px; }
#motion { width: 46px; display: grid; place-items: center; font: 14px/1 var(--display); border-width: 16px; border-image-width: 16px; }

#strip { overflow: hidden; border-width: 16px; border-image-width: 16px; padding: 0; }
#track { display: flex; width: max-content; animation: reel 46s linear infinite; }
#strip:hover #track, #strip:focus-within #track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
#track .set { display: flex; gap: 6px; padding-right: 6px; }
#track button { position: relative; width: 84px; height: 84px; display: block; border: 3px solid var(--ink); border-radius: 3px 5px 4px 6px / 5px 3px 6px 4px; overflow: hidden; }
#track img { width: 100%; height: 100%; object-fit: cover; display: block; }
#track button .n { position: absolute; left: 3px; bottom: 3px; background: var(--ink); color: var(--lime); padding: 2px 4px; font: 11px/1 var(--display); }
#track .moving .n { background: var(--green); color: #fff; }

/* ------------------------------------------------------------- the dialogs */

dialog { border: 0; padding: 0; color: var(--ink); max-width: none; max-height: none; background: transparent; outline: none; }
dialog::backdrop { background: #2d4a1a99; backdrop-filter: blur(3px); }
#gal, #lore {
  width: calc(100% - 26px); max-width: 500px;
  max-height: calc(100dvh - 26px); overflow: hidden auto;
  border-width: 22px; border-image-width: 22px; padding: 0;
}
#gal { max-width: 560px; }
.dialog-body { padding: 8px 0 0; }
dialog .bar { margin: -8px 0 0; }

#gal-frame { position: relative; background: var(--ink); border: 3px solid var(--ink); }
#gal-img, #gal-vid { display: block; width: 100%; max-height: calc(100dvh - 300px); min-height: 120px; object-fit: contain; }
#gal-vid { display: none; }
#gal.clip #gal-img { display: none; }
#gal.clip #gal-vid { display: block; }
#gal-prev, #gal-next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 52px; display: grid; place-items: center; font: 34px/1 var(--body); border-width: 14px; border-image-width: 14px; padding: 0; }
#gal-prev { left: 6px; } #gal-next { right: 6px; }
#gal-cap { text-align: center; padding: 10px 0 6px; margin: 0; font-size: 22px; line-height: 1.2; min-height: 28px; }
#gal-cap b { display: block; font: 13px/1.7 var(--display); margin-bottom: 2px; }
#gal-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#gal-thumbs button { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 4px 6px 5px 3px; padding: 0; overflow: hidden; opacity: .7; }
#gal-thumbs button[aria-selected="true"] { opacity: 1; outline: 3px solid var(--green); }
#gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
#gal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 17px; }
#gal-save { text-decoration: none; font: 13px/1 var(--display); border-width: 14px; border-image-width: 14px; padding: 0 2px; }

.paper { padding: 4px 6px; font-size: 22px; line-height: 1.25; }
.paper p { margin: 0 0 14px; }
.paper p:last-child { margin: 0; }
.kicker { font: 12px/1.8 var(--display); color: var(--green); }
.paper h2 { font: 17px/1.6 var(--display); margin: 10px 0 16px; }
.sign { color: var(--green); }

/* --------------------------------------------------------------- the film */

#intro { width: 100vw; height: 100dvh; max-width: none; padding: 0; background: var(--lime); overflow: hidden; }
#intro::backdrop { background: var(--lime); }
#introvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro-brand { position: absolute; left: 0; right: 0; bottom: 22%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#intro-brand > span { font: 14px/1.8 var(--display); letter-spacing: .2em; }
#intro-brand img { width: min(70vw, 420px); height: auto; }
#intro-line { margin: 0; font-size: 24px; }
#skip { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font: 16px/1.5 var(--display); letter-spacing: .06em; white-space: nowrap; border-width: 20px; border-image-width: 20px; padding: 0 4px; }
#skip:active { transform: translateX(-50%) translateY(1px); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 520px) {
  #stage { padding: 70px 10px 20px; }
  #monitor { height: 176px; }
  #mark { width: min(100%, 224px); }
  #line { font-size: 20px; }
  .menu { font-size: 16px; gap: 10px; }
  #dock { gap: 6px; }
  #vol { width: 48px; }
  #sound-state { width: 46px; font-size: 11px; }
  #track button { width: 72px; height: 72px; }
  #intro-brand { bottom: 26%; }
  #ca-value { font-size: 20px; }
}

@media (max-height: 840px) and (min-width: 521px) {
  #stage { padding: 60px 16px 18px; }
  #monitor { height: 176px; }
  #brand { margin: 10px 0 6px; }
  #mark { width: min(100%, 230px); }
  #acts { margin: 10px 0 8px; }
  #track button { width: 74px; height: 74px; }
}

.stopped #track, .stopped .marquee span, .stopped #sound.playing img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #track, .marquee span, #sound.playing img { animation: none; }
  * { transition-duration: .01ms !important; }
}

@media (max-width: 360px) {
  /* the tag and the sticker cannot share the top edge here, so the sticker goes to the floor */
  .sticker { width: 70px; height: 70px; top: auto; bottom: -6px; left: -6px; right: auto; transform: rotate(-8deg); }
  .sticker img { width: 70px; height: 70px; }
  .sticker b { font-size: 10px; }
}