/* pkstuff.de — BrowserQuest skin */
:root {
  --pk-bg: #06080c;
  --pk-panel: #0b1018;
  --pk-ink: #c8d6e5;
  --pk-muted: #6b7c90;
  --pk-line: rgba(120, 170, 220, 0.18);
  --pk-cyan: #3ecfff;
  --pk-amber: #ffb347;
  --pk-ok: #5dffb0;
  --pk-font: "JetBrains Mono", ui-monospace, monospace;
  --pk-display: "Share Tech Mono", "JetBrains Mono", monospace;
}

#moztab { display: none !important; }

#pk-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background: rgba(6, 8, 12, 0.92);
  border-bottom: 1px solid var(--pk-line);
  backdrop-filter: blur(10px);
  font-family: var(--pk-font);
  font-size: 0.78rem;
  color: var(--pk-ink);
}
#pk-bar a { color: var(--pk-muted); text-decoration: none; }
#pk-bar a:hover { color: var(--pk-cyan); }
#pk-bar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--pk-display);
  color: var(--pk-cyan);
  text-decoration: none;
}
#pk-bar .brand img { width: 22px; height: 22px; object-fit: contain; }
#pk-bar .brand .prompt { color: var(--pk-ok); }
#pk-bar .brand .host { color: var(--pk-amber); }
#pk-bar .path { color: var(--pk-muted); }
#pk-bar .path b { color: var(--pk-cyan); font-weight: 400; }
#pk-bar .links { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* Kill original wood / size media rules for intro */
body.intro,
body.intro.upscaled,
body.upscaled.intro {
  background: #06080c !important;
  background-image:
    radial-gradient(ellipse at 50% 18%, rgba(62, 207, 255, 0.1), transparent 50%),
    radial-gradient(ellipse at 85% 85%, rgba(255, 179, 71, 0.06), transparent 40%),
    linear-gradient(180deg, #0a0e14, #06080c 45%, #04060a) !important;
  font-family: var(--pk-font) !important;
  color: var(--pk-ink);
  padding-top: 52px;
  min-height: 100dvh;
}
body.intro::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
  opacity: 0.4;
}

#intro {
  position: relative;
  z-index: 3;
  min-height: calc(100dvh - 52px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem 4.5rem;
  box-sizing: border-box;
}

/* Text logo — ignore sprite sizing */
body.intro #logo,
body.intro.upscaled #logo,
body.upscaled.intro #logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 0 1.25rem !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  text-align: center;
  z-index: 4;
  transform: none !important;
}
body.intro #logo::before {
  content: "pkstuff.de";
  display: block;
  font-family: var(--pk-display);
  font-size: clamp(2rem, 7vw, 3.2rem);
  color: var(--pk-cyan);
  letter-spacing: 0.04em;
  text-shadow: 0 0 28px rgba(62, 207, 255, 0.4);
  line-height: 1.1;
}
body.intro #logo::after {
  content: "./pvp.quest";
  display: block;
  margin-top: 0.4rem;
  font-family: var(--pk-font);
  font-size: clamp(0.9rem, 2.4vw, 1.05rem);
  color: var(--pk-amber);
}
#logosparks { display: none !important; }

/* Compact terminal panel — override ALL parchment media sizes */
body.intro #parchment,
body.intro.upscaled #parchment,
body.upscaled.intro #parchment {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  width: min(720px, calc(100vw - 1.25rem)) !important;
  max-width: 720px !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 1.05rem !important;
  text-align: center;
  z-index: 5;
  background: rgba(11, 16, 24, 0.95) !important;
  background-image: none !important;
  border: 1px solid var(--pk-line) !important;
  box-shadow: 0 0 0 1px rgba(62, 207, 255, 0.1), 0 20px 48px rgba(0, 0, 0, 0.55);
  border-radius: 2px;
  color: var(--pk-ink) !important;
  font-family: var(--pk-font) !important;
  overflow: hidden;
  align-self: center;
  flex: 0 0 auto;
}

body.intro .parchment-left,
body.intro .parchment-right {
  display: none !important;
}
body.intro .parchment-middle,
body.intro.upscaled .parchment-middle {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: none !important;
  background-image: none !important;
  padding: clamp(1.1rem, 3.5vw, 1.85rem) clamp(1rem, 4vw, 1.75rem) clamp(1.2rem, 3.5vw, 1.9rem);
  box-sizing: border-box;
}

body.intro #loadcharacter,
body.intro #createcharacter,
body.intro #confirmation,
body.intro #credits,
body.intro #about,
body.intro #death,
body.intro #error,
body.intro #legal,
body.intro.upscaled #loadcharacter,
body.intro.upscaled #createcharacter {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  font-size: inherit !important;
}

body.intro #parchment h1,
body.intro #loadcharacter h1,
body.intro #createcharacter h1,
body.intro #confirmation h1,
body.intro #credits h1,
body.intro #about h1,
body.intro #error h1,
body.intro #legal h1 {
  font-family: var(--pk-display) !important;
  color: var(--pk-cyan) !important;
  font-size: 1.2rem !important;
  margin: 0 0 1rem !important;
  text-shadow: none !important;
  line-height: 1.3 !important;
}
body.intro .left-ornament,
body.intro .right-ornament { display: none !important; }

body.intro #parchment input,
body.intro #parchment input.stroke {
  font-family: var(--pk-font) !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
  background: rgba(6, 8, 12, 0.9) !important;
  border: 1px solid var(--pk-line) !important;
  border-bottom: 1px solid var(--pk-line) !important;
  border-radius: 2px !important;
  color: var(--pk-ink) !important;
  text-shadow: none !important;
  animation: none !important;
  -moz-animation: none !important;
  -webkit-animation: none !important;
  width: 100% !important;
  max-width: 280px;
  height: auto !important;
  margin: 0.4rem auto !important;
  padding: 0.6rem 0.75rem !important;
  display: block;
  box-sizing: border-box;
}
body.intro #parchment input:focus {
  border-color: rgba(62, 207, 255, 0.55) !important;
  outline: none;
  color: #fff !important;
}
body.intro #parchment input::placeholder { color: var(--pk-muted) !important; }

body.intro .play,
body.intro #create-new,
body.intro #continue,
body.intro #cancel {
  font-family: var(--pk-font) !important;
  margin: 0.85rem auto 0 !important;
  width: auto !important;
  height: auto !important;
}
body.intro .play div,
body.intro .button {
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
body.intro .play .link,
body.intro #create-new .link,
body.intro #continue .link,
body.intro #cancel .link {
  display: inline-block;
  min-width: 10rem;
  padding: 0.55rem 1.1rem;
  background: var(--pk-cyan);
  color: #061018 !important;
  border: 1px solid rgba(62, 207, 255, 0.5);
  font-weight: 700;
  font-size: 0.82rem !important;
  text-shadow: none !important;
  cursor: pointer;
  box-sizing: border-box;
}
body.intro .play .link:hover,
body.intro #continue .link:hover { filter: brightness(1.07); }
body.intro #create-new .link,
body.intro #cancel .link {
  background: transparent;
  color: var(--pk-amber) !important;
  border-color: rgba(255, 179, 71, 0.45);
}
body.intro .play img { display: none !important; }
body.intro .validation-summary {
  color: #ff8a9a;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

body.intro footer {
  position: fixed !important;
  left: 0; right: 0;
  bottom: 0.6rem !important;
  top: auto !important;
  font-family: var(--pk-font) !important;
  color: var(--pk-muted) !important;
  z-index: 6;
  height: auto !important;
  width: 100% !important;
}
body.intro footer a,
body.intro #privacy-link span,
body.intro #credits-link span,
body.intro #legal-link a { color: var(--pk-muted) !important; }
body.intro footer a:hover,
body.intro #privacy-link span:hover,
body.intro #credits-link span:hover { color: var(--pk-cyan) !important; }
#sharing { display: none !important; }

body.intro #about p,
body.intro #credits,
body.intro #legal p,
body.intro #error p {
  color: var(--pk-ink) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}
body.intro #about a,
body.intro #credits a,
body.intro #legal a { color: var(--pk-cyan) !important; }
body.intro #authors .avatar { display: none !important; }

body.game { background: #000 !important; padding-top: 0; }
body.game #pk-bar { opacity: 0.65; padding: 0.3rem 0.7rem; font-size: 0.68rem; }
body.game #pk-bar:hover { opacity: 1; }

/* Embed: fill iframe; zoom handled in discord-bridge.js */
html.pk-embed body.game {
  background: #000 !important;
  overflow: hidden !important;
}
html.pk-embed body.game footer,
html.pk-embed body.game #pk-bar { display: none !important; }
html.pk-embed body.game #container {
  overflow: hidden !important;
}
html.pk-embed body.game #canvasborder {
  position: relative !important;
  background: none !important;
  padding: 0 !important;
}
html.pk-embed body.game #canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}
/* Canvas is absolute in embed — restore bubble overlay (negative-top trick breaks). */
html.pk-embed body.game #bubbles {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  z-index: 12 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
html.pk-embed body.game #inspector,
html.pk-embed body.game #textWindow,
html.pk-embed body.game #dropDialog {
  z-index: 14 !important;
}
html.pk-embed body.game #bar-container {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  z-index: 20 !important;
}

#portrait p {
  font-family: var(--pk-font);
  color: var(--pk-amber);
}

body.pk-embed #pk-bar,
html.pk-embed #pk-bar { display: none !important; }
html.pk-embed body.intro {
  padding-top: 0 !important;
  min-height: 100% !important;
  min-height: 100dvh !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html.pk-embed,
html.pk-embed body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
html.pk-embed #intro {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 100% !important;
  min-height: 100dvh !important;
  height: 100% !important;
  margin: 0 !important;
  padding: max(0.75rem, env(safe-area-inset-top, 0px))
           max(0.75rem, env(safe-area-inset-right, 0px))
           max(0.75rem, env(safe-area-inset-bottom, 0px))
           max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* Gate used display:flex !important — collapse it in-game so it can't steal clicks.
   Keep #intro alive for death/credits (parchment lives inside it). */
html.pk-embed body.game #intro {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html.pk-embed body.game.death #intro,
html.pk-embed body.game.credits #intro,
html.pk-embed body.game.about #intro,
html.pk-embed body.game.error #intro,
html.pk-embed body.game.legal #intro {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 250 !important;
}
html.pk-embed body.game #parchment {
  pointer-events: none !important;
}
html.pk-embed body.game.death #parchment,
html.pk-embed body.game.credits #parchment,
html.pk-embed body.game.about #parchment,
html.pk-embed body.game.error #parchment,
html.pk-embed body.game.legal #parchment {
  display: block !important;
  pointer-events: auto !important;
}
html.pk-embed body.intro footer { display: none !important; }
html.pk-embed body.intro #logo { display: none !important; }

/* Ingame Discord gate: larger + perfectly centered on every display */
html.pk-embed body.intro #parchment,
html.pk-discord-only body.intro #parchment,
html.pk-embed.pk-discord-only body.intro #parchment {
  width: min(780px, calc(100% - 1rem)) !important;
  max-width: min(780px, calc(100% - 1rem)) !important;
  margin: 0 auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  align-self: center !important;
}
@media (max-width: 480px) {
  html.pk-embed body.intro #parchment,
  html.pk-discord-only body.intro #parchment {
    width: calc(100% - 0.75rem) !important;
    max-width: calc(100% - 0.75rem) !important;
  }
  .discord-gate-logo-wrap,
  .discord-gate-logo {
    width: 112px;
    height: 112px;
  }
  .discord-gate-title {
    font-size: 1.45rem !important;
  }
  .discord-gate-btn {
    min-width: 0;
    width: 100%;
    max-width: 20rem;
    min-height: 3rem;
    font-size: 0.95rem;
  }
}
@media (min-width: 700px) {
  html.pk-embed body.intro #parchment,
  html.pk-discord-only body.intro #parchment {
    width: min(820px, 88%) !important;
    max-width: 820px !important;
  }
  .discord-gate {
    gap: 1.15rem;
    padding: 1.75rem 1.5rem 1.85rem;
  }
  .discord-gate-logo-wrap,
  .discord-gate-logo {
    width: 168px;
    height: 168px;
  }
  .discord-gate-title {
    font-size: 2rem !important;
  }
  .discord-gate-lead {
    font-size: 1.05rem;
    max-width: 26rem;
  }
  .discord-gate-btn {
    min-height: 3.25rem;
    min-width: 18rem;
    font-size: 1.05rem;
    padding: 0.7rem 1.4rem;
  }
}
@media (min-width: 1100px) {
  html.pk-embed body.intro #parchment,
  html.pk-discord-only body.intro #parchment {
    width: min(900px, 70%) !important;
    max-width: 900px !important;
  }
  .discord-gate-logo-wrap,
  .discord-gate-logo {
    width: 190px;
    height: 190px;
  }
}

/* Discord-only login: hide classic name/password UI hard */
html.pk-discord-only #loadcharacter,
html.pk-discord-only #createcharacter,
html.pk-discord-only #parchment.loadcharacter #loadcharacter,
html.pk-discord-only #parchment.createcharacter #createcharacter {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

html.pk-discord-only body.intro #parchment {
  border-radius: 0 !important;
  border: 2px solid rgba(62, 207, 255, 0.55) !important;
  background:
    linear-gradient(180deg, rgba(12, 28, 48, 0.98), rgba(6, 12, 22, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(6, 8, 12, 0.9),
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(62, 207, 255, 0.06) !important;
  clip-path: polygon(
    0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)
  );
}

.discord-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2.2vw, 1rem);
  padding: clamp(0.85rem, 2.5vw, 1.35rem) clamp(0.65rem, 2vw, 1rem);
  text-align: center;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}
.discord-gate-logo-wrap {
  position: relative;
  width: clamp(100px, 22vw, 128px);
  height: clamp(100px, 22vw, 128px);
  margin-bottom: 0.15rem;
}
.discord-gate-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  animation: pk-logo-float 3.6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(62, 207, 255, 0.35));
}
.discord-gate-glow {
  position: absolute;
  inset: 18% 12%;
  border-radius: 0;
  background: radial-gradient(ellipse at center, rgba(62, 207, 255, 0.35), transparent 70%);
  animation: pk-logo-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes pk-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pk-logo-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .discord-gate-logo,
  .discord-gate-glow { animation: none; }
}

.discord-gate-title {
  font-family: var(--pk-display) !important;
  color: var(--pk-cyan) !important;
  font-size: 1.35rem !important;
  margin: 0 !important;
  text-shadow: none !important;
  letter-spacing: 0.04em;
}
.discord-gate-lead {
  margin: 0;
  color: var(--pk-muted);
  font-family: var(--pk-font);
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 16rem;
}
.discord-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.65rem;
  min-width: 13rem;
  padding: 0.55rem 1.15rem;
  border: 2px solid #3a45b5;
  border-radius: 0;
  background: #5865F2;
  color: #fff !important;
  font-family: var(--pk-font);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  text-shadow: none;
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
}
.discord-gate-btn:hover { filter: brightness(1.08); }
.discord-gate-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.discord-gate-btn::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.292a.074.074 0 0 1 .078-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .079.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.292a.074.074 0 0 1 .078-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .079.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.discord-gate-status {
  margin: 0;
  color: var(--pk-cyan);
  font-family: var(--pk-font);
  font-size: 0.75rem;
}
.discord-gate.is-busy .discord-gate-btn { opacity: 0.75; }
html.pk-discord-only body.started #discord-gate,
html.pk-discord-only body.game #discord-gate {
  display: none !important;
}