/* WebGames.io - the player on the pages of the portal: its chip, its cookie, the sign-in dialog and the
   toasts. Loaded by the homepage (with home.css) and the game page (with style.css): every class here
   starts with wg- so it never meets the classes of style.css. */

:root {

	--wg-night: #050308;
	--wg-cream: #FFF6E7;
	--wg-paper: #FFFFFF;
	--wg-line: #F1E2CC;
	--wg-line-2: #E5D0B2;
	--wg-ink: #2E1F5E;
	--wg-ink-2: #463A6B;
	--wg-ink-soft: #6E6388;
	--wg-icon: #5B3FA8;
	--wg-orange: #E8590C;
	--wg-orange-hi: #FF8A2B;
	--wg-orange-strong: #CF470C;
	--wg-orange-text: #C2410C;
	--wg-orange-deep: #9A3412;
	--wg-orange-soft: #FFEBD6;
	--wg-gold: #F5B70A;
	--wg-violet: #6B4FD8;
	--wg-violet-soft: #EEE9FF;
	--wg-discord: #5865F2;
	--wg-facebook: #0866FF;
	--wg-ok: #237032;
	--wg-ok-soft: #E3F4E6;
	--wg-warn: #A85D00;
	--wg-warn-soft: #FFF1D6;
	--wg-bad: #C92A2A;
	--wg-bad-soft: #FDE6E6;
	--wg-shade: rgba(35, 16, 63, 0.94);
	--wg-shadow: 0 10px 28px rgba(35, 16, 63, 0.22);
	--wg-shadow-sm: 0 2px 8px rgba(46, 31, 94, 0.10);
	--wg-font-display: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--wg-font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
}

.ico { width: 20px; height: 20px; flex: none; }

/* points */
.wg-points { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--wg-orange-soft); color: var(--wg-orange-text); font: 700 14px var(--wg-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-points .ico { width: 16px; height: 16px; color: var(--wg-gold); }

/* the cookie of a player */
.wg-ava { position: relative; display: inline-block; flex: none; }
.wg-ava-skin { display: block; width: 100%; height: 100%; object-fit: contain; }
.wg-ava-cos { position: absolute; height: auto; max-width: none; pointer-events: none; }
.wg-ava-xs { width: 28px; height: 28px; }
.wg-ava-sm { width: 36px; height: 36px; }
.wg-ava-md { width: 64px; height: 64px; }
.wg-ava-lg { width: 168px; height: 168px; }

/* the place of the player in a header */
.wg-signin { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 7px; border: 0; border-radius: 999px; background: var(--wg-orange-strong); color: #fff; font: 700 16px var(--wg-font-display); white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 var(--wg-orange-deep); }
.wg-signin:hover { background: var(--wg-orange); }
.wg-signin-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.wg-chip { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 10px 0 8px; border: 1px solid var(--wg-line-2); border-radius: 999px; background: var(--wg-paper); color: var(--wg-ink); cursor: pointer; }
.wg-chip:hover { border-color: var(--wg-orange); }
.wg-chip-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px var(--wg-font-display); }

/* toasts: in the dialog on top when one is open */
.wg-toasts { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 400; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.wg-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--wg-ink); color: #fff; font: 800 15px/1.35 var(--wg-font-body); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); animation: wg-toast-in 0.25s ease-out; }
.wg-toast .ico { color: var(--wg-gold); }
.wg-toast.is-ok .ico { color: #8CE99A; }
.wg-toast.is-bad .ico { color: #FFA8A8; }
@keyframes wg-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* dialogs */
dialog.wg-modal { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 26px; background: var(--wg-cream); color: var(--wg-ink-2); font: 500 15px/1.45 var(--wg-font-body); box-shadow: 0 30px 80px rgba(20, 8, 40, 0.5); }
dialog.wg-modal-lg { width: min(960px, calc(100vw - 24px)); }
dialog.wg-modal-sm { width: min(440px, calc(100vw - 24px)); }
dialog.wg-modal::backdrop { background: rgba(26, 12, 48, 0.62); }
.wg-modal-in { position: relative; padding: 24px; }
.wg-x { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--wg-paper); color: var(--wg-ink); cursor: pointer; box-shadow: var(--wg-shadow-sm); }
.wg-x .ico { pointer-events: none; }
.wg-title { margin: 0 48px 6px 0; color: var(--wg-ink); font: 700 26px/1.15 var(--wg-font-display); text-wrap: balance; }
.wg-sub { margin: 0 0 16px; color: var(--wg-ink-soft); font-weight: 700; }
.wg-fine { margin: 10px 0 0; color: var(--wg-ink-soft); font-size: 13px; font-weight: 700; }
.wg-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--wg-violet-soft); color: #3F2E91; font-size: 13px; font-weight: 800; }
.wg-note .ico { width: 18px; height: 18px; margin-top: 1px; }
dialog.wg-modal :focus-visible { outline: 3px solid var(--wg-violet); outline-offset: 2px; }

/* sign-in */
.wg-login-head { display: flex; align-items: center; gap: 14px; }
.wg-login-head img { width: 64px; height: 64px; flex: none; }
.wg-prov { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 14px; }
.wg-prov-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; border: 1px solid transparent; border-radius: 16px; font: 700 19px var(--wg-font-display); cursor: pointer; }
.wg-prov-btn svg { width: 24px; height: 24px; flex: none; }
.wg-prov-btn:hover { filter: brightness(0.97); }
.wg-prov-btn.is-busy { opacity: 0.7; cursor: progress; }
.wg-prov-google { border-color: #DADCE0; background: #fff; color: #1F1F1F; }
.wg-prov-discord { background: var(--wg-discord); color: #fff; }
.wg-prov-facebook { background: var(--wg-facebook); color: #fff; }

/* game page: the player in the top bar, the favorite button */
.wg-me { flex: none; display: flex; align-items: center; }
.topbar .wg-signin { height: 42px; font-size: 15px; }
.topbar .wg-chip { height: 46px; }
.wg-fav { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--wg-line-2); border-radius: 14px; background: var(--wg-paper); color: var(--wg-ink); font: 700 15px var(--wg-font-display); cursor: pointer; }
.wg-fav .ico { width: 20px; height: 20px; color: #9D4B6B; }
.wg-fav:hover { background: #FFF0F3; }
.wg-fav[aria-pressed="true"] { border-color: #D61F4B; background: #FFF0F3; color: #B01840; }
.wg-fav[aria-pressed="true"] .ico { color: #D61F4B; }

@media (max-width: 640px) {
	.wg-chip-name { display: none; }
	.wg-modal-in { padding: 18px; }
}
@media (max-width: 520px) {
	.topbar .wg-signin { padding: 0 12px 0 5px; }
	.topbar .wg-signin-ico { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.wg-toast { animation: none; }
}