/* ───────── پوسته‌ی گرم و روشن هُدو (بر پایه‌ی رنگ‌های هدهد، سفال فیروزه‌ای و زعفران) ───────── */
:root{
  --bg:#FFF8EE;--bg2:#FFF1DF;--card:#FFFFFF;--card2:#FFFAF3;--line:#EBDCC6;--line2:#D8C3A2;
  --ink:#2E2A44;--mut:#6B6684;--dim:#A39CB4;
  --ac:#1FA39B;--ac-d:#14807A;--ac-l:#79D6CF;
  --am:#F5A524;--am-d:#C27E0C;--vi:#7B6BD6;--vi-d:#5A4BB0;--co:#E5605F;--co-d:#B94343;--gr:#42B96F;--gr-d:#2C9156;
  --shadow:0 8px 24px rgba(120,84,40,.12);
}
body{background:var(--bg);
  background-image:radial-gradient(900px 520px at 90% -12%,rgba(245,165,36,.20),transparent 62%),radial-gradient(760px 480px at -10% 22%,rgba(31,163,155,.13),transparent 62%),radial-gradient(640px 420px at 70% 108%,rgba(229,96,95,.09),transparent 60%);
  background-attachment:fixed}
@media(min-width:900px){#app{background:rgba(255,255,255,.55);border-inline:1px solid var(--line);box-shadow:0 0 60px rgba(120,84,40,.08)}}

/* دکمه‌ها: متن سفید روی فیروزه‌ای */
.btn{--t:#fff}
.btn.am{--t:#4a2d00} .btn.gr{--t:#fff}
.btn[disabled]{background:#EFE5D5;color:#B3A58F;box-shadow:0 5px 0 #DCCDB4}
.btn.ghost{color:var(--ink);box-shadow:0 4px 0 var(--line);background:#fff}
.spk{color:#fff}
.mic{color:#fff}
.seg button.on{color:#fff}

/* کارت و فیلد */
.card{background:#fff;box-shadow:var(--shadow),inset 0 1px 0 #fff}
.field{background:#fff;color:var(--ink)}
.stats3 div{background:rgba(255,255,255,.7)}
.welcome h1{background:linear-gradient(120deg,var(--ink),var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
.mascot-row,.level-banner{background:rgba(255,255,255,.65);border-color:var(--line2)}
.level-banner b{background:linear-gradient(120deg,var(--am-d),var(--co));-webkit-background-clip:text;background-clip:text;color:transparent}
.meter,.prog,.seg,.mono{background:#F5EBDA}
.pill{background:#fff;box-shadow:0 2px 0 var(--line)}
.pill.fire svg{color:var(--co)} .pill.bolt svg{color:var(--am)} .pill.bell svg{color:var(--vi)}

/* نوار پایین و نوار نتیجه */
.nav{background:rgba(255,250,243,.94);border-top-color:var(--line)}
.nav button.on svg{filter:none}
.dock{background:rgba(255,252,246,.97);border-top-color:var(--line)}
.dock.ok{background:#E3F6EA;border-color:var(--gr)} .dock.no{background:#FDE6E4;border-color:var(--co)}
.dock.ok .msg{color:#1E8A4C} .dock.no .msg{color:#C3453F}
.dock .msg span{color:var(--ink)}

/* گزینه‌ها */
.opt{background:#fff;box-shadow:0 2px 0 rgba(120,84,40,.05)}
.opt .k{border-color:var(--line2);color:var(--dim)}
.opt.sel{background:#E6F6F4;border-color:var(--ac)} .opt.sel .k{color:#fff}
.opt.ok{background:#E3F6EA;border-color:var(--gr)} .opt.no{background:#FDE6E4;border-color:var(--co)}
.chip{background:#fff}
.plan{background:#fff}
.plan.sel{background:linear-gradient(120deg,#E3F5F3,#fff);border-color:var(--ac)}
.msgcard{background:#fff} .msgcard.unread{background:linear-gradient(120deg,#E8F6F4,#fff)}

/* دایره‌های مسیر */
.node.lock{background:#EADFCB;box-shadow:0 8px 0 #CDBFA6;color:#B6A98F}
.node.done{box-shadow:0 8px 0 var(--am-d),0 14px 22px rgba(194,126,12,.25)}
.node{box-shadow:0 8px 0 var(--u3),0 14px 22px rgba(60,40,10,.2)}
.node .go{background:#fff;color:var(--u3);box-shadow:var(--shadow)}
.unit-head{box-shadow:0 6px 0 var(--u3),0 14px 26px rgba(60,40,10,.18)}

/* برگه‌ها */
.sheet{background:rgba(46,42,68,.5)}
.sheet>div{background:linear-gradient(180deg,#FFFAF3,#FFF3E2);border-color:var(--line)}
.grab{background:var(--line2)}
.toast{box-shadow:0 10px 30px rgba(60,40,10,.25)}

/* ── ماسکوت: هدهد زنده ── */
.hodo{filter:drop-shadow(0 12px 12px rgba(90,60,30,.22))}
.hodo .crest{transform-origin:70px 43px;transform-box:view-box;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.hodo .cf{animation:sway var(--d,2s) ease-in-out infinite alternate;transform-origin:0 2px;transform-box:view-box}
.hodo .body{animation:breathe 3.6s ease-in-out infinite;transform-origin:70px 125px;transform-box:view-box}
.hodo .head{transform-origin:70px 92px;transform-box:view-box;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.hodo .wl,.hodo .wr{transform-box:view-box;transition:transform .4s}
.hodo .wl{transform-origin:40px 88px} .hodo .wr{transform-origin:100px 88px}
.hodo.mood-happy .wl{animation:flapL 3.4s ease-in-out infinite} .hodo.mood-happy .wr{animation:flapR 3.4s ease-in-out infinite}
.hodo.mood-wait .head{transform:rotate(-7deg)} .hodo.mood-wait .crest{transform:rotate(-6deg) scaleY(.92)}
.hodo.mood-sad{filter:saturate(.55) drop-shadow(0 12px 12px rgba(90,60,30,.22))}
.hodo.mood-sad .head{transform:translateY(5px) rotate(5deg)} .hodo.mood-sad .crest{transform:scaleY(.55) rotate(8deg)}
.hodo.mood-sad .wl{transform:rotate(7deg)} .hodo.mood-sad .wr{transform:rotate(-7deg)}
.hodo.mood-sad .lids{opacity:1} .hodo.mood-sad .eyes{animation:none}
.hodo .lids{opacity:0;transition:opacity .25s}
@keyframes sway{from{rotate:-2.5deg}to{rotate:2.5deg}}
@keyframes breathe{50%{transform:scale(1.016,1.022)}}
@keyframes flapL{0%,88%,100%{transform:rotate(0)}93%{transform:rotate(-9deg)}}
@keyframes flapR{0%,88%,100%{transform:rotate(0)}93%{transform:rotate(9deg)}}