/* ===========================================================
   鳴湖歡樂世界 全球資訊網 — 樣式表
   製作:資訊室 2001/04  最後修改:2002/08/18
   ===========================================================
   實作備註(給後人看的,不是給玩家看的):
   這份 CSS 的工作是「假裝自己是 2002 年的手寫樣式表」。
   規則:不用 flex、不用 grid、不用 rem、不用 CSS 變數做版面。
   版面一律交給 <table>,CSS 只負責顏色、字體、邊框。
   遊樂園官網在那個年代是俗豔的 —— 紫底、桃紅、亮黃、閃字。
   越俗豔,後面壞掉時越毛。
   =========================================================== */

body {
  margin: 0px;
  padding: 0px;
  background-color: #2a0a4a;
  background-image: url("../assets/bg_tile.svg");
  background-repeat: repeat;
  color: #000000;
  font-family: "PMingLiU", "MingLiU", "新細明體", "Songti TC", "SimSun", serif;
  font-size: 12pt;
}

td, th, div, p, li {
  font-family: "PMingLiU", "MingLiU", "新細明體", "Songti TC", "SimSun", serif;
  font-size: 12pt;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #ff0000; }

/* --- 外框 --- */
.page {
  width: 780px;
  background: #ffffff;
  border: 2px solid #000000;
}

/* --- 頁首 --- */
.top {
  background: #6b1f9e;
  background-image: url("../assets/header_stars.svg");
  background-repeat: repeat-x;
  color: #ffe97f;
}

.park-name {
  font-size: 30pt;
  font-weight: bold;
  color: #ffe97f;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #3d0f5c;
}

.park-en {
  color: #ffffff;
  font-size: 11pt;
  font-weight: bold;
  letter-spacing: 1px;
}

.park-slogan {
  color: #ffb3e6;
  font-size: 10pt;
}

/* --- 頂端連結列 --- */
.top-link {
  background: #ff8a00;
  color: #ffffff;
  font-size: 10pt;
  padding: 3px;
}
.top-link a { color: #ffffff; text-decoration: none; font-weight: bold; }
.top-link a:visited { color: #ffffff; }
.top-link a:hover { color: #2a0a4a; text-decoration: underline; }

.banner-gif {
  background: #ffffff;
  text-align: center;
  padding: 3px;
}

/* --- 跑馬燈 --- */
.ticker-title {
  background: #d10087;
  color: #ffffff;
  font-size: 10pt;
  font-weight: bold;
}
.ticker {
  background: #ffff66;
  color: #cc0000;
  font-size: 10pt;
}

/* --- 左側選單 --- */
.left {
  background: #6b1f9e;
  color: #ffffff;
  padding: 4px;
}
.menu-head {
  background: #3d0f5c;
  color: #ffe97f;
  font-size: 11pt;
  font-weight: bold;
  text-align: center;
  padding: 3px;
}
.menu-cell {
  background: #f3e8ff;
  color: #000000;
  border-bottom: 1px solid #6b1f9e;
  font-size: 11pt;
}
.menu-cell a { color: #4b0082; text-decoration: none; }
.menu-cell a:visited { color: #4b0082; }
.menu-cell a:hover { color: #d10087; text-decoration: underline; }

/* --- 右欄 --- */
.right {
  background: #fff6d5;
  padding: 4px;
}

/* --- 內容區 --- */
.content {
  background: #ffffff;
  padding: 8px;
  vertical-align: top;
}
.box-title {
  background: #d10087;
  color: #ffffff;
  font-size: 12pt;
  font-weight: bold;
  padding: 3px 6px;
}
.box-title-sub {
  background: #ff8a00;
  color: #ffffff;
  font-weight: bold;
  padding: 2px 6px;
  font-size: 11pt;
}

/* --- 表格 --- */
.data-table { border-collapse: collapse; }
.data-table td, .data-table th {
  border: 1px solid #b48fd0;
  padding: 3px 5px;
  font-size: 10.5pt;
}
.data-table th {
  background: #6b1f9e;
  color: #ffffff;
  font-weight: bold;
}
.data-table tr.alt td { background: #f7f0ff; }

.news-table td {
  border-bottom: 1px dotted #b48fd0;
  padding: 4px;
}

/* --- 圖片 --- */
img { border: 0; }
img.photo {
  border: 3px double #6b1f9e;
  background: #e8e8e8;
  padding: 2px;
}
img.broken {
  border: 1px solid #808080;
  background: #ffffff;
}

/* --- 訪客計數器 --- */
.counter {
  background: #000000;
  border: 2px inset #cccccc;
  display: inline-table;
}
.counter td {
  background: #000000;
  color: #33ff33;
  font-family: "Courier New", monospace;
  font-size: 14pt;
  font-weight: bold;
  width: 14px;
  text-align: center;
  padding: 1px 2px;
}

/* --- 雜項文字 --- */
.small { font-size: 10pt; }
.tiny { font-size: 8pt; color: #666666; }
.gray { color: #999999; }
.red { color: #cc0000; font-weight: bold; }
.green { color: #007700; }
.mono { font-family: "Courier New", monospace; font-size: 10pt; }
.center { text-align: center; }

.footer {
  background: #3d0f5c;
  color: #cbb2e0;
  font-size: 9pt;
  padding: 5px;
}
.footer a { color: #ffe97f; }

.notice-box {
  border: 2px dashed #cc0000;
  background: #fff8f8;
  padding: 6px;
  margin: 8px 0;
  font-size: 11pt;
}

.closed-tag {
  background: #cc0000;
  color: #ffffff;
  font-size: 9pt;
  font-weight: bold;
  padding: 1px 4px;
}

.hr-star {
  height: 12px;
  background-image: url("../assets/hr_star.svg");
  background-repeat: repeat-x;
}

/* --- 表單(2002 風格,不要圓角) --- */
input[type="text"], input[type="password"], textarea {
  font-family: "PMingLiU", "MingLiU", "新細明體", "Songti TC", "SimSun", serif;
  font-size: 11pt;
  border: 2px inset #cccccc;
  background: #ffffff;
  padding: 1px 2px;
}
input[type="submit"], input[type="button"], button {
  font-family: "PMingLiU", "MingLiU", "新細明體", "Songti TC", "SimSun", serif;
  font-size: 11pt;
  border: 2px outset #cccccc;
  background: #dddddd;
  padding: 1px 8px;
  cursor: pointer;
}
input[type="submit"]:active, button:active { border-style: inset; }

/* --- 分頁列 --- */
.pager { font-size: 10pt; padding: 4px 0; }
.pager a { padding: 0 2px; }
.pager .cur { font-weight: bold; color: #cc0000; }

/* ===========================================================
   以下是玩家看不出來是「遊戲」的部分:調查筆記與音效鈕。
   刻意做成 2002 年的小工具外觀,不用現代 UI。
   =========================================================== */

#visitor-log {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 900;
  background: #f3e8ff;
  border: 2px outset #b48fd0;
  font-size: 9pt;
  color: #4b0082;
  padding: 2px 6px;
  cursor: pointer;
  font-family: "PMingLiU", "MingLiU", "新細明體", "Songti TC", "SimSun", serif;
}
#visitor-log:hover { background: #ffe97f; }

#notebook {
  position: fixed;
  right: 8px;
  bottom: 34px;
  z-index: 901;
  width: 320px;
  max-height: 62vh;
  overflow-y: auto;
  background: #ffffff;
  border: 2px outset #b48fd0;
  display: none;
}
#notebook .nb-head {
  background: #3d0f5c;
  color: #ffe97f;
  font-size: 10pt;
  font-weight: bold;
  padding: 3px 6px;
}
#notebook .nb-body { padding: 6px; font-size: 10pt; }
#notebook .nb-item {
  border-bottom: 1px dotted #b48fd0;
  padding: 3px 0;
  color: #333333;
}
#notebook .nb-item.locked { color: #bbbbbb; }
#notebook .nb-when { color: #888888; font-size: 9pt; }

#sound-btn {
  position: fixed;
  right: 8px;
  top: 8px;
  z-index: 900;
  background: #dddddd;
  border: 2px outset #cccccc;
  font-size: 9pt;
  padding: 1px 6px;
  cursor: pointer;
  font-family: "Courier New", monospace;
}

/* ===========================================================
   腐化層 —— 由 haunt.js 依進度掛上 class。
   平常完全不作用,不會影響正常瀏覽。
   =========================================================== */

html.rot-1 .ticker { background: #ffe066; }
html.rot-2 .counter td { color: #ff3333; }
html.rot-2 .footer { color: #8a7a99; }
html.rot-3 body { background-color: #14031f; }
html.rot-3 .top { background: #4a1170; }
html.rot-3 .park-name { color: #d9c8a0; text-shadow: 2px 2px 0 #000000; }
html.rot-3 img.photo { border-color: #555555; filter: grayscale(0.55) contrast(1.15); }
html.rot-4 body { background-image: none; background-color: #000000; }
html.rot-4 .page { border-color: #440000; }
html.rot-4 .content { background: #f2efe6; }
html.rot-4 img.photo { filter: grayscale(1) contrast(1.4) brightness(0.8); }

/* -----------------------------------------------------------
   白底白字。平常完全看不見,只有拖曳選取或 Ctrl+A 才會浮出來。
   ARG 的老招,但它有效的原因是:玩家是「自己動手」找到的,
   不是網站演給他看的。自己挖出來的東西才會留在腦子裡。
   ----------------------------------------------------------- */
::selection { background: #3d0f5c; color: #ffe97f; }
::-moz-selection { background: #3d0f5c; color: #ffe97f; }

.ghost {
  color: #ffffff;
  font-size: 10pt;
  line-height: 1.7;
  display: block;
  margin-top: 10px;
  -webkit-user-select: text;
  user-select: text;
}
html.rot-4 .ghost { color: #f2efe6; }   /* 內容底色在 rot-4 變米色,白字會露餡 */

/* -----------------------------------------------------------
   蓋在整個畫面上的一層。暗角 + 掃描線,依腐化加深。
   不吃滑鼠事件,玩家不會發現多了一層東西。
   ----------------------------------------------------------- */
#veil {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 800;
  display: none;
  pointer-events: none;
}
html.rot-2 #veil { display: block; box-shadow: inset 0 0 140px 40px rgba(0,0,0,0.30); }
html.rot-3 #veil { display: block; box-shadow: inset 0 0 210px 70px rgba(0,0,0,0.55); }
html.rot-4 #veil { display: block; box-shadow: inset 0 0 280px 120px rgba(0,0,0,0.78); }

html.rot-3 #veil:after, html.rot-4 #veil:after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0.11) 0px, rgba(0,0,0,0.11) 1px, transparent 1px, transparent 3px);
}

/* 極慢的縮放呼吸。幅度小到說不出哪裡怪,但一直在動。 */
html.rot-3 table.page { animation: breathe 11s ease-in-out infinite; }
html.rot-4 table.page { animation: breathe 6.5s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.0045); }
}

/* 斷電閃黑 */
#blackout {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9998;
  background: #000000;
  display: none;
  pointer-events: none;
}

/* 計數器跳成 4444444 之後 */
html.rot-4 .counter { border-color: #661111; }
html.rot-4 .counter td { color: #ff2b2b; text-shadow: 0 0 7px rgba(255,0,0,0.85); }
.counter td.four { animation: fourFlick 1.9s steps(2) infinite; }
@keyframes fourFlick {
  0%, 92%, 100% { opacity: 1; }
  95%           { opacity: 0.35; }
}

#scare-layer {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: none;
  background: #000000;
  pointer-events: none;
}
#scare-layer img, #scare-layer svg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}

.glitch-shift { animation: glitchShift 0.18s steps(2) 3; }
@keyframes glitchShift {
  0%   { transform: translate(0, 0); filter: none; }
  33%  { transform: translate(-6px, 2px); filter: invert(1) hue-rotate(90deg); }
  66%  { transform: translate(5px, -3px); filter: none; }
  100% { transform: translate(0, 0); filter: none; }
}

/* 虛構聲明 —— 照參考站作法放在極深處,不干擾沉浸 */
#fiction-notice {
  width: 780px;
  margin: 480px auto 12px auto;
  text-align: center;
  color: #6b5a7a;
  font-size: 7pt;
  line-height: 1.4;
}