/* Shared by public pages and browser/native entry. */
/* Two viewport-height tiles wrap the sweep without a gap or a second timer. */
.crt-sweep {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.crt-sweep::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 200%;
  background: linear-gradient(to bottom, transparent, rgb(143 209 158 / 0.035) 8%, transparent 16%) 0 0 / 100% 50% repeat-y;
  animation: crt-sweep 13s linear infinite;
}
@keyframes crt-sweep {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@font-face {
  font-family: "Archivo Black";
  src: url("./assets/archivo-black-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/ibm-plex-sans-regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Font Awesome Brands";
  src: url("./assets/fa-brands-subset.ttf") format("truetype");
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

/* One community action shared by the homepage, browser and native entry. */
.discord-button {
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 142px;
  height: 44px;
  padding: 0 12px;
  border: 0 solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #a9b8b4;
  font: 400 14px/20px "IBM Plex Sans", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.discord-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 16px;
  flex-shrink: 0;
  font: 400 20px/16px "Font Awesome Brands";
}
@media (max-width: 700px) {
  .discord-button { width: 44px; padding: 0; border: 1px solid #567265; border-radius: 50%; background: #09100f; }
  .discord-label { display: none; }
}
/* Pointer feedback recolours the label and logo; the surface never fills. */
@media (hover: hover) {
  .discord-button:hover { color: #5865f2; }
}
.discord-button:active { color: #4752c4; transition-duration: 120ms; }

:root {
  color: #edf4f1;
  background: #000605;
  font-family: "IBM Plex Sans", sans-serif;
  font-synthesis: none;
  --background: #000605;
  --surface: #09100f;
  --border: #293b37;
  --green: #10b981;
  --green-pale: #8fd19e;
  --text: #edf4f1;
  --muted: #a9b8b4;
  --quiet: #76847f;
  --hostile: #c74540;
}


.cta-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.play-button {
  border: 1px solid rgb(18 201 130 / 0.76);
  background: rgb(7 37 27 / 0.88);
  color: #c7f5d7;
}

.play-button:hover {
  border-color: var(--green);
  background: rgb(12 59 43 / 0.94);
}

/* Paper's emerald entry theme. Landing styles above remain independent. */
@font-face { font-family: Manrope; src: url("./assets/manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("./assets/ibm-plex-mono-regular.ttf") format("truetype"); font-display: swap; }
/* One logo and wordmark treatment for entry and public document headers. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px; position: relative; padding: 0; color: #10b981; font: 800 15px/22px Manrope, sans-serif; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.brand img { width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0; }
.brand-name { margin: 0; font: inherit; }
.command-theme {
  --background: #061611; --surface: #09100F; --border: #4e6d5d;
  --entry-material: url("./artwork/emerald-grain.svg") left top / 390px 512px repeat,
    radial-gradient(ellipse at 88% 8%, rgb(20 43 28 / .3), rgb(2 7 5 / .45) 110%) #07110c;
  --input-surface: #081c13; --input-border: #61836e;
  --green: #54d7a0; --green-pale: #10b981; --text: #f3f5ef;
  --muted: #b9cdbf; --quiet: #9ebca9; --error-text: #edaaa0;
  --action-top: #54d7a0; --action-bottom: #54d7a0;
  --action-text: #09271e; --action-border: #54d7a0;
  color: var(--text); background-color: var(--background);
  font-family: Manrope, sans-serif; font-weight: 400; line-height: 1.5; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* One map source, with the landing page's colour treatment behind all UI. */
/* Single-class selectors: the wide browser entry links the public landing
   sheet after this one, and its equal-specificity rules then take over. */
.entry-backdrop { position: relative; isolation: isolate; background: #000605; }
.entry-backdrop::before, .entry-backdrop::after {
  content: ''; position: fixed; pointer-events: none; z-index: -1; inset: 0;
}
.entry-backdrop::before {
  background: url("./artwork/earth-map.webp") 46% 18% / auto 120lvh no-repeat;
  opacity: .66; filter: brightness(.62) contrast(1.18) saturate(.72) sepia(.08);
}
.entry-backdrop::after {
  background:
    repeating-linear-gradient(0deg, rgb(87 189 122 / .055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgb(87 189 122 / .018) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgb(0 6 5 / .84) 0%, rgb(0 6 5 / .54) 48%, rgb(0 6 5 / .18) 82%),
    radial-gradient(ellipse at center, transparent 30%, rgb(0 0 0 / .82) 100%);
}

.command-theme button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.command-theme .cta-button { min-height: 54px; padding: 0 20px; border: 1px solid var(--border); border-radius: 12px; font: 600 16px/24px Manrope,sans-serif; letter-spacing: 0; text-transform: none; color: var(--text); background: transparent; box-shadow: none; }
.command-theme .play-button { min-height: 56px; border: 0; color: var(--action-text); background: var(--green); font-weight: 800; font-size: 17px; }
.command-theme button:disabled { cursor: default; }
.command-theme .play-button:disabled { background: #254d3d; color: #bfd0c5; }
.command-theme button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (hover:hover) { .command-theme .cta-button:hover:not(:disabled) { background: #20382b; } .command-theme .play-button:hover:not(:disabled) { background: #78e2b7; } }
.command-theme .cta-button:active:not(:disabled) { background: #294c39; }
.command-theme .play-button:active:not(:disabled) { background: #35bb85; }
/* Ionic owns the overlay and motion; these rules supply Paper's surface. */
ion-modal.entry-sheet { background: transparent; --width: 390px; --height: auto; --max-width: calc(100% - 48px); --max-height: calc(100dvh - 48px); --border-radius: 20px; --border-width: 0; --box-shadow: none; --background: var(--surface); --backdrop-opacity: 0; color: var(--text); }
ion-modal.entry-sheet:not(.modal-sheet)::part(backdrop) { opacity: 0; }
ion-modal.entry-sheet:not(.show-modal) { visibility: hidden; pointer-events: none; }
ion-modal.entry-sheet::part(content) { border-radius: var(--border-radius); position: absolute; right: calc(50% - var(--width) / 2); bottom: auto; top: 50%; translate: 0 -50%; }
.entry-sheet .ion-page { position: relative; display: flex; flex-direction: column; height: 100%; }
.entry-sheet ion-content { height: 100%; --color: var(--text); --background: transparent; }
.entry-sheet ion-content::part(scroll) { overscroll-behavior: contain; }
.entry-sheet__body { box-sizing: border-box; padding: 40px 24px; }
ion-modal.entry-sheet::part(handle) { display: none; }
.entry-sheet__heading { position: relative; min-height: 34px; padding-right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.entry-sheet h2, .gf-auth[data-entry-static] h2, #worlds-title { margin: 0; font: 800 28px/34px Manrope,sans-serif; letter-spacing: -.035em; }
.entry-sheet__close { position: absolute; right: -12px; top: -5px; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 24px!important; }
.entry-sheet__close:active { background: #274938; }
@media(max-width: 700px) {
  /* Cover the screen; retain its full height while the keyboard is open. */
  .entry-backdrop::before { background-position: 23% 0; background-size: cover; min-height: 100lvh; }
  /* First-listed scanline layers paint above the fade and remain undimmed. */
  .entry-backdrop::after {
    background:
      repeating-linear-gradient(0deg, rgb(87 189 122 / .0825) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(90deg, rgb(87 189 122 / .027) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, rgb(0 6 5 / .4) 0%, rgb(0 6 5 / .76) 57%, #000605 80%),
      radial-gradient(ellipse at center, transparent 20%, rgb(0 0 0 / .78) 100%);
  }
  ion-modal.entry-sheet { background: transparent; --width: 100%; --max-width: 100%; --max-height: calc(var(--entry-viewport, 100dvh) - max(12px, env(safe-area-inset-top))); --border-radius: 26px 26px 0 0; --backdrop-opacity: .56; bottom: var(--entry-keyboard, 0px); }
  ion-modal.entry-sheet::part(content) { border-radius: var(--border-radius); position: absolute; right: auto; bottom: 0; top: auto; translate: none; }
  .entry-sheet ion-content::part(scroll) { max-height: calc(var(--entry-viewport, 100dvh) - max(12px, env(safe-area-inset-top))); }
  .entry-sheet__body { padding: 36px 24px max(24px, env(safe-area-inset-bottom)); }
  ion-modal.entry-sheet::part(handle) { display: block; top: 12px; width: 36px; height: 4px; border-radius: 4px; background: #698577; touch-action: none; }
}

.entry-sheet h2:focus { outline: none; }

/* The visible glyph is 20px, with a 44px pointer target around it. */
.entry-sheet__close::before, .entry-sheet__close::after { content: ''; position: absolute; left: 13px; top: 21px; width: 18px; height: 1.5px; background: #b9c6ca; transform: rotate(45deg); }
.entry-sheet__close::after { transform: rotate(-45deg); }
.entry-sheet__done { padding: 0; border: 0; background: transparent; color: #bdd1c3; font-size: 15px!important; font-weight: 600!important; line-height: 22px; }
.entry-sheet__heading:has(.entry-sheet__done) { padding-right: 0; }

@media(min-width:1000px) { ion-modal.entry-view--gf-auth[data-view-browser-entry]::part(content) { right: max(24px, calc((100vw - 1180px) / 2)); } }
@media(min-width:701px) {
  /* Desktop panels do not own the surrounding landing page's hit area. */
  ion-modal.entry-sheet { pointer-events: none; }
  ion-modal.entry-sheet::part(content) { pointer-events: auto; }
  ion-modal.entry-sheet::part(backdrop) { pointer-events: none; }
  /* Intrinsic content can exceed the animated height for a few frames. Hide
     scrollbar chrome consistently, while retaining wheel/trackpad scrolling. */
  .world-hero, .world-list, .entry-sheet ion-content::part(scroll) { scrollbar-width: none; }
  .world-hero::-webkit-scrollbar, .world-list::-webkit-scrollbar,
  .entry-sheet ion-content::part(scroll)::-webkit-scrollbar { display: none; }
}
@media(hover:hover) { .entry-sheet__close:hover { background: #1b3227; } .entry-sheet__done:hover { color: #f3f5ef; } }

/* All entry controls share timing, without changing their hit-area geometry. */
.command-theme :is(button, .account-icon, input, .picker-checkbox) {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.command-theme button:active:not(:disabled) { transition-duration: 120ms; }
/* Text actions stay unboxed; feedback never changes their layout. */
.command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete) { min-height: 44px; }
.command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete, .entry-sheet__done) {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
/* Extend compact labels to a 44px tap target without adding visible spacing. */
.command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete, .entry-sheet__done)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete, .entry-sheet__done):hover:not(:disabled) { text-decoration-line: underline; }
}
.command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete, .entry-sheet__done):focus-visible:not(:disabled) { text-decoration-line: underline; outline: none; }
.command-theme :is(.quiet-button, .gf-auth__secondary-action, .account-delete, .entry-sheet__done):active:not(:disabled) { text-decoration-line: underline; text-decoration-thickness: 2px; }
ion-modal.entry-sheet::part(content) { transition: height 320ms cubic-bezier(.2,.7,.2,1); }

/* Desktop has one permanent painted surface; individual panels carry content.
   Mobile retains the material on Ionic's native-feeling sheet wrapper. */
.entry-card-surface { display: none; }
/* Auth is a page on mobile too, so a viewport change must not reinstate the
   offscreen resting transform used by draggable sheets. */
ion-modal.entry-sheet.entry-view--gf-auth--page::part(content) { transform: none; }
@media(min-width:701px) {
  .entry-card-surface {
    display: block;
    position: fixed;
    top: 50%;
    translate: -50% -50%;
    pointer-events: none;
    z-index: 3;
    transition: left 320ms cubic-bezier(.2,.7,.2,1), top 320ms cubic-bezier(.2,.7,.2,1), width 320ms cubic-bezier(.2,.7,.2,1);
  }
  .entry-card-surface, .gf-auth[data-entry-static] .gf-panel {
    background: var(--entry-material);
    border-radius: 0;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    border: 0 solid transparent;
    border-image: url("./artwork/emerald-frame.svg") 8 / 8px / 0 stretch;
  }
  .world-hero, ion-modal.entry-sheet::part(content) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .world-hero { z-index: 4; }
  .entry-card-surface[data-compact-auth] { translate: none; transition: height 320ms cubic-bezier(.2,.7,.2,1); }
  /* Desktop content never uses Ionic's offscreen sheet transform. */
  ion-modal.entry-sheet::part(content) { transform: none; }
}
@media(max-width:700px) {
  ion-modal.entry-sheet:not(.entry-view--gf-auth--page)::part(content),
  .entry-root:is([data-view=worlds], [data-view=restricted]) .world-hero {
    background: var(--entry-material);
    border: 0 solid transparent;
    border-image: url("./artwork/emerald-sheet-edge.svg") 26 26 0 / 26px 26px 0 / 0 stretch;
  }
}
.command-theme .world-row[aria-selected=true]:hover:not(:disabled) { background: #265f49; }
.command-theme .world-row[aria-selected=true]:active:not(:disabled) { background: #337d5e; }

/* Pressed feedback wins over hover, including on pointers that support both. */
.command-theme .entry-sheet__close:active { background: #274938; }
.command-theme .entry-sheet__done:active { color: var(--green); }
.command-theme .world-row:active:not(:disabled) { background: #245f47; }

/* A modal-to-modal handoff has no intermediate world view. */

.entry-stack { position: relative; width: 100%; }
.entry-stack > [hidden] { display: none; }
.entry-stack > section { box-sizing: border-box; width: 100%; --width: 390px; }
.entry-stack > [data-compact-entry] { --width: 100%; }