/* Tokonoma Experiments — shared site styles
   Used by every experiment page (index.html, emoji-drawing.html, ...) */

@font-face {
  font-family: 'EurostileMN';
  src: url('/assets/font/EurostileMNExtendedBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ac437 Amstrad PC-2y';
  src: url('/assets/font/Ac437_Amstrad_PC-2y.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --bg: #0a0d12;
  --panel: #10151d;
  --cyan: #5eebd8;
  --coral: #ff6b8b;
  --text: #e8edf2;
  --muted: #7c8797;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Helvetica, Arial, sans-serif;
}

/* "Made by tokonoma" — fixed top-left on every page */
#siteHeader { position: fixed; top: 18px; left: 18px; z-index: 20; }
#siteHeader a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--muted);
  font-size: 12.5px;
}
#siteHeader a:hover { color: var(--text); }
#siteHeader img { width: 48px; height: 48px; object-fit: contain; display: block; }

/* Root Tokonoma logo structure and positioning, copied exactly. */
.interface {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  font-family: 'EurostileMNExtendedBold', Arial, sans-serif;
  font-weight: 700;
}
.brand-nav {
  position: absolute;
  left: 55.8125px;
  top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.tokonoma-logo-frame { display: block; }
.tokonoma-logo-link { position: relative; display: block; pointer-events: auto; }
.made-by {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  color: #8c929d;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.tokonoma-logo {
  display: block;
  width: 40.53px;
  height: 58px;
  object-fit: contain;
  pointer-events: auto;
  transition: opacity .15s ease;
}
.tokonoma-logo-bye {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.tokonoma-logo-link.show-bye .tokonoma-logo { opacity: 0; }
.tokonoma-logo-link.show-bye .tokonoma-logo-bye { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .tokonoma-logo-link:hover .tokonoma-logo { opacity: 0; }
  .tokonoma-logo-link:hover .tokonoma-logo-bye { opacity: 1; }
}

/* Labz DOS directory controls. */
.labzNav {
  gap: 12px !important;
  top: 45px !important;
}
.labzNav .nav-pill {
  position: relative;
  height: auto !important;
  min-height: 32px;
  padding: 3px 10px 7px !important;
  border: 0 !important;
  border-bottom: 3px double currentColor !important;
  border-radius: 0 !important;
  background: #000 !important;
  color: #9da49e !important;
  font-family: 'Ac437 Amstrad PC-2y', 'Courier New', monospace !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: .02em;
  transition: color .12s steps(2), background-color .12s steps(2), transform .14s ease !important;
}
.labzNav .nav-pill::before { content: '║  '; }
.labzNav .nav-pill::after { content: '  ║'; }
.labzNav .nav-pill:hover,
.labzNav .nav-pill:focus-visible {
  background: #0000ff !important;
  color: #fff !important;
  outline: 0;
  transform: translateY(-2px);
}
.labzNav .nav-pill.active {
  background: #d7dcd7 !important;
  color: #000 !important;
}
.labzNav .nav-pill.active:hover,
.labzNav .nav-pill.active:focus-visible {
  background: #c8ff00 !important;
  color: #000 !important;
}
.nav-pill[aria-disabled="true"] {
  cursor: not-allowed !important;
}
.labzNav .nav-pill[aria-disabled="true"],
.labzNav .nav-pill[aria-disabled="true"]:hover,
.labzNav .nav-pill[aria-disabled="true"]:focus-visible {
  background: #000 !important;
  color: #555b56 !important;
  transform: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .labzNav::after {
    content: '';
    position: absolute;
    inset: -16px;
    opacity: 0;
    pointer-events: none;
    background-image:
      linear-gradient(90deg, #fff 50%, transparent 50%),
      linear-gradient(90deg, #fff 50%, transparent 50%),
      linear-gradient(0deg, #fff 50%, transparent 50%),
      linear-gradient(0deg, #fff 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    transition: opacity .15s ease;
  }
  .labzNav:hover::after {
    opacity: 1;
    animation: labzNavMarchingAnts .5s linear infinite;
  }
}
@keyframes labzNavMarchingAnts {
  to { background-position: 10px 0, -10px 100%, 0 10px, 100% -10px; }
}
.dir-row .size { text-align: left !important; }
.terminal-char { animation-duration: .13s !important; }

/* Extra breathing room below the filter controls. */
.terminal { padding-top: 160px !important; }
.terminal .dir-viewport { height: calc(100vh - 253px) !important; }
.ascii-stage {
  bottom: 24px !important;
}

.desktop-view-notice { display: none; }

.agency-watch {
  position: fixed;
  top: 61px;
  right: 55.8125px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transform: translateY(-50%);
  color: #9da49e;
  font-family: 'Ac437 Amstrad PC-2y', monospace;
  font-size: 16px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}
.agency-watch img {
  display: block;
  width: auto;
  height: 60px;
  object-fit: contain;
}
.agency-name-window {
  position: relative;
  display: block;
  width: 220px;
  height: 1.1em;
  overflow: hidden;
}
.agency-name-current,
.agency-name-next {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 1.1em;
  line-height: 1.1em;
  text-align: right;
  transition: transform .55s cubic-bezier(.22,.72,.18,1);
  will-change: transform;
}
.agency-name-next { transform: translateY(100%); }
.agency-name-window.is-rolling .agency-name-current { transform: translateY(-100%); }
.agency-name-window.is-rolling .agency-name-next { transform: translateY(0); }

@media (max-width: 1024px) {
  .agency-watch { display: none; }
  .desktop-view-notice {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 32px;
    padding: 7px 0 6px;
    overflow: hidden;
    background: rgb(0, 0, 255);
    color: #fff;
    font-family: 'Bubble Pixel', 'Ac437 Amstrad PC-2y', monospace;
    font-size: 14px;
    line-height: 1;
    text-align: left;
  }
  .brand-nav { top: 64px; left: 24px; }
  .labzNav { top: 77px !important; }
}

.desktop-view-notice-track {
  display: flex;
  width: max-content;
  flex: none;
  flex-shrink: 0;
  white-space: nowrap;
  animation: desktopNoticeMarquee 60s linear infinite;
  will-change: transform;
}
.desktop-view-notice-track > span { flex: none; }
.desktop-view-notice-track .notice-shrug { font-family: Arial, sans-serif; }
@media (hover: none) and (pointer: coarse) {
  .ascii-stage { display: none !important; }
}
@keyframes desktopNoticeMarquee {
  to { transform: translateX(-50%); }
}

.scroll-cue {
  position: fixed;
  z-index: 45;
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s ease;
}
.scroll-cue.hide { opacity: 0; }
.scroll-cue svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scroll-cue-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  animation: scrollCueAnts .6s linear infinite;
}
.scroll-cue-chevron {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 4;
  animation: scrollCueAnts .6s linear infinite;
}
@keyframes scrollCueAnts {
  to { stroke-dashoffset: -8; }
}

/* Project-page exit: a blue difference-blend scan followed by staggered fades. */
.page-sweep {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  pointer-events: none;
  background: rgb(0, 0, 255);
  mix-blend-mode: difference;
  opacity: 0;
  transform-origin: left center;
  transform: translate3d(0, 0, 0) scaleX(0);
  will-change: transform, opacity;
}
body.project-exit .page-sweep {
  opacity: 1;
  animation: labzBlueSweep 1.08s linear forwards;
}
@keyframes labzBlueSweep {
  0% { transform: translate3d(0, 0, 0) scaleX(0); }
  52% { transform: translate3d(0, 0, 0) scaleX(1); animation-timing-function: cubic-bezier(.55,0,.15,1); }
  100% { transform: translate3d(100%, 0, 0) scaleX(1); }
}
.page-blackout {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: #000;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
body.project-exit .page-blackout {
  animation: labzBlackWake 1.08s linear forwards;
}
@keyframes labzBlackWake {
  0%,52% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
body.home-exit .page-sweep {
  opacity: 1;
  transform-origin: top center;
  animation: labzBlueSweepDown 1.08s linear forwards;
}
@keyframes labzBlueSweepDown {
  0% { transform: translate3d(0,0,0) scaleY(0); }
  52% { transform: translate3d(0,0,0) scaleY(1); }
  100% { transform: translate3d(0,100%,0) scaleY(1); }
}
body.home-exit .page-blackout {
  clip-path: inset(0 0 100% 0);
  animation: labzBlackWakeDown 1.08s linear forwards;
}
@keyframes labzBlackWakeDown {
  0%,52% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
body.project-return .page-sweep-return {
  opacity: 1;
  transform-origin: right center;
  animation: labzBlueSweepReturn 1.08s linear forwards;
}
@keyframes labzBlueSweepReturn {
  0% { transform: translate3d(0,0,0) scaleX(0); }
  52% { transform: translate3d(0,0,0) scaleX(1); }
  100% { transform: translate3d(-100%,0,0) scaleX(1); }
}
body.project-return .page-blackout-return {
  clip-path: inset(0 0 0 100%);
  animation: labzBlackWakeReturn 1.08s linear forwards;
}
@keyframes labzBlackWakeReturn {
  0%,52% { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
#overlay,#stage,#bg-canvas,#hud,#status,.postit,.backButton {
  transition: opacity .34s cubic-bezier(.22,.75,.18,1), transform .34s cubic-bezier(.22,.75,.18,1);
}
body.project-return-fade .backButton { opacity:0; transform:translate3d(12px,0,0)!important; transition-delay:0s; }
body.project-return-fade #hud,body.project-return-fade #status { opacity:0; transform:translate3d(-12px,0,0); transition-delay:.07s; }
body.project-return-fade .postit { opacity:0; transform:translate3d(-16px,0,0)!important; transition-delay:.14s; }
body.project-return-fade #overlay,body.project-return-fade #stage,body.project-return-fade #bg-canvas { opacity:0; transform:translate3d(-20px,0,0); transition-delay:.21s; }
.interface,.labzNav,.prompt,.volume,.dir-head,.dir-row,.ascii-stage {
  transition-property: opacity, transform;
  transition-duration: .34s;
  transition-timing-function: cubic-bezier(.22,.75,.18,1);
}
body.project-fade .interface { opacity: 0; transform: translate3d(-12px,-8px,0); transition-delay: 0s; }
body.project-fade .labzNav { opacity: 0; transform: translate3d(-50%,-10px,0); transition-delay: .05s; }
body.project-fade .prompt { opacity: 0; transform: translate3d(14px,0,0); transition-delay: .10s; }
body.project-fade .volume { opacity: 0; transform: translate3d(14px,0,0); transition-delay: .15s; }
body.project-fade .dir-head { opacity: 0; transform: translate3d(18px,0,0); transition-delay: .20s; }
body.project-fade .dir-row { opacity: 0 !important; transform: translate3d(22px,0,0) !important; transition-delay: var(--exit-delay, .24s) !important; }
body.project-fade .ascii-stage { opacity: 0 !important; transform: translate3d(-50%,12px,0); transition-delay: .34s; }

@media (max-width: 780px) {
  .cursor-trail { display: none !important; }
  .terminal {
    width: calc(100% - 24px) !important;
    padding-top: 140px !important;
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
  .terminal .dir-viewport {
    height: calc(100vh - 249px - env(safe-area-inset-bottom)) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
  }
  .terminal .dir-viewport::-webkit-scrollbar { display: none; }
  .terminal .volume { display: none !important; }
  .ascii-stage { display: none !important; }
  .labzNav {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding: 12px 24px calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 16px !important;
    transform: none !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    background: #000;
  }
  .labzNav::-webkit-scrollbar { display: none; }
  .labzNav .nav-pill {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 7px 10px 10px !important;
    font-size: 16px !important;
  }
  .labzNav .nav-pill::before { content: '║ '; }
  .labzNav .nav-pill::after { content: ' ║'; }
  .labzNav.has-scroll-right:not(.has-scroll-left) {
    -webkit-mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%);
    mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 44px),transparent 100%);
  }
  .labzNav.has-scroll-left:not(.has-scroll-right) {
    -webkit-mask-image: linear-gradient(to right,transparent 0,#000 44px,#000 100%);
    mask-image: linear-gradient(to right,transparent 0,#000 44px,#000 100%);
  }
  .labzNav.has-scroll-left.has-scroll-right {
    -webkit-mask-image: linear-gradient(to right,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
    mask-image: linear-gradient(to right,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  }
  .dir-viewport.has-scroll-right:not(.has-scroll-left) {
    -webkit-mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 76px),rgba(0,0,0,.35) 100%);
    mask-image: linear-gradient(to right,#000 0,#000 calc(100% - 76px),rgba(0,0,0,.35) 100%);
  }
  .dir-viewport.has-scroll-left:not(.has-scroll-right) {
    -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,.35) 0,#000 76px,#000 100%);
    mask-image: linear-gradient(to right,rgba(0,0,0,.35) 0,#000 76px,#000 100%);
  }
  .dir-viewport.has-scroll-left.has-scroll-right {
    -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,.35) 0,#000 76px,#000 calc(100% - 76px),rgba(0,0,0,.35) 100%);
    mask-image: linear-gradient(to right,rgba(0,0,0,.35) 0,#000 76px,#000 calc(100% - 76px),rgba(0,0,0,.35) 100%);
  }
}

/* Reusable back-to-menu icon button.
   Fixed to the left edge, vertically centered, flush with the site header's left offset. */
.backButton {
  position: fixed;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 21, 29, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  text-decoration: none;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.backButton:hover {
  color: var(--text);
  border-color: rgba(94, 235, 216, 0.35);
  transform: translateY(-50%) translateX(-2px);
}
.backButton svg { width: 18px; height: 18px; display: block; }

/* Aqua gel button — reusable recipe (gradient, inset highlight, drop shadow,
   pressed state). Add class="aquaButton" to any <button>; set size/shape
   (pill vs. circle, padding, font-size) per use on the page itself. */
.aquaButton {
  border: 2px solid #1b347d;
  background: linear-gradient(to bottom, #96c1e9 0%, #58ade9 45%, #b1e9ff 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -3px 5px rgba(27,52,125,.35),
    0 2px 0 #101c48,
    0 4px 7px rgba(0,0,0,.55);
  color: #000;
  font-family: 'EurostileMN', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  transition: filter 0.2s ease, transform 400ms cubic-bezier(.25,1,.5,1), box-shadow 0.2s ease;
}
.aquaButton:hover { filter: brightness(1.08); }
.aquaButton:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.25),
    inset 0 -1px 2px rgba(255,255,255,.4),
    0 1px 0 #101c48;
}
.aquaButton:disabled { opacity: 0.6; cursor: default; filter: none; }

/* Instructions post-it — press "i" on a sketch page to toggle. */
.postit {
  display: none;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 30;
  width: min(320px, 80vw);
  background: #fff3a3;
  color: #2a2a1a;
  padding: 22px 22px 20px;
  border-radius: 2px;
  box-shadow: 0 16px 34px -10px rgba(0,0,0,0.55), 0 2px 0 rgba(0,0,0,0.08);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
}
.postit.visible { display: block; }
.postit::before {
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 70px; height: 26px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.postit h3 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.postit p { margin: 0 0 8px; }
.postit p:last-child { margin-bottom: 0; }
.postit .postitClose {
  position: absolute;
  top: 6px; right: 8px;
  width: 24px; height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: rgba(0,0,0,0.4);
}
.postit .postitClose:hover { color: #000; }

/* iPad/tablet LABZ filters: bottom dock, keeping the DOS treatment. */
@media (min-width: 701px) and (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  .labzNav {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(76px + env(safe-area-inset-bottom));
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 16px !important;
    transform: none !important;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    background: #000;
  }
  .labzNav .nav-pill {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 7px 10px 10px !important;
    font-size: 16px !important;
  }
  .labzNav .nav-pill::before { content: '║ '; }
  .labzNav .nav-pill::after { content: ' ║'; }
}

/* WALL OF FAME: isolated v16 styles */
body.wall-page *{box-sizing:border-box}
body.wall-page, body.wall-page{margin:0;min-height:100%;background:#aebac9;font-family:Helvetica,Arial,sans-serif}
body.wall-page #wall{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));width:100%;overflow:hidden}
body.wall-page .tile{position:relative;aspect-ratio:1;background:url("../img/img/tile.png") center/100% 100% no-repeat;min-width:0}
body.wall-page .screen{position:absolute;left:30%;top:13.4%;width:40.1%;height:62.9%;overflow:hidden;background:#000}
body.wall-page .reel{position:absolute;inset:0;display:flex;flex-direction:column;transform:translateY(0)}
body.wall-page .panel{width:100%;height:100%;min-height:100%;flex-shrink:0;display:flex;align-items:flex-start;justify-content:flex-start;padding:12% 9%;overflow:hidden;text-align:left;overflow-wrap:anywhere;white-space:pre-wrap;font-weight:400;font-size:clamp(9px,1.12vw,22px);line-height:1.25}
body.wall-page .editor{position:absolute;inset:0;background:#000;color:#fff;padding:10% 8%;display:flex;flex-direction:column;gap:6%;justify-content:space-between}
body.wall-page .editor textarea{width:100%;flex:1;min-height:0;resize:none;border:0;outline:0;background:transparent;color:inherit;font:400 clamp(10px,1.12vw,22px)/1.25 Helvetica,Arial,sans-serif;text-align:left}
body.wall-page .editor textarea::placeholder{color:currentColor;opacity:.5}
body.wall-page .editor button{align-self:flex-start;background:transparent;color:inherit;border:1px solid currentColor;padding:6px 12px;font:400 clamp(9px,.9vw,14px) Helvetica,Arial,sans-serif;cursor:pointer}
body.wall-page .editor button:hover{color:#000;background:#fff;border-color:#fff}
body.wall-page .tools{position:absolute;z-index:5;top:4%;left:4%;display:flex;gap:5px}
body.wall-page .tool{width:30px;height:30px;display:grid;place-items:center;background:#14181c;color:#fff;border:1px solid #ffffff55;border-radius:50%;cursor:pointer;padding:0}
body.wall-page .tool svg{width:17px;height:17px}
body.wall-page .tool:hover, body.wall-page .tool:focus-visible{background:#fff;color:#000}
body.wall-page .tool input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body.wall-page .tool[data-active=true]{outline:2px solid #fff}
body.wall-page .hint{position:fixed;bottom:8px;right:10px;background:#000a;color:#fff;padding:5px 8px;font-size:11px;pointer-events:none}
@media(max-width:700px){body.wall-page .panel, body.wall-page .editor textarea{font-size:clamp(10px,2.35vw,18px)}
body.wall-page .tools{top:3%;left:3%}
body.wall-page .tool{width:25px;height:25px}
body.wall-page .tool svg{width:14px;height:14px}
body.wall-page .editor button{padding:4px 7px;font-size:10px}}
body.wall-page .tools{flex-direction:column;gap:6px;z-index:8}
body.wall-page .font-trigger{font:400 19px/1 Helvetica,Arial,sans-serif}
body.wall-page .font-overlay{position:absolute;inset:0;z-index:7;overflow:hidden;background:#191919;clip-path:inset(0 100% 0 0);transition:clip-path 650ms cubic-bezier(.76,0,.2,1);pointer-events:none}
body.wall-page .font-overlay.open{clip-path:inset(0 0 0 0);pointer-events:auto}
body.wall-page .font-scroll{height:100%;overflow:hidden;overscroll-behavior:contain}
body.wall-page .font-list{padding:0;margin:0}
body.wall-page .font-option{width:100%;min-height:clamp(34px,4.8vw,78px);border:0;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 8%;cursor:pointer;font-size:clamp(12px,1.8vw,30px);text-align:left;font-weight:400}
body.wall-page .font-option:nth-child(odd){background:#303030;color:#fff}
body.wall-page .font-option:nth-child(even){background:#f4f4f4;color:#161616}
body.wall-page .font-option:hover{background:#a9ff40;color:#111}
body.wall-page .font-option small{font:400 clamp(7px,.75vw,11px) Helvetica,Arial,sans-serif;text-transform:uppercase;opacity:.65}
body.wall-page .font-option span{overflow:hidden;text-overflow:ellipsis}
body.wall-page .tool input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;pointer-events:auto}
body.wall-page .tool{position:relative;overflow:hidden}
body.wall-page .font-trigger{overflow:visible}
@media(max-width:700px){body.wall-page .font-option{min-height:38px;font-size:13px}
body.wall-page .font-option small{font-size:7px}}
body.wall-page .tile:first-child{background-image:url("../img/img/tiletl.png")}
body.wall-page .tile.font-open .tools{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}
body.wall-page .tool:hover, body.wall-page .tool:focus-visible, body.wall-page .editor button:hover, body.wall-page .editor button:focus-visible{background:rgb(0,0,255);color:#fff;border-color:rgb(0,0,255)}
body.wall-page .font-option:hover, body.wall-page .font-option:focus-visible{background:rgb(0,0,255);color:#fff}
body.wall-page .editor{position:relative}
body.wall-page .editor .send-arrow{align-self:center;margin-top:auto;flex:0 0 auto;width:clamp(26px,3.2vw,45px);height:clamp(26px,3.2vw,45px);padding:5px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center}
body.wall-page .send-arrow svg{width:70%;height:70%;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){body.wall-page .editor .send-arrow{width:26px;height:26px;padding:4px}}
body.wall-page .editor{padding:10% 8% 5%;gap:0}
body.wall-page .editor textarea{line-height:.825!important;overflow:hidden}
body.wall-page .panel{line-height:.825}
body.wall-page .tile>.send-arrow{position:absolute;z-index:6;left:50%;top:84.5%;transform:translate(-50%,-50%);width:clamp(18px,3.1vw,46px);height:clamp(18px,3.1vw,46px);padding:19%;padding:clamp(3px,.5vw,7px);border:1px solid #fff;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
body.wall-page .tile>.send-arrow svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.wall-page .tile>.send-arrow:hover, body.wall-page .tile>.send-arrow:focus-visible{background:#0000ff!important;color:#fff!important;border-color:#0000ff!important}
body.wall-page .tile.font-open>.send-arrow{opacity:0;pointer-events:none}
@media(max-width:700px){body.wall-page .tile>.send-arrow{width:clamp(18px,4vw,30px);height:clamp(18px,4vw,30px)}}
body.wall-page .tile{container-type:inline-size}
body.wall-page .editor textarea, body.wall-page .panel{line-height:1.3!important}
body.wall-page .font-overlay{width:100%;max-width:100%}
body.wall-page .font-list{width:100%}
body.wall-page .font-option{box-sizing:border-box;width:100%;min-width:0;min-height:clamp(32px,19cqw,68px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding:6px 7%;font-size:clamp(11px,7cqw,27px);line-height:1.15}
body.wall-page .font-option span{display:block;min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:break-word}
body.wall-page .font-option small{font-size:clamp(7px,2.5cqw,10px);max-width:25cqw;overflow-wrap:anywhere;text-align:right}
body.wall-page .font-option:hover, body.wall-page .font-option:focus-visible{background:#0000ff;color:#fff}
body.wall-page .tile>.send-arrow{width:clamp(12px,1.55vw,23px);height:clamp(12px,1.55vw,23px);padding:clamp(2px,.22vw,4px);border-width:1px;transition:background .2s,color .2s}
body.wall-page .tile>.send-arrow::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:repeating-conic-gradient(#fff 0deg 13deg,transparent 13deg 26deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .5px));animation:ants-spin 3s linear infinite;pointer-events:none}
body.wall-page .tile>.send-arrow{border-color:transparent!important}
body.wall-page .tile>.send-arrow:hover::before, body.wall-page .tile>.send-arrow:focus-visible::before{background:repeating-conic-gradient(#fff 0deg 13deg,transparent 13deg 26deg)}
@keyframes ants-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body.wall-page .tile>.send-arrow::before{animation:none}}
@media(max-width:700px){body.wall-page .font-option{font-size:clamp(10px,7cqw,22px);min-height:clamp(30px,19cqw,60px)}
body.wall-page .tile>.send-arrow{width:clamp(12px,2vw,18px);height:clamp(12px,2vw,18px)}}
body.wall-page .font-overlay{inset:0; width:100%; max-width:none;}
body.wall-page .font-scroll, body.wall-page .font-list{width:100%;}
body.wall-page .font-option{display:flex;grid-template-columns:none;align-items:center;justify-content:space-between;width:100%;min-width:0;min-height:clamp(38px,5vw,74px);padding:8px 8%;gap:8px;font-size:clamp(13px,1.8vw,30px);line-height:1.15;white-space:nowrap}
body.wall-page .font-option span{display:block;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
body.wall-page .font-option small{flex:0 0 auto;max-width:35%;font-size:clamp(7px,.75vw,11px);white-space:nowrap}
body.wall-page .font-option:hover, body.wall-page .font-option:focus-visible{background:#0000ff;color:#fff}
body.wall-page .tile>.send-arrow{width:clamp(14.4px,1.86vw,27.6px);height:clamp(14.4px,1.86vw,27.6px);background:#0000ff;color:#fff;border:1px solid #fff!important;padding:clamp(2px,.22vw,4px)}
body.wall-page .tile>.send-arrow::before{display:none!important;animation:none!important}
body.wall-page .tile>.send-arrow:hover, body.wall-page .tile>.send-arrow:focus-visible{background:#0000ff!important;color:#fff!important;border-color:#fff!important}
body.wall-page .char-counter{position:absolute;right:8%;bottom:4%;font:400 clamp(10px,.9vw,14px)/1.2 Helvetica,Arial,sans-serif;color:#f44;pointer-events:none;font-variant-numeric:tabular-nums}
body.wall-page .char-counter[hidden]{display:none}
@media(max-width:700px){body.wall-page .font-option{min-height:38px;font-size:13px}
body.wall-page .tile>.send-arrow{width:clamp(14.4px,2.4vw,21.6px);height:clamp(14.4px,2.4vw,21.6px)}}
body.wall-page .editor textarea, body.wall-page .panel{line-height:1.2!important}
body.wall-page .editor textarea{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#666 transparent}
body.wall-page .tile>.send-arrow, body.wall-page .tile>.send-arrow:hover, body.wall-page .tile>.send-arrow:focus-visible{border:0!important;box-shadow:none!important}
body.wall-page .screen>.editor{position:absolute!important;inset:0!important;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;padding:10% 8% 5%;}
body.wall-page .screen>.editor textarea{display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;max-height:100%;overflow-y:auto!important;line-height:1.2!important;}
body.wall-page .tile>.send-arrow{top:calc(84.5% + 8px)!important;background:#fff!important;color:#000!important;border:0!important;}
body.wall-page .tile>.send-arrow:hover, body.wall-page .tile>.send-arrow:focus-visible{background:#0000ff!important;color:#fff!important;border:0!important;}
body.wall-page .screen>.editor textarea{overflow:hidden!important;scrollbar-width:none!important;}
body.wall-page .screen>.editor textarea::-webkit-scrollbar{display:none!important;}
body.wall-page .tile:first-child .font-overlay{top:0;bottom:auto;height:100vh;min-height:100%;z-index:20;}
body.wall-page .tile:first-child .font-scroll{height:100%;}
body.wall-page .tile>.send-arrow{top:calc(84.5% + 4px)!important;}
body.wall-page .screen>.editor textarea{overflow:hidden!important;overflow-y:hidden!important;overscroll-behavior:none!important;scrollbar-width:none!important;}
body.wall-page .editor-measure{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;height:auto;width:1px;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;padding:0;border:0;}
body.wall-page .char-counter{display:none!important;}
body.wall-page .color-popover{position:absolute;z-index:30;background:#202020;border:1px solid #777;border-radius:9px;padding:9px;box-shadow:0 6px 20px #0007;}
body.wall-page .color-popover[hidden]{display:none!important;}
body.wall-page .color-popover input[type=color]{display:block;width:116px;height:100px;border:0;padding:0;background:transparent;cursor:pointer;}
body.wall-page .tool.color-open{background:#0000ff;color:#fff;}
body.wall-page .color-popover{display:none!important}
body.wall-page .tile:first-child .tools{top:50%;transform:translateY(-50%);}
@media(max-width:700px){body.wall-page .tile:first-child .tools{top:50%;}}
body.wall-page .tile:first-child .tools{top:44.85%;transform:translateY(-50%)}
@media(max-width:700px){body.wall-page .tile:first-child .tools{top:44.85%}}

/* WALL OF FAME navigation and status */
body.wall-page{margin:0;overflow-x:hidden;background:#aebac9;font-family:Helvetica,Arial,sans-serif}
body.wall-page .wall-esc{position:fixed;top:16px;left:16px;z-index:110;display:grid;place-items:center;width:60px;height:32px;border:1px solid #fff;border-radius:20px;background:#000;color:#fff;font:700 14px Helvetica,Arial,sans-serif;text-decoration:none;transition:background .2s}
body.wall-page .wall-esc:hover{background:#0000ff}
body.wall-page .wall-status{position:fixed;right:16px;bottom:16px;z-index:110;color:#fff;background:#151515e8;font:12px Helvetica,Arial,sans-serif;padding:8px 12px;border-radius:5px;max-width:320px;display:none}
body.wall-page .wall-status.visible{display:block}

/* Wall of Fame: use the same ESC styling as other LABZ projects. */
body.wall-page .wall-esc{width:auto;height:auto;display:flex;z-index:110;}
body.wall-page:has(.font-overlay.open) .wall-esc{opacity:0;visibility:hidden;pointer-events:none;}

/* v19: match LABZ project ESC exactly, overriding older wall rules. */
body.wall-page .backButton.wall-esc{position:fixed!important;z-index:130!important;top:24px!important;left:24px!important;transform:none!important;width:auto!important;height:auto!important;padding:7px 12px!important;border:3px double #8a918b!important;border-radius:0!important;background:#000!important;color:#fff!important;box-shadow:none!important;text-decoration:none!important;font:16px 'Ac437 Amstrad PC-2y',monospace!important;display:flex!important;align-items:center!important;justify-content:center!important;}
body.wall-page .backButton.wall-esc:hover,body.wall-page .backButton.wall-esc:focus-visible{transform:none!important;background:#00f!important;color:#fff!important;border-color:#fff!important;outline:0!important;}
body.wall-page.font-selector-active .backButton.wall-esc{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}

/* Wall of Fame: fade the editor and controls behind the shared LABZ return sweep. */
body.wall-page.project-return-fade #wall,
body.wall-page.project-return-fade .wall-status { opacity:0; transform:translate3d(-16px,0,0); transition:opacity .34s cubic-bezier(.22,.75,.18,1),transform .34s cubic-bezier(.22,.75,.18,1); }

/* Wall: use the exact existing LABZ .page-sweep-return and .page-blackout-return rules above. */

/* Wall of Fame v24: animated 1px marching ants around the first editable screen only. */
body.wall-page .tile:first-child .screen::after {
  content:""; position:absolute; inset:0; z-index:12; pointer-events:none;
  border:1px solid transparent;
  background:linear-gradient(90deg,#fff 50%,#000 50%) 0 0/8px 1px repeat-x,
             linear-gradient(90deg,#fff 50%,#000 50%) 0 100%/8px 1px repeat-x,
             linear-gradient(0deg,#fff 50%,#000 50%) 0 0/1px 8px repeat-y,
             linear-gradient(0deg,#fff 50%,#000 50%) 100% 0/1px 8px repeat-y;
  animation:wall-screen-ants .65s linear infinite;
}
@keyframes wall-screen-ants {
  to {background-position:8px 0,-8px 100%,0 -8px,100% 8px;}
}
body.wall-page .tile:first-child.font-open .screen::after {opacity:0;}
@media (prefers-reduced-motion:reduce) {body.wall-page .tile:first-child .screen::after {animation:none;}}

/* v25: viewport-locked wall, add rows on taller windows without page scroll. */
html:has(body.wall-page){height:100%;overflow:hidden;}
body.wall-page{height:100dvh!important;min-height:0!important;overflow:hidden!important;}
body.wall-page #wall{height:100dvh;max-height:100dvh;overflow:hidden!important;align-content:start;grid-auto-rows:auto;}
body.wall-page .tile{width:100%;aspect-ratio:1;min-height:0;}

/* Wall v26: smaller baseline type and strictly non-scrolling editor. */
body.wall-page .screen>.editor textarea{font-size:clamp(8px,calc(1.12vw - 2px),20px);overflow:hidden!important;overflow-wrap:normal;word-break:normal;}
@media(max-width:700px){body.wall-page .screen>.editor textarea{font-size:clamp(8px,calc(2.35vw - 2px),16px);}}

/* Wall of Fame v27 — mobile-only LABZ navigation and single-tile view */
body.wall-page .wall-mobile-nav{display:none}
@media(max-width:700px){
 body.wall-page{height:100dvh;overflow:hidden!important;overscroll-behavior:none}
 body.wall-page #wall{height:calc(100dvh - 76px);display:block;overflow:hidden}
 body.wall-page .tile{width:100%;height:100%;aspect-ratio:auto;background-size:100% 100%;}
 body.wall-page .mobile-editor-tile{display:none}
 body.wall-page .mobile-display-tile{display:block}
 body.wall-page.mobile-editing .mobile-editor-tile{display:block}
 body.wall-page.mobile-editing .mobile-display-tile{display:none}
 body.wall-page .screen{left:30%;top:13.4%;width:40.1%;height:62.9%}
 body.wall-page .wall-mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;height:76px;padding:9px 12px max(9px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:8px;background:#050505;color:white;border-top:3px double #777;font-family:'Ac437 Amstrad PC-2y',monospace}
 body.wall-page .wall-mobile-nav button{font:inherit;color:#fff;background:#000;border:1px solid #888;border-radius:0;cursor:pointer;min-height:43px;padding:0 12px}
 body.wall-page .wall-mobile-nav button:hover,.wall-mobile-nav button:focus-visible{background:#00f!important;color:#fff!important}
 body.wall-page .wall-mobile-nav .mobile-tools{display:flex;gap:5px;align-items:center}
 body.wall-page .wall-mobile-nav .tool{position:relative!important;left:auto!important;top:auto!important;transform:none!important;flex:0 0 37px;width:37px;height:37px;border-radius:50%;font-family:Helvetica,Arial,sans-serif}
 body.wall-page .wall-mobile-nav .font-trigger{font-size:21px}
 body.wall-page .wall-mobile-nav .mobile-send{display:grid;place-items:center;flex:0 0 43px;width:43px;height:43px;background:#fff;color:#000;border-radius:50%;border:0}
 body.wall-page .wall-mobile-nav .mobile-send svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
 body.wall-page .wall-mobile-nav .mobile-message{flex:1;white-space:nowrap;font-size:12px}
 body.wall-page .wall-mobile-nav .mobile-close{display:none}
 body.wall-page.mobile-editing .wall-mobile-nav .mobile-close{display:block}
 body.wall-page .mobile-editor-tile>.send-arrow{display:none!important}
 body.wall-page .font-overlay{position:fixed!important;inset:auto 0 76px 0!important;top:auto!important;bottom:76px!important;width:100%!important;height:min(72dvh,650px)!important;max-width:none!important;min-height:0!important;z-index:160!important;clip-path:inset(100% 0 0 0);transition:clip-path 650ms cubic-bezier(.76,0,.2,1);background:#191919}
 body.wall-page .font-overlay.open{clip-path:inset(0 0 0 0)}
 body.wall-page .font-scroll{height:100%;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
 body.wall-page .font-option{min-height:64px;font-size:19px}
 body.wall-page .font-option small{font-size:10px}
 body.wall-page .backButton.wall-esc{top:10px!important;left:10px!important;z-index:90!important}
 body.wall-page .editor textarea{font-size:clamp(16px,4vw,24px)}
 body.wall-page .wall-status{bottom:86px}
}

/* v28 — mobile tile proportions and compact LABZ controls */
@media(max-width:700px){
 body.wall-page #wall{height:calc(100dvh - 76px);overflow:hidden!important;display:block!important;}
 body.wall-page #wall .tile{width:100vw!important;height:auto!important;aspect-ratio:1 / 1!important;min-height:0!important;flex:none!important;background-size:100% 100%!important;background-repeat:no-repeat!important;}
 body.wall-page #wall .mobile-display-tile{display:block!important;}
 body.wall-page.mobile-editing #wall .mobile-display-tile{display:none!important;}
 body.wall-page #wall .mobile-editor-tile{display:none!important;}
 body.wall-page.mobile-editing #wall .mobile-editor-tile{display:block!important;}
 body.wall-page .screen{left:30%;top:13.4%;width:40.1%;height:62.9%;}
 body.wall-page .wall-mobile-nav{gap:8px;padding-left:12px;padding-right:12px;}
 body.wall-page .wall-mobile-nav .mobile-tools{flex:0 0 auto;}
 body.wall-page .wall-mobile-nav .tool{width:44px!important;height:44px!important;flex:0 0 44px!important;}
 body.wall-page .wall-mobile-nav .mobile-message{min-height:44px!important;height:44px!important;padding:0 12px!important;display:flex;align-items:center;justify-content:center;line-height:1!important;}
 body.wall-page .wall-mobile-nav .mobile-send{width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 44px!important;border-radius:0!important;border:3px double #8a918b!important;background:#fff!important;color:#000!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;}
 body.wall-page .wall-mobile-nav .mobile-send svg{display:block;width:24px!important;height:24px!important;flex:none;}
 body.wall-page .wall-mobile-nav .mobile-send:disabled{background:#333!important;color:#777!important;border-color:#666!important;opacity:.65;cursor:not-allowed;}
 body.wall-page .wall-mobile-nav .mobile-send:not(:disabled):hover{background:#00f!important;color:#fff!important;border-color:#fff!important;}
 body.wall-page .wall-mobile-nav .mobile-close{min-height:44px!important;}
 body.wall-page .tile:first-child .tools{display:none!important;}
}

/* v29 — mobile controls, type scale and native-feeling font sheet. */
@media (max-width:700px){
 body.wall-page .wall-mobile-nav .font-trigger{
   width:44px!important;height:44px!important;min-height:44px!important;
   flex:0 0 44px!important;border-radius:0!important;
   border:3px double #8a918b!important;background:#000!important;color:#fff!important;
   font:22px Helvetica,Arial,sans-serif!important;display:flex!important;
   align-items:center!important;justify-content:center!important;padding:0!important;
 }
 body.wall-page .wall-mobile-nav .font-trigger:hover,
 body.wall-page .wall-mobile-nav .font-trigger:focus-visible{background:#0000ff!important;color:#fff!important;border-color:#fff!important;}
 body.wall-page .mobile-display-tile .panel{font-size:max(16px,4vw)!important;line-height:1.2!important;}
 body.wall-page .mobile-editor-tile .editor textarea{font-size:max(16px,4vw)!important;line-height:1.2!important;}
 body.wall-page .font-overlay{
   border-radius:20px 20px 0 0!important;overflow:hidden!important;
   height:min(76dvh,690px)!important;
   box-shadow:0 -12px 38px rgba(0,0,0,.35);
   display:flex!important;flex-direction:column;
 }
 body.wall-page .font-sheet-handle{
   height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;
   touch-action:pan-y;cursor:grab;background:#191919;
 }
 body.wall-page .font-sheet-handle span{display:block;width:42px;height:5px;border-radius:8px;background:#fff;opacity:.88;}
 body.wall-page .font-overlay .font-scroll{height:auto!important;flex:1;min-height:0;}
}
@media(min-width:701px){body.wall-page .font-sheet-handle{display:none}}

/* v30 — preserve square tiles, render the next tile immediately below the first. */
@media(max-width:700px){
 body.wall-page #wall{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;background:transparent!important;}
 body.wall-page #wall .tile{display:block;position:relative;flex:0 0 100vw!important;width:100vw!important;height:100vw!important;aspect-ratio:1!important;background-image:url("../img/img/tile.png")!important;background-position:center!important;background-size:100% 100%!important;}
 body.wall-page #wall .mobile-editor-tile{display:none!important;background-image:url("../img/img/tiletl.png")!important;}
 body.wall-page.mobile-editing #wall .mobile-editor-tile{display:block!important;}
 body.wall-page.mobile-editing #wall .mobile-display-tile{display:none!important;}
 body.wall-page .backButton.wall-esc{min-height:44px!important;box-sizing:border-box!important;}
 body.wall-page .font-overlay{--sheet-drag:0px;clip-path:none!important;transform:translateY(calc(100% + 80px))!important;transition:transform 480ms cubic-bezier(.22,1,.36,1)!important;will-change:transform;}
 body.wall-page .font-overlay.open{transform:translateY(var(--sheet-drag))!important;}
 body.wall-page .font-overlay.sheet-dragging{transition:none!important;}
 body.wall-page .font-sheet-handle{background:#303030!important;touch-action:none!important;cursor:grab;}
}

/* v31 — eliminate subpixel seams at the sides of vertically rolling messages.
   Overscan the animated reel, not the screen or text content. */
body.wall-page .screen > .reel {
  left: -2px;
  right: -2px;
  width: auto;
}
body.wall-page .screen > .reel > .panel {
  width: 100%;
  min-width: 100%;
}

/* Wall of Fame desktop-only text controls; keep full stack vertically centered. */
@media(min-width:701px){
 body.wall-page .tile:first-child .tools{top:44.85%;transform:translateY(-50%);}
 body.wall-page .tools .align-trigger svg{width:15px;height:15px;}
 body.wall-page .tools .size-plus,body.wall-page .tools .size-minus{font:400 20px/1 Arial,sans-serif;}
 body.wall-page .tools .tool:disabled{opacity:.25;cursor:not-allowed;pointer-events:none;}
}

/* v45: desktop controls in compact paired rows, centered as one vertical group. */
@media (min-width:701px){
 body.wall-page .tile:first-child .tools{align-items:center;}
 body.wall-page .tile:first-child .tools .tool-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;}
 body.wall-page .tile:first-child .tools .tool-row>.tool{flex:0 0 30px;}
}

/* v46: pair font selector and text alignment in the first desktop row. */
@media (min-width:701px){body.wall-page .tile:first-child .tools .font-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;}}

/* v47: artwork must fill the complete portrait screen, not render at intrinsic size. */
body.wall-page .screen > .reel > .panel.image-panel {
  padding: 0 !important;
  display: block !important;
  position: relative;
  overflow: hidden;
}
body.wall-page .screen > .reel > .panel.image-panel > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* v48: tighter desktop editor line spacing; mobile unchanged */
@media (min-width:701px){body.wall-page .screen>.editor textarea{line-height:1.05!important;}}

/* v49: desktop paired typography controls and letter-only effects. */
@media (min-width:701px){
 body.wall-page .tile:first-child .tools .alignment-row{display:flex;align-items:center;justify-content:center;gap:6px;}
 body.wall-page .tile:first-child .tools .alignment-row>.tool{flex:0 0 30px;}
 body.wall-page .tools .vertical-trigger svg,body.wall-page .tools .effect-trigger svg{width:16px;height:16px;}
 body.wall-page .screen>.editor textarea{box-sizing:border-box;padding-bottom:0!important;}
 body.wall-page .screen>.editor textarea[data-text-effect="outline"]{-webkit-text-fill-color:transparent;-webkit-text-stroke:1px var(--effect-color,#fff);}
 body.wall-page .screen>.editor textarea[data-text-effect="stripes"]{-webkit-text-fill-color:transparent;background-image:repeating-linear-gradient(to bottom,var(--effect-color,#fff) 0 2px,transparent 2px 5px);background-clip:text;-webkit-background-clip:text;}
 body.wall-page .screen>.editor textarea[data-text-effect="dither"]{-webkit-text-fill-color:transparent;background-image:radial-gradient(circle,var(--effect-color,#fff) 42%,transparent 48%);background-size:4px 4px;background-clip:text;-webkit-background-clip:text;}
}
body.wall-page .screen>.reel>.panel[data-text-effect="outline"]{-webkit-text-fill-color:transparent;-webkit-text-stroke:1px var(--effect-color,#fff);}
body.wall-page .screen>.reel>.panel[data-text-effect="stripes"]{-webkit-text-fill-color:transparent;background-image:repeating-linear-gradient(to bottom,var(--effect-color,#fff) 0 2px,transparent 2px 5px);background-clip:text;-webkit-background-clip:text;}
body.wall-page .screen>.reel>.panel[data-text-effect="dither"]{-webkit-text-fill-color:transparent;background-image:radial-gradient(circle,var(--effect-color,#fff) 42%,transparent 48%);background-size:4px 4px;background-clip:text;-webkit-background-clip:text;}

/* v51: distinct text-effect control and explicit glyph masking. */
@media (min-width:701px){
 body.wall-page .tools .effect-trigger svg{width:23px;height:23px;display:block;color:inherit;}
 body.wall-page .screen>.editor textarea[data-text-effect="outline"]{background-image:none!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:1.3px var(--effect-color,#fff)!important;}
 body.wall-page .screen>.editor textarea[data-text-effect="stripes"]{-webkit-text-stroke:0!important;-webkit-text-fill-color:transparent!important;background-image:repeating-linear-gradient(0deg,var(--effect-color,#fff) 0px,var(--effect-color,#fff) 2px,transparent 2px,transparent 5px)!important;-webkit-background-clip:text!important;background-clip:text!important;}
 body.wall-page .screen>.editor textarea[data-text-effect="dither"]{-webkit-text-stroke:0!important;-webkit-text-fill-color:transparent!important;background-image:radial-gradient(circle at 1px 1px,var(--effect-color,#fff) 0 0.85px,transparent 1px)!important;background-size:4px 4px!important;-webkit-background-clip:text!important;background-clip:text!important;}
}

/* v52: desktop emoji picker replacing experimental text-effects control. */
@media(min-width:701px){
 body.wall-page .tools .emoji-trigger{font-family:Arial,sans-serif;font-size:19px;line-height:1;}
 body.wall-page .tile:first-child .wall-emoji-picker{position:absolute;z-index:100;left:calc(30% + 6px);top:13.4%;width:min(300px,64vw);max-height:64%;display:flex;flex-direction:column;overflow:hidden;background:#171717;color:#fff;border:1px solid #777;border-radius:12px;box-shadow:0 12px 30px #0009;}
 body.wall-page .tile:first-child .wall-emoji-picker[hidden]{display:none!important;}
 body.wall-page .wall-emoji-title{font:700 11px/1.3 Arial,sans-serif;letter-spacing:.08em;padding:12px 12px 9px;flex:none;}
 body.wall-page .wall-emoji-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;padding:5px 8px 10px;min-height:0;}
 body.wall-page .wall-emoji-choice{background:transparent;color:#fff;border:0;border-radius:5px;min-height:38px;min-width:0;font-size:24px;cursor:pointer;}
 body.wall-page .wall-emoji-choice:hover,body.wall-page .wall-emoji-choice:focus-visible{background:#0000f5;outline:none;}
}

/* v53: tall, non-scrolling desktop emoji palette. */
@media(min-width:701px){
 body.wall-page .tile:first-child .wall-emoji-picker{width:min(480px,calc(100vw - 24px));max-height:none;height:auto;top:2%;left:calc(30% + 6px);overflow:visible;}
 body.wall-page .wall-emoji-grid{grid-template-columns:repeat(10,minmax(0,1fr));overflow:visible;max-height:none;min-height:0;}
 body.wall-page .wall-emoji-choice{min-height:38px;}
}

/* v54: In scrolling text panels, the vertical axis must be the flex main axis.
   JS sets justify-content for top/middle/bottom; keep horizontal text-align. */
body.wall-page .screen > .reel > .panel:not(.image-panel):not(.single-emoji-panel) {
  flex-direction: column;
  align-items: stretch;
}

/* v55: consistent compact line-height for scrolling text and editor on desktop. */
@media(min-width:701px){
 body.wall-page .screen>.reel>.panel:not(.image-panel):not(.single-emoji-panel){line-height:1.05!important;}
 body.wall-page .screen>.editor textarea{line-height:1.05!important;}
}

/* v56: placeholder size is fitted independently of enlarged editor text. */
@media(min-width:701px){
 body.wall-page .screen>.editor textarea::placeholder{font-size:var(--wall-placeholder-size,16px)!important;line-height:1.05!important;}
}

/* v61 — desktop idle/editor state; mobile remains exactly as before. */
@media (min-width:701px){
 body.wall-page #wall .tile:first-child.desktop-idle-tile{background-image:url("../img/img/tile.png")!important;}
 body.wall-page #wall .tile:first-child.desktop-active-tile{background-image:url("../img/img/tiletl.png")!important;}
 body.wall-page .desktop-idle-tile .screen>.editor,
 body.wall-page .desktop-idle-tile>.tools,
 body.wall-page .desktop-idle-tile>.send-arrow,
 body.wall-page .desktop-idle-tile>.font-overlay,
 body.wall-page .desktop-idle-tile>.wall-emoji-picker{display:none!important;}
 body.wall-page .desktop-active-tile .screen>.reel{display:none!important;}
 body.wall-page .desktop-idle-tile .screen::after{display:none!important;}
 body.wall-page #wall:not(.ignored){cursor:none;}
 body.wall-page.wall-desktop-editing #wall{cursor:auto;}
 body.wall-page #wall .desktop-idle-tile{cursor:none;}
 body.wall-page #wall .desktop-active-tile{cursor:auto;}
 .wall-pencil-cursor{position:fixed;z-index:10000;left:0;top:0;width:42px;height:42px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s;box-shadow:0 2px 12px #0004;}
 .wall-pencil-cursor svg{width:22px;height:22px;}
 .wall-pencil-cursor.visible{opacity:1;}
}
@media (max-width:700px){.wall-pencil-cursor{display:none!important;}}

/* v62: editor controls follow the clicked desktop tile, without changing mobile. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile{background-image:url("../img/img/tiletl.png")!important;}
 body.wall-page #wall .tile:first-child.desktop-idle-tile{background-image:url("../img/img/tile.png")!important;}
 body.wall-page .tile.desktop-active-tile .tools{top:44.85%;transform:translateY(-50%);align-items:center;}
 body.wall-page .tile.desktop-active-tile .tools .tool-row,
 body.wall-page .tile.desktop-active-tile .tools .font-row,
 body.wall-page .tile.desktop-active-tile .tools .alignment-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;}
 body.wall-page .tile.desktop-active-tile .tools .tool-row>.tool,
 body.wall-page .tile.desktop-active-tile .tools .alignment-row>.tool{flex:0 0 30px;}
 body.wall-page .tile.desktop-active-tile .font-overlay{top:0;bottom:auto;height:100vh;min-height:100%;z-index:20;}
 body.wall-page .tile.desktop-active-tile .font-scroll{height:100%;}
 body.wall-page .tile.desktop-active-tile .wall-emoji-picker{position:absolute;z-index:100;left:calc(30% + 6px);top:2%;width:min(480px,calc(100vw - 24px));max-height:none;height:auto;display:flex;flex-direction:column;overflow:visible;background:#171717;color:#fff;border:1px solid #777;border-radius:12px;box-shadow:0 12px 30px #0009;}
 body.wall-page .tile.desktop-active-tile .wall-emoji-picker[hidden]{display:none!important;}
 body.wall-page .tile.desktop-active-tile .screen::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px dashed #fff;animation:wall-march 1s linear infinite;}
 body.wall-page .tile.desktop-active-tile.font-open .screen::after{opacity:0;}
}

/* v63: collapse desktop ESC label 3 seconds after page initialization. */
@media (min-width: 769px){
 body.wall-page .backButton.wall-esc{gap:0!important;white-space:nowrap!important;overflow:hidden!important;transition:background .2s,border-color .2s!important;}
 body.wall-page .backButton.wall-esc .wall-esc-label{display:inline-block;max-width:4ch;overflow:hidden;white-space:pre;opacity:1;transition:max-width .3s ease,opacity .2s ease;}
 body.wall-page.wall-esc-collapsed .backButton.wall-esc .wall-esc-label{max-width:0;opacity:0;}
 body.wall-page.wall-esc-collapsed .backButton.wall-esc:hover .wall-esc-label,
 body.wall-page.wall-esc-collapsed .backButton.wall-esc:focus-visible .wall-esc-label{max-width:4ch;opacity:1;}
}

/* v65 — desktop font selector spans the full wall column, from the wall's top edge. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile.font-open{z-index:50;}
 body.wall-page #wall .tile.desktop-active-tile .font-overlay{
  top:calc(-1 * var(--wall-font-offset, 0px));
  bottom:auto;
  height:var(--wall-font-height, 100dvh);
  min-height:0;
  width:100%;
 }
}

/* v70: desktop emoji palette is portaled to body to avoid tile overflow clipping. */
@media(min-width:701px){
 body.wall-page > .wall-emoji-picker{position:fixed!important;z-index:10000!important;left:12px;top:12px;width:min(480px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);height:auto;display:flex;flex-direction:column;overflow:hidden;background:#171717;color:#fff;border:1px solid #777;border-radius:12px;box-shadow:0 12px 30px #0009;}
 body.wall-page > .wall-emoji-picker[hidden]{display:none!important;}
 body.wall-page > .wall-emoji-picker .wall-emoji-title{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;flex:none;}
 body.wall-page > .wall-emoji-picker .wall-emoji-title:active{cursor:grabbing;}
 body.wall-page > .wall-emoji-picker .wall-emoji-grid{overflow-y:auto;overscroll-behavior:contain;min-height:0;grid-template-columns:repeat(10,minmax(0,1fr));}
}

/* v71: emoji selector mirrors the desktop full-column font selector. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile.emoji-open{z-index:51;}
 body.wall-page #wall .tile.desktop-active-tile>.wall-emoji-picker{
  position:absolute!important;
  z-index:30!important;
  left:0!important;
  right:0!important;
  top:calc(-1 * var(--wall-emoji-offset,0px))!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  height:var(--wall-emoji-height,100dvh)!important;
  max-height:none!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  padding:0!important;
  overflow:hidden!important;
  background:#191919!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 650ms cubic-bezier(.76,0,.2,1);
  pointer-events:none;
 }
 body.wall-page #wall .tile.desktop-active-tile>.wall-emoji-picker.open{
  clip-path:inset(0 0 0 0);pointer-events:auto;
 }
 body.wall-page #wall .tile.desktop-active-tile>.wall-emoji-picker[hidden]{display:none!important;}
 body.wall-page #wall .wall-emoji-title{
  flex:none;padding:20px 8% 14px;cursor:default;touch-action:auto;
  font:700 12px/1.4 Arial,sans-serif;letter-spacing:.08em;
 }
 body.wall-page #wall .wall-emoji-grid{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(64px,auto);align-content:start;
  gap:0;padding:16px 5% 16px;
 }
 body.wall-page #wall .wall-emoji-choice{
  width:100%;min-width:0;min-height:64px;
  display:grid;place-items:center;border:0;border-radius:0;
  background:#191919!important;color:#fff;
  font-size:clamp(30px,3.4vw,52px);line-height:1.2;cursor:pointer;
 }
 body.wall-page #wall .wall-emoji-choice:hover,
 body.wall-page #wall .wall-emoji-choice:focus-visible{background:#353535!important;outline:none;}
}

/* v72: emoji cells use soft rounded hover corners, with no selector heading. */
@media (min-width:701px){
 body.wall-page #wall .wall-emoji-choice{border-radius:10px!important;}
 body.wall-page #wall .wall-emoji-choice:hover,body.wall-page #wall .wall-emoji-choice:focus-visible{border-radius:10px!important;}
}

/* v74: keep ESC behind the desktop emoji column, like the font selector. */
@media (min-width:769px){
 body.wall-page:has(.wall-emoji-picker.open) .backButton.wall-esc{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
}

/* v75: keep the native cursor hidden on all non-editing desktop tiles,
   including their nested screen/reel/panel elements, while pencil is shown. */
@media (min-width:701px) and (pointer:fine){
 body.wall-page #wall,
 body.wall-page #wall .tile:not(.desktop-active-tile),
 body.wall-page #wall .tile:not(.desktop-active-tile) *{cursor:none!important;}
}

/* v76 — desktop selectors open in the adjacent column, not over the editor. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile .font-overlay,
 body.wall-page #wall .tile.desktop-active-tile>.wall-emoji-picker{
  left:var(--wall-selector-side,100%)!important;
  right:auto!important;
 }
}

/* v77 — selectors opening to the left sweep in from the right.
   The same clip-path transition handles both opening and closing. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile.selector-on-left .font-overlay:not(.open),
 body.wall-page #wall .tile.desktop-active-tile.selector-on-left>.wall-emoji-picker:not(.open){
  clip-path:inset(0 0 0 100%);
 }
}

/* v78 — keep the desktop editor controls visible while browsing fonts,
   matching the adjacent-column emoji selector. */
@media (min-width:701px){
 body.wall-page #wall .tile.desktop-active-tile.font-open .tools{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
 }
 body.wall-page #wall .tile.desktop-active-tile.font-open>.send-arrow{
  opacity:1!important;pointer-events:auto!important;
 }
}

/* v95: no marching-ants outline on hover or selection (desktop only). */
@media (min-width:701px){
 body.wall-page #wall .tile::after,
 body.wall-page #wall .tile .screen::after{content:none!important;display:none!important;animation:none!important;}
}