:root{--bg:#f7f6ef;--ink:#263f38;--muted:#7c8a7f;--green:#315c4d;--line:#e0e5db;--orange:#d68051}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Tahoma,'Noto Sans Thai',sans-serif;font-size:14px}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;border-radius:8px;background:#eef1e8;padding:10px 15px}button:hover{filter:brightness(.95)}button:focus-visible{outline:3px solid #dc9b62;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{height:96px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 5%;gap:38px;background:#fbfcf7}.brand{font-size:30px;font-weight:bold;text-decoration:none;color:var(--green);line-height:1}.brand span{color:var(--orange)}.brand small{display:block;font-size:8px;letter-spacing:2.3px;margin-top:10px}.headnote{font-size:11px;line-height:1.7;border-left:1px solid var(--line);padding-left:28px;color:var(--muted)}.headnote b{font-weight:normal;color:var(--ink)}.outline{margin-left:auto;border:1px solid #cdd5c8;background:transparent}main{max-width:1480px;margin:auto;padding:36px 5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--orange);font-weight:bold}h1{font-size:30px;letter-spacing:-1px;margin:10px 0}p{color:var(--muted);line-height:1.7;margin:8px 0}.date{text-align:right;line-height:1.8}.date span{display:block;font-size:12px;color:var(--muted)}.date b{font-size:19px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px}.world{border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;background:#e7eddf}.scenehead{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;z-index:1;font-size:11px}.scenehead>span{background:#ffffffdb;padding:9px 13px;border-radius:25px;box-shadow:0 2px 10px #24452b08}i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#629563;margin-right:5px}canvas{display:block;width:100%;height:370px}.caption{position:absolute;top:320px;left:22px;background:#fcfff2ec;border-radius:8px;padding:10px 14px;font-size:12px}.live{font-size:9px;color:#588362;margin-right:9px}.transport{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;background:#fffef8}.transport b{font-size:12px}.transport small{display:block;margin-top:5px;color:var(--muted);font-size:10px}.speeds{display:flex;gap:3px}.speeds button{font-size:12px;padding:9px 11px;background:transparent}.speeds .selected,#pause{background:var(--green);color:white}aside{background:#fffef9;border:1px solid var(--line);border-radius:16px;padding:22px}.profile{display:flex;align-items:center;gap:12px}.avatar{width:50px;height:50px;background:#ecd9ba;border:4px solid #f3e9d8;border-radius:50%;font-size:33px;text-align:center;color:#7d624b}.profile small{color:var(--muted);font-size:10px}.profile h2{margin:3px 0;font-size:19px}.profile span{font-size:10px}.profile button{margin-left:auto;background:none;padding:5px}.money{margin:20px 0;padding:16px;background:#eef3e9;border-radius:10px}.money small{display:block;color:#738271;font-size:10px}.money strong{display:block;font-size:29px;margin:5px 0}.money div{font-size:10px;color:#74866e}.stat{margin:14px 0}.statline{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px}.bar{height:5px;background:#edf0e8;border-radius:5px;overflow:hidden}.bar div{height:100%;border-radius:5px;transition:width .4s}.mini{display:flex;justify-content:space-between;margin-top:16px;font-size:10px}.mini span{color:var(--muted)}.bottom{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px;margin-top:22px}.decision,.journal{border:1px solid var(--line);background:#fffef9;border-radius:16px;padding:24px}.sectiontitle{display:flex;justify-content:space-between;align-items:center}.pill{font-size:10px;background:#f7ebd8;color:#a77d48;padding:6px 10px;border-radius:20px}.decision h2{font-size:23px;margin:18px 0 7px}.decision p{font-size:12px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.choice{text-align:left;line-height:1.6;background:#fafbf4;border:1px solid #d9e1d3;border-radius:10px;padding:14px;transition:.15s}.choice:hover{border-color:#6f927b;transform:translateY(-2px)}.choice b{display:block;font-size:13px}.choice small{display:block;color:#7b897b;font-size:10px;margin-top:7px}.choice em{font-style:normal;font-size:20px;display:block;margin-bottom:9px}.decisionfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:10px}.decisionfoot button{background:var(--green);color:white;font-size:11px}.journal h2{font-size:16px;margin:0}.journal .sectiontitle{margin-bottom:15px}.log{border-left:1px solid #dbe1d4;padding:0 0 16px 14px;position:relative;font-size:11px;line-height:1.6}.log:before{content:'';width:6px;height:6px;background:#b8c9a6;border-radius:50%;position:absolute;left:-4px;top:5px}.log small{display:block;color:#95a08d;font-size:9px}#logs{max-height:282px;overflow:auto}footer{display:flex;gap:20px;align-items:center;padding:24px 0;color:#96a08f;font-size:9px}footer button{margin-left:auto;font-size:10px;background:none}dialog{border:1px solid var(--line);border-radius:18px;max-width:470px;width:90%;padding:28px;color:var(--ink);background:var(--bg);line-height:1.8}dialog::backdrop{background:#173c3277;backdrop-filter:blur(4px)}dialog button{background:var(--green);color:white;margin-top:16px}dialog input{padding:10px;width:100%;font:inherit;border:1px solid var(--line);border-radius:8px}.tag{background:#eef3e9;padding:12px;border-radius:8px} @media(min-width:1400px){canvas{height:410px}.caption{top:360px}}@media(max-width:850px){main{padding:26px 4%}.layout,.bottom{grid-template-columns:1fr}.layout aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.money{margin:0}#stats{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.mini{margin:4px 0}canvas{height:340px}.caption{top:290px}.journal{max-height:260px}.headnote{display:none}h1{font-size:23px}.date b{font-size:14px}.intro p{font-size:11px}footer{flex-wrap:wrap}footer span:nth-child(2){width:100%;order:3}}@media(max-width:500px){header{height:80px}.brand{font-size:25px}.intro{align-items:flex-start;gap:8px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:20px}.date{min-width:84px}.date span{font-size:9px}.date b{font-size:12px}.scenehead{left:10px;right:10px}.scenehead span{font-size:9px;padding:8px}.choices{grid-template-columns:1fr}.choice{display:grid;grid-template-columns:30px 1fr;padding:12px;column-gap:10px}.choice em{grid-row:1/3;margin:0}.choice small{margin:3px 0}.decision{padding:18px}.decision h2{font-size:20px}.transport{padding:14px 12px}.transport b{font-size:10px}.transport small{font-size:8px}.decisionfoot{align-items:flex-start}.decisionfoot button{min-width:145px}.profile{gap:8px}aside{padding:17px}.money strong{font-size:24px}}
.onlinebar{display:flex;align-items:center;gap:12px;min-height:35px;margin:-10px 0 15px;font-size:11px;color:#738976}.onlinebar .error{color:#b26647}.onlinebar button{font-size:10px;padding:6px 10px}.sharedworld{background:#ecf1e6;border:1px solid #d7e0d0;padding:23px;border-radius:16px;margin-bottom:23px}.sharedworld h2{font-size:20px;margin:8px 0}.sharedworld .sectiontitle>div:last-child{font-size:11px;color:#6d836d}.sharedworld button{background:transparent;font-size:22px;padding:6px 8px}#worldstats{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin:20px 0}.worldmetric>span{font-size:11px}.worldmetric strong{display:block;font-size:24px;margin:8px 0}.worldmetric strong small{font-size:10px;font-weight:normal;color:#8b9985;margin-left:4px}.worldmetric>small{font-size:9px;display:block;margin-top:7px;color:#82947d}#worldeffect{font-size:11px;line-height:1.8;margin:0;padding-top:12px;border-top:1px solid #d5dfce}#receipt{font-size:11px;line-height:1.8;margin-top:12px;padding:12px;background:#fffef8;border-radius:9px}.impact{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #dce5d4;color:#53735a;font-size:10px}.worldjournal{margin-top:23px;border-top:1px solid var(--line);padding-top:18px}.worldjournal h2{font-size:18px;margin-bottom:6px}.worldjournal p{font-size:11px}#worldfeed{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.worldlog{padding:12px 15px;border-left:2px solid #b4c4a4;background:#f0f2e9;border-radius:0 8px 8px 0}.worldlog b{display:block;font-size:11px;font-weight:normal}.worldlog small{display:block;font-size:9px;color:#88967e;line-height:1.8;margin-top:5px}.choice{text-decoration:none}.choice .impact{grid-column:1/-1}.choices:has(.impact){align-items:stretch}@media(max-width:600px){#worldstats{grid-template-columns:repeat(3,1fr);gap:18px}.sharedworld{padding:18px}.sharedworld h2{font-size:17px}.sharedworld .sectiontitle{align-items:flex-start}.sharedworld .sectiontitle>div:last-child{text-align:right;max-width:100px}.choice:has(.impact){display:block}#worldfeed{grid-template-columns:1fr}.worldmetric strong{font-size:21px}.impact{margin-top:9px}#worldeffect{font-size:10px}}
.reality,.civic{padding:24px;border:1px solid var(--line);border-radius:16px;background:#fffef8;margin:22px 0}.reality h2,.civic h2{font-size:21px;margin:8px 0}.reality .pill{white-space:nowrap}#facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.fact strong,.fact span,.fact small{display:block}.fact strong{font-size:22px;color:#416757}.fact span{font-size:11px;margin:9px 0 5px}.fact small{font-size:9px;color:#899581}details{margin-top:18px;border-top:1px solid var(--line);padding-top:15px;font-size:11px}summary{cursor:pointer;color:#6b8067}.source{padding:12px 0;border-bottom:1px solid var(--line)}.source a{color:#53735a;font-weight:bold}.source small{display:block;margin-top:7px;color:#94a08c}.source p{font-size:11px}.civiccolumns{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:20px 0}.civic h3{font-size:14px;margin:16px 0}.civic p{font-size:12px}.civic small{font-size:10px;line-height:1.8;color:#809174}.civic label{display:block;font-size:11px;margin:15px 0 8px}.civic select{width:100%;border:1px solid var(--line);background:#f3f5ed;padding:12px;border-radius:8px;font:inherit;color:var(--ink)}#civicactions button{display:block;background:#315c4d;color:white;margin:12px 0;width:100%}.candidate{border:1px solid var(--line);padding:17px;border-radius:10px;margin:10px 0;background:#f7f8ef}.candidate b{font-size:13px}.candidate span{font-size:11px;color:#b47e4e}.candidate button{display:block;margin-top:12px;width:100%}.candidate small{display:block}.policygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}#qualification p{font-size:11px;padding:6px 0;border-bottom:1px solid var(--line)}@media(max-width:750px){#facts{grid-template-columns:repeat(2,1fr)}.civiccolumns{grid-template-columns:1fr}.policygrid{grid-template-columns:repeat(2,1fr)}.reality,.civic{padding:18px}.reality .sectiontitle{align-items:flex-start}.reality .pill{font-size:8px}.fact strong{font-size:18px}.reality h2,.civic h2{font-size:18px}}@media(max-width:400px){.policygrid{grid-template-columns:1fr}}
.civicjump{margin-left:auto;text-decoration:none;color:#52725c;font-size:12px;white-space:nowrap}.civicjump+.outline{margin-left:0}html{scroll-behavior:smooth}@media(max-width:500px){header{gap:12px}.civicjump{font-size:9px}.outline{font-size:10px;padding:9px}.brand{font-size:22px}.brand small{font-size:6px}}
#careers{scroll-margin-top:20px}.careerfilters,.careerbuttons{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.careerfilters input{flex:1;min-width:180px}.careerfilters input,.careerfilters select{padding:12px;border:1px solid #d7dacf;background:#fffdf6;border-radius:9px;font:inherit}.careercolumns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}.agencyitem{display:block;text-align:left;width:100%;background:#f7f6ef;color:#314a40;border:1px solid #dce1d5;border-radius:9px;padding:12px 15px;margin-bottom:8px;white-space:normal}.agencyitem small{display:block;margin-top:5px;color:#738173}.agencyitem.selected{background:#e6eddf;border-color:#738d6d}.agencydetail{background:#f3f1e6;border-radius:16px;padding:24px;align-self:start;overflow-wrap:anywhere}.agencydetail button{display:block;margin:12px 0;white-space:normal}.agencydetail a{display:block;margin:14px 0;font-size:13px}.knowledgegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.knowledge{border:1px solid #dce1d5;border-radius:10px;padding:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.knowledge span{width:100%;font-size:13px}.knowledge b{margin-right:auto}.knowledge button{padding:6px 10px}.careerresult{background:#e9ecde;border-left:3px solid #738d6d;padding:12px}#agencypages{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.careercolumns{grid-template-columns:1fr}.knowledgegrid{grid-template-columns:repeat(2,1fr)}header{flex-wrap:wrap}.civicjump{font-size:12px}.agencydetail{padding:18px}}
.populationtotals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0}.populationmetric{background:#f1f3e9;border:1px solid #e0e5d6;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:7px;min-width:0}.populationmetric strong{font-size:clamp(20px,2.4vw,32px);color:#385b47;font-variant-numeric:tabular-nums}.populationmetric b{font-size:13px}.populationmetric small{font-size:11px;color:#778074;line-height:1.6}.populationcolumns{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:28px 0}.populationbar{margin:15px 0}.populationbar>div:first-child{display:flex;justify-content:space-between;gap:14px;font-size:13px;margin-bottom:8px}.populationbar .bar>div{height:100%;background:#8ba880;min-width:1px}.populationbar small{display:block;font-size:11px;color:#7c8277;margin-top:6px}.population #populationclock{font-size:12px}.districtheading select{padding:10px;border-radius:8px;border:1px solid #cbd5c4;background:#fafaf3;font:inherit}.districtgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}#districtpopulation{padding:22px;border-radius:15px;border:1px solid #dce1d5;margin:18px 0}#districtpopulation h3{margin-top:0}@media(max-width:700px){.populationtotals{grid-template-columns:repeat(2,minmax(0,1fr))}.populationcolumns{grid-template-columns:1fr;gap:10px}.districtgroups{grid-template-columns:repeat(2,minmax(0,1fr))}.districtheading{align-items:flex-start;gap:14px;flex-direction:column}.populationmetric{padding:13px}}
/* อาชีพในเมือง */
#jobs{scroll-margin-top:20px}.licensegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.licensecard{border:1px solid #dce1d5;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.licensecard b{font-size:13px}.licensecard small{display:block}.licensecard button{margin-top:auto}.jobreq p{margin:4px 0}.jobreq .ok{color:#4f7a56}.jobreq .no{color:#a8643f}.ladder{font-size:12px;line-height:1.9;background:#f3f1e6}.badgebasis{display:inline-block;font-size:10px;padding:3px 8px;border-radius:12px;background:#eef3e9;color:#4f7a56}.badgebasis.game{background:#f7ebd8;color:#a77d48}@media(max-width:700px){.licensegrid{grid-template-columns:1fr}}
.agencydetail a{color:#3f6a52}

#next{display:none}

/* สุขภาพและวิถีชีวิต */
#health{scroll-margin-top:20px}.healthcols{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:18px 0}.riskrow{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:8px 0;border-bottom:1px solid var(--line)}.riskrow small{display:block;color:#809174}.riskrow b.good{color:#4f7a56}.riskrow b.bad{color:#a8643f}.risktotal{font-size:15px;margin:12px 0}.condcard{border:1px solid #dce1d5;border-radius:10px;padding:12px;margin:10px 0}.condcard .careerbuttons{margin:8px 0 0}.condcard button.on{background:var(--green);color:#fff}.healthbtns{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}@media(max-width:700px){.healthcols{grid-template-columns:1fr}}

/* ชีพจรเมือง */
#pulse{scroll-margin-top:20px}.pulsegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.spark{background:#f1f3e9;border:1px solid #e0e5d6;border-radius:14px;padding:14px;min-width:0}.spark .sparkhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}.spark strong{font-size:18px;font-variant-numeric:tabular-nums}.spark svg{display:block;width:100%;height:56px;margin-top:8px}.spark small{display:block;color:#7c8277;font-size:10px;margin-top:4px}.spark .up{color:#4f7a56}.spark .down{color:#a8643f}.pulseevent{border-left:3px solid #d68051;background:#f7ebd8;border-radius:0 10px 10px 0;padding:10px 14px;margin:8px 0;font-size:12px}.pulseevent small{display:block;color:#8a7350;margin-top:3px}@media(max-width:900px){.pulsegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* เงินเดือนตามช่วงอายุและเขต */
#wages{scroll-margin-top:20px}.tablewrap{overflow-x:auto;margin:10px 0}.tablewrap.tall{max-height:460px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}.wagetable{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}.wagetable th,.wagetable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.wagetable th{position:sticky;top:0;background:#f3f1e6;font-weight:bold;z-index:1}.wagetable th:first-child,.wagetable td:first-child{text-align:left}.wagetable td.jobs{text-align:left;white-space:normal;min-width:200px;color:#6b7a68;font-size:11px}.wagetable .few{opacity:.55;font-style:italic}.wagetable td.up{color:#4f7a56}.wagetable td.down{color:#a8643f}.peoplegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.person{border:1px solid #dce1d5;border-radius:12px;padding:14px;background:#f7f8ef;font-size:12px;line-height:1.7}.person b{font-size:14px}.person small{display:block}.person .inc{font-size:16px;color:#385b47;font-weight:bold}@media(max-width:900px){.peoplegrid{grid-template-columns:1fr}}
.leftsecond td:nth-child(2),.leftsecond th:nth-child(2){text-align:left!important}

/* วัด พระ และด้านมืด */
#darkside{scroll-margin-top:20px}.darkcols{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:18px 0}.darkcard{border:1px solid #dce1d5;border-radius:12px;padding:14px;margin:10px 0;background:#f7f8ef}.darkcard.danger{border-color:#e0b9a3;background:#faf0e8}.darkcard b{font-size:13px}.darkcard small{display:block;margin-top:4px}.darkcard .careerbuttons{margin:10px 0 0}.darkcard .bar{margin:8px 0}@media(max-width:900px){.darkcols{grid-template-columns:1fr}}
/* แบนเนอร์โฆษณา */
#adbanner{position:relative;max-width:1480px;margin:14px auto 0;padding:0 5%}#adbanner .adlink{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:26px 22px 14px;border-radius:14px;text-decoration:none;color:#fff;background:linear-gradient(100deg,#264a3d,#3f6e5c 55%,#7c9c85);box-shadow:0 2px 10px #24452b14}#adbanner .adlink:hover{filter:brightness(1.06)}#adbanner .adtext b{display:block;font-size:18px;letter-spacing:.5px}#adbanner .adtext small{display:block;margin-top:3px;opacity:.9;font-size:12px}#adbanner .adcta{white-space:nowrap;background:#fffef8;color:#264a3d;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:bold}#adbanner .adimg{padding:0;min-height:0;background:none;overflow:hidden;box-shadow:none}#adbanner .adimg img{display:block;width:100%;max-height:120px;object-fit:cover;border-radius:14px}#adbanner .adtag{position:absolute;top:6px;left:calc(5% + 10px);font-size:9px;background:#fffef8d9;color:#6b7a68;border-radius:8px;padding:2px 7px}#adbanner .adclose{position:absolute;top:6px;right:calc(5% + 8px);width:24px;height:24px;padding:0;border-radius:50%;background:#fffef8d9;color:#264a3d;font-size:15px;line-height:1}@media(max-width:600px){#adbanner .adlink{flex-wrap:wrap;padding:36px 16px 16px}#adbanner .adtext b{font-size:15px}}
#adbanner .adicon{width:44px;height:44px;border-radius:10px;flex:none}#adbanner .adlink:not(.adimg){justify-content:flex-start}#adbanner .adtext{flex:1;min-width:0}#adbanner .adcta{margin-left:auto}
/* ผู้เล่นด้วยกัน */
#social{scroll-margin-top:20px}#socialtabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}#socialtabs button{font-size:12px;padding:8px 14px;background:#eef1e8}#socialtabs button.on{background:var(--green);color:#fff}.chatlist{height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:#fbfbf4;padding:8px;margin:10px 0}.chatmsg{padding:6px 8px;border-radius:8px;margin:4px 0;font-size:13px;line-height:1.6;background:#f1f3e9}.chatmsg.mine{background:#e3eedf}.chathead{display:flex;gap:8px;align-items:baseline}.chathead small{color:#8a9684;font-size:10px}.chathead button{margin-left:auto;padding:0 6px;font-size:10px;background:none;color:#a8643f}.chathead button+button{margin-left:0}.chatform{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.chatform input,.chatform select{flex:1;min-width:160px;padding:10px;border:1px solid #d7dacf;border-radius:9px;font:inherit}
/* บทแนะนำ */
#tutorial{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(600px,94vw);background:#fffef8;border:2px solid #315c4d;border-radius:16px;padding:18px 20px;box-shadow:0 8px 30px #16322a40;z-index:80}#tutorial b{font-size:16px;color:#264a3d}#tutorial p{font-size:13px;line-height:1.8;margin:8px 0 12px;color:#4d5e55}.tutdots{display:flex;gap:5px;margin-bottom:12px}.tutdots span{width:7px;height:7px;border-radius:50%;background:#d9e0d3}.tutdots span.on{background:#315c4d}.tutbtns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.tutbtns button{font-size:13px}.tutbtns .primary{background:var(--green);color:#fff}.tutfocus{outline:3px solid #d68051;outline-offset:6px;border-radius:12px;animation:tutpulse 1.6s ease-in-out infinite}@keyframes tutpulse{50%{outline-color:#f0c9a8}}

/* โครงแท็บ + HUD */
body[data-tab="play"] [data-tab]:not([data-tab="play"]),body[data-tab="career"] [data-tab]:not([data-tab="career"]),body[data-tab="life"] [data-tab]:not([data-tab="life"]),body[data-tab="people"] [data-tab]:not([data-tab="people"]),body[data-tab="city"] [data-tab]:not([data-tab="city"]){display:none!important}
#appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 5%;border-bottom:1px solid var(--line)}
#tabs{display:flex;gap:4px}#tabs button{position:relative;display:flex;align-items:center;gap:6px;padding:9px 14px;background:transparent;border-radius:10px;font-size:14px}#tabs button.on{background:var(--green);color:#fff}#tabs .tabicon{font-size:16px}#tabs .tabdot{position:absolute;top:4px;right:6px;width:10px;height:10px;border-radius:50%;background:#d6533c;border:2px solid #fff}
#hud{display:flex;align-items:center;gap:12px;font-size:13px;flex-wrap:wrap}#hud .hudage{font-weight:bold}#hud .hudmoney.neg,#hud .hudhealth.low{color:#b8452d;font-weight:bold}#hud button{padding:6px 12px;font-size:13px}#hud .hudpause{background:var(--green);color:#fff;min-width:38px}#hud .hudevent{background:#d6533c;color:#fff;animation:hudpulse 1.4s ease-in-out infinite}#hud .hudconn{color:#7aa57a;font-size:11px}#hud .hudconn.bad{color:#d6533c}#hud .hudauto{background:none;border:1px solid #cdd5c8;font-size:11px;color:var(--muted)}#hud .hudauto.on{color:var(--green);border-color:var(--green)}@keyframes hudpulse{50%{filter:brightness(1.2)}}
.hintcard{background:#fff8ec;border:1px solid #f0d9b8;border-radius:14px;padding:14px 18px;margin:0 0 20px}.hintcard b{font-size:13px;color:#a77d48}.hintrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;line-height:1.7}.hintrow button{flex:none;padding:7px 14px;font-size:12px;background:var(--green);color:#fff}
#toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);max-width:min(560px,92vw);background:#264a3d;color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;line-height:1.6;box-shadow:0 6px 24px #16322a55;z-index:70}
.choice{min-height:84px}.choice:hover{box-shadow:0 4px 14px #315c4d22}
@media(max-width:700px){#appbar{padding:6px 3%;flex-direction:column;align-items:stretch;gap:4px}#hud{justify-content:space-between;gap:8px}#hud .hudauto{display:none}#tabs{position:fixed;left:0;right:0;bottom:0;z-index:55;background:#fbfcf7;border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom));justify-content:space-around}#tabs button{flex:1;flex-direction:column;gap:1px;padding:6px 2px;font-size:10px;border-radius:8px}#tabs .tabicon{font-size:20px}#tabs .tabdot{top:2px;right:calc(50% - 20px)}body{padding-bottom:70px}#tutorial{bottom:78px}#toast{top:auto;bottom:80px}.hintrow{flex-direction:column;align-items:flex-start}}