:root{
  --paper:#f6f0df;--ink:#2a2c29;--muted:#72756d;--line:#c9bea6;--green:#58745b;
  --green2:#769276;--accent:#b5694b;--gold:#bc944b;--shadow:rgba(50,43,30,.16);
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#ded8c6;color:var(--ink);min-height:100%;overscroll-behavior:none}
button{font:inherit;color:inherit}
#app{min-height:100dvh;display:flex;justify-content:center}
.phone{width:min(100%,520px);min-height:100dvh;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,.16)}
.screen{min-height:100dvh;position:relative}

/* title */
.title-screen{display:flex;flex-direction:column;justify-content:flex-end;min-height:100dvh;padding:32px 24px max(34px,env(safe-area-inset-bottom));overflow:hidden;background:linear-gradient(#cfdcbf 0 34%,#d5c89d 34% 39%,#ece2c8 39%)}
.title-landscape{position:absolute;inset:0 0 35%;overflow:hidden}
.hill{position:absolute;border-radius:50%;background:#9eb185}.hill.h1{width:125%;height:42%;left:-35%;top:20%;transform:rotate(-7deg)}.hill.h2{width:115%;height:37%;right:-38%;top:27%;background:#879d75;transform:rotate(10deg)}
.town-silhouette{position:absolute;left:5%;right:5%;bottom:7%;height:39%}
.house{position:absolute;bottom:0;width:58px;height:52px;background:#e9d9b8;border:3px solid #765c46;border-radius:4px;box-shadow:0 8px 0 rgba(61,51,40,.1)}
.house:before{content:"";position:absolute;left:-9px;top:-27px;border-left:37px solid transparent;border-right:37px solid transparent;border-bottom:31px solid #9d5f4b}
.house:after{content:"";position:absolute;width:15px;height:24px;background:#7d624d;left:20px;bottom:0;border-radius:2px 2px 0 0}
.house.a{left:7%;transform:scale(.82)}.house.b{left:34%;bottom:3%;transform:scale(1.15)}.house.c{right:9%;transform:scale(.9)}
.tree{position:absolute;bottom:0;width:13px;height:46px;background:#705744;border-radius:8px}.tree:before,.tree:after{content:"";position:absolute;border-radius:50%;background:#607d58}.tree:before{width:55px;height:55px;left:-22px;top:-31px}.tree:after{width:39px;height:39px;left:-12px;top:-47px;background:#76906a}.tree.t1{left:22%;bottom:5%}.tree.t2{right:26%;bottom:1%;transform:scale(.85)}
.title-copy{position:relative;z-index:2;margin-bottom:28px}.title-kicker{font-size:13px;color:#695f50;letter-spacing:.14em;margin-bottom:8px}.game-title{font-family:serif;font-weight:700;font-size:58px;line-height:.95;letter-spacing:.04em;margin:0 0 13px}.title-sub{font-family:serif;font-size:15px;line-height:1.8;color:#625c51;max-width:320px}.primary{width:100%;border:0;border-radius:18px;background:var(--green);color:#fff;padding:17px 20px;font-weight:800;font-size:17px;box-shadow:0 6px 0 #405745;cursor:pointer}.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #405745}.subtle-btn{border:1px solid var(--line);background:rgba(255,255,255,.45);border-radius:14px;padding:10px 14px}

/* creator */
.creator{padding:22px 18px 100px;background:linear-gradient(#e8dfc5,#f6f0df 35%)}
.creator h1{font-family:serif;margin:22px 0 5px;font-size:32px}.creator p{color:var(--muted);margin:0 0 20px}.avatar-preview{display:grid;place-items:center;height:170px}.big-avatar{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:63px;background:#fffaf0;border:5px solid #c8b893;box-shadow:0 9px 30px var(--shadow);position:relative}.big-avatar:after{content:"";position:absolute;width:82px;height:35px;background:var(--shirt,#6680a6);border-radius:44px 44px 11px 11px;bottom:-28px;z-index:-1}
.field{margin:14px 0}.field label{display:block;font-size:12px;color:#70695d;margin:0 0 6px;font-weight:700}.field input{width:100%;font:inherit;font-size:18px;border:1px solid #cfc2a9;border-radius:14px;background:#fffaf1;padding:13px 14px;outline:none}.choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice-row.four{grid-template-columns:repeat(2,1fr)}.choice{border:1px solid #cfc2a9;background:#fffaf1;border-radius:14px;padding:12px 10px;text-align:left;min-height:58px}.choice.active{border:2px solid var(--green);background:#e9f0e3}.choice b{display:block;font-size:14px}.choice small{color:var(--muted)}.creator-footer{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);padding:12px 18px max(16px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 26%)}

/* world */
.world{padding-bottom:90px;background:#d7dfc5;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(246,240,223,.93);backdrop-filter:blur(12px);border-bottom:1px solid rgba(115,99,72,.16)}
.date{font-weight:800;font-size:13px}.date small{display:block;color:var(--muted);font-weight:600;margin-top:1px}.top-actions{display:flex;gap:7px}.icon-btn{border:1px solid #c8bea9;background:#fff9ec;border-radius:11px;height:39px;min-width:39px;padding:0 10px;font-weight:800;box-shadow:0 2px 0 rgba(88,71,51,.08)}
.location-head{padding:12px 14px 7px;background:#d7dfc5}.location-title{font-family:serif;font-size:25px;font-weight:800}.location-desc{color:#596153;font-size:12px;margin-top:2px}
.scene{height:247px;margin:0 10px 10px;border:3px solid #766b55;border-radius:21px;position:relative;overflow:hidden;background:linear-gradient(#bed5d0 0 30%,#9eb885 30% 51%,#d1ba83 51%);box-shadow:0 8px 0 rgba(79,69,49,.14)}
.scene:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-51px;height:109px;background:#c9af78;border-radius:50%;border-top:3px solid rgba(105,83,49,.25)}
.mountain{position:absolute;width:270px;height:120px;background:#779072;transform:rotate(28deg);top:12px;left:-65px;border-radius:20px}.mountain.m2{background:#869d7a;left:auto;right:-95px;transform:rotate(-26deg);top:20px}
.landmark{position:absolute;left:50%;transform:translateX(-50%);bottom:60px;width:98px;height:74px;background:#e8d7b5;border:3px solid #715944;border-radius:6px;z-index:3}.landmark:before{content:"";position:absolute;left:-13px;right:-13px;top:-33px;border-left:62px solid transparent;border-right:62px solid transparent;border-bottom:38px solid #a55c48}.landmark:after{content:"";position:absolute;width:22px;height:34px;background:#755944;left:36px;bottom:0}.scene.market .landmark{width:126px;background:#d8ba80}.scene.market .landmark:before{border-bottom-color:#7b4e3e;border-left-width:76px;border-right-width:76px;left:-13px;right:-13px}.scene.field-scene{background:linear-gradient(#c6dad3 0 30%,#8dab7c 30% 50%,#bd9b58 50%)}.scene.field-scene:after{background:repeating-linear-gradient(90deg,#b38b4f 0 10px,#cda95e 10px 22px);border-radius:50%}.scene.workshop .landmark{background:#c19b70}.scene.workshop .landmark:before{border-bottom-color:#6a5350}.scene.school .landmark{width:130px;height:70px;background:#e0d4b9}.scene.school .landmark:before{border-bottom-color:#596d73}.scene.tavern{background:linear-gradient(#74828a 0 31%,#637b65 31% 50%,#9a8259 50%)}.scene.tavern .landmark{background:#b77c54}.scene.hill-scene{background:linear-gradient(#b8d2d1 0 39%,#718e67 39% 70%,#7e9c70 70%)}.scene.hill-scene .landmark{display:none}.hill-tree{display:none}.scene.hill-scene .hill-tree{display:block;position:absolute;left:50%;bottom:52px;width:17px;height:83px;background:#654d3e;z-index:3}.scene.hill-scene .hill-tree:before{content:"";position:absolute;width:112px;height:100px;background:#668661;border-radius:50%;left:-48px;top:-59px;box-shadow:-37px 18px 0 #718f69,38px 12px 0 #5e7b58}

.people-strip{position:absolute;left:7px;right:7px;bottom:24px;height:110px;z-index:12;display:flex;align-items:flex-end;justify-content:center;gap:3px;pointer-events:none}.person-token{width:53px;min-width:53px;pointer-events:auto;border:0;background:transparent;padding:0;position:relative;cursor:pointer;animation:idle 2.1s ease-in-out infinite}.person-token:nth-child(2n){animation-delay:-.8s}.person-token:nth-child(3n){animation-delay:-1.4s}@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.person-bubble{position:absolute;bottom:77px;left:50%;transform:translateX(-50%);background:#fff9e8;border:2px solid #756650;border-radius:11px;padding:3px 6px;font-size:10px;white-space:nowrap;box-shadow:0 3px 0 rgba(67,55,39,.12)}.person-bubble:after{content:"";position:absolute;border:5px solid transparent;border-top-color:#756650;bottom:-11px;left:calc(50% - 5px)}
.mini-face{width:48px;height:48px;border-radius:50%;background:#edc6a2;border:3px solid #665344;display:grid;place-items:center;font-size:29px;margin:auto;box-shadow:0 4px 0 rgba(76,58,41,.18);position:relative;overflow:hidden}.mini-face.child{width:42px;height:42px;font-size:25px}.mini-face.elder{background:#dcbda7}.mini-body{height:30px;width:39px;border-radius:17px 17px 5px 5px;background:var(--shirt,#687d9f);margin:-2px auto 0;border:3px solid #665344}.person-name{display:block;background:rgba(250,245,228,.91);border-radius:7px;padding:2px 4px;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;box-shadow:0 2px 5px rgba(0,0,0,.1)}

.notice{margin:8px 12px;background:#fff6dc;border:1px solid #d8c79d;border-left:5px solid var(--gold);border-radius:14px;padding:10px 12px;display:flex;gap:9px;align-items:center;font-size:12px}.notice b{display:block}.notice span{color:#766d5d}.notice .emoji{font-size:23px}
.activity{padding:5px 12px 0}.section-label{display:flex;align-items:center;justify-content:space-between;margin:8px 2px;font-size:12px;color:#5b6256;font-weight:800}.activity-list{display:grid;gap:7px}.activity-card{background:rgba(255,250,239,.88);border:1px solid rgba(114,94,69,.18);border-radius:14px;padding:10px 11px;display:flex;gap:9px;align-items:center}.activity-card .face-dot{font-size:24px}.activity-card p{margin:0;font-size:12px;line-height:1.45}.activity-card time{display:block;font-size:10px;color:#868276;margin-top:2px}
.bottomnav{position:fixed;z-index:40;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,520px);height:76px;padding:8px 9px max(9px,env(safe-area-inset-bottom));background:rgba(246,240,223,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(106,91,69,.18);display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.nav-btn{border:0;background:transparent;border-radius:12px;font-size:10px;color:#777267;font-weight:700}.nav-btn strong{font-size:22px;display:block;line-height:1.15}.nav-btn.active{background:#e2e9d8;color:#3f5945}

/* overlays */
.backdrop{position:fixed;z-index:80;inset:0;background:rgba(37,35,29,.42);display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(100%,520px);max-height:88dvh;overflow:auto;background:var(--paper);border-radius:24px 24px 0 0;padding:12px 16px max(22px,env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.18);animation:up .2s ease}@keyframes up{from{transform:translateY(30px);opacity:.4}}
.handle{width:44px;height:5px;background:#c4baa6;border-radius:5px;margin:0 auto 14px}.person-hero{display:flex;gap:14px;align-items:center}.person-hero .big-avatar{width:78px;height:78px;font-size:45px;border-width:4px}.person-hero h2{margin:0 0 4px;font-family:serif;font-size:25px}.relation{display:inline-flex;align-items:center;gap:5px;background:#e8eadc;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:800}.person-meta{font-size:12px;color:var(--muted);margin-top:5px}.memory{background:#fff8e8;border:1px solid #d9ceb7;border-radius:15px;padding:12px;margin:14px 0;font-family:serif;font-size:14px;line-height:1.7}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.action{border:1px solid #c9bca2;background:#fffaf0;border-radius:15px;padding:13px 5px;font-weight:800}.action span{font-size:24px;display:block}.action:active{transform:scale(.97);background:#e9efdf}.close{width:100%;border:0;background:transparent;padding:13px;color:#777268;margin-top:7px}
.toast{position:fixed;z-index:120;left:50%;bottom:96px;transform:translateX(-50%);width:min(calc(100% - 34px),470px);background:#2f3b32;color:#fff;padding:12px 15px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.24);font-size:13px;animation:toastin .25s ease}@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}}

/* map */
.map-screen,.book-screen{padding-bottom:90px;min-height:100dvh;background:#efe8d5}.screen-head{padding:calc(16px + env(safe-area-inset-top)) 16px 8px;display:flex;align-items:center;gap:10px}.screen-head h1{font-family:serif;margin:0;font-size:30px}.back-btn{border:0;background:#fff8e9;border-radius:12px;width:40px;height:40px;font-size:22px}.map-wrap{position:relative;height:640px;margin:6px 10px 0;border:2px solid #8c7a5d;border-radius:23px;background:#b9c99e;overflow:hidden;box-shadow:0 8px 0 rgba(66,55,39,.12)}.river{position:absolute;background:#8cb8bd;width:105px;height:780px;left:47%;top:-70px;transform:rotate(14deg);border-left:4px solid #739da4;border-right:4px solid #739da4}.road{position:absolute;background:#cfb77f;border:2px solid #aa925f;border-radius:50%;width:390px;height:110px;left:20px;top:260px;transform:rotate(-18deg)}.map-place{position:absolute;border:0;background:#f8efd7;border:3px solid #6f5b47;border-radius:16px;padding:9px 8px;min-width:93px;box-shadow:0 5px 0 rgba(67,52,38,.18);font-weight:900}.map-place small{display:block;font-weight:600;font-size:10px;color:#746b5c;margin-top:2px}.map-place.current{outline:5px solid rgba(255,240,155,.72);transform:scale(1.05)}

/* history and family */
.book-card{margin:8px 12px;background:#fffaf0;border:1px solid #cfc2a8;border-radius:18px;padding:14px}.history-item{display:grid;grid-template-columns:65px 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed #d7cdbb}.history-item:last-child{border-bottom:0}.history-item .when{font-size:11px;color:#7d766a;font-weight:800}.history-item p{margin:0;font-family:serif;line-height:1.6;font-size:14px}.family-node{background:#fff8e6;border:1px solid #d3c4a8;border-radius:14px;padding:10px;margin:8px 0;display:flex;align-items:center;gap:10px}.family-node .ficon{font-size:29px}.family-node b{display:block}.family-node small{color:var(--muted)}
.empty{text-align:center;color:#817b70;padding:35px 12px;font-family:serif}

/* ending */
.legacy{min-height:100dvh;background:linear-gradient(#404b43,#212923);color:#f6f0df;padding:calc(34px + env(safe-area-inset-top)) 20px 40px}.legacy h1{font-family:serif;font-size:36px;margin:0 0 8px}.legacy .lead{color:#d7d9cf;line-height:1.7}.life-card{background:rgba(250,245,225,.08);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px;margin:18px 0}.life-event{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.11);font-family:serif;line-height:1.5}.successor{display:flex;gap:10px;align-items:center;width:100%;margin:8px 0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;border-radius:15px;padding:12px;text-align:left}.successor .sface{font-size:34px}.successor small{display:block;color:#cfd3cb;margin-top:3px}

@media(max-width:390px){.game-title{font-size:51px}.scene{height:232px}.person-token{width:49px;min-width:49px}.mini-face{width:44px;height:44px}.people-strip{gap:0}.map-wrap{height:590px}.actions{gap:6px}.action{font-size:12px}}