:root{--ink:#24324a;--ink2:#5b6b85;--panel:#ffffffee;--green:#37b26c;--green2:#2a9a5a;--gold:#ffc93c;--gold2:#f2a900;--blue:#5b7cfa;--red:#e8604c;--bg:#bfe6f5;
--sa-t:env(safe-area-inset-top,0px);--sa-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-weight:700;touch-action:none}
#stage{position:fixed;inset:0}
#stage canvas{width:100%;height:100%;display:block}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#hud{position:fixed;left:0;right:0;top:0;padding:calc(var(--sa-t) + 8px) 10px 0;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#hud .row{display:flex;gap:6px;align-items:center}
.chip{pointer-events:auto;background:var(--panel);border-radius:14px;padding:7px 11px;font-size:14px;box-shadow:0 2px 0 #0002,0 6px 14px #0002;display:flex;align-items:center;gap:7px;white-space:nowrap}
.chip.clock{flex:0 0 auto;font-size:13px}
.chip.kind{flex:1;min-width:0;overflow:hidden;font-size:13px;padding:7px 8px;gap:5px}
.chip.icon{width:42px;height:38px;justify-content:center;font-size:19px;padding:0}
.orb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c0,#ffc533);box-shadow:0 0 8px #ffc533;flex:0 0 auto}
.meter{flex:1;height:8px;background:#0001;border-radius:6px;overflow:hidden;min-width:30px}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd84d,#f2a900);border-radius:6px;transition:width .5s}
.meter.big{height:12px;margin-top:6px}
.speeds{gap:5px!important}
.sp{pointer-events:auto;background:var(--panel);border-radius:12px;height:34px;min-width:44px;padding:0 10px;font-size:13px;box-shadow:0 2px 0 #0002}
.sp.on{background:var(--blue);color:#fff}
.banks{gap:6px!important}
.bank{pointer-events:auto;flex:1;background:var(--panel);border-radius:14px;padding:6px 8px;box-shadow:0 2px 0 #0002,0 5px 12px #0002;display:flex;align-items:center;gap:6px;min-width:0}
.bank .be{font-size:20px}
.bank .bv{font-size:17px;line-height:1}
.bank .bl{font-size:10px;color:var(--ink2);line-height:1.1;font-weight:700}
.bank.pop{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.12)}}
#pin{position:fixed;width:54px;height:54px;margin:-62px 0 0 -27px;pointer-events:auto;display:flex;align-items:center;justify-content:center;font-size:28px;background:#fff;border-radius:50%;box-shadow:0 3px 0 #0003,0 8px 16px #0003;border:3px solid var(--gold);animation:bob 1.2s ease-in-out infinite;z-index:3}
#pin i{position:absolute;bottom:-11px;border:8px solid transparent;border-top:11px solid var(--gold);border-bottom:0}
@keyframes bob{50%{transform:translateY(-7px)}}
#work{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--sa-t) + 150px);width:min(86vw,320px);background:var(--panel);border-radius:16px;padding:10px 14px;box-shadow:0 6px 18px #0003;font-size:14px;z-index:4}
#nav{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:8px 12px calc(var(--sa-b) + 10px);justify-content:center}
.nb{flex:1;max-width:140px;height:70px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #0003,0 10px 18px #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.nb:active{transform:translateY(3px);box-shadow:0 1px 0 #0003}
.nb .ni{font-size:26px;line-height:1}.nb .nt{font-size:13px}
#bMission{background:linear-gradient(#ffe27a,#ffc93c)}
#bMission.alert .ni{animation:bob 1s infinite}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sa-b) + 96px);background:#24324aee;color:#fff;border-radius:16px;padding:10px 16px;font-size:14px;max-width:88vw;text-align:center;z-index:9;animation:up .3s}
@keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
#modal{position:fixed;inset:0;background:#10203a66;display:flex;align-items:flex-end;justify-content:center;z-index:10}
#panel{width:100%;max-width:560px;max-height:86vh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:18px 18px calc(var(--sa-b) + 18px);box-shadow:0 -8px 30px #0004;animation:slide .28s;touch-action:pan-y}
@keyframes slide{from{transform:translateY(40px);opacity:0}}
.big-btn{display:block;width:100%;min-height:54px;border-radius:18px;background:var(--green);color:#fff;font-size:18px;box-shadow:0 4px 0 var(--green2);margin-top:14px}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green2)}
.big-btn.gold{background:var(--gold);color:#4a3600;box-shadow:0 4px 0 var(--gold2)}
.big-btn.grey{background:#e8edf5;color:var(--ink);box-shadow:0 4px 0 #cfd8e6}
.big-btn[disabled]{opacity:.45}
.dlg{display:flex;gap:12px;align-items:flex-start}
.av{flex:0 0 58px;height:58px;border-radius:50%;background:#eef3fb;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:inset 0 -3px 0 #0001}
.dlg .nm{font-size:13px;color:var(--ink2);margin-bottom:3px}
.dlg .tx{font-size:18px;line-height:1.35;font-weight:700}
h2{margin:0 0 8px;font-size:22px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.tag{background:#eef3fb;border-radius:10px;padding:4px 9px;font-size:12px;color:var(--ink2)}
.star{color:var(--gold2)}
.cost{display:flex;align-items:center;justify-content:space-between;background:#fff6d6;border-radius:16px;padding:12px 14px;margin:8px 0;font-size:16px}
.cost b{font-size:24px}
.note{font-size:13px;color:var(--ink2);line-height:1.35}
.err{color:#b8341f}
.card{border-radius:18px;padding:12px 14px;margin:10px 0;line-height:1.4}
.card.rel{background:#e8f6ee}.card.cul{background:#eaf0ff}
.card .ct{font-size:13px;color:var(--ink2);margin-bottom:4px}
.card .cx{font-size:17px}
.card .cs{font-size:12px;color:var(--ink2);margin-top:6px}
.list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.li{display:flex;align-items:center;gap:12px;background:#f3f6fb;border-radius:16px;padding:10px 12px;min-height:56px;text-align:left;width:100%;font-size:16px}
.li .le{font-size:26px}
.li .lt{flex:1}
.li small{display:block;color:var(--ink2);font-size:12px}
.li.lock{opacity:.5}
.li:active{background:#e5ecf8}
.row2{display:flex;gap:8px}
.row2 .big-btn{margin-top:14px}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.seg button{background:#eef3fb;border-radius:12px;padding:9px 12px;font-size:14px}
.seg button.on{background:var(--blue);color:#fff}
input[type=number]{font:inherit;width:90px;border:2px solid #d6deec;border-radius:10px;padding:6px 8px;user-select:text;-webkit-user-select:text}
label.f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;font-size:15px}
.x{float:right;background:#eef3fb;width:38px;height:38px;border-radius:50%;font-size:18px}
.final{text-align:center}.final .bigE{font-size:64px}
#tutbox{position:fixed;inset:0;z-index:12}
[hidden]{display:none!important}

.spot{position:fixed;width:34px;height:34px;margin:-17px 0 0 -17px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#fffd;border-radius:50%;box-shadow:0 2px 0 #0003;z-index:2;cursor:pointer;opacity:.85}
.spot.new{border:2px solid var(--gold);animation:bob 1.6s ease-in-out infinite;opacity:1}
.spot[hidden]{display:none}
.bank.wallet{flex:0 0 auto;padding:6px 12px}
.sb{margin:6px 0}.sl{display:flex;justify-content:space-between;font-size:13px}
.sbar{height:9px;border-radius:5px;background:#0001;overflow:hidden}.sbar i{display:block;height:100%;border-radius:5px}
.sstack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#0001;gap:2px}.sstack i{display:block;height:100%}
.seg select{flex:1;min-width:0;font:inherit;padding:8px;border-radius:10px;border:2px solid #0002;background:#fff}
input[type=range]{width:100%}
/* Kazanç Köşesi */
.earn{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;background:#e9f3df;touch-action:pan-y}
.earn[hidden]{display:none}
.earn.t-home{background:linear-gradient(#bfe6f5,#e9f3df 40%)}
.earn.t-garden{background:linear-gradient(#cdeeff,#d6f0b8 45%,#b9dc8a)}
.earn.t-animals{background:linear-gradient(#ffeccc,#f6dca0 50%,#e8c37a)}
.earn.t-bakery{background:linear-gradient(#fff0d8,#ffd9a8 50%,#f3b97a)}
.earn.t-mill{background:linear-gradient(#dfe7f2,#c3cfe0 50%,#a7b6cc)}
.earn.t-market{background:linear-gradient(#e6f4f1,#cfe9e2 50%,#f3dcc2)}
.ehead{display:flex;align-items:center;gap:10px;padding:calc(var(--sa-t) + 10px) 12px 6px}
.eback{width:42px;height:42px;border-radius:50%;background:#fff;font-size:22px;box-shadow:0 2px 0 #0003}
.etitle{flex:1;font-size:20px;font-weight:900}
.echip{background:#fff;border-radius:14px;padding:7px 11px;font-size:15px;box-shadow:0 2px 0 #0002}
.esub{display:flex;justify-content:space-between;align-items:center;padding:0 14px 6px;font-size:13px;gap:8px;flex-wrap:wrap}
.esp{display:flex;gap:5px}.esp .sp{height:30px;min-width:38px;padding:0 6px}
.sp.on{background:var(--gold)}
.ebody{flex:1;overflow:auto;padding:4px 14px calc(var(--sa-b) + 24px);touch-action:pan-y;-webkit-overflow-scrolling:touch}
.keeper{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px}
.kav{font-size:38px;background:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 0 #0003}
.kbub{background:#fff;border-radius:6px 18px 18px 18px;padding:9px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 0 #0002}
.sec{font-size:15px;font-weight:900;margin:14px 2px 6px}
.etiles{display:grid;gap:10px}
.etile{display:flex;gap:12px;align-items:center;border-radius:20px;padding:12px;text-align:left;box-shadow:0 4px 0 #0003;width:100%;color:var(--ink)}
.etile .te{font-size:40px}.etile .tt{display:flex;flex-direction:column;gap:2px;font-size:16px}.etile small{font-size:12px;color:var(--ink2)}.etile em{font-style:normal;font-size:12px;color:#2a6b3b}
.etile.t-garden{background:#d6f0b8}.etile.t-animals{background:#f6dca0}.etile.t-bakery{background:#ffd9a8}.etile.t-mill{background:#c3cfe0}.etile.t-market{background:#cfe9e2}
.etile.lock{opacity:.55}.etile.lock em{color:var(--ink2)}
.estat{background:#ffffffb0;border-radius:14px;padding:10px 12px;margin:12px 0;font-size:13px;line-height:1.5}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ecard{background:#ffffffd8;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-size:14px;box-shadow:0 3px 0 #0002;position:relative}
.ecard.wide{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center}
.ecard .big{font-size:40px;line-height:1}.ecard small{font-size:12px;color:var(--ink2)}
.ecard.add{justify-content:center;border:3px dashed #0003;background:#ffffff80}
.ptag{position:absolute;top:6px;left:9px;font-size:11px;color:var(--ink2)}
.lease.bad{color:var(--red)}
.mini{background:var(--green);color:#fff;border-radius:12px;padding:7px 10px;font-size:13px;min-height:34px;box-shadow:0 2px 0 var(--green2);width:100%}
.mini.gold{background:var(--gold);color:#4a3600;box-shadow:0 2px 0 var(--gold2)}.mini.grey{background:#e8edf5;color:var(--ink);box-shadow:0 2px 0 #cfd8e6}.mini[disabled]{opacity:.5}
.ebar{height:9px;width:100%;border-radius:5px;background:#0001;overflow:hidden}.ebar i{display:block;height:100%;border-radius:5px;background:var(--gold2)}
.etable{background:#ffffffc8;border-radius:16px;padding:4px 6px;overflow-x:auto}
.etable .tr{display:grid;grid-template-columns:28px 1.6fr .8fr .8fr 1fr .8fr;gap:4px;align-items:center;padding:7px 4px;font-size:13px;width:100%;text-align:left;border-bottom:1px solid #0001;min-width:300px}
.etable .tr small{display:block;font-size:10px;color:var(--ink2)}.etable .th{font-size:11px;color:var(--ink2);font-weight:900}
.mrow{flex-wrap:wrap}.mrow .mini{width:auto;flex:none}
.tapbig{display:block;margin:12px auto;font-size:84px;width:150px;height:150px;border-radius:50%;background:#fff3d0;box-shadow:0 6px 0 #0003}
.tapbig.tp{animation:tp .15s}@keyframes tp{50%{transform:scale(.88)}}