/* ═══════════ MY LITTLE WORLD — styles ═══════════ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; }
body {
  font-family:'Nunito','Segoe UI',system-ui,Arial,sans-serif;
  background:#aee3f5; color:#37474f; touch-action:none; user-select:none;
}
#game { position:fixed; inset:0; display:block; }
.hidden { display:none !important; }
canvas { image-rendering:auto; }

/* ── HUD ─────────────────────────────────────────── */
#hud { position:fixed; inset:0; pointer-events:none; z-index:20; }
#hud-left {
  position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.88); border-radius:40px; padding:6px 18px 6px 6px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
#hud-avatar { border-radius:50%; }
#hud-name { font-weight:800; font-size:16px; color:#455a64; }
#hud-coins {
  position:absolute; top:12px; right:112px; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.88); border-radius:40px; padding:8px 18px;
  font-weight:900; font-size:19px; color:#e67e22; box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.coin-ico { font-size:19px; }
#hud-buttons { position:absolute; top:10px; right:12px; display:flex; gap:8px; }
.hbtn {
  pointer-events:auto; width:46px; height:46px; border:none; border-radius:16px;
  background:rgba(255,255,255,.92); font-size:22px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.15); transition:transform .12s, background .12s;
}
.hbtn:hover { transform:translateY(-2px) scale(1.06); background:#fff; }
.hbtn:active { transform:scale(.94); }

#quest-tracker {
  position:fixed; top:74px; left:12px; z-index:19;
  background:rgba(255,255,255,.9); border-radius:16px; padding:10px 16px;
  box-shadow:0 4px 12px rgba(0,0,0,.12); font-size:14px; font-weight:700; color:#5d4037;
}
.qt-row { padding:2px 0; }
.qt-more { opacity:.65; font-size:12px; }

#hint-bar {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:19;
  background:rgba(55,71,79,.85); color:#fff; border-radius:30px; padding:9px 22px;
  font-size:14px; font-weight:700; white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis;
}

#interact-btn {
  position:fixed; bottom:76px; right:20px; z-index:21;
  background:linear-gradient(180deg,#ffd54f,#ffb300); color:#5d4037;
  border:3px solid #fff; border-radius:22px; padding:12px 20px;
  font-size:17px; font-weight:900; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25); animation:pulse 1.6s infinite;
  display:flex; align-items:center; gap:8px; max-width:70vw;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
#interact-key {
  background:#5d4037; color:#ffd54f; border-radius:8px; padding:2px 8px; font-size:14px;
}

#emote-bar {
  position:fixed; bottom:140px; right:20px; z-index:21; display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.92); padding:10px; border-radius:20px; box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.emote-btn { width:52px; height:52px; font-size:26px; border:none; border-radius:14px; background:#f5f5f5; cursor:pointer; transition:transform .1s; }
.emote-btn:hover { transform:scale(1.12); background:#fff; }

/* joystick */
#joystick { position:fixed; inset:0; pointer-events:none; z-index:15; }
#joy-base {
  position:absolute; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.25); border:3px solid rgba(255,255,255,.5);
}
#joy-knob {
  position:absolute; left:26px; top:26px; width:68px; height:68px; border-radius:50%;
  background:rgba(255,255,255,.75); box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* ── panels ──────────────────────────────────────── */
#overlay { position:fixed; inset:0; background:rgba(38,50,56,.45); backdrop-filter:blur(3px); z-index:30; }
#panel-root { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:31; pointer-events:none; }
.panel {
  pointer-events:auto; background:#fffdf7; border-radius:26px; padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); max-width:min(94vw,760px); width:520px;
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
}
.panel.wide { width:min(94vw,900px); }
.panel::-webkit-scrollbar { width:10px; }
.panel::-webkit-scrollbar-thumb { background:#ffe082; border-radius:6px; }

.panel h2 { color:#5d4037; font-size:22px; margin-bottom:14px; text-align:center; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.panel-head h2 { margin-bottom:0; text-align:left; }
.coins-big { font-weight:900; font-size:18px; color:#e67e22; background:#fff3e0; padding:6px 16px; border-radius:30px; }
.coins-big.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* buttons */
.btn {
  font-family:inherit; border:none; border-radius:16px; padding:11px 20px;
  font-size:16px; font-weight:800; cursor:pointer; background:#eceff1; color:#455a64;
  transition:transform .1s, filter .1s;
}
.btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn:active { transform:scale(.95); }
.btn.primary { background:linear-gradient(180deg,#66bb6a,#43a047); color:#fff; }
.btn.green { background:linear-gradient(180deg,#26c6da,#00acc1); color:#fff; }
.btn.amber { background:linear-gradient(180deg,#ffb74d,#fb8c00); color:#fff; }
.btn.warn { background:#ffe0b2; color:#e65100; }
.btn.danger { background:#ffcdd2; color:#c62828; }
.btn.big { width:100%; padding:15px; font-size:18px; margin-bottom:10px; }
.btn.huge { padding:18px 46px; font-size:22px; }
.btn.close { padding:8px 14px; font-size:16px; background:#eceff1; }
.btn:disabled { opacity:.6; cursor:default; transform:none; }
.key { background:rgba(0,0,0,.15); border-radius:6px; padding:1px 7px; font-size:12px; }
.linklike { background:none; border:none; color:#1e88e5; font-weight:800; cursor:pointer; font-size:14px; font-family:inherit; }

/* title */
.titlecard { text-align:center; padding:30px 10px; }
.logo-rainbow { font-size:84px; animation:floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
.titlecard h1 { font-size:42px; color:#5d4037; margin:8px 0 6px; letter-spacing:.5px; }
.titlecard .tag { color:#8d6e63; font-weight:700; margin-bottom:26px; }
.titlecard .small { margin-top:16px; color:#a1887f; font-size:13px; }

/* creator */
.creator-body { display:flex; gap:18px; }
.creator-preview { flex:0 0 220px; }
.creator-preview canvas { background:#e1f5fe; border-radius:20px; }
.creator-opts { flex:1; min-width:0; }
.opt-row { margin-bottom:10px; }
.opt-row label { display:block; font-size:13px; font-weight:800; color:#8d6e63; margin-bottom:4px; }
.swatches { display:flex; flex-wrap:wrap; gap:7px; }
.swatch {
  width:34px; height:34px; border-radius:12px; border:3px solid #fff; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .1s;
}
.swatch:hover { transform:scale(1.12); }
.swatch.sel { border-color:#43a047; box-shadow:0 0 0 3px #a5d6a7; }
.swatch.icon { position:relative; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:2px solid #ffe0b2; background:#fff8e1; border-radius:20px; padding:5px 13px; font-weight:800; font-size:13px; color:#8d6e63; cursor:pointer; font-family:inherit; }
.chip.sel { background:#fb8c00; color:#fff; border-color:#e65100; }
.row { display:flex; gap:10px; margin-top:14px; justify-content:center; align-items:center; }
.creator .row { justify-content:center; }
input[type=text], #pet-name, #mp-code {
  font-family:inherit; font-size:17px; font-weight:800; padding:10px 16px;
  border:3px solid #ffe0b2; border-radius:14px; outline:none; width:100%;
  text-align:center; letter-spacing:1px;
}
#mp-code { text-transform:uppercase; width:160px; letter-spacing:4px; font-size:20px; }
input:focus { border-color:#ffb300; }

/* store */
.cats, .tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.cat {
  border:2px solid #e0e0e0; background:#fafafa; border-radius:20px; padding:7px 16px;
  font-weight:800; font-size:14px; color:#78909c; cursor:pointer; font-family:inherit;
}
.cat.sel { background:#42a5f5; color:#fff; border-color:#1e88e5; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.item-card {
  background:#fff; border-radius:18px; padding:10px; text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.08); border:2px solid transparent;
  display:flex; flex-direction:column; gap:6px; transition:transform .12s;
}
.item-card:hover { transform:translateY(-3px); }
.item-card.owned { border-color:#b2dfdb; background:#f1fdfa; }
.item-card.pop { animation:pop .4s; }
@keyframes pop { 0%{transform:scale(.8)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} }
.item-visual { background:#f8fdff; border-radius:14px; }
.item-name { font-weight:800; font-size:14px; color:#546e7a; }
.item-price { font-weight:900; color:#e67e22; font-size:14px; }
.item-card .btn { padding:8px 10px; font-size:14px; }
.empty { grid-column:1/-1; text-align:center; color:#b0bec5; font-weight:700; padding:30px; }
.hint-line { margin-top:12px; text-align:center; font-weight:800; color:#e65100; min-height:22px; }

/* airport */
.dest-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.dest-card {
  border:none; border-radius:22px; padding:20px 10px; cursor:pointer; font-family:inherit;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.1); text-align:center;
  transition:transform .14s; border:3px solid transparent;
}
.dest-card:hover { transform:translateY(-4px) scale(1.03); border-color:#ffd54f; }
.dest-card.cur { opacity:.55; cursor:default; }
.dest-icon { font-size:52px; margin-bottom:8px; border-radius:18px; padding:10px; }
.dest-name { font-weight:900; font-size:17px; color:#5d4037; }
.dest-sub { font-size:12px; color:#a1887f; margin-top:4px; min-height:16px; font-weight:700; }

/* quests */
.quest-loc { font-weight:900; color:#8d6e63; margin:14px 0 8px; font-size:15px; }
.quest-row {
  display:flex; gap:12px; align-items:center; background:#fff; border-radius:16px;
  padding:12px; margin-bottom:8px; border:2px solid #f5f5f5;
}
.quest-row.active { border-color:#ffe082; background:#fffde7; }
.quest-row.done { opacity:.6; }
.q-ico { font-size:30px; }
.q-main { flex:1; min-width:0; }
.q-title { font-weight:900; color:#5d4037; }
.q-desc { font-size:13px; color:#90a4ae; }
.q-prog { font-size:13px; font-weight:900; color:#fb8c00; margin-top:3px; }
.q-side { text-align:center; }
.q-reward { font-weight:900; color:#e67e22; margin-bottom:6px; }

/* multiplayer */
.mp-status { text-align:center; font-weight:800; padding:10px; border-radius:14px; background:#f5f5f5; color:#90a4ae; margin-bottom:14px; }
.mp-status.ok { background:#e8f5e9; color:#2e7d32; }
.mp-or { text-align:center; color:#b0bec5; font-weight:800; margin:14px 0; }
.mp-code-box { text-align:center; margin-bottom:14px; }
.mp-code-label { font-weight:800; color:#8d6e63; font-size:14px; margin-bottom:6px; }
.mp-code {
  font-size:38px; font-weight:900; letter-spacing:8px; color:#5d4037;
  background:#fff8e1; border-radius:16px; padding:8px 20px; display:inline-block; margin-bottom:8px;
}
.mp-players { margin:12px 0; }
.mp-p { display:flex; align-items:center; gap:8px; font-weight:800; padding:7px 12px; color:#546e7a; }
.dot { width:12px; height:12px; border-radius:50%; background:#66bb6a; }
.dot.me { background:#1e88e5; }
.mp-wait { text-align:center; font-weight:800; color:#90a4ae; padding:20px; }

/* adopt */
.adoptpanel { text-align:center; }
.adoptpanel canvas { background:#fff3e0; border-radius:20px; margin:10px 0; }
.lbl { font-weight:800; color:#8d6e63; margin:8px 0 6px; }
.adoptpanel .row input { flex:1; max-width:220px; }

/* settings */
.set-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 4px; font-weight:800; color:#546e7a; flex-wrap:wrap; }
.set-sep { height:2px; background:#f0f0f0; margin:6px 0; }
input[type=range] { width:180px; accent-color:#fb8c00; }
input[type=checkbox] { width:24px; height:24px; accent-color:#43a047; }

/* menu */
.menupanel { text-align:center; }

/* toasts */
#toasts { position:fixed; top:130px; left:50%; transform:translateX(-50%); z-index:40; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast {
  background:rgba(55,71,79,.92); color:#fff; font-weight:800; font-size:15px;
  border-radius:30px; padding:10px 24px; box-shadow:0 6px 18px rgba(0,0,0,.3);
  animation:toastin .3s; max-width:88vw; text-align:center;
}
@keyframes toastin { from{opacity:0; transform:translateY(-12px) scale(.9)} to{opacity:1} }
.toast.out { opacity:0; transition:opacity .4s; }

/* travel */
#travel-anim {
  position:fixed; inset:0; z-index:50; background:linear-gradient(180deg,#64b5f6,#b3e5fc);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; overflow:hidden;
}
#travel-plane { font-size:90px; position:relative; left:-120vw; }
#travel-plane.go { animation:fly 2.2s ease-in-out forwards; }
@keyframes fly {
  0% { left:-120vw; top:20vh; transform:rotate(8deg); }
  100% { left:120vw; top:-10vh; transform:rotate(-6deg); }
}
#travel-text { font-size:24px; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
#travel-anim::after {
  content:'☁️ ☁️ ☁️'; font-size:40px; letter-spacing:60px; opacity:.8; animation:cloudmove 6s linear infinite;
}
@keyframes cloudmove { from{transform:translateX(20vw)} to{transform:translateX(-20vw)} }

#fade { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity .7s; z-index:49; }
#fade.on { opacity:1; }

/* decorate bar */
.d-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:25;
  background:rgba(255,253,247,.97); border-top:3px solid #ffe082;
  padding:10px 14px; box-shadow:0 -6px 20px rgba(0,0,0,.15);
}
.d-items { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:8px; }
.d-item {
  position:relative; flex:0 0 auto; border:3px solid #fff; border-radius:14px;
  background:#fff; cursor:pointer; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.d-item.sel { border-color:#43a047; box-shadow:0 0 0 3px #a5d6a7; }
.d-count {
  position:absolute; bottom:-6px; right:-6px; background:#fb8c00; color:#fff;
  font-size:11px; font-weight:900; border-radius:10px; padding:1px 7px;
}
.d-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.d-tip { text-align:center; font-size:12px; color:#a1887f; font-weight:700; margin-top:7px; }
.d-empty { color:#b0bec5; font-weight:800; padding:10px; }

/* rotate hint */
#rotate-hint {
  position:fixed; inset:0; z-index:60; background:rgba(38,50,56,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  color:#fff; font-size:22px; font-weight:900; text-align:center; padding:20px;
}
#rotate-dismiss { margin-top:8px; }

/* small screens */
@media (max-width:640px){
  .panel { width:94vw; padding:14px; border-radius:20px; }
  .creator-body { flex-direction:column; align-items:center; }
  .creator-opts { width:100%; }
  #hud-coins { right:104px; font-size:16px; padding:6px 12px; }
  .hbtn { width:42px; height:42px; font-size:19px; }
  #interact-btn { bottom:88px; }
  .titlecard h1 { font-size:32px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); }
}