/* UI polish pass (graphics agent): toasts, hub collisions, idle motion, summary/post atmosphere.
   Loaded last. Overrides only presentation; layout boxes of other modules stay as they are except where a collision was measured. */

/* ---------- toasts: bottom of the screen, out of the HUD and the dialogue ---------- */
#gtoast { top: auto; bottom: 1.6em; align-items: end }
body[data-scr="brief"] #gtoast { bottom: 13.5em }
body[data-scr="post"] #gtoast, body[data-scr="result"] #gtoast { bottom: 1.1em }
.gt { display: flex; align-items: center; gap: .65em; border-radius: 1em; padding: .6em 1.15em .6em .9em; font-size: .95em; animation: toastUp .45s var(--ease-pop) both }
.gt::before { content: ""; flex: none; width: .75em; height: .75em; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 .22em color-mix(in srgb, var(--pink) 25%, transparent) }
.gt.good::before { background: #2fa35b; box-shadow: 0 0 0 .22em rgba(47, 163, 91, .25) }
.gt.bad::before { background: #d6452f; box-shadow: 0 0 0 .22em rgba(214, 69, 47, .25) }
.gt.gone { transform: translateY(.9em) }
#gtoast .gt:nth-last-child(n+4) { display: none }
@keyframes toastUp { from { opacity: 0; transform: translateY(1.6em) scale(.9) } }

/* ---------- hub: collisions at 1280x720 ---------- */
/* the Finds Jar sat on top of the weather panel: it becomes a compact tile beside the goals */
@media (min-width: 1001px) {
  .jar-btn { left: calc(2.6% + min(20em, 27%) + 1.4em + min(21.5em, 26%) + .9em); top: 5.9em; flex-direction: column; gap: .3em; padding: .55em .55em .45em; text-align: center; border-radius: 1em }
  .jar-btn .jb-txt small { display: none }
  .jar-btn .jb-txt b { font-size: .82em; white-space: nowrap }
  .jar-btn .jb-glass { width: 3.4em; height: 3.4em }
}
.ms-chip { align-content: center; gap: 0 }
.ms-chip b { font-size: 1.35em }
.ms-chip small { max-width: 100% }
.hud { align-items: center }
.hud-chip { transition: border-color .3s, transform .15s }
.hud-chip.subs { box-shadow: 0 .2em 0 rgba(0, 0, 0, .35), 0 0 1.6em rgba(233, 91, 147, .16) }

/* ---------- warm glow behind every card on the hub, a little more depth for glass ---------- */
.dcard, .goals, .world .wcard { box-shadow: 0 .3em 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 232, 196, .07) }

/* ---------- idle motion ---------- */
/* title: a slow light sweep across the logo plate, and the main button breathes */
.logo .l2 { position: relative; overflow: hidden }
.logo .l2::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 28%; left: -40%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: shine 6.5s 1.6s ease-in-out infinite }
@keyframes shine { 0%, 55% { left: -40% } 85%, 100% { left: 130% } }
#btn-start.primary { animation: breathe 3.2s ease-in-out infinite }
@keyframes breathe { 50% { box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .4), 0 .3em 0 var(--pink-d), 0 .6em 2em rgba(233, 91, 147, .6) } }
.menu .btn { transition: transform .08s, box-shadow .08s, filter .12s, padding-left .15s }
.menu .btn:hover { padding-left: 1.6em }
/* hub/brief dust canvases (fx_ui.js) */
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .7 }

/* ---------- post screen and summary: their own atmosphere ---------- */
.studio-bg { background: url(img/studio-desk.jpg) center/cover; filter: blur(5px) brightness(.5) saturate(.95) }
.studio { box-shadow: 0 .5em 0 #0b080d, 0 2.5em 5em rgba(0, 0, 0, .6), 0 0 0 .1em rgba(233, 91, 147, .12), 0 0 6em rgba(233, 91, 147, .1) }
.sum-card { border-top: .22em solid var(--pink) }
.sum-card h2 { background: linear-gradient(#fff8ea, #e9d6b4); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .5)) }

/* ---------- press feedback for every kind of button ---------- */
button:not(.btn):not(:disabled):active { transform: translateY(.06em) }

/* ---------- 16:10 safety: nothing may push the page to scroll ---------- */
body { overflow-x: hidden }

@media (prefers-reduced-motion: reduce) { .logo .l2::after, #btn-start.primary, .gt { animation: none !important } .fx-dust { display: none } }