.classroom-dice-roller-tool {
	--dice-accent: var(--color-amber);
}

.classroom-dice-roller-tool .dice-toolbar {
	margin-bottom: var(--space-lg);
}

.classroom-dice-roller-tool .dice-workspace {
	grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
	align-items: start;
}

.classroom-dice-roller-tool .dice-workspace > *,
.classroom-dice-roller-tool .dice-settings > * {
	min-width: 0;
}

.classroom-dice-roller-tool .tool-note {
	margin: 0;
	color: var(--color-muted);
}

.classroom-dice-roller-tool .dice-control-panel {
	align-content: start;
}

.classroom-dice-roller-tool .dice-result-summary {
	display: grid;
	gap: 10px;
	padding: var(--space-md);
	border: 1px solid rgba(181, 107, 0, 0.28);
	border-left: 6px solid var(--dice-accent);
	border-radius: var(--radius);
	background: #fffaf0;
}

.classroom-dice-roller-tool .dice-total-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.classroom-dice-roller-tool .dice-total-line span {
	font-weight: 850;
}

.classroom-dice-roller-tool .dice-total-line strong {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "Noto Sans Mono", monospace;
	font-size: clamp(54px, 8vw, 86px);
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
}

.classroom-dice-roller-tool .dice-result-summary p {
	margin: 0;
	color: var(--color-muted);
}

.classroom-dice-roller-tool .dice-stage {
	align-content: start;
	min-width: 0;
	background: #f7f9fc;
}

.classroom-dice-roller-tool .dice-stage-head,
.classroom-dice-roller-tool .dice-history-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.classroom-dice-roller-tool .dice-status {
	min-height: 20px;
	color: var(--color-amber);
	font-weight: 850;
}

.classroom-dice-roller-tool .dice-grid,
.classroom-dice-roller-tool .dice-fullscreen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
	gap: var(--space-md);
	align-items: stretch;
	min-width: 0;
}

.classroom-dice-roller-tool .dice-tile {
	--die-color: var(--color-blue);
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr auto;
	place-items: center;
	gap: 4px;
	width: 100%;
	max-width: 184px;
	aspect-ratio: 1;
	justify-self: center;
	padding: 12px;
	border: 2px solid color-mix(in srgb, var(--die-color) 42%, var(--color-line));
	border-bottom-width: 7px;
	border-radius: var(--radius);
	background: #fff;
	color: var(--color-ink);
	box-shadow: 0 10px 22px rgba(23, 32, 42, 0.1);
	cursor: pointer;
	transform-origin: center;
}

.classroom-dice-roller-tool .dice-d4 { --die-color: var(--color-amber); }
.classroom-dice-roller-tool .dice-d6 { --die-color: var(--color-blue); }
.classroom-dice-roller-tool .dice-d8 { --die-color: var(--color-green); }
.classroom-dice-roller-tool .dice-d10 { --die-color: var(--color-red); }
.classroom-dice-roller-tool .dice-d12 { --die-color: #7c3aed; }
.classroom-dice-roller-tool .dice-d20 { --die-color: #0f766e; }
.classroom-dice-roller-tool .dice-d100 { --die-color: #be185d; }

.classroom-dice-roller-tool .dice-tile:hover,
.classroom-dice-roller-tool .dice-tile:focus-visible {
	background: color-mix(in srgb, var(--die-color) 7%, #fff);
	border-color: var(--die-color);
	transform: translateY(-2px);
}

.classroom-dice-roller-tool .dice-tile > span {
	justify-self: start;
	padding: 3px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--die-color) 12%, #fff);
	color: var(--die-color);
	font-size: 12px;
	font-weight: 900;
}

.classroom-dice-roller-tool .dice-tile > strong {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "Noto Sans Mono", monospace;
	font-size: clamp(48px, 7vw, 76px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.classroom-dice-roller-tool .dice-tile > small {
	color: var(--color-muted);
	font-weight: 800;
}

.classroom-dice-roller-tool.is-rolling .dice-tile {
	pointer-events: none;
	animation: classroom-dice-tumble 0.34s ease-in-out infinite alternate;
}

.classroom-dice-roller-tool.is-rolling .dice-tile:nth-child(even) {
	animation-direction: alternate-reverse;
}

@keyframes classroom-dice-tumble {
	from { transform: translateY(0) rotate(-3deg) scale(0.96); }
	to { transform: translateY(-9px) rotate(4deg) scale(1.03); }
}

.classroom-dice-roller-tool .dice-history-section {
	display: grid;
	gap: 8px;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-line);
}

.classroom-dice-roller-tool .dice-history-title-row > span:last-child {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 28px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: #fff;
	font-weight: 900;
}

.classroom-dice-roller-tool .dice-history {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.classroom-dice-roller-tool .dice-history li {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-width: 0;
	padding: 9px 10px;
	border: 1px solid var(--color-line);
	border-left: 4px solid #cbd5e1;
	border-radius: var(--radius);
	background: #fff;
}

.classroom-dice-roller-tool .dice-history li.is-latest {
	border-left-color: var(--dice-accent);
	background: #fffaf0;
}

.classroom-dice-roller-tool .dice-history li > span {
	color: var(--color-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.classroom-dice-roller-tool .dice-history li > strong {
	min-width: 0;
	overflow-wrap: anywhere;
}

.classroom-dice-roller-tool .dice-history li > b {
	font-size: 18px;
	white-space: nowrap;
}

.classroom-dice-roller-tool .dice-history .dice-history-empty {
	display: block;
	padding: var(--space-md);
	border-style: dashed;
	color: var(--color-muted);
	text-align: center;
}

.classroom-dice-roller-tool .dice-fullscreen-panel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 95;
	min-height: 100vh;
	padding: 24px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		#111820;
	background-size: 36px 36px;
	color: #fff;
	overflow: auto;
}

.classroom-dice-roller-tool .dice-fullscreen-panel.is-open,
.classroom-dice-roller-tool .dice-fullscreen-panel:fullscreen {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: var(--space-lg);
}

.classroom-dice-roller-tool .dice-fullscreen-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.classroom-dice-roller-tool .dice-fullscreen-toolbar > div {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.classroom-dice-roller-tool .dice-fullscreen-toolbar strong {
	font-size: 24px;
	overflow-wrap: anywhere;
}

.classroom-dice-roller-tool .dice-fullscreen-toolbar span {
	color: rgba(255, 255, 255, 0.72);
}

.classroom-dice-roller-tool .dice-exit-fullscreen.button.ghost {
	background: #fff;
	border-color: #fff;
	color: var(--color-ink);
}

.classroom-dice-roller-tool .dice-fullscreen-stage {
	display: grid;
	place-items: center;
	min-width: 0;
}

.classroom-dice-roller-tool .dice-fullscreen-board {
	display: grid;
	gap: clamp(18px, 3vw, 36px);
	width: min(100%, 1400px);
	padding: clamp(20px, 4vw, 48px);
	border-radius: var(--radius);
	background: #f7f9fc;
	color: var(--color-ink);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.classroom-dice-roller-tool .dice-fullscreen-summary {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	text-align: center;
}

.classroom-dice-roller-tool .dice-fullscreen-summary span,
.classroom-dice-roller-tool .dice-fullscreen-summary small {
	color: var(--color-muted);
	font-size: clamp(16px, 2vw, 26px);
	font-weight: 850;
}

.classroom-dice-roller-tool .dice-fullscreen-summary strong {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", "Noto Sans Mono", monospace;
	font-size: clamp(64px, 10vw, 140px);
	line-height: 0.85;
	font-variant-numeric: tabular-nums;
}

.classroom-dice-roller-tool .dice-fullscreen-grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-1 {
	grid-template-columns: minmax(180px, 280px);
	justify-content: center;
}

.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-2 {
	grid-template-columns: repeat(2, minmax(180px, 260px));
	justify-content: center;
}

.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-3,
.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-4,
.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-7,
.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-8 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.classroom-dice-roller-tool .dice-fullscreen-grid.dice-count-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.classroom-dice-roller-tool .dice-tile.is-fullscreen-die {
	max-width: 230px;
}

.classroom-dice-roller-tool .dice-tile.is-fullscreen-die > strong {
	font-size: clamp(68px, 9vw, 130px);
}

.classroom-dice-roller-tool .dice-fullscreen-roll {
	justify-self: center;
	min-width: min(100%, 260px);
	min-height: 54px;
	font-size: 18px;
}

@media (max-width: 920px) {
	.classroom-dice-roller-tool .dice-workspace {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.classroom-dice-roller-tool .dice-fullscreen-panel {
		padding: 14px;
	}

	.classroom-dice-roller-tool .dice-fullscreen-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.classroom-dice-roller-tool .dice-exit-fullscreen.button.ghost {
		width: 100%;
	}

	.classroom-dice-roller-tool .dice-grid,
	.classroom-dice-roller-tool .dice-fullscreen-grid,
	.classroom-dice-roller-tool .dice-fullscreen-grid[class*="dice-count-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.classroom-dice-roller-tool .dice-tile,
	.classroom-dice-roller-tool .dice-tile.is-fullscreen-die {
		max-width: 170px;
		padding: 9px;
	}

	.classroom-dice-roller-tool .dice-history li {
		grid-template-columns: 74px minmax(0, 1fr);
	}

	.classroom-dice-roller-tool .dice-history li > b {
		grid-column: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.classroom-dice-roller-tool.is-rolling .dice-tile {
		animation: none;
	}
}