:root{color-scheme:dark;--bg:#0b1418;--panel:#14252b;--raised:#1c3239;--line:#31464b;--text:#ebe4d5;--muted:#a5b5b4;--accent:#cfad73;--red:#ef9a88;--green:#8fcbc0;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}
button,input,select{font:inherit;color:inherit}button,select,input{border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:44px}
button{cursor:pointer;padding:8px 12px;touch-action:manipulation}button:hover:not(:disabled){border-color:var(--accent);background:var(--raised)}button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a{color:var(--accent)}
h1,h2,p{margin:0}h1{font:500 24px/1.15 Georgia,serif}h2{font:500 28px/1.12 Georgia,serif}
small,.muted{color:var(--muted);font-size:12px}.gold{color:var(--accent)}.red{color:var(--red)}.green{color:var(--green)}
.row{display:flex;align-items:center;gap:10px;min-width:0}.spread{justify-content:space-between}.grow{flex:1;min-width:0}.stack{display:flex;flex-direction:column;gap:10px;min-height:0}
.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}.selected{border-color:var(--accent);background:#293b3c}
.loading{padding:32px}.shell{height:100dvh;max-width:1200px;margin:auto;display:flex;flex-direction:column;padding:18px 24px;gap:14px}
.masthead{flex:none;min-height:46px}.masthead .brand{font-size:12px;color:var(--muted);display:block;margin-top:4px}.utility{min-width:44px;padding:8px}
.stats{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:22px;align-items:center;padding:12px 16px;background:var(--panel);border-radius:12px;flex:none}
.stat{font-variant-numeric:tabular-nums;font-size:14px}.stat strong{font-size:18px}.meter{height:4px;background:var(--line);margin-top:6px;border-radius:3px;overflow:hidden}
progress.meter{display:block;width:100%;border:0;appearance:none}progress.meter::-webkit-progress-bar{background:var(--line)}progress.meter::-webkit-progress-value{background:var(--accent)}progress.hp::-webkit-progress-value{background:var(--red)}progress.xp::-webkit-progress-value{background:var(--green)}progress.meter::-moz-progress-bar{background:var(--accent)}
.game-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(350px,1fr);gap:24px;min-height:0;flex:1}
.map-sidebar,.work-side{min-width:0;min-height:0}.map-sidebar{display:flex}.map-sidebar .world-side{width:100%}
.work-side{display:flex;flex-direction:column;gap:10px}.panel-body{min-height:0;flex:1;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.panel-heading{min-height:30px;flex:none}.panel-heading>b{font:500 22px Georgia,serif}.panel-heading small{max-width:52%;text-align:end}
.tabs{display:flex;justify-content:center;gap:6px;border-top:1px solid var(--line);padding-top:8px;flex:none}
.tabs button{flex:1;max-width:140px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;font-size:13px;min-height:52px;padding:3px 2px;color:var(--muted)}
.tabs button.active{color:var(--accent);background:var(--panel)}.nav-glyph{font:24px/1 Georgia,serif}
.scene{position:relative;border-radius:14px;overflow:hidden;flex:none;height:clamp(130px,23vh,210px);background:var(--panel)}
.scene-art{position:absolute;inset:0;background-image:url("location-atlas.png");background-size:400% 600%;filter:saturate(.8)}
.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 12%,rgba(5,13,16,.86) 90%)}
.scene-caption{position:absolute;inset:auto 16px 14px;z-index:1;text-shadow:0 2px 4px #000}.scene-caption small{color:var(--accent);font-size:12px;letter-spacing:.04em}
.scene-caption h2{margin:6px 0}.scene-caption p{font-size:13px;color:#e4e6dc;max-width:42ch}.place-status{flex:none}
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:0}
.action{display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:start;min-height:60px}.action span{font-weight:600}.action small{white-space:nowrap}
.message{border-inline-start:2px solid var(--accent);padding:8px 12px;background:var(--panel);border-radius:0 8px 8px 0;font-size:13px;min-height:44px;display:flex;align-items:center;flex:none}
.message.error{border-color:var(--red);color:var(--red)}.message span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:8px;flex:none}.pager button{min-width:44px}.pager span{font-size:12px;color:var(--muted)}
.inventory-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0}.item{min-height:58px;text-align:start;display:flex;align-items:center;gap:8px}
.item b{font-size:14px;flex:1}.item .quantity{font:15px Georgia,serif;color:var(--accent)}
.detail{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:10px;flex:none}
.detail .row button{flex:1}.detail p{font-size:13px;color:var(--muted)}.detail b{font-size:14px}
.tree-branches{display:flex;gap:6px;flex:none}.tree-branches button{flex:1;min-height:40px;font-size:14px}
.tree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 10px;flex:1;min-height:170px;max-height:340px}
.talent{position:relative;min-height:0;font-size:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6px 3px}
.talent[data-tier="1"]:before,.talent[data-tier="2"]:before{content:"";position:absolute;height:25px;width:1px;background:var(--accent);top:-26px;left:50%;opacity:.6}
.talent.known{border-color:var(--green);color:var(--green);background:#193b38}.talent.available{border-color:var(--accent)}.talent.locked{color:var(--muted)}.talent small{font-size:12px}
.entry,.person{padding:12px;border-bottom:1px solid var(--line);font-size:14px;min-height:0}.entry p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.entry time{font-size:12px;color:var(--muted)}
.person .row button{font-size:13px}.onboarding{width:100%;max-width:560px;margin:auto;display:flex;flex-direction:column;gap:16px}.onboarding h1{font-size:36px}.intro{color:var(--muted);font-size:16px;line-height:1.5}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form label{font-size:14px;display:flex;flex-direction:column;gap:6px}.form select{width:100%;padding:6px}.form-detail{border-inline-start:2px solid var(--accent);padding-inline-start:12px}
.restore-field{width:100%;padding:10px;font-size:14px}.settings-list{display:flex;flex-direction:column;gap:12px}.settings-list .row>button{flex:1}.settings-list select{width:100%;padding:8px}.key{font:12px/1.5 monospace;overflow-wrap:anywhere;background:var(--raised);padding:12px;user-select:all}
.footnote{font-size:13px;color:var(--muted)}.subclass-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}.subclass-choice button{padding:14px 8px}.confirm{border:1px solid var(--red);border-radius:12px;padding:16px}.compact-notice{font-size:13px;color:var(--muted)}.combat-callout{font-size:13px;color:var(--red);border-inline-start:2px solid var(--red);padding-inline-start:8px;flex:none}
.world-side{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}.map-title b{font:500 22px Georgia,serif}.map-title span{font-size:12px;color:var(--muted)}
.map{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:1;min-height:150px}.map.cols-4{grid-template-columns:repeat(4,1fr)}.map.cols-5{grid-template-columns:repeat(5,1fr)}
.tile{min-height:0;min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:6px 2px}.tile-art{position:absolute;inset:0;background-image:url("location-atlas.png");background-size:400% 600%;background-position:calc(var(--art-x)*33.333%) calc(var(--art-y)*20%);opacity:.3}.tile-name{font-size:12px}.tile.current{border-color:var(--accent)}.tile.chosen{outline:2px solid var(--accent);outline-offset:-3px}.danger{color:var(--red)}
.location-box{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel);border-radius:12px;flex:none}.location-box h2{font-size:23px}.location-description{font-size:13px;color:var(--muted)}.location-box .travel{width:100%}.world-foot{font-size:12px;color:var(--muted)}.season-line{font-size:12px}
.view-map .work-side{display:none}.view-map .game-layout{grid-template-columns:1fr}.view-map .map-sidebar{max-width:900px;width:100%;margin:auto;height:100%}
@media(max-width:699px){
 .shell{padding:8px 14px 4px;gap:10px}.masthead{min-height:42px}.masthead h1{font-size:23px}.masthead .brand{font-size:12px}.masthead .row{gap:6px}
 .stats{grid-template-columns:1.15fr 1fr 1fr;gap:15px;padding:10px 12px}.identity{display:none}.stat{font-size:12px}.stat strong{font-size:17px}
 .game-layout{display:flex;gap:0}.map-sidebar{display:none}.work-side{flex:1;width:100%;gap:8px}.panel-body{gap:10px}.panel-heading>b{font-size:21px}
 .view-map .work-side{display:flex}.view-map .map-sidebar{display:none}.tabs{gap:2px;padding-top:5px}.tabs button{font-size:12px;min-height:50px}.nav-glyph{font-size:23px}
 .scene{height:clamp(125px,24vh,215px)}.scene-caption{inset:auto 14px 12px}.scene-caption h2{font-size:27px}.scene-caption p{font-size:13px}
 .action{min-height:54px;font-size:14px;padding:8px 10px}.action small{font-size:12px}.actions{gap:8px}
 .tree{max-height:350px;gap:24px 7px;min-height:164px}.talent{font-size:13px}.tree-branches button{font-size:13px;padding:5px}
 .item{min-height:58px}.detail{padding:10px;gap:8px}.detail .row{flex-wrap:wrap}.detail .row small.grow{flex-basis:60%}
 .message{font-size:13px;min-height:42px;padding:6px 10px}.settings-list{gap:10px}.settings-list button,.settings-list select{font-size:14px}
 .location-box h2{font-size:24px}.world-foot{font-size:12px}.world-side{gap:10px}.onboarding{gap:12px}.onboarding h1{font-size:32px}
}
@media(max-height:700px) and (max-width:699px){
 .shell{padding:5px 10px 2px;gap:6px}.masthead{min-height:36px}.masthead h1{font-size:21px}.masthead .brand{font-size:11px}.stats{padding:7px 10px}
 .stat strong{font-size:16px}.meter{margin-top:3px}.work-side{gap:5px}.panel-body{gap:7px}.panel-heading{min-height:25px}.panel-heading>b{font-size:19px}
 .scene{height:112px}.scene-caption h2{font-size:25px;margin:4px 0}.scene-caption p{font-size:12px}.scene-caption small{font-size:11px}
 .action{min-height:44px;font-size:13px}.actions{gap:6px}.compact-notice,.combat-callout{font-size:12px}.place-status{display:none}
 .message{min-height:38px;font-size:12px}.tabs button{min-height:46px}.tabs{padding-top:3px}.tree{min-height:132px;gap:17px 6px}.talent{font-size:12px}
 .talent[data-tier="1"]:before,.talent[data-tier="2"]:before{height:18px;top:-19px}.detail{padding:8px;gap:6px}.detail .row button{min-height:40px}.item{min-height:48px}
 .tree-branches button{min-height:36px}.entry,.person{padding:8px}.onboarding{gap:8px}.onboarding h1{font-size:28px}.intro{font-size:14px}
 .world-side{gap:7px}.location-box{gap:5px;padding:9px}.location-box p{display:none}.location-box h2{font-size:22px}.world-foot{display:none}
}
@media(max-width:350px){.tabs button{font-size:11px}.shell{padding-inline:8px}.brand{max-width:200px}.action{padding-inline:8px}.stat{font-size:11px}.tree .talent{font-size:12px}.detail .row small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.art-0{background-position:0% 0%}
.art-1{background-position:33.333333333333336% 0%}
.art-2{background-position:66.66666666666667% 0%}
.art-3{background-position:100% 0%}
.art-4{background-position:0% 20%}
.art-5{background-position:33.333333333333336% 20%}
.art-6{background-position:66.66666666666667% 20%}
.art-7{background-position:100% 20%}
.art-8{background-position:0% 40%}
.art-9{background-position:33.333333333333336% 40%}
.art-10{background-position:66.66666666666667% 40%}
.art-11{background-position:100% 40%}
.art-12{background-position:0% 60%}
.art-13{background-position:33.333333333333336% 60%}
.art-14{background-position:66.66666666666667% 60%}
.art-15{background-position:100% 60%}
.art-16{background-position:0% 80%}
.art-17{background-position:33.333333333333336% 80%}
.art-18{background-position:66.66666666666667% 80%}
.art-19{background-position:100% 80%}
.art-20{background-position:0% 100%}
.art-21{background-position:33.333333333333336% 100%}
.art-22{background-position:66.66666666666667% 100%}
.art-23{background-position:100% 100%}

.landscape-map{position:relative;flex:1;min-height:150px;background:#d4c7a7;overflow:hidden;border-radius:14px;border:1px solid #8b957e}
.province-chart{display:block;width:100%;height:100%;direction:ltr}.terrain{stroke-width:2;stroke-linejoin:round}
.terrain.forest{fill:#a4b398;stroke:#a4b398}.terrain.lowland{fill:#cec2a0;stroke:#cec2a0}.terrain.water{fill:#a0b9b8;stroke:#a0b9b8}.terrain.highland{fill:#b7b2a1;stroke:#b7b2a1}.terrain.wetland{fill:#acbba2;stroke:#acbba2}
.trail{fill:none;stroke:#84795d;stroke-width:2;stroke-dasharray:3 3;opacity:.62}.travel-route{fill:none;stroke:#983c2c;stroke-width:2.5;stroke-dasharray:6 3}
.map-place{cursor:pointer;outline:none}.map-hit{fill:transparent}.pin-halo{fill:#e9dfc8;fill-opacity:.7;stroke:none}.pin{fill:#495b4e;stroke:#e9dfc8;stroke-width:1.8}.map-place.here .pin{fill:#983c2c}.map-place.here .pin-halo{stroke:#983c2c;stroke-width:1.5;fill:#eee0bd}
.map-place.chosen .pin-halo,.map-place:focus .pin-halo{stroke:#7a382c;stroke-width:2.5}.map-place:hover .pin-halo{fill:#fff4d8}
.place-label{font:13px Georgia,serif;fill:#253a35;paint-order:stroke;stroke:#ddd4ba;stroke-width:3.4;stroke-linejoin:round;pointer-events:none}
.oni-count{font:bold 12px -apple-system,sans-serif;fill:#873d30;paint-order:stroke;stroke:#ded5bc;stroke-width:2.5;pointer-events:none}
.map-compass{position:absolute;top:9px;right:12px;font:12px Georgia,serif;color:#40534b;pointer-events:none}.map-legend{flex:none}.map-legend small{font-size:12px}
.compact-scene{height:86px;border-radius:8px}.compact-scene .scene-caption{inset:auto 12px 9px}.compact-scene .scene-caption h2{font-size:23px;margin:3px 0}.compact-scene .scene-caption p{display:none}
.location-box{padding:8px;gap:8px}.location-box .row{padding-inline:4px}.world-side .map-title .utility{font-size:12px;min-height:36px}
.radius-2 .place-label{font-size:16px}.radius-2 .oni-count{font-size:15px}.radius-2 .pin{r:5}
.pager.single-page{display:none}.view-actions .compact-notice{display:none}
.panel-heading select{max-width:52%;min-width:0}.view-map .message{display:none}
.nav-glyph svg{width:23px;height:23px;display:block}.map-legend small:first-child{color:var(--red)}
@media(max-height:600px) and (max-width:699px){
 .view-map .compact-scene{height:48px}.view-map .scene-caption{inset:auto 10px 6px}.view-map .scene-caption small{display:none}.view-map .location-box .row{display:none}.view-map .landscape-map{min-height:110px}
 .view-talents .tree{min-height:94px;gap:12px 5px}.view-talents .talent{font-size:11px;padding:3px 2px;line-height:1.2}.view-talents .talent small{font-size:11px}.view-talents .talent[data-tier="1"]:before,.view-talents .talent[data-tier="2"]:before{height:13px;top:-14px}
 .view-talents .detail .row{flex-wrap:nowrap}.view-talents .detail .row small.grow{flex-basis:auto;font-size:11px}.view-talents .detail .row button{flex:0 0 auto;max-width:40%;font-size:12px;min-height:36px;padding:5px 8px}.view-talents .detail{gap:5px;padding:7px}.view-talents .detail b{font-size:13px}
}
@media(max-height:700px) and (max-width:699px){.compact-scene{height:65px}.compact-scene .scene-caption h2{font-size:21px}.map-legend{display:none}.location-box{padding:6px;gap:6px}.landscape-map{min-height:155px}.world-side .map-title{min-height:36px}}

.purchase-offer{display:flex;flex-direction:column;gap:7px}.purchase-price{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}
.view-settings .settings-list:has(.purchase-offer){gap:8px}
@media(max-height:700px){.purchase-offer{gap:4px}.purchase-offer .footnote{font-size:12px}.purchase-price{font-size:16px}.view-settings .settings-list:has(.purchase-offer){gap:6px}}