#gwt_casualinteractive {
			max-width: 790px;
		}
		@media screen and (width <= 790px) {
			/*
				Even though the engine will auto resize, we are still providing
				a baseline here for google's mobile usability check.
			*/
			#gwt_casualinteractive {
				max-width: 100vw;
			}
		}
        /* Prevent horizontal scrolling by hiding the left bar if engine + left bar is wider than the viewport. */
		@media screen and (width <= 1000px) /* Breakpoint: PUZZLE_LEFTBAR */ {
			#leftbar {
				display: none;
			}
		}

		#bc-banner-page_top {
			display: none;
		}
	

		/* The day's puzzle list: one Bootstrap outline pill per puzzle, the loaded one active
		   (filled). The difficulty dots carry their own colors: the site's named text colors
		   (.green is an olive, .orange a burnt one) read dull at dot size. */
		.bc-day-puzzles {
			margin: 0.2em 0 0.75em;
		}
		.bc-day-puzzles h2 {
			margin: 0 0 0.5em;
		}
		.bc-day-number {
			font-variant-numeric: tabular-nums;
		}
		.bc-day-dot {
			width: 0.55em;
			height: 0.55em;
			border-radius: 50%;
		}
		.bc-day-dot-easy {
			background-color: #3f9a55;
		}
		.bc-day-dot-moderate {
			background-color: #d08a1c;
		}
		.bc-day-dot-hard {
			background-color: #c23f3f;
		}
		.bc-day-puzzles .active .bc-day-dot {
			box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.55);
		}
		.bc-day-difficulty {
			font-size: 0.78em;
			letter-spacing: 0.02em;
			text-transform: uppercase;
		}
		/* The seven pills must stay on one row: with the difficulty word they need ~640px; the dot
		   alone needs ~365px. Each breakpoint keeps a margin above the viewport where its row
		   would wrap: a desktop scrollbar takes ~17px off the column and font metrics vary by
		   device. Narrowest: the number alone. */
		@media screen and (width <= 739px) {
			.bc-day-difficulty {
				display: none;
			}
		}
		@media screen and (width <= 429px) {
			.bc-day-dot {
				display: none;
			}
		}