/* Dosa Tycoon — ui501.css (5.0.1, UI501: the owner's redesign of 7 Nov). Loaded after every other stylesheet; each rule is scoped
 * to the new markup (dts-pause--tabs, the bar's 5.0.1 tiles, ...) so it sits on top of 5.0's rules without editing them.
 * Sizes on the big stage are in its px (1600 x 900, drawn at the screen's scale): calc(N / var(--stage-scale)) is N px on the
 * screen; max(N, var(--fl-deep)) keeps a small size at 12.2 px on the screen once the stage is shrunk below 0.8. */

/* ================================================================== 1. the pause menu, option A */
.dts-pause.dts-pause--tabs { width: 1100px; }
.dts-pause--tabs .dts-pause__cols { align-items: stretch; }
.dts-pause--tabs .dts-pause__main { flex: none; width: 500px; align-self: stretch; }
.dts-pause.dts-pause--tabs .dts-pause__btns { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.dts-pause.dts-pause--tabs .dts-pause__row { display: flex; flex-wrap: nowrap; gap: 14px; margin: 0; }
html .dts-pause.dts-pause--tabs .dts-pause__row > .dt-btn { flex: 1 1 0; min-width: 0; width: auto; min-height: 62px; padding: 0 14px 6px; font-size: 25px; }
html .dts-pause.dts-pause--tabs .dts-pause__row--more > .dt-btn.dt-btn { flex: 1 1 0; min-height: 52px; font-size: 21px; }
.dts-pause.dts-pause--tabs .dts-pause__row--more > .dt-btn[data-ref="whatsnew"] { order: -1; }          /* (What's new, then Duels: duelPauseMenu puts Duels first) */
.dts-pause.dts-pause--tabs .dts-pause__quit { margin-top: auto; min-height: 56px; font-size: 23px; }
.dts-pause--tabs .dts-btn-xl { min-height: 78px; }
.dts-pause--tabs .dts-pause__today { margin-top: 18px; }
.dts-pause--tabs .dts-savestat { margin-top: 12px; }
/* (TRI501) the left column is 500 px now: a big company's cash, rating and outlets (₹64,08,896 · 4.8 · 12) ran 32 px past the card's
 * right edge; they take a second line where one will not hold them, as a narrow phone's do (FIX50) */
html:not(.dt-compact) .dts-pause--tabs .dts-pause__facts { flex-wrap: wrap; column-gap: 18px; row-gap: 0; }

/* the right column: two tabs (or Settings alone, without accounts) */
.dts-pause.dts-pause--tabs .dts-pause__side { display: flex; flex-direction: column; margin-top: 18px; padding: 0 0 16px; overflow: hidden; }
.dts-ptabs { flex: none; display: flex; margin: 0; background: #F8E9C8; border-bottom: 3px solid var(--c-ink); }
.dts-ptab { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 2px 10px 4px; font: 800 max(22px, var(--fl-deep, 0px))/1 var(--font-display); color: #7A5A40; background: none; border: 0; border-left: 3px solid var(--c-ink); cursor: pointer; }
.dts-ptab:first-child { border-left: 0; }
.dts-ptab:hover { background: #FFF1C9; }
.dts-ptab.is-on { color: var(--c-ink); background: #FFFDF5; box-shadow: inset 0 -5px 0 var(--c-turmeric); }
.dts-ptab:focus-visible { outline: 4px solid var(--c-teal); outline-offset: -4px; }
.dts-ptabs--one { display: block; padding: 13px 20px 12px; font: 800 max(22px, var(--fl-deep, 0px))/1 var(--font-display); color: var(--c-ink); background: #FFFDF5; }
.dts-ppanel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 14px 20px 0; text-align: left; }
.dts-ppanel[hidden] { display: none; }

/* Settings, grouped: a small heading over each, a dashed rule between */
.dts-pgrp { width: 100%; }
.dts-pgrp[hidden] { display: none; }
.dts-pgrp + .dts-pgrp { margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(58, 31, 18, .2); }
.dts-pgrp__h { margin: 0 0 8px; font: 800 max(16px, var(--fl-deep, 0px))/1.1 var(--font-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--c-jaggery); }
.dts-pgrp__b { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dts-toggles--named { gap: 26px; }
.dts-tog { display: inline-flex; align-items: center; gap: 10px; font-size: max(19px, var(--fl-deep, 0px)); font-weight: 800; color: var(--c-ink); cursor: pointer; }
.dts-pgrp .dts-iconbtn { width: 56px; min-height: 56px; }
.dts-pgrp .dts-iconbtn > svg { width: 34px; height: 34px; }
.dts-pgrp .dts-calm { justify-content: flex-start; }
.dts-pgrp .dts-calm__label, .dts-pgrp .dts-wheel__label { display: none; }
.dts-pgrp .dts-calm__hint, .dts-pgrp .dts-wheel__hint { flex: 1 1 100%; min-height: 0; text-align: left; font-size: max(15px, var(--fl-deep, 0px)); }
.dts-pgrp .dts-wheel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dts-pgrp .dts-wheel__seg { justify-self: start; width: auto; }
.dts-pgrp .dts-wheel__opt { flex: 0 0 auto; min-width: 56px; min-height: 42px; padding: 1px 12px 4px; white-space: nowrap; font-size: max(17px, var(--fl-deep, 0px)); }
.dts-pgrp .dts-stats { flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 0; border: 0; background: none; box-shadow: none; }
.dts-pgrp .dts-stats__lead { display: none; }
.dts-pgrp .dts-stats__label { flex: 1 1 0; font-size: max(18px, var(--fl-deep, 0px)); font-weight: 700; color: var(--c-ink); }
.dts-pgrp .dts-stats__label::first-letter { text-transform: uppercase; }
.dts-pgrp .dts-stats__hint, .dts-stats__about { flex: 1 1 100%; font-size: max(15px, var(--fl-deep, 0px)); font-weight: 600; line-height: 1.2; color: #6B4A33; }
.dts-pause:not(.dts-pause--tabs) .dts-stats__about { display: none; }

/* "Your career": fenced off at the foot of Settings, in the colour of what cannot be undone */
.dts-ppanel--set > .dts-pgrp--career { margin-top: auto; padding-top: 12px; border-top: 3px solid rgba(200, 16, 46, .25); }
.dts-ppanel--set > .dts-pgrp:nth-last-child(2) { margin-bottom: 16px; }
.dts-pgrp--career .dts-pgrp__h { color: var(--c-maroon); }
.dts-pgrp--career .dts-pgrp__b { align-items: stretch; }
.dts-pgrp__row { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.dts-pgrp__row > .dt-btn { flex: 0 1 auto; min-height: 46px; padding: 0 14px 5px; font-size: max(18px, var(--fl-deep, 0px)); }
.dts-pgrp__row > .dts-pause__over { flex: none; margin: 0 0 0 auto; white-space: nowrap; }
.dts-pgrp__row > .dts-pause__once { margin: 0; }

/* Account: the online column, tidied (its eyebrow is the tab; Founders as a row; Delete on a line of its own at the very bottom) */
.dts-pause--tabs .dts-ppanel--acc .dts-online { gap: 10px; }
.dts-pause--tabs .dts-online__eyebrow { display: none; }
.dts-pause--tabs .dts-online__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.dts-pause--tabs .dts-online__btns > .dt-btn { min-width: 0; width: 100%; }
.dts-pause--tabs .dts-online__links { justify-content: flex-start; gap: 24px; }
.dts-pause--tabs .dts-share .dt-btn { width: 100%; }
.dts-online__league .dt-btn { width: 100%; justify-content: flex-start; }
.dts-online__wipe { margin-top: 2px; padding-top: 10px; border-top: 3px solid rgba(200, 16, 46, .2); }
html:not(.dt-compact) .dts-pause.dts-pause--tabs.has-online .dts-online { gap: 8px; }

/* (the big stage) the Settings tab sets the column's height, the same on either tab; the Account tab lies over it and scrolls inside
 * itself when it holds more (signed out, or with Founders, at 1280 x 720) */
html:not(.dt-compact) .dts-pause.dts-pause--tabs .dts-pause__side { position: relative; }
html:not(.dt-compact) .dts-pause--tabs .dts-ppanel--set[hidden] { display: flex; visibility: hidden; }
html:not(.dt-compact) .dts-pause--tabs .dts-ppanel--acc { position: absolute; left: 0; right: 0; top: 57px; bottom: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 6px; }
html:not(.dt-compact) .dts-pause--tabs .dts-ppanel--acc[hidden] { display: none; }

/* the foot: the version alone */
.dts-pause.dts-pause--tabs .dts-pause__foot { justify-content: flex-end; min-height: 26px; margin-top: 6px; }
/* (INT501b, dev/shell-ui/duels.js at 915 x 412: a phone held sideways, in a duel) the foot holds "Leave this duel" (67 px on a phone): it
 * never shrinks under it, or the button lay over Back to title */
.dts-pause.dts-pause--tabs .dts-pause__foot { flex-shrink: 0; }
.dts-pause--tabs .dts-pause__foot > .dts-pause__leave { margin-right: auto; }
.dts-pause--tabs .dts-pause__ver { position: static; }

/* a phone or a tablet: the two columns stack (upright) or sit side by side (sideways), and every control keeps its finger size */
html.dt-compact .dts-pause.dts-pause--tabs { max-width: 1100px; }
html.dt-compact .dts-pause--tabs .dts-pause__main { width: auto; }
html.dt-portrait .dts-pause--tabs .dts-pause__main { width: 100%; }
html.dt-portrait .dts-pause.dts-pause--tabs .dts-pause__quit { margin-top: 0; }
/* (TRI501) 62 design px is 41 px on a 360 px phone (--ui-zoom 0.667): never under 44 px on the glass */
html.dt-compact .dts-pause.dts-pause--tabs .dts-pause__row > .dt-btn { min-height: max(62px, calc(44px / var(--ui-zoom, 1))); }
html.dt-compact .dts-ptab { min-height: calc(52px / var(--ui-zoom, 1)); font-size: max(22px, var(--fs-min, 12px)); }
html.dt-compact .dts-pgrp__h { font-size: max(16px, var(--fs-min, 12px)); }
html.dt-compact .dts-tog { font-size: max(19px, var(--fs-min, 12px)); }
html.dt-compact .dts-pgrp .dts-iconbtn { width: calc(58px / var(--ui-zoom, 1)); min-height: calc(58px / var(--ui-zoom, 1)); }
html.dt-compact .dts-pgrp .dts-calm { justify-content: flex-start; }
html.dt-compact .dts-pgrp .dts-calm__hint, html.dt-compact .dts-pgrp .dts-stats__hint, html.dt-compact .dts-stats__about { text-align: left; font-size: max(15px, var(--fs-min, 12px)); }
html.dt-compact .dts-pgrp__row > .dt-btn { min-height: calc(50px / var(--ui-zoom, 1)); }
html.dt-compact .dts-pgrp .dts-wheel__seg { justify-self: stretch; width: 100%; }
html.dt-compact .dts-pgrp .dts-wheel__opt { flex: 1 1 0; min-width: calc(48px / var(--ui-zoom, 1)); min-height: calc(49px / var(--ui-zoom, 1)); padding-left: 6px; padding-right: 6px; }
/* (INT501b, FIT2's 4 px in WebKit at 390 x 844: "Move the view" filled its third of the row and came 3.6 px from its rim) 8 px each
 * side, and a phone's option may take a second line rather than reach its rim */
html.dt-compact .dts-pgrp .dts-wheel__opt { padding-left: 8px; padding-right: 8px; white-space: normal; text-wrap: balance; line-height: 1.1; }

/* ================================================================== 2. How to play: "Got it!" and "The full guide" one size, a clear gap, centred */
.dts-how .dts-how__foot { display: flex; justify-content: center; align-items: stretch; gap: 20px; }
html .dts-how .dts-how__foot > .dt-btn { flex: 0 0 280px; width: 280px; min-width: 0; height: 68px; min-height: 0; margin: 0; padding: 0 20px 6px; font-size: 26px; }
.dts-how .dts-how__foot > .dt-btn > svg { width: 30px; height: 30px; }
html.dt-compact .dts-how .dts-how__foot { flex-wrap: nowrap; gap: 12px; }
html.dt-compact .dts-how .dts-how__foot > .dt-btn { flex: 1 1 0; width: auto; max-width: 320px; height: auto; min-height: calc(56px / var(--ui-zoom, 1)); padding: 0 12px 6px; font-size: max(22px, var(--fs-min, 12px)); }

/* ================================================================== 3. the bottom toolbar on a laptop or a desktop, option A2
 * Equal tiles, the picture over its one-line word at 12 px on the screen; Build red and 1.1 times as wide; no group names; the four
 * view buttons two by two right after Progress, 36 px each with 4 px between and nothing drawn behind them; every tile as tall as
 * that block (76 px). js/ui-hud.js fitBar sets --tb-w (the widest word plus 6 px a side) and the bar's left edge, and hands --tb-top
 * (the bar's top edge) to what sits above it. A touch screen's (upsized) view buttons keep 44 px, and its tiles grow to match. */
html:not(.dt-compact) #stage { --tb-top: calc(870px - 76px / var(--stage-scale, 1)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 {
  --s: var(--stage-scale, 1); --v: calc(36px / var(--s)); --vg: calc(4px / var(--s)); --th: calc(var(--v) * 2 + var(--vg));
  left: 120px; top: auto; bottom: 8px; width: max-content; min-width: 0; height: auto; transform: none;
  gap: calc(4px / var(--s)); padding: 6px 8px 8px;
}
html:not(.dt-compact) .hud.hud--upsized .hud-toolbar.hud-toolbar--a2 { --v: max(var(--hud-min, 0px), calc(36px / var(--s))); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__grp { gap: calc(4px / var(--s)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__cap { display: none; }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb.hud-tb:not(.hud-tb--view) {
  width: var(--tb-w, calc(76px / var(--s))); min-width: 0; height: var(--th); gap: calc(3px / var(--s)); padding: 0 0 calc(8px / var(--s));
}
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb.hud-tb:not(.hud-tb--view) > .hud-ic { width: calc(30px / var(--s)); height: calc(30px / var(--s)); margin: 0; flex: none; }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb > .hud-tb__lbl { display: block; margin: 0; font-size: calc(12px / var(--s)); letter-spacing: 0; line-height: 1.1; white-space: nowrap; }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb.hud-tb--tool[data-arg="build"] { width: calc(var(--tb-w, calc(76px / var(--s))) * 1.1); --face: linear-gradient(180deg, #F2314F 0%, var(--c-kumkum) 100%); --lip: #8C0A1F; color: #FFF6D8; text-shadow: 0 2px 0 rgba(90, 6, 20, .8); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb.hud-tb--tool[data-arg="build"].is-on { --face: linear-gradient(180deg, #C8102E 0%, #8E1B2D 100%); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb.hud-tb--tool[data-arg="build"] > .hud-ic { width: calc(32px / var(--s)); height: calc(32px / var(--s)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__sep { width: 3px; height: calc(var(--th) - 14px); margin: 0 calc(3px / var(--s)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__views { position: static; display: grid; grid-template-columns: repeat(2, var(--v)); grid-auto-rows: var(--v); gap: var(--vg); padding: 0; background: none; border: 0; box-shadow: none; }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__views .hud-tb--view { width: var(--v); min-width: 0; height: var(--v); padding: 0 0 2px; border-width: 2.5px; border-radius: 10px; }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2 .hud-tb__views .hud-tb--view .hud-ic { width: calc(21px / var(--s)); height: calc(21px / var(--s)); }
/* (the fallback of a window under ~1,100 px: FIT's steps, a picture-only tile at 44 px) */
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="1"] .hud-tb.hud-tb--tool:not([data-arg="build"]),
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="2"] .hud-tb.hud-tb--tool:not([data-arg="build"]),
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="2"] .hud-tb__grp .hud-tb.hud-tb { width: calc(48px / var(--s)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="1"] .hud-tb--tool:not([data-arg="build"]) > .hud-tb__lbl,
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="2"] .hud-tb--tool:not([data-arg="build"]) > .hud-tb__lbl,
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-fit="2"] .hud-tb__grp .hud-tb > .hud-tb__lbl { display: none; }

/* what sits on the bar moves up with its taller top edge */
html:not(.dt-compact) .hud:not(.hud--compact) .hud-palette { top: calc(var(--tb-top) - 46px - var(--pc-h)); }
html:not(.dt-compact) .hud:not(.hud--compact) .hud-toolhint { top: calc(var(--tb-top) - 48px); }
html:not(.dt-compact) .hud:not(.hud--compact) .hud-adv__bubble { bottom: max(122px, calc(902px - var(--tb-top))); }
html:not(.dt-compact) .hud:not(.hud--compact) .hud-news.dr { bottom: calc(910px - var(--tb-top)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-gap="tight"], html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-gap="tight"] .hud-tb__grp { gap: calc(2px / var(--s)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-gap="tight"] .hud-tb__sep { margin: 0 calc(2px / var(--s)); }

/* ================================================================== 4. Outlets, option A2
 * The Head Office strip: "Upgrade ₹…" and "Head Office ›" one size. Each outlet card: the quiet "Sell this outlet…" link above, and
 * Visit the full-width main button at its foot ("You are here" in its place on the outlet you are in). */
/* (two equal columns, each as wide as the wider button's words: no wider than 5.0's pair, so the strip's own lines never wrap more) */
.dtw-chain .dtw-office:not(.dtw-office--page) .dtw-office__act { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: 10px; width: max-content; }
.dtw-window .dtw-chain .dtw-office:not(.dtw-office--page) .dtw-office__act > .dt-btn { width: 100%; min-width: 0; height: auto; min-height: 44px; margin: 0; padding-top: 4px; padding-bottom: 5px; }          /* (as tall as Upgrade's two lines: the strip is no taller than in 5.0, whose height its words set. INT501b: 4 px over the top line, which sat 0.8 to 1.8 px under the rim with 0, "Not open yet" and "Top level", Chromium and WebKit) */
.dtw-chain .dtw-office:not(.dtw-office--page) .dtw-office__more::after { content: '\203A'; margin-left: 8px; font-size: 1.25em; line-height: .8; }
.is-compact .dtw-chain .dtw-office:not(.dtw-office--page) .dtw-office__act { width: auto; }
.is-compact .dtw-window .dtw-chain .dtw-office:not(.dtw-office--page) .dtw-office__act > .dt-btn { min-width: 0; min-height: 52px; }
.dtw-window .dtw-outlet > .dtw-outlet__visit { width: 100%; }
/* (TRI501) --fl, not --fl-deep: at 0.8 to 0.875 of the stage (1280 x 720, 1366 x 768) 14 px came out 11.2 to 11.9 px on the screen */
.dtw-window .dtw-outlet > .dtf-sell { align-self: center; min-height: 34px; margin: auto 0 0; padding: 2px 8px 4px; font: 700 max(14px, var(--fl, 0px))/1.1 var(--font-ui); color: #7A5A40; background: none; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(122, 90, 64, .45); cursor: pointer; }
.dtw-window .dtw-outlet > .dtf-sell:hover { color: var(--c-kumkum); text-decoration-color: currentColor; transform: none; }
.dtw-window .dtw-outlet > .dtf-sell.is-disabled { opacity: .6; cursor: default; }
.dtw-window .dtw-outlet > .dtf-sell:not(.is-hidden) ~ .dtw-outlet__visit, .dtw-window .dtw-outlet > .dtf-sell:not(.is-hidden) ~ .dtw-outlet__here { margin-top: 2px; }
.is-compact .dtw-window .dtw-outlet > .dtf-sell { min-height: 44px; font-size: max(15px, var(--fl, 0px)); }
html:not(.dt-compact) .hud .hud-toolbar.hud-toolbar--a2[data-ls="tight"] .hud-tb > .hud-tb__lbl { letter-spacing: calc(-0.25px / var(--s)); }

/* ================================================================== 5. the top-left, option B: fame and the rival stay, the rest folds */
.hud-plqfold { display: none; }
.hud-plqfold.is-open { display: contents; }
.hud-plq.hud-plq--more { height: 30px; gap: 6px; padding: 0 10px 2px; background: #FFF4D6; font-size: max(12.5px, var(--fl, 0px)); cursor: pointer; }
.hud-plq--more > .hud-plq__car { font-style: normal; font-size: .9em; color: #7A5A40; }
.hud-plq--more.is-open { order: 99; }

/* ================================================================== 6. the next goal, option (a): in the rank chip; the line at moments */
html:not(.dt-compact) .hud-goal.is-rank { max-width: 520px; border-radius: 0 0 14px 14px; border-top-width: 2px; }
.hud-goal.is-moment { animation: hud-goal-drop .35s ease-out; box-shadow: 0 2px 0 rgba(58, 31, 18, .55), 0 0 0 4px rgba(245, 179, 1, .45); }
.hud-goal.is-folding { animation: hud-goal-fold .45s ease-in forwards; pointer-events: none; }
@keyframes hud-goal-drop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hud-goal-fold { to { transform: translate(40px, -24px) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hud-goal.is-moment { animation: none; } .hud-goal.is-folding { animation: none; opacity: 0; } }
html:not(.dt-compact) .hud .hud-rank { position: relative; overflow: visible; }
.hud-gmark { position: absolute; right: -9px; top: -8px; z-index: 3; display: inline-flex; align-items: center; pointer-events: none; }
.hud-gmark svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 rgba(58, 31, 18, .6)); }
.hud-gmark.has-label { padding: 0 6px 0 0; border-radius: 999px; background: #FFF8E7; border: 2px solid var(--c-ink); }
.hud-gmark.has-label svg { width: 20px; height: 20px; filter: none; }
.hud-gmark b { font: 800 max(12px, var(--fl, 0px))/1 var(--font-ui); color: var(--c-ink); }
.hud-goalcard { position: absolute; z-index: 30; width: 340px; padding: 10px 12px 12px; pointer-events: auto; text-align: left; color: var(--c-ink);
  background: rgba(255, 249, 232, .98); border: 3px solid var(--c-ink); border-radius: 14px; box-shadow: 0 4px 0 rgba(30, 8, 4, .35); }
.hud-goalcard.is-in { animation: hud-goal-drop .2s ease-out; }
.hud-goalcard__k { display: block; font: 800 max(12px, var(--fl, 0px))/1 var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-jaggery); }
/* (TRI501) the mode, quiet, at the right of the top line (the chip card only) */
.hud-goalcard:not(.hud-goalcard--sheet) .hud-goalcard__k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hud-goalcard__mode { flex: 0 1 auto; min-width: 0; text-align: right; font: 700 max(12px, var(--fl, 0px))/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: #7A5A40; }
.hud-goalcard__t { margin: 5px 0 8px; font: 800 max(15px, var(--fl, 0px))/1.25 var(--font-ui); }
.hud-goalcard__bar { display: block; height: 9px; border: 2px solid var(--c-ink); border-radius: 999px; background: #F1E4C6; overflow: hidden; }
.hud-goalcard__bar > i { display: block; height: 100%; background: var(--c-leaf); }
.hud-goalcard__st { display: block; margin-top: 4px; font: 700 max(13px, var(--fl, 0px))/1.2 var(--font-ui); color: #4A2C1A; }
.hud-goalcard__go { margin-top: 8px; min-height: 36px; padding: 2px 16px 5px; font: 800 max(15px, var(--fl, 0px))/1 var(--font-ui); color: #FFF6D8; background: var(--c-kumkum); border: 2.5px solid var(--c-ink); border-radius: 11px; box-shadow: 0 3px 0 var(--c-ink); cursor: pointer; }
.hud-goalcard__go:hover { filter: brightness(1.06); }
.hud-goalcard__go > i { font-style: normal; }
.hud--upsized .hud-goalcard__go { min-height: var(--hud-min, 44px); }
.hud.is-off .hud-goalcard, .hud.is-off .hud-gmark { display: none; }

/* ================================================================== 7. Notifications: Needs you's answered items fold under Done */
.dr-done { margin-top: 6px; }
.dr-done__h { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 4px 10px 6px; text-align: left; font: 800 max(14px, var(--fl, 0px))/1.1 var(--font-ui); color: #6B5A4A; background: #EFE8DA; border: 2px dashed rgba(58, 31, 18, .25); border-radius: 10px; cursor: pointer; }
.dr-done__h > i { flex: none; width: 1em; font-style: normal; }
.dr-done__h > b { flex: none; color: var(--c-ink); }
.dr-done__h > span { min-width: 0; font-weight: 600; color: #7A6A58; }
.dr-done__b { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dr-done__b[hidden] { display: none; }
.dr-item.is-done { --tone: #B9A88A; background: #F4EFE6; color: #6B5A4A; }
.dr-item.is-done > .hud-ic { filter: grayscale(1); opacity: .55; }
.dr-out { display: flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; margin-top: 3px; font-size: max(12px, var(--fl, 0px)); font-weight: 800; color: #6E5E4C; }
.dr-out > i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 11px; line-height: 1; color: #fff; background: var(--c-leaf); }
.dr-out--no > i { background: #9B8B78; }
.hud--compact .dr-done__h { min-height: 44px; font-size: max(14px, var(--fl, 0px)); }

/* ================================================================== 8. Today's tiffin: what came, where it went, the streak in words */
.h51-gift { padding: 8px 12px 10px; border: 2.5px solid var(--c-ink); border-radius: 12px; background: #FFF3D1; }
.h51-gift > small, .h51-face__txt > small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--c-jaggery); }
.h51-gift__what { margin: 2px 0 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.h51-gift__where { margin: 2px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: #4A2C1A; }
.h51-gift__where b { font-weight: 800; }
.h51-link { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; vertical-align: middle; padding: 0 2px; font: 800 14px/1.2 var(--font-ui); color: #1F5FA8; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.h51-link:hover { color: var(--c-kumkum); }
.h51-card .h51-grace { display: none; }
.h51-streak__t { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: #4A2C1A; }
.h51-kept { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #7A5A40; }

/* ================================================================== 9. Goals, Awards & Land: Next rank | All ranks | Score clear of the emblems */
.dtw-root:not(.is-compact) .dtw-goals__card .dtw-goals__views { align-self: stretch; display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2.5px solid rgba(58, 31, 18, .18); position: static; }
.dtw-root:not(.is-compact) .dtw-goals__card.is-top .dtw-goals__views, .dtw-root:not(.is-compact) .dtw-goals__card.is-ranks .dtw-goals__views { align-self: stretch; margin: 0 0 12px; }
.dtw-root:not(.is-compact) .dtw-goals__views .dtw-tabs__btn { height: 34px; padding: 0 11px 2px; }
/* (GOALFIT, 5.0.1) a row of their own cost the card 56 px (the monsoon scenario's Goals scrolled by 47 px at 1600 x 900, and "what the
 * next rank brings" folded to three lines): with a next rank to show, the three views sit in the card's top line instead, between
 * the two emblems and over the arrow, which drops below them. The ranks spread to the card's two sides (176 px each: the longest name,
 * Town Favourite, is 167), so the tabs (about 245 px, 257 at 1280 x 720 where the 12.2 px floor
 * widens their words) stay 12 px or more clear of both emblems.
 * All ranks, Score and the top rank keep the row, its tabs centred on the same spot, so a view's tabs never jump. */
.dtw-root:not(.is-compact) .dtw-goals__card:not(.is-ranks):not(.is-top) { position: relative; }
.dtw-root:not(.is-compact) .dtw-goals__card:not(.is-ranks):not(.is-top) > .dtw-goals__views { position: absolute; z-index: 1; top: 12px; left: 50%; transform: translateX(-50%); width: max-content; margin: 0; padding: 0; border: 0; }
.dtw-root:not(.is-compact) .dtw-goals__card.is-dense:not(.is-ranks):not(.is-top) > .dtw-goals__views { top: 8px; }
.dtw-root:not(.is-compact) .dtw-goals__card:not(.is-ranks):not(.is-top) .dtw-goals__ladder { justify-content: space-between; gap: 0; }
.dtw-root:not(.is-compact) .dtw-goals__card:not(.is-ranks):not(.is-top) .dtw-rank { width: 176px; }
.dtw-root:not(.is-compact) .dtw-goals__card:not(.is-ranks):not(.is-top) .dtw-rank__arrow { align-self: flex-end; margin-bottom: 30px; }
/* (all ranks: the list scrolls in what is left under the tab row of its own) */
.dtw-root:not(.is-compact) .dtw-goals__card.is-ranks .dtw-ranks { max-height: 544px; }

/* (the owner, 7 Nov) a phone: the next goal for good at the top of the Progress sheet; the line under the top bar only at its moments */
.hud-goalcard.hud-goalcard--sheet { position: static; z-index: auto; flex: none; width: auto; margin: 0 0 8px; padding: 9px 12px 11px; border-width: 3px; box-shadow: 0 3px 0 rgba(30, 8, 4, .25); }
.hud-goalcard--sheet .hud-goalcard__go { min-height: 44px; padding: 2px 18px 5px; }
.hud--landscape:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] > .hud-goalcard--sheet { order: -1; }
@media (max-height: 740px) { .hud--compact:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] > .hud-goalcard--sheet { order: -1; } }
/* (TRI501) the card takes no more room than its words: Go › beside them, not on a row of its own (150 to 170 px tall, the card
 * pushed the Progress tiles under the fold: a grown career at 390 x 844, every career sideways, where the Tycoon Level row went too) */
.hud--compact .hud-goalcard.hud-goalcard--sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.hud--compact .hud-goalcard--sheet > .hud-goalcard__k, .hud--compact .hud-goalcard--sheet > .hud-goalcard__t,
.hud--compact .hud-goalcard--sheet > .hud-goalcard__bar, .hud--compact .hud-goalcard--sheet > .hud-goalcard__st { grid-column: 1; }
.hud--compact .hud-goalcard--sheet > .hud-goalcard__t { margin: 4px 0 6px; }
.hud--compact .hud-goalcard--sheet > .hud-goalcard__go { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
/* a phone held sideways: the card and the tiles share the sheet's first row (the tiles still first on the screen, FIX50; the goal
 * still at the top, the owner 7 Nov), the bar and its status line side by side; the Tycoon Level row under them, on the first screen */
.hud--landscape:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: stretch; }
.hud--landscape:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] > * { flex: 0 0 100%; min-width: 0; }
.hud--landscape:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] > .hud-sheet__grid { flex: 0 0 auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86px; padding-top: 0; }
.hud--landscape:not(.hud--tablet) .hud-sheet--manage[data-group="progress"] > .hud-goalcard--sheet { flex: 1 1 0; margin: 0 0 12px 10px; padding: 5px 10px 6px; grid-template-columns: minmax(0, 1fr) auto auto; }
.hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__k, .hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__t { grid-column: 1 / 3; }
.hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__t { margin: 3px 0 4px; }
.hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__bar { grid-column: 1; grid-row: 3; }
.hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__st { grid-column: 2; grid-row: 3; margin: 0 0 0 8px; white-space: nowrap; }
.hud--landscape:not(.hud--tablet) .hud-goalcard--sheet > .hud-goalcard__go { grid-column: 3; grid-row: 1 / span 3; }