﻿/* Tàng Kinh Các — thành gốc Ngọa Long, giao diện tra cứu riêng. */
.tkc-home { --tkc-ink:#f2eee5; --tkc-muted:#acb7b0; --tkc-gold:#d9b775; --tkc-line:rgba(229,201,151,.25); background:#101b1b; color:var(--tkc-ink); overflow-x:hidden; }
.tkc-home header.site-header { z-index:50 !important; }
.tkc-home #site-header { z-index:50 !important; }
.tkc-home .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tkc-home .tkc-skip { position:absolute; z-index:1000; left:16px; top:-70px; padding:12px 18px; background:#e5c98f; color:#162421; }
.tkc-home .tkc-skip:focus { top:8px; }
.tkc-home main { overflow:hidden; }
.tkc-home button,.tkc-home input,.tkc-home select { font:inherit; }

.tkc-intro { min-height:384px; position:relative; overflow:visible; z-index:8; display:flex; align-items:center; padding:73px max(4vw,calc((100vw - 1440px)/2)) 57px; isolation:isolate; background:linear-gradient(115deg,rgba(16,28,27,.98) 0%,rgba(22,37,35,.96) 51%,rgba(24,42,43,.75) 100%),url('/assets/news/bg_news.webp') center 26%/cover; border-bottom:1px solid rgba(220,185,125,.2); }
.tkc-intro::before { content:''; pointer-events:none; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 78% 36%,rgba(195,139,70,.19),transparent 34%),linear-gradient(90deg,transparent,rgba(0,0,0,.15)); }
.tkc-intro-copy { width:min(900px,100%); position:relative; }
.tkc-kicker { color:#c8aa70; font:700 11px/1.4 var(--sans); letter-spacing:.25em; text-transform:uppercase; }
.tkc-kicker-line { display:inline-block; width:28px; height:1px; background:currentColor; vertical-align:middle; margin-right:10px; }
.tkc-intro h1 { position:relative; display:inline-block; margin:15px 0 15px; font:400 clamp(58px,7.3vw,124px)/.96 var(--calli); letter-spacing:.015em; color:#f8f2e7; text-shadow:0 6px 32px rgba(0,0,0,.2); }
.tkc-intro h1 em { color:#dfbe82; font-style:normal; }
.tkc-title-seal { position:absolute; left:calc(100% + 13px); top:6px; display:grid; align-content:center; justify-items:center; width:32px; height:53px; background:#9b4735; border:1px solid rgba(255,226,186,.55); color:#f8ebd6; font:15px/1.3 Georgia,serif; text-align:center; box-shadow:0 2px 16px #0005; transform:rotate(4deg); }
.tkc-lead { width:min(690px,100%); font-size:15px; line-height:1.75; color:#bac7bf; }
.tkc-intro-note { margin-top:14px; color:#9baaa5; font-size:11px; letter-spacing:.07em; }
.tkc-tour-start { pointer-events:auto; display:inline-flex; align-items:center; gap:16px; margin-top:24px; padding:10px 2px; color:#ebc985; border-bottom:1px solid #ddb979; font:700 12px var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.tkc-tour-start span { font-size:19px; line-height:1; transition:transform .2s; }
.tkc-tour-start:hover span { transform:translate(4px,-4px); }
.tkc-home.is-touring .tkc-intro { opacity:0; pointer-events:none; transition:opacity .45s ease; }
.tkc-intro-mark { position:absolute; right:max(4vw,calc((100vw - 1440px)/2)); top:113px; width:154px; height:154px; border:1px solid rgba(220,184,118,.3); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; color:#d0b47d; box-shadow:inset 0 0 0 12px #192a2960,inset 0 0 0 13px #c4a47024; transform:rotate(-12deg); }
.tkc-intro-mark span { font:40px/1.1 var(--calli); }
.tkc-intro-mark b { font:700 10px var(--sans); letter-spacing:.22em; }
.tkc-global-search { display:flex; align-items:center; position:relative; width:min(660px,100%); height:52px; margin-top:23px; border:1px solid rgba(227,203,157,.5); background:rgba(9,21,21,.73); box-shadow:0 12px 28px #06101145; }
.tkc-global-search:focus-within { border-color:#e9cb8a; box-shadow:0 0 0 3px #e9cb8a24,0 12px 28px #06101145; }
.tkc-search-glyph { font:30px Georgia,serif; color:#d8b77a; margin:0 14px 0 17px; transform:rotate(-30deg); }
.tkc-global-search input { flex:1; min-width:0; height:100%; color:#f5f0e6; background:transparent; border:0; outline:0; font-size:14px; }
.tkc-global-search input::placeholder { color:#899a94; }
.tkc-global-search kbd { margin:0 13px; color:#a5afa9; border:1px solid #b6bfac50; border-radius:3px; width:22px; height:22px; display:grid; place-items:center; font-size:13px; }
.tkc-global-search>button { height:100%; padding:0 20px; flex:none; background:#d4b779; color:#172323; font-weight:700; font-size:13px; }
.tkc-global-search>button:hover { background:#efcf8d; }
.tkc-global-results { position:absolute; z-index:50; top:calc(100% + 4px); left:-1px; right:-1px; max-height:316px; overflow:auto; background:#182825; border:1px solid #b5a0766b; box-shadow:0 24px 50px #020907b8; }
.tkc-global-results[hidden] { display:none; }
.tkc-global-results>button,.tkc-global-results>p { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:11px 17px; border-bottom:1px solid #ffffff17; text-align:left; color:#f1ece1; font-size:14px; }
.tkc-global-results>button:hover,.tkc-global-results>button.is-active { background:#ddbb7929; }
.tkc-global-results small { color:#c3ae88; white-space:nowrap; font-size:11px; }

.tkc-city { position:relative; height:clamp(490px,56vw,690px); background:#243e3e; isolation:isolate; overflow:hidden; border-bottom:1px solid #b69a6666; }
.tkc-scene { position:absolute; inset:0; z-index:1; overflow:hidden; outline:none; cursor:grab; touch-action:none; }
.tkc-scene.is-dragging { cursor:grabbing; }
.tkc-world { position:absolute; left:0; top:0; width:3141px; height:1504px; transform-origin:0 0; will-change:transform; user-select:none; }
.tkc-tiles { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1047px); grid-template-rows:repeat(2,752px); }
.tkc-tiles img { width:1047px; height:752px; max-width:none; }
.tkc-world-glow { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#1b34310a,#142e2a16 82%,#05141357),radial-gradient(ellipse at 50% 28%,transparent 27%,#0a191f50 95%); }
.tkc-world-glow::before { content:''; position:absolute; left:40px; top:170px; width:780px; height:420px; transform:rotate(-12deg); background:repeating-linear-gradient(175deg,transparent 0 19px,#e5f4e608 21px 23px,transparent 25px 44px); mask-image:radial-gradient(ellipse,#0005,transparent 72%); animation:tkc-water 15s linear infinite; }
.tkc-ambience { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.tkc-ambience::before { content:''; position:absolute; left:-300px; top:220px; width:1800px; height:280px; background:radial-gradient(ellipse,rgba(228,240,216,.15),transparent 68%); filter:blur(28px); opacity:.42; animation:tkc-fog 20s ease-in-out infinite alternate; }
.tkc-firefly { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#ffe7a1; box-shadow:0 0 9px 5px #ffe79a8c,0 0 24px 12px #ffe79a3d; opacity:0; animation:tkc-firefly 5.5s ease-in-out infinite; }
.tkc-forge-smoke { position:absolute; z-index:2; width:170px; height:190px; background:radial-gradient(ellipse at 50% 76%,#e0e9d365,transparent 58%); filter:blur(19px); opacity:0; animation:tkc-smoke 6s ease-out infinite; }
@keyframes tkc-firefly { 0%,100% { opacity:0; transform:translate(0,8px) scale(.5); } 40%,65% { opacity:.72; transform:translate(15px,-12px) scale(1); } }
@keyframes tkc-smoke { 0% { opacity:0; transform:translateY(0) scale(.65); } 24% { opacity:.46; } 90%,100% { opacity:0; transform:translate(34px,-130px) scale(1.7); } }
@keyframes tkc-fog { from { transform:translate(-100px,0); } to { transform:translate(220px,18px); } }
@keyframes tkc-water { from { transform:rotate(-12deg) translateY(0); } to { transform:rotate(-12deg) translateY(55px); } }
.tkc-buildings { position:absolute; inset:0; }
.tkc-building { position:absolute; z-index:2; border:0; background:transparent; padding:0; width:340px; height:300px; cursor:pointer; transform:translate(-50%,-100%); color:#f6edda; touch-action:none; }
.tkc-building::before { content:''; position:absolute; left:50%; bottom:4px; width:60%; height:20%; border-radius:50%; transform:translateX(-50%); background:#f0bb6d3b; filter:blur(32px); opacity:0; transition:opacity .3s; }
.tkc-building img { position:absolute; left:50%; bottom:9px; width:auto; height:auto; max-height:100%; max-width:100%; object-fit:contain; transform:translateX(-50%); filter:drop-shadow(3px 14px 9px #04171385); transition:filter .3s,transform .3s; pointer-events:none; }
.tkc-building:hover img,.tkc-building:focus-visible img,.tkc-building[aria-current="true"] img { transform:translateX(-50%) translateY(-12px); filter:drop-shadow(0 0 10px #eac582b8) drop-shadow(2px 15px 10px #0417138a); }
.tkc-building:hover::before,.tkc-building:focus-visible::before,.tkc-building[aria-current="true"]::before { opacity:1; }
.tkc-building-label { position:absolute; z-index:2; left:50%; bottom:-41px; transform:translateX(-50%); display:flex; align-items:center; flex-direction:column; gap:3px; white-space:nowrap; padding:7px 15px 8px; background:#142422ec; border:1px solid #e3bb77ad; box-shadow:0 7px 23px #06161290; pointer-events:none; }
.tkc-building-label b { color:#f5e9d5; font:700 17px/1.2 var(--calli); letter-spacing:.07em; }
.tkc-building-label small { color:#d2b985; font:700 9px var(--sans); letter-spacing:.15em; }
.tkc-building[aria-current="true"] .tkc-building-label { background:#70502f; border-color:#f0ce8f; }
.tkc-building[aria-current="true"] .tkc-building-label { animation:tkc-beacon 2.2s ease-in-out infinite; }
@keyframes tkc-beacon { 50% { box-shadow:0 0 0 8px #f1d08628,0 0 35px #f1d0868a; } }
.tkc-city-shade { position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 24px 50px #081a1a57,inset 0 -50px 90px #081a1ad1; background:linear-gradient(90deg,#06171752,transparent 20%,transparent 80%,#06171739); }
.tkc-city-caption { position:absolute; z-index:3; top:22px; left:max(3vw,calc((100vw - 1470px)/2)); display:flex; gap:10px; align-items:center; color:#f6e4c2; font:700 11px/1 var(--sans); letter-spacing:.2em; text-shadow:0 2px 6px #000; pointer-events:none; }
.tkc-small-rule { width:22px; height:1px; background:#e9c987; }
.tkc-city-caption-sub { color:#e0d8c8; letter-spacing:0; font-weight:400; margin-left:10px; }
.tkc-city-controls { position:absolute; z-index:4; right:max(3vw,calc((100vw - 1470px)/2)); top:20px; display:grid; grid-template-columns:repeat(3,37px); background:#132522dd; border:1px solid #dac08b80; box-shadow:0 4px 20px #08141388; }
.tkc-city-controls button { height:37px; border-right:1px solid #dac08b4d; color:#f6eedf; font-size:21px; line-height:1; }
.tkc-city-controls button:last-child { border-right:0; }
.tkc-city-controls button:hover { background:#e7c38330; }
.tkc-audio { position:absolute; z-index:4; right:max(3vw,calc((100vw - 1470px)/2)); top:69px; padding:8px 11px; color:#f2e5c7; background:#132522dd; border:1px solid #dac08b80; font-size:11px; letter-spacing:.03em; }
.tkc-audio:hover,.tkc-audio[aria-pressed="true"] { background:#b4915957; }
.tkc-tour-caption { position:absolute; z-index:5; left:max(4vw,calc((100vw - 1440px)/2)); top:74px; min-width:285px; padding:18px 24px 15px; background:#101f1de6; border-left:2px solid #e0ba76; box-shadow:0 8px 30px #071515ac; backdrop-filter:blur(10px); pointer-events:auto; }
.tkc-tour-caption[hidden] { display:none; }
.tkc-tour-caption span { display:block; color:#d5b376; font:700 10px var(--sans); letter-spacing:.23em; }
.tkc-tour-caption strong { display:block; margin-top:5px; color:#f2e9d8; font:400 31px/1.1 var(--calli); }
.tkc-tour-caption small { display:block; margin-top:5px; color:#acbdb2; font:11px var(--sans); }
.tkc-tour-caption button { margin-top:15px; color:#e0c99f; font:11px var(--sans); border-bottom:1px solid #d2ba8a78; }
.tkc-dock { position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%); width:min(calc(100% - 32px),1000px); display:grid; grid-template-columns:repeat(7,1fr); background:#102321e9; border:1px solid #d5b7808f; box-shadow:0 9px 36px #020e0ed1, inset 0 1px #ffffff16; backdrop-filter:blur(12px); }
.tkc-dock button { min-height:64px; min-width:0; padding:6px 7px; border-right:1px solid #e6d0a42b; text-align:center; color:#e3ddd1; line-height:1.15; transition:background .2s,color .2s; }
.tkc-dock button:last-child { border:0; }
.tkc-dock button:hover,.tkc-dock button[aria-current="true"] { background:#c8a86d31; color:#f8d993; }
.tkc-dock button b { display:block; font:700 14px/1.3 var(--calli); letter-spacing:.01em; }
.tkc-dock button small { display:block; margin-top:3px; color:#a4b0a8; font:10px/1.2 var(--sans); }

.tkc-atlas { width:min(1440px,calc(100% - 8vw)); margin:auto; padding:88px 0 120px; }
.tkc-atlas-head { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-bottom:31px; border-bottom:1px solid var(--tkc-line); }
.tkc-atlas-head h2 { margin-top:10px; font:400 clamp(38px,4.5vw,66px)/1.1 var(--calli); color:#f4ead7; }
.tkc-atlas-head>p { max-width:330px; color:#9faaa4; font-size:13px; line-height:1.7; }
.tkc-atlas-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:5%; }
.tkc-atlas-item { display:flex; width:100%; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:25px 1px; border-bottom:1px solid var(--tkc-line); color:inherit; }
.tkc-atlas-item:hover { background:#d9b7750c; }
.tkc-atlas-item:hover .tkc-atlas-arrow { transform:translateX(6px); color:#f3d79e; }
.tkc-atlas-index { flex:none; color:#c8a96e; font:18px var(--serif); }
.tkc-atlas-main { flex:1; min-width:0; }
.tkc-atlas-main b { display:block; font:400 26px/1.15 var(--calli); color:#f0e7d7; }
.tkc-atlas-main small { color:#9faba3; font:12px/1.5 var(--sans); }
.tkc-atlas-arrow { flex:none; font:24px var(--serif); color:#aa956e; transition:transform .2s,color .2s; }
.tkc-source-note { margin-top:26px; color:#82918b; font-size:11px; letter-spacing:.04em; }

.tkc-drawer-backdrop { position:fixed; z-index:100; inset:0; background:#07121191; backdrop-filter:blur(2px); }
.tkc-drawer { position:fixed; z-index:101; top:0; right:0; height:100dvh; width:min(565px,100vw); display:flex; flex-direction:column; background:#142321; color:#eee8da; border-left:1px solid #cfad76b4; box-shadow:-25px 0 65px #030b0bae; transform:translateX(105%); visibility:hidden; pointer-events:none; transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s; }
.tkc-drawer.is-open { transform:none; visibility:visible; pointer-events:auto; }
.tkc-drawer-grip { display:none; }
.tkc-drawer-head { display:flex; justify-content:space-between; align-items:start; gap:20px; flex:none; padding:32px 30px 23px; background:linear-gradient(130deg,#1f3632,#122320); border-bottom:1px solid #b8a0735c; }
.tkc-drawer-kicker { color:#d3b47e; font-size:10px; font-weight:700; letter-spacing:.21em; }
.tkc-drawer-head h2 { margin:5px 0 6px; color:#f6e9d4; font:400 38px/1.1 var(--calli); }
.tkc-drawer-sub { color:#aab7ae; font-size:12px; line-height:1.5; }
.tkc-drawer-close { flex:none; width:36px; height:36px; border:1px solid #d6bd8d78; border-radius:50%; font:28px/30px var(--sans); color:#ead9bd; }
.tkc-drawer-close:hover { background:#d3b47e2f; }
.tkc-drawer-body { flex:1; min-height:0; padding:0 25px 26px; overflow-y:auto; overscroll-behavior:contain; }
.tkc-drawer-tabs { display:flex; overflow-x:auto; gap:3px; padding:18px 0 12px; scrollbar-width:thin; }
.tkc-drawer-tabs button { flex:none; padding:8px 11px; border:1px solid #c9bb9a3d; color:#b8c1b8; white-space:nowrap; font-size:11px; }
.tkc-drawer-tabs button[aria-selected="true"] { background:#c9ab73; color:#152420; border-color:#e5cc93; font-weight:700; }
.tkc-drawer-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(126px,36%); gap:7px; }
.tkc-drawer-filters.has-two-facets { grid-template-columns:minmax(0,1fr) minmax(100px,29%) minmax(100px,29%); }
.tkc-drawer-filters input,.tkc-drawer-filters select { width:100%; min-width:0; height:41px; padding:0 11px; border:1px solid #bfaa805f; border-radius:0; outline:0; background:#0d1b1a; color:#f4ebdc; font-size:12px; }
.tkc-drawer-filters input:focus,.tkc-drawer-filters select:focus { border-color:#e9c888; }
.tkc-drawer-filters input::placeholder { color:#8b9890; }
.tkc-result-count { padding:16px 2px 8px; color:#b6a782; font-size:11px; }
.tkc-record-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.tkc-record { display:flex; align-items:center; gap:10px; min-width:0; min-height:73px; padding:8px; text-align:left; border:1px solid #bca87f42; color:#eae4d8; background:#1a2b28; }
.tkc-record:hover,.tkc-record[aria-current="true"] { border-color:#d8b875; background:#2b3930; }
.tkc-record img,.tkc-record-placeholder { flex:none; width:48px; height:48px; object-fit:contain; background:#10201e; border:1px solid #c7b4862e; }
.tkc-record-placeholder { display:grid; place-items:center; color:#ba9e69; font:24px var(--calli); }
.tkc-record span { display:block; min-width:0; }
.tkc-record b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#f1e6d3; font:600 15px/1.3 var(--calli); }
.tkc-record small { display:block; margin-top:3px; color:#a6b1a6; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:10px var(--sans); }
.tkc-empty { grid-column:1/-1; color:#b3bcb2; padding:20px 8px; font-size:13px; }
.tkc-more { display:block; width:100%; margin:14px 0 0; padding:11px; border:1px solid #c6a76f91; color:#e7cb98; font-size:12px; }
.tkc-more:hover { background:#c6a76f26; }
.tkc-record-detail { margin-top:18px; padding:19px; background:#1e302b; border:1px solid #c7ae7b81; box-shadow:inset 0 1px #fff1; }
.tkc-record-detail:not([hidden]) { margin-bottom:14px; animation:tkc-detail-in .28s ease-out both; }
@keyframes tkc-detail-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.tkc-detail-head { display:flex; gap:14px; align-items:start; }
.tkc-detail-head img { width:72px; height:72px; object-fit:contain; background:#0e1d1c; border:1px solid #c8b38652; }
.tkc-detail-head h3 { font:400 27px/1.18 var(--calli); color:#f6e9d2; margin:0; }
.tkc-detail-head p { margin:2px 0 0; font-size:11px; color:#bdad8d; }
.tkc-detail-description { margin:15px 0 0; color:#d5d9d0; font-size:12px; line-height:1.65; white-space:pre-line; }
.tkc-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; margin-top:13px; border-top:1px solid #ffffff1d; }
.tkc-detail-grid div { min-width:0; display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #ffffff17; font-size:11px; }
.tkc-detail-grid dt { color:#aab7aa; }
.tkc-detail-grid dd { margin:0; color:#e9d5ae; text-align:right; overflow-wrap:anywhere; }
.tkc-detail-extra { margin-top:14px; color:#c9d3c6; font-size:11px; line-height:1.6; }
.tkc-detail-extra strong { color:#dfc593; }
.tkc-detail-extra p { margin-top:6px; }
.tkc-detail-link { display:inline-block; margin-top:14px; padding:8px 12px; color:#14221e; background:#d3b77f; font-size:11px; font-weight:700; }
.tkc-drawer-all { flex:none; display:flex; justify-content:space-between; align-items:center; padding:15px 30px; background:#d3b77e; color:#15231e; font-size:13px; font-weight:700; }
.tkc-drawer-all:hover { background:#ead095; }

@media (min-width:701px) {
  .tkc-home main { position:relative; }
  .tkc-intro { position:absolute; top:0; left:0; z-index:5; width:min(750px,65vw); min-height:0; height:calc(100svh - 69px); max-height:950px; display:block; padding:clamp(90px,12vh,135px) 0 0 max(4vw,calc((100vw - 1440px)/2)); background:linear-gradient(90deg,#081b1ad8 0%,#081b1aa7 47%,#081b1a00 100%); border:0; pointer-events:none; }
  .tkc-intro::before { display:none; }
  .tkc-intro-copy { width:min(630px,95%); pointer-events:none; }
  .tkc-global-search { pointer-events:auto; }
  .tkc-intro h1 { font-size:clamp(58px,6.5vw,94px); }
  .tkc-intro-mark { display:none; }
  .tkc-city { height:calc(100svh - 69px); min-height:680px; max-height:950px; }
  .tkc-city-caption { left:auto; right:max(3vw,calc((100vw - 1470px)/2)); top:156px; }
  .tkc-city-caption-sub { display:none; }
  .tkc-city-controls { top:28px; }
  .tkc-audio { top:77px; }
  .tkc-dock { bottom:23px; }
}

@media (max-width:1100px) {
  .tkc-intro-mark { display:none; }
  .tkc-intro { padding:65px 5vw 48px; }
  .tkc-atlas { width:calc(100% - 10vw); }
}
@media (max-width:700px) {
  .tkc-intro { min-height:0; padding:45px 20px 35px; }
  .tkc-intro h1 { font-size:clamp(51px,13vw,75px); margin:13px 0; }
  .tkc-title-seal { width:23px; height:39px; font-size:10px; left:calc(100% + 5px); }
  .tkc-kicker { font-size:9px; letter-spacing:.18em; }
  .tkc-lead { font-size:13px; line-height:1.65; }
  .tkc-global-search { height:47px; margin-top:17px; }
  .tkc-global-search kbd { display:none; }
  .tkc-global-search>button { padding:0 12px; font-size:12px; }
  .tkc-global-search input { font-size:12px; }
  .tkc-search-glyph { margin:0 9px 0 11px; font-size:26px; }
  .tkc-city { height:min(660px,62svh); min-height:405px; }
  .tkc-city-caption { left:16px; top:17px; font-size:9px; }
  .tkc-city-caption-sub { display:none; }
  .tkc-city-controls { top:12px; right:12px; grid-template-columns:repeat(3,32px); }
  .tkc-city-controls button { height:32px; }
  .tkc-audio { top:56px; right:12px; padding:6px 8px; font-size:10px; }
  .tkc-tour-caption { left:14px; top:103px; min-width:0; max-width:calc(100% - 28px); padding:12px 16px; }
  .tkc-tour-caption strong { font-size:24px; }
  .tkc-dock { left:0; bottom:0; transform:none; width:100%; overflow-x:auto; display:flex; border-left:0; border-right:0; scrollbar-width:none; }
  .tkc-dock button { min-width:91px; min-height:58px; }
  .tkc-dock button b { font-size:11px; }
  .tkc-dock button small { font-size:9px; }
  .tkc-atlas { width:calc(100% - 40px); padding:58px 0 75px; }
  .tkc-atlas-head { align-items:start; flex-direction:column; gap:7px; }
  .tkc-atlas-head h2 { font-size:42px; }
  .tkc-atlas-head>p { max-width:100%; }
  .tkc-atlas-list { grid-template-columns:1fr; }
  .tkc-atlas-item { padding:17px 0; }
  .tkc-atlas-main b { font-size:21px; }
  .tkc-drawer { top:auto; bottom:0; width:100%; height:87dvh; border-left:0; border-top:1px solid #cfad76b4; border-radius:18px 18px 0 0; transform:translateY(105%); }
  .tkc-drawer-grip { display:block; position:relative; width:100%; height:22px; background:transparent; flex:none; touch-action:none; }
  .tkc-drawer-grip::after { content:''; position:absolute; top:8px; left:calc(50% - 21px); width:42px; height:4px; border-radius:4px; background:#d5bb84a0; }
  .tkc-drawer-head { padding:11px 17px 15px; }
  .tkc-drawer-head h2 { font-size:30px; }
  .tkc-drawer-body { padding:0 15px 16px; }
  .tkc-drawer-filters.has-two-facets { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tkc-drawer-filters.has-two-facets input { grid-column:1/-1; }
  .tkc-drawer-all { padding:13px 17px; }
}
@media (max-width:400px) {
  .tkc-intro h1 { font-size:49px; }
  .tkc-record-list { grid-template-columns:1fr; }
  .tkc-detail-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .tkc-home *, .tkc-home *::before,.tkc-home *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* City View follows the actual H5Cfg anchors and original sprite sizes. */
.tkc-tour-start:disabled { opacity:.55; cursor:wait; }
.tkc-building { transform:translate(-50%,-50%); }
.tkc-building[hidden] { display:none; }
.tkc-building img { inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; transform:none; }
.tkc-building:hover img,.tkc-building:focus-visible img,.tkc-building[aria-current="true"] img { transform:translateY(-8px); }
.tkc-building-label { bottom:-26px; opacity:0; transform:translate(-50%,6px); transition:opacity .18s,transform .18s; }
.tkc-building:hover .tkc-building-label,.tkc-building:focus-visible .tkc-building-label,.tkc-building[aria-current="true"] .tkc-building-label { opacity:1; transform:translate(-50%,0); }
.tkc-building-info { position:absolute; z-index:6; right:max(3vw,calc((100vw - 1470px)/2)); bottom:103px; width:min(408px,calc(100vw - 32px)); max-height:min(61vh,650px); overflow-y:auto; padding:20px 22px 19px; background:linear-gradient(145deg,#233c32f4,#102522f5); border:1px solid #e4c489b0; color:#f1e9d8; box-shadow:0 20px 55px #06120fcb,inset 0 1px #ffffff1c; backdrop-filter:blur(12px); scrollbar-width:thin; scrollbar-color:#a98955 #183029; }
.tkc-building-info[hidden] { display:none; }
.tkc-building-info>button:first-child { position:absolute; right:11px; top:8px; width:30px; height:30px; color:#e7d5b5; font:23px var(--sans); }
.tkc-building-info>span { display:block; padding-right:24px; color:#e5bf7d; font:700 10px var(--sans); letter-spacing:.17em; }
.tkc-building-info h2 { margin:7px 0 9px; font:400 35px/1.05 var(--calli); }
.tkc-building-info p { margin:0; color:#d2ddd1; font:12px/1.6 var(--sans); }
.tkc-building-info #buildingInfoLevel { color:#e4c893; margin-bottom:9px; }
.tkc-topic-head { margin:17px 0 9px; padding-top:13px; border-top:1px solid #d2ba854b; color:#e3bd7c; font:700 10px/1.4 var(--sans); letter-spacing:.14em; }
.tkc-topic-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.tkc-topic-list button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:56px; padding:9px 10px; text-align:left; background:#a9936122; border:1px solid #c8ab725e; color:#e8ddc9; transition:background .2s,border-color .2s; }
.tkc-topic-list button:hover,.tkc-topic-list button:focus-visible { background:#d3b2703f; border-color:#e7cb93; }
.tkc-topic-list button b { display:block; color:#f4e4c4; font:600 13px/1.25 var(--calli); }
.tkc-topic-list button small { display:block; margin-top:4px; color:#abbcae; font:10px/1.2 var(--sans); }
.tkc-topic-list button i { color:#e3be7b; font:16px var(--sans); }
.tkc-topic-note { margin:14px 0 0!important; color:#a5b7ab!important; font:11px/1.55 var(--sans)!important; }
.tkc-city-milestone { margin:8px 0 0!important; padding:9px 10px; background:#b4995f24; border-left:2px solid #d5b77a; font:11px/1.5 var(--sans)!important; }
.tkc-city-milestone b { color:#efd4a1; }
.tkc-milestone-list summary { padding:10px 2px; color:#e3be7b; font:700 12px var(--sans); cursor:pointer; }
.tkc-milestone-list summary:hover { color:#f7d99d; }
.tkc-dock { display:flex; overflow-x:auto; justify-content:flex-start; width:min(calc(100% - 32px),1200px); scrollbar-width:thin; scrollbar-color:#bb9963 #18312b; }
.tkc-dock button { flex:0 0 114px; min-height:61px; }
.tkc-city-caption { top:155px; }
@media (max-width:700px) {
  .tkc-building-info { left:12px; right:12px; bottom:68px; width:auto; max-height:calc(100% - 175px); padding:14px 16px; }
  .tkc-building-info h2 { font-size:28px; }
  .tkc-building-info p { font-size:11px; }
  .tkc-topic-list { grid-template-columns:1fr 1fr; }
  .tkc-topic-list button { min-height:50px; }
  .tkc-dock { width:100%; }
  .tkc-dock button { flex-basis:105px; }
  .tkc-city-caption { top:16px; }
  .tkc-tour-caption { top:170px; }
}
