/* GENERATED by tools/ui-css.mjs from src/theme/ui-theme.css - do not edit; edit the source and run the tool. */
/* src/theme/ui-theme.css - the game's OWN theme of the studio UI kit (src/modules/pack/web/ui; pack rule 11 web p. 21: "an own
   theme is obligatory"; gate tools/pack/web/ui-theme.mjs). Carried over from the approved sketches (D19,
   docs/plan/rework/screens/theme-block.css): the start is the kit theme "candy" (the same set of variables, the same build of a
   button: a body, an inner lower edge, a ring and a drop) recoloured to the look of the game "Showcase" (D11, D18): cream ground,
   chocolate tray, raspberry action, caramel rims, mint and marmalade accents. Volume: every card and button has a light top line,
   an inner lower edge, a caramel rim and a THICKNESS (a second, lower rim) and a soft cast shadow - the owner: "containers and ui
   are flat". Variables, the game's local font and the few overrides a kit theme carries. Shipped as dist/theme/ui-theme.css
   (scripts/build.mjs); the page links it after the kit's base.css and before assets/generated/game.css. ASCII only. */
@font-face { font-family: 'Bp Confection'; src: url('fonts/a.woff2') format('woff2'); /* relative to the build copy assets/generated/ui-theme.css (tools/ui-css.mjs) */ font-weight: 600 700; font-display: swap; }
:root {
  --assets: none;
  --asset-coin: none; --asset-gem: none; --asset-avatar: none; --asset-chest: none; --asset-gift: none; --bg-image: none;
  --font-display: 'Bp Confection', 'Trebuchet MS', sans-serif; --font-body: 'Bp Confection', 'Segoe UI', sans-serif; --fw-display: 700; --fw-body: 700;
  --btn-case: none; --btn-tracking: .01em; --btn-press: 4px; --btn-ghost-underline: none;
  --c-bg: #FFF2DC; --c-panel: #FFF9F0; --c-text: #3E2328; --c-muted: #82606A; --c-line: #E6C9A4; --c-focus: #5DB3A0;
  --c-primary: #B8456F; --c-primary-dk: #7A2347; --c-primary-soft: #F8DCE6; --c-primary-text: #7A2347;
  --c-reward: #F0B53E; --c-reward-dk: #A8661C; --c-reward-soft: #FFEDC4; --c-reward-text: #6B3B0C;
  --c-accent: #4FA893; --c-accent-dk: #2A7363; --c-accent-soft: #D6F0E8; --c-accent-text: #236152;
  --c-danger: #D9576A; --c-danger-dk: #8E2436; --c-danger-soft: #FBDDE1; --c-danger-text: #8E2436;
  --c-info: #8A5A9E; --c-info-dk: #573469; --c-info-soft: #ECDDF3; --c-info-text: #573469;
  --c-locked-bg: #EBDDCB; --c-locked-dk: #CDB497; --c-locked-overlay: rgba(62,33,38,.35);
  --r-s: .55rem; --r-m: .9rem; --r-l: 1.15rem; --r-xl: 1.4rem; --r-xxl: 1.75rem;
  --sh-s: 0 .4rem 1rem rgba(90,40,50,.22); --sh-inset-s: inset 0 -3px 0 rgba(122,60,40,.16); --sh-inset-top: inset 0 3px 0 rgba(90,40,30,.16);
  /* a card: light top line, inner lower edge, white ring, caramel rim, the rim again 6 px lower (thickness), a cast shadow */
  --panel-shadow: inset 0 2px 0 #FFFFFF, inset 0 -4px 0 #F1DBBB, 0 0 0 2px #FFFFFF, 0 0 0 4px #E3BF93, 0 6px 0 4px #C9976A, 0 18px 26px rgba(90,40,50,.28);
  --pill-bg: linear-gradient(180deg, #74424A, #4E272D); --pill-shadow: inset 0 1px 0 rgba(255,220,200,.35), inset 0 -2px 0 rgba(20,6,8,.35), 0 0 0 2px #FFF9F0, 0 4px 0 2px #D9B286;
  /* buttons: a gloss band over the upper half, a dark lower inner edge (the body), a cream ring, a rim 5 px lower (thickness), a drop */
  --btn-primary-bg: linear-gradient(180deg, rgba(255,255,255,.28) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #DA6E97, #B8456F 60%, #A23A62);
  --btn-primary-fg: #FFF7EF;
  --btn-primary-shadow: inset 0 -6px 0 #7A2347, inset 0 2px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px #FFF9F0, 0 5px 0 3px #DDB386, 0 14px 18px rgba(122,35,71,.32);
  --btn-primary-shadow-pressed: inset 0 -2px 0 #7A2347, inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 3px #FFF9F0, 0 1px 0 3px #DDB386;
  --btn-reward-bg: linear-gradient(180deg, rgba(255,255,255,.35) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #FFD077, #F0B53E 60%, #E09E2C);
  --btn-reward-fg: #6B3B0C;
  --btn-reward-shadow: inset 0 -6px 0 #A8661C, inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 3px #FFF9F0, 0 5px 0 3px #DDB386, 0 14px 18px rgba(168,102,28,.3);
  --btn-reward-shadow-pressed: inset 0 -2px 0 #A8661C, inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 3px #FFF9F0, 0 1px 0 3px #DDB386;
  --btn-accent-bg: linear-gradient(180deg, rgba(255,255,255,.28) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #7CCBB7, #4FA893 60%, #3F9481);
  --btn-accent-fg: #FFFFFF;
  --btn-accent-shadow: inset 0 -6px 0 #2A7363, inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 3px #FFF9F0, 0 5px 0 3px #DDB386, 0 14px 18px rgba(42,115,99,.3);
  --btn-accent-shadow-pressed: inset 0 -2px 0 #2A7363, inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 3px #FFF9F0, 0 1px 0 3px #DDB386;
  --btn-danger-bg: linear-gradient(180deg, rgba(255,255,255,.28) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #EC7E8E, #D9576A 60%, #C4475A);
  --btn-danger-fg: #FFFFFF;
  --btn-danger-shadow: inset 0 -6px 0 #8E2436, inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 3px #FFF9F0, 0 5px 0 3px #DDB386, 0 12px 16px rgba(142,36,54,.3);
  --btn-danger-shadow-pressed: inset 0 -2px 0 #8E2436, inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 3px #FFF9F0, 0 1px 0 3px #DDB386;
  --btn-info-bg: linear-gradient(180deg, rgba(255,255,255,.25) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #A97EBC, #8A5A9E 60%, #784C8C);
  --btn-info-fg: #FFFFFF;
  --btn-info-shadow: inset 0 -6px 0 #573469, inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 3px #FFF9F0, 0 5px 0 3px #DDB386, 0 12px 16px rgba(87,52,105,.3);
  --btn-info-shadow-pressed: inset 0 -2px 0 #573469, inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 3px #FFF9F0, 0 1px 0 3px #DDB386;
  --btn-secondary-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF6E9 45%, #F6E0C2 100%);
  --btn-secondary-fg: #3E2328;
  --btn-secondary-shadow: inset 0 -5px 0 #E2BF93, inset 0 2px 0 #FFFFFF, 0 0 0 2px #EED3AE, 0 5px 0 2px #CFA174, 0 12px 16px rgba(90,40,50,.22);
  --btn-secondary-shadow-pressed: inset 0 -2px 0 #E2BF93, inset 0 2px 0 #FFFFFF, 0 0 0 2px #EED3AE, 0 1px 0 2px #CFA174;
  --btn-disabled-bg: #EBDDCB; --btn-disabled-fg: #B39C82; --btn-disabled-shadow: inset 0 -5px 0 #D6C2A8, 0 0 0 2px #EED3AE; --btn-locked-overlay: rgba(62,33,38,.35);
  --btn-iap-bg: var(--btn-accent-bg); --btn-iap-fg: var(--btn-accent-fg); --btn-iap-shadow: var(--btn-accent-shadow); --btn-iap-shadow-pressed: var(--btn-accent-shadow-pressed);
  --btn-free-bg: var(--btn-primary-bg); --btn-free-fg: var(--btn-primary-fg); --btn-free-shadow: var(--btn-primary-shadow); --btn-free-shadow-pressed: var(--btn-primary-shadow-pressed);
  --btn-accent-shadow-inbar: inset 0 -4px 0 #2A7363;
  --badge-bg: #D9576A; --badge-fg: #FFFFFF;
  --bar-bg: linear-gradient(180deg, #74424A, #4E272D); --bar-shadow: 0 0 0 3px #FFF9F0, 0 6px 0 3px #C9976A; --tab-active-bg: #FFFFFF; --tab-active-fg: #7A2347;
  /* the way to the best: a chocolate groove (like the holes of the tray), a marmalade fill orange -> raspberry */
  --progress-track: linear-gradient(180deg, #4A242A, #5E343A); --progress-track-shadow: inset 0 2px 3px rgba(10,2,4,.55), 0 0 0 2px #FFF9F0, 0 0 0 3.5px #E3BF93;
  --progress-fill: linear-gradient(90deg, #EC8A43, #AA3D65); --progress-fill-shadow: inset 0 -3px 0 rgba(60,10,20,.22), inset 0 2px 0 rgba(255,255,255,.45);
  --progress-fill-reward: linear-gradient(90deg, #FFD077, #E09E2C); --progress-fill-accent: linear-gradient(90deg, #8BD3C1, #3F9481); --progress-fill-danger: var(--c-danger);
  --tile-bg: linear-gradient(180deg, #FFFFFF, #FFF7EC 50%, #F7E6CD);
  --tile-shadow: inset 0 -4px 0 #EDD2AC, inset 0 2px 0 #FFFFFF, 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E3BF93, 0 5px 0 3.5px #CC9C70, 0 12px 18px rgba(90,40,50,.2);
  --tile-shadow-active: 0 0 0 3px #FFFFFF, 0 0 0 6px #F0B53E, 0 0 22px rgba(240,181,62,.7), 0 6px 0 6px #C9976A;
  --tile-shadow-done: inset 0 0 0 3px var(--c-accent), 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E3BF93, 0 5px 0 3.5px #CC9C70;
  --tile-shadow-locked: inset 0 -3px 0 #DCC6A8, 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E3BF93, 0 4px 0 3.5px #CDB497;
  --tile-gold-bg: linear-gradient(180deg, #FFE39A, #F0B53E); --tile-gold-shadow: 0 0 0 3px #FFFFFF, 0 5px 0 3px #A8661C; --tile-scrim: none;
  --modal-scrim: rgba(52,24,32,.52); --modal-blur: blur(3px);
  --modal-shadow: inset 0 2px 0 #FFFFFF, inset 0 -5px 0 #F1DBBB, 0 0 0 3px #FFFFFF, 0 0 0 6px #E3BF93, 0 10px 0 6px #C08A5C, 0 30px 40px rgba(52,20,30,.45);
  --ribbon-bg: linear-gradient(180deg, rgba(255,255,255,.25) 0 45%, rgba(255,255,255,0) 46%), linear-gradient(180deg, #DA6E97, #A23A62); --ribbon-fg: #FFF7EF;
  --ribbon-shadow: inset 0 -5px 0 #7A2347, 0 0 0 3px #FFF9F0, 0 6px 0 3px #C08A5C, 0 12px 16px rgba(122,35,71,.35);
  --sheet-head-bg: linear-gradient(180deg, #7A464C, #5A3238 60%, #4A2730);
  --full-bg: radial-gradient(70% 45% at 50% 35%, #FFFDF6, #FFE9C8 70%, #F3D2A8);
  --rays: repeating-conic-gradient(rgba(255,255,255,.4) 0 9deg, rgba(255,255,255,0) 9deg 18deg);
}

/* theme overrides (as candy has): the sheet head is a chocolate tray, its text cream; pills are chocolate with cream text */
html .modal--sheet .modal__head { color: #FFE7C2; box-shadow: inset 0 -2px 0 rgba(255,214,190,.25), 0 6px 0 #2E1418, 0 14px 22px rgba(52,20,30,.35); }
html .pill, html .pill__val { color: #FFE7C2; }
html .bottombar__tab { color: #FFE7C2; }
/* the kit's .t breaks a word in the middle in a narrow button ("Dalsh/e"); here a word breaks only when it alone does not fit
   (lesson of the sketches -> PACK kit/web/ui/css/base.css, docs/plan/rework/screens/SCREENS.md) */
html .t, html [data-text] { overflow-wrap: break-word; }