/* The top bar's colour and its menu. Each plaque has its own tint so a glance finds it: gold Coins, terracotta Parts,
   sage Renewal, sky Happiness, warm paper Demand. Time stays on the bar (pause, speed); the other buttons live in a
   hamburger menu as big labelled tiles. Loaded after hud.css. */
.chip.card{background-image:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 60%),var(--grain);background-color:var(--tint,var(--paper))}
#coinschip{--tint:#F8E2A6}
#partschip{--tint:#F2C9BA}
#renchip{--tint:#D3E4C4}
#hpchip{--tint:#D2E3EE}
#demandw{--tint:#F5E9CF}
.brand.card{background-color:#F1E6C8}

.ctrlwrap{position:relative;flex:0 0 auto;margin-left:auto}
.ctrl{gap:8px;padding:8px}
.ctrl .ib{background:var(--tc,var(--paper-2));transition:transform .1s ease,box-shadow .1s ease,background-color .15s}
.ctrl .ib:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.ctrl .ib:active,.ctrl .ib[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#pause{--tc:#CFE3C0}
#speed{--tc:#F6DDA0;font-family:var(--display);font-weight:800;font-size:18px}
#pause[aria-pressed="true"]{--tc:#E9A593}
#menubtn{--tc:var(--action);position:relative}
#menubtn svg path{stroke:var(--action-ink)}
#menubtn[aria-expanded="true"]{--tc:var(--action-hi);transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
/* a small dot on the menu button when the menu holds something new (a milestone to look at) */
.top:has(#achvbtn .dot:not([hidden])) #menubtn::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:var(--mustard);border:2.5px solid var(--ink)}

/* The menu drops under the bar, right-aligned, and is the only thing open in the top-right corner (slot.js). */
.menu{position:absolute;top:calc(100% + 14px);right:0;z-index:30;width:344px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 14px 16px;transform-origin:top right}
.menu h3{margin:0 0 12px 4px;font-size:21px}
.menugrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:66px;gap:12px}
.menugrid>:last-child:nth-child(odd){grid-column:1/-1}
/* a tile: a round icon on the left, the name on the right (and a line of state, or Goals' charge bar, under it) */
.menugrid .ib{position:relative;width:auto;height:auto;padding:0 10px 0 9px;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:10px;align-items:center;justify-items:start;border-radius:16px;background:var(--tc,var(--paper-2));text-align:left;font-size:15px;line-height:1.15}
.menugrid .ib>svg,.menugrid .ib>.qmark{grid-column:1;grid-row:1/3;box-sizing:content-box;width:22px;height:22px;padding:6px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:block}
.menugrid .ib>.qmark{display:grid;place-items:center;font-size:20px}
.menugrid .ib::after{content:attr(data-label);grid-column:2;grid-row:1/3;align-self:center;min-width:0}
.menugrid .ib[data-sub]::after,.menugrid .goalsib::after{grid-row:1;align-self:end}
.menugrid .ib[data-sub]::before{content:attr(data-sub);grid-column:2;grid-row:2;align-self:start;margin-top:2px;font-size:12px;color:var(--ink-soft);font-weight:700}
.menugrid .goalsib .chg{position:static;grid-column:2;grid-row:2;align-self:start;margin-top:5px;width:100%;height:8px;box-sizing:border-box}
.menugrid .achvib .dot{top:8px;right:8px}
.menugrid .ib:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.menugrid .ib:active,.menugrid .ib[aria-pressed="true"]{transform:translateY(3px);box-shadow:0 1px 0 var(--ink);background:var(--tc,var(--paper-2))}
.menugrid .ib[aria-expanded="true"]{box-shadow:0 4px 0 var(--action),0 0 0 3px var(--action)}
#night{--tc:#F6DDA0}
#night[aria-pressed="true"]{--tc:#C9D3E8}
#achvbtn{--tc:#F2C9BA}
#goalsbtn{--tc:#D3E4C4}
#keysbtn{--tc:#D2E3EE}
#photobtn{--tc:#E8D9EC}
#settingsbtn{--tc:#E4D5B2}
@media (max-width:1479px){.ctrlwrap{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ctrl .ib,.menugrid .ib{transition:none}}