/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

:root {
	--primary: #3250FF;
}


body {
	margin: 0;
	background-color: black;
}
iframe {
	display: block;
	position: absolute;
	background-color: transparent;
}

/*
 * GCM stacking order — everything below shares the launcher document's root stacking context.
 * Four of these values live outside this file; those paths are relative to gcm-core/src/main/.
 * Painted low to high:
 *
 *   auto   #featureWidget           Feature widget (free rounds)   widget/widgetUIAdaptor.js
 *   auto   .game                    game iframe                    this file
 *   auto   .fs-mask, .fs-swipe-*    iOS fullscreen swipe prompt    this file
 *   100    #fp-widget-container     Flows Play widget              gameservices/flowsplay/FlowsPlayController.js
 *   500    .fp-end-view-overlay     Flows campaign-ended modal     gameservices/flowsplay/FlowsPlayEndViewStyles.js
 *   900    #game-click-blocker      blocks input while animating   this file
 *   999    .commonUI                CommonUI iframe                this file
 *   999    .fs-dialog-box-ui        Android fullscreen dialog      this file
 *   10001  regulation panel         external panel iframe wrapper  regulations/regulationPanelUI.js
 *   10002  #regulation-drag-area    drag surface for the panel     this file
 *
 * CommonUI and the regulation panels must stay above the Flows Play widget for regulatory reasons —
 * that is why the widget sits at 100 rather than somewhere more convenient. The Flows end screen has
 * one requirement of its own — it must cover the widget — and is otherwise held below everything
 * else, hence 500: clear of the widget's 100, under the click blocker, CommonUI and the panels.
 *
 * The Flows Play SDK renders into a <flows-games-portal> element it gives an inline z-index of
 * 9999997, the bottom of its own scale (9999997 bar … 10000001 lottie). The rest of that scale
 * applies to elements inside the portal's shadow roots, and the portal is itself a stacking context,
 * so only its own 9999997 ever competed with anything here. Mounting it in #fp-widget-container,
 * which is also a stacking context, confines it to a single layer at 100. Do not chase these values
 * with a higher number here; see FlowsPlayController.js.
 *
 * Gotchas:
 *   - .fp-end-view-overlay is NOT inside #fp-widget-container. FlowsPlayEndView appends it to
 *     <body>, so the two are siblings and rank against each other by this table — which is the only
 *     reason 500 covers the widget. Raising the container above 500 would bury the end screen
 *     inside it; the two values have to move together.
 *   - The `auto` rows are not one big DOM-order tie. #featureWidget is position: static, so it
 *     paints with in-flow block content — below every positioned element here regardless of DOM
 *     order. .game and .fs-mask are both positioned with z-index: auto, and those two do rank by
 *     DOM order: the mask is appended to <body> at runtime, so it paints over the game iframe,
 *     which is static in launcher.html. That is what lets the mask dim the game.
 *   - .fs-mask and #featureWidget both still paint BELOW the Flows Play widget, because any
 *     positive z-index outranks the whole positioned-auto layer.
 *   - The #featureWidget row describes GCM's container div only. Its children are appended by the
 *     external FeatureUI project, and because that div is position: static it is not a stacking
 *     context — so a positive z-index on a child competes directly with this table rather than
 *     being confined by its parent's row.
 *   - #featureWidget never gets a z-index at all: widgetUIAdaptor.js assigns `.zIndex` rather than
 *     `.style.zIndex`, and the div is position: static, where z-index has no effect regardless.
 *     The 10002 written there is intent only and is read by nothing.
 *   - The two 999s are a tie, resolved by DOM order — .fs-dialog-box-ui is appended to <body> at
 *     runtime, so it wins over the static .commonUI iframe.
 *   - Nothing here survives the browser top layer. A game calling requestFullscreen() through the
 *     game iframe's allowfullscreen attribute paints above every row, regulation panels included.
 */

.commonUI {
	width: 100%;
	height: 20%;
	z-index: 999;
	left: 0%;
	top: 0;
	display:none;
	position:fixed;
}

#game-click-blocker{
	z-index: 900;
	display: none;
}

#regulation-drag-area{
	z-index: 10002;
	pointer-events: none;
	touch-action: none;
}

.fs-dialog-text-area {
	font-family: 'Noto Sans', 'Roboto', sans-serif;
}

#regulation-drag-area.captureEvents{
	pointer-events: auto;
	touch-action: auto;
}

.game {
	width: 100%;
	height: 100%;
	top:0;
	position:fixed;
}

.fs-mask{
	position: absolute;
	width: 100%;
	height: 150%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);

	display: flex;
	justify-content: center;
	align-items: center;
}

.fs-mask-text{
	color: white;
	font-weight: bold;
	font-family: Verdana, Arial, sans-serif;
}

.fs-dialog-box-ui{
	font-family: 'Noto Sans', sans-serif;
	font-size: 12px;

	width: 260px;
	padding: 15px;
	border-radius: 15px;
	color: white;
	background-color: rgba(13, 13, 15, 0.85);
	border: 2px solid var(--primary);
	display: none;
	gap: 10px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}

.fs-dialog-box-ui p{
	margin: 0;
}

.fs-dialog-btn{
	color: #ffffff;
	background-color: var(--primary);
	border-radius: 5px;
	border: none;
	width: 44px;
	height: 25px;
	text-transform: capitalize;
	outline: none;
}

.fs-dialog-button-container{
	display: flex;
	width: 60%;
	justify-content: space-evenly;
	align-items: center;
}

.fs-swipe-img-container{
	width: 100%;
	height: 100%;
	transform: scale(.5);
	display: flex;
	justify-content: center;
	align-items: center;
	bottom: 10%;
	position: relative;
}

.fs-swipe-arrow{
	height: 30%;
	width: auto;
}

.fs-swipe-hand{
	position: absolute;
	transform: scale(1.8);
	left: 47%;
	bottom: 25%;
	animation: fs-swipe-anim 3s linear infinite forwards;
}

@keyframes fs-swipe-anim{
	0%,20%{
		bottom:25%;
	}
	45%{
		opacity: 1;
	}
	70%, 100%{
		bottom: 70%;
		opacity: 0;
	}
}

dialog[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}