:root{--bg:#faf6ee;--bg-surface:#fffdf8;--text-primary:#2b2118;--text-secondary:#6b5d4f;--line-soft:#ddd2c0;--accent:#8a5a1e;--gold:#c99a2e;--silver:#9aa0a6;--bronze:#a86a3c;--plain:#7a6a55;--plate:#efe6d3;--plate-edge:#b8a37e;--card:#fffdf8;--focus:#8a5a1e}
html[data-theme="dark"]{--bg:#171310;--bg-surface:#211a15;--text-primary:#f2e8d8;--text-secondary:#c9b8a3;--line-soft:#4a3d30;--accent:#e3b34e;--plate:#2a2119;--plate-edge:#8a6f45;--card:#241c16;--focus:#e3b34e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text-primary);font:17px/1.6 Georgia,"Times New Roman",serif}
[hidden]{display:none!important}svg[hidden]{display:none}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:50}
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line-soft)}
.topbar-in{max-width:72rem;margin:0 auto;display:flex;gap:1rem;align-items:center;padding:.45rem 1rem;flex-wrap:wrap}
.home{font-weight:700;color:var(--text-primary);text-decoration:none}
.topbar nav{display:flex;gap:.9rem;flex-wrap:wrap}.topbar nav a{color:var(--text-secondary);text-decoration:none;font-size:.92rem}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--accent)}
.theme-btn,.lang-btn{margin-left:auto;border:1px solid var(--line-soft);background:var(--bg-surface);color:var(--text-primary);border-radius:999px;padding:.35rem .8rem;cursor:pointer;font:inherit;font-size:.9rem}
.lang-btn{margin-left:.4rem;text-decoration:none}
main{max-width:72rem;margin:0 auto;padding:0 1rem 3rem}
h1{font-size:clamp(1.7rem,4.5vw,2.7rem);line-height:1.15;margin:1.2rem 0 .5rem}
.deck{font-size:1.12rem;color:var(--text-secondary);max-width:44rem}
.stage-wrap{background:var(--bg-surface);border:1px solid var(--line-soft);border-radius:14px;padding:.8rem;margin:1rem 0}
canvas#map{width:100%;height:auto;display:block;border-radius:10px;background:var(--plate)}
.controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:.7rem 0}
.controls label{font-size:.92rem;color:var(--text-secondary)}
input[type="range"]{accent-color:var(--accent)}
button.chip,button.play,button.reset{border:1px solid var(--line-soft);background:var(--bg-surface);color:var(--text-primary);border-radius:999px;padding:.4rem .85rem;cursor:pointer;font:inherit;font-size:.92rem;min-height:40px}
button.chip[aria-pressed="true"]{background:var(--accent);color:var(--bg-surface);border-color:var(--accent)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:var(--text-secondary)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin-right:.3rem;border:1px solid var(--plate-edge)}
.card{border:1px solid var(--line-soft);background:var(--card);border-radius:12px;padding:1rem;margin:.8rem 0}
.card h3{margin:.1rem 0 .4rem}.muted{color:var(--text-secondary)}
table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{border-bottom:1px solid var(--line-soft);padding:.45rem .5rem;text-align:left;vertical-align:top}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.share-row{display:flex;gap:.5rem;align-items:center;margin:1rem 0;flex-wrap:wrap}
.share-row a,.share-row button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary);background:transparent;cursor:pointer;text-decoration:none;font-size:1rem}
.rail{position:fixed;right:10px;top:40%;display:flex;flex-direction:column;gap:.55rem;z-index:15}
.rail a{width:12px;height:12px;border-radius:50%;border:1px solid var(--accent);background:transparent;position:relative}
.rail a[aria-current="true"]{background:var(--accent)}
.rail a span{position:absolute;right:18px;top:-4px;background:var(--card);border:1px solid var(--line-soft);padding:.1rem .5rem;border-radius:6px;font-size:.8rem;display:none;white-space:nowrap;color:var(--text-primary)}
.rail a:hover span,.rail a:focus-visible span{display:block}
footer{border-top:1px solid var(--line-soft);padding:1.2rem 1rem;color:var(--text-secondary);font-size:.92rem;max-width:72rem;margin:0 auto}
footer a{color:var(--text-secondary)}
input[type="search"]{font:inherit;padding:.55rem .7rem;border:1px solid var(--line-soft);border-radius:8px;background:var(--bg-surface);color:var(--text-primary);min-width:min(320px,80vw)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:700px){.grid2{grid-template-columns:1fr}.rail{display:none}body{font-size:16px}.stage-wrap{padding:.5rem}h1{margin-top:.8rem}}
@media(pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}button.chip,button.play{min-height:44px}}
.stage-wrap{position:relative}
#seat-card{position:absolute;z-index:6;width:min(360px,calc(100% - 1rem));max-height:min(60vh,420px);overflow:auto;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.28);font-size:.92rem}
#seat-card table{font-size:.86rem}
.card{overflow-x:auto}
#seat-close{border:1px solid var(--line-soft);background:var(--bg-surface);color:var(--text-primary);border-radius:999px;width:32px;height:32px;cursor:pointer;font:inherit}
canvas#map{max-width:min(100%,calc(68vh / 0.735));margin:0 auto}
@media(max-width:700px){.topbar nav{display:none}.topbar-in{flex-wrap:nowrap}}
canvas#map{max-width:100%}
.stage-wrap{max-width:calc(76vh / 0.735 + 1.6rem);margin-left:auto;margin-right:auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
select{font:inherit;font-size:.92rem;padding:.4rem .6rem;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg-surface);color:var(--text-primary);min-height:40px}
@media(max-width:700px){.stage-wrap{max-width:none}}
figure.card{margin:.8rem 0}
svg.coh{width:100%;height:auto;display:block;max-width:44rem}
svg.coh .cl{fill:var(--text-primary);font-size:15px}
svg.coh .cv{fill:var(--text-secondary);font-size:13px}
svg.coh .bp{fill:var(--line-soft);stroke:var(--plate-edge)}
svg.coh .bm{fill:var(--gold)}
svg.coh .ba{fill:var(--plain)}
:root{--rural:#2f6b3a}html[data-theme="dark"]{--rural:#7fc48a}
.nw{white-space:nowrap}
.dot.ring{background:transparent;border:2px solid var(--rural)}
.stage-wrap{max-width:calc(64vh / 0.735 + 1.6rem)}
@media(max-width:700px){.stage-wrap{max-width:none}td,th{padding:.35rem .3rem;font-size:.86rem}}