/* ========================================
   WORLD003
   W.I.P. SURVIVAL TRIALS
   ======================================== */


/* ---------- File Code ---------- */

.world003-file-code {
  margin:
    0 0 12px;

  color:
    var(--accent-red);

  font-size:
    0.68rem;

  letter-spacing:
    0.22em;
}


/* ---------- Hero Title ---------- */

.world003-hero h1 {
  max-width:
    900px;
}


.world003-subtitle {
  display:
    inline-block;

  margin-top:
    10px;

  font-size:
    0.58em;

  letter-spacing:
    -0.025em;
}


/* ---------- Restricted Access ---------- */

.world003-restricted {
  color:
    var(--accent-red);
}


/* ---------- Overview ---------- */

.world003-overview
.overview-copy p {
  max-width:
    780px;
}


/* ---------- Record Notice ---------- */

.world003-restriction-note {
  width:
    min(
      620px,
      calc(100% - 60px)
    );

  margin:
    48px 0 0 60px;

  padding:
    20px 22px;

  border:
    1px solid
    rgba(230, 0, 60, 0.26);

  border-left:
    3px solid
    var(--accent-red);

  background:
    rgba(230, 0, 60, 0.025);
}


.world003-restriction-note span {
  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--accent-red);

  font-size:
    0.58rem;

  letter-spacing:
    0.18em;
}


.world003-restriction-note p {
  margin: 0;

  color:
    var(--text-muted);

  font-size:
    0.63rem;

  line-height:
    1.8;

  letter-spacing:
    0.09em;
}


/* ---------- Mobile ---------- */

@media (max-width: 800px) {

  .world003-restriction-note {
    width:
      100%;

    margin-left:
      0;
  }

}

/* ========================================
   WORLD003
   01 // COMPLETION MATRIX
   ======================================== */

.world003-matrix-intro {
  margin-bottom: 36px;
}

.world003-matrix-title {
  margin: 0 0 6px;

  color: var(--text-light);

  font-size: 0.78rem;

  letter-spacing: 0.16em;
}

.world003-matrix-subtitle {
  margin: 0 0 14px;

  color: var(--accent-red);

  font-size: 0.62rem;

  letter-spacing: 0.18em;
}

.world003-matrix-note {
  margin: 0;

  color: var(--text-muted);

  font-size: 0.6rem;

  line-height: 1.8;

  letter-spacing: 0.12em;
}

.world003-matrix-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.world003-matrix-card {
  padding: 20px 18px 18px;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.02);
}

.world003-sign-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 14px;
}

.world003-sign-symbol {
  color: var(--text-light);

  font-size: 1.2rem;

  line-height: 1;
}

.world003-bar-track {
  height: 8px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.08);

  background: rgba(255,255,255,0.04);
}

.world003-bar-fill {
  width: var(--completion);

  height: 100%;

  background: linear-gradient(
    90deg,
    rgba(230, 0, 60, 0.58) 0%,
    rgba(230, 0, 60, 0.95) 100%
  );
}

@media (max-width: 900px) {
  .world003-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .world003-matrix-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   WORLD003
   02 // FRAGMENT RETRIEVAL
   ======================================== */


/* ---------- Main Console ---------- */

.fragment-console {
  margin-left: 60px;

  border:
    1px solid
    rgba(255,255,255,0.12);

  background:
    rgba(255,255,255,0.012);
}


/* ---------- Console Header ---------- */

.fragment-console-header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;

  padding:
    18px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.10);
}


.fragment-console-header > div {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.fragment-console-label {
  color:
    var(--text-dark);

  font-size:
    0.56rem;

  letter-spacing:
    0.15em;
}


.fragment-console-header strong {
  color:
    var(--text-muted);

  font-size:
    0.62rem;

  font-weight:
    normal;

  letter-spacing:
    0.1em;
}


.fragment-console-status {
  color:
    var(--accent-red);

  font-size:
    0.57rem;

  letter-spacing:
    0.14em;
}


/* ---------- Display Area ---------- */

.fragment-display {
  position: relative;

  min-height: 270px;

  padding:
    34px 30px;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      rgba(255,255,255,0.012),
      transparent
    );
}


/* ---------- Placeholder ---------- */

.fragment-placeholder {
  max-width: 630px;

  color:
    var(--text-muted);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    1rem;

  line-height:
    1.8;
}


.fragment-placeholder p {
  margin:
    0 0 10px;
}


/* ---------- Normal Fragment ---------- */

.fragment-output {
  width: 100%;
}


.fragment-output-meta {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  margin-bottom:
    30px;

  padding-bottom:
    13px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.08);

  color:
    var(--text-dark);

  font-size:
    0.55rem;

  letter-spacing:
    0.13em;
}


.fragment-output-meta span:first-child {
  color:
    var(--accent-red);
}


.fragment-dialogue {
  max-width:
    780px;
}


.fragment-dialogue p {
  margin:
    0 0 16px;

  color:
    var(--text-soft);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    1.02rem;

  line-height:
    1.75;
}


.fragment-dialogue p:last-child {
  margin-bottom:
    0;
}


/* ---------- Special Anomaly ---------- */

.fragment-anomaly {
  width: 100%;

  padding:
    8px 0;

  color:
    var(--accent-red);
}


.fragment-anomaly-code {
  margin:
    0 0 30px;

  color:
    var(--text-dark);

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.62rem;

  letter-spacing:
    0.14em;
}


.fragment-anomaly strong {
  display: block;

  margin-bottom:
    18px;

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.68rem;

  font-weight:
    normal;

  letter-spacing:
    0.18em;
}


.fragment-anomaly > p:last-child {
  margin: 0;

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    clamp(
      1rem,
      2.5vw,
      1.35rem
    );

  line-height:
    1.8;

  letter-spacing:
    0.07em;
}


/* subtle error state */

.fragment-console.is-anomaly {
  border-color:
    rgba(230,0,60,0.38);

  background:
    rgba(230,0,60,0.018);
}


/* ---------- Querying State ---------- */

.fragment-console.is-querying
.fragment-display {
  opacity:
    0.62;
}


.fragment-console.is-querying
.fragment-console-status {
  animation:
    fragment-status-blink
    0.7s steps(1, end)
    infinite;
}


@keyframes fragment-status-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.3;
  }

}


/* ---------- Button ---------- */

.fragment-actions {
  padding:
    18px 20px;

  border-top:
    1px solid
    rgba(255,255,255,0.10);
}


.fragment-extract {
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #d8d4ce;

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.65rem;

  letter-spacing:
    0.15em;

  cursor:
    pointer;
}


.fragment-extract::before {
  content:
    "[ ";

  color:
    var(--accent-red);
}


.fragment-extract::after {
  content:
    " ]";

  color:
    var(--accent-red);
}


.fragment-extract:hover {
  color:
    white;
}


.fragment-extract:disabled {
  color:
    #555;

  cursor:
    wait;
}


/* ---------- Reveal Animation ---------- */

.fragment-output:not([hidden]),
.fragment-anomaly:not([hidden]) {
  animation:
    fragment-reveal
    0.28s ease;
}


@keyframes fragment-reveal {

  from {
    opacity: 0;

    transform:
      translateY(5px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ---------- Mobile ---------- */

@media (max-width: 800px) {

  .fragment-console {
    margin-left:
      0;
  }

}


@media (max-width: 580px) {

  .fragment-console-header,
  .fragment-output-meta {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      9px;
  }


  .fragment-display {
    min-height:
      300px;

    padding:
      28px 20px;
  }

}

/* ========================================
   WORLD003
   03 // EXTERNAL TRACE
   ======================================== */


/* ---------- Trace Record ---------- */

.external-trace-record {
  margin-left:
    60px;

  border:
    1px solid
    rgba(255,255,255,0.11);

  background:
    rgba(255,255,255,0.014);
}


.external-trace-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    18px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.10);

  font-size:
    0.59rem;

  letter-spacing:
    0.14em;
}


.external-trace-header span {
  color:
    var(--accent-red);
}


.external-trace-header strong {
  color:
    var(--text-dark);

  font-weight:
    normal;
}


/* ---------- Data ---------- */

.external-trace-data {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  border-bottom:
    1px solid
    rgba(255,255,255,0.10);
}


.external-trace-data div {
  padding:
    18px;

  border-right:
    1px solid
    rgba(255,255,255,0.08);
}


.external-trace-data div:last-child {
  border-right:
    0;
}


.external-trace-data span {
  display: block;

  margin-bottom:
    8px;

  color:
    var(--text-dark);

  font-size:
    0.53rem;

  letter-spacing:
    0.13em;
}


.external-trace-data strong {
  color:
    var(--text-muted);

  font-size:
    0.63rem;

  font-weight:
    normal;

  letter-spacing:
    0.07em;
}


/* ---------- Message ---------- */

.external-trace-message {
  padding:
    30px 24px 8px;

  max-width:
    760px;
}


.external-trace-message p {
  margin:
    0 0 14px;

  color:
    var(--text-soft);

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    1rem;

  line-height:
    1.8;
}


.external-trace-message small {
  color:
    var(--text-dark);

  font-size:
    0.56rem;

  letter-spacing:
    0.13em;
}


/* ---------- Trace Button ---------- */

.external-trace-button {
  margin:
    24px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #d8d4ce;

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.66rem;

  letter-spacing:
    0.15em;

  cursor:
    pointer;
}


.external-trace-button::before {
  content:
    "[ ";

  color:
    var(--accent-red);
}


.external-trace-button::after {
  content:
    " ]";

  color:
    var(--accent-red);
}


.external-trace-button:hover {
  color:
    white;
}


/* ========================================
   EXTERNAL WARNING MODAL
   ======================================== */

.external-warning-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    28px;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


.external-warning-modal.is-open {
  visibility:
    visible;

  opacity:
    1;
}


.external-warning-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,0.9);

  backdrop-filter:
    blur(4px);
}


.external-warning-dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(620px, 100%);

  padding:
    30px;

  border:
    1px solid
    rgba(230,0,60,0.42);

  background:
    #0d0d0d;

  box-shadow:
    0 28px 90px
    rgba(0,0,0,0.7);
}


/* ---------- X ---------- */

.external-warning-x {
  position:
    absolute;

  top:
    13px;

  right:
    16px;

  border:
    0;

  background:
    transparent;

  color:
    var(--text-muted);

  font-family:
    Georgia,
    "Noto Serif TC",
    serif;

  font-size:
    1.7rem;

  cursor:
    pointer;
}


.external-warning-x:hover {
  color:
    var(--accent-red);
}


/* ---------- Heading ---------- */

.external-warning-code {
  margin:
    0 0 18px;

  color:
    var(--accent-red);

  font-size:
    0.57rem;

  letter-spacing:
    0.16em;
}


.external-warning-dialog h2 {
  margin:
    0 0 30px;

  font-family:
    Georgia,
    "Noto Serif TC",
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 5vw, 3rem);

  font-weight:
    normal;

  line-height:
    1;

  letter-spacing:
    -0.035em;
}


/* ---------- Body ---------- */

.external-warning-body > p {
  color:
    var(--text-muted);

  font-size:
    0.65rem;

  line-height:
    1.9;

  letter-spacing:
    0.08em;
}


.external-warning-status {
  display:
    grid;

  grid-template-columns:
    1fr auto;

  gap:
    10px 25px;

  margin:
    26px 0;

  padding:
    18px;

  border-top:
    1px solid
    rgba(255,255,255,0.08);

  border-bottom:
    1px solid
    rgba(255,255,255,0.08);

  font-size:
    0.58rem;

  letter-spacing:
    0.1em;
}


.external-warning-status span {
  color:
    var(--text-dark);
}


.external-warning-status strong {
  color:
    var(--accent-red);

  font-weight:
    normal;
}


.external-warning-question {
  margin-top:
    28px;

  color:
    var(--text-soft) !important;
}


/* ---------- Actions ---------- */

.external-warning-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    28px;

  margin-top:
    30px;
}


.external-warning-actions button {
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    #bbb;

  font-family:
    "Courier New",
    "Noto Serif TC",
    monospace;

  font-size:
    0.64rem;

  letter-spacing:
    0.14em;

  cursor:
    pointer;
}


.external-warning-actions button::before {
  content:
    "[ ";

  color:
    var(--accent-red);
}


.external-warning-actions button::after {
  content:
    " ]";

  color:
    var(--accent-red);
}


.external-warning-actions button:hover {
  color:
    white;
}


.external-warning-proceed {
  color:
    var(--accent-red) !important;
}


/* ---------- Mobile ---------- */

@media (max-width: 800px) {

  .external-trace-record {
    margin-left:
      0;
  }


  .external-trace-data {
    grid-template-columns:
      1fr 1fr;
  }


  .external-trace-data div:nth-child(2) {
    border-right:
      0;
  }

}


@media (max-width: 520px) {

  .external-trace-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .external-trace-data {
    grid-template-columns:
      1fr;
  }


  .external-trace-data div {
    border-right:
      0;

    border-bottom:
      1px solid
      rgba(255,255,255,0.08);
  }


  .external-warning-actions {
    justify-content:
      flex-start;
  }

}
/* V1.1 // Traditional Chinese typography */
html[lang="zh-TW"] .world003-page,
html[lang="zh-TW"] .world003-page button {
  font-family: "Noto Serif TC", serif;
}
html[lang="zh-TW"] .world003-page .fragment-dialogue,
html[lang="zh-TW"] .world003-page .world003-hero h1,
html[lang="zh-TW"] .world003-page .world-tagline {
  font-family: "Noto Serif TC", serif;
}
html[lang="zh-TW"] .world003-page .fragment-console,
html[lang="zh-TW"] .world003-page .fragment-console button,
html[lang="zh-TW"] .world003-page .external-trace-record,
html[lang="zh-TW"] .world003-page .external-trace-record button,
html[lang="zh-TW"] .world003-page .external-warning-dialog,
html[lang="zh-TW"] .world003-page .external-warning-dialog button {
  font-family: "Noto Sans TC", sans-serif;
}
html[lang="zh-TW"] .world003-page .fragment-dialogue {
  font-family: "Noto Serif TC", serif;
}