html,body{overscroll-behavior:none;background:#5d8f3c;height:100%;margin:0;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#game{position:fixed;inset:0}#game canvas{touch-action:none;display:block}#ui-root{pointer-events:none;z-index:10;position:fixed;inset:0}#ui-root>*{pointer-events:auto}.hud-top-left{flex-wrap:wrap;align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px}.chip{color:#3a3a38;background:#fffffff2;border-radius:10px;align-items:center;gap:6px;padding:7px 13px;font-size:13px;font-weight:600;display:flex;box-shadow:0 2px 8px #0000002e}.chip .era-village{color:#2f7d32}.chip .era-town{color:#b06e10}.chip .era-city{color:#1c5fa8}.hud-top-right{gap:6px;display:flex;position:absolute;top:12px;right:12px}.speed-btn{color:#6b6b66;cursor:pointer;background:#ffffffd1;border:none;border-radius:9px;min-width:38px;height:34px;font-size:13px;font-weight:700;box-shadow:0 2px 8px #00000026}.speed-btn:hover{background:#fff}.speed-btn.active{color:#fff;background:#3a7d2c}.speed-btn.pause-btn{font-size:15px}.speed-btn.pause-btn.paused{color:#fff;background:#d98e3a;animation:1.6s ease-in-out infinite pause-pulse}@keyframes pause-pulse{0%,to{box-shadow:0 2px 8px #00000026}50%{box-shadow:0 0 0 5px #d98e3a40}}.speed-btn.reset{color:#a04030;font-size:15px}.tooltip-card{color:#3a3a38;pointer-events:none;z-index:30;background:#fff;border-radius:12px;min-width:190px;max-width:250px;padding:10px 12px;font-size:12.5px;display:none;position:absolute;box-shadow:0 6px 22px #00000040}.tooltip-card .tt-head{align-items:center;gap:9px;margin-bottom:6px;display:flex}.tooltip-card .tt-avatar{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:700;display:flex}.tooltip-card .tt-name{font-size:13.5px;font-weight:700}.tooltip-card .tt-meta{color:#8a8a84;font-size:11.5px}.tooltip-card .tt-line{color:#5a5a55;padding:1.5px 0}.tooltip-card .tt-hint{color:#b0b0aa;margin-top:5px;font-size:11px;font-style:italic}.panel{background:#fffdf8f7;border-radius:14px;flex-direction:column;width:280px;display:flex;position:absolute;top:12px;bottom:12px;overflow:hidden;box-shadow:0 8px 30px #0000004d}.panel-left{left:12px}.panel-right{top:56px;right:12px}.panel-head{border-bottom:1px solid #eee4d4;align-items:center;gap:8px;padding:12px 14px 8px;display:flex}.panel-title{color:#3a3a38;flex:1;font-size:14px;font-weight:700}.panel-close{cursor:pointer;color:#6b6b66;background:#f1e8d8;border:none;border-radius:8px;width:26px;height:26px;font-size:13px;font-weight:700}.panel-body{color:#4a4a45;flex:1;padding:10px 14px;font-size:12.5px;overflow-y:auto}.panel-tabs{gap:4px;padding:8px 12px 0;display:flex}.panel-tab{color:#8a8275;cursor:pointer;background:#f1e8d8;border:none;border-radius:8px 8px 0 0;flex:1;padding:7px 0;font-size:12px;font-weight:700}.panel-tab.active{color:#fff;background:#3a7d2c}.profile-head{align-items:center;gap:12px;margin-bottom:10px;display:flex}.profile-avatar{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:54px;height:54px;font-size:18px;font-weight:800;display:flex;box-shadow:0 3px 8px #0003}.profile-name{color:#33332f;font-size:16px;font-weight:800}.profile-meta{color:#8a8a84;margin-top:2px;font-size:12px}.profile-section{text-transform:uppercase;letter-spacing:.06em;color:#a89c84;margin:12px 0 5px;font-size:11px;font-weight:700}.kin-chip{color:#3a6b2a;cursor:pointer;background:#eef3e6;border:1px solid #d6e3c4;border-radius:14px;margin:2px 3px 2px 0;padding:3px 10px;font-size:11.5px;font-weight:600;display:inline-block}.kin-chip:hover{background:#ddebc9}.kin-role{color:#a0a098;margin-right:2px;font-size:10.5px}.follow-btn{color:#fff;cursor:pointer;background:#3a7d2c;border:none;border-radius:9px;width:100%;margin-top:10px;padding:9px 0;font-size:13px;font-weight:700}.follow-btn.following{background:#b06e10}.timeline-item{border-bottom:1px dashed #efe6d4;gap:8px;padding:4px 0;display:flex}.timeline-year{color:#b0a890;flex:none;width:34px;padding-top:1px;font-size:11px;font-weight:700}.feed-item{cursor:pointer;border-bottom:1px solid #f3ecdc;border-radius:6px;gap:8px;padding:6px 2px;display:flex}.feed-item:hover{background:#f6efdf}.feed-dot{border-radius:50%;flex:none;width:9px;height:9px;margin-top:4px}.feed-year{color:#b0a890;flex:none;width:34px;padding-top:1px;font-size:11px;font-weight:700}.feed-text{flex:1}.toast-wrap{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#232320e0;border-radius:10px;padding:8px 16px;font-size:12.5px;font-weight:600;animation:.25s ease-out toast-in;box-shadow:0 4px 14px #0000004d}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.era-banner{color:#8a5a10;text-align:center;pointer-events:none;background:linear-gradient(#fff8e8,#ffeec2);border:3px solid #e8c878;border-radius:18px;padding:18px 42px;font-size:26px;font-weight:800;animation:4s ease-in-out forwards banner;position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);box-shadow:0 10px 40px #00000059}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.05)}18%{transform:translate(-50%,-50%)scale(1)}82%{opacity:1}to{opacity:0}}.collapse-btn{color:#5a5a55;cursor:pointer;background:#ffffffe6;border:none;border-radius:9px;height:34px;padding:0 12px;font-size:12px;font-weight:700;position:absolute;top:58px;right:12px;box-shadow:0 2px 8px #00000026}#splash{z-index:200;opacity:1;background:linear-gradient(#6db8e8 0%,#a8dcf2 42%,#ffe9b8 58%,#7fc95a 58.2%,#58923c 100%);justify-content:center;align-items:center;transition:opacity .65s;display:flex;position:absolute;inset:0;overflow:hidden}#splash.splash-out{opacity:0;pointer-events:none}.splash-sun{background:#ffe9a8;border-radius:50%;width:110px;height:110px;animation:4s ease-in-out infinite sun-breathe;position:absolute;top:9%;right:14%;box-shadow:0 0 80px 36px #ffe28cbf}@keyframes sun-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.splash-hill{background:#6aab48;border-radius:50% 50% 0 0;width:120%;height:34%;position:absolute;bottom:-12%;left:-10%}.splash-card{text-align:center;max-width:560px;padding:0 24px;position:relative}.splash-logo{letter-spacing:-.03em;color:#fff;text-shadow:0 4px #3a5c1e73,0 10px 30px #00000040;font-size:clamp(56px,13vw,96px);font-weight:900;animation:.7s cubic-bezier(.34,1.56,.64,1) logo-pop}.splash-logo span{color:#ffd24a}@keyframes logo-pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.splash-tag{color:#fff;text-shadow:0 2px 8px #0000004d;margin-top:4px;font-size:clamp(14px,3.4vw,18px);font-weight:600}.era-collage{perspective:700px;justify-content:center;align-items:flex-end;min-height:130px;margin:16px auto 20px;display:flex}.era-c-card{transform:rotate(calc((var(--i) - 1) * 7deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 6px));animation:.6s cubic-bezier(.34,1.56,.64,1) backwards card-in,5s ease-in-out infinite card-float;animation-delay:calc(var(--i) * .18s), calc(var(--i) * 1.1s);z-index:calc(2 - (var(--i) - 1) * (var(--i) - 1));background:#fffdf6;border-radius:14px;margin:0 -14px;padding:10px 10px 22px;position:relative;box-shadow:0 10px 26px #00000047}.era-c-card img{width:auto;height:96px;display:block}.era-c-card span{letter-spacing:.08em;text-transform:uppercase;color:#8a7448;font-size:11px;font-weight:800;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}@keyframes card-in{0%{opacity:0;transform:translateY(26px)scale(.7)}}@keyframes card-float{0%,to{margin-top:0}50%{margin-top:-7px}}.parade{pointer-events:none;height:120px;position:absolute;bottom:3.5vh;left:0;right:0}.walker-wrap{animation:walk-across var(--dur) linear infinite;animation-delay:var(--delay);position:absolute;bottom:0;left:0}.walker-wrap img{filter:drop-shadow(0 6px 6px #0000002e);width:auto;height:96px;animation:walker-bob var(--bobd) ease-in-out infinite alternate;transform-origin:50% 90%;display:block}@keyframes walk-across{0%{transform:translate(-140px)}to{transform:translate(calc(100vw + 60px))}}@keyframes walker-bob{0%{transform:rotate(-3.5deg)translateY(0)}to{transform:rotate(3.5deg)translateY(-3px)}}.splash-play{cursor:pointer;color:#fff;background:linear-gradient(#58b53c,#3a8d28);border:none;border-radius:16px;margin:10px auto 0;padding:15px 46px;font-size:clamp(17px,4vw,21px);font-weight:800;transition:transform .1s;display:block;box-shadow:0 6px #2c6b1e,0 12px 28px #0000004d}.splash-play:active{transform:translateY(4px);box-shadow:0 2px #2c6b1e,0 6px 14px #0000004d}.splash-secondary{cursor:pointer;color:#3a5c1e;background:#ffffffe0;border:none;border-radius:12px;margin:12px auto 0;padding:9px 22px;font-size:13.5px;font-weight:700;display:block;box-shadow:0 3px 10px #00000026}.splash-hint{color:#fffffff2;text-shadow:0 1px 4px #0000004d;margin-top:20px;font-size:12px;font-weight:600}@media (width<=700px){.hud-top-left{gap:5px;max-width:60vw;top:8px;left:8px}.chip{border-radius:8px;padding:5px 9px;font-size:11px}.hud-top-right{flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:38vw;top:8px;right:8px}.speed-btn{border-radius:7px;min-width:30px;height:28px;font-size:11px}.panel{width:min(300px,86vw);top:76px;bottom:8px}.panel-left{left:8px}.panel-right,.collapse-btn{top:76px;right:8px}.tooltip-card{max-width:70vw;font-size:12px}.era-banner{width:78vw;padding:12px 22px;font-size:18px}.toast{max-width:86vw;padding:6px 12px;font-size:11.5px}.panel-body{font-size:12px}}