:root{
  --bg:#7ec8e3; --ground:#8ed08a; --panel:#fffdf5; --ink:#2b2b2b;
  --line:#e7dfc8; --gold:#ffcc33; --green:#3fbf5f; --red:#ef5350; --blue:#4a90d9;
  --shadow:0 6px 0 rgba(0,0,0,.18);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;font-family:"Baloo 2","Comic Sans MS","Segoe UI",system-ui,sans-serif;
  background:#5bb0cf;color:var(--ink);user-select:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

#game{position:fixed;inset:0;display:flex;flex-direction:column;max-width:820px;margin:0 auto;
  background:linear-gradient(#bfe8f5 0%,var(--bg) 45%,var(--ground) 45%,#8ed08a 100%);
  overflow:hidden}
#game.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}
  40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,3px)}}
#game.goldflash::after{content:"";position:absolute;inset:0;background:var(--gold);opacity:.55;
  pointer-events:none;animation:fade .5s forwards;z-index:60}
@keyframes fade{to{opacity:0}}

/* ---------- HUD ---------- */
#hud{position:relative;z-index:20;display:grid;gap:6px 10px;padding:8px 10px;
  grid-template-columns:auto 1fr auto;align-items:center;
  background:var(--panel);border-bottom:4px solid var(--line);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hud-money{display:flex;gap:6px}
.chip{background:#fff4d6;border:3px solid var(--gold);border-radius:999px;padding:2px 10px;font-size:15px;white-space:nowrap}
#emergencyChip.chip{border-color:var(--red);background:#ffe0de}
.hud-level{display:flex;align-items:center;gap:8px;justify-self:center}
#levelRing{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:16px;border:3px solid #2f6cae}
#xpBar{width:90px;height:12px;background:#e9e3cf;border-radius:999px;overflow:hidden;border:2px solid var(--line)}
#xpFill{display:block;height:100%;width:0;background:var(--green);transition:width .4s}
.hud-smiley{display:flex;gap:1px;font-size:18px;justify-self:end}
.hud-smiley .lost{filter:grayscale(1);opacity:.35}
.hud-orders{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;min-height:0}
.order-strip{display:flex;align-items:center;gap:2px;background:#eef6ff;border:2px solid var(--blue);
  border-radius:10px;padding:1px 6px;font-size:15px}
.order-strip b{font-size:12px}
.hud-emergency{grid-column:1/-1;justify-self:start}

/* ---------- nav ---------- */
#nav{position:relative;z-index:20;display:flex;background:var(--panel);border-top:4px solid var(--line)}
.navbtn{flex:1;font-size:26px;padding:8px 0;border-right:2px solid var(--line);transition:background .1s}
.navbtn:last-child{border-right:none}
.navbtn.active{background:var(--gold)}
.navbtn .badge{position:absolute;margin:-14px 0 0 6px;font-size:12px;background:var(--red);color:#fff;
  border-radius:999px;padding:0 4px;font-weight:bold}

/* ---------- screen ---------- */
#screen{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.pad{padding:12px}
h2.sec{font-size:16px;margin:4px 4px 10px;text-align:center;opacity:.7}

/* map */
#mapWrap{position:relative;width:100%;height:100%;min-height:420px}
.building{position:absolute;transform:translate(-50%,-50%);text-align:center;transition:transform .1s}
.building:active{transform:translate(-50%,-50%) scale(.92)}
.building .b-ico{font-size:46px;line-height:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.2))}
.building .b-label{font-size:12px;background:#fff;border-radius:8px;padding:0 5px;border:2px solid var(--line);display:inline-block}
.building .b-mood{font-size:20px;position:absolute;top:-14px;right:-6px}
.building .b-warn{position:absolute;top:-10px;left:-8px;font-size:16px;background:#fff;border-radius:50%;
  border:2px solid var(--red);padding:0 3px;font-weight:bold;color:var(--red)}
.building.emergency .b-ico{animation:pulseRed .6s infinite}
.grimebar{width:52px;height:7px;background:#dfeee0;border:2px solid #fff;border-radius:999px;overflow:hidden;margin:2px auto 0}
.grimebar i{display:block;height:100%;background:linear-gradient(90deg,#8bd18b,#e6b800,var(--red))}
@keyframes pulseRed{50%{filter:drop-shadow(0 0 10px var(--red)) brightness(1.2)}}
@keyframes float{50%{transform:translateY(-5px)}}
.hint-arrow{position:absolute;font-size:34px;animation:bob .7s infinite;pointer-events:none;z-index:30}
@keyframes bob{50%{transform:translateY(10px)}}

/* card grids */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:12px}
.card{background:var(--panel);border:3px solid var(--line);border-radius:var(--r);padding:10px;
  text-align:center;box-shadow:var(--shadow)}
.card:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.card.locked{filter:grayscale(.7);opacity:.7}
.card.owned{border-color:var(--green)}
.card.mock{border-color:#c9a3ff;background:linear-gradient(#fff,#f7f0ff)}
.card.limited{border-color:#ff9a3c;background:linear-gradient(#fff,#fff2e4)}
.price.rbx{background:#eafaf0;border-color:#00b06b;color:#00814e}
.card .big{font-size:40px;line-height:1.1}
.card .price{font-size:14px;background:#fff4d6;border:2px solid var(--gold);border-radius:999px;
  display:inline-block;padding:0 8px;margin-top:4px}
.card .strip{font-size:24px;display:flex;justify-content:center;align-items:center;gap:2px}
.card .strip b{font-size:13px}
.card small{display:block;font-size:22px;margin-top:4px}

/* house interior */
#room{position:relative;width:100%;height:100%;min-height:420px;
  background:linear-gradient(#f3e2c7 0 62%,#c98d5a 62% 66%,#a5713f 66% 100%)}
#room .grimeOverlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent,rgba(120,20,10,.4));
  pointer-events:none;opacity:0;transition:opacity .5s}
.fixture{position:absolute;transform:translate(-50%,-50%);font-size:40px;text-align:center;transition:transform .1s}
.fixture:active{transform:translate(-50%,-50%) scale(.9)}
.fixture.broken{animation:float 1.4s infinite}
.fixture.broken::after{content:"⚠️";position:absolute;top:-16px;right:-14px;font-size:20px}
.fixture.fixed{filter:none}
.fixture.fixed::after{content:"✅";position:absolute;top:-14px;right:-12px;font-size:22px}
.fixture.ndone{opacity:.25}
#backBtn{position:absolute;top:10px;left:10px;font-size:22px;background:var(--panel);border:3px solid var(--line);
  border-radius:12px;padding:4px 10px;z-index:5}

/* matrix */
.matrix{width:100%;border-collapse:separate;border-spacing:3px;padding:8px;font-size:20px}
.matrix th,.matrix td{background:var(--panel);border-radius:8px;text-align:center;padding:5px;min-width:34px}
.matrix th{background:#eef6ff}
.matrix td.br{background:#ffe3e0;cursor:pointer}
.matrix td.fx{background:#e2f6e5}
.matrix td.wk{background:#fff2cc}
.matrix td.na{background:#f0eee6;opacity:.4}

/* ---------- puzzle ---------- */
#puzzleOverlay{position:absolute;inset:0;z-index:50;background:rgba(20,30,40,.55);
  display:flex;align-items:center;justify-content:center;padding:14px}
.puzzle{background:var(--panel);border:4px solid var(--gold);border-radius:24px;width:100%;max-width:460px;
  padding:16px;box-shadow:0 10px 0 rgba(0,0,0,.25)}
.puzzle .pTitle{font-size:40px;text-align:center}
.pSlots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0;min-height:56px}
.pSlot{width:48px;height:48px;border-radius:12px;border:3px dashed #c9c0a4;display:grid;place-items:center;
  font-size:24px;position:relative;background:#fff}
.pSlot.done{border-style:solid;border-color:var(--green);background:#e2f6e5}
.pSlot.cur{border-color:var(--gold);border-style:solid;animation:pulseGold .7s infinite}
.pSlot.cur::before{content:"⬇️";position:absolute;top:-26px;font-size:22px;animation:bob .7s infinite}
@keyframes pulseGold{50%{box-shadow:0 0 0 6px rgba(255,204,51,.4)}}
.pTray{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pTok{width:56px;height:56px;border-radius:14px;background:#fff;border:3px solid var(--line);
  display:grid;place-items:center;font-size:26px;position:relative}
.pTok:active{transform:translateY(3px)}
.pTok.buy::after{content:"🛒";position:absolute;top:-10px;right:-10px;font-size:18px}
.pTok.wrongwrong{animation:shake .3s}
.pQ{text-align:center}
.pQ .qIco{font-size:50px}
.pQbtns{display:flex;gap:14px;justify-content:center;margin-top:12px}
.pQbtns button{font-size:38px;background:#fff;border:3px solid var(--line);border-radius:16px;padding:6px 18px}
.pClose{display:block;margin:10px auto 0;font-size:20px;background:#eee;border-radius:10px;padding:4px 14px}
.pShop{text-align:center}
.pShop .row{display:flex;gap:8px;justify-content:center;font-size:30px;margin:10px 0}
.pShop button{font-size:20px;background:var(--gold);border-radius:12px;padding:6px 16px;box-shadow:var(--shadow)}

/* ---------- travel ---------- */
#travelOverlay{position:absolute;inset:0;z-index:45;background:#9bd4ea;overflow:hidden}
#road{position:absolute;left:0;right:0;bottom:30%;height:40px;background:repeating-linear-gradient(90deg,#555 0 40px,#ffd23f 40px 70px)}
#cart{position:absolute;bottom:calc(30% + 30px);left:-80px;font-size:60px;animation:drive var(--dur,2s) linear forwards}
@keyframes drive{to{left:110%}}

/* ---------- fx ---------- */
#fxLayer,#toastLayer{position:absolute;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.coinfly{position:absolute;font-size:24px;animation:coinfly .8s ease-in forwards}
@keyframes coinfly{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
.confetti{position:absolute;width:10px;height:14px;top:40%;animation:conf 1s ease-out forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
.toast{position:absolute;left:50%;top:38%;transform:translateX(-50%);font-size:44px;
  animation:toast 1.1s ease-out forwards;text-shadow:0 3px 0 rgba(0,0,0,.15)}
@keyframes toast{0%{transform:translate(-50%,10px) scale(.4);opacity:0}
  25%{transform:translate(-50%,0) scale(1.15);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-40px) scale(1);opacity:0}}

/* ---------- big stamp ---------- */
#bigStamp{position:absolute;inset:0;z-index:90;display:grid;place-items:center;background:rgba(0,0,0,.6)}
#bigStamp .st{font-size:22vw;color:var(--red);border:12px solid var(--red);border-radius:20px;padding:10px 24px;
  transform:rotate(-12deg);background:rgba(255,255,255,.9);font-weight:bold;animation:stamp .4s}
@keyframes stamp{0%{transform:rotate(-12deg) scale(3);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}

#muteBtn{position:absolute;right:8px;bottom:64px;z-index:40;font-size:20px;background:var(--panel);
  border:3px solid var(--line);border-radius:50%;width:40px;height:40px}

/* welcome / tutorial banner */
.mime{display:flex;gap:6px;justify-content:center;font-size:30px;margin:8px 0}
.mime b{animation:mimeb 1.2s infinite}
.mime b:nth-child(2){animation-delay:.2s}
.mime b:nth-child(3){animation-delay:.4s}
@keyframes mimeb{50%{transform:translateY(-8px)}}
.center-note{max-width:420px;margin:24px auto;background:var(--panel);border:4px solid var(--gold);
  border-radius:24px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.center-note .big{font-size:54px}
.center-note button{font-size:24px;background:var(--green);color:#fff;border-radius:14px;padding:8px 22px;
  box-shadow:0 5px 0 #2c9247;margin-top:10px}