/* TWBK 小鎮入口 —— 像素小鎮風：深藍夜色底＋米白告示牌卡片，字型俐方體 11 號（OFL）。 */
@font-face { font-family: "Cubic11"; src: url("fonts/Cubic_11.woff2") format("woff2"); font-display: swap; }
:root { --navy: #1b2a4a; --navy2: #24375f; --paper: #fbf3df; --paper2: #efe2c2; --ink: #2b2a33; --dim: #7a6f5a;
  --ok: #3fbf62; --warn: #e6a92a; --bad: #e0453a; --px: 3px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--navy);
  background-image: radial-gradient(#2a3b66 1px, transparent 1px); background-size: 14px 14px;
  font: 15px/1.5 "Cubic11", "Noto Sans TC", monospace; -webkit-font-smoothing: none; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
.card { position: relative; background: var(--paper); border: var(--px) solid #0e1628; padding: 12px;
  box-shadow: inset 0 0 0 var(--px) var(--paper2), 0 var(--px) 0 #0e1628;
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)),
    calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px)); }
.card h2 { margin: 0 0 8px; font-size: 16px; font-weight: normal; display: flex; align-items: center; gap: 8px; }
.card h2 .sub { margin-left: auto; color: var(--dim); font-size: 12px; }

.top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 8px; color: #fff; max-width: 1400px; margin: 0 auto; }
.top h1 { margin: 0; white-space: nowrap; font-size: 20px; font-weight: normal; display: flex; align-items: center; gap: 8px; text-shadow: 2px 2px 0 #0e1628; }
.top h1 .wordmark { height: 46px; width: auto; display: block; filter: drop-shadow(0 3px 0 #0e1628); }
@media (max-width: 520px) { .top h1 .wordmark { height: 36px; } }
.top .me { margin-left: auto; color: #b9c6e6; font-size: 13px; text-align: right; }
@media (max-width: 520px) { .top .me { font-size: 11px; max-width: 9em; } }
.top .out { white-space: nowrap; font-size: 13px; text-decoration: none; border: 2px solid #4a5f92; padding: 0 10px; color: #dfe7ff; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 10px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

.map { padding: 6px; }
.mapbox { position: relative; width: 100%; aspect-ratio: 1536 / 1024; background: #2a5d8a; overflow: hidden; }
.townimg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; transition: opacity 2s; }
#town { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; image-rendering: auto; }
#signs { position: absolute; inset: 0; pointer-events: none; }
.sign { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(10px, 1.45vw, 16px); line-height: 1.3;
  background: #fbf3df; color: #2b2a33; border: 2px solid #0e1628; padding: 0 6px; box-shadow: 2px 2px 0 #0e162888; }
.sign.hot { background: #ffe9a8; }
.hint { margin: 6px 4px 0; color: var(--dim); font-size: 12px; }

.lamp { display: inline-block; width: 10px; height: 10px; background: #aaa; flex: none; }
.lamp.ok { background: var(--ok); box-shadow: 0 0 5px var(--ok); } .lamp.warn { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
.lamp.bad { background: var(--bad); box-shadow: 0 0 5px var(--bad); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

#list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.site { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; text-decoration: none; padding: 8px;
  background: #fff9ea; border: 2px solid #d9c9a3; }
.site:hover, .site:focus-visible { border-color: #0e1628; background: #fff; outline: none; }
.site canvas { width: 44px; height: 44px; grid-row: span 2; border: 2px solid #0e1628; }
.site b { font-weight: normal; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.site .meta { color: var(--dim); font-size: 12px; text-align: right; white-space: nowrap; }
.site .line { grid-column: 2 / -1; color: #4f4a3e; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pop { position: fixed; inset: 0; background: #0008; display: none; align-items: flex-end; justify-content: center; padding: 16px; z-index: 20; }
.pop.on { display: flex; }
.pop .card { width: 100%; max-width: 420px; }
.pophead { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.pophead b { font-weight: normal; }
.pophead button { margin-left: auto; background: none; border: 0; font: 22px "Cubic11", monospace; cursor: pointer; }
#popDesc { margin: 8px 0 4px; } .pop .line { margin: 0; color: #4f4a3e; } .pop .meta { margin: 4px 0 10px; color: var(--dim); font-size: 12px; }
.go { display: block; text-align: center; text-decoration: none; background: #3a7bd5; color: #fff; border: 3px solid #0e1628; padding: 8px; font-size: 17px; box-shadow: inset 2px 2px 0 #6aa0ee; }
.go:hover { background: #2f6ac0; }

@media (min-width: 700px) { #list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pop { align-items: center; } }
@media (min-width: 1100px) {
  .wrap { grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr); align-items: start; }
  #list { grid-template-columns: minmax(0, 1fr); }
}

/* 登入頁 */
.login { max-width: 380px; margin: 10vh auto 0; padding: 0 14px; }
.login canvas { width: 100%; display: block; border: 2px solid #0e1628; }
.login label { display: block; margin-top: 10px; color: var(--dim); font-size: 13px; }
.login input { width: 100%; font: inherit; padding: 8px; background: #fff; border: 3px solid #0e1628; }
.login button { width: 100%; margin-top: 14px; font: inherit; font-size: 17px; color: #fff; background: #3fae55; border: 3px solid #0e1628; padding: 8px; cursor: pointer; box-shadow: inset 2px 2px 0 #6fd384; }
.login .msg { margin-top: 8px; min-height: 1.5em; font-size: 13px; }

.loginlogo { background: #1b2a4a; margin: -12px -12px 10px; padding: 18px 14px 14px; text-align: center; }
.loginlogo img { width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 3px 0 #0e1628); }
.login .card { padding-top: 12px; }