.fg-wrap { display: flex; flex-direction: column; gap: 12px; }
.fg-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.fg-controls .seg-wrap { flex: 1 1 auto; }
.fg-controls .seg { max-width: 100%; }
.fg-controls .seg button { padding: 0 11px; }

.fg-pad {
  --tint: #2f80ed;
  position: relative; height: clamp(320px, 60vh, 560px); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2a2f45 0%, #151824 70%);
  color: #f3f4f8; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; cursor: crosshair; transition: background .5s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.fg-pad::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px); background-size: 22px 22px;
}
.fg-pad.is-result { background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--tint) 55%, #151824) 0%, #151824 85%); }
.game-shell.is-full .fg-wrap { flex: 1; }
.game-shell.is-full .fg-pad { flex: 1; height: auto; min-height: 280px; }

.fg-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92%; text-align: center;
  pointer-events: none; transition: top .3s ease, transform .3s ease; z-index: 3;
}
.fg-pad.has-dots .fg-msg { top: 14px; transform: translate(-50%, 0); }
.fg-msg-main { margin: 0; font-size: clamp(19px, 5vw, 26px); font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); word-break: keep-all; }
.fg-msg-sub { margin: 4px 0 0; font-size: 14px; color: rgba(243, 244, 248, .72); font-weight: 600; word-break: keep-all; }
.fg-intro { position: relative; width: 110px; height: 110px; margin: 0 auto 12px; display: grid; place-items: center; }
.fg-intro::before, .fg-intro::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35);
  animation: fg-ripple 2s ease-out infinite;
}
.fg-intro::after { animation-delay: 1s; }
.fg-hand { font-size: 52px; animation: bb-float 2.4s ease-in-out infinite; }
@keyframes fg-ripple { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }

.fg-dots { position: absolute; inset: 0; z-index: 2; }
.fg-dot {
  --c: #ff5a36;
  position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 28px 6px color-mix(in srgb, var(--c) 60%, transparent);
  animation: fg-in .25s cubic-bezier(.2, 1.5, .4, 1);
  transition: opacity .4s ease, transform .4s ease, background .3s ease, box-shadow .3s ease;
  display: grid; place-items: center; cursor: pointer;
}
.fg-dot svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-90deg); pointer-events: none; }
.fg-ring-bg { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 5; }
.fg-ring { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; opacity: 0; }
.fg-dot.is-counting .fg-ring { opacity: 1; animation: fg-ring 2.5s linear forwards; }
.fg-dot.is-counting { animation: fg-breathe .5s ease-in-out infinite alternate; }
.fg-label { position: relative; font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .45); font-family: var(--font-num); line-height: 1; }
.fg-dot.is-team .fg-label { font-size: 22px; }
.fg-dot.is-lose { opacity: .16; transform: scale(.7); }
.fg-dot.is-win { transform: scale(1.3); z-index: 2; animation: fg-win .8s ease-in-out infinite; box-shadow: 0 0 0 5px #fff, 0 0 44px 14px var(--c); }
.fg-dot.is-gone { opacity: 0; transform: scale(.4); }
@keyframes fg-in { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fg-ring { to { stroke-dashoffset: 0; } }
@keyframes fg-breathe { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes fg-win { 0%, 100% { transform: scale(1.3); } 50% { transform: scale(1.45); } }

.fg-mouse .btn { flex: 1 1 auto; }
.fg-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }