/* Task Capsule Machine */

/* ── Custom properties ── */

.tcm-wrap {
	--tcm-graphite:      #3b3834;
	--tcm-saddle:        #7d532c;
	--tcm-pale-oak:      #c6b7a8;
	--tcm-dusty-taupe:   #967d67;
	--tcm-soft-linen:    #e4e3db;
	--tcm-parchment:     #f2f1ed;
	--tcm-snow:          #f9f8f6;
	--tcm-mauve:         #8c7483;
	--tcm-peach:         #d88a6a;
	--tcm-rose:          #b97973;
	--tcm-bronze:        #d3a347;
	--tcm-gold:          #e4c879;
	--tcm-teal:          #6f9a98;
	--tcm-machine-width: clamp(230px, 72vw, 340px);
}

/* ── Screen-reader only utility ── */

.tcm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Notice ── */

.tcm-notice {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 1rem;
	line-height: 1.4;
}

.tcm-notice-error {
	background: #f5ede4;
	border: 2px solid var(--tcm-saddle);
	color: #5a3b1a;
}

.tcm-notice-success {
	background: var(--tcm-parchment);
	border: 2px solid var(--tcm-dusty-taupe);
	color: var(--tcm-graphite);
}

/* ── Wrap & Layout ── */

.tcm-wrap {
	max-width: 520px;
	margin: 2rem auto;
	padding: 1rem;
	font-family: inherit;
	color: var(--tcm-graphite);
}

/* Mobile: single column — tasks above machine, with breathing room between them */
.tcm-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.tcm-left-col {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tcm-right-col {
	order: 1;
}

.tcm-machine-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Input section ── */

.tcm-input-section {
	margin-bottom: 1.5rem;
}

.tcm-input-row {
	display: flex;
	gap: 0.5rem;
}

.tcm-input-row input[type="text"] {
	flex: 1;
	padding: 0.65rem 0.85rem;
	border: 2px solid var(--tcm-pale-oak);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--tcm-graphite);
	background: var(--tcm-snow);
	transition: border-color 0.2s;
	min-width: 0;
}

.tcm-input-row input[type="text"]::placeholder {
	color: var(--tcm-dusty-taupe);
}

.tcm-input-row input[type="text"]:focus {
	outline: none;
	border-color: var(--tcm-saddle);
	background: #fff;
}

.tcm-input-row select {
	padding: 0.65rem 0.5rem;
	border: 2px solid var(--tcm-pale-oak);
	border-radius: 8px;
	font-size: 0.85rem;
	font-family: inherit;
	color: var(--tcm-graphite);
	background: var(--tcm-snow);
	cursor: pointer;
	white-space: nowrap;
}

.tcm-input-row button {
	padding: 0.65rem 1.1rem;
	background: var(--tcm-saddle);
	color: var(--tcm-snow);
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	letter-spacing: 0.3px;
	transition: background 0.2s, box-shadow 0.2s;
	white-space: nowrap;
	box-shadow: 0 2px 0 #5a3b1a;
}

.tcm-input-row button:hover { background: #5f3f21; }

.tcm-input-row button:active {
	box-shadow: none;
	transform: translateY(1px);
}

.tcm-login-nudge {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: var(--tcm-dusty-taupe);
	text-align: center;
}

.tcm-login-nudge a {
	color: var(--tcm-saddle);
	font-weight: 600;
}

/* ── Gachapon Machine ── */

.tcm-machine-outer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
	user-select: none;
	position: relative;
	filter: drop-shadow(0 10px 18px rgba(59,56,52,0.22));
}

/* Base plinth rendered after the tray */
.tcm-machine-outer::after {
	content: '';
	display: block;
	width: var(--tcm-machine-width);
	height: clamp(34px, 9vw, 48px);
	margin-top: -2px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.15), transparent 42%),
		var(--tcm-saddle);
	border: 4px solid var(--tcm-graphite);
	border-radius: 0 0 20px 20px;
	box-shadow:
		inset 0 -5px 0 rgba(59,56,52,0.16),
		0 7px 14px rgba(59,56,52,0.16);
}

/* ── Banner label ── */

.tcm-machine-banner {
	width: var(--tcm-machine-width);
	padding: 14px 48px 13px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.16), transparent 42%),
		var(--tcm-saddle);
	border: 4px solid var(--tcm-graphite);
	border-bottom: 0;
	border-radius: 28px 28px 8px 8px;
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.18),
		inset 0 -5px 0 rgba(59,56,52,0.12);
	color: var(--tcm-teal);
	font-size: clamp(0.72rem, 2.2vw, 1.7rem);
	font-weight: 900;
	font-family: nunito, sans-serif;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: -1px;
	position: relative;
	isolation: isolate;
	overflow: visible;
	z-index: 4;
	box-sizing: border-box;
}

/* Inset panel behind text */
.tcm-machine-banner::before {
	content: '';
	position: absolute;
	inset: 8px 14px;
	border-radius: 16px;
	background: rgba(249,248,246,0.88);
	border: 2px solid rgba(249,248,246,0.95);
	box-shadow:
		inset 0 2px 0 rgba(255,255,255,0.55),
		0 2px 0 rgba(59,56,52,0.12);
	pointer-events: none;
	z-index: -1;
}

/* Star decorations */
.tcm-machine-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("star-yellow.png"), url("star-yellow.png");
	background-repeat: no-repeat;
	background-position: left 22px center, right 22px center;
	background-size: 22px 22px, 22px 22px;
	pointer-events: none;
	z-index: 1;
}

/* ── Unified housing frame ── */

.tcm-machine-frame {
	width: var(--tcm-machine-width);
	background: transparent;
	border: 4px solid var(--tcm-graphite);
	border-radius: 0 0 24px 24px;
	overflow: visible;
	box-shadow:
		inset 0 0 0 3px rgba(125,83,44,0.28),
		0 3px 0 rgba(59,56,52,0.18);
	box-sizing: border-box;
}

/* ── Clear capsule window ── */

.tcm-dome {
	width: 100%;
	height: clamp(165px, 42vw, 245px);
	background:
		linear-gradient(90deg, rgba(255,255,255,0.48), transparent 12%, transparent 88%, rgba(59,56,52,0.08)),
		linear-gradient(180deg, rgba(255,255,255,0.7), rgba(228,227,219,0.72));
	border-bottom: 7px solid var(--tcm-saddle);
	position: relative;
	overflow: hidden;
}

/* Side rail edge highlights */
.tcm-dome::before,
.tcm-dome::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 16px;
	background: rgba(249,248,246,0.4);
	border-left: 2px solid rgba(59,56,52,0.18);
	border-right: 2px solid rgba(59,56,52,0.18);
	z-index: 3;
	pointer-events: none;
}

.tcm-dome::before { left: 0;  border-radius: 0 0 18px 0; }
.tcm-dome::after  { right: 0; border-radius: 0 0 0 18px; }

.tcm-dome-glass {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(115deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.18) 21%, transparent 22%),
		linear-gradient(180deg, rgba(249,248,246,0.42), rgba(198,183,168,0.18));
	border-radius: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-shadow:
		inset 0 0 0 3px rgba(249,248,246,0.36),
		inset 0 -12px 24px rgba(59,56,52,0.08);
}

.tcm-dome-shine {
	position: absolute;
	top: 14px;
	left: 22px;
	right: 22px;
	height: 34px;
	background: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.04));
	border-radius: 999px;
	transform: rotate(-1deg);
	pointer-events: none;
	z-index: 2;
}

.tcm-dome-empty {
	font-size: 0.72rem;
	color: var(--tcm-dusty-taupe);
	text-align: center;
	line-height: 1.5;
	font-style: italic;
	background: rgba(249,248,246,0.72);
	border: 2px dashed rgba(150,125,103,0.45);
	border-radius: 16px;
	padding: 0.8rem 1rem;
	margin: 0 1rem 1.1rem;
}

/* Capsule pile */

.tcm-capsule-pile {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 24px 18px;
	align-items: flex-end;
	align-content: flex-end;
	justify-content: center;
	width: 100%;
	min-height: 100%;
}

.tcm-mini-cap {
	position: relative;
	width: clamp(24px, 7vw, 34px);
	height: clamp(24px, 7vw, 34px);
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(59,56,52,0.34);
	background:
		radial-gradient(circle at 32% 25%, rgba(255,255,255,0.72) 0 13%, transparent 14%),
		linear-gradient(180deg, var(--mini-top, var(--tcm-peach)) 0 48%, rgba(249,248,246,0.72) 49% 52%, var(--mini-bot, var(--tcm-gold)) 53% 100%) !important;
	box-shadow:
		0 3px 5px rgba(59,56,52,0.18),
		inset 0 2px 0 rgba(255,255,255,0.3),
		inset 0 -3px 6px rgba(59,56,52,0.12);
}

.tcm-mini-cap::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 48%;
	height: 2px;
	background: rgba(59,56,52,0.25);
	box-shadow: 0 1px 0 rgba(255,255,255,0.28);
}

.tcm-mini-cap:nth-child(6n+1) { --mini-top: var(--tcm-peach);  --mini-bot: rgba(249,248,246,0.82); }
.tcm-mini-cap:nth-child(6n+2) { --mini-top: var(--tcm-mauve);  --mini-bot: var(--tcm-rose); }
.tcm-mini-cap:nth-child(6n+3) { --mini-top: var(--tcm-gold);   --mini-bot: rgba(249,248,246,0.82); }
.tcm-mini-cap:nth-child(6n+4) { --mini-top: var(--tcm-teal);   --mini-bot: rgba(249,248,246,0.82); }
.tcm-mini-cap:nth-child(6n+5) { --mini-top: var(--tcm-bronze); --mini-bot: var(--tcm-gold); }
.tcm-mini-cap:nth-child(6n+6) { --mini-top: var(--tcm-rose);   --mini-bot: rgba(249,248,246,0.82); }

/* ── Machine body ── */

.tcm-machine-body {
	width: 100%;
	min-height: clamp(190px, 46vw, 270px);
	background:
		linear-gradient(90deg, rgba(255,255,255,0.5), transparent 16%, transparent 84%, rgba(59,56,52,0.04)),
		linear-gradient(180deg, var(--tcm-snow), var(--tcm-parchment));
	border-radius: 0 0 20px 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	/* No z-index — keeps crank outside this stacking context so it can beat the dispenser */
	box-shadow:
		inset 0 0 0 3px rgba(125,83,44,0.22),
		inset 0 -9px 0 rgba(125,83,44,0.16);
}

/* Instruction card removed */
.tcm-machine-body::before {
	content: none;
}

/* Happy star mascot */
.tcm-machine-body::after {
	content: '';
	position: absolute;
	right: clamp(48px, 13vw, 76px);
	bottom: clamp(68px, 16vw, 104px);
	width: clamp(48px, 14vw, 76px);
	height: clamp(48px, 14vw, 76px);
	background: url("star-happy.png") center / contain no-repeat;
	z-index: 3;
	pointer-events: none;
}

/* Body content area with decorative stars */
.tcm-body-main {
	position: relative;
	min-height: clamp(190px, 46vw, 270px);
	padding: 0;
	display: block;
	background-image:
		url("star-blue.png"),
		url("star-yellow.png"),
		url("star-green.png"),
		url("star-yellow.png"),
		url("star-blue.png"),
		url("star-green.png");
	background-repeat: no-repeat;
	background-size:
		clamp(18px, 5vw, 28px) clamp(18px, 5vw, 28px),
		clamp(14px, 4vw, 22px) clamp(14px, 4vw, 22px),
		clamp(16px, 4.5vw, 24px) clamp(16px, 4.5vw, 24px),
		clamp(11px, 3.2vw, 18px) clamp(11px, 3.2vw, 18px),
		clamp(12px, 3.4vw, 19px) clamp(12px, 3.4vw, 19px),
		clamp(10px, 3vw, 16px) clamp(10px, 3vw, 16px);
	background-position:
		17% 18%,
		31% 70%,
		74% 18%,
		88% 50%,
		13% 83%,
		63% 77%;
}

.tcm-body-main::before {
	content: 'LUCKY';
	position: absolute;
	right: clamp(-4px, 1.2vw, 10px);
	bottom: clamp(72px, 17vw, 104px);
	z-index: 7;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--tcm-teal);
	color: var(--tcm-snow);
	border: 2px solid var(--tcm-graphite);
	font-size: clamp(0.5rem, 1.8vw, 0.68rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	transform: rotate(6deg);
}

.tcm-body-main::after {
	content: 'INSIDE!';
	position: absolute;
	right: clamp(-2px, 1.4vw, 12px);
	bottom: clamp(52px, 13vw, 82px);
	z-index: 7;
	color: var(--tcm-rose);
	font-size: clamp(0.5rem, 1.8vw, 0.7rem);
	font-weight: 900;
	letter-spacing: 0.08em;
	transform: rotate(6deg);
}

/* Coin slot panel */

.tcm-coin-slot-wrap {
	position: absolute;
	right: clamp(16px, 5vw, 30px);
	top: clamp(22px, 5vw, 38px);
	width: clamp(52px, 15vw, 74px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	z-index: 4;
}

.tcm-coin-slot-label {
	order: 2;
	font-size: clamp(0.44rem, 1.5vw, 0.58rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.15;
	color: var(--tcm-graphite);
	text-transform: uppercase;
}

.tcm-coin-slot {
	width: clamp(38px, 11vw, 50px);
	height: clamp(54px, 14vw, 72px);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.42), transparent),
		var(--tcm-soft-linen);
	border: 3px solid var(--tcm-graphite);
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset 0 0 0 2px rgba(150,125,103,0.28),
		0 2px 0 rgba(59,56,52,0.15);
}

.tcm-slot-line {
	width: 9px;
	height: 34px;
	background: var(--tcm-graphite);
	border: 2px solid rgba(255,255,255,0.3);
	border-radius: 999px;
}

/* ── Crank knob (centered on body front) ── */

.tcm-crank-side {
	position: absolute;
	left: 50%;
	right: auto;
	top: 43%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 7; /* above dispenser-wrap (z-index: 6) */
}

.tcm-crank-shaft { display: none; }

.tcm-crank-btn {
	width: clamp(78px, 23vw, 112px);
	height: clamp(78px, 23vw, 112px);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 28%, rgba(255,255,255,0.32), transparent 18%),
		radial-gradient(circle at 50% 50%, var(--tcm-saddle) 0 48%, #5f3f21 49% 62%, var(--tcm-saddle) 63%);
	border: 5px solid var(--tcm-graphite);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	position: relative;
	box-shadow:
		0 5px 0 rgba(59,56,52,0.26),
		inset 0 4px 0 rgba(255,255,255,0.15),
		inset 0 -6px 10px rgba(59,56,52,0.2);
	transition: transform 0.15s, box-shadow 0.15s;
}

/* Handle bar overlay */
.tcm-crank-btn::before {
	content: '';
	position: absolute;
	width: 28%;
	height: 72%;
	background:
		linear-gradient(90deg, rgba(255,255,255,0.12), transparent),
		var(--tcm-saddle);
	border: 3px solid #5f3f21;
	border-radius: 12px;
	transform: rotate(-35deg);
	box-shadow: 0 3px 0 rgba(59,56,52,0.18);
}

.tcm-crank-btn:hover:not(:disabled) { transform: scale(1.04); }

.tcm-crank-btn:disabled {
	background:
		radial-gradient(circle at 35% 28%, rgba(255,255,255,0.28), transparent 18%),
		radial-gradient(circle at 50% 50%, var(--tcm-dusty-taupe) 0 48%, #6d5848 49% 62%, var(--tcm-dusty-taupe) 63%);
	border-color: var(--tcm-graphite);
	opacity: 0.62;
	cursor: not-allowed;
}

.tcm-crank-knob {
	position: relative;
	z-index: 2;
	font-size: 0;       /* hide original char */
	color: transparent;
	line-height: 1;
}

.tcm-crank-knob::after {
	content: '↻';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(1.4rem, 4.5vw, 2rem);
	color: var(--tcm-snow);
	text-shadow: 0 2px 0 rgba(59,56,52,0.38);
}

.tcm-crank-btn.cranking .tcm-crank-knob::after {
	animation: tcm-spin 0.5s ease-in-out;
}

@keyframes tcm-spin {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Dispenser ── */

.tcm-dispenser-wrap {
	width: var(--tcm-machine-width);
	margin-top: calc(clamp(190px, 46vw, 270px) * -0.35);
	position: relative;
	z-index: 6;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tcm-dispenser-neck { display: none; }

.tcm-tray {
	width: clamp(105px, 32vw, 150px);
	height: clamp(58px, 16vw, 78px);
	background: var(--tcm-saddle);
	border: 5px solid var(--tcm-graphite);
	border-radius: 24px 24px 18px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 0 rgba(59,56,52,0.18),
		inset 0 3px 0 rgba(255,255,255,0.18);
	transform: translateY(4px);
}

.tcm-tray-opening {
	width: 78%;
	height: 65%;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.08), transparent 35%),
		var(--tcm-graphite);
	border-radius: 16px;
	box-shadow: inset 0 5px 12px rgba(0,0,0,0.42);
}

/* Machine shake animation */

.tcm-machine-body.shaking {
	animation: tcm-shake 0.42s ease-in-out;
}

@keyframes tcm-shake {
	0%, 100% { transform: translateX(0) rotate(0); }
	14%       { transform: translateX(-5px) rotate(-0.8deg); }
	28%       { transform: translateX(5px) rotate(0.8deg); }
	42%       { transform: translateX(-4px) rotate(-0.4deg); }
	57%       { transform: translateX(4px) rotate(0.4deg); }
	71%       { transform: translateX(-2px); }
	85%       { transform: translateX(2px); }
}

/* ── Coins ── */

.tcm-coins-section {
	text-align: center;
	margin-bottom: 1.5rem;
	width: 100%;
	max-width: var(--tcm-machine-width);
}

.tcm-coins-label {
	font-size: 0.8rem;
	color: var(--tcm-dusty-taupe);
	margin: 0 0 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.tcm-coins-row {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.tcm-coin {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 3px solid var(--tcm-saddle);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
	background:
		radial-gradient(circle at 32% 26%, rgba(255,255,255,0.5), transparent 16%),
		radial-gradient(circle at 50% 50%, var(--coin-face, var(--tcm-gold)) 0 58%, var(--coin-rim, var(--tcm-bronze)) 59% 100%) !important;
	box-shadow:
		0 4px 0 rgba(59,56,52,0.22),
		0 7px 12px rgba(59,56,52,0.14),
		inset 0 2px 0 rgba(255,255,255,0.24),
		inset 0 -5px 8px rgba(59,56,52,0.14);
}

/* Hand-struck highlight */
.tcm-coin::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 9px;
	width: 15px;
	height: 8px;
	background: rgba(255,255,255,0.32);
	border-radius: 50%;
	transform: rotate(-25deg);
	pointer-events: none;
}

/* Dashed inner ring */
.tcm-coin::after {
	content: '';
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	border: 2px dashed rgba(125,83,44,0.46);
	pointer-events: none;
}

.tcm-coin[data-bucket="5-10"]  { --coin-face: #e4c879; --coin-rim: #d3a347; --coin-text: #3b3834; border-color: #7d532c; }
.tcm-coin[data-bucket="10-20"] { --coin-face: #ddb86a; --coin-rim: #c99638; --coin-text: #3b3834; border-color: #7d532c; }
.tcm-coin[data-bucket="30-60"] { --coin-face: #d3a347; --coin-rim: #a8742d; --coin-text: #3b3834; border-color: #7d532c; }
.tcm-coin[data-bucket="60-90"] { --coin-face: #c7933c; --coin-rim: #7d532c; --coin-text: #f9f8f6; border-color: #5f3f21; }
.tcm-coin[data-bucket="90+"]   { --coin-face: #a97232; --coin-rim: #5f3f21; --coin-text: #f9f8f6; border-color: #3b3834; }

.tcm-coin:hover {
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 6px 2px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.2);
}

.tcm-coin.selected {
	transform: translateY(-7px) scale(1.1);
	box-shadow: 0 8px 2px rgba(0,0,0,0.18), 0 10px 20px rgba(0,0,0,0.22);
	outline: 3px solid var(--tcm-teal);
	outline-offset: 3px;
}

.tcm-coin.inserting {
	animation: tcm-insert 0.45s ease-in forwards;
}

@keyframes tcm-insert {
	0%   { transform: translateY(-7px) scale(1.1); opacity: 1; }
	55%  { transform: translateY(-52px) scale(0.65); opacity: 0.8; }
	100% { transform: translateY(-86px) scale(0.2); opacity: 0; }
}

.tcm-coin-time {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--coin-text, #f9f8f6);
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tcm-coin-unit {
	font-size: 0.55rem;
	font-weight: 600;
	color: var(--coin-text, #f9f8f6);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.82;
}

/* ── Bucket color variables (open capsule) ── */

.tcm-color-5-10   { --cap-top: #e4c879;  --cap-bot: rgba(249,248,246,0.88); --cap-text: #3b3834; --cap-accent: #d3a347; }
.tcm-color-10-20  { --cap-top: #d88a6a;  --cap-bot: rgba(249,248,246,0.88); --cap-text: #3b3834; --cap-accent: #b97973; }
.tcm-color-30-60  { --cap-top: #6f9a98;  --cap-bot: rgba(249,248,246,0.88); --cap-text: #3b3834; --cap-accent: #3b3834; }
.tcm-color-60-90  { --cap-top: #8c7483;  --cap-bot: #b97973;                --cap-text: #f9f8f6; --cap-accent: #3b3834; }
.tcm-color-90-plus { --cap-top: #d3a347; --cap-bot: #e4c879;                --cap-text: #3b3834; --cap-accent: #7d532c; }

/* ── Result section (open capsule view) ── */

.tcm-result-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-top: 0.25rem;
}

.tcm-result-capsule {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
	transform: rotate(-0.9deg);
	animation: tcm-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	filter: drop-shadow(0 10px 18px rgba(59,56,52,0.22));
}

@keyframes tcm-drop {
	0%   { transform: translateY(-30px) rotate(-0.9deg); opacity: 0; }
	100% { transform: translateY(0)     rotate(-0.9deg); opacity: 1; }
}

/* Lid */
.tcm-cap-lid {
	width: 230px;
	height: 64px;
	background:
		radial-gradient(circle at 28% 22%, rgba(255,255,255,0.58) 0 12%, transparent 13%),
		linear-gradient(180deg, rgba(255,255,255,0.18), transparent 38%),
		var(--cap-top, #d88a6a);
	border-radius: 115px 115px 0 0;
	border: 4px solid #3b3834;
	border-bottom: 2px solid rgba(59,56,52,0.42);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 12px;
	position: relative;
	z-index: 3;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow:
		inset 0 4px 0 rgba(255,255,255,0.22),
		inset 0 -4px 8px rgba(59,56,52,0.14);
}

.tcm-result-capsule.opening .tcm-cap-lid {
	transform: translateY(-40px);
}

/* Time badge */
.tcm-result-badge {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--cap-text, #3b3834);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	background: rgba(249,248,246,0.78);
	border: 2px solid rgba(59,56,52,0.32);
	padding: 3px 12px;
	border-radius: 20px;
	position: relative;
	z-index: 1;
}

/* Content wrap — clips paper when closed */
.tcm-cap-content-wrap {
	width: 230px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
	position: relative;
	z-index: 2;
}

.tcm-result-capsule.open .tcm-cap-content-wrap {
	max-height: 320px;
}

/* Task paper note */
.tcm-cap-paper {
	background: var(--tcm-snow);
	border-left: 4px solid var(--cap-accent, #d3a347);
	border-right: 4px solid var(--cap-accent, #d3a347);
	padding: 20px 24px 18px;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s;
	background-image: repeating-linear-gradient(
		180deg,
		transparent,
		transparent 24px,
		rgba(198,183,168,0.22) 24px,
		rgba(198,183,168,0.22) 25px
	);
}

.tcm-result-capsule.open .tcm-cap-paper {
	opacity: 1;
	transform: translateY(0);
}

.tcm-result-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tcm-graphite);
	text-align: center;
	line-height: 1.5;
	word-break: break-word;
	min-height: 1.5em;
	position: relative;
	background: transparent;
}

/* Bottom shell */
.tcm-cap-body {
	width: 230px;
	height: 54px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.16), transparent 36%),
		var(--cap-bot, rgba(249,248,246,0.88));
	border-radius: 0 0 115px 115px;
	border: 4px solid #3b3834;
	border-top: 2px solid rgba(59,56,52,0.42);
	position: relative;
	z-index: 3;
	box-shadow: inset 0 -6px 12px rgba(59,56,52,0.12);
}

.tcm-skip-btn {
	background: none;
	border: 2px solid var(--tcm-pale-oak);
	border-radius: 20px;
	padding: 0.45rem 1.2rem;
	font-size: 0.85rem;
	color: var(--tcm-dusty-taupe);
	cursor: pointer;
	transition: all 0.2s;
}

.tcm-skip-btn:hover {
	border-color: var(--tcm-dusty-taupe);
	color: var(--tcm-saddle);
}

/* ── Timer ── */

.tcm-timer-section {
	text-align: center;
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
	background: var(--tcm-parchment);
	border-radius: 12px;
	border: 2px solid var(--tcm-soft-linen);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.7),
		0 2px 6px rgba(0,0,0,0.06);
}

.tcm-timer-display {
	font-size: 3.2rem;
	font-weight: 700;
	font-family: 'Courier New', monospace;
	color: var(--tcm-graphite);
	margin-bottom: 1rem;
	letter-spacing: 3px;
	transition: color 0.3s;
}

.tcm-timer-display.complete {
	color: var(--tcm-saddle);
	animation: tcm-pulse 0.5s ease-in-out 3;
}

@keyframes tcm-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.06); }
}

.tcm-timer-controls {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	flex-wrap: wrap;
}

.tcm-timer-btn {
	padding: 0.65rem 1.4rem;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 0 rgba(0,0,0,0.18);
}

.tcm-timer-btn:active {
	box-shadow: none;
	transform: translateY(1px);
}

.tcm-start-btn { background: var(--tcm-graphite); color: var(--tcm-snow); }
.tcm-start-btn:hover { background: #2a2725; }

.tcm-pause-btn { background: var(--tcm-soft-linen); color: var(--tcm-graphite); border: 2px solid var(--tcm-pale-oak); box-shadow: none; }
.tcm-pause-btn:hover { background: var(--tcm-pale-oak); }

.tcm-done-btn { background: var(--tcm-saddle); color: var(--tcm-snow); }
.tcm-done-btn:hover { background: #5f3f21; }

/* ── Task list ── */

.tcm-tasks-section {
	margin-top: 1rem;
}

.tcm-tasks-toggle {
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--tcm-parchment);
	border: 2px solid var(--tcm-soft-linen);
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tcm-graphite);
	cursor: pointer;
	text-align: left;
	transition: background 0.2s, border-color 0.2s;
}

.tcm-tasks-toggle:hover {
	background: var(--tcm-soft-linen);
	border-color: var(--tcm-pale-oak);
}

.tcm-task-count {
	color: var(--tcm-dusty-taupe);
	font-weight: 400;
}

.tcm-task-list {
	margin-top: 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.tcm-task-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--tcm-snow);
	border: 2px solid var(--tcm-soft-linen);
	border-radius: 8px;
	font-size: 0.9rem;
	transition: border-color 0.15s;
}

.tcm-task-item:hover { border-color: var(--tcm-pale-oak); }

.tcm-task-bucket {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
}

.tcm-bucket-5-10   { background: #967d67; color: #f9f8f6; }
.tcm-bucket-10-20  { background: #7f6857; color: #f9f8f6; }
.tcm-bucket-30-60  { background: #7d532c; color: #f9f8f6; }
.tcm-bucket-60-90  { background: #3b3834; color: #c6b7a8; }
.tcm-bucket-90-plus { background: #2a2725; color: #c6b7a8; }

.tcm-task-title { flex: 1; color: var(--tcm-graphite); }

.tcm-skipped-badge {
	font-size: 0.7rem;
	color: var(--tcm-saddle);
	font-weight: 700;
	margin-left: 4px;
}

.tcm-delete-btn {
	background: none;
	border: none;
	color: var(--tcm-pale-oak);
	font-size: 1.1rem;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color 0.2s;
	flex-shrink: 0;
}

.tcm-delete-btn:hover { color: var(--tcm-saddle); }

.tcm-no-tasks {
	text-align: center;
	color: var(--tcm-dusty-taupe);
	font-size: 0.9rem;
	font-style: italic;
	padding: 1rem;
	margin: 0;
}

/* ── Completed tasks ── */

.tcm-completed-section {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 2px solid var(--tcm-soft-linen);
}

.tcm-completed-item { opacity: 0.82; }

.tcm-completed-time {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--tcm-dusty-taupe);
	white-space: nowrap;
	font-family: 'Courier New', monospace;
	letter-spacing: 0.5px;
}

/* ── Desktop: two-column layout ── */

@media (min-width: 720px) {

	.tcm-wrap {
		max-width: 940px;
		padding: 1.5rem 2rem;
	}

	.tcm-layout {
		flex-direction: row;
		gap: 2.5rem;
		align-items: flex-start;
	}

	.tcm-left-col {
		order: 1;
		flex: 0 0 460px;
	}

	.tcm-right-col {
		order: 2;
		flex: 1;
		min-width: 240px;
		max-width: 380px;
	}

	/* Machine stays at --tcm-machine-width (clamp handles desktop sizing) */
	.tcm-machine-banner,
	.tcm-machine-frame,
	.tcm-dispenser-wrap,
	.tcm-machine-outer::after {
		width: var(--tcm-machine-width);
	}

	.tcm-dome {
		height: clamp(165px, 42vw, 245px);
	}

	.tcm-machine-body,
	.tcm-body-main {
		min-height: clamp(190px, 46vw, 270px);
	}

	.tcm-crank-btn {
		width: clamp(78px, 23vw, 112px);
		height: clamp(78px, 23vw, 112px);
	}

	/* Star positions on desktop */
	.tcm-machine-banner::after {
		background-size: 22px 22px, 22px 22px;
		background-position: left 28px bottom, right 28px bottom;
	}

	.tcm-machine-banner {
		padding-left: 58px;
		padding-right: 58px;
	}

	.tcm-machine-body::after {
		right: clamp(48px, 13vw, 76px);
		bottom: clamp(68px, 16vw, 104px);
	}

	.tcm-body-main {
		background-position:
			17% 18%,
			31% 70%,
			75% 18%,
			88% 50%,
			13% 83%,
			63% 77%;
	}

	.tcm-body-main::before { right: 22px; bottom: 80px; }
	.tcm-body-main::after  { right: 27px; bottom: 60px; }

	/* Bigger open capsule */
	.tcm-cap-lid,
	.tcm-cap-body,
	.tcm-cap-content-wrap {
		width: 300px;
	}

	.tcm-cap-lid {
		height: 80px;
		border-radius: 150px 150px 0 0;
		padding-bottom: 16px;
	}

	.tcm-cap-body {
		height: 68px;
		border-radius: 0 0 150px 150px;
	}

	.tcm-cap-paper {
		padding: 22px 28px 20px;
	}

	.tcm-result-title { font-size: 1.2rem; }

	/* Bigger coins */
	.tcm-coin { width: 70px; height: 70px; }
	.tcm-coin-time { font-size: 1.1rem; }

	.tcm-timer-section {
		margin-top: 0;
		margin-bottom: 1.25rem;
	}

	.tcm-timer-display { font-size: 3.4rem; }
}

/* ── Mobile ── */

@media (max-width: 480px) {

	/* Machine scales via --tcm-machine-width clamp; just confirm widths */
	.tcm-machine-banner,
	.tcm-machine-frame,
	.tcm-dispenser-wrap,
	.tcm-machine-outer::after {
		width: var(--tcm-machine-width);
	}

	.tcm-machine-banner {
		padding-left: 38px;
		padding-right: 38px;
	}

	.tcm-machine-banner::after {
		background-size: 18px 18px, 18px 18px;
		background-position: left 16px center, right 16px center;
	}

	.tcm-dome {
		height: clamp(150px, 49vw, 190px);
	}

	.tcm-machine-body,
	.tcm-body-main {
		min-height: 190px;
	}

	/* Move crank up so it clears the dispenser overlap */
	.tcm-crank-side {
		top: 30%;
	}

	.tcm-crank-btn {
		width: 78px;
		height: 78px;
	}

	/* Dispenser pulls up less on mobile */
	.tcm-dispenser-wrap {
		margin-top: -90px;
	}

	/* Star on body */
	.tcm-machine-body::after {
		right: 50px;
		bottom: 70px;
		width: 50px;
		height: 50px;
	}

	/* Simplified star positions on mobile (fewer overlaps with UI elements) */
	.tcm-body-main {
		background-size:
			18px 18px,
			14px 14px,
			16px 16px,
			12px 12px,
			13px 13px,
			11px 11px;
		background-position:
			16% 14%,
			28% 62%,
			70% 14%,
			82% 48%,
			12% 78%,
			60% 72%;
	}

	.tcm-body-main::before {
		right: -2px;
		bottom: 78px;
	}

	.tcm-body-main::after {
		right: 0;
		bottom: 58px;
	}

	.tcm-coin-slot-wrap {
		right: 14px;
		width: 48px;
	}

	/* Mini capsules slightly smaller on mobile */
	.tcm-mini-cap {
		width: 24px;
		height: 24px;
	}

	.tcm-capsule-pile {
		padding: 0 20px 18px;
		gap: 5px;
	}

	/* Coins: constrain row width to force two-row wrap */
	.tcm-coins-section {
		max-width: var(--tcm-machine-width);
	}

	.tcm-coin {
		width: 70px;
		height: 70px;
	}

	.tcm-coin-time { font-size: 0.85rem; }

	/* Smaller open capsule on mobile */
	.tcm-cap-lid,
	.tcm-cap-body,
	.tcm-cap-content-wrap {
		width: 190px;
	}

	.tcm-cap-lid {
		height: 52px;
		border-radius: 95px 95px 0 0;
	}

	.tcm-cap-body {
		height: 44px;
		border-radius: 0 0 95px 95px;
	}

	.tcm-timer-display { font-size: 2.6rem; }
}