/* KEEBO. The arrangement is the HUMBO one, deliberately: a small tactile window centred on a
   living video world, a scrolling meme strip under it, a sound dock in the corner. What is
   KEEBO's own is the palette, which is read off his two plates, and the panel at the top of
   the window, which is a live low poly jetty instead of a still mascot. */

@font-face { font-family: Pixel; src: url("/assets/fonts/press-start-2p.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: Terminal; src: url("/assets/fonts/vt323.woff2") format("woff2"); font-display: swap; }

:root {
  --silver: #c8c2b1;
  --light: #f4f1e2;
  --edge: #8a8478;
  --dark: #34302a;
  --deep: #21332f;
  --cyan: #59d8ef;
  --green: #5ac46f;
  --orange: #ff8a2b;
  --yellow: #ffd84a;
  --lagoon: #128fae;
  --display: Pixel, monospace;
  --body: Terminal, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--body);
  color: var(--dark);
  background: #46b0e8;
  overflow-x: hidden;
}
button, a, input { -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
button { cursor: pointer; padding: 0; border: 0; background: none; }
button:disabled { cursor: default; opacity: .5; }
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* the two surfaces the whole interface is made of */
.bevel {
  background: var(--silver);
  border: 2px solid;
  border-color: var(--light) #3f3a33 #3f3a33 var(--light);
  box-shadow: inset -1px -1px var(--edge), inset 1px 1px #e8e4d4, 3px 3px 0 #17201d;
}
.inset {
  border: 2px solid;
  border-color: #7d7768 #f0ece0 #f0ece0 #7d7768;
  box-shadow: inset 1px 1px #3a352f;
}

/* -------------------------------------------------------------- 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 .7s ease; }
#worldvid.on { opacity: 1; }
#shade {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, #05445c40, transparent 38%, #05445c40),
              linear-gradient(0deg, #06364a5c, transparent 55%);
}
#crt {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  opacity: .13; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px);
}

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

#dock {
  position: fixed; top: 14px; left: 14px; z-index: 30;
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 5px 9px;
}
#sound { position: relative; width: 24px; height: 24px; }
#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; }
#sound-state { font: 7px/1 var(--display); width: 44px; }
#vol { -webkit-appearance: none; appearance: none; width: 62px; height: 6px; background: #7d7768; box-shadow: inset 1px 1px #3a352f; }
#vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 16px; background: var(--silver); border: 2px solid; border-color: var(--light) #3f3a33 #3f3a33 var(--light); }
#vol::-moz-range-thumb { border: 2px solid; border-color: var(--light) #3f3a33 #3f3a33 var(--light); width: 10px; height: 16px; background: var(--silver); border-radius: 0; }
#eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
#eq i { width: 3px; height: 3px; background: #4e6a2f; }
#sound.playing ~ #eq i, #dock:has(.playing) #eq i { animation: bars .55s alternate infinite; }
#eq i:nth-child(2) { animation-delay: -.4s; }
#eq i:nth-child(3) { animation-delay: -.2s; }
#eq i:nth-child(4) { animation-delay: -.5s; }
@keyframes bars { to { height: 13px; } }

#links { position: fixed; top: 14px; right: 14px; z-index: 30; display: flex; gap: 8px; }
#links a { position: relative; width: 36px; height: 36px; display: block; }
#links img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
#links a[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

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

/* the strip inside the stack is max-content wide, and an auto grid column takes that as its
   size, which shoves the whole window off centre. A block centre never asks the content how
   wide it would like to be. */
#stage { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 62px 16px 26px; }
#stack { width: 100%; max-width: 440px; min-width: 0; }

#window { padding: 4px; }
.bar {
  height: 28px; padding: 4px 5px 4px 9px;
  background: var(--deep); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 9px/1 var(--display);
}
.bar-label { display: flex; align-items: center; gap: 8px; }
.led { width: 8px; height: 8px; background: var(--green); box-shadow: 0 0 7px #5ac46f88; }
.bar-symbols { display: flex; gap: 3px; }
.bar-symbols span, .close {
  width: 19px; height: 19px; background: var(--silver); color: #211d19;
  display: grid; place-items: center;
  border: 1px solid; border-color: #fff #5a544a #5a544a #fff;
  font: 14px/1 monospace;
}
.menu { display: flex; gap: 15px; padding: 3px 9px; border-bottom: 1px solid var(--edge); font-size: 17px; line-height: 1.2; }
.menu-star { margin-left: auto; color: var(--lagoon); }
.body { padding: 11px 14px 9px; }

/* the panel is the mechanic: a live jetty where he never gets off the ground */
#monitor {
  position: relative; height: 186px; overflow: hidden;
  background: linear-gradient(180deg, #6fc9f2 0 46%, #1fa9c6 46% 100%);
}
#grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#ffffff1a 1px, transparent 1px), linear-gradient(90deg, #ffffff1a 1px, transparent 1px);
  background-size: 22px 22px;
}
#scene, #monitor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#go { position: absolute; inset: 0; }
.tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--deep); color: var(--green);
  padding: 5px 6px; font: 7px/1 var(--display);
}
.corner { position: absolute; width: 9px; height: 9px; border: 2px solid #eafff2; z-index: 3; }
.corner.tl { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.corner.tr { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
.corner.bl { left: 6px; bottom: 6px; border-right: 0; border-top: 0; }
.corner.br { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.sticker {
  position: absolute; right: 9px; top: 10px; z-index: 3;
  transform: rotate(8deg);
  background: var(--orange); color: #2b1a0c;
  border: 2px solid #4a2e14; padding: 8px 7px;
  font: 10px/1.5 var(--display); text-align: center;
  box-shadow: 3px 3px #3a2a1a;
}
.sweep {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(transparent 40%, #ffffff26 50%, transparent 60%);
  animation: sweep 3.5s linear infinite;
}
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
#aid {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  background: #f4f1e2e6; color: var(--dark);
  padding: 4px 7px; font: 7px/1.4 var(--display);
  max-width: 58%;
}
#gohint {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  background: #f4f1e2e6; color: var(--dark);
  padding: 6px 10px; font: 8px/1 var(--display);
  transition: opacity .25s ease;
}
#go.held ~ #gohint, #go.held + #aid { opacity: 0; }

#brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 15px 0 10px; }
#mark { width: min(100%, 250px); height: auto; display: block; filter: drop-shadow(3px 4px 0 #1d2d2a44); }
#ticker { font: 10px/1 var(--display); letter-spacing: 2px; background: var(--deep); color: var(--yellow); padding: 7px 10px; }

#line { margin: 0; padding: 9px 6px; background: #ded9c8; text-align: center; font-size: 21px; line-height: 1.15; }
#line strong { font-weight: 400; color: #a6431a; }

#acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 14px 0; }
.act { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 8px/1.3 var(--display); }
.act .pic {
  position: relative;
  width: 62px; height: 48px;
  border: 2px solid #3d3a33;
  box-shadow: 3px 3px #7f7a6e;
}
.act .pic img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; }
.act.cyan .pic { background: var(--cyan); }
.act.green .pic { background: var(--green); }
.act.orange .pic { background: var(--orange); }
.act:active .pic { box-shadow: 1px 1px #7f7a6e; }

#ca { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 10px; background: #e6e2d2; text-align: center; }
#ca-label { font: 7px/1.5 var(--display); letter-spacing: 1px; }
#ca-value { font-size: 21px; line-height: 1.1; overflow-wrap: anywhere; user-select: text; }
#ca-hint { display: flex; gap: 6px; align-items: center; font: 7px/1.6 var(--display); color: #6c665c; }

.status { display: flex; gap: 4px; height: 23px; font-size: 15px; }
.status > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 6px; }
.status i { width: 7px; height: 7px; background: #4f8a3c; }
.marquee { flex: 1; overflow: hidden; white-space: nowrap; }
.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: 8px; margin: 13px 0 8px; }
#open-folder { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; padding: 5px 9px; font: 8px/1.5 var(--display); letter-spacing: .1em; }
#motion { width: 33px; display: grid; place-items: center; font: 9px/1 var(--display); }

#strip { overflow: hidden; padding: 5px; background: #2b3a37; }
#track { display: flex; width: max-content; animation: reel 42s 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; background: #17201d; border: 1px solid #c9c4b4; display: block; }
#track img { width: 100%; height: 100%; object-fit: cover; display: block; }
#track button .n { position: absolute; left: 3px; bottom: 3px; background: #141c1a; color: var(--green); padding: 2px 4px; font-size: 14px; line-height: 1; }
#track .moving .n { color: var(--orange); }

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

dialog { border: 0; padding: 0; color: var(--dark); max-width: none; max-height: none; }
dialog::backdrop { background: #06334799; backdrop-filter: blur(3px); }
#gal, #lore {
  width: calc(100% - 26px); max-width: 500px;
  max-height: calc(100dvh - 26px); overflow: auto;
  padding: 4px;
}
#gal { max-width: 520px; }
.dialog-body { padding: 10px; }
.close { cursor: pointer; }

#gal-frame { position: relative; background: #1d2b28; }
#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: 32px; height: 38px; display: grid; place-items: center; font-size: 20px; line-height: 1; }
#gal-prev { left: 7px; } #gal-next { right: 7px; }
#gal-cap { text-align: center; padding: 11px 0 8px; margin: 0; font-size: 21px; line-height: 1.2; min-height: 26px; }
#gal-cap b { display: block; font: 9px/1.7 var(--display); margin-bottom: 3px; }
#gal-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#gal-thumbs button { width: 44px; height: 44px; border: 2px solid #7f7a6e; padding: 2px; background: #d4cfbe; }
#gal-thumbs button[aria-selected="true"] { border-color: #a6431a; background: var(--orange); }
#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: 11px; font-size: 16px; }
#gal-save { text-decoration: none; font: 8px/1 var(--display); background: var(--deep); color: var(--yellow); padding: 8px 10px; }

.paper { padding: 18px; background: #ece8d8; font-size: 22px; line-height: 1.25; }
.paper p { margin: 0 0 15px; }
.paper p:last-child { margin: 0; }
.kicker { font: 8px/1.8 var(--display); color: #6c665c; }
.paper h2 { font: 15px/1.75 var(--display); margin: 16px 0 20px; }
.sign { color: #a6431a; }

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

#intro { width: 100vw; height: 100dvh; max-width: none; padding: 0; background: #0b4f66; overflow: hidden; }
#intro::backdrop { background: #0b4f66; }
#introvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro-vignette { position: absolute; inset: 0; background: linear-gradient(0deg, #06364ae0, transparent 62%, #0b4f6640); }
#intro-brand { position: absolute; left: 0; right: 0; bottom: 21%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; text-shadow: 3px 3px #123c4d; }
#intro-brand > span { font: 9px/1.8 var(--display); letter-spacing: .28em; }
#intro-brand img { width: min(74vw, 440px); height: auto; filter: drop-shadow(4px 6px 0 #0b3a4a66); }
#intro-line { margin: 0; font-size: 24px; }
#skip { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 15px 22px; background: var(--orange); color: #2b1a0c; font: 10px/1.5 var(--display); letter-spacing: .1em; white-space: nowrap; }
#skip:active { transform: translateX(-50%) translateY(1px); }

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

@media (max-width: 520px) {
  #stage { padding: 66px 12px 20px; }
  #stack { max-width: 410px; }
  .body { padding: 10px 11px 8px; }
  #monitor { height: 168px; }
  #mark { width: min(100%, 214px); }
  #line { font-size: 20px; }
  .menu { font-size: 16px; gap: 11px; }
  #dock { gap: 7px; padding: 5px 7px; }
  #vol { width: 50px; }
  #sound-state { width: 38px; font-size: 6px; }
  #track button { width: 72px; height: 72px; }
  #intro-brand { bottom: 25%; }
}

@media (max-height: 840px) and (min-width: 521px) {
  #stage { padding: 56px 16px 18px; }
  #monitor { height: 168px; }
  #brand { margin: 12px 0 8px; }
  #mark { width: min(100%, 224px); }
  #acts { margin: 11px 0; }
  #track button { width: 74px; height: 74px; }
}

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

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