:root{
  --ink:#1d2540; --paper:#ffffff; --accent:#ffd23f; --blue:#2f6fe0; --green:#2fbf71; --red:#e5484d;
  --panel:rgba(255,255,255,.94); --shadow:0 6px 0 rgba(20,30,60,.25);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#9fb6d9;font-family:'Fredoka',system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud button{pointer-events:auto}
#mmWrap{display:none;position:absolute;left:16px;top:16px;width:180px;height:180px;border-radius:50%;border:6px solid #1f3b57;background:#2b4a6b;overflow:hidden;box-shadow:var(--shadow)}
#objective{position:absolute;left:18px;top:18px;background:rgba(20,30,55,.72);color:#fff;padding:6px 12px 6px 8px;border-radius:10px;font-weight:600;font-size:15px;letter-spacing:.3px;max-width:300px;text-transform:uppercase}
#objective b{background:var(--accent);color:var(--ink);border-radius:5px;padding:0 6px;margin-right:6px}
#eventTag{position:absolute;left:18px;top:58px;background:#ff7a3d;color:#fff;padding:4px 10px;border-radius:8px;font-weight:600;font-size:13px}
#eventTag:empty{display:none}
#clockBox{position:absolute;right:18px;top:12px;text-align:right}
#clock{font-size:58px;font-weight:700;color:#fff;-webkit-text-stroke:3px #1f3b57;paint-order:stroke fill;line-height:1;text-shadow:0 5px 0 #1f3b57}
#dayInfo{color:#fff;font-weight:600;font-size:14px;text-shadow:0 2px 0 #1f3b57}
#parcels{margin-top:4px;display:flex;gap:3px;justify-content:flex-end}
#parcels i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #1f3b57;display:block}
#parcels i.p{background:var(--green)}
#parcels i.l{background:var(--red)}
#moneyBar{position:absolute;right:18px;top:120px;background:var(--panel);border-radius:12px;padding:6px 12px;box-shadow:var(--shadow);font-weight:600;font-size:14px;text-align:right;min-width:190px}
#moneyBar .m{color:var(--green);font-size:20px}
#moneyBar .neg{color:var(--red)}
#jobs{position:absolute;left:16px;bottom:16px;max-width:330px;display:flex;flex-direction:column;gap:5px}
#jobs .j{background:var(--panel);border-radius:10px;padding:5px 10px;font-size:13px;box-shadow:0 3px 0 rgba(20,30,60,.2);display:flex;gap:8px;align-items:center}
#jobs .j .ic{font-size:20px}
#jobs .j .st{color:#5a6584;font-size:12px}
#jobs .j.done{outline:2px solid var(--green)}
#jobs .j.vip{outline:2px solid #b16cff}
#hints{position:absolute;right:18px;bottom:90px;color:#fff;font-weight:600;font-size:14px;text-align:right;text-shadow:0 2px 0 #1f3b57;line-height:1.55}
#hints kbd{background:#fff;color:var(--ink);border-radius:4px;padding:0 5px;margin-right:5px;font-family:inherit;font-size:12px;box-shadow:0 2px 0 #1f3b57}
#prompt{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 16px;border-radius:12px;font-weight:600;font-size:16px;box-shadow:var(--shadow);white-space:nowrap}
#prompt:empty{display:none}
#prompt kbd{background:var(--accent);color:var(--ink);border-radius:5px;padding:0 7px;margin-right:6px;font-family:inherit}
#phoneBtn{position:absolute;right:18px;bottom:18px;width:62px;height:62px;border-radius:18px;border:4px solid #1f3b57;background:var(--accent);font-size:30px;box-shadow:var(--shadow)}
#btnE{position:absolute;right:92px;bottom:18px;width:62px;height:62px;border-radius:50%;border:4px solid #1f3b57;background:#fff;font-size:26px;font-weight:700;box-shadow:var(--shadow);display:none}
@media (pointer:coarse){#btnE{display:block}#hints{display:none}}

/* Toasts */
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:40}
.toast{background:var(--ink);color:#fff;padding:8px 16px;border-radius:12px;font-weight:500;font-size:15px;box-shadow:var(--shadow);animation:tin .25s ease;max-width:88vw;text-align:center}
.toast.good{background:#1e8f55}.toast.bad{background:#c03338}.toast.info{background:#2f5fbf}
@keyframes tin{from{transform:translateY(-12px);opacity:0}}

/* Phone */
#phone{position:fixed;right:24px;top:50%;width:350px;height:660px;max-height:94vh;transform:translate(130%,-50%);transition:transform .35s cubic-bezier(.2,1.2,.4,1);background:#111827;border-radius:42px;padding:14px;box-shadow:0 20px 40px rgba(0,0,0,.4);z-index:30;display:flex;flex-direction:column}
#phone.open{transform:translate(0,-50%)}
#phone .notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#111827;border-radius:0 0 14px 14px;z-index:2}
#phoneBar{background:#f4f6fb;border-radius:30px 30px 0 0;padding:8px 22px 4px;font-size:12px;font-weight:600;display:flex;justify-content:space-between}
#phoneScreen{flex:1;background:#f4f6fb;overflow-y:auto;padding:8px 14px 14px;font-size:14px}
#phone .homebar{height:26px;background:#f4f6fb;border-radius:0 0 30px 30px;position:relative;cursor:pointer}
#phone .homebar::after{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);width:110px;height:5px;border-radius:3px;background:#111827}
@media (max-width:600px){#phone{right:4vw;width:92vw;height:88vh}}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
.app{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;text-align:center;cursor:pointer;line-height:1.1}
.app .ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.card{background:#fff;border-radius:14px;padding:10px 12px;margin:8px 0;box-shadow:0 2px 0 rgba(20,30,60,.12)}
.card h4{margin:0 0 4px;font-size:15px}
.muted{color:#6b7591;font-size:12px}
.btn{display:inline-block;border:none;border-radius:10px;padding:7px 12px;font-weight:600;background:#e7ebf5;color:var(--ink);margin:3px 3px 0 0;font-size:13px}
.btn.pri{background:var(--blue);color:#fff}.btn.ok{background:var(--green);color:#fff}.btn.warn{background:var(--red);color:#fff}.btn.y{background:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.full{display:block;width:100%;margin:6px 0;padding:11px}
.apphead{margin:-8px -14px 8px;padding:12px 14px;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.apphead .back{background:rgba(0,0,0,.12);border:none;border-radius:8px;padding:3px 9px;font-weight:700;font-size:16px}
.tabs{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.tabs .btn.on{background:var(--ink);color:#fff}
.row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.price{font-weight:700;color:#1e8f55}
.old{text-decoration:line-through;color:#a0a8bd;font-size:12px}
.prog{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0}
.prog span{width:20px;height:20px;border-radius:5px;background:#e3e7f0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.prog span.p{background:var(--green);color:#fff}.prog span.l{background:var(--red);color:#fff}
.score{display:inline-block;padding:2px 10px;border-radius:20px;color:#fff;font-weight:700}
.chat{display:flex;flex-direction:column;gap:5px;max-height:330px;overflow-y:auto}
.msg{background:#fff;border-radius:12px;padding:6px 10px;max-width:85%;font-size:13px}
.msg.me{align-self:flex-end;background:#d6f5df}
.msg b{display:block;font-size:11px;color:#2f5fbf}
input[type=text],input[type=number]{font-family:inherit;font-size:15px;padding:8px 10px;border-radius:10px;border:2px solid #d4daea;width:100%}
.sw{display:inline-block;width:30px;height:30px;border-radius:8px;border:3px solid #fff;box-shadow:0 0 0 2px #c5cce0;margin:2px;cursor:pointer}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
#mapCv{width:100%;border-radius:12px;background:#8fd17a}

/* Modal */
#modal{position:fixed;inset:0;background:rgba(15,22,45,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#modalBox{background:#fff;border-radius:20px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:18px 20px;box-shadow:0 10px 0 rgba(20,30,60,.3);font-size:15px}
#modalBox h2{margin:0 0 8px;font-size:22px}
#modalBox table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
#modalBox td{padding:4px 2px;border-bottom:1px solid #eef0f6}
#modalBox td:last-child{text-align:right;font-weight:600}
.choice{display:flex;gap:10px;margin:10px 0}
.choice > div{flex:1;border:3px solid #e1e6f2;border-radius:14px;padding:10px;cursor:pointer}
.choice > div.on{border-color:var(--blue);background:#eef4ff}
.choice .big{font-size:30px}
.jam{position:relative;height:40px;border-radius:10px;background:#e3e7f0;margin:18px 0;overflow:hidden}
.jam .zone{position:absolute;top:0;bottom:0;background:#7ee2a8}
.jam .mk{position:absolute;top:-4px;bottom:-4px;width:6px;background:var(--ink);border-radius:3px}

/* Photo */
#photoUI{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(17,24,39,.85);color:#fff;border-radius:16px;padding:10px 14px;z-index:35;text-align:center}
#photoUI .row{display:flex;gap:6px;justify-content:center;margin-top:6px}
#photoUI button{border:none;border-radius:10px;padding:7px 12px;font-weight:600}
#photoUI button.pri{background:var(--accent)}
.photoTitle{font-weight:700}

/* Title */
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.25),rgba(20,35,70,.55));z-index:60;padding:16px}
.titleCard{background:#fff;border-radius:28px;padding:26px 30px;text-align:center;box-shadow:0 12px 0 rgba(20,30,60,.35);max-width:440px;width:100%}
.logo{font-size:54px}
.titleCard h1{margin:4px 0 0;font-size:40px;line-height:1}
.titleCard h1 span{display:block;font-size:22px;color:var(--blue);letter-spacing:6px}
.sub{color:#5a6584;margin:8px 0 16px}
.small{font-size:12px;color:#8a93ad;margin-top:14px}

.keys{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;font-size:13px;align-items:center}
.keys b{font-weight:500}
.keys kbd{background:#1d2540;color:#fff;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px}
#btnE{right:18px!important}

#chatBar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,90vw);z-index:25}
#chatBar input{background:rgba(255,255,255,.96);border:3px solid #1d2540;border-radius:14px;padding:10px 14px;box-shadow:0 5px 0 rgba(20,30,60,.25)}

#modalBox.big{max-width:min(1100px,94vw);width:80vw;height:82vh;display:flex;flex-direction:column;padding:16px 18px}
#modalBox.big > div:last-child{flex:none}
.bigTop input{margin:8px 0 6px}
.bigGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-content:start;padding:2px}
.bigGrid .card{margin:0;display:flex;flex-direction:column}
.bigGrid .card .row2{margin-top:auto!important;padding-top:6px}
.prod .pic{font-size:30px}
@media (max-width:600px){#modalBox.big{width:94vw;height:88vh}}

.mapWrap{flex:1;display:flex;gap:12px;min-height:0}
.mapList{width:300px;overflow-y:auto;padding:2px}
.mapList .card{cursor:pointer;margin:0 0 8px}
.mapList .card.sel{outline:3px solid var(--blue)}
.mapCvWrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;background:#2b4a6b;border-radius:14px;padding:8px}
#mapCv2{border-radius:8px;max-width:100%;max-height:calc(100% - 44px)}
.mapInfo{color:#fff;margin-top:8px;font-weight:600;text-align:center}
@media (max-width:700px){.mapWrap{flex-direction:column}.mapList{width:auto;max-height:38%}}

.authF{text-align:left;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.authF label{font-weight:600;font-size:13px;margin-top:4px}
.authF input{font-family:inherit;font-size:15px;padding:9px 11px;border-radius:10px;border:2px solid #d4daea}
.chk{font-weight:500;font-size:12px}.chk.ok{color:#1e8f55}.chk.no{color:#c03338}
.aErr{color:#c03338;font-size:13px;min-height:16px;margin-top:4px}

.bar{height:10px;border-radius:6px;background:#e3e7f0;overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#ff7a3d)}

/* imagens dos itens, menu da Minha Loja e menu do botão direito */
.thumb{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto}
.thumbS{width:46px;height:46px;object-fit:contain;vertical-align:middle;flex:none}
.prod .pic{min-height:96px;display:flex;align-items:center;justify-content:center;background:#f4f6fb;border-radius:10px;margin-bottom:6px}
.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.menuGrid button{border:none;border-radius:16px;background:#fff;box-shadow:0 3px 0 rgba(20,30,60,.12);padding:16px 8px;font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px}
.menuGrid button span{font-size:30px}
#ctxMenu{position:fixed;z-index:45;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(20,30,60,.3);padding:6px;min-width:200px;display:flex;flex-direction:column;gap:3px}
#ctxMenu .cmT{font-weight:700;font-size:13px;padding:2px 4px 6px;border-bottom:1px solid #eef0f6;margin-bottom:3px;display:flex;align-items:center;gap:6px}
#ctxMenu button{border:none;background:none;text-align:left;padding:8px 10px;border-radius:9px;font-family:inherit;font-weight:600;font-size:14px;color:var(--ink)}
#ctxMenu button:hover{background:#eef4ff}

/* Chat Global flutuante (canto inferior direito) */
#gchat{position:fixed;right:16px;bottom:16px;width:340px;max-width:calc(100vw - 32px);z-index:24;background:#fff;border-radius:16px;box-shadow:0 6px 0 rgba(20,30,60,.25);overflow:hidden;font-size:14px}
#gchat .gcHead{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer;user-select:none}
#gchat .gcHead span{flex:1}
#gchat .gcHead b{background:#e5484d;border-radius:20px;padding:0 7px;font-size:12px}
#gchat .gcHead b:empty{display:none}
#gchat .gcHead i{font-style:normal;font-size:11px;opacity:.8}
#gchat .gcBody{display:none}
#gchat.open .gcBody{display:flex;flex-direction:column}
#gchat .gcList{height:min(320px,45vh);overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:#f4f6fb}
#gchat .gcMsg{background:#fff;border-radius:10px;padding:6px 9px;box-shadow:0 1px 0 rgba(20,30,60,.08);word-wrap:break-word}
#gchat .gcMsg.me{background:#d6f5df}
#gchat .gcMsg b{color:#2f5fbf}
#gchat .gcSend{display:flex;gap:6px;padding:8px;border-top:1px solid #eef0f6}
#gchat .gcSend input{flex:1;font-family:inherit;font-size:14px;padding:8px 10px;border-radius:10px;border:2px solid #d4daea}
#gchat .gcSend button{border:none;border-radius:10px;background:var(--blue);color:#fff;font-weight:600;padding:0 12px;font-family:inherit}
@media (pointer:coarse){#gchat{bottom:90px}}