@font-face {
  font-family: 'Minecraftia';
  src: url('../assets/Minecraftia-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Minecraft';
  src: url('../assets/Minecraftia-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font: 12pt 'Minecraftia', monospace;
}

html[data-scene='overworld'] {
  --scene-subpage-bg: url('../assets/overworld/background.png');
  --scene-chatbot-bg: url('../assets/overworld/chatbotbackground.png');
}

html[data-scene='nether'] {
  --scene-subpage-bg: url('../assets/nether/background.png');
  --scene-chatbot-bg: url('../assets/nether/chatbotbackground.png');
}

html[data-scene='end'] {
  --scene-subpage-bg: url('../assets/end/background.png');
  --scene-chatbot-bg: url('../assets/end/chatbotbackground.png');
}

html[data-scene='secret'] {
  --scene-subpage-bg: linear-gradient(#120000, #000);
  --scene-chatbot-bg: linear-gradient(#120000, #000);
}

html[data-scene='secret'] #sub-page-bg {
  background: #000;
}

html[data-scene='secret'] #sub-page-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#300000 0%, #0a0000 20%, transparent 60%);
  animation: secret-glow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes secret-glow {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.3; }
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* ═══════════════════════════════════════
   SPLASH SCREEN
   ═══════════════════════════════════════ */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#splash-screen {
  flex-direction: column;
  gap: 0;
}

#splash-logo {
  width: 340px;
  height: auto;
  opacity: 0.3;
  filter: grayscale(100%) brightness(0.6);
}

#splash-hint {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #ffffff;
  letter-spacing: 1px;
  margin-top: -30px;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.95),
    0 0 14px rgba(255, 255, 255, 0.65),
    0 0 28px rgba(200, 230, 255, 0.45);
}

#panorama-container,
#vignette,
#main-menu {
  opacity: 0;
  transition: opacity 1.2s ease;
}

#panorama-container.visible,
#vignette.visible,
#main-menu.visible {
  opacity: 1;
}

#music-player:not(.visible) {
  pointer-events: none;
}

html[data-scene='secret'] #music-player {
  pointer-events: none;
}

/* ═══════════════════════════════════════
   PANORAMA CANVAS
   ═══════════════════════════════════════ */
#panorama-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

#panorama-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

html[data-scene='nether'] #panorama-container canvas,
html[data-scene='end'] #panorama-container canvas {
  filter: blur(5px);
  transform: scale(1.06);
  transform-origin: center center;
}

/* ═══════════════════════════════════════
   VIGNETTE OVERLAY
   ═══════════════════════════════════════ */
#vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* ═══════════════════════════════════════
   MAIN MENU
   ═══════════════════════════════════════ */
#main-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════
   CONTACT BAR (top-right icons)
   ═══════════════════════════════════════ */
#contact-bar {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-bar-label {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #aaa;
  text-shadow: 1px 1px 0px #000;
  margin-right: 2px;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #aaa;
  transition: color 0.15s;
}

.contact-icon:hover {
  color: #fff;
}

.contact-icon svg {
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════
   TITLE
   ═══════════════════════════════════════ */
#title-container {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#title-img {
  width: 58vw;
  max-width: 900px;
  min-width: 300px;
  height: auto;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

#splash-text {
  position: absolute;
  right: -10%;
  bottom: 10%;
  color: #ffff00;
  font-family: 'Minecraftia', monospace;
  font-style: normal;
  font-size: clamp(12px, 1.8vw, 24px);
  transform: rotate(-20deg);
  transform-origin: center center;
  white-space: nowrap;
  text-shadow: 2px 2px 0px #3f3f00;
  animation: splash-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes splash-pulse {
  0%, 100% { transform: rotate(-20deg) scale(1); }
  50% { transform: rotate(-20deg) scale(1.12); }
}

/* ═══════════════════════════════════════
   MENU (grid layout from reference)
   ═══════════════════════════════════════ */
.mc-menu {
  --btn-size: 60px;
  display: grid;
  grid-template-columns: var(--btn-size) calc(var(--btn-size) * 10) var(--btn-size);
  grid-template-rows: repeat(3, var(--btn-size)) 16px var(--btn-size);
  grid-template-areas:
    '.    first   .'
    '.    second  .'
    '.    third   .'
    '.    .       .'
    'lang fourth  .';
  grid-gap: 8px;
}

.mc-menu > .mc-button:nth-child(1) { grid-area: first; }
.mc-menu > .mc-button:nth-child(2) { grid-area: second; }
.mc-menu > .mc-button:nth-child(3) { grid-area: third; }
.mc-menu > .double                  { grid-area: fourth; }
.mc-menu > .mc-button:nth-child(5) { grid-area: lang; }

.double {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'left right';
  grid-gap: 8px;
}

.double .mc-button:nth-child(1) { grid-area: left; }
.double .mc-button:nth-child(2) { grid-area: right; }

/* ═══════════════════════════════════════
   BUTTON (from reference)
   ═══════════════════════════════════════ */
.mc-button {
  height: var(--btn-size, 60px);
  width: calc(var(--btn-size, 60px) * 10);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  font-family: 'Minecraftia', monospace;
  font-size: 24px;
  background: #999 url('../assets/bgbtn.png') center / cover;
  image-rendering: pixelated;
  border: 2px solid #000;
  border-radius: 0;
  padding: 0;
  outline: none;
  display: flex;
}

.mc-button.full {
  width: 100%;
  height: 100%;
}

.mc-button .title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.45em;
  color: #ddd;
  text-shadow: 2px 2px #000a;
  box-shadow: inset -2px -4px #0006, inset 2px 2px #fff7;
}

.mc-button:hover .title {
  background-color: rgba(100, 100, 255, 0.45);
  text-shadow: 2px 2px #202013cc;
  color: #ffffa0;
}

.mc-button:active .title {
  box-shadow: inset -2px -4px #0004, inset 2px 2px #fff5;
}

.mc-button.lang img {
  width: 40px;
  height: 40px;
}

.mc-button.lang .title {
  padding-top: 0;
}

/* ═══════════════════════════════════════
   MUSIC PLAYER WIDGET
   ═══════════════════════════════════════ */
#music-player {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: none;
}

#music-player.visible {
  opacity: 1;
}

/* One-time on first menu reveal (see main.js); sub-page toggles stay instant. */
#music-player.visible.mp-initial-fade {
  transition: opacity 1.2s ease;
}

#player-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

#player-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#player-track {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #ffffff;
  text-shadow: 1px 1px 0px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#player-artist {
  font-family: 'Minecraftia', monospace;
  font-size: 8px;
  color: #aaaaaa;
  text-shadow: 1px 1px 0px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

#player-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.player-btn {
  background: none;
  border: none;
  color: #cccccc;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  text-shadow: 1px 1px 0px #000;
  line-height: 1;
}

.player-btn:hover {
  color: #ffffff;
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

#volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  cursor: pointer;
}

#player-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}

#player-current,
#player-duration {
  font-family: 'Minecraftia', monospace;
  font-size: 7px;
  color: #aaaaaa;
  text-shadow: 1px 1px 0px #000;
  flex-shrink: 0;
}

#player-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  position: relative;
}

#player-progress-bar {
  height: 100%;
  width: 0%;
  background: #ffffff;
}

/* ═══════════════════════════════════════
   MENU DOCK (footer strip + friendly font, pinned to viewport bottom)
   ═══════════════════════════════════════ */
.menu-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: block;
  padding: 0 0 max(0.5vh, env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.menu-dock.visible {
  opacity: 1;
}

/* ═══════════════════════════════════════
   MENU FOOTER (world scene + version strip)
   ═══════════════════════════════════════ */
#menu-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0.8vw 0;
  pointer-events: none;
}

#menu-footer .scene-switch,
#menu-footer #bottom-bar {
  pointer-events: auto;
}

/* ═══════════════════════════════════════
   BOTTOM BAR
   ═══════════════════════════════════════ */
#bottom-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.8vw;
  box-sizing: border-box;
}

.scene-switch.scene-switch--menu {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.scene-switch-title {
  font-family: 'Minecraftia', monospace;
  font-size: clamp(9px, 1.1vw, 12px);
  color: #c6c6c6;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.06em;
}

.scene-switch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 96vw;
}

.scene-switch .mc-button.scene-mc-btn {
  --btn-size: 26px;
  height: 34px;
  width: auto;
  min-width: 104px;
  max-width: 38vw;
  font-size: clamp(10px, 1.15vw, 14px);
}

.scene-switch .mc-button.scene-mc-btn .title {
  padding: 0 12px;
  padding-top: 0.38em;
}

.scene-switch .mc-button.scene-mc-btn.scene-btn--active .title {
  color: #ffffa0;
  background-color: rgba(100, 100, 200, 0.35);
}

#version-text,
#copyright-text {
  font-family: 'Minecraftia', monospace;
  font-size: clamp(8px, 1vw, 13px);
  color: #ffffff;
  text-shadow: 1px 1px 0px #3f3f3f;
  line-height: 1;
}

/*
 * Own layer (not inside .menu-dock): position is only this block + the footer strip.
 * Opacity fades with the rest of the UI via .visible from main.js (same timing as .menu-dock).
 * bottom: viewport distance to the button's bottom edge — tune vs. #menu-footer height.
 */
#font-toggle {
  position: fixed;
  right: max(14px, 2vw);
  bottom: calc(3.15rem + max(6px, env(safe-area-inset-bottom, 0px)));
  z-index: 6;
  height: 36px;
  width: auto;
  max-width: min(420px, 92vw);
  font-size: 13pt;
  font-family: 'Segoe UI', Verdana, sans-serif;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#font-toggle.visible {
  opacity: 1;
}

#font-toggle .title {
  padding: 0 14px;
  padding-top: 0;
  font-family: 'Segoe UI', Verdana, sans-serif;
}

/* ═══════════════════════════════════════
   SITE BELL (gif: static first frame, click to play)
   ═══════════════════════════════════════ */
/*
 * Caption text must not reflow the bell: shrink-to-fit slot width + flex column used to
 * move the graphic when copy changed (e.g. rate limit). Button is pinned; caption sits above.
 */
.bell-widget {
  position: relative;
  z-index: 1;
  width: 220px;
  min-height: 104px;
  box-sizing: border-box;
  pointer-events: auto;
}

.bell-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 104px;
  text-align: center;
  font-family: 'Minecraftia', monospace;
  font-size: clamp(10px, 1.15vw, 13px);
  color: #ccc;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.35;
}

.bell-button {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

.bell-surface {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
}

.bell-surface #bell-canvas,
.bell-surface .bell-gif {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bell-button:hover {
  background: transparent;
  filter: brightness(1.08);
}

.bell-button--playing {
  opacity: 0.95;
}

#bell-canvas {
  display: block;
  max-width: 96px;
  max-height: 96px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.bell-gif {
  display: block;
  max-width: 96px;
  max-height: 96px;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.bell-gif[hidden] {
  display: none !important;
}

html:has(body.readable-font) {
  font-size: 18px;
}

body.readable-font *:not(#title-img):not(.ct-ingredient):not(.player-btn):not(svg):not(path) {
  font-family: 'Segoe UI', Verdana, sans-serif !important;
}

body.readable-font .mc-button .title,
body.readable-font .chat-send .title,
body.readable-font .back-button .title,
body.readable-font .sub-page-nav .mc-button .title,
body.readable-font .mp-btn .title {
  padding-top: 0 !important;
}

body.readable-font .sub-page-nav .mc-button {
  font-size: 13px !important;
}

body.readable-font .mc-button {
  font-size: 22px !important;
}

body.readable-font #font-toggle {
  font-size: 13pt !important;
}

body.readable-font .poem-text {
  font-size: clamp(17px, 2vw, 24px) !important;
}

body.readable-font .mp-title {
  font-size: 26px !important;
}

body.readable-font .mp-name {
  font-size: 26px !important;
}

body.readable-font .mp-motd {
  font-size: 20px !important;
}

body.readable-font .mp-players {
  font-size: 18px !important;
}

body.readable-font .chat-msg {
  font-size: 18px !important;
}

body.readable-font .chat-suggestion-btn {
  font-family: 'Segoe UI', Verdana, sans-serif !important;
  font-size: 12px !important;
}

body.readable-font .chat-input {
  font-size: 16px !important;
}

body.readable-font .pd-title {
  font-size: 30px !important;
}

body.readable-font .pd-desc {
  font-size: 20px !important;
}

body.readable-font .pd-skill {
  font-size: 17px !important;
}

body.readable-font .pd-date {
  font-size: 18px !important;
}

body.readable-font .pd-award {
  font-size: 15px !important;
}

body.readable-font .pd-contact-label {
  font-size: 18px !important;
}

body.readable-font .pd-contact-value {
  font-size: 16px !important;
}

body.readable-font .ct-title {
  font-size: 20px !important;
}

body.readable-font .ct-nametag,
body.readable-font .ct-hint {
  font-size: 13px !important;
}

body.readable-font .contact-bar-label {
  font-size: 13px !important;
}

body.readable-font #version-text,
body.readable-font #copyright-text {
  font-size: clamp(11px, 1.2vw, 16px) !important;
}

body.readable-font .scene-switch .mc-button.scene-mc-btn {
  font-size: 13px !important;
}

body.readable-font .scene-switch .mc-button.scene-mc-btn .title {
  font-family: 'Segoe UI', Verdana, sans-serif !important;
  padding-top: 0 !important;
}

body.readable-font .scene-switch-title {
  font-family: 'Segoe UI', Verdana, sans-serif !important;
  font-size: 12px !important;
}

body.readable-font #player-track {
  font-size: 13px !important;
}

body.readable-font #player-artist {
  font-size: 11px !important;
}

body.readable-font #splash-hint {
  font-size: 13px !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.65),
    0 0 28px rgba(200, 230, 255, 0.45) !important;
}

body.readable-font #splash-text {
  font-size: clamp(14px, 2.2vw, 28px) !important;
}

body.readable-font .pd-panel * {
  font-family: 'Segoe UI', Verdana, sans-serif !important;
}

/* ═══════════════════════════════════════
   SUB-PAGE OVERLAY
   ═══════════════════════════════════════ */
#sub-page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}

#sub-page-overlay.visible {
  display: block;
}

#sub-page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--scene-subpage-bg) center center / cover no-repeat;
  z-index: 0;
}

#sub-page-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2vh 2vw;
  padding-bottom: max(2vh, env(safe-area-inset-bottom, 0px));
}

.sub-page-nav {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: min(96vw, 640px);
  pointer-events: auto;
}

.sub-page-nav-btn {
  height: 30px;
  width: auto;
  min-width: 0;
  font-size: 8pt;
}

.sub-page-nav-btn .title {
  padding: 0 10px;
  padding-top: 0.25em;
}

.sub-page-nav-btn.sub-page-nav-btn--active .title {
  color: #ffffa0;
}

.back-button {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 12;
  height: 32px;
  width: auto;
  font-size: 9pt;
}

#sub-page-content:has(.mp-page) > .back-button {
  display: none;
}

.back-button .title {
  padding: 0 14px;
  padding-top: 0.3em;
}

#sub-page-inner {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.13);
  width: 50vw;
  max-width: 550px;
  min-width: 300px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 3vh 3vw;
  color: #ffffff;
  font-family: 'Minecraftia', monospace;
  font-size: clamp(10px, 1.3vw, 16px);
  text-shadow: 1px 1px 0px #000;
  line-height: 1.6;
  margin-top: 1vh;
}

/* Bell: direct child of #sub-page-overlay (not inside #sub-page-content flex) — viewport-fixed, no vh jump. */
.sub-page-bell-slot {
  display: none;
  position: fixed;
  z-index: 11;
  right: max(2vw, 14px);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.sub-page-bell-slot--visible {
  display: block;
  pointer-events: auto;
}

.sub-page-bell-slot .bell-widget {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

#sub-page-inner:has(.mp-page) {
  background: none;
  border: none;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  padding: 0 0 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Scrollbar styling */
#sub-page-inner::-webkit-scrollbar {
  width: 8px;
}

#sub-page-inner::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

#sub-page-inner::-webkit-scrollbar-thumb {
  background: #5a5a5a;
  border: 1px solid #8b8b8b;
}

/* ═══════════════════════════════════════
   SUB-PAGE CONTENT STYLES
   ═══════════════════════════════════════ */
.sub-page-title {
  font-size: clamp(14px, 2vw, 24px);
  color: #ffff00;
  margin-bottom: 2vh;
  text-align: center;
  text-shadow: 2px 2px 0px #000;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vh 1.2vw;
  margin-top: 1.5vh;
  list-style: none;
}

.skills-list li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.4vh 1vw;
  font-size: clamp(9px, 1.1vw, 14px);
}

/* End Poem (About Me) — two-column layout */
.about-columns {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: 2vw;
  padding: 2vh 3vw;
  overflow: hidden;
}

.poem-left {
  flex: 55;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  overflow: hidden;
  min-height: 0;
}

.poem-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.poem-row.right {
  flex-direction: row;
}

.poem-text {
  flex: 1;
  font-family: 'Minecraftia', monospace;
  font-size: clamp(10px, 1.2vw, 15px);
  line-height: 1.9;
  text-shadow: 1px 1px 0px #000;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.poem-text.cyan {
  color: #55ffff;
  text-align: left;
}

.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: -2px;
  cursor: pointer;
  transition: color 0.15s;
}

.inline-link:hover {
  color: #ffff55;
}

html[data-scene='nether'] .inline-link:hover {
  color: #fff2c4;
}

html[data-scene='end'] .inline-link:hover {
  color: #d8c8ff;
}

.poem-text.green {
  color: #00aa00;
  text-align: right;
}

html[data-scene='nether'] .poem-text.cyan,
html[data-scene='nether'] .chat-msg.bot {
  color: #ffe4d6;
}

html[data-scene='nether'] .poem-text.green,
html[data-scene='nether'] .chat-msg.user {
  color: #ff8f6f;
}

html[data-scene='end'] .poem-text.cyan {
  color: #8b7eb8;
}

html[data-scene='end'] .poem-text.green {
  color: #6f6199;
}

html[data-scene='end'] .chat-msg.bot {
  color: #e6defc;
}

html[data-scene='end'] .chat-msg.user {
  color: #f2e4b8;
}

html[data-scene='secret'] .poem-text.cyan,
html[data-scene='secret'] .chat-msg.bot {
  color: #cccccc;
}

html[data-scene='secret'] .poem-text.green,
html[data-scene='secret'] .chat-msg.user {
  color: #888888;
}

html[data-scene='secret'] .inline-link:hover {
  color: #ffffff;
}

.scramble-word {
  color: #fff;
  display: inline-block;
  font-family: 'Minecraftia', monospace;
  overflow: hidden;
  vertical-align: baseline;
  line-height: inherit;
}

.poem-img {
  height: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  border: 3px solid rgba(180, 150, 120, 0.5);
  border-radius: 3px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #5a4a3a 0%, #7a6a5a 50%, #5a4a3a 100%);
}

.skin-right {
  flex: 45;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  /* Skin row keeps a stable minimum height; chat sits in the second row and scrolls internally */
  display: grid;
  grid-template-columns: 1fr;
  /* Second row: fixed chat height so the panel never grows/shrinks with message count */
  grid-template-rows: minmax(200px, 1fr) 252px;
  gap: 6px;
  overflow: hidden;
}

#skin-viewer {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 2px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

#skin-viewer::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: var(--scene-chatbot-bg) center / cover no-repeat;
  filter: blur(6px);
  z-index: 0;
}

#skin-viewer canvas {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  z-index: 1;
}

.chat-box {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 252px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-msg {
  font-family: 'Minecraftia', monospace;
  font-size: 12px;
  line-height: 1.6;
  text-shadow: 1px 1px 0px #000;
  padding: 5px 8px;
  max-width: 85%;
  word-wrap: break-word;
}

.chat-msg.user {
  color: #00aa00;
  background: none;
  border: none;
  align-self: flex-end;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.chat-msg.bot {
  color: #55ffff;
  background: none;
  border: none;
  align-self: flex-start;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.chat-suggestions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 6px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.chat-suggestions.chat-suggestions--hidden {
  display: none;
}

.chat-suggestion-btn {
  font-family: 'Minecraftia', monospace;
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
  color: #dddddd;
  text-shadow: 1px 1px 0 #000;
  background: rgba(36, 36, 48, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 5px 4px;
  cursor: pointer;
  outline: none;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
}

.chat-suggestion-btn:hover {
  background: rgba(70, 70, 110, 0.55);
  color: #ffffaa;
  border-color: rgba(255, 255, 255, 0.28);
}

.chat-input-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  min-height: 44px;
}

.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #ffffff;
  font-family: 'Minecraftia', monospace;
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 10px;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.chat-input::placeholder {
  color: #666666;
}

.chat-send {
  flex-shrink: 0;
  align-self: stretch;
  width: auto;
  min-width: 72px;
  background: #999 url('../assets/bgbtn.png') center / cover;
  image-rendering: pixelated;
  border: 2px solid #000;
  border-radius: 0;
  padding: 0;
  outline: none;
  cursor: pointer;
  display: flex;
}

.chat-send .title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  padding-top: 0.35em;
  color: #ddd;
  font-family: 'Minecraftia', monospace;
  font-size: 12px;
  text-shadow: 1px 1px #000a;
  box-shadow: inset -2px -4px #0006, inset 2px 2px #fff7;
}

.chat-send:hover .title {
  background-color: rgba(100, 100, 255, 0.45);
  color: #ffffa0;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #5a5a5a;
}

/* Multiplayer / Projects page */
.mp-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* About Me: let the column flex chain shrink the skin viewer instead of clipping chat */
.mp-page:has(.about-columns) {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

@media (max-width: 900px) {
  .about-columns {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    padding: 1vh 2vw 2vh;
  }

  .poem-left {
    flex: 0 0 auto;
  }

  .skin-right {
    flex: 0 1 auto;
    min-height: 0;
  }

  .skin-right {
    grid-template-rows: minmax(160px, 28vh) 252px;
  }
}

.mp-title {
  font-family: 'Minecraftia', monospace;
  font-size: 18px;
  color: #ffffff;
  text-shadow: 2px 2px 0px #000;
  text-align: center;
  padding: 16px 0;
  flex-shrink: 0;
}

.mp-list {
  flex: 1;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  border-top: none;
  border-bottom: none;
  padding: 4px 8vw;
  padding-right: calc(8vw + 28px);
}

.mp-list {
  scrollbar-width: none;
}

.mp-list::-webkit-scrollbar {
  display: none;
}

.mc-sb-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.mc-sb-wrapper .mp-list {
  flex: 1;
}

.mc-scrollbar-track {
  width: 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: #000;
}

.mc-sb-btn {
  width: 24px;
  height: 24px;
  background: #C6C6C6;
  border: 3px solid #555;
  border-top-color: #FFF;
  border-left-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}

.mc-sb-btn span {
  font-size: 8px;
  color: #3F3F3F;
  line-height: 1;
  margin-top: -2px;
}

.mc-sb-btn:hover {
  background: #D8D8D8;
}

.mc-sb-btn:active {
  background: #AAAAAA;
  border-color: #FFF;
  border-top-color: #555;
  border-left-color: #555;
}

.mc-sb-rail {
  flex: 1;
  background: #1A1A1A;
  position: relative;
  border-left: 2px solid #333;
  border-right: 2px solid #333;
}

.mc-sb-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #C6C6C6;
  border: 3px solid #555;
  border-top-color: #FFF;
  border-left-color: #FFF;
  cursor: pointer;
  min-height: 30px;
}

.mc-sb-thumb:hover {
  background: #D8D8D8;
}

.mc-sb-thumb:active {
  background: #AAAAAA;
}

.mp-entry {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  cursor: pointer;
  border: 1px solid transparent;
}

.mp-entry:hover,
.mp-entry.selected {
  background: rgba(200, 200, 200, 0.1);
  border: 1px solid rgba(200, 200, 200, 0.6);
}

.mp-icon {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
}

.mp-icon-placeholder {
  width: 100%;
  height: 100%;
  background: #2a2a2a;
  image-rendering: pixelated;
}

.mp-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mp-name {
  font-family: 'Minecraftia', monospace;
  font-size: 18px;
  color: #ffffff;
  text-shadow: 1px 1px 0px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-motd {
  font-family: 'Minecraftia', monospace;
  font-size: 14px;
  color: #888888;
  text-shadow: 1px 1px 0px #000;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Minecraftia', monospace;
  text-shadow: 1px 1px 0px #000;
}

.mp-players {
  color: #aaaaaa;
  font-size: 14px;
}

.mp-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.mp-signal-bar {
  width: 3px;
  background: #55ff55;
}

.mp-signal-bar:nth-child(1) { height: 4px; }
.mp-signal-bar:nth-child(2) { height: 7px; }
.mp-signal-bar:nth-child(3) { height: 10px; }
.mp-signal-bar:nth-child(4) { height: 14px; }
.mp-signal-bar:nth-child(5) { height: 18px; }

.mp-btn-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-shrink: 0;
  padding: 0 8vw;
}

.mp-btn {
  flex: 1;
  height: 40px;
  font-size: 12pt;
}

.mp-btn .title {
  padding-top: 0.3em;
}

/* Scrapbook layout (About Me) */
.scrapbook {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.scrap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.scrap-photo {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border: 3px solid rgba(180, 150, 120, 0.6);
  border-radius: 3px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.scrap-photo.small {
  width: 80px;
  height: 80px;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #5a4a3a 0%, #7a6a5a 50%, #5a4a3a 100%);
}

.scrap-bubble {
  background: rgba(200, 180, 150, 0.25);
  border: 2px solid rgba(200, 180, 150, 0.35);
  border-radius: 6px;
  padding: 8px 12px;
  max-width: 220px;
}

.scrap-bubble p {
  color: #eeddcc;
  margin: 0;
  font-size: clamp(9px, 1.1vw, 13px);
}

.scrap-star {
  color: #d4a843;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* Contact links */
.contact-links {
  list-style: none;
}

.contact-links li {
  margin-bottom: 1.5vh;
}

.contact-links a {
  color: #55aaff;
  text-decoration: none;
  font-family: 'Minecraftia', monospace;
  text-shadow: 1px 1px 0px #000;
}

.contact-links a:hover {
  color: #88ccff;
  text-decoration: underline;
}

/* ═══════════════════════════════════════
   CRAFTING TABLE (Work Experience)
   Styled to match Minecraft crafting UI
   ═══════════════════════════════════════ */

.crafting-page {
  align-items: center;
  justify-content: center;
}

.crafting-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-holder {
  padding: 28px;
  background: #C6C6C6;
  border: 4px solid #555;
  border-top-color: #FFF;
  border-left-color: #FFF;
}

.ct-crafting {
  display: flex;
  align-items: center;
}

.ct-recipe {
  flex-shrink: 0;
}

.ct-title {
  font-family: 'Minecraftia', monospace;
  font-size: 16px;
  color: #404040;
  margin-bottom: 8px;
}

.ct-table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  line-height: 0;
}

.ct-grid-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #8B8B8B;
  border: 4px solid #373737;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
  cursor: pointer;
  position: relative;
  transition: background-color 0.07s ease;
}

.ct-grid-slot:hover {
  background-color: #6e6e6e;
}

.ct-grid-slot-lg {
  width: 124px;
  height: 124px;
}

.ct-ingredient {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ct-grid-slot-lg .ct-ingredient {
  width: 86px;
  height: 86px;
}

.ct-arrow {
  width: 72px;
  height: 44px;
  margin: 0 28px;
  flex-shrink: 0;
  background: #8B8B8B;
  clip-path: polygon(0% 30%, 60% 30%, 60% 0%, 100% 50%, 60% 100%, 60% 70%, 0% 70%);
}

.ct-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 130px;
  justify-content: center;
}

.ct-nametag {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  margin-bottom: 4px;
  background: #100010dd;
  border: 1px solid #28002e;
  padding: 2px 6px;
  visibility: visible;
}

.ct-hint {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #55FF55;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  margin-top: 6px;
  visibility: visible;
}

/* ═══════════════════════════════════════
   PROJECT DETAIL POPUP
   Minecraft inventory-panel style
   ═══════════════════════════════════════ */
.pd-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.pd-overlay.visible {
  background: rgba(0, 0, 0, 0.65);
}

.pd-panel {
  background: #C6C6C6;
  border: 4px solid #555;
  border-top-color: #FFF;
  border-left-color: #FFF;
  width: 660px;
  max-width: 92vw;
  min-height: 380px;
  max-height: 82vh;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
}

.pd-overlay.visible .pd-panel {
  transform: scale(1);
  opacity: 1;
}

.pd-inner {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: 78vh;
}

.pd-inner::-webkit-scrollbar {
  width: 8px;
}

.pd-inner::-webkit-scrollbar-track {
  background: #8B8B8B;
}

.pd-inner::-webkit-scrollbar-thumb {
  background: #555;
  border: 1px solid #333;
}

.pd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.pd-title {
  font-family: 'Minecraftia', monospace;
  font-size: 18px;
  color: #3F3F3F;
  line-height: 1.4;
  cursor: text;
}

.pd-award {
  font-family: 'Minecraftia', monospace;
  font-size: 11px;
  color: #FFAA00;
  text-shadow: 1px 1px 0px #553300;
  margin-bottom: 6px;
}

.pd-close {
  background: none;
  border: none;
  font-family: 'Minecraftia', monospace;
  font-size: 22px;
  color: #555;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

.pd-close:hover {
  color: #c00;
}

.pd-date {
  font-family: 'Minecraftia', monospace;
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

.pd-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.pd-skill {
  font-family: 'Minecraftia', monospace;
  font-size: 12px;
  color: #FFF;
  background: #8B8B8B;
  border: 2px solid #555;
  border-top-color: #AAA;
  border-left-color: #AAA;
  padding: 4px 8px 2px;
  text-shadow: 1px 1px 0px #000;
  image-rendering: pixelated;
  display: inline-flex;
  align-items: center;
}

.pd-desc {
  font-family: 'Minecraftia', monospace;
  font-size: 14px;
  color: #3F3F3F;
  line-height: 2;
  margin-bottom: 20px;
  cursor: text;
}

.pd-view-row {
  display: flex;
  justify-content: flex-end;
}

.pd-view-btn {
  height: 36px !important;
  width: auto !important;
  font-size: 10pt !important;
}

.pd-view-btn .title {
  padding: 0 20px !important;
  padding-top: 0.3em !important;
}

.pd-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pd-contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #8B8B8B;
  border: 2px solid #555;
  border-top-color: #AAA;
  border-left-color: #AAA;
  cursor: pointer;
}

.pd-contact-item:hover {
  background: #9A9A9A;
}

.pd-contact-label {
  font-family: 'Minecraftia', monospace;
  font-size: 12px;
  color: #FFF;
  text-shadow: 1px 1px 0px #000;
}

.pd-contact-value {
  font-family: 'Minecraftia', monospace;
  font-size: 10px;
  color: #3F3F3F;
}

.pd-construction {
  text-align: center;
  color: #666;
  margin-top: 20px;
  font-size: 14px;
}

/* ═══════════════════════════════════════
   RESUME BOOK SLIDE-IN
   ═══════════════════════════════════════ */
#resume-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  transition: background 0.5s ease;
}

#resume-overlay.visible {
  background: rgba(0, 0, 0, 0.8);
}

.resume-book {
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 70vw;
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  cursor: pointer;
}

.resume-book:focus-visible {
  outline: 3px solid #c6c6c6;
  outline-offset: 4px;
}

#resume-overlay.visible .resume-book {
  transform: translateY(clamp(20px, 3.5vh, 48px));
}

.resume-book-composite {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  filter: drop-shadow(0 -4px 30px rgba(0, 0, 0, 0.6));
}

.resume-book-art {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  pointer-events: none;
}

/* Resume preview image on the book texture (tweak % if book art changes) */
.resume-document {
  position: absolute;
  z-index: 1;
  left: 156px;
  top: 114px;
  width: 62%;
  height: 600px;
  display: grid;
  flex-wrap: wrap;
  transform: rotate(360deg);
  background: #fff;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.resume-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  pointer-events: none;
  image-rendering: auto;
}

/* Floating item that follows cursor */
.ct-floater {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: none;
  transform: translate(-50%, -50%);
}

.ct-floater .ct-ingredient {
  width: 64px;
  height: 64px;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}

/* ═══════════════════════════════════════
   SECRET VIDEO BACKGROUND
   ═══════════════════════════════════════ */
#secret-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none;
}

html[data-scene='secret'] #secret-video {
  display: block;
}

html[data-scene='secret'] #panorama-container {
  display: none;
}

/* ═══════════════════════════════════════
   GLITCH OVERLAY
   ═══════════════════════════════════════ */
#glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

#glitch-overlay .glitch-text {
  font-family: 'Didot', 'Bodoni MT', 'Noto Serif Display', 'GFS Didot', Georgia, serif;
  font-size: clamp(24px, 6vw, 64px);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
  text-transform: lowercase;
  letter-spacing: 0.12em;
}

#glitch-overlay .glitch-text::before,
#glitch-overlay .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

#glitch-overlay .glitch-text::before {
  animation: glitch-shift-r 0.04s steps(1) infinite;
  clip-path: inset(0 0 50% 0);
}

#glitch-overlay .glitch-text::after {
  animation: glitch-shift-l 0.05s steps(1) infinite;
  clip-path: inset(50% 0 0 0);
}

#glitch-overlay .glitch-rects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

#glitch-overlay .glitch-bars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: glitch-screen 0.08s steps(1) infinite;
}

@keyframes glitch-screen {
  0%   { background: #fff; transform: translate(0, 0) scaleX(1); }
  4%   { background: #000; transform: translate(-20px, 5px) scaleX(1.02); }
  8%   { background: #fff; transform: translate(15px, -8px) scaleX(0.98); }
  12%  { background: #000; transform: translate(-8px, 0) scaleX(1); }
  15%  { background: #fff; transform: translate(25px, 10px) scaleX(1.04); }
  18%  { background: #000; transform: translate(0, -15px) scaleX(1); }
  22%  { background: #fff; transform: translate(-30px, 0) scaleX(0.96); }
  25%  { background: #000; transform: translate(10px, 8px) scaleX(1); }
  30%  { background: #fff; transform: translate(0, 0) scaleX(1.05); }
  32%  { background: #000; transform: translate(-15px, -10px) scaleX(1); }
  38%  { background: #000; transform: translate(20px, 0) scaleX(0.97); }
  40%  { background: #fff; transform: translate(0, 12px) scaleX(1); }
  42%  { background: #000; transform: translate(-25px, -5px) scaleX(1.03); }
  48%  { background: #fff; transform: translate(0, 0) scaleX(1); }
  50%  { background: #000; transform: translate(18px, -12px) scaleX(0.95); }
  55%  { background: #fff; transform: translate(-10px, 8px) scaleX(1); }
  58%  { background: #000; transform: translate(0, 0) scaleX(1.06); }
  62%  { background: #fff; transform: translate(30px, 0) scaleX(1); }
  65%  { background: #000; transform: translate(-20px, 15px) scaleX(0.94); }
  70%  { background: #fff; transform: translate(0, -10px) scaleX(1); }
  72%  { background: #000; transform: translate(12px, 0) scaleX(1.02); }
  78%  { background: #fff; transform: translate(-18px, 6px) scaleX(1); }
  80%  { background: #000; transform: translate(0, 0) scaleX(0.98); }
  85%  { background: #fff; transform: translate(22px, -8px) scaleX(1); }
  88%  { background: #000; transform: translate(-12px, 10px) scaleX(1.04); }
  92%  { background: #fff; transform: translate(0, 0) scaleX(1); }
  95%  { background: #000; transform: translate(15px, -5px) scaleX(0.96); }
  100% { background: #000; transform: translate(0, 0) scaleX(1); }
}

@keyframes glitch-shift-r {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(12px, -4px); }
  20%  { transform: translate(-18px, 6px); }
  30%  { transform: translate(8px, 0); }
  40%  { transform: translate(-14px, -8px); }
  50%  { transform: translate(20px, 3px); }
  60%  { transform: translate(-6px, -5px); }
  70%  { transform: translate(16px, 7px); }
  80%  { transform: translate(-10px, 0); }
  90%  { transform: translate(14px, -6px); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-shift-l {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-14px, 3px); }
  20%  { transform: translate(10px, -7px); }
  30%  { transform: translate(-20px, 0); }
  40%  { transform: translate(16px, 5px); }
  50%  { transform: translate(-8px, -4px); }
  60%  { transform: translate(18px, 8px); }
  70%  { transform: translate(-12px, -2px); }
  80%  { transform: translate(6px, 6px); }
  90%  { transform: translate(-16px, -3px); }
  100% { transform: translate(0, 0); }
}

.pd-construction {
  cursor: pointer;
}

.pd-construction:hover {
  color: #444;
}

.pd-photosensitive {
  text-align: center;
  color: #999;
  font-size: 10px;
  margin-top: 14px;
  font-family: 'Minecraftia', monospace;
}