/* Dice Roller — casual, client-side companion to the Life Counter. */

.dice-page {
	max-width: 620px;
	margin: 0 auto;
	padding: 28px 20px 64px;
}

.dice-head { text-align: center; margin-bottom: 30px; }

.dice-head h1 {
	font-family: var(--serif);
	font-size: 2.1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 8px;
}

.dice-tagline {
	color: var(--text-dim);
	font-size: .95rem;
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 auto;
}

.dice-form {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.dice-field { display: flex; flex-direction: column; gap: 10px; }

.dice-field-label {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.dice-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.dice-chip {
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	background: var(--bg-elev);
	color: var(--text);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}

.dice-chip:hover { border-color: var(--accent-soft); }

.dice-chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.dice-sides-custom {
	width: 84px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	background: var(--bg-elev);
	color: var(--text);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 1rem;
}

.dice-roll-btn {
	margin-top: 4px;
	padding: 14px;
	border: none;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-family: var(--sans);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s;
}

.dice-roll-btn:hover { opacity: .92; }
.dice-roll-btn:disabled { opacity: .55; cursor: default; }

/* Tray + individual dice */

.dice-tray {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 30px;
	min-height: 64px;
}

.dice-die {
	width: 82px;
	height: 82px;
}

.dice-die-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
	background: var(--bg-card);
	border: 1px solid var(--line);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .2s;
	/* Perspective only reaches a 3D-transformed descendant through its direct
	   parent (or a chain of preserve-3d) — it has to live here, one level up
	   from .dice-solid, or the rotation below just flattens back to 2D. */
	perspective: 280px;
	/* The die's drop shadow lives here rather than on .dice-solid: `filter`
	   forces whatever element it's on to be composited as a flat group, and
	   .dice-solid is the element establishing preserve-3d for its 6+ face
	   children — a filter there silently collapsed all of them into a single
	   2D layer, so only one face ever painted no matter the rotation. Same
	   root cause as the per-face fix below, one level up the tree. Here, on
	   the perspective root, a filter is safe: nothing needs depth-sorting
	   against .dice-die-inner's own siblings.  */
	filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3));
}

.dice-die.is-settled .dice-die-inner { border-color: var(--accent-soft); }

/* A real 3D polyhedron: .dice-solid is the shared 3D space, each .dice-face
   is one flat, clipped-to-its-polygon face placed with a matrix3d computed
   in dice.js from the die's actual vertex geometry. Lighting is genuine too
   — each face's own inline background-image tint (dice.js) comes from that
   face's real normal against a fixed light direction, not a faked-on
   gradient. It's a background tint and not a `filter`, for the same reason
   the shadow above isn't on this element: `filter` on any of these 3D
   siblings breaks their shared depth-sorting. */
.dice-solid {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.dice-face {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Longhand, not the `background` shorthand: each face's inline
	   `background-image` (its lighting tint, set in dice.js) layers on top of
	   this instead of overriding it. */
	background-color: var(--bg-elev);
	border: 1px solid var(--line);
	backface-visibility: hidden;
}

.dice-die.is-settled .dice-face { border-color: var(--accent-soft); }

.dice-fallback-circle {
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: var(--bg-elev);
	border: 1px solid var(--line);
}

.dice-die.is-rolling .dice-solid {
	animation: dice-spin .7s cubic-bezier(.3, .8, .4, 1);
}

.dice-die.is-settled .dice-solid {
	animation: dice-settle .25s ease-out forwards;
}

.dice-die-value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--text);
	opacity: 0;
}

.dice-die.is-settled .dice-die-value {
	animation: dice-value-pop .25s ease-out;
	opacity: 1;
}

/* Ends on a wide 3/4-view tilt (full spins plus a 30/-40deg residual) so the
   die rests showing a proper corner view with several faces and their
   different lighting visible, like looking down at a die on a table, rather
   than one face almost dead-on to the camera. */
@keyframes dice-spin {
	0%   { transform: rotateX(0) rotateY(0); }
	100% { transform: rotateX(750deg) rotateY(680deg); }
}

@keyframes dice-settle {
	0%   { transform: rotateX(750deg) rotateY(680deg) scale(1.15); }
	100% { transform: rotateX(750deg) rotateY(680deg) scale(1); }
}

@keyframes dice-value-pop {
	0%   { transform: scale(.7); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

/* Total */

.dice-total {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 8px;
	margin: 22px 0 0;
	font-family: var(--serif);
}

.dice-total[hidden] { display: none; }

.dice-total-label {
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-mute);
}

.dice-total-value {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--accent);
}

/* History */

.dice-history { margin-top: 34px; }

.dice-history-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.dice-history-head h2 {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.dice-history-clear {
	border: none;
	background: none;
	color: var(--text-mute);
	font-size: .85rem;
	cursor: pointer;
	text-decoration: underline;
}

.dice-history-clear:hover { color: var(--text); }

.dice-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dice-history-list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	background: var(--bg-elev);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: .9rem;
	color: var(--text-dim);
}

@media (max-width: 480px) {
	.dice-die { width: 52px; height: 52px; }
	.dice-die-value { font-size: 1.1rem; }
}