/* ==========================================================
   Dice Roller Full Screen — Teal & Navy Theme
   ========================================================== */

.drfs-container {
	--drfs-navy-deep: #071a2c;
	--drfs-navy: #0f2a44;
	--drfs-navy-light: #1e3a5f;
	--drfs-teal: #14b8a6;
	--drfs-teal-bright: #2dd4bf;
	--drfs-teal-deep: #0d9488;
	--drfs-text: #e6f6f4;
	--drfs-text-muted: #9fb8c9;
	--drfs-gold: #ffd166;

	/* Die size/gap are recalculated in JS to fit however many dice are on
	   screen (see updateDiceLayout in script.js) — these are just the
	   pre-JS / no-JS fallback values. */
	--drfs-die-size: clamp(64px, 22vw, 150px);
	--drfs-die-gap-col: clamp(10px, 4vw, 34px);
	--drfs-die-gap-row: clamp(20px, 8vw, 56px);

	position: relative;
	min-height: 520px;
	width: 100%;
	margin: 24px 0;
	border-radius: 22px;
	background: radial-gradient(circle at 50% 20%, rgba(20, 184, 166, 0.12), transparent 55%),
		linear-gradient(160deg, var(--drfs-navy-deep) 0%, var(--drfs-navy) 55%, var(--drfs-navy-light) 100%);
	color: var(--drfs-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.drfs-container * {
	box-sizing: border-box;
}

/* Native full screen: fill the whole viewport, drop rounding/shadow */
.drfs-container:fullscreen,
.drfs-container:-webkit-full-screen {
	min-height: 100vh;
	width: 100vw;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	--drfs-die-size: clamp(64px, 20vw, 190px);
}

/* ---------- Top bar ---------- */
.drfs-topbar {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 10px;
	z-index: 3;
}
.drfs-icon-btn {
	width: 100%;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(45, 212, 191, 0.3);
	color: var(--drfs-teal-bright);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}
.drfs-icon-btn:hover {
	background: rgba(45, 212, 191, 0.15);
	transform: translateY(-1px);
}
.drfs-icon-btn:active {
	transform: translateY(0);
}

/* ---------- Settings panel ---------- */
.drfs-settings-panel {
	position: absolute;
	top: 66px;
	right: 16px;
	width: 240px;
	background: linear-gradient(160deg, var(--drfs-navy), var(--drfs-navy-light));
	border: 1px solid rgba(45, 212, 191, 0.35);
	border-radius: 16px;
	padding: 18px;
	z-index: 4;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	animation: drfs-panel-in 0.16s ease-out;
}
@keyframes drfs-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.drfs-settings-panel[hidden] {
	display: none;
}
.drfs-settings-panel h4 {
	margin: 0 0 14px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--drfs-teal-bright);
}
.drfs-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 12px;
	color: var(--drfs-text-muted);
	margin-bottom: 12px;
}
.drfs-field select,
.drfs-field input[type="number"] {
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(159, 184, 201, 0.25);
	background: rgba(7, 26, 44, 0.6);
	color: var(--drfs-text);
	font-size: 13px;
	outline: none;
}
.drfs-field select:focus,
.drfs-field input[type="number"]:focus {
	border-color: var(--drfs-teal-bright);
	box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}
.drfs-custom-sides-wrap {
	display: none;
}
.drfs-custom-sides-wrap.drfs-visible {
	display: flex;
}
.drfs-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--drfs-text-muted);
	cursor: pointer;
	margin-bottom: 16px;
}
.drfs-toggle input {
	accent-color: var(--drfs-teal-bright);
	width: 16px;
	height: 16px;
}
.drfs-close-settings {
	width: 100%;
	padding: 9px;
	border-radius: 10px;
	border: none;
	background: linear-gradient(135deg, var(--drfs-teal-bright), var(--drfs-teal-deep));
	color: #06231e;
	font-weight: 700;
	cursor: pointer;
	font-size: 13px;
}

/* ---------- Stage ---------- */
.drfs-stage {
	min-height: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 40px 20px;
	perspective: 900px;
	width: 100%;
}
.drfs-container:fullscreen .drfs-stage,
.drfs-container:-webkit-full-screen .drfs-stage {
	min-height: 100vh;
}

.drfs-dice-stage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	column-gap: var(--drfs-die-gap-col, 34px);
	row-gap: var(--drfs-die-gap-row, 34px);
	max-width: 100%;
}

.drfs-die {
	width: var(--drfs-die-size);
	height: var(--drfs-die-size);
	flex: 0 0 auto;
	position: relative;
	transform-style: preserve-3d;
	cursor: pointer;
}
.drfs-die:hover {
	box-shadow: 0 0 26px 6px rgba(45, 212, 191, 0.4);
}

.drfs-die.drfs-rolling {
	animation: drfs-roll 1s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes drfs-roll {
	0%   { transform: rotateX(0) rotateY(0) rotateZ(0); }
	20%  { transform: rotateX(160deg) rotateY(80deg) rotateZ(40deg); }
	40%  { transform: rotateX(320deg) rotateY(220deg) rotateZ(120deg); }
	60%  { transform: rotateX(480deg) rotateY(380deg) rotateZ(220deg); }
	80%  { transform: rotateX(620deg) rotateY(520deg) rotateZ(300deg); }
	100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}

/* D6 cube gets a static resting tilt + its own translateZ-aware animation.
   The translateZ offset is always half the current die size (via the
   --drfs-die-size variable), so the six faces stay a sealed cube no matter
   how big or small the die is scaled — this is what kept breaking apart
   at the old fixed 210px fullscreen size. */
.drfs-die.drfs-die-cube {
	transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(-20deg) rotateY(25deg);
}
.drfs-die-cube.drfs-rolling {
	animation-name: drfs-roll-cube;
}
@keyframes drfs-roll-cube {
	0%   { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(-20deg) rotateY(25deg) rotateZ(0deg); }
	20%  { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(140deg) rotateY(100deg) rotateZ(40deg); }
	40%  { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(300deg) rotateY(240deg) rotateZ(120deg); }
	60%  { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(460deg) rotateY(400deg) rotateZ(220deg); }
	80%  { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(600deg) rotateY(540deg) rotateZ(300deg); }
	100% { transform: translateZ(calc(var(--drfs-die-size) / -2)) rotateX(700deg) rotateY(745deg) rotateZ(360deg); }
}

.drfs-die.drfs-die-numeric .drfs-die-face {
	width: 100%;
	height: 100%;
	border-radius: calc(var(--drfs-die-size) * 0.187);
	background: linear-gradient(145deg, var(--drfs-teal), var(--drfs-teal-deep));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--drfs-die-size) * 0.35);
	font-weight: 800;
	color: #06231e;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), inset 0 3px 6px rgba(255, 255, 255, 0.35);
	backface-visibility: hidden;
}

.drfs-die-cube .drfs-cube-face {
	position: absolute;
	width: var(--drfs-die-size);
	height: var(--drfs-die-size);
	background: linear-gradient(145deg, #f4fbfa, #d7ece9);
	border: 3px solid var(--drfs-teal-deep);
	border-radius: calc(var(--drfs-die-size) * 0.147);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: calc(var(--drfs-die-size) * 0.133);
	box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.6), 0 8px 18px rgba(0, 0, 0, 0.3);
}
.drfs-pip {
	width: 56%;
	height: 56%;
	border-radius: 50%;
	background: var(--drfs-navy-deep);
	align-self: center;
	justify-self: center;
	opacity: 0;
}
.drfs-pip-show {
	opacity: 1;
}
.drfs-cube-face.drfs-face-front  { transform: rotateY(0deg) translateZ(calc(var(--drfs-die-size) / 2)); }
.drfs-cube-face.drfs-face-back   { transform: rotateY(180deg) translateZ(calc(var(--drfs-die-size) / 2)); }
.drfs-cube-face.drfs-face-right  { transform: rotateY(90deg) translateZ(calc(var(--drfs-die-size) / 2)); }
.drfs-cube-face.drfs-face-left   { transform: rotateY(-90deg) translateZ(calc(var(--drfs-die-size) / 2)); }
.drfs-cube-face.drfs-face-top    { transform: rotateX(90deg) translateZ(calc(var(--drfs-die-size) / 2)); }
.drfs-cube-face.drfs-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--drfs-die-size) / 2)); }

/* ---------- Result & controls ---------- */
.drfs-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	/* Reserve space for BOTH the total and the breakdown line up front —
	   even before the first roll (or for a single die, which never shows
	   a breakdown) — so the layout (and the dice-size math in script.js,
	   which measures this element's height) doesn't shift once a
	   multi-dice result actually appears. */
	min-height: clamp(54px, 13vw, 96px);
	text-align: center;
	padding: 0 12px;
	color: var(--drfs-teal-bright);
	margin-top: 3%;
}
.drfs-result.drfs-max-roll {
	color: var(--drfs-gold);
}
.drfs-result-total {
	font-size: clamp(28px, 6vw, 56px);
	font-weight: 900;
	line-height: 1.1;
	text-shadow: 0 0 24px rgba(45, 212, 191, 0.5);
}
.drfs-result.drfs-max-roll .drfs-result-total {
	text-shadow: 0 0 26px rgba(255, 209, 102, 0.7);
}
.drfs-result-breakdown {
	font-size: clamp(14px, 3.2vw, 22px);
	font-weight: 700;
	opacity: 0.82;
	line-height: 1.3;
}

.drfs-hint {
	font-size: 13px;
	color: var(--drfs-text-muted);
	letter-spacing: 0.3px;
	text-align: center;
}

.drfs-roll-btn {
	border: none;
	cursor: pointer;
	font-weight: 800;
	letter-spacing: 0.6px;
	border-radius: 999px;
	padding: clamp(11px, 2.4vw, 16px) clamp(30px, 7vw, 52px);
	font-size: clamp(13px, 2.6vw, 16px);
	background: linear-gradient(135deg, var(--drfs-teal-bright), var(--drfs-teal-deep));
	color: #06231e;
	box-shadow: 0 10px 26px rgba(20, 184, 166, 0.45);
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.drfs-roll-btn:hover {
	box-shadow: 0 14px 32px rgba(20, 184, 166, 0.6);
}
.drfs-roll-btn:active {
	transform: translateY(1px) scale(0.98);
}
.drfs-roll-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
}

/* ---------- Small screens: tighten up chrome so 6 dice have room ---------- */
@media (max-width: 640px), (max-height: 480px) {
	.drfs-stage {
		gap: 18px;
		padding: 20px 13px;
	}
	.drfs-hint {
		font-size: 11px;
	}
}