:root{
  --ink:#211f19;--muted:#777164;--paper:#f8f3e8;--card:#fffdf7;--line:#ded5c5;
  --green:#426957;--green-dark:#29493c;--green-soft:#dce9dc;--gold:#d99a38;
  --orange:#c96e3f;--red:#b94b46;--blue:#5d7891;--shadow:0 18px 45px rgba(54,43,25,.13);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#d7d0c0;color:var(--ink);font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif}
button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(100%,680px);min-height:100vh;margin:auto;background:var(--paper);position:relative;padding-bottom:calc(84px + env(safe-area-inset-bottom));overflow:hidden;box-shadow:0 0 60px rgba(47,39,28,.18)}
.topbar{height:88px;padding:calc(18px + env(safe-area-inset-top)) 20px 12px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,243,232,.94);backdrop-filter:blur(18px);position:relative;z-index:30;border-bottom:1px solid rgba(74,64,49,.08)}
.wordmark{font-weight:950;letter-spacing:-.045em;font-size:20px}.region-label{font-size:11px;color:var(--muted);margin-top:2px;font-weight:650}.wallet-pill{display:flex;align-items:center;gap:7px;background:#fff3d8;color:#8a5a14;padding:8px 11px;border:1px solid #ecd39f;border-radius:999px;box-shadow:0 6px 18px rgba(132,91,22,.08)}.wallet-pill span{color:var(--gold)}.wallet-pill b{font-size:14px}
.screen{display:none;min-height:calc(100vh - 172px)}.screen.active{display:block}.town-sky{position:absolute;top:88px;left:0;right:0;height:190px;background:linear-gradient(#c9e5e5,#e7eee0);overflow:hidden}.cloud{position:absolute;width:72px;height:19px;background:rgba(255,255,255,.68);border-radius:50px}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:28px;height:28px;left:13px;bottom:3px}.cloud:after{width:36px;height:36px;right:10px;bottom:2px}.cloud-one{top:34px;left:8%;animation:drift 18s ease-in-out infinite alternate}.cloud-two{top:74px;right:5%;transform:scale(.7);animation:drift 22s ease-in-out infinite alternate-reverse}@keyframes drift{to{transform:translateX(28px)}}
.town-card{height:310px;position:relative;overflow:hidden;background:linear-gradient(180deg,#c9e5e5 0,#e7eee0 57%,#9caa7d 57%,#798b63 100%)}.sun-glow{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#fff4bd 0,rgba(255,240,170,.55) 38%,transparent 68%);right:-18px;top:-25px}.town-ground{position:absolute;left:-10%;right:-10%;height:105px;bottom:-42px;background:#c5af87;border-radius:50% 50% 0 0;box-shadow:inset 0 10px 0 rgba(255,255,255,.14)}
.building{position:absolute;width:174px;height:177px;left:48px;bottom:46px;z-index:3;filter:drop-shadow(0 15px 12px rgba(42,38,26,.2));transition:.5s transform}.building.level-two{transform:translateY(-8px) scale(1.04)}.shop-body{position:absolute;left:12px;right:12px;bottom:0;height:114px;background:#ede0c1;border:4px solid #4d4536;border-radius:3px}.awning{position:absolute;left:3px;right:3px;height:33px;top:47px;z-index:3;background:repeating-linear-gradient(90deg,#b95742 0 22px,#f3e3c4 22px 44px);border:4px solid #4d4536;border-radius:3px 3px 11px 11px;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}.building.level-two .awning{background:repeating-linear-gradient(90deg,#426957 0 22px,#f3e3c4 22px 44px)}.building-sign{position:absolute;top:0;left:18px;right:18px;height:46px;border:4px solid #4d4536;background:#f0bd68;border-radius:5px;display:grid;place-items:center;font-size:13px;font-weight:900;z-index:2}.building.level-two .building-sign{background:#f4cf77}.window{position:absolute;width:64px;height:50px;left:12px;bottom:19px;background:#9ec6c4;border:4px solid #4d4536;display:grid;grid-template-columns:1fr 1fr}.window i:first-child{border-right:2px solid #4d4536}.door{position:absolute;width:43px;height:70px;right:17px;bottom:0;background:#8b684c;border:4px solid #4d4536;border-bottom:0}.door:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#f0bd68;left:6px;top:31px}.building-level{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fff9e9;border:2px solid #4d4536;border-radius:99px;padding:4px 8px;font-size:9px;font-weight:900}
.shiba-wrap{position:relative;width:96px;height:126px}.map-shiba{position:absolute;right:45px;bottom:46px;z-index:5;animation:shiba-idle 3s ease-in-out infinite}.shiba{position:absolute;inset:0}.ear{position:absolute;top:4px;width:34px;height:48px;background:#262720;border:4px solid #171813;transform:rotate(20deg);clip-path:polygon(50% 0,100% 100%,0 100%);z-index:1}.ear:after{content:"";position:absolute;inset:12px 8px 3px;background:#b66b4b;clip-path:inherit}.ear.left{left:8px;transform:rotate(-20deg)}.ear.right{right:8px}.shiba-head{position:absolute;top:23px;left:8px;width:80px;height:72px;border-radius:45% 45% 48% 48%;background:#252720;border:4px solid #171813;z-index:2;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)}.brow{position:absolute;top:14px;width:21px;height:12px;border-radius:60% 60% 45% 45%;background:#b86e49}.brow.left{left:9px}.brow.right{right:9px}.eye{position:absolute;top:31px;width:7px;height:8px;border-radius:50%;background:#090a08}.eye.left{left:22px}.eye.right{right:22px}.muzzle{position:absolute;width:47px;height:32px;left:13px;bottom:3px;background:#f1e8d5;border-radius:48% 48% 52% 52%}.nose{position:absolute;top:5px;left:17px;width:13px;height:9px;background:#111;border-radius:60% 60% 45% 45%}.mouth{position:absolute;top:13px;left:22px;width:3px;height:10px;background:#28231d}.mouth:after{content:"";position:absolute;width:16px;height:8px;border-bottom:2px solid #28231d;border-radius:50%;left:-6px;top:4px}.shiba-body{position:absolute;left:20px;top:83px;width:58px;height:44px;border:4px solid #171813;border-radius:38% 45% 20% 20%;background:#282a22;z-index:1}.chest{position:absolute;left:14px;top:0;width:23px;height:35px;background:#eee5d1;clip-path:polygon(0 0,100% 0,78% 100%,22% 100%)}.tail{position:absolute;width:29px;height:33px;right:-22px;top:-12px;border:9px solid #292a23;border-left-color:transparent;border-radius:50%;transform:rotate(-22deg);z-index:-1}@keyframes shiba-idle{50%{transform:translateY(-3px) rotate(.5deg)}}
.speech-bubble{position:absolute;right:20px;top:24px;width:150px;background:#fffdf7;border:2px solid #3e3c33;border-radius:15px 15px 4px 15px;padding:11px 12px;font-size:11px;line-height:1.45;font-weight:700;z-index:6;box-shadow:0 10px 20px rgba(45,40,30,.09)}
.map-panel{position:relative;margin-top:-18px;border-radius:26px 26px 0 0;background:var(--paper);padding:25px 18px 32px;z-index:10;min-height:430px}.panel-heading,.page-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.panel-heading h1,.page-head h1{font-size:27px;line-height:1.05;letter-spacing:-.045em;margin:5px 0}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:var(--green);font-weight:900}.icon-button,.round-button{border:1px solid var(--line);background:var(--card);width:42px;height:42px;border-radius:50%;font-weight:900;color:var(--ink)}.icon-button.off{color:#aaa;background:#eee}
.route-map{position:relative;margin:22px 2px 20px;padding:4px 0}.route-map:before{content:"";position:absolute;left:28px;top:18px;bottom:18px;width:4px;background:repeating-linear-gradient(180deg,#b7aa92 0 10px,transparent 10px 17px);border-radius:8px}.route-node{position:relative;display:grid;grid-template-columns:60px 1fr auto;align-items:center;min-height:76px;padding:8px 4px}.node-marker{width:52px;height:52px;border-radius:18px;border:3px solid #c6bca9;background:#e8e0d2;display:grid;place-items:center;font-size:22px;position:relative;z-index:2;transition:.25s}.route-node.done .node-marker{background:var(--green);border-color:var(--green-dark);color:white}.route-node.current .node-marker{background:#f4c871;border-color:#5b4932;box-shadow:0 0 0 6px rgba(240,190,92,.24);transform:scale(1.06)}.route-node.future{opacity:.54}.route-node h3{font-size:14px;margin:0 0 3px}.route-node p{font-size:11px;color:var(--muted);margin:0;line-height:1.35}.node-status{font-size:10px;font-weight:850;color:var(--green);padding:5px 7px;border-radius:99px;background:var(--green-soft)}.route-node.future .node-status{display:none}
.primary-action,.secondary-action,.upgrade-action{width:100%;border:0;border-radius:17px;padding:15px 17px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:12px}.primary-action{background:var(--green);color:white;box-shadow:0 12px 25px rgba(52,92,73,.24)}.primary-action:active{transform:translateY(2px) scale(.99)}.primary-action i{font-style:normal}.upgrade-action{margin-top:10px;background:#efe4cc;color:#5f4c2f;border:1px solid #ddcfb4;flex-direction:column;gap:2px;padding:10px}.upgrade-action small{font-size:10px;opacity:.72}.upgrade-action:disabled{opacity:.46;cursor:not-allowed}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,680px);height:calc(68px + env(safe-area-inset-bottom));padding:7px 22px env(safe-area-inset-bottom);background:rgba(255,253,247,.94);backdrop-filter:blur(18px);border-top:1px solid rgba(62,53,40,.1);display:grid;grid-template-columns:repeat(3,1fr);z-index:80}.bottom-nav button{border:0;background:transparent;color:#9a9386;display:flex;flex-direction:column;align-items:center;gap:2px}.bottom-nav button span{font-size:22px}.bottom-nav button b{font-size:10px}.bottom-nav button.active{color:var(--green)}
.page-head{display:block;padding:32px 20px 18px}.page-head p{font-size:13px;line-height:1.65;color:var(--muted);margin:10px 0}.knowledge-grid{padding:0 18px 30px;display:grid;gap:10px}.knowledge-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;display:grid;grid-template-columns:1fr auto;align-items:center}.knowledge-card b{font-size:15px}.knowledge-card p{font-size:11px;color:var(--muted);margin:4px 0 0}.knowledge-card span{font-size:10px;padding:6px 8px;border-radius:99px;background:var(--green-soft);color:var(--green-dark);font-weight:800}.empty-card{padding:26px;background:var(--card);border:1px solid var(--line);border-radius:20px;color:var(--muted);line-height:1.6}
.profile-stats{margin:0 18px 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.profile-stats div{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:13px 5px;text-align:center}.profile-stats b{display:block;font-size:19px}.profile-stats span{font-size:9px;color:var(--muted)}.info-card{margin:10px 18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}.info-card.muted{background:#eee8dc}.info-card h2{font-size:18px;margin:6px 0}.info-card p{font-size:12px;line-height:1.65;color:var(--muted);margin:7px 0}.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee6d8}.setting-row b,.setting-row small{display:block}.setting-row small{font-size:10px;color:var(--muted);margin-top:3px}.switch{width:46px;height:26px;border:0;border-radius:99px;background:#c8c2b7;padding:3px}.switch i{display:block;width:20px;height:20px;border-radius:50%;background:white;transition:.2s}.switch.on{background:var(--green)}.switch.on i{transform:translateX(20px)}.secondary-action{margin-top:14px;background:#eee8dc;color:var(--ink);border:1px solid var(--line)}.sync-dot{width:11px;height:11px;border-radius:50%;background:#bbb}.sync-dot.online{background:#61a270;box-shadow:0 0 0 5px rgba(97,162,112,.12)}.sync-dot.pending{background:#e3a344}.sync-dot.offline{background:#aaa}
.event-layer,.settlement-layer{position:fixed;inset:0;z-index:150;background:rgba(29,25,19,.58);backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center}.event-layer.show,.settlement-layer.show{display:flex}.event-shell{width:min(100%,680px);max-height:96vh;min-height:74vh;background:var(--paper);border-radius:28px 28px 0 0;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;box-shadow:0 -25px 70px rgba(0,0,0,.22)}.event-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px}.event-head h2{font-size:18px;margin:3px 0}.event-kind{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:900}.event-symbol{width:42px;height:42px;border-radius:15px;background:#ebe2d0;display:grid;place-items:center;font-size:20px}.event-progress{display:flex;gap:5px;padding:15px 3px 8px}.event-progress i{height:4px;flex:1;border-radius:5px;background:#ddd4c3}.event-progress i.done{background:var(--green)}.event-progress i.current{background:var(--gold)}.event-main{flex:1;overflow:auto;padding:8px 0}.scene-card{border-radius:22px;background:linear-gradient(135deg,#eee5d5,#fffaf0);border:1px solid var(--line);padding:18px;margin-bottom:13px}.scene-speaker{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);font-weight:800}.mini-shiba{width:34px;height:34px;border-radius:12px;background:#292a23;color:#f1e8d5;display:grid;place-items:center;font-size:18px}.scene-card p{font-size:13px;line-height:1.62;margin:12px 0 0}.question-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px}.question-context{font-size:11px;color:var(--green);font-weight:850;margin-bottom:8px}.question-card h1{font-size:25px;line-height:1.28;letter-spacing:-.035em;margin:0 0 16px}.choice-list{display:grid;gap:9px}.choice{border:1px solid #d8cfbf;background:#f8f3e9;color:var(--ink);border-radius:15px;padding:13px 14px;text-align:left;font-weight:800;transition:.15s}.choice:active{transform:scale(.99)}.choice.correct{background:#dcebdc;border-color:#608b67}.choice.wrong{background:#f4deda;border-color:#c56b62}.choice:disabled{color:inherit}.feedback{display:none;margin-top:12px;border-radius:14px;padding:12px;font-size:12px;line-height:1.55;background:#eee7da;color:#5f594e}.feedback.show{display:block}.feedback.correct{background:#deebdc;color:#31543c}.feedback.wrong{background:#f4dfda;color:#823f39}.audio-prompt{display:flex;align-items:center;gap:10px;margin-bottom:13px;color:var(--muted);font-size:11px}.audio-button{width:52px;height:52px;border:0;border-radius:17px;background:var(--green);color:white;font-size:22px}.token-zone{min-height:58px;border:2px dashed #cfc4b1;border-radius:15px;padding:9px;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.token-bank{display:flex;flex-wrap:wrap;gap:7px}.token{border:1px solid #cfc4b1;background:#f6efe2;border-radius:12px;padding:10px 12px;font-weight:850}.token.used{opacity:.25}.event-footer{padding-top:12px}.event-footer button{width:100%;border:0;border-radius:16px;background:var(--green);color:white;padding:14px;font-weight:900}.event-footer button:disabled{opacity:.42}.event-summary{text-align:center;padding:22px 4px}.event-summary .big-symbol{font-size:58px}.event-summary h1{font-size:28px;letter-spacing:-.045em;margin:10px 0}.event-summary p{font-size:13px;color:var(--muted);line-height:1.6}.reward-card{display:flex;justify-content:center;gap:12px;margin:18px 0}.reward-card span{border-radius:99px;background:#fff1cf;border:1px solid #efd090;color:#815816;font-weight:900;padding:9px 12px;font-size:12px}.memory-report{display:grid;gap:8px;text-align:left;margin-top:18px}.memory-row{display:flex;justify-content:space-between;background:#f2ece1;border-radius:13px;padding:10px 12px;font-size:12px}.memory-row strong.good{color:var(--green)}.memory-row strong.weak{color:var(--orange)}
.recall-card{width:100%;min-height:142px;border:1px solid #d7c6aa;border-radius:19px;background:linear-gradient(145deg,#fff8e9,#efe1c7);color:var(--ink);display:grid;place-items:center;align-content:center;gap:9px;padding:22px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}.recall-card span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:850}.recall-card strong{font-size:20px;line-height:1.45}.recall-card strong small{display:block;font-size:12px;color:var(--muted);font-weight:650;margin-top:9px}.recall-card.revealed{background:linear-gradient(145deg,#e7efdf,#fbf5e8);animation:cardFlip .28s ease}.recall-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.recall-actions button{border:1px solid #d1c5b3;border-radius:14px;background:#eee6d8;color:var(--ink);padding:12px;font-weight:850}.recall-actions .remembered{background:var(--green);border-color:var(--green);color:white}@keyframes cardFlip{0%{transform:rotateX(12deg);opacity:.4}100%{transform:rotateX(0);opacity:1}}
.settlement-layer{align-items:center;padding:20px}.settlement-card{width:min(100%,430px);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:24px;text-align:center;box-shadow:var(--shadow)}.settlement-shiba{margin:-84px auto 8px;transform:scale(.82);height:118px}.settlement-card h1{font-size:27px;letter-spacing:-.045em;line-height:1.15;margin:9px 0}.settlement-card>p{font-size:13px;color:var(--muted);line-height:1.65}.settlement-report{margin:16px 0;display:grid;gap:7px}.settlement-report div{display:flex;justify-content:space-between;background:#f2ece1;border-radius:12px;padding:9px 11px;font-size:11px}.settlement-actions{display:grid;gap:8px}.settlement-actions button{border:0;border-radius:15px;padding:13px;font-weight:900}.settlement-actions .continue{background:var(--green);color:white}.settlement-actions .finish{background:#ebe3d4;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,18px);z-index:300;background:#23231e;color:white;border-radius:99px;padding:10px 15px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.coin-fly{position:fixed;z-index:310;color:#f3b43e;font-size:22px;font-weight:950;pointer-events:none;animation:coin-fly .8s ease-out forwards}@keyframes coin-fly{to{transform:translateY(-65px) scale(.6);opacity:0}}
.building.upgrading{animation:upgrade .7s ease}@keyframes upgrade{35%{transform:translateY(-8px) scale(1.08)}65%{filter:drop-shadow(0 0 25px #f2c764)}}
@media(min-width:681px){.town-card{height:340px}.building{left:110px;transform:scale(1.08);transform-origin:bottom}.map-shiba{right:120px}.speech-bubble{right:74px;top:30px}.map-panel{padding-left:38px;padding-right:38px}.event-layer{align-items:center;padding:24px}.event-shell{border-radius:28px;min-height:660px;max-height:820px}.bottom-nav{border-radius:18px 18px 0 0}}
@media(max-width:390px){.building{left:28px}.map-shiba{right:25px}.speech-bubble{right:12px;width:139px}.panel-heading h1{font-size:25px}.route-node{grid-template-columns:56px 1fr auto}.profile-stats{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}