:root{
	--bg:#000;
	--fg:#fff;
	/* Pure black/white only */
	--muted:#fff;
	--muted2:#fff;
	--border:#fff;
	--shadow:none;
	--radius:0px;
	--max:980px;

	/* Responsive sizing: obnoxiously big, but never scroll */
	--pad:clamp(14px, 3.6vw, 44px);
	--gap:clamp(10px, 2.4vw, 22px);
	--title:clamp(56px, 12vw, 150px);
	--subtitle:clamp(16px, 3.3vw, 40px);
	--h2:clamp(12px, 1.9vw, 20px);
	--code:clamp(30px, 7.2vw, 92px);
	--qr:clamp(120px, 22vw, 260px);
	--btn:clamp(14px, 2.4vw, 22px);
	--section-pad:clamp(16px, 2.6vw, 28px);
}

*{box-sizing:border-box}
html,body{height:100%}
body.bcg{
	margin:0;
	background:var(--bg);
	color:var(--fg);
	/* More "cards" vibe: heavy, clean, no-nonsense sans */
	font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	font-weight:800;
	letter-spacing:-0.015em;
	font-size:18px;
	text-transform:uppercase;
	overflow-x:hidden; /* never allow horizontal scroll anywhere */
	-webkit-text-size-adjust:100%;
}

/* Some browsers don’t inherit text-transform reliably for form controls */
.bcg-btn,
.bcg-btn--giant,
.bcg-icon-btn,
.bcg-link,
.bcg-label,
.bcg-input,
.bcg-file,
.bcg-title,
.bcg-subtitle,
.bcg-h2,
.bcg-deck-name,
.bcg-deck-meta,
.bcg-status,
button,
input,
textarea,
select{
	text-transform:uppercase !important;
}

::placeholder{
	text-transform:uppercase;
}

.bcg-shell{
	max-width:var(--max);
	margin:0 auto;
	padding:0 var(--pad) var(--pad);
	/* Prevent top-of-glyph clipping while still feeling "no top margin" */
	padding-top:max(env(safe-area-inset-top), 10px);
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	gap:var(--gap);
	overflow-x:hidden;
}

/* Pages that must never scroll (TV/landing) */
body.bcg--fixed{overflow:hidden}
body.bcg--fixed .bcg-shell{
	height:100dvh;
	overflow:hidden;
}

/* Setup page: allow normal page scroll (avoid scroll-trap inside deck list) */
body.bcg-setup{
	overflow-y:auto;
}
body.bcg-setup .bcg-shell{
	min-height:100dvh;
	height:auto;
}

/* Join page: keep header visible and scroll inside the form, not the whole page */
body.bcg-join{overflow:hidden}
body.bcg-join .bcg-shell{height:100dvh; overflow:hidden}
body.bcg-join .bcg-join-card{
	flex:1 1 auto;
	min-height:0;
	overflow:auto;
}
body.bcg-join .bcg-join-card::-webkit-scrollbar{width:10px}
body.bcg-join .bcg-join-card::-webkit-scrollbar-thumb{background:#fff;border-radius:0}
body.bcg-join .bcg-join-card::-webkit-scrollbar-track{background:#000;border-radius:0}

/* Lobby */
.bcg-lobby{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.bcg-lobby-player{
	border:none;
	padding:6px 0;
}
.bcg-wait{
	font-size:clamp(28px, 7vw, 72px);
	font-weight:900;
	letter-spacing:0.06em;
}

/* Host lobby */
.bcg-hostbar{
	position:sticky;
	top:0;
	z-index:10;
	display:flex;
	gap:10px;
	background:#000;
	padding:10px 0;
	border-bottom:2px solid #fff;
}
.bcg-hostbar .bcg-btn{flex:1 1 0}
.bcg-host-join{margin-top:12px}
.bcg-host-actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:12px;
}
.bcg-host-actions .bcg-icon-btn{
	flex:1 1 160px;
	text-align:center;
}
.bcg-lobby--avatars{
	display:grid;
	grid-template-columns:1fr;
	gap:12px;
}
.bcg-lobby-player2{
	display:flex;
	align-items:center;
	gap:12px;
}
.bcg-avatar{
	width:52px;
	height:52px;
	border-radius:8px;
	object-fit:cover;
	border:2px solid #fff;
	background:#000;
}
.bcg-avatar--empty{
	display:block;
}
.bcg-lobby-name{font-weight:900}
.bcg-edit-panel{
	margin-top:14px;
	border-top:2px solid #fff;
	padding-top:14px;
}

/* Player gameplay UI (mobile-first) */
.bcg-scorebar{
	display:flex;
	flex-direction:column;
	gap:10px;
	border:2px solid #fff;
	padding:12px 14px;
}
.bcg-score-you{font-weight:900}
.bcg-score-top{font-weight:800}
.bcg-reveal-anim{
	animation:bcgPop 500ms ease-out both;
}
@keyframes bcgPop{
	from{opacity:0;transform:translateY(10px)}
	to{opacity:1;transform:translateY(0)}
}

.bcg-wait-full{
	min-height:60vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:12px;
	text-align:center;
}
.bcg-prompt{border:2px solid #fff;padding:12px 14px}
.bcg-prompt-text{font-size:clamp(18px, 4.2vw, 28px);line-height:1.25}
.bcg-timer{margin-top:10px;font-weight:900}
.bcg-hand{
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:12px;
}
.bcg-submitbar{
	position:sticky;
	bottom:0;
	background:#000;
	padding:12px 0;
	border-top:2px solid #fff;
	margin-top:12px;
	z-index:5;
}
.bcg-submitbar .bcg-btn{width:100%}
.bcg-cardpick{
	border:2px solid #fff;
	background:#fff;
	color:#000;
	padding:14px 14px;
	text-align:left;
	cursor:pointer;
	font-weight:900;
}
.bcg-cardpick--on{
	background:#000;
	color:#fff;
}

/* After creating a game on /bcg/setup, make the QR+code take over the screen */
body.bcg-created-mode .bcg-shell{
	/* Match the "top aligned" feel of the other screens */
	justify-content:flex-start;
}
body.bcg-created-mode .bcg-created{
	display:flex !important;
	flex:1 1 auto;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	/* Remove extra left padding difference vs other screens */
	padding:0;
	gap:clamp(14px, 2.2vw, 22px);
}
body.bcg-created-mode .bcg-created-layout{
	width:100%;
	display:grid;
	grid-template-columns:1fr auto;
	gap:clamp(14px, 3vw, 32px);
	align-items:center;
}
body.bcg-created-mode .bcg-created-left{
	min-height:0;
	display:flex;
	flex-direction:column;
	gap:clamp(14px, 2.2vw, 22px);
}
body.bcg-created-mode .bcg-created-actionbar{
	margin-top:clamp(14px, 2.2vw, 22px);
	display:flex;
	gap:12px;
	align-items:stretch;
	width:100%;
}
body.bcg-created-mode .bcg-created-actionbar > .bcg-icon-btn{
	flex:1 1 0;
	justify-content:center;
	text-align:center;
}
body.bcg-created-mode .bcg-created-meta{
	margin-top:clamp(10px, 1.6vw, 16px);
	display:flex;
	flex-direction:column;
	gap:10px;
}
body.bcg-created-mode .bcg-qr{
	width:clamp(200px, 30vw, 420px);
	height:clamp(200px, 30vw, 420px);
}
body.bcg-created-mode .bcg-code{
	font-size:clamp(46px, 7vw, 120px);
}

/* Mobile: keep side-by-side, smaller QR, center content */
@media (max-width: 720px){
	body.bcg-created-mode .bcg-created-layout{
		grid-template-columns:1fr auto;
		justify-content:center;
		text-align:left;
	}
	body.bcg-created-mode .bcg-created-actionbar{
		flex-direction:column;
		align-items:stretch;
	}
	body.bcg-created-mode .bcg-created-actionbar > .bcg-icon-btn{
		width:100%;
	}
	body.bcg-created-mode .bcg-actions{
		justify-content:center;
	}
	body.bcg-created-mode .bcg-qr{
		width:clamp(150px, 34vw, 240px);
		height:clamp(150px, 34vw, 240px);
	}
	body.bcg-created-mode .bcg-code{
		font-size:clamp(34px, 8.4vw, 72px);
	}
}

/* Setup: sticky bottom actions so you can always reach Create/Back */
.bcg-setup-actions{
	position:sticky;
	bottom:0;
	background:#000;
	border-top:2px solid #fff;
	padding:14px 0;
	margin-top:10px;
	z-index:5;
}

.bcg-header{display:flex;flex-direction:column;gap:8px}
.bcg-title{
	margin:0;
	font-size:var(--title);
	line-height:1;
	letter-spacing:-0.06em;
}
.bcg-subtitle{
	margin:0;
	color:var(--fg);
	font-size:var(--subtitle);
	font-weight:900;
	letter-spacing:0.01em;
}

.bcg-card{
	background:transparent;
	border:none;
	border-radius:0;
	box-shadow:none;
	padding:var(--section-pad);
}

/* Specifically remove the "outlined card" feel on the landing/session block */
.bcg-card--landing{
	box-shadow:none;
	background:transparent;
	padding:0;
}

/* Landing text should be crisp white (not muted) */
.bcg-card--landing .bcg-h2,
.bcg-card--landing .bcg-muted{
	color:var(--fg);
}

/* Remove the divider line on the landing block */
.bcg-card--landing .bcg-divider{
	display:none;
}

.bcg-stack{display:flex;flex-direction:column;gap:14px}
.bcg-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.bcg-row--spread{justify-content:space-between}

/* Landing layout: center the QR block (avoid it being shoved to the far right) */
.bcg-landing-layout{
	width:100%;
	justify-content:center;
	gap:clamp(22px, 4vw, 64px);
}
.bcg-landing-layout > :first-child{
	flex:1 1 520px;
	min-width:min(520px, 100%);
}
.bcg-landing-layout > :last-child{
	flex:0 0 auto;
	display:flex;
	justify-content:center;
}

.bcg-h2{margin:0;font-size:var(--h2);color:var(--muted);font-weight:900;letter-spacing:0.10em;text-transform:uppercase}
.bcg-code{
	font-size:var(--code);
	letter-spacing:clamp(0.06em, 0.14em, 0.20em);
	margin-top:8px;
	max-width:100%;
	overflow-wrap:break-word;
}

.bcg-muted{color:var(--muted);font-weight:800}
.bcg-divider{height:1px;background:rgba(255,255,255,.10);margin:6px 0}

/* Setup page: no grey text (user requested crisp white everywhere) */
body.bcg-setup .bcg-muted,
body.bcg-setup .bcg-deck-meta,
body.bcg-setup .bcg-label,
body.bcg-setup .bcg-h2,
body.bcg-setup .bcg-status{
	color:var(--fg) !important;
}

/* Make setup errors extremely noticeable */
body.bcg-setup .bcg-status--error{
	background:#ff0000;
	color:#000 !important;
	padding:14px 16px;
	border:2px solid #fff;
	font-weight:900;
	letter-spacing:0.06em;
}

.bcg-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.bcg-btn{
	appearance:none;
	border:2px solid #fff;
	background:#fff;
	color:#000;
	padding:clamp(12px, 2.2vw, 18px) clamp(14px, 2.8vw, 22px);
	border-radius:0;
	font-weight:900;
	letter-spacing:0.02em;
	cursor:pointer;
	font-size:var(--btn);
}
.bcg-btn:hover{background:#fff}
.bcg-btn:active{transform:translateY(1px)}

.bcg-link{color:var(--fg);font-weight:900;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.bcg-link:hover{text-decoration-thickness:3px}

.bcg-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:min(var(--qr), 100%)}
.bcg-qr{
	width:var(--qr);height:var(--qr);
	border-radius:16px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.bcg-qr img{width:100%;height:100%;object-fit:cover}
.bcg-qr-caption{color:var(--muted2);font-weight:900;letter-spacing:0.06em;text-transform:uppercase;font-size:12px}

.bcg-label{display:block;font-size:12px;color:var(--muted2);letter-spacing:0.08em;text-transform:uppercase;font-weight:900}
.bcg-input,.bcg-file{
	width:100%;
	padding:12px 14px;
	border-radius:0;
	border:2px solid #fff;
	background:#000;
	color:var(--fg);
	outline:none;
	font-weight:900;
	/* Prevent iOS Safari auto-zoom on focus */
	font-size:16px;
	line-height:1.2;
}
.bcg-input:focus,.bcg-file:focus{border-color:#fff;outline:3px solid rgba(255,255,255,.35);outline-offset:2px}

.bcg-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
}
@media (min-width:720px){
	.bcg-grid{grid-template-columns:1fr 1fr}
}

.bcg-host{
	border:2px solid #fff;
	border-radius:0;
	padding:14px;
	background:transparent;
}
.bcg-host-box{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.bcg-host-box input{margin-top:4px;transform:scale(1.3)}
.bcg-host-title{
	display:block;
	font-size:26px;
	letter-spacing:0.08em;
}

.bcg-status{
	min-height:22px;
	color:var(--fg);
	font-weight:900;
}
.bcg-status--error{color:#ffb4b4}
.bcg-status--ok{color:#b9ffcf}

.bcg-footer{margin-top:auto}

/* Tight-height screens: remove extra footer text to guarantee no scroll */
@media (max-height: 640px){
	.bcg-footer{display:none}
	.bcg-code{margin-top:4px}
}

/* Start page */
.bcg-start{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:clamp(10px, 2vw, 18px);
}
.bcg-start-join{
	width:min(720px, 100%);
	display:flex;
	flex-direction:column;
	gap:10px;
}
.bcg-start-join-row{
	display:flex;
	gap:12px;
	align-items:stretch;
	width:100%;
}
.bcg-start-join-row .bcg-input{flex:1 1 auto}
.bcg-start-join-row .bcg-btn{white-space:nowrap}
.bcg-btn--giant{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	padding:clamp(18px, 4.2vw, 34px) clamp(22px, 6vw, 52px);
	border-radius:0;
	font-size:clamp(26px, 6vw, 64px);
}
.bcg-start-hint{
	max-width:60ch;
}

/* Deck selector */
.bcg-decks{
	display:grid;
	grid-template-columns:1fr;
	gap:clamp(10px, 1.6vw, 16px);
	margin-top:6px;
}
@media (min-width:720px){
	.bcg-decks{grid-template-columns:1fr 1fr;}
}

.bcg-deck-actions{margin-top:4px}
.bcg-deck{
	display:flex;
	gap:14px;
	align-items:flex-start;
	padding:6px 4px;
	border:none;
	border-radius:0;
	background:transparent;
	cursor:pointer;
	min-width:0;
}
.bcg-deck > span{min-width:0}
.bcg-deck:hover .bcg-deck-name{ text-decoration: none; }

/* Custom "cool" checkbox */
.bcg-deck input{
	appearance:none;
	-webkit-appearance:none;
	width:26px;
	height:26px;
	margin-top:2px;
	border-radius:0;
	border:2px solid #fff;
	background:#000;
	box-shadow:none;
	position:relative;
	flex:0 0 26px;
}
.bcg-deck input:focus{outline:3px solid rgba(255,255,255,.35); outline-offset:2px;}
.bcg-deck input:checked{
	background:#fff;
	border-color:#fff;
}
.bcg-deck input:checked::after{
	content:"";
	position:absolute;
	left:7px; top:3px;
	width:7px; height:14px;
	border:solid #000;
	border-width:0 4px 4px 0;
	transform:rotate(45deg);
}

.bcg-deck-name{display:block;font-weight:900}
.bcg-deck-name,
.bcg-deck-meta{overflow-wrap:anywhere; word-break:break-word}
.bcg-deck-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--fg);font-weight:800;font-size:0.82em}
.bcg-count{display:inline-flex;align-items:center;gap:8px}
.bcg-card-icon{
	display:inline-block;
	width:12px;
	height:16px;
	border-radius:0;
	border:2px solid #fff;
	box-shadow:none;
}
.bcg-card-icon--black{background:#000;}
.bcg-card-icon--white{background:#fff;}
.bcg-dot{opacity:.9}

/* Created / TV layout reuse */
.bcg-created-layout{
	width:100%;
	justify-content:center;
	gap:clamp(22px, 4vw, 64px);
	align-items:center;
}

.bcg-icon-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	border:2px solid #fff;
	background:#fff;
	color:#000;
	border-radius:0;
	padding:clamp(10px, 2vw, 14px) clamp(12px, 2.4vw, 16px);
	font-weight:900;
	text-decoration:none;
	cursor:pointer;
	font-size:var(--btn);
}
.bcg-icon-btn:hover{background:#fff}
.bcg-icon{font-size:1.1em;line-height:1}