:root {
  --roc-blue: #000095;
  --roc-blue-2: #0018b8;
  --roc-red: #e60012;
  --warn-yellow: #fff200;
  --warn-yellow-2: hsl(55 100% 74%);
  --cyan: #00d7ff;
  --silver: #d8d8d8;
  --silver-dark: #8c8c8c;
  --cheap-gold: #caa032;
  --ink: #101010;
  --panel: #f4f4ef;
  --line: #595959;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: PMingLiU, MingLiU, "Microsoft JhengHei", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
  background:
    linear-gradient(90deg, rgba(0, 0, 149, .08) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 149, .06) 1px, transparent 1px),
    radial-gradient(circle at 12% 7%, rgba(255, 242, 0, .62), transparent 23%),
    linear-gradient(135deg, #e8e8e8 0%, #fff 24%, #cfcfcf 48%, #f7f7f7 74%, #b7b7b7 100%);
  background-size: 18px 18px, 18px 18px, auto, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.035), rgba(0,0,0,.035) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: multiply;
}

a { color: #0046ff; font-weight: bold; }
a:visited { color: #7a0099; }
a:hover { color: var(--roc-red); background: var(--warn-yellow); }
button, input { font: inherit; }

#boot-cover {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  background: #dcdcdc;
  animation: bootAway .55s linear 1.4s forwards;
}
.boot-panel {
  width: min(560px, 86vw);
  border: 3px ridge #fff;
  background: #efefe9;
  padding: 14.6px 16.2px 13.8px;
  box-shadow: 6px 6px 0 #777;
  text-align: center;
}
.boot-title {
  background: linear-gradient(#001cc0, #000075);
  color: white;
  font-weight: bold;
  padding: 7.5px 8px;
  border: 1px solid #001050;
  letter-spacing: 1px;
}
.boot-meter {
  margin: 16px auto 9px;
  width: 83%;
  height: 18px;
  border: 2px inset #bbb;
  background: white;
  padding: 2px;
}
.boot-meter span { display: block; height: 100%; background: repeating-linear-gradient(90deg, #000095 0 14px, #fff200 14px 20px); animation: bootBar 1.2s linear forwards; }
.boot-note { font-size: 13px; color: #333; }
@keyframes bootBar { from { width: 8%; } to { width: 100%; } }
@keyframes bootAway { to { opacity: 0; visibility: hidden; } }

.site-shell {
  width: min(1220px, calc(100vw - 18px));
  margin: 7px auto 12px;
  border: 2px solid #333;
  background: #fff;
  box-shadow: 0 0 0 4px #f5f5f5, 7px 7px 0 rgba(0,0,0,.28);
}

.roc-header { border-bottom: 3px double var(--roc-blue); }
.flag-strip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: white;
  background: linear-gradient(90deg, var(--roc-blue), #0029d4 46%, var(--roc-red) 47%, #a00000);
  font-size: 13px;
  padding: 4px 9px 3px 8px;
  border-bottom: 2px solid var(--warn-yellow);
}
.banner-main {
  display: grid;
  grid-template-columns: 92px 1fr 210px;
  gap: 10.7px;
  align-items: center;
  min-height: 132px;
  padding: 10px 11px 8.8px 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(222,222,222,.7)),
    repeating-linear-gradient(45deg, rgba(0,0,149,.12) 0 9px, rgba(255,242,0,.12) 9px 18px);
}
.seal {
  width: 78px;
  height: 78px;
  margin-left: 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 42px;
  font-family: DFKai-SB, MingLiU, serif;
  font-weight: bold;
  background: radial-gradient(circle, var(--roc-red), #8e0000 72%);
  border: 5px double var(--warn-yellow);
  box-shadow: inset -4px -4px 0 rgba(0,0,0,.28), 2px 3px 0 #777;
  transform: translateY(.6px) rotate(-2deg);
}
.unit-label {
  display: inline-block;
  margin: 0 0 3px;
  padding: 2px 7px;
  color: #00127a;
  background: hsl(55 100% 82%);
  border: 1px solid #b49a00;
  font-size: 14px;
  font-weight: bold;
}
.roc-wordart {
  position: relative;
  margin: 0;
  line-height: 1.05;
  font-family: DFKai-SB, PMingLiU, MingLiU, serif;
  font-size: clamp(28px, 4.2vw, 54px);
  letter-spacing: -1px;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35));
}
.roc-wordart::after {
  content: attr(data-shadow);
  position: absolute;
  left: 8px;
  top: 24px;
  z-index: 0;
  color: rgba(0, 0, 149, .2);
  transform: skewX(-18deg) scaleY(1.32);
  white-space: nowrap;
}
.roc-wordart span {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-right: 6px;
  color: transparent;
  -webkit-text-stroke: 1px #00105d;
  background: linear-gradient(180deg, #fff 4%, var(--warn-yellow) 22%, #ff2b2b 47%, #001eff 76%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 1px 1px #fff, 3px 3px #9a9a9a;
}
.roc-wordart span:nth-child(1) { transform: skewX(-8deg) scaleY(1.14); }
.roc-wordart span:nth-child(2) { transform: translateY(1px) scaleX(1.08); }
.roc-wordart span:nth-child(3) { transform: translateX(-1px) skewX(3deg) scaleY(1.05); }
.slogan { margin: 8.2px 0 0 2px; color: #b00000; font-weight: bold; text-decoration: underline; }
.header-stats table { width: 100%; border-collapse: collapse; font-size: 13px; background: white; }
.header-stats th, .header-stats td { border: 1px solid #777; padding: 4px 5px; }
.header-stats th { background: linear-gradient(#eee, #bbb); text-align: right; width: 72px; }
.header-stats .red { color: var(--roc-red); font-weight: bold; }

.top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: linear-gradient(#fff, #bebebe 45%, #f2f2f2 46%, #9f9f9f);
  border-top: 1px solid #888;
  border-bottom: 1px solid #555;
}
.top-nav a {
  padding: 7px 12px 6px 11.4px;
  color: #000;
  text-decoration: none;
  border-right: 1px solid #555;
  border-left: 1px solid #fff;
  font-size: 14px;
}
.top-nav a:hover { background: linear-gradient(#fff200, #e2b300); color: #900; }
.ticker {
  display: grid;
  grid-template-columns: 112px 1fr;
  overflow: hidden;
  border-top: 1px solid #d0a500;
  background: var(--warn-yellow-2);
  color: #000;
  font-size: 14px;
}
.ticker b { padding: 4.5px 7px; color: #d00000; background: hsl(55 100% 69%); border-right: 1px solid #b09a00; }
.ticker-track { white-space: nowrap; padding: 4.5px 0; animation: marquee 22s linear infinite; }
@keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-110%); } }

.content-grid {
  display: grid;
  grid-template-columns: 286px 1fr;
  gap: 11px;
  padding: 10.5px 9px 8px 8px;
  background: #e9e9df;
}
.left-column { display: flex; flex-direction: column; gap: 10px; transform: translateY(.7px); }
.main-column { display: flex; flex-direction: column; gap: 11.4px; }
.box {
  position: relative;
  border: 2px groove #bcbcbc;
  background: var(--panel);
  padding: 8.2px 9px 9.1px 8px;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,.12);
}
.box h2 {
  margin: -8.2px -9px 7.5px -8px;
  padding: 4.2px 8px 3.8px;
  font-size: 16px;
  color: white;
  background: linear-gradient(90deg, var(--roc-blue), #0035e6 72%, #00106a);
  border-bottom: 2px solid var(--warn-yellow);
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 1px;
}
.box:nth-child(even) h2 { background: linear-gradient(90deg, #6d0000, var(--roc-red), #001fbe); }
.profile-card { text-align: center; background: #f8f8ee; }
.avatar-frame {
  width: 128px;
  height: 128px;
  margin: 8px auto 9px;
  padding: 4px;
  border: 3px ridge var(--cheap-gold);
  background: linear-gradient(#fff, #ccc);
  overflow: hidden;
}
.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.18) saturate(.85) sharpen(1px);
  image-rendering: auto;
}
.avatar-frame.no-photo::after { content: "無照片資料"; display: grid; place-items: center; height: 100%; background: repeating-linear-gradient(45deg, #ddd 0 8px, #bbb 8px 16px); }

.info-table, .admin-table { width: 100%; border-collapse: collapse; background: white; }
.info-table th, .info-table td, .admin-table th, .admin-table td {
  border: 1px solid #686868;
  padding: 5px 6.3px 4.7px 5.4px;
  vertical-align: top;
}
.info-table th, .admin-table th {
  background: linear-gradient(#fdfdfd, #c9c9c9);
  color: #00106a;
  text-align: center;
  font-weight: bold;
}
.compact { font-size: 13px; }
.admin-table { font-size: 14px; }
.admin-table tbody tr:nth-child(even) { background: #eeeeee; }
.admin-table tbody tr:hover { background: hsl(55 100% 82%); }
.stamp {
  display: inline-block;
  padding: 1px 5px;
  color: #b00000;
  border: 2px solid #b00000;
  font-family: Tahoma, Arial, sans-serif;
  font-weight: bold;
  transform: rotate(-3deg) translateY(-.4px);
  background: rgba(255,255,255,.55);
}
.stamp.small { font-size: 12px; }
.progress-row {
  display: grid;
  grid-template-columns: 26px 1fr 42px;
  gap: 6px;
  align-items: center;
  margin-top: 6.4px;
  font-size: 13px;
}
meter { width: 100%; height: 13px; }

.bevel-btn, .player-buttons button, .input-line button {
  display: block;
  width: 100%;
  margin: 5.8px 0;
  padding: 7px 8px 6px 7.2px;
  color: #000;
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  border: 2px outset #d8d8d8;
  background: linear-gradient(#fff 0%, #d5d5d5 42%, #8d8d8d 43%, #ececec 100%);
  box-shadow: inset 1px 1px #fff;
}
.bevel-btn:hover, .player-buttons button:hover, .input-line button:hover { filter: brightness(1.08); transform: translate(1px, -1px); }
.bevel-btn.cyan { color: #003850; border-color: var(--cyan); }
.bevel-btn.danger { color: #8b0000; border-color: var(--roc-red); }
.bevel-btn.gold { color: #573800; border-color: var(--cheap-gold); }
.equalizer { display: flex; align-items: end; gap: 4px; height: 38px; padding: 5px; border: 1px inset #aaa; background: #151515; }
.equalizer i { flex: 1; background: linear-gradient(#00f0ff, #fff200); animation: bounce .85s infinite alternate; }
.equalizer i:nth-child(2n) { animation-delay: .2s; }
.equalizer i:nth-child(3n) { animation-delay: .35s; }
@keyframes bounce { from { height: 8px; } to { height: 31px; } }
.player-buttons { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.player-buttons button { text-align: center; font-size: 12px; padding: 4px 2px; }
.logs-box { font-family: "Courier New", MingLiU, monospace; font-size: 12px; color: #444; background: #f1f1f1; }
.logs-box p { margin: 3px 0; }

.yellow-notice { background: hsl(52 94% 78%); border-color: #a78d00; }
.yellow-notice h2 { background: linear-gradient(90deg, #d20000, #ff5b00, #ffe600); color: #000; text-shadow: 1px 1px #fff; }
.notice-inner { border: 1px solid #b59a00; background: hsl(52 96% 82%); padding: 6px 8px; margin-bottom: 7px; }
.notice-inner p { margin: 3px 0 5px; }
.same-yellow { background: hsl(52 96% 74%); padding: 3px 5px; }

.query-box { background: #efefef; }
.window-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid #777;
  border-bottom: none;
  background: linear-gradient(#f6f6f6, #bcbcbc);
  font-family: Tahoma, Arial, sans-serif;
  font-size: 13px;
}
.window-header span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #777; background: #d40000; }
.window-header span:nth-child(2) { background: #fff200; }
.window-header span:nth-child(3) { background: #00b050; }
.terminal {
  height: 184px;
  overflow-y: auto;
  padding: 8px;
  border: 2px inset #9c9c9c;
  background: #080808;
  color: #d8ffd8;
  font: 14px/1.42 "Courier New", MingLiU, monospace;
}
.terminal p, .terminal div { margin: 0 0 4px; }
.terminal .reply { color: #00eaff; }
.input-line {
  display: grid;
  grid-template-columns: 112px 1fr 92px;
  gap: 5px;
  margin-top: 6px;
  align-items: center;
}
.input-line label { font-family: "Courier New", monospace; color: #00106a; font-weight: bold; }
.input-line input { min-width: 0; padding: 5px 6px; border: 2px inset #bdbdbd; background: white; }
.input-line button { margin: 0; text-align: center; padding: 5px 4px; }

.split-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; }
.monitor-box { min-height: 146px; }
.bar-chart {
  height: 76px;
  display: flex;
  align-items: end;
  gap: 5px;
  padding: 6px;
  border: 1px inset #aaa;
  background: repeating-linear-gradient(0deg, #202020 0 8px, #151515 8px 16px);
}
.bar-chart i { flex: 1; background: linear-gradient(#fff200, #00d7ff); border: 1px solid #000; animation: pulseHeight 1.1s infinite alternate; }
.bar-chart i:nth-child(odd) { animation-duration: .8s; }
@keyframes pulseHeight { to { filter: brightness(1.25); transform: scaleY(.92); transform-origin: bottom; } }
.crooked { transform: translateX(.7px); }
.dial {
  width: 92px;
  height: 92px;
  margin: 5px auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--roc-red) 0 216deg, #d3d3d3 216deg 360deg);
  border: 3px ridge #aaa;
}
.dial span { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #b00000; font: bold 20px Tahoma; }
.tiny-note { font-size: 12px; margin: 5px 0 0; color: #555; }
.cyan-text { color: #007d96; font-weight: bold; }
.tag {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid var(--roc-blue);
  color: var(--roc-blue);
  background: white;
  font: bold 12px Tahoma, Arial, sans-serif;
}
.tag.yellow { background: var(--warn-yellow); color: #000; border-color: #9c8500; }
.tag.cyan { background: #bdf8ff; color: #003e48; border-color: var(--cyan); }
.tag.magenta { background: #ffd3df; color: #9d0029; border-color: var(--roc-red); }
.progress-cell { display: block; height: 15px; border: 1px inset #999; background: #222; padding: 2px; }
.progress-cell i { display: block; height: 100%; background: linear-gradient(90deg, #00d7ff, #fff); }
.progress-cell.magenta i { background: linear-gradient(90deg, #ff003c, #ffd0d9); }
.progress-cell.yellow i { background: linear-gradient(90deg, #fff200, #fffbd0); }

.project-list { display: grid; gap: 8px; }
.project-row {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 9px;
  padding: 6px;
  border: 1px solid #777;
  background: #fff;
}
.project-row.uneven { transform: translateX(.8px); background: #f2f2f2; }
.project-row h3 { margin: 0 0 4px; color: #00106a; font-size: 17px; text-decoration: underline; }
.project-row p { margin: 3px 0 6px; font-size: 14px; }
.thumb {
  height: 96px;
  border: 2px ridge #aaa;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #ddd 0 8px, #c4c4c4 8px 16px);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.22) saturate(.78) brightness(1.05);
}
.footer-box { background: #f9f9db; }
.site-footer {
  padding: 7px 9px 8px;
  text-align: center;
  color: #333;
  font-size: 12px;
  background: linear-gradient(#cfcfcf, #f8f8f8);
  border-top: 2px solid #777;
}
.site-footer p { margin: 2px; }
.joke-disclaimer {
  display: inline-block;
  margin: 4px auto !important;
  padding: 3px 8px;
  color: #b00000;
  font-weight: bold;
  background: hsl(55 100% 78%);
  border: 1px solid #b09a00;
}

@media (max-width: 880px) {
  .site-shell { width: calc(100vw - 8px); margin-top: 4px; }
  .banner-main, .content-grid, .split-row { grid-template-columns: 1fr; }
  .header-stats { display: none; }
  .seal { display: none; }
  .top-nav a { flex: 1 1 50%; }
  .project-row { grid-template-columns: 1fr; }
  .content-grid { padding: 6px; }
  .ticker { grid-template-columns: 1fr; }
  .input-line { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  #boot-cover { display: none; }
}