*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f7f5;color:#142019;font:14px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
button{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}

/* START SCREEN */
.start{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:radial-gradient(circle at top,#dcefe5,#f4f7f5 55%)}
#start{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:radial-gradient(circle at top,#dcefe5,#f4f7f5 55%)}
.logo{display:grid;place-items:center;background:#075e3b;color:white;font-weight:900;width:72px;height:72px;border-radius:22px;font-size:36px;margin:0 auto}
.badge,label{background:#e7f3ed;color:#075e3b;padding:7px 12px;border-radius:20px;font-size:10px;font-weight:800;letter-spacing:.7px}
#start h1{font-size:clamp(44px,10vw,72px);margin:18px 0 5px}
#start h1 em{color:#075e3b;font-style:normal}
#start p{max-width:550px;color:#718078;line-height:1.6}
.starter{width:min(600px,100%);display:flex;justify-content:space-around;background:white;border:1px solid #e1e9e4;border-radius:18px;padding:18px;margin:18px 0}
.starter small,.starter b{display:block}
.starter small{color:#718078;font-size:10px}
.starter b{margin-top:5px}
#start>button{width:min(600px,100%);padding:15px;border-radius:12px;background:#075e3b;color:#fff;font-weight:800;margin:4px}
.start.secondary,#start .secondary{background:#e8efeb;color:#075e3b}
#start>small{color:#718078;font-size:10px;margin-top:10px}

/* HEADER */
header{height:68px;background:#fff;border-bottom:1px solid #e1e9e4;display:flex;align-items:center;justify-content:space-between;padding:0 max(15px,calc((100vw - 1100px)/2));position:sticky;top:0;z-index:10}
.brand{display:flex;gap:9px;align-items:center}
.brand i{width:39px;height:39px;border-radius:12px;background:#075e3b;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900}
.brand b,.brand small,.headmoney small,.headmoney b{display:block}
.brand small,.headmoney small,.who small{color:#718078;font-size:10px}
.headRight{display:flex;align-items:center;gap:14px}
.headmoney{text-align:right}
.headmoney b{color:#075e3b;font-weight:900}
.hearts,.profileHearts{color:#d9344b;letter-spacing:3px;font-size:14px;font-weight:900;white-space:nowrap}

/* PLAYER CARD BELOW HEADER */
.player{max-width:1100px;margin:auto;padding:14px 18px;display:flex;align-items:center;gap:10px}
.avatar{width:43px;height:43px;border-radius:50%;background:#075e3b;color:white;display:grid;place-items:center;font-weight:900}
.who{flex:1}
.who b,.who small{display:block}
.player>span{font-size:10px;background:white;border:1px solid #e1e9e4;border-radius:20px;padding:7px 10px;color:#718078}
.player>span b{color:#075e3b;font-weight:900}

/* TOAST NOTIFICATIONS */
#toast{position:fixed;top:80px;left:50%;transform:translate(-50%,-15px);opacity:0;background:#17231d;color:#fff;padding:11px 15px;border-radius:12px;z-index:30;transition:.25s;font-size:12px;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* PAGES */
.page{max-width:1100px;margin:auto;padding:5px 18px 100px}
.title{display:flex;justify-content:space-between;align-items:center;margin:10px 0 18px}
.title small{color:#075e3b;font-size:10px;font-weight:900;letter-spacing:1px}
.title h2{margin:3px 0;font-size:28px}
.controlHint{font-size:10px;color:#718078;background:#fff;border:1px solid #e1e9e4;border-radius:20px;padding:8px 11px}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats article,.quick button,.grid article,.products article,.row,.profile,.profileStats,.airport,.wallet{background:white;border:1px solid #e1e9e4;border-radius:15px}
.stats article{padding:15px;color:#718078;font-size:11px}
.stats article span{display:block;font-size:18px;margin-bottom:5px}
.stats article b{display:block;color:#142019;margin-top:7px;font-size:16px;font-weight:900}

/* HERO SECTION */
.hero{margin-top:14px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#075e3b,#0c8052);color:white;display:flex;justify-content:space-between;align-items:center}
.hero p{color:#dcefe5;max-width:650px;margin:5px 0 0}
.hero b{display:block;font-size:12px;margin-bottom:8px;opacity:.9}
.hero h2{margin:0;font-size:32px}
.hero button{background:#fff;color:#075e3b;border-radius:10px;padding:11px 15px;font-weight:800}

/* QUICK ACTIONS */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick button{text-align:left;padding:16px;font-size:24px;cursor:pointer}
.quick button:active{transform:scale(.98)}
.quick b,.quick small{display:block}
.quick b{font-size:14px;margin-top:10px;font-weight:900}
.quick small{color:#718078;font-size:10px;margin-top:3px}

/* GAME WORLD */
.gameWorldWrap{position:relative;border:1px solid #d8e4dc;border-radius:20px;background:#d8eadb;box-shadow:0 10px 30px rgba(16,48,31,.08);overflow:hidden;touch-action:none}
.worldHud{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}
.worldHud span,.worldHud small{background:rgba(255,255,255,.92);border:1px solid rgba(15,65,39,.12);border-radius:12px;padding:7px 10px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.worldHud span{color:#075e3b;font-size:10px;font-weight:900;letter-spacing:.5px}
.worldHud small{color:#617068;font-size:10px}
.game-world{position:relative;width:100%;aspect-ratio:960/560;min-height:300px;overflow:hidden;background:#b9d8b8;display:block}

/* PLAYER CHARACTER */
.world-player{position:absolute;width:30px;height:42px;z-index:10;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.22));pointer-events:none;transition:none}
.playerHead{position:absolute;width:17px;height:17px;left:6.5px;top:0;border-radius:50%;background:#7b4b2b;border:2px solid #f1c8a5}
.playerBody{position:absolute;width:24px;height:24px;left:3px;top:14px;border-radius:9px 9px 5px 5px;background:#075e3b;border:2px solid #064b30;overflow:visible}
.playerBody:after,.playerBody:before{content:"";position:absolute;bottom:-9px;width:5px;height:10px;background:#1f2930;border-radius:3px}
.playerBody:before{left:4px}
.playerBody:after{right:4px}
.playerNameTag{position:absolute;left:50%;top:-19px;transform:translateX(-50%);background:#142019;color:#fff;border-radius:8px;padding:2px 5px;font-size:7px;font-weight:900;letter-spacing:.4px}

/* EQUIPMENT ON PLAYER */
.world-player .playerBackpack{position:absolute;left:-2px;top:13px;width:29px;height:28px;border-radius:7px 7px 9px 9px;z-index:-1;opacity:0;transform:translateZ(0)}
.world-player .playerBackpack.eq-student-backpack{opacity:1;background:#6b2d2d;border:2px solid #4b2020;box-shadow:inset 0 0 0 3px #8f4b4b,0 2px 3px rgba(0,0,0,.15)}
.world-player .playerBackpack.eq-student-backpack:before,.world-player .playerBackpack.eq-student-backpack:after{content:"";position:absolute;top:2px;width:6px;height:23px;border:2px solid #c89b64;border-radius:5px}
.world-player .playerBackpack.eq-student-backpack:before{left:-5px}
.world-player .playerBackpack.eq-student-backpack:after{right:-5px}

.world-player .equipment-top,.world-player .equipment-bottom,.world-player .equipment-shoes{position:absolute;display:block;pointer-events:none;z-index:2}
.world-player .equipment-top{left:3px;top:14px;width:24px;height:24px;border-radius:9px 9px 5px 5px;background:#075e3b;border:2px solid #064b30}
.world-player .equipment-top.eq-aaua-hoodie{background:#075e3b;border-color:#043d28;box-shadow:inset 0 -5px 0 rgba(255,255,255,.07)}
.world-player .equipment-top.eq-aaua-hoodie:before{content:"A";position:absolute;top:7px;left:8px;width:8px;height:8px;color:#fff;font-size:6px;font-weight:900}
.world-player .equipment-top.eq-campus-t-shirt{background:#e8e8e8;border-color:#bfc5c1}
.world-player .equipment-top.eq-campus-t-shirt:before{content:"";position:absolute;top:6px;left:5px;width:14px;height:8px;background:#075e3b;border-radius:2px}
.world-player .equipment-top.eq-traditional-outfit{background:repeating-linear-gradient(45deg,#8d2436 0 4px,#d5a43c 4px 8px,#174d39 8px 12px);border-color:#6e1b2a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}

.world-player .equipment-bottom{left:7px;top:35px;width:16px;height:14px;border-radius:2px 2px 5px 5px;background:transparent;z-index:3}
.world-player .equipment-bottom:before,.world-player .equipment-bottom:after{content:"";position:absolute;top:0;width:7px;height:14px;border-radius:2px 2px 4px 4px;background:#26313a}
.world-player .equipment-bottom:before{left:0}
.world-player .equipment-bottom:after{right:0}
.world-player .equipment-bottom.eq-jeans{opacity:1}
.world-player .equipment-bottom.eq-traditional-outfit:before,.world-player .equipment-bottom.eq-traditional-outfit:after{background:repeating-linear-gradient(90deg,#8d2436 0 3px,#d5a43c 3px 6px,#174d39 6px 9px)}

.world-player .equipment-shoes{left:4px;top:46px;width:22px;height:7px;z-index:4;opacity:0}
.world-player .equipment-shoes:before,.world-player .equipment-shoes:after{content:"";position:absolute;width:8px;height:5px;background:#20252a;border-radius:4px;bottom:0}
.world-player .equipment-shoes:before{left:0}
.world-player .equipment-shoes:after{right:0}
.world-player .equipment-shoes.eq-sneakers{opacity:1}
.world-player .equipment-shoes.eq-sneakers:before,.world-player .equipment-shoes.eq-sneakers:after{background:#f2f2f2;border:1px solid #17212a;box-shadow:inset 0 -2px 0 #075e3b}

/* NPC LAYER */
.npc-layer,#npcLayer{position:absolute;inset:0;z-index:5;pointer-events:none}
.npc{position:absolute;width:30px;height:44px;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.22));pointer-events:none;transition:none}
.npc .npc-head{position:absolute;width:17px;height:17px;left:6.5px;top:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:#7b4b2b}
.npc .npc-body{position:absolute;width:24px;height:24px;left:3px;top:14px;border-radius:9px 9px 5px 5px;background:#274c77;border:2px solid rgba(0,0,0,.12)}
.npc .npc-body:before,.npc .npc-body:after{content:"";position:absolute;bottom:-9px;width:5px;height:10px;border-radius:3px;background:#202a2f}
.npc .npc-body:before{left:4px}
.npc .npc-body:after{right:4px}
.npc .npc-tag{position:absolute;left:50%;top:-18px;transform:translateX(-50%);background:rgba(20,32,25,.88);color:#fff;border-radius:7px;padding:2px 5px;font-size:6.5px;font-weight:900;white-space:nowrap;opacity:.8}
.npc.female .npc-head{border-radius:48% 48% 44% 44%;box-shadow:0 -3px 0 2px #201711}
.npc.staff .npc-body{background:#6b4a2e}
.npc.security .npc-body{background:#303943}
.npc.light .npc-head{background:#b9784b}
.npc.dark .npc-head{background:#59351f}
.npc.blue .npc-body{background:#2c5f9e}
.npc.pink .npc-body{background:#a64b69}
.npc.gold .npc-body{background:#8d6a1d}
.npc.wander .npc-tag{opacity:0}

/* NPC INTERACTION */
.npc-interaction{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:12;pointer-events:auto}
.npc-interaction-card{display:flex;align-items:center;gap:9px;padding:8px 9px;background:rgba(255,255,255,.97);border:1px solid #d8e4dc;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.16);min-width:190px}
.npc-mini-avatar,.npc-dialog-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#075e3b;position:relative;overflow:hidden}
.npc-mini-avatar:before,.npc-dialog-avatar:before{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:#7b4b2b;left:10px;top:5px}
.npc-mini-avatar:after,.npc-dialog-avatar:after{content:"";position:absolute;width:21px;height:18px;border-radius:8px 8px 3px 3px;background:#2c5f9e;left:6px;bottom:2px}
.npc-interaction-card b,.npc-interaction-card small{display:block}
.npc-interaction-card small{font-size:9px;color:#718078;margin-top:2px}
.npc-interaction-card>div:nth-child(2){flex:1}
.npc-interaction-card button{padding:8px 11px;background:#075e3b;color:#fff;border-radius:9px;font-size:10px;font-weight:800}

/* NPC DIALOG */
.npc-dialog{position:absolute;inset:0;z-index:15;background:rgba(10,25,17,.22);display:grid;place-items:center;padding:18px;pointer-events:auto}
.npc-dialog-card{width:min(390px,92%);background:#fff;border:1px solid #d8e4dc;border-radius:18px;padding:18px;box-shadow:0 15px 40px rgba(0,0,0,.25);position:relative;display:flex;flex-direction:column}
.dialogClose{position:absolute;right:10px;top:8px;width:30px;height:30px;border-radius:50%;background:#edf3ef;color:#375448;font-size:20px;cursor:pointer;border:0}
.npc-dialog-avatar{width:54px;height:54px;float:left;margin-right:12px;margin-bottom:5px}
.npc-dialog-avatar:before{width:19px;height:19px;left:17px;top:7px}
.npc-dialog-avatar:after{width:31px;height:26px;left:11px}
.dialogText{min-height:95px;padding-top:3px}
.dialogText>b,.dialogText>small{display:block}
.dialogText>b{font-size:15px;margin-bottom:4px}
.dialogText>small{font-size:10px;color:#718078;margin-bottom:10px}
.dialogText p{clear:both;margin:14px 0 16px;line-height:1.55;color:#33443b}
.npc-dialog-card>.action{width:100%;align-self:flex-end;margin-top:auto}

/* TOUCH CONTROLS */
.touch-controls{position:absolute;right:14px;bottom:14px;width:126px;height:126px;z-index:7;display:grid;grid-template-columns:42px 42px 42px;grid-template-rows:42px 42px 42px;gap:0;filter:drop-shadow(0 5px 12px rgba(0,0,0,.16))}
.touch-btn{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.9);color:#075e3b;border:1px solid #d5e3d9;font-weight:900;font-size:16px;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-btn:active,.touch-btn.pressed{background:#075e3b;color:#fff;transform:scale(.96)}
.touch-btn.up{grid-column:2;grid-row:1}
.touch-btn.left{grid-column:1;grid-row:2}
.touch-btn.down{grid-column:2;grid-row:3}
.touch-btn.right{grid-column:3;grid-row:2}

/* PLACES GRID */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.grid article{padding:15px}
.grid article b,.grid article small{display:block}
.grid article b{font-weight:900;margin-top:5px}
.grid article small{color:#718078;margin-top:5px;line-height:1.5}

/* JOBS/TRAVEL LIST */
.list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.row{padding:14px;display:flex;align-items:center;gap:12px;background:white;border:1px solid #e1e9e4;border-radius:15px}
.icon{width:45px;height:45px;border-radius:12px;background:#e7f3ed;display:grid;place-items:center;font-size:22px;flex:0 0 45px}
.row .info{flex:1}
.row .info b,.row .info small{display:block}
.row .info b{font-weight:900}
.row .info small{color:#718078;font-size:10px;margin-top:4px}
.amount{color:#075e3b;font-weight:900;font-size:12px}
.action{background:#075e3b;color:#fff;padding:9px 12px;border-radius:10px;font-size:11px;font-weight:800;cursor:pointer;border:0}

/* SHOP TABS */
.tabs{display:flex;gap:7px;overflow:auto;margin-bottom:12px}
.tabs button{white-space:nowrap;background:#fff;border:1px solid #e1e9e4;border-radius:20px;padding:8px 13px;font-size:11px;cursor:pointer}
.tabs button.active{background:#075e3b;color:#fff}

/* PRODUCTS GRID */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.products article{padding:14px;display:flex;flex-direction:column}
.productIcon{height:105px;background:#f0f5f2;border-radius:12px;display:grid;place-items:center;font-size:45px;margin-bottom:10px}
.products h3{font-size:13px;margin:0 0 4px;font-weight:900}
.products small{color:#718078;font-size:10px}
.productBottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

/* AIRPORT/TRAVEL */
.airport{padding:18px;display:flex;gap:13px;align-items:center;background:#fff9df;border:1px solid #f1e4a9;border-radius:15px;margin-bottom:14px}
.airport small{display:block;color:#766f51;margin-top:4px;font-size:10px}
.airport b{display:block;font-weight:900}

/* WALLET */
.wallet{padding:25px;background:linear-gradient(135deg,#075e3b,#0c8052);color:#fff;border-radius:15px;margin-bottom:14px}
.wallet small,.wallet span{display:block;font-size:10px}
.wallet b{display:block;font-size:34px;margin:8px 0;font-weight:900}
.wallet span{opacity:.75}

/* TRANSACTIONS */
.transaction{background:#fff;border:1px solid #e1e9e4;padding:13px;display:flex;gap:10px;align-items:center;border-radius:15px;margin-bottom:10px}
.transaction .info{flex:1}
.transaction .info b,.transaction .info small{display:block}
.transaction .info b{font-weight:900}
.transaction .info small{color:#718078;font-size:9px;margin-top:2px}
.transaction .amount{font-weight:900}
.credit{color:#087443}
.debit{color:#b42318}

/* PROFILE */
.profile{text-align:center;padding:25px;background:white;border:1px solid #e1e9e4;border-radius:15px}
.bigavatar{width:75px;height:75px;border-radius:50%;background:#075e3b;color:white;display:grid;place-items:center;font-weight:900;margin:auto}
.profile p{color:#718078;margin:8px 0}
.profileHearts{margin-top:10px}
.profile h2{margin:15px 0 5px;font-size:24px}

.profileStats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0}
.profileStats div{text-align:center;padding:15px;border-right:1px solid #e1e9e4}
.profileStats div:last-child{border:0}
.profileStats div b{display:block;color:#142019;font-size:16px;margin-top:5px;font-weight:900}
.profileStats div small{color:#718078;font-size:10px}

/* SAVE BUTTON */
.save{width:100%;padding:13px;background:#075e3b;color:#fff;border-radius:12px;font-weight:800;cursor:pointer;border:0;margin-top:16px}
.save:active{transform:scale(.98)}

/* EQUIPMENT PANEL */
.equipment-panel{margin-top:16px;padding:16px;border:1px solid #e1e9e4;border-radius:16px;background:#fff}
.equipment-title{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:12px}
.equipment-title small{color:#718078;font-size:9px;font-weight:900}
.equipment-title h3{margin:3px 0 0;font-weight:900}
.equipment-title>span{font-size:9px;color:#718078;text-align:right}
.equipment-list{display:grid;gap:8px}
.equipment-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e1e9e4;border-radius:12px;background:#fbfcfb;cursor:pointer}
.equipment-item:active{transform:scale(.98)}
.equipment-item.equipped{border-color:#8bc2a4;background:#f1faf5}
.equipment-icon{width:42px;height:42px;border-radius:10px;background:#edf4ef;display:grid;place-items:center;font-size:24px;flex:0 0 42px}
.equipment-info{flex:1}
.equipment-info b,.equipment-info small{display:block}
.equipment-info b{font-size:12px;font-weight:900}
.equipment-info small{font-size:9px;color:#718078;margin-top:3px}
.equipment-action{padding:8px 11px;border-radius:9px;background:#075e3b;color:#fff;font-size:10px;font-weight:900;cursor:pointer;border:0}
.equipment-item.equipped .equipment-action{background:#fff;color:#075e3b;border:1px solid #b6d7c3}
.equipment-empty{padding:14px;border:1px dashed #cbd8cf;border-radius:12px;color:#718078;font-size:11px;line-height:1.5}

/* NAVIGATION */
nav{position:fixed;bottom:0;left:0;right:0;height:70px;background:#fff;border-top:1px solid #e1e9e4;display:flex;z-index:20;box-shadow:0 -5px 20px rgba(0,0,0,.05)}
nav button{flex:1;background:none;color:#7b8780;font-size:10px;max-width:120px;margin:auto;cursor:pointer;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
nav button:first-child{color:#075e3b}
nav button span{font-size:20px}
nav button small{font-size:8px;display:block}

/* RESPONSIVE DESIGN */
@media(max-width:700px){
.stats,.quick{grid-template-columns:repeat(2,1fr)}
.grid{grid-template-columns:repeat(2,1fr)}
.products{grid-template-columns:repeat(2,1fr)}
.hero{display:block}
.hero button{margin-top:8px}
.controlHint{display:none}
.worldHud small{display:none}
.game-world{min-height:260px}
.touch-controls{width:120px;height:120px;right:9px;bottom:9px}
.touch-btn{width:40px;height:40px}
.touch-controls{grid-template-columns:40px 40px 40px;grid-template-rows:40px 40px 40px}
.profileStats{grid-template-columns:1fr}
.profileStats div:not(:last-child){border-bottom:1px solid #e1e9e4;border-right:0}
}

@media(max-width:430px){
.page{padding-left:13px;padding-right:13px}
.title h2{font-size:25px}
.products .productIcon{height:90px}
.headRight{gap:8px}
.hearts{font-size:12px;letter-spacing:1px}
.game-world{min-height:235px}
.world-label{font-size:7px;padding:3px 4px}
.world-player{transform:translate(-50%,-50%) scale(.9)}
nav{height:64px}
nav button{font-size:9px}
nav button span{font-size:18px}
.starter{flex-direction:column;gap:10px;align-items:flex-start}
.stats{grid-template-columns:repeat(2,1fr)}
}