/* === Google brand colors ================================================== */
:root {
	--google-blue:   #4285F4;
	--google-red:    #EA4335;
	/* --google-yellow: #FBBC05; */
	--google-yellow: #ffbf00;
	--google-green:  #34A853;
}

/* Cell color assignments */
.menu-cell--blue   { --google-color: var(--google-blue); }
.menu-cell--red    { --google-color: var(--google-red); }
.menu-cell--yellow { --google-color: var(--google-yellow); }
.menu-cell--green  { --google-color: var(--google-green); }

/* Flip delays — main card (visual order, HTML stays clean) */
.menu-card > .menu-cell:nth-child(2) { --flip-delay: 0ms; }
.menu-card > .menu-cell:nth-child(3) { --flip-delay: 120ms; }
.menu-card > .menu-cell:nth-child(4) { --flip-delay: 240ms; }
.menu-card > .menu-cell:nth-child(5) { --flip-delay: 360ms; }

/* Flip delays — options panel rows */
#options-panel > .menu-cell:nth-child(2) { --flip-delay: 0ms; }
#options-panel > .menu-cell:nth-child(3) { --flip-delay: 120ms; }

/* Material Icons Outlined base style */
.material-icons-outlined {
	font-family: 'Material Icons Outlined';
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	flex-shrink: 0;
	user-select: none;
}

/* === Overlay ============================================================== */
#menu-container {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: var(--bg-color); */
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

#menu-container.active {
	pointer-events: auto;
}

/* === Card ================================================================= */
.menu-card {
	/* border-right: 3px solid var(--cell-edge-color); */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	width: min(95vw, 540px);
	background-color: var(--bg-color);
	box-shadow: var(--card-shadow);
}

/* 3px divider between cells only — not between the search bar and first cell */
.menu-card > .menu-cell + .menu-cell {
	/* margin-top: 3px; */
}

/* === Search bar inside the card =========================================== */
#menu-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.menu-title {
	padding: 16px 20px;
	background-color: var(--bg-color);
	border-left: 4px solid var(--cell-edge-color);
	z-index: 100;
	font-family: "Noto Sans";
	color: var(--google-blue);
	font-weight: 500;
	font-size: 2.6rem;
	letter-spacing: 0.04em;
	overflow: hidden;
	height: 88px;
	display: flex;
	align-items: center;
}
.menu-title-text {
	width: 100%;
	overflow: hidden;
}
.menu-title-buffer {
	overflow: revert;
	visibility: hidden;
	position: absolute;
	height: revert;
	display: revert;
}

.menu-search-icon {
	font-size: 28px !important;
	color: #9aa0a6;
	flex-shrink: 0;
}

.menu-header {
	z-index: 100;
	font-size: 1.25rem;
	letter-spacing: 0.06em;
}

/* === Flip cells =========================================================== */
/*
   Structure mirrors game cell.css:
     .menu-cell          → wrapper (sets perspective, like .cell-wrapper)
     .menu-cell-inner    → the flipping card (like .cell-card)
     .menu-cell-back     → colored face, active when face-down (like .cell-front)
     .menu-cell-front    → content face, revealed on flip  (like .cell-back)

   Flip direction: rotateX(-180deg) → rotateX(0deg), matching the game.
*/
.menu-cell {
	perspective: 700px;
	height: 56px;
}

.menu-cell-inner {
	height: 100%;
	transform: rotateX(180deg); /* start showing the colored back face */
	transform-style: preserve-3d;
}

@keyframes menu-cell-flip {
	from { transform: rotateX(180deg); }
	to   { transform: rotateX(0deg); }
}

/* Trigger the reveal on the main card when the overlay opens */
#menu-container.active .menu-card .menu-cell-inner {
	animation: menu-cell-flip 0.5s ease-out both;
	animation-delay: var(--flip-delay, 0ms);
}

/* Trigger the reveal in the options panel when it opens */
.options-panel.flip-anim .menu-cell-inner {
	animation: menu-cell-flip 0.6s ease-out both;
	animation-delay: var(--flip-delay, 0ms);
}

.menu-cell-back,
.menu-cell-front {
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Colored back face — only seen during the flip animation */
.menu-cell-back {
	position: absolute;
	inset: 0;
	background-color: var(--google-color);
	/* pre-rotated so it faces the viewer when inner is at rotateX(-180deg) */
	transform: rotateX(180deg);
}

/* Content front face */
.menu-cell-front {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--frame-color);
	/* background-color: var(--cell-color); */
	color: var(--ui-text-color);
	border-left: 5px solid var(--google-color);
}

/* === Shared panel styles ================================================== */
/* Used by both the date picker and the options panel */
.date-picker-panel {
	display: none;
	flex-direction: column;
	width: min(92vw, 480px);
	background-color: var(--bg-color);
	box-shadow: var(--card-shadow);
}

.date-picker-panel.active {
	display: flex;
}

.date-picker-footer {
	height: 56px;
	display: flex;
	background-color: var(--frame-color);
	padding: 8px;
}

/* === Date picker ========================================================== */
.date-picker-header {
	display: flex;
	align-items: center;
	background-color: var(--google-green);
	color: white;
	padding: 14px 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}

.date-picker-month-label {
	flex: 1;
	text-align: center;
	font-size: 1.1rem;
	/* font-weight: 500; */
	/* text-transform: uppercase; */
	/* letter-spacing: 0.04em; */
	letter-spacing: revert;
}

.date-picker-nav-btn {
	color: white;
}

.date-picker-nav-btn:hover:not(:disabled) {
	background-color: rgba(255, 255, 255, 0.18) !important;
}

.date-picker-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	gap: 6px;
	padding: 6px;
	background-color: var(--frame-color);
}
@media (max-width: 600px) {
	.date-picker-grid {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(7, 1fr);
	}
}

/* === Date cells (game-card aesthetic) ====================================== */
.date-cell {
	perspective: 200px;
	cursor: pointer;
	aspect-ratio: 1;
}

.date-cell-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(0deg);
}

.date-picker-panel.flip-anim .date-cell-inner {
	animation: menu-cell-flip 0.4s ease-out both;
	animation-delay: var(--flip-delay, 0ms);
}

.date-cell-back,
.date-cell-front {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.date-cell-back {
	position: absolute;
	inset: 0;
	background-color: var(--google-green);
	transform: rotateX(180deg);
}

.date-cell--selected .date-cell-back {
	background-color: var(--google-blue);
}

.date-cell-front {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: inline-size;
	background-color: var(--cell-color);
	box-shadow:
		/* inset 0px 3px 0px 0px var(--cell-edge-color), */
		0 1px 3px rgba(0, 0, 0, .12),
		0 1px 2px rgba(0, 0, 0, .24);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s;
}

.date-cell:hover .date-cell-front {
	background-color: var(--cell-edge-color);
}

.date-cell--selected .date-cell-front {
	box-shadow: inset 0 0 0 2px var(--google-blue);
}

.date-cell-day {
	font-size: 32cqi;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.date-cell-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--fill-pct, 0%);
	pointer-events: none;
	opacity: 0.9;
}

.date-cell-fill--normal {
	background-color: #6cb5ff;
	mix-blend-mode: multiply;
}

.date-cell-fill--challenge {
	background-color: #ff87cb;
	mix-blend-mode: multiply;
}

.date-cell-fill::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
	background-repeat: repeat-x;
	background-size: 40px 8px;
}

.date-cell-fill--normal::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%236cb5ff' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%236cb5ff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0%2C4 C 6.4%2C1.5 13.6%2C1.5 20%2C4 C 26.4%2C6.5 33.6%2C6.5 40%2C4 L 40%2C8 L 0%2C8 Z' fill='url(%23g)'/%3E%3C/svg%3E");
	animation: date-fill-wave1 4s linear infinite;
}

.date-cell-fill--challenge::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ff87cb' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23ff87cb' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0%2C4 C 6.4%2C1.5 13.6%2C1.5 20%2C4 C 26.4%2C6.5 33.6%2C6.5 40%2C4 L 40%2C8 L 0%2C8 Z' fill='url(%23g)'/%3E%3C/svg%3E");
	animation: date-fill-wave2 3s linear infinite;
}

@keyframes date-fill-wave1 {
	from { background-position-x: 0; }
	to   { background-position-x: -40px; }
}

@keyframes date-fill-wave2 {
	from { background-position-x: -20px; }
	to   { background-position-x: 20px; }
}

[data-theme="dark"] .date-cell-fill--normal,
[data-theme="dark"] .date-cell-fill--challenge {
	mix-blend-mode: screen;
	opacity: 0.65;
}

/* === Options panel ======================================================== */
.options-panel {
	width: min(320px, 92vw);
	--google-color: var(--google-yellow);
	background-color: var(--bg-color);
	/* gap: 3px; */
}

/* Options panel rows have no left border accent — they sit flush in the panel */
.options-panel .menu-toggle {
	border-left: none;
	/* border-color: var(--cell-edge-color); */
}

.options-panel-header {
	background-color: var(--google-yellow);
	color: white;
	padding: 20px 24px;
	text-align: center;
	/* font-size: 1rem; */
	font-weight: 500;
	/* letter-spacing: 0.06em; */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
}

/* === Actions row ========================================================== */
.menu-actions {
	gap: 10px;
	padding: 8px 18px;
}

/* === Buttons ============================================================== */
.menu-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* padding: 10px 14px; */
	height: 100%;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	border-radius: 2px;
	transition: box-shadow 0.2s, background-color 0.15s;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

.menu-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.menu-btn .material-icons-outlined {
	font-size: 18px;
}

.menu-btn-primary {
	background-color: var(--google-blue);
	color: white;
	/* MD1 raised button z-depth-2 */
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.20);
}

.menu-btn-primary:not(:disabled):hover {
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.20);
}

.menu-btn-primary:not(:disabled):active {
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.20);
}

.menu-btn-secondary {
	background-color: var(--cell-color);
	color: inherit;
	/* MD1 raised button z-depth-2 */
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.20);
}

.menu-btn-secondary:not(:disabled):hover {
	background-color: var(--cell-edge-color);
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.20);
}

.menu-btn-secondary:not(:disabled):active {
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12), 0 1px 3px 0 rgba(0,0,0,.20);
}

/* Icon-only variant — shrinks to fit the glyph */
.menu-btn.menu-btn-icon {
	flex: 0 0 auto;
	padding: 10px 13px;
}

/* === Nav arrow buttons ==================================================== */
.menu-arrow-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s;
	flex-shrink: 0;
}

.menu-arrow-btn:hover:not(:disabled) {
	background-color: var(--cell-color);
}

.menu-arrow-btn:disabled {
	opacity: 0.25;
	cursor: default;
}

/* === Sub-panel open buttons (date, options) ================================ */
/* These are .menu-cell-front elements styled as row buttons with a chevron */
.menu-date-btn,
.menu-toggle {
	padding: 17px 16px;
	border-top: none;
	border-right: none;
	border-bottom: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 0.875rem;
	transition: background-color 0.15s;
}

.menu-date-btn:hover,
.menu-toggle:hover {
	background-color: var(--cell-color);
}

.menu-date-btn {
	gap: 12px;
	font-weight: 500;
	color: inherit;
}

.menu-date-label {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.menu-date-chevron {
	color: var(--ui-text-color) !important;
	opacity: 0.35;
}

/* === Toggle rows ========================================================== */
/* .menu-toggle is also .menu-cell-front (a <button> element) */
.menu-toggle {
	gap: 14px;
}

.menu-toggle .material-icons-outlined {
	font-size: 22px;
}
.options-panel .menu-toggle,
.options-panel .menu-toggle.active {
	--google-color: var(--ui-text-color);
}
.menu-toggle.active {
	color: var(--google-color);
}

[data-theme="dark"] .menu-toggle.active {
	filter: brightness(1.2);
}

.menu-toggle.active .material-icons-outlined,
.menu-toggle .material-icons-outlined {
	color: var(--google-color);
	/* font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; */
}

.menu-toggle-label {
	flex: 1;
	font-weight: 500;
	text-align: left;
}

.menu-toggle-status {
	font-size: 0.775rem;
	/* opacity: 0.8; */
	min-width: 2ch;
	text-align: right;
	opacity: 0.85;
}

.menu-toggle.active .menu-toggle-status {
	opacity: 1;
	font-weight: 500;
	color: var(--google-color);
}