/* 卡陣：暖墨底，沿用卡坊色系；手機直式優先 */
:root {
  --bg: #1c1915; --bg2: #24211c; --panel: #2b2721; --line: rgba(200, 182, 146, .18);
  --text: #ece3d2; --muted: #b3a68f; --gold: #dcc79c; --cinnabar: #c9583f; --jade: #6fb39f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Noto Serif TC", "Songti TC", serif; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
/* 頁面不給雙指縮放、雙擊放大（只留捲動）；iOS 另在 main.js 擋 gesture 事件 */
html { touch-action: pan-x pan-y; }
button { font: inherit; color: inherit; }

/* 手機只用直向：網頁鎖不住螢幕旋轉，橫過來時整面蓋上提示，轉回直向即恢復（牌局在底下照常） */
.kz-rotate { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  .kz-rotate {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(90% 80% at 50% 45%, #2a1a10, #120a06);
    color: var(--gold); touch-action: none;
  }
  .kz-rotate p { margin: 0; font-weight: 900; font-size: 1.05rem; letter-spacing: .2em; }
  .kz-rotate-phone {
    width: 34px; height: 58px; border: 3px solid currentColor; border-radius: 7px;
    animation: kz-rotate-back 2.4s ease-in-out infinite;
  }
}
@keyframes kz-rotate-back {
  0%, 20% { transform: rotate(-90deg); }
  55%, 100% { transform: rotate(0deg); }
}
#app { min-height: 100dvh; max-width: 560px; margin: 0 auto; padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom); }

.seal { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 3px; background: var(--fc); color: #fbf3e2; font-weight: 900; font-size: .85em; flex: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.chip { display: inline-block; padding: 0 .45em; border: 1px solid var(--line); border-radius: 99px; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.chip.gold { color: #2a1f10; background: var(--gold); border-color: var(--gold); }
.muted { color: var(--muted); font-size: .85rem; }
.btn { appearance: none; border: 1px solid rgba(220,199,156,.45); background: var(--panel); border-radius: 8px; padding: .65em 1.3em; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--text); display: inline-block; }
.btn.primary { background: linear-gradient(#c9583f, #a8432e); border-color: #e0806a; color: #fff6e8; }
.btn.small { padding: .38em .7em; font-size: .82rem; }
.btn.ghost { background: transparent; }
.btn.pass { border-color: var(--gold); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.used { opacity: .45; text-decoration: line-through; }
.link { background: none; border: 0; color: var(--gold); text-decoration: underline; cursor: pointer; padding: 0 .3em; }
.actions { display: flex; gap: .75rem; justify-content: center; margin: 1.2rem 0; flex-wrap: wrap; }

/* 標題頁 */
.title { text-align: center; padding-top: 1.6rem; }
.title h1 { margin: 0; font-size: 2.6rem; font-weight: 900; letter-spacing: .3em; padding-left: .3em; }
.title p { margin: .2rem 0 0; color: var(--muted); }
.lead { text-align: center; line-height: 1.7; }
.factions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.fac { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .2rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; }
.fac .seal { font-size: 1.4rem; }
.fac small { font-size: .62rem; color: var(--muted); }
.fac.on { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc), 0 0 18px -4px var(--fc); background: var(--panel); }
.fac-info { margin-top: .8rem; padding: .8rem; border-radius: 10px; background: var(--bg2); line-height: 1.65; font-size: .92rem; }
.fac-info p { margin: .3rem 0; }
.deck-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.deck-item { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem .2rem .25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: .85rem; cursor: pointer; }
.deck-item small { color: var(--muted); }
.toggle { display: flex; justify-content: center; gap: .4rem; align-items: center; margin-top: .9rem; color: var(--muted); }

/* 換牌 */
.mull-screen h2 { text-align: center; margin: 1.2rem 0 .3rem; }
.mull-hand { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; margin-top: 1rem; }
.mull-hand .tile { width: 100%; height: auto; aspect-ratio: 2/3; }
.mull-hand .mull-slot { width: 100%; height: auto; }

/* 小卡 */
.tile { position: relative; flex: 0 1 auto; width: 40px; aspect-ratio: 2/3; border-radius: 5px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--fc) 70%, #000); background: #e6d7b8; overflow: hidden; cursor: pointer; color: #2a2018; min-width: 0; }
.tile.gold { border-color: var(--gold); box-shadow: 0 0 0 1px #8a6a2a, 0 0 8px -2px var(--gold); }
.tile-art, .tile-ph { position: absolute; inset: 0; }
.tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-art .tile-sub { object-fit: contain; object-position: 50% 50%; }
.tile-ph { background: radial-gradient(circle at 50% 35%, #f3e8d0, #c8b38c); display: grid; place-items: center; }
.tile-ph-seal { display: grid; place-items: center; width: 46%; aspect-ratio: 1; margin-top: 22%; border-radius: 3px; background: var(--fc); color: #fbf3e2; font-weight: 900; font-size: min(1.1rem, 4.2vw); opacity: .92; }
.tile-name { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font-weight: 900; font-size: .62rem; line-height: 1.1; color: #2a2018; text-shadow: 0 0 3px #f3e8d0, 0 0 2px #f3e8d0; white-space: nowrap; overflow: hidden; }
.tile-art ~ .tile-name { color: #fbf3e2; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.tile-pow { position: absolute; left: 2px; bottom: 2px; min-width: 1.35em; height: 1.35em; border-radius: 99px; background: #1c1915; color: #f3e8d0; font: 700 .7rem/1.35em system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 1.5px var(--fc); }
.tile.gold .tile-pow { background: var(--gold); color: #2a1f10; }
.tile-pow.up { background: #2f6b4f; }
.tile-pow.down { background: #8a2f22; }

/* 戰力圈標示可放哪排（對齊織錦 --row-c：陸 #9a7428／水 #1e2d4a／天 #d9d4c7）
 * 主力：手牌／換牌小卡；場上未升降時輕量跟隨，.up／.down 仍蓋過以保讀力。 */
:root {
  --pow-land: #9a7428; --pow-land-fg: #fff6e0;
  --pow-water: #1e2d4a; --pow-water-fg: #e8eef8;
  --pow-sky: #d9d4c7; --pow-sky-fg: #2a2018;
}
.hand .tile-pow.pow-land, .mull-hand .tile-pow.pow-land,
.row-units .tile-pow.pow-land:not(.up):not(.down) { background: var(--pow-land); color: var(--pow-land-fg); }
.hand .tile-pow.pow-water, .mull-hand .tile-pow.pow-water,
.row-units .tile-pow.pow-water:not(.up):not(.down) { background: var(--pow-water); color: var(--pow-water-fg); }
.hand .tile-pow.pow-sky, .mull-hand .tile-pow.pow-sky,
.row-units .tile-pow.pow-sky:not(.up):not(.down) { background: var(--pow-sky); color: var(--pow-sky-fg); }
/* 敏捷／多排：內圈＋外圈／描邊皆雙色（同漸層；撤陣營單色 box-shadow） */
.hand .tile-pow.pow-land-sky, .mull-hand .tile-pow.pow-land-sky,
.row-units .tile-pow.pow-land-sky:not(.up):not(.down),
.hand .tile-pow.pow-land-water, .mull-hand .tile-pow.pow-land-water,
.row-units .tile-pow.pow-land-water:not(.up):not(.down),
.hand .tile-pow.pow-water-sky, .mull-hand .tile-pow.pow-water-sky,
.row-units .tile-pow.pow-water-sky:not(.up):not(.down),
.hand .tile-pow.pow-land-water-sky, .mull-hand .tile-pow.pow-land-water-sky,
.row-units .tile-pow.pow-land-water-sky:not(.up):not(.down) {
  border: 1.5px solid transparent;
  box-shadow: none;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff6e0; text-shadow: 0 0 2px #1c1915, 0 1px 1px #1c1915;
}
.hand .tile-pow.pow-land-sky, .mull-hand .tile-pow.pow-land-sky,
.row-units .tile-pow.pow-land-sky:not(.up):not(.down) {
  background-image: linear-gradient(90deg, var(--pow-land) 50%, var(--pow-sky) 50%),
    linear-gradient(90deg, var(--pow-land) 50%, var(--pow-sky) 50%);
}
.hand .tile-pow.pow-land-water, .mull-hand .tile-pow.pow-land-water,
.row-units .tile-pow.pow-land-water:not(.up):not(.down) {
  background-image: linear-gradient(90deg, var(--pow-land) 50%, var(--pow-water) 50%),
    linear-gradient(90deg, var(--pow-land) 50%, var(--pow-water) 50%);
}
.hand .tile-pow.pow-water-sky, .mull-hand .tile-pow.pow-water-sky,
.row-units .tile-pow.pow-water-sky:not(.up):not(.down) {
  background-image: linear-gradient(90deg, var(--pow-water) 50%, var(--pow-sky) 50%),
    linear-gradient(90deg, var(--pow-water) 50%, var(--pow-sky) 50%);
}
.hand .tile-pow.pow-land-water-sky, .mull-hand .tile-pow.pow-land-water-sky,
.row-units .tile-pow.pow-land-water-sky:not(.up):not(.down) {
  background-image: linear-gradient(90deg, var(--pow-land) 33.33%, var(--pow-water) 33.33% 66.66%, var(--pow-sky) 66.66%),
    linear-gradient(90deg, var(--pow-land) 33.33%, var(--pow-water) 33.33% 66.66%, var(--pow-sky) 66.66%);
}
/* 金卡邊框／箔仍標稀有；戰力圈改跟排色（上方排色規則在 .tile.gold .tile-pow 之後，蓋過金底） */
.tile-ab { position: absolute; right: 1px; bottom: 2px; font-size: .5rem; padding: 0 2px; border-radius: 3px; background: rgba(28,25,21,.82); color: var(--gold); white-space: nowrap; }
.tile.sel { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--gold), 0 8px 18px rgba(0,0,0,.5); }
.tile.swap { opacity: .4; filter: grayscale(1); outline: 2px dashed var(--cinnabar); }
.tile.fresh { animation: pop .45s ease-out; outline: 2px solid var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 55%, transparent); }
.mull-hand .tile.fresh { z-index: 1; }
@keyframes pop { from { transform: scale(1.5); filter: brightness(1.8); } to { transform: none; } }

/* 換牌結果：原位 3D 翻面（舊→新），錯開；只用 transform，不整手重建 */
.mull-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  perspective: 700px;
  -webkit-perspective: 700px;
}
.mull-slot .tile { width: 100%; height: 100%; }
.mull-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: mull-flip-y .58s cubic-bezier(.22, .8, .28, 1) forwards;
  animation-delay: calc(var(--mull-i, 0) * 100ms);
}
.mull-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mull-flip-back { transform: rotateY(0deg); }
.mull-flip-front { transform: rotateY(180deg); }
.mull-flip-front .tile.fresh { animation: none; } /* 翻面時不做 pop，避免雙重變形 */
.mull-flip-inner.mull-flip-done .tile.fresh { animation: pop .4s ease-out; }
@keyframes mull-flip-y {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mull-flip-inner { animation: none; transform: rotateY(180deg); }
  .mull-flip-front .tile.fresh { animation: pop .35s ease-out; }
}

/* 棋盤 */
.board-screen { display: flex; flex-direction: column; height: 100dvh; padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
.side { display: flex; align-items: center; gap: .45rem; padding: .35rem .25rem; font-size: .85rem; flex: none; }
.side.active .side-name { color: var(--gold); }
.side-name { display: flex; flex-direction: column; line-height: 1.1; font-weight: 700; }
.side-name small { font-weight: 500; color: var(--muted); font-size: .68rem; }
.lives { display: inline-flex; gap: 3px; }
.lives i { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--cinnabar); }
.lives i.on { background: var(--cinnabar); box-shadow: 0 0 6px var(--cinnabar); }
.side-hand { color: var(--muted); font-family: system-ui, sans-serif; }
.side-total { margin-left: auto; font: 800 1.35rem/1 system-ui, sans-serif; color: var(--gold); min-width: 2ch; text-align: right; }
.side-btns { display: flex; gap: .3rem; }
.field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-height: 0; }
.row { flex: 1 1 0; min-height: 0; display: flex; gap: 4px; align-items: stretch; padding: 3px; border-radius: 7px; background: var(--bg2); border: 1px solid var(--line); transition: background .2s; }
.field.opp .row { background: #221e1a; }
.row.wx { background: linear-gradient(90deg, rgba(120,140,170,.25), rgba(120,140,170,.08)); }
.row.target { border-color: var(--gold); background: rgba(220,199,156,.14); box-shadow: inset 0 0 12px rgba(220,199,156,.25); cursor: default; animation: glow 1.2s ease-in-out infinite alternate; }
@keyframes glow { to { background: rgba(220,199,156,.24); } }
.row-label { flex: none; width: 2.3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-right: 1px solid var(--line); }
.row-name { font-weight: 900; font-size: .95rem; color: var(--muted); }
.row-score { font: 700 .95rem/1 system-ui, sans-serif; }
.row-wx { font-size: .58rem; color: #a9c3e8; white-space: nowrap; }
.row-units { flex: 1; display: flex; gap: 3px; align-items: center; min-width: 0; overflow: hidden; }
.row-units .tile { height: 100%; width: auto; max-height: 96px; flex-shrink: 1; }
.row-units .tile-ab { display: none; }
.row-units .tile-pow { font-size: .8rem; }
.mid { flex: none; display: flex; align-items: center; gap: .5rem; padding: .25rem .2rem; font-size: .75rem; border-top: 1px solid var(--cinnabar); border-bottom: 1px solid var(--line); margin: 3px 0; min-height: 2.4rem; }
.mid .round { font-weight: 900; color: var(--gold); white-space: nowrap; }
.mid .turn { margin-left: auto; white-space: nowrap; color: var(--muted); }
.logline { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.logline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logline .opp { color: #e5a593; }
.logline .me { color: #a7d7c6; }
.hand { flex: none; display: flex; gap: 5px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; }
.hand .tile { width: 58px; flex: none; }
.hand .tile-name { font-size: .7rem; }
.hint { flex: none; font-size: .8rem; line-height: 1.5; padding: .45rem .6rem; border-radius: 8px; background: rgba(95,156,139,.18); border: 1px solid rgba(95,156,139,.5); color: #d6efe6; margin-top: 4px; cursor: pointer; }
.selinfo { flex: none; font-size: .8rem; line-height: 1.5; padding: .45rem .55rem; margin-top: 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.selinfo .seal { margin-right: .3rem; }
.selinfo .ab { color: var(--gold); }
.selq { color: var(--muted); font-size: .74rem; }
.selq span { color: #cfc4b0; margin-left: .4em; }
.selbtns { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; flex-wrap: wrap; }

/* 浮層 */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10,8,6,.7); z-index: 20; padding: 1rem; }
.overlay-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--gold); border-radius: 14px; padding: 1.2rem; text-align: center; line-height: 1.6; }
.round-res b { color: var(--gold); }
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(10,8,6,.82); }
.detail { position: relative; width: min(440px, 94vw); max-height: 94dvh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; }
.detail-card { width: min(250px, 62vw); margin: .2rem auto 1rem; }
.detail-x { position: absolute; right: .4rem; top: .2rem; z-index: 2; background: none; border: 0; font-size: 1.8rem; color: var(--muted); cursor: pointer; }
.detail-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.detail-head b { font-size: 1.3rem; }
.detail-info { line-height: 1.7; font-size: .92rem; }
.detail-info .ab b { color: var(--gold); }
.detail blockquote { margin: .5rem 0; padding: .3rem .7rem; border-left: 3px solid var(--cinnabar); color: #f3e8d0; font-weight: 700; }
.detail .why { color: #cfc4b0; }
.detail .src, .detail .tip { color: var(--muted); font-size: .8rem; margin: .2rem 0; }
.detail details { font-size: .85rem; color: var(--muted); }
.rules-body { text-align: left; font-size: .9rem; line-height: 1.7; }
.rules-body h3 { margin: .8rem 0 .2rem; color: var(--gold); font-size: 1rem; }
.rules-body ul { margin: 0; padding-left: 1.2rem; }

/* MacBook：棋盤稍寬、小卡放大 */
@media (min-width: 700px) and (min-height: 700px) {
  #app.board-screen { max-width: 760px; }
  .tile { width: 52px; }
  .hand .tile { width: 76px; }
  .tile-name { font-size: .75rem; }
  .tile-pow { font-size: .85rem; }
  .tile-ab { font-size: .62rem; }
  .side, .mid { font-size: .95rem; }
}

/* 系列選擇 */
.series-pick { display: flex; gap: .5rem; justify-content: center; align-items: center; margin: .2rem 0 .6rem; }
.series-pick .series { font: inherit; padding: .25rem .9rem; border-radius: 99px; border: 1px solid #6b5a40; background: transparent; color: inherit; cursor: pointer; }
.series-pick .series.on { background: #c9a646; color: #1c1915; border-color: #c9a646; font-weight: 700; }

/* 帳號、模式、挑戰 */
.acct { text-align: center; font-size: .88rem; display: flex; gap: .6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.fac { position: relative; }
.fac .won { position: absolute; top: 4px; right: 6px; color: var(--jade); font-weight: 900; }
.deck-pick { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.deck-pick .series { font: inherit; font-size: .85rem; padding: .25rem .8rem; border-radius: 99px; border: 1px solid #6b5a40; background: transparent; color: inherit; cursor: pointer; }
.deck-pick .series.on { background: #c9a646; color: #1c1915; border-color: #c9a646; font-weight: 700; }
.deck-pick .series:disabled { opacity: .45; cursor: default; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 .4rem; }
.modes .btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7em .4em; min-height: 3.6rem; }
.modes .btn small { font-size: .7rem; font-weight: 400; opacity: .85; }
.challenge { margin-top: .8rem; padding: .8rem; border-radius: 10px; background: var(--bg2); }
.challenge h3 { margin: 0 0 .2rem; font-size: 1rem; }
.challenge-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: .5rem; }
.challenge-list .btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55em .3em; border-color: var(--fc); font-size: .9rem; }
.challenge-list .btn small { font-size: .7rem; font-weight: 400; color: var(--muted); }
.challenge-list .btn.done small { color: var(--jade); }
.err { color: #f0937c; font-size: .85rem; text-align: center; }
.ok { color: var(--jade); }

/* 組牌 */
.decks-screen h2, .lobby-screen h2 { text-align: center; margin: 1.2rem 0 .3rem; }
.deck-bar { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: .5rem; text-align: center; border-bottom: 1px solid var(--line); font-size: .9rem; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin: .8rem 0 5rem; }
.pool-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pool-card .tile { width: 100%; }
.pool-card.none .tile { filter: grayscale(1); opacity: .45; }
.pool-card.in .tile { box-shadow: 0 0 0 2px var(--gold); }
.pool-ctl { display: flex; align-items: center; gap: .4rem; }
.pool-ctl .btn { min-width: 2.2rem; min-height: 2.2rem; padding: 0; }
.actions.sticky { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 1rem 0 calc(.6rem + env(safe-area-inset-bottom)); margin: 0; }

/* 對戰同學 */
.room-code { text-align: center; font: 900 clamp(1.4rem, 11vw, 3rem)/1.2 ui-monospace, Menlo, monospace; max-width: 100%; overflow-wrap: anywhere; letter-spacing: .25em; padding-left: .25em; color: var(--gold); margin: 1rem 0; user-select: all; -webkit-user-select: all; }
.join-row { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.code-in { font: 700 1.4rem ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; width: 9ch; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-align: center; }
.clock { margin-left: .5rem; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.clock.low { color: #f0937c; font-weight: 700; }

/* 結算獎勵 */
.reward { margin: .6rem 0; }
.reward-cards { display: flex; gap: .5rem; justify-content: center; }
.reward-card { width: 72px; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.reward-card .tile { width: 100%; }

@media (min-width: 900px) {
  #app { max-width: 720px; }
  .decks-screen { max-width: 900px; }
}
.deck-pick .series.warn { border-style: dashed; opacity: .7; }
.deck-name { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: .4rem 0; font-size: .9rem; }
.deck-name input { font: inherit; font-size: 16px; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); width: min(16rem, 60vw); }


/* 不讓任何內容撐寬整頁（iOS 會整頁縮小、露出灰底）。clip 不建立捲動容器，不影響 fixed／sticky */
html, body { overflow-x: clip; }
#app:not(.board-screen) { overflow-x: clip; }
/* 對守陣人開局載入：木紋上居中，不跳版 */
.kz-loading { min-height: 70dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: var(--gold); text-align: center; }
.kz-loading p { margin: 0; font-weight: 700; letter-spacing: .2em; }
.kz-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(233,207,139,.25); border-top-color: var(--gold); animation: kzspin .9s linear infinite; }
@keyframes kzspin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .kz-spin { animation: none; } }

/* ── 山海經系列字型與卡名注音 ──
 * 源樣明體 GenYoMin2 TW（SIL OFL 1.1）子集：title＝特粗、只收卡名用字；body＝標準、內文＋拼音。
 * 子集用 scripts/build-fonts.mjs 重產；字型長快取，改了要把 ?v= 往上加（index.html 的 preload 也要同步）。 */
@font-face { font-family: "Kazhen Title"; src: url("../series/shanhai/fonts/title.woff2?v=115") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Kazhen Body"; src: url("../series/shanhai/fonts/body.woff2?v=115") format("woff2"); font-weight: 400; font-display: swap; }
[data-series="shanhai"] .fx-name,
[data-series="shanhai"] .detail-head .kz-name { font-family: "Kazhen Title", "Noto Serif TC", "Songti TC", serif; font-weight: 900; }
[data-series="shanhai"] .detail-info,
[data-series="shanhai"] .fx-text .fx-src,
[data-series="shanhai"] .fx-text .fx-quote { font-family: "Kazhen Body", "Noto Serif TC", "Songti TC", serif; }
/* 注音：每字一個，置中在字的正上方，與字之間留一道氣口。
 * 不用原生 <ruby>（Safari 與 Chrome 行高、對齊不同，Safari 也不讓 rt 定位；長拼音如 huáng 還會把字撐開）：
 * 每個字 .kz-ch 是 inline-block，上方用 padding 預留「拼音字級＋間距」的固定高度，拼音 .kz-py 絕對定位在這塊預留空間裡、水平置中。
 * 高度只跟 em 有關，字型換上來前後不跳版；拼音比字寬也不會把字距撐開。
 * --py 拼音字級（相對卡名字級）、--pg 拼音與字的間距。 */
.kz-name { --py: .35em; --pg: .14em; display: inline-block; line-height: 1; white-space: nowrap; letter-spacing: 0; }
.kz-name .kz-ch { display: inline-block; position: relative; padding-top: calc(var(--py) + var(--pg)); line-height: 1; margin-right: .08em; }
.kz-name .kz-ch:last-child { margin-right: 0; }
.kz-name .kz-py { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; white-space: nowrap;
  font-family: "Kazhen Body", "Noto Serif TC", serif; font-weight: 400; font-size: var(--py); line-height: 1; letter-spacing: -.01em; text-align: center;
  color: #e6d9bb; -webkit-text-fill-color: #e6d9bb; }
.detail-head b .kz-name { --py: .42em; --pg: .16em; font-size: 1.5rem; }
.detail-head b .kz-name .kz-ch { margin-right: .16em; }
.detail-head b .kz-name .kz-ch:last-child { margin-right: 0; }
.detail-head b .kz-name .kz-py { color: #cfc2a4; -webkit-text-fill-color: #cfc2a4; }

/* ── 極簡首頁（v67）：一屏無捲動；陣營區 flex 吃剩餘高度 ── */
#app.title-screen.home {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) 0 0;
  box-sizing: border-box;
  max-width: 560px;
}
/* 次頁仍可捲（編輯／挑戰內容較長） */
#app.home-subpage {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  max-width: 560px;
}
@media (min-width: 600px) {
  #app.title-screen.home { height: calc(100dvh - 44px); max-height: calc(100dvh - 44px); }
  #app.home-subpage { min-height: calc(100dvh - 44px); }
}

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 8px;
  padding-right: 56px; /* 避開加大的靜音鈕 */
  flex-shrink: 0;
}
.home-brand { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-brand h1 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: .18em;
  padding-left: .18em;
  line-height: 1.2;
  color: var(--bronze-hi, #e9cf8b);
  text-shadow: 0 2px 0 #3a2208, 0 0 20px rgba(255,170,80,.3);
}
.home-sub { font-size: .7rem; color: var(--muted); letter-spacing: .06em; line-height: 1.25; }
.home-top-links { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.home-icon {
  appearance: none; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(176,138,62,.55);
  background: linear-gradient(180deg, rgba(74,53,25,.7), rgba(43,29,13,.85));
  color: var(--bronze-hi, #e9cf8b);
  font-size: .78rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.2);
}
.home-icon.ghost {
  background: transparent;
  border-color: rgba(176,138,62,.4);
  color: var(--muted);
}
/* 首頁靜音鈕與頂欄對齊、略放大 */
body:has(#app.title-screen.home) .mute {
  width: 40px; height: 40px;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  font-size: 1.05rem;
}
.home-sec {
  padding: 4px 14px 3px;
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--muted);
  flex-shrink: 0;
  line-height: 1.25;
}

/* 陣營：中段四宮格＋全旗 contain；flex 吃剩餘高度，消除底空白 */
.home-factions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 2px 10px 0;
  flex: 1 1 0; /* 頂欄／牌組／CTA／底列定高後，剩餘全給四宮格 */
  min-height: 0;
}
.home-fac {
  appearance: none;
  font: inherit;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid rgba(176,138,62,.45) !important;
  background: #120806 !important;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.4);
  transition: border-color .15s, transform .12s, box-shadow .15s, filter .12s;
}
.home-fac.on {
  border-color: var(--fc, var(--bronze-hi, #e9cf8b)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 0 2px color-mix(in srgb, var(--fc, #b08a3e) 72%, transparent),
    0 4px 14px rgba(0,0,0,.45),
    0 0 16px color-mix(in srgb, var(--fc, #b08a3e) 28%, transparent);
}
.home-fac .fac-banner {
  /* scenic bg fills edges; cover fills the tile; flag stays centered so side-crop hits scenery not the flag. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.home-fac.on .fac-banner {
  filter: brightness(1.04) saturate(1.05);
}
.home-fac .fac-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  width: auto;
  padding: 18px 6px 7px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(8,4,2,.45) 36%,
    rgba(8,4,2,.92) 100%);
  pointer-events: none;
}
.home-fac .fac-name {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-indent: .16em;
  color: #fff6e4;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.85);
  line-height: 1.15;
}
.home-fac .fac-trait {
  font-size: .68rem;
  font-weight: 700;
  color: #ffe2a0;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9);
  line-height: 1.2;
  max-width: 100%;
  opacity: 1;
}
.home-fac .fac-seal {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 900;
  color: #1a0c06;
  background: linear-gradient(145deg, var(--fc, #e9cf8b), #5a4219);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  opacity: .94;
  line-height: 1;
}
@media (hover: hover) {
  .home-fac:not(.on):hover { filter: brightness(1.05); transform: translateY(-1px); }
}
.home-fac:not(:disabled):active { transform: scale(.98); }

/* 牌組一行 */
.home-deck {
  margin: 8px 10px 0;
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: 7px;
  border: 1px solid rgba(176,138,62,.4);
  background: linear-gradient(180deg, rgba(40,22,12,.75), rgba(18,10,6,.9));
  box-shadow: inset 0 1px 0 rgba(255,230,170,.08);
  flex-shrink: 0;
}
.home-deck-left { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.home-deck-name { font-size: .75rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.home-deck-hint { font-size: .62rem; color: var(--muted); line-height: 1.2; }
.home-deck-warn { font-size: .6rem; color: #f0937c; }
.home-deck-ok { font-size: .6rem; color: var(--jade); }
.home-deck-edit {
  appearance: none; font: inherit; background: none; border: 0;
  color: var(--bronze-hi, #e9cf8b); font-size: .7rem; font-weight: 700;
  text-decoration: none; border-bottom: 1px solid rgba(233,207,139,.35);
  white-space: nowrap; padding: 0 0 1px; cursor: pointer;
}

/* 兩大 CTA：探險／約戰（加高加顯） */
.home-modes {
  margin: 8px 10px 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 auto;
}
.home-cta {
  appearance: none; font: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 54px;
  padding: 13px 16px; border-radius: 10px;
  border: 1px solid #e2a35c;
  background: linear-gradient(180deg, #b0452f, #7a2716);
  color: #fff4e0; text-align: left; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.35), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.4);
}
.home-cta.secondary {
  border-color: var(--bronze, #b08a3e);
  background: linear-gradient(180deg, #4a3519, #2b1d0d);
  color: #f4e6c4;
}
.home-cta-title { display: block; font-size: 1.08rem; font-weight: 900; letter-spacing: .22em; text-indent: .22em; line-height: 1.15; }
.home-cta-desc { display: block; font-size: .68rem; opacity: .85; margin-top: 3px; letter-spacing: .02em; font-weight: 500; line-height: 1.15; }
.home-cta-arrow { font-size: 1.25rem; opacity: .75; color: var(--bronze-hi, #e9cf8b); }
.home-cta:not(:disabled):active { transform: translateY(1px) scale(.99); }
.home-err { margin: 2px 10px 0; font-size: .72rem; flex-shrink: 0; }

/* 底列四格：卡牌／卡包／教學／預留（加高） */
.home-foot {
  margin-top: 8px;
  padding: 4px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  flex: 0 0 auto;
}
.home-tile {
  appearance: none; font: inherit; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 46px; padding: 10px 4px; border-radius: 9px;
  border: 1px solid rgba(176,138,62,.5);
  background: linear-gradient(180deg, rgba(74,53,25,.65), rgba(28,16,8,.9));
  color: #f0d894; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-indent: .12em;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.14), 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer; user-select: none;
}
a.home-tile:hover { color: #fff4e0; border-color: rgba(233,207,139,.65); }
button.home-tile:not(:disabled):active,
a.home-tile:active { transform: translateY(1px) scale(.98); }
.home-tile-tut.done {
  border-color: rgba(176,138,62,.28);
  color: var(--muted, #9a8b6e);
}
.home-tile-muted {
  border-style: dashed;
  border-color: rgba(176,138,62,.22);
  background: rgba(18,10,6,.45);
  color: rgba(154,139,110,.55);
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.home-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze-hi, #e9cf8b);
  box-shadow: 0 0 5px rgba(233,207,139,.8);
  flex-shrink: 0;
}
.tut-nudge {
  margin: 0 0 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(201,162,79,.18);
  color: #e9cf8b;
  font-size: .78rem;
  font-weight: 600;
}

/* 矮螢幕（SE 等）：再壓 CTA／標籤，陣營區多留空間 */
@media (max-height: 720px) {
  .home-top { padding: 8px 12px 6px; padding-right: 52px; }
  .home-brand h1 { font-size: 1.12rem; }
  .home-sub { display: none; }
  .home-sec { padding: 2px 12px 2px; font-size: .58rem; }
  .home-icon { min-width: 36px; height: 32px; font-size: .72rem; }
  .home-cta { padding: 10px 12px; min-height: 44px; }
  .home-cta-title { font-size: .95rem; }
  .home-cta-desc { display: none; }
  .home-modes { gap: 5px; margin-top: 4px; }
  .home-tile { min-height: 40px; padding: 7px 2px; font-size: .74rem; }
  .home-deck { margin-top: 3px; padding: 4px 8px; }
  .home-deck-hint { display: none; }
  .home-factions { gap: 4px; padding: 0 8px; }
  .home-fac .fac-meta { padding: 14px 4px 5px; }
  .home-fac .fac-trait { font-size: .6rem; }
  .home-fac .fac-name { font-size: .74rem; }
  .home-fac .fac-seal { width: 16px; height: 16px; font-size: .55rem; top: 4px; right: 4px; }
}

/* 次頁共用 */
.page-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 10px; padding-right: 52px;
  flex-shrink: 0;
}
.page-back {
  appearance: none; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid rgba(176,138,62,.5);
  background: linear-gradient(180deg, rgba(74,53,25,.6), rgba(43,29,13,.8));
  color: var(--bronze-hi, #e9cf8b); font-size: 1.2rem; cursor: pointer;
}
.page-head h2 {
  margin: 0; font-size: 1.1rem; font-weight: 900;
  letter-spacing: .14em; color: var(--bronze-hi, #e9cf8b);
  text-shadow: 0 1px 0 #3a2208;
}
.page-body {
  flex: 1; overflow-y: auto;
  padding: 4px 14px 24px;
  -webkit-overflow-scrolling: touch;
}
.lead-note {
  font-size: .78rem; color: var(--muted);
  margin: 0 0 14px; line-height: 1.55;
}
.deck-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.home-chip {
  appearance: none; font: inherit;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(176,138,62,.4);
  background: rgba(20,10,5,.5); color: #c4a87a;
  font-size: .75rem; cursor: pointer;
}
.home-chip.on {
  border-color: var(--bronze-hi, #e9cf8b);
  color: var(--bronze-hi, #e9cf8b);
  background: rgba(176,138,62,.18);
}
.home-chip.warn { border-style: dashed; opacity: .75; }
.home-chip.dim { opacity: .55; }
.deck-summary {
  padding: 12px; border-radius: 10px;
  border: 1px solid rgba(176,138,62,.4);
  background: linear-gradient(180deg, rgba(40,22,12,.8), rgba(18,10,6,.92));
  margin-bottom: 14px; line-height: 1.55;
}
.deck-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; gap: 8px;
}
.deck-sum-row b { color: var(--bronze-hi, #e9cf8b); font-size: .95rem; }
.deck-summary .muted { font-size: .75rem; margin: .2rem 0; }
.deck-summary .ok, .deck-summary .err { font-size: .78rem; margin: .35rem 0 0; }
.card-grid.deck-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
/* 預覽＝戰場同款 .tile（框、底圖＋主體、戰力圈、稀有箔），只縮小 */
.deck-preview .preview-card {
  position: relative;
  min-width: 0;
}
.deck-preview .tile {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  flex: none;
}
.deck-preview .tile-name { font-size: clamp(.55rem, 2.6vw, .72rem); }
.deck-preview .tile-pow { font-size: clamp(.62rem, 2.8vw, .78rem); min-width: 1.3em; height: 1.3em; }
.deck-preview .tile-ab { font-size: .45rem; }
.deck-preview .qty {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  font-size: .62rem; font-weight: 700;
  background: rgba(0,0,0,.72); color: var(--bronze-hi, #e9cf8b);
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(176,138,62,.45);
  pointer-events: none;
}
.sticky-bar {
  position: sticky; bottom: 0;
  margin: 16px -14px -24px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, rgba(20,10,6,.95) 30%);
  display: flex; gap: 8px;
}
.sticky-bar .btn { flex: 1; text-align: center; }

/* 挑戰領袖列表 */
.challenge-list.home-chal {
  display: flex; flex-direction: column; gap: 10px;
  grid-template-columns: unset;
}
.chal {
  appearance: none; font: inherit; color: inherit;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(176,138,62,.4);
  background: linear-gradient(180deg, rgba(40,22,12,.75), rgba(18,10,6,.9));
  cursor: pointer; text-align: left; width: 100%;
}
.chal .thumb {
  width: 56px; height: 72px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(176,138,62,.5); flex-shrink: 0;
  background: #120806; position: relative;
  display: grid; place-items: center;
}
.chal .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.chal .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chal .who {
  font-size: .95rem; font-weight: 900; color: #fff4e0; letter-spacing: .08em;
}
.chal .fac-name {
  font-size: .75rem; color: var(--fc, var(--bronze, #b08a3e)); margin-top: 2px;
}
.chal .note {
  font-size: .7rem; color: var(--muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chal .status {
  font-size: .7rem; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(176,138,62,.4); color: #c4a87a; white-space: nowrap;
}
.chal.done .status {
  border-color: rgba(120,180,100,.5); color: #9dca7a;
  background: rgba(60,100,40,.2);
}


/* ══ 探險：滿版地圖（漫遊）＋底部紙條（看一眼）＋滿版場景（走進） ══ */
/* 探險不坐在紫檀木板上：地圖貼齊視窗，四周只留淡暗角 */
#app.explore-screen {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: #120806;
  box-shadow: none;
}
#app.explore-screen > .explore-map-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.explore-map-wrap {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  background: #120806;
}
.explore-map-wrap:active { cursor: grabbing; }
.explore-map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 90px 24px rgba(12,6,2,.5);
}

/* 四角浮動元件：左上返回＋區名；右上進度（讓開固定在右上角的靜音鈕） */
#app.explore-screen > .explore-hud {
  position: absolute;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: calc(max(8px, env(safe-area-inset-right)) + 44px);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.explore-hud > * { pointer-events: auto; }
.explore-back {
  appearance: none;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(176,138,62,.7);
  background: rgba(24,12,6,.78);
  color: #f4e6c4;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0 3px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.explore-title {
  margin: 0;
  padding: 6px 12px 7px;
  border-radius: 6px;
  border: 1px solid rgba(176,138,62,.55);
  background: rgba(24,12,6,.72);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff1d6;
  text-shadow: 0 1px 0 #3a2208;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  white-space: nowrap;
}
.explore-prog {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(176,138,62,.5);
  background: rgba(24,12,6,.72);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--bronze-hi, #e9cf8b);
  white-space: nowrap;
}

/* 底部浮層（傳聞列、紙條）共用：置中、限寬、避開安全區 */
#app.explore-screen > .explore-rumor,
#app.explore-screen > .explore-peek {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(460px, calc(100% - 20px));
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(176,138,62,.55);
  background: linear-gradient(180deg, rgba(62,38,20,.94), rgba(24,14,8,.97));
  box-shadow: inset 0 1px 0 rgba(233,207,139,.1), 0 10px 30px rgba(0,0,0,.5);
}
.explore-rumor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.explore-rumor-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: #f0e2c4;
}
.explore-rumor-k {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  border: 1px solid rgba(176,138,62,.55);
  color: var(--bronze-hi, #e9cf8b);
  background: rgba(176,138,62,.14);
  vertical-align: 1px;
}
.explore-legacy {
  flex-shrink: 0;
  font-size: .62rem;
  color: var(--muted, #a89070);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .75;
}

.explore-peek { padding: 12px 14px 12px; }
.explore-peek.enter { animation: explore-peek-in .26s ease-out both; }
@keyframes explore-peek-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.explore-peek-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
/* 人物圖是 3:4 畫布中間的 16:9 畫面：16:9 框＋cover 剛好取到那一段 */
.explore-peek-face {
  width: 104px; aspect-ratio: 16 / 9; flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px; border: 1px solid rgba(176,138,62,.55);
  background: #120806;
}
.explore-peek-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.explore-peek-who b {
  font-size: 1rem; font-weight: 900;
  letter-spacing: .06em; color: #fff1d6;
  text-shadow: 0 1px 0 #3a2208;
}
.explore-peek-who .muted { font-size: .74rem; }
.explore-peek-tag {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .62rem;
  letter-spacing: .1em;
  border: 1px solid rgba(176,138,62,.55);
  color: var(--bronze-hi, #e9cf8b);
}
.explore-peek-tag.done { border-color: rgba(120,180,100,.5); color: #9dca7a; }
.explore-peek-lore {
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: #e8d6b4;
}
.explore-peek-actions { display: flex; gap: 8px; margin-top: 12px; }
.explore-peek-actions .btn { flex: 1; }
.explore-peek.landmark { padding-right: 40px; }
.explore-peek.landmark .explore-peek-who { margin-bottom: 6px; }
.explore-peek-x {
  appearance: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--muted, #a89070);
  font: inherit; font-size: 1.2rem; line-height: 1;
  cursor: pointer;
}

/* 走進：滿版場景蓋住地圖（地圖仍掛在底下，回來時相機不動） */
#app.explore-screen > .explore-scene {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #120806;
}
.explore-scene.enter { animation: explore-scene-in .4s ease-out both; }
@keyframes explore-scene-in {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}
.explore-scene-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
  z-index: 0;
}
.explore-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,6,2,.55) 0%, transparent 22%, transparent 48%, rgba(12,6,2,.92) 82%),
    radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(12,6,2,.6) 100%);
}
.explore-scene > :not(.explore-scene-bg) { position: relative; z-index: 1; }
.explore-scene-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) calc(max(8px, env(safe-area-inset-right)) + 44px) 0 max(10px, env(safe-area-inset-left));
}
.explore-scene-place { display: flex; flex-direction: column; gap: 1px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.explore-scene-place b { font-size: 1.05rem; font-weight: 900; letter-spacing: .12em; color: #fff1d6; }
.explore-scene-place span { font-size: .72rem; letter-spacing: .1em; color: var(--bronze-hi, #e9cf8b); }
.explore-scene-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 10px;
}
.explore-scene-npc {
  display: block;
  width: min(100%, 760px);
  max-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(176,138,62,.6);
  box-shadow: 0 0 0 4px rgba(24,12,6,.55), 0 18px 40px rgba(0,0,0,.6);
}
.explore-talk {
  margin: 0 auto max(12px, env(safe-area-inset-bottom));
  width: min(680px, calc(100% - 20px));
  box-sizing: border-box;
  padding: 12px 16px 12px;
  border-radius: 12px;
  border: 1px solid rgba(176,138,62,.6);
  background: linear-gradient(180deg, rgba(52,32,16,.95), rgba(22,12,6,.97));
  box-shadow: inset 0 1px 0 rgba(233,207,139,.12), 0 10px 30px rgba(0,0,0,.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.explore-talk.end { cursor: default; }
.explore-talk-name {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #2a140a;
  background: linear-gradient(180deg, #e9cf8b, #b08a3e);
}
.explore-talk-line {
  margin: 0;
  min-height: 4.8em;
  font-size: .95rem;
  line-height: 1.6;
  color: #f4e6c4;
}
.explore-talk-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.explore-talk-meta { font-size: .7rem; letter-spacing: .06em; }
.explore-talk-actions { display: flex; gap: 8px; margin-left: auto; }
.explore-talk-actions .btn { min-width: 6em; }

.explore-map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9cf8b;
  letter-spacing: .2em;
  cursor: default;
}
.explore-map-loading .btn { margin-left: .6em; letter-spacing: 0; }
.explore-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
/* 豎排題簽銷釘：電腦繪製短名；圖集座標是山腳，題簽大半懸在山腳下，不蓋山形 */
.explore-pin {
  appearance: none; font: inherit; color: inherit;
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -22%);
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  touch-action: none;
}
.explore-pin-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: radial-gradient(ellipse, rgba(233,207,139,.18), transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.explore-pin-slip {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 5px 6px;
  min-width: 1.55em;
  border-radius: 3px;
  /* 木框＋舊紙題簽 */
  background:
    linear-gradient(180deg, rgba(255,236,200,.14), transparent 35%),
    linear-gradient(165deg, #3a2814 0%, #2a1a0c 45%, #1c1208 100%);
  border: 1px solid rgba(176,138,62,.62);
  box-shadow:
    inset 0 0 0 1px rgba(80,50,20,.55),
    inset 0 1px 0 rgba(255,220,160,.12),
    0 2px 6px rgba(0,0,0,.4);
}
/* 地圖上的字一律用圖集的山海圖集明體（檢視器載入；含生僻字），不與思源宋體混搭；只有常規字重 */
.explore-map-wrap { font-family: "Shanhai Atlas Ming", serif; font-synthesis: none; }
.explore-pin-slip-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.15;
  color: #fff1d6;
  text-shadow: 0 1px 0 #2a1608;
  /* 兩字題簽高度穩定；三字也不過高 */
  max-height: 4.2em;
}
.explore-pin-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 2px;
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: #e9cf8b;
  background: rgba(90, 28, 22, .88);
  border: 1px solid rgba(200,120,80,.55);
  box-shadow: inset 0 0 0 1px rgba(40,12,8,.5);
}
.explore-pin.open .explore-pin-seal {
  color: #ffe6a8;
  border-color: rgba(233,207,139,.7);
  animation: explore-seal-pulse 2.6s ease-in-out infinite;
}
.explore-pin.easy.open .explore-pin-seal {
  color: #cfe8b8;
  background: rgba(36, 56, 24, .92);
  border-color: rgba(120,180,100,.55);
}
.explore-pin.mid.open .explore-pin-seal {
  color: #f0df9a;
  background: rgba(70, 48, 14, .92);
  border-color: rgba(200,170,60,.55);
}
.explore-pin.hard.open .explore-pin-seal {
  color: #f0c09a;
  background: rgba(70, 36, 16, .92);
  border-color: rgba(200,120,60,.55);
}
.explore-pin.boss.open .explore-pin-seal {
  color: #f0a8a8;
  background: rgba(80,20,16,.95);
  border-color: rgba(200,80,80,.6);
}
.explore-pin.done .explore-pin-seal {
  color: #cfe8b8;
  background: rgba(30,50,20,.92);
  border-color: rgba(120,180,100,.55);
  animation: none;
}
.explore-pin.done .explore-pin-slip {
  border-color: rgba(120,160,90,.5);
  opacity: .92;
}
.explore-pin.done .explore-pin-slip-text { color: #e4f0d4; }
.explore-pin.on .explore-pin-slip {
  border-color: rgba(255,220,140,.9);
  box-shadow:
    inset 0 0 0 1px rgba(100,70,24,.5),
    0 0 0 2px rgba(233,207,139,.35),
    0 0 14px rgba(255,200,100,.28);
}
.explore-pin.on .explore-pin-slip-text { color: #ffe6a8; }
.explore-pin.on .explore-pin-seal {
  animation: none;
  box-shadow: 0 0 0 1px rgba(233,207,139,.35);
}

/* 山名地標拉遠時（圖集未加 atlas-near）：只留墨字與紙色光暈，不用木框，山形看得見；放大才是下方的題簽 */
.atlas-root:not(.atlas-near) .explore-pin.landmark { filter: none; opacity: 1; }
.atlas-root:not(.atlas-near) .explore-pin.landmark .explore-pin-slip {
  padding: 2px 0 1px; min-width: 0; border: 0; border-top: 2px solid rgba(70, 90, 80, .7);
  border-radius: 0; background: transparent; box-shadow: none;
}
.atlas-root:not(.atlas-near) .explore-pin.landmark .explore-pin-slip-text {
  color: #2a2118; font-weight: 400;
  text-shadow: 0 0 2px #f6efd9, 0 0 4px #f6efd9, 0 0 6px rgba(246, 239, 217, .9);
}
.atlas-root:not(.atlas-near) .explore-pin.landmark .explore-pin-seal,
.atlas-root:not(.atlas-near) .explore-pin.landmark .explore-pin-halo { display: none; }
.atlas-root:not(.atlas-near) .explore-pin.landmark.on .explore-pin-slip { background: rgba(255, 236, 190, .85); }

/* 山名地標題簽：略小、印泥偏墨青，讓五個可訪 NPC 更醒目 */
.explore-pin.landmark {
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  opacity: .88;
}
.explore-pin.landmark .explore-pin-slip {
  padding: 5px 3px 4px;
  min-width: 1.35em;
  border-color: rgba(140,120,80,.45);
  background:
    linear-gradient(180deg, rgba(255,236,200,.08), transparent 35%),
    linear-gradient(165deg, #2e2418 0%, #1e160e 45%, #14100a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(60,45,25,.5),
    0 1px 4px rgba(0,0,0,.35);
}
.explore-pin.landmark .explore-pin-slip-text {
  font-size: .7rem;
  letter-spacing: .16em;
  color: #e8dcc0;
  font-weight: 400;
  max-height: 3.6em;
}
.explore-pin.landmark .explore-pin-seal {
  width: 1em;
  height: 1em;
  font-size: .4rem;
  color: #c8d0c0;
  background: rgba(28, 40, 32, .9);
  border-color: rgba(100,130,100,.4);
  animation: none;
}
.explore-pin.landmark .explore-pin-halo {
  width: 28px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(180,160,120,.1), transparent 72%);
}
.explore-pin.landmark.on .explore-pin-slip {
  border-color: rgba(200,180,120,.75);
  opacity: 1;
}
@media (min-width: 600px) {
  .explore-pin.landmark .explore-pin-slip-text { font-size: .68rem; }
}
@media (max-width: 399px) {
  .explore-pin.landmark .explore-pin-slip-text { font-size: .56rem; letter-spacing: .12em; }
}

/* 輕指引：題簽墨暈呼吸（非霓虹） */
.explore-pin.hinted:not(.done):not(.on) .explore-pin-halo {
  width: 44px;
  height: 64px;
  background: radial-gradient(ellipse, rgba(210,170,90,.4), rgba(176,138,62,.1) 55%, transparent 78%);
  animation: explore-hint-breathe 3.6s ease-in-out infinite;
}
.explore-pin.hinted:not(.done) .explore-pin-slip {
  border-color: rgba(210,170,90,.78);
  box-shadow:
    inset 0 0 0 1px rgba(80,50,16,.45),
    0 0 0 1px rgba(180,140,60,.25),
    0 0 16px rgba(180,140,60,.28);
  animation: explore-slip-breathe 3.6s ease-in-out infinite;
}
.explore-pin.hinted:not(.done):not(.on) .explore-pin-seal {
  animation: explore-hint-mark 3.6s ease-in-out infinite;
}
@keyframes explore-seal-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(40,12,8,.5), 0 0 4px rgba(233,180,80,.15); }
  50% { box-shadow: inset 0 0 0 1px rgba(40,12,8,.5), 0 0 8px rgba(233,180,80,.4); }
}
@keyframes explore-hint-breathe {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .95; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes explore-slip-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes explore-hint-mark {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(40,12,8,.5), 0 0 4px rgba(200,160,70,.2); }
  50% { box-shadow: inset 0 0 0 1px rgba(40,12,8,.5), 0 0 10px rgba(200,160,70,.45); }
}

@media (min-width: 600px) {
  .explore-pin-slip-text { font-size: .78rem; letter-spacing: .24em; }
  .explore-pin-slip { padding: 8px 6px 7px; min-width: 1.65em; }
}
@media (max-width: 399px) {
  .explore-pin-slip-text { font-size: .66rem; letter-spacing: .18em; }
  .explore-pin-slip { padding: 6px 4px 5px; min-width: 1.4em; }
}

.explore-face img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block;
}
.explore-reward { margin-top: .4rem; }
.explore-gift { text-align: center; }
.explore-gift-kicker {
  margin: .2rem 0 .15rem; font-size: .72rem; letter-spacing: .14em;
  color: var(--bronze-hi, #e9cf8b); text-transform: none;
}
.explore-gift-line {
  margin: .35rem auto .7rem; max-width: 22em;
  font-size: .9rem; line-height: 1.55; color: #f0e2c4;
  font-style: italic;
}
.explore-gift-card { justify-content: center; margin: .4rem 0 .8rem; }
.explore-gift-accept { min-width: 8em; margin: .2rem auto 0; display: inline-flex; }
.explore-gift .reward-card {
  animation: explore-gift-in .55s ease-out both;
}
@keyframes explore-gift-in {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to { opacity: 1; transform: none; }
}