
.fm-cast { display: grid; justify-items: center; }
.fm-cast-btn { gap: 1.25rem; min-width: min(22rem, 100%); min-height: 5.8rem; padding: 1rem 2.8rem 1rem 1.7rem; border-radius: 1.3rem; text-align: left; font-size: 1rem; --tone-glow: rgba(242, 198, 106, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .28), 0 .7rem 2.4rem rgba(0, 0, 0, .55), 0 0 2.4rem rgba(242, 198, 106, .32); }
.fm-cast-mark { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(42, 26, 7, .22); box-shadow: inset 0 0 0 2px rgba(42, 26, 7, .35); }
.fm-cast-mark .ia-emblem { width: 2.9rem; height: 2.9rem; filter: drop-shadow(0 .08rem 0 rgba(255, 245, 210, .55)); }
.fm-cast-words { display: grid; gap: .25rem; }
.fm-cast-words b { font-size: 2.6rem; line-height: 1; font-weight: 400; letter-spacing: .04em; color: #2a1a07; text-shadow: 0 1px 0 rgba(255, 245, 210, .65); }
.fm-cast-words small { font-size: 1.05rem; font-weight: 650; letter-spacing: .01em; color: rgba(42, 26, 7, .85); }
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .region-top > .fm-cast { position: fixed; left: var(--foot-left); right: var(--foot-right); bottom: calc(var(--hud-pad) + 6.5rem); z-index: 8; }
  .is-hud .fm-cast-btn { max-width: 100%; white-space: normal; }
  .is-hud .ia-client.is-quiet .region-top > .fm-cast, .is-hud .ia-client.is-quiet .world-foot { left: var(--hud-pad); right: var(--hud-pad); }
}

.fm-plate { display: grid; gap: .7rem; padding: .85rem 1rem .9rem; border-radius: .9rem; font-size: .95rem; line-height: 1.4; color: var(--text-1); text-align: left; }
.fm-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.fm-head .medal { flex: none; }
.fm-head strong { font-size: 1.15rem; line-height: 1.15; font-weight: 400; color: var(--gold-0); }
.fm-text { margin: 0; color: var(--text-1); text-wrap: pretty; }
.fm-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .6rem; border-top: 1px solid rgba(242, 198, 106, .16); }
.fm-row:first-of-type { padding-top: 0; border-top: 0; }
.fm-row .fm-text { flex: 1; min-width: 0; }
.fm-row .btn { flex: none; }
.fm-acts { display: flex; justify-content: flex-end; gap: .5rem; }
.fm-discord { gap: .45rem; text-decoration: none; }
.fm-discord small { font-size: .72rem; font-weight: 700; color: var(--gold-1); }
.fm-discord-mark { flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #5865f2; }
.fm-discord-mark .discord-mark { width: .8rem; height: .8rem; color: #fff; }
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .region-top > .fm-plate { position: absolute; top: calc(var(--hud-task-b, 7.5rem) + .45rem); left: var(--hud-task-l, calc(50% - var(--hud-task-w) / 2)); width: var(--hud-task-width, var(--hud-task-w)); box-shadow: var(--hud-shadow); }
  .is-hud .update-notice ~ .fm-plate { top: calc(var(--hud-update-b, var(--hud-task-b, 7.5rem)) + .45rem); }
  .is-hud .guest-notice ~ .fm-plate { top: calc(var(--hud-guest-b, var(--hud-task-b, 7.5rem)) + .45rem); }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .region-tutorial > .fm-plate { margin: 0 0 .45rem; padding: .7rem .8rem .75rem; font-size: .9rem; }
  .region-tutorial > .fm-plate + .panel { margin-top: .7rem; }
  .ia-client.in-world .region-tutorial:has(> .fm-plate) { display: block; }
  .fm-cast.is-phone { position: fixed; left: 50%; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; }
  .fm-cast.is-phone .fm-cast-btn { min-width: min(18rem, calc(100vw - 2rem)); }
  .fm-plate .btn { min-height: 3.3rem; font-size: .95rem; }
  .fm-discord small { font-size: .9rem; }
}

@keyframes fm-in { from { opacity: 0; transform: translateY(-.7rem); } to { opacity: 1; transform: none; } }
@keyframes fm-in-up { from { opacity: 0; transform: translateY(.9rem); } to { opacity: 1; transform: none; } }
.fm-arrive { animation: fm-in .6s ease-out both; }
.fm-arrive-up { animation: fm-in-up .6s ease-out both; }
.reduce-motion .fm-arrive, .reduce-motion .fm-arrive-up { animation: none; }
@media (prefers-reduced-motion: reduce) { .fm-arrive, .fm-arrive-up { animation: none; } }
