/* ===================================================================
   Noar Summer Games — SUMMER VIBES sticker design system.
   Matches htp.mkd.org.il/noar26: Rubik 900, #332664 borders, 24px radius,
   hard offset shadows in brand colors, pink pill buttons, yellow badges.
   Everything scoped under .nsg-app. Game internals are restyled by the
   .nsg-app .nsg<game>-* override blocks at the bottom (logic untouched).
   =================================================================== */

.nsg-app {
	--nsg-yellow: #FFE500;
	--nsg-pink: #EC008C;
	--nsg-teal: #16B5C4;
	--nsg-purple: #332664;
	--nsg-ink: #2a1550;
	--nsg-r: 22px;
	--nsg-r-pill: 50px;
	--nsg-bd: 3px solid var(--nsg-purple);
	--nsg-sh-teal: 7px 7px 0 var(--nsg-teal);
	--nsg-sh-pink: 7px 7px 0 var(--nsg-pink);
	--nsg-sh-yellow: 6px 6px 0 var(--nsg-yellow);
	--nsg-sh-purple: 5px 5px 0 var(--nsg-purple);

	direction: rtl;
	text-align: right;
	max-width: 640px;
	margin: 0 auto;
	padding: 14px 12px 28px;
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--nsg-ink);
	line-height: 1.5;
	box-sizing: border-box;
	border-radius: 28px;
	background:
		radial-gradient(circle at 12% 18%, rgba(255,229,0,.55) 0 9px, transparent 10px),
		radial-gradient(circle at 88% 12%, rgba(236,0,140,.40) 0 7px, transparent 8px),
		radial-gradient(circle at 78% 82%, rgba(22,181,196,.40) 0 8px, transparent 9px),
		radial-gradient(circle at 22% 88%, rgba(236,0,140,.30) 0 6px, transparent 7px),
		linear-gradient(168deg, #FFF4B8 0%, #FFDCEE 52%, #CFF3F8 100%);
}
.nsg-app *, .nsg-app *::before, .nsg-app *::after { box-sizing: border-box; }

/* ---- branded header (logo) ---- */
.nsg-head { text-align: center; margin: 2px 0 14px; }
.nsg-head-logo { width: clamp(150px, 52%, 240px); height: auto; filter: drop-shadow(0 4px 0 rgba(51,38,100,.18)); }

.nsg-screen { outline: none; }

/* ---- sticker cards ---- */
.nsg-card {
	background: #fff;
	border: var(--nsg-bd);
	border-radius: var(--nsg-r);
	padding: 20px 18px;
	margin: 0 0 16px;
	box-shadow: var(--nsg-sh-teal);
}
.nsg-game-card.is-open { box-shadow: var(--nsg-sh-pink); }
.nsg-result { box-shadow: var(--nsg-sh-yellow); }

.nsg-h { font-size: 26px; font-weight: 900; color: var(--nsg-purple); margin: 0 0 6px; line-height: 1.15; letter-spacing: -.3px; }
.nsg-h3 { font-size: 21px; font-weight: 900; color: var(--nsg-purple); margin: 6px 0; }
.nsg-sub { font-size: 16px; color: #5b5475; margin: 6px 0; font-weight: 500; }
.nsg-note { font-size: 14px; color: var(--nsg-pink); font-weight: 700; margin: 8px 0; }
.nsg-lives { font-size: 17px; font-weight: 800; color: var(--nsg-purple); margin: 10px 0; letter-spacing: 1px; }

/* ---- buttons ---- */
.nsg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 52px; padding: 13px 24px; width: 100%; margin-top: 12px;
	font-family: inherit; font-size: 18px; font-weight: 800;
	border-radius: var(--nsg-r-pill); border: var(--nsg-bd);
	background: #fff; color: var(--nsg-purple); cursor: pointer;
	box-shadow: var(--nsg-sh-purple);
	transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.nsg-btn:hover { filter: brightness(1.03); }
.nsg-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--nsg-purple); }
.nsg-btn:focus-visible { outline: 4px solid var(--nsg-pink); outline-offset: 3px; }
.nsg-btn-primary { background: var(--nsg-pink); color: #fff; }
.nsg-btn-ghost { background: var(--nsg-teal); color: #fff; }
.nsg-btn-text { background: transparent; border-color: transparent; box-shadow: none; color: var(--nsg-purple); text-decoration: underline; min-height: 40px; font-weight: 700; }
.nsg-btn-text:active { transform: none; box-shadow: none; }
.nsg-btn-big { font-size: 21px; min-height: 60px; }

/* ---- tabs ---- */
.nsg-tabs { display: flex; gap: 8px; margin: 14px 0 18px; }
.nsg-tab {
	flex: 1; min-height: 46px; padding: 10px; border-radius: var(--nsg-r-pill);
	border: var(--nsg-bd); background: #fff; color: var(--nsg-purple);
	font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.nsg-tab.is-on { background: var(--nsg-purple); color: #fff; }
.nsg-tab:focus-visible { outline: 3px solid var(--nsg-pink); outline-offset: 2px; }

/* ---- forms ---- */
.nsg-form { display: flex; flex-direction: column; gap: 13px; }
.nsg-field { display: flex; flex-direction: column; gap: 5px; }
.nsg-label { font-weight: 700; font-size: 15px; color: var(--nsg-purple); }
.nsg-input {
	width: 100%; min-height: 50px; padding: 12px 15px;
	font-family: inherit; font-size: 17px; color: var(--nsg-ink); font-weight: 600;
	border: 2.5px solid #c9c2e0; border-radius: 16px; background: #fff;
}
.nsg-input:focus { outline: none; border-color: var(--nsg-teal); box-shadow: 0 0 0 4px rgba(22,181,196,.22); }
.nsg-hint { font-size: 13px; color: #7c7596; }
.nsg-err { font-size: 13px; color: #d70060; font-weight: 700; min-height: 1px; }
.nsg-formerr { font-size: 15px; color: #d70060; font-weight: 800; text-align: center; min-height: 1px; }
.nsg-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; font-weight: 600; }
.nsg-check { width: 24px; height: 24px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--nsg-pink); }
.nsg-consent a { color: var(--nsg-pink); font-weight: 800; }

/* ---- stats ---- */
.nsg-stats { display: flex; gap: 9px; margin-top: 16px; }
.nsg-stat { flex: 1; background: var(--nsg-purple); color: #fff; border-radius: 18px; padding: 13px 6px; text-align: center; border: 3px solid var(--nsg-purple); box-shadow: 4px 4px 0 rgba(51,38,100,.18); }
.nsg-stat:nth-child(2) { background: var(--nsg-pink); border-color: var(--nsg-pink); }
.nsg-stat-v { font-size: 26px; font-weight: 900; color: var(--nsg-yellow); line-height: 1.05; }
.nsg-stat:nth-child(2) .nsg-stat-v { color: #fff; }
.nsg-stat-l { font-size: 12px; opacity: .92; margin-top: 4px; font-weight: 600; }

/* ---- greeting / game card ---- */
.nsg-greet .nsg-h { text-align: center; }
.nsg-badge { display: inline-block; background: var(--nsg-yellow); color: var(--nsg-purple); font-weight: 900; font-size: 14px; padding: 7px 16px; border-radius: var(--nsg-r-pill); margin-bottom: 10px; border: 2.5px solid var(--nsg-purple); }
.nsg-badge.is-muted { background: #e7e2f3; }
.nsg-game-card { text-align: center; }
.nsg-game-card.is-done { background: #fbfff4; }
.nsg-warn { background: #fff6c2; color: var(--nsg-ink); border: 2.5px dashed var(--nsg-pink); border-radius: 16px; padding: 11px 14px; font-weight: 700; font-size: 15px; margin: 14px 0; }
.nsg-intro { text-align: center; }
.nsg-intro-actions { margin-top: 14px; }
.nsg-actions { margin-top: 4px; }

/* ---- result ---- */
.nsg-result { text-align: center; }
.nsg-score-big { font-size: 70px; font-weight: 900; color: var(--nsg-pink); line-height: 1; margin: 8px 0 2px; text-shadow: 3px 3px 0 var(--nsg-yellow); }
.nsg-score-cap { font-size: 16px; font-weight: 800; color: var(--nsg-purple); margin-bottom: 8px; }

/* ---- play wrapper ---- */
.nsg-play { padding: 14px; box-shadow: var(--nsg-sh-pink); }
.nsg-play-head { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.nsg-play-title { font-weight: 900; font-size: 19px; color: var(--nsg-purple); }
.nsg-arena { min-height: 340px; display: flex; flex-direction: column; position: relative; }
/* stable full-height game wrapper — locks the play area to one viewport height so
   nothing shifts when the 3-2-1 / combo / record / 10s overlays appear. dvh is the
   primary unit, vh is the fallback. Active only while a game is mounted. */
.nsg-app .nsg-fullscreen { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; height: 100vh; height: 100dvh; margin: 0; padding: 6px 10px 10px; border: none; border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(168deg, #FFF4B8 0%, #FFDCEE 50%, #CFF3F8 100%); }
.nsg-app .nsg-fullscreen .nsg-play-head { display: none; }
.nsg-app .nsg-fullscreen .nsg-arena { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; }
.nsg-app .nsg-gamebar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 0 5px; }
.nsg-app .nsg-gamebar-title { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 900; font-size: 16px; color: var(--nsg-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsg-app .nsg-gbtn { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; max-width: 36px; padding: 0; margin: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(51,38,100,.9); color: #fff; font-family: inherit; font-size: 15px; font-weight: 900; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.28); box-sizing: border-box; appearance: none; -webkit-appearance: none; }
.nsg-app .nsg-gbtn:active { transform: scale(.92); }
.nsg-app .nsg-gbtn svg { display: block; pointer-events: none; }
/* the floating accessibility toggle covers the play area — hide it on game pages only
   (this stylesheet loads only where the shortcode renders; the a11y statement stays linked in the legal bar) */
#pojo-a11y-toolbar { display: none !important; }

/* ---- competition layer ---- */
.nsg-head { position: relative; }
.nsg-mute { position: absolute; top: 6px; left: 6px; width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--nsg-purple); background: #fff; font-size: 19px; cursor: pointer; line-height: 1; box-shadow: 3px 3px 0 var(--nsg-purple); }
.nsg-mute:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nsg-purple); }
.nsg-mute:focus-visible { outline: 3px solid var(--nsg-pink); outline-offset: 2px; }
.nsg-cstats { display: flex; gap: 9px; margin: 14px 0; }
.nsg-cstat { flex: 1; background: #fff; border: 3px solid var(--nsg-purple); border-radius: 16px; padding: 10px 4px; text-align: center; box-shadow: 4px 4px 0 var(--nsg-teal); }
.nsg-cstat-v { font-size: 22px; font-weight: 900; color: var(--nsg-pink); line-height: 1.05; }
.nsg-cstat-l { font-size: 11px; color: #5b5475; font-weight: 700; margin-top: 3px; }
.nsg-rivalry { font-size: 16px; font-weight: 800; color: var(--nsg-purple); background: #fff6c2; border: 2.5px dashed var(--nsg-pink); border-radius: 14px; padding: 10px 12px; margin: 10px 0; }
.nsg-record { font-size: 18px; font-weight: 900; color: #fff; background: var(--nsg-pink); border: 3px solid var(--nsg-purple); border-radius: 16px; padding: 12px; margin: 10px 0; box-shadow: 5px 5px 0 var(--nsg-purple); }
.nsg-countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(51, 38, 100, .82); color: var(--nsg-yellow); font-size: 72px; font-weight: 900; border-radius: 16px; text-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.nsg-cd-pop { animation: nsg-cdpop .55s ease; }
@keyframes nsg-cdpop { 0% { transform: scale(.5); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* ---- leaderboard ---- */
.nsg-lb { box-shadow: var(--nsg-sh-teal); }
.nsg-lb-filters { display: flex; gap: 8px; justify-content: center; margin: 8px 0 18px; flex-wrap: wrap; }
.nsg-chip {
	min-height: 42px; padding: 8px 18px; border-radius: var(--nsg-r-pill);
	border: var(--nsg-bd); background: #fff; color: var(--nsg-purple);
	font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
.nsg-chip.is-on { background: var(--nsg-teal); color: #fff; }
.nsg-chip:focus-visible { outline: 3px solid var(--nsg-pink); outline-offset: 2px; }
.nsg-frozen { text-align: center; background: #e8f8fb; color: var(--nsg-purple); font-weight: 800; border-radius: 14px; padding: 9px; margin-bottom: 14px; border: 2.5px solid var(--nsg-teal); }

.nsg-podium { display: flex; align-items: flex-end; justify-content: center; gap: 9px; margin: 8px 0 20px; }
.nsg-pod { flex: 1; max-width: 33%; text-align: center; }
.nsg-pod-medal { font-size: 32px; }
.nsg-pod-name { font-weight: 800; font-size: 14px; color: var(--nsg-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsg-pod-score { font-weight: 900; font-size: 16px; color: var(--nsg-pink); }
.nsg-pod-bar { margin-top: 7px; border-radius: 14px 14px 0 0; display: flex; align-items: flex-start; justify-content: center; color: #fff; font-weight: 900; font-size: 22px; padding-top: 7px; border: 3px solid var(--nsg-purple); border-bottom: none; }
.nsg-pod-1 .nsg-pod-bar { background: var(--nsg-yellow); color: var(--nsg-purple); height: 96px; }
.nsg-pod-2 .nsg-pod-bar { background: #c9cee0; height: 72px; }
.nsg-pod-3 .nsg-pod-bar { background: #efb083; height: 56px; }

.nsg-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.nsg-table th { font-size: 13px; color: #7c7596; padding: 7px 8px; border-bottom: 2.5px solid #ece8f6; text-align: right; font-weight: 700; }
.nsg-table td { padding: 11px 8px; border-bottom: 1px solid #f0edf8; font-size: 15px; font-weight: 600; }
.nsg-td-rank { font-weight: 900; color: var(--nsg-purple); width: 36px; }
.nsg-table tr.is-me td { background: #fff6c2; font-weight: 800; }
.nsg-me-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: var(--nsg-purple); color: #fff; border-radius: 14px; padding: 11px 15px; font-weight: 800; box-shadow: 4px 4px 0 var(--nsg-pink); }
.nsg-me-rank { color: var(--nsg-yellow); }
.nsg-me-name { flex: 1; }
.nsg-me-score { color: var(--nsg-yellow); }

/* ---- boot / misc ---- */
.nsg-boot { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 34px 10px; color: var(--nsg-purple); font-weight: 800; }
.nsg-boot-spin { width: 42px; height: 42px; border-radius: 50%; border: 6px solid #fff; border-top-color: var(--nsg-pink); box-shadow: 0 0 0 3px rgba(51,38,100,.15); animation: nsg-spin .8s linear infinite; }
@keyframes nsg-spin { to { transform: rotate(360deg); } }
.nsg-noscript { background: #fff6c2; color: var(--nsg-ink); border-radius: 14px; padding: 14px; text-align: center; font-weight: 700; }
.nsg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 380px) {
	.nsg-app { padding: 10px 8px 22px; }
	.nsg-h { font-size: 23px; }
	.nsg-score-big { font-size: 56px; }
	.nsg-stat-v { font-size: 22px; }
	.nsg-btn { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.nsg-app *, .nsg-app *::before, .nsg-app *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	.nsg-boot-spin { animation: none; }
}

/* ===================================================================
   GAME SKINS — restyle each mini-game's injected CSS via higher
   specificity (.nsg-app .nsg<game>-*). Only visual props are overridden;
   layout/position/size set inline by the game JS is left intact.
   =================================================================== */

/* Hide the site-wide WhatsApp floating button on the game page only
   (this stylesheet loads only where the shortcode is) — it overlapped a game control. */
#ht-ctc-chat,
.ht-ctc,
.ht-ctc-chat-box { display: none !important; }

/* ---------- summer_quiz (exemplar) ---------- */
.nsg-app .nsgquiz-root { padding: 4px 2px; }
.nsg-app .nsgquiz-hud {
	background: var(--nsg-purple); color: #fff; border: 3px solid var(--nsg-purple);
	border-radius: var(--nsg-r-pill); padding: 11px 20px; font-weight: 800; font-size: 17px;
	box-shadow: 4px 4px 0 var(--nsg-teal);
}
.nsg-app .nsgquiz-hud-val { color: var(--nsg-yellow); }
.nsg-app .nsgquiz-progress { font-weight: 900; font-size: 17px; color: var(--nsg-purple); margin: 16px 4px 8px; }
.nsg-app .nsgquiz-bar { height: 12px; border-radius: 10px; background: #f0e9ff; border: 2.5px solid var(--nsg-purple); overflow: hidden; margin: 0 2px 18px; }
.nsg-app .nsgquiz-bar-fill { background: var(--nsg-pink); }
.nsg-app .nsgquiz-question {
	font-size: 23px; line-height: 1.3; font-weight: 900; color: var(--nsg-purple);
	background: var(--nsg-yellow); border: 3px solid var(--nsg-purple); border-radius: 18px;
	padding: 16px 18px; margin: 6px 2px 18px; box-shadow: 5px 5px 0 var(--nsg-teal); text-align: center;
}
.nsg-app .nsgquiz-options { gap: 13px; }
.nsg-app .nsgquiz-opt {
	min-height: 60px; font-size: 19px; font-weight: 800; color: var(--nsg-purple);
	background: #fff; border: 3px solid var(--nsg-purple); border-radius: 16px;
	box-shadow: 5px 5px 0 rgba(51,38,100,.18); padding: 13px 16px;
	transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.nsg-app .nsgquiz-opt:hover:not(:disabled) { background: #fff7fc; }
.nsg-app .nsgquiz-opt:active:not(:disabled) { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(51,38,100,.18); }
.nsg-app .nsgquiz-opt-num { background: var(--nsg-teal); color: #fff; width: 36px; height: 36px; font-size: 17px; font-weight: 900; border: 2.5px solid var(--nsg-purple); }
.nsg-app .nsgquiz-opt.nsgquiz-selected { background: var(--nsg-pink); border-color: var(--nsg-purple); color: #fff; box-shadow: 5px 5px 0 var(--nsg-purple); }
.nsg-app .nsgquiz-opt.nsgquiz-selected .nsgquiz-opt-num { background: #fff; color: var(--nsg-pink); }
.nsg-app .nsgquiz-opt:focus-visible { outline: 4px solid var(--nsg-pink); outline-offset: 3px; }
.nsg-app .nsgquiz-done-title { font-size: 26px; font-weight: 900; color: var(--nsg-purple); }
.nsg-app .nsgquiz-done-sub { font-size: 18px; font-weight: 800; color: var(--nsg-pink); }

/* ---------- summer_tap ---------- */
.nsg-app .nsgstap-root{background:transparent;}
.nsg-app .nsgstap-hud{background:var(--nsg-purple);color:#fff;border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:11px 22px;box-shadow:4px 4px 0 var(--nsg-teal);}
.nsg-app .nsgstap-stat{background:transparent;}
.nsg-app .nsgstap-label{color:#fff;font-weight:800;font-size:13px;}
.nsg-app .nsgstap-val{color:var(--nsg-yellow);font-weight:900;font-size:26px;}
.nsg-app .nsgstap-stat.nsgstap-combo .nsgstap-val{color:var(--nsg-yellow);}
.nsg-app .nsgstap-stat.nsgstap-timer .nsgstap-val{color:#fff;}
.nsg-app .nsgstap-play{background:linear-gradient(160deg,var(--nsg-teal) 0%,#5fd6e0 55%,#bff0f4 100%);border:3px solid var(--nsg-purple);border-radius:22px;box-shadow:5px 5px 0 var(--nsg-purple);}
.nsg-app .nsgstap-target{background:var(--nsg-yellow);border:3px solid var(--nsg-purple);border-radius:50%;box-shadow:4px 4px 0 var(--nsg-purple);font-size:34px;font-weight:900;color:var(--nsg-purple);padding:0;}
.nsg-app .nsgstap-target:active{box-shadow:1px 1px 0 var(--nsg-purple);}
.nsg-app .nsgstap-msg{background:var(--nsg-yellow);color:var(--nsg-purple);border:3px solid var(--nsg-purple);border-radius:18px;padding:14px 20px;font-weight:900;font-size:20px;box-shadow:5px 5px 0 var(--nsg-pink);text-align:center;}

/* ---------- summer_memory ---------- */
.nsg-app .nsgmem-wrap{background:transparent;}
.nsg-app .nsgmem-hud{background:var(--nsg-purple);border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:11px 20px;box-shadow:4px 4px 0 var(--nsg-teal);}
.nsg-app .nsgmem-stat{background:transparent;color:#fff;font-weight:800;border:none;padding:0;}
.nsg-app .nsgmem-lbl{color:#fff;font-weight:800;font-size:13px;}
.nsg-app .nsgmem-val{color:var(--nsg-yellow);font-weight:900;font-size:20px;}
.nsg-app .nsgmem-card{background:transparent;border:none;border-radius:14px;padding:0;box-shadow:none;}
.nsg-app .nsgmem-face{border:3px solid var(--nsg-purple);border-radius:14px;font-weight:900;box-shadow:3px 3px 0 rgba(51,38,100,.20);}
.nsg-app .nsgmem-back{background:var(--nsg-teal);color:#fff;font-size:30px;font-weight:900;box-shadow:3px 3px 0 var(--nsg-purple);}
.nsg-app .nsgmem-front{background:var(--nsg-yellow);color:var(--nsg-purple);border:3px solid var(--nsg-purple);box-shadow:3px 3px 0 var(--nsg-teal);}
.nsg-app .nsgmem-up .nsgmem-front{background:#fff;border-color:var(--nsg-purple);box-shadow:3px 3px 0 var(--nsg-teal);}
.nsg-app .nsgmem-matched .nsgmem-front{background:var(--nsg-pink);color:#fff;border-color:var(--nsg-purple);box-shadow:3px 3px 0 var(--nsg-purple);}
.nsg-app .nsgmem-msg{color:var(--nsg-purple);font-weight:900;font-size:18px;background:#fff;border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:10px 20px;box-shadow:4px 4px 0 var(--nsg-yellow);text-align:center;}

/* ---------- summer_catch ---------- */
.nsg-app .nsgcatch-root{background:transparent;}
.nsg-app .nsgcatch-hud{background:transparent;}
.nsg-app .nsgcatch-hudbox{background:var(--nsg-purple);color:#fff;border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:11px 20px;font-weight:800;box-shadow:4px 4px 0 var(--nsg-teal);}
.nsg-app .nsgcatch-hudlabel{color:#fff;font-weight:800;}
.nsg-app .nsgcatch-hudval{color:var(--nsg-yellow);font-weight:900;}
.nsg-app .nsgcatch-area{background:linear-gradient(180deg,#9be7ff 0%,#bff0ff 42%,#ffe9a8 72%,#ffd97a 100%);border:3px solid var(--nsg-purple);border-radius:22px;box-shadow:5px 5px 0 var(--nsg-teal);}
.nsg-app .nsgcatch-basket{background:var(--nsg-yellow);border:3px solid var(--nsg-purple);border-radius:14px 14px 8px 8px;box-shadow:4px 4px 0 var(--nsg-purple);}
.nsg-app .nsgcatch-item{background:#fff;border:3px solid var(--nsg-purple);border-radius:50%;box-shadow:3px 3px 0 rgba(51,38,100,.22);}
.nsg-app .nsgcatch-item.nsgcatch-good{border-color:var(--nsg-yellow);box-shadow:3px 3px 0 rgba(255,229,0,.45);}
.nsg-app .nsgcatch-item.nsgcatch-bad{border:3px dashed var(--nsg-pink);box-shadow:3px 3px 0 rgba(236,0,140,.25);}
.nsg-app .nsgcatch-controls{background:transparent;}
.nsg-app .nsgcatch-btn{background:var(--nsg-pink);color:#fff;border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);box-shadow:5px 5px 0 var(--nsg-purple);font-weight:900;font-size:26px;padding:14px 26px;}
.nsg-app .nsgcatch-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--nsg-purple);}

/* ---------- summer_stop ---------- */
.nsg-app .nsgsum-root{background:transparent;border:none;box-shadow:none;padding:4px 2px;}
.nsg-app .nsgsum-hud{background:transparent;}
.nsg-app .nsgsum-chip{background:var(--nsg-purple);color:#fff;border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:11px 20px;font-weight:800;box-shadow:4px 4px 0 var(--nsg-teal);}
.nsg-app .nsgsum-chip b{color:var(--nsg-yellow);font-weight:900;}
.nsg-app .nsgsum-meterwrap{background:transparent;}
.nsg-app .nsgsum-meter{background:var(--nsg-purple);border:3px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);}
.nsg-app .nsgsum-zone{background:repeating-linear-gradient(45deg,var(--nsg-teal),var(--nsg-teal) 8px,#0e9aa7 8px,#0e9aa7 16px);border-radius:8px;border:2px solid var(--nsg-purple);}
.nsg-app .nsgsum-center{background:transparent;border-left:3px dashed var(--nsg-yellow);}
.nsg-app .nsgsum-marker{background:var(--nsg-pink);border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 2px var(--nsg-purple);}
.nsg-app .nsgsum-centerlbl{color:var(--nsg-purple);font-weight:800;background:var(--nsg-yellow);border:2.5px solid var(--nsg-purple);border-radius:var(--nsg-r-pill);padding:4px 14px;}
.nsg-app .nsgsum-result{background:#fff;color:var(--nsg-purple);border:3px solid var(--nsg-purple);border-radius:18px;font-weight:900;font-size:20px;padding:14px 18px;box-shadow:5px 5px 0 var(--nsg-teal);text-align:center;}
.nsg-app .nsgsum-result.nsgsum-good{background:var(--nsg-yellow);box-shadow:5px 5px 0 var(--nsg-purple);}
.nsg-app .nsgsum-stop{background:var(--nsg-yellow);color:var(--nsg-purple);border:3px solid var(--nsg-purple);border-radius:18px;font-weight:900;font-size:26px;min-height:64px;box-shadow:6px 6px 0 var(--nsg-purple);}
.nsg-app .nsgsum-stop:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--nsg-purple);}

/* ============================================================
   APP SHELL v2 — full-viewport 100dvh game app, redesigned
   leaderboard, and an icon mute button. Overrides the rules above.
   ============================================================ */
.nsg-app { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; max-width: none; margin: 0; padding: 0; border-radius: 0; z-index: 9000; display: flex; flex-direction: column; overflow: hidden; }
/* keep the app clear of the WP admin bar when logged in */
.admin-bar .nsg-app { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) { .admin-bar .nsg-app { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); } }
.nsg-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: 10px 60px 8px; text-align: center; }
.nsg-head-logo { width: clamp(126px, 40vw, 198px); height: auto; filter: drop-shadow(0 4px 0 rgba(51,38,100,.18)); }
.nsg-screens { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: center; padding: 4px 12px max(22px, env(safe-area-inset-bottom)); }
.nsg-screens > .nsg-screen { width: 100%; max-width: 600px; }

.nsg-nickrow { display: flex; gap: 8px; align-items: stretch; }
.nsg-nickrow .nsg-input { flex: 1 1 auto; min-width: 0; background: #fbfaff; font-weight: 800; color: var(--nsg-purple); }
.nsg-dice { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border-radius: 14px; border: var(--nsg-bd); background: var(--nsg-yellow); color: var(--nsg-purple); font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--nsg-purple); transition: transform .1s ease, box-shadow .1s ease; }
.nsg-dice svg { width: 21px; height: 21px; display: block; }
.nsg-dice:hover svg { transform: rotate(-14deg); }
.nsg-dice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--nsg-purple); }
.nsg-dice:disabled { opacity: .55; cursor: default; }
.nsg-forgot-link { display: block; margin: 12px auto 0; background: none; border: none; color: var(--nsg-purple); font-family: inherit; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nsg-forgot-link:hover { color: var(--nsg-pink); }
.nsg-forgot-box { margin-top: 12px; background: #fff6c2; border: 2.5px dashed var(--nsg-pink); border-radius: 16px; padding: 13px 15px; font-size: 14.5px; font-weight: 600; color: var(--nsg-ink); text-align: center; }
.nsg-forgot-box p { margin: 0 0 10px; }
.nsg-forgot-box .nsg-field { text-align: right; }
.nsg-forgot-alt { margin-top: 12px !important; font-size: 13px; color: #7c7596; }
.nsg-forgot-wa { width: auto; display: inline-flex; }
.nsg-legalbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); font-size: 11.5px; font-weight: 600; }
.nsg-legalbar a { color: rgba(51,38,100,.62); text-decoration: underline; text-underline-offset: 3px; }
.nsg-legalbar a:hover { color: var(--nsg-purple); }
.nsg-legalbar a + a::before { content: '·'; margin-inline-end: 6px; color: rgba(51,38,100,.4); }
.nsg-mute { top: 50%; left: 12px; right: auto; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--nsg-purple); }
.nsg-mute svg { width: 23px; height: 23px; fill: currentColor; display: block; }
.nsg-mute:active { transform: translateY(-50%) translate(2px, 2px); box-shadow: 1px 1px 0 var(--nsg-purple); }

/* ---- leaderboard v2 ---- */
.nsg-lb-sub { text-align: center; color: #8b84a6; font-weight: 700; font-size: 13.5px; margin: -8px 0 14px; }
.nsg-podium { align-items: flex-end; gap: 10px; margin: 12px 0 22px; }
.nsg-pod { flex: 1 1 0; max-width: 33%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.nsg-pod-av { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--nsg-purple); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 23px; color: #fff; box-shadow: 3px 3px 0 rgba(51,38,100,.16); margin-bottom: 13px; }
.nsg-pod-1 .nsg-pod-av { width: 70px; height: 70px; font-size: 28px; }
.nsg-pod-crown { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 28px; height: 22px; }
.nsg-pod-crown svg { width: 100%; height: 100%; display: block; }
.nsg-pod-name { font-weight: 800; font-size: 13px; color: var(--nsg-purple); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsg-pod-score { font-weight: 900; font-size: 15px; color: var(--nsg-pink); margin-bottom: 7px; }
.nsg-pod-bar { width: 100%; margin-top: 0; padding-top: 8px; }
.nsg-pod-1 .nsg-pod-bar { height: 92px; }
.nsg-pod-2 .nsg-pod-bar { background: #d4d9e8; height: 66px; }
.nsg-pod-3 .nsg-pod-bar { background: #e8b78e; height: 50px; }

.nsg-lb-list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.nsg-lb-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 2px solid #ece8f6; border-radius: 16px; padding: 9px 12px; }
.nsg-lb-row.is-me { border: 2.5px solid var(--nsg-purple); box-shadow: 3px 3px 0 var(--nsg-yellow); background: #fffdf3; }
.nsg-lb-rank { flex: 0 0 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-weight: 900; font-size: 15px; color: var(--nsg-purple); }
.nsg-lb-rank .nsg-lb-crown { width: 19px; height: 16px; }
.nsg-lb-av { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: #fff; border: 2px solid var(--nsg-purple); }
.nsg-lb-info { flex: 1 1 auto; min-width: 0; }
.nsg-lb-name { font-weight: 800; font-size: 15px; color: var(--nsg-purple); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsg-lb-meta { font-size: 12px; color: #8b84a6; font-weight: 600; margin-top: 1px; }
.nsg-lb-tier { font-weight: 800; }
.nsg-lb-tier--diamond { color: #12a6b6; } .nsg-lb-tier--platinum { color: #6c7bd0; } .nsg-lb-tier--gold { color: #d99a1e; } .nsg-lb-tier--silver { color: #8a93ab; } .nsg-lb-tier--bronze { color: #c0824f; }
.nsg-lb-score { flex: 0 0 auto; font-weight: 900; font-size: 16px; color: var(--nsg-ink); }
.nsg-lb-crown { display: block; }
.nsg-lb-crown--gold { fill: #F2B01E; } .nsg-lb-crown--silver { fill: #9aa3bb; } .nsg-lb-crown--bronze { fill: #cf8b54; }

.nsg-lb-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.nsg-lb-pager-show { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7c7596; font-weight: 700; }
.nsg-lb-select { border: 2px solid var(--nsg-purple); border-radius: 10px; padding: 5px 9px; font-family: inherit; font-weight: 800; color: var(--nsg-purple); background: #fff; cursor: pointer; }
.nsg-lb-pager-nav { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--nsg-purple); font-size: 13px; }
.nsg-lb-pg-btn { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--nsg-purple); background: #fff; color: var(--nsg-purple); font-weight: 900; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nsg-lb-pg-btn:disabled { opacity: .38; cursor: default; }