/* ======== M.A.G.U.S. / parchment téma ======== */
:root {
	--papyrus: #f3ecda;                  /* pergamen */
	--ink: #2b1e17;                      /* sötétbarna tinta */
	--ink-muted: #6b584a;                
	--edge: #8a6a44;                     /* bőr/keret */
	--gold: #b88a3b;                     /* antik arany */
	--seal: #8f1d1d;                     /* viasz/piros */
	--blue: #3636e2;                     /* kék gyenge dobás */
	--leaf: #2f6f3a;                     /* mélyzöld kiemelés */
	--bone: #f6efe3;                     /* csontszín (kockák) */
	--shadow: rgba(0,0,0,.2);
	--shadow-strong: rgba(0,0,0,.35);
	--panel-width: auto;       /* nagy panel szélesség */
	--panel-min-size: 56px;     /* kicsi ikon méret */
	--panel-radius: 14px;
	--panel-bg: #f7f2e7;        /* pergamenes */
	--panel-border: #b08b57;    /* bronzos */
	--panel-shadow: 0 14px 40px rgba(0,0,0,0.3);
	--header-bg: #e8dcc5;       /* kicsit sötétebb pergamen a fejlécnek */
	--accent: #8b5a2b;          /* barna */
}

.rejtett_tag {
	display: none !important;
	visibility: hidden !important;
}

.magus-dice .panel {
	position: relative;
	max-width: 75vw;
	margin: 0.5rem auto;
	padding: 1.1rem 1.1rem 1.25rem;
	border: 2px solid var(--edge);
	border-radius: 18px;
	background:
		radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,0.65) 0%, transparent 55%),
		radial-gradient(120% 100% at 90% 100%, rgba(0,0,0,0.05) 0%, transparent 55%),
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, rgba(0,0,0,0) 2px 6px),
		linear-gradient(180deg, #f8f1df, #efe4c6 40%, #e9ddbf);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 12px 30px var(--shadow);
}

.magus-dice h1 {
	font-size: 2rem !important;
}

.magus-dice .header { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-bottom: .75rem; }
.magus-dice .title {
	margin: 0;
	font-size: 1.35rem;
	letter-spacing: .4px;
}

.magus-dice .subtitle { color: var(--ink-muted); font-size: .95rem; }

.magus-dice .topbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.magus-dice .btn {
	appearance: none;
	border: 1px solid #8d6a44;
	color: var(--ink);
	background:
		radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.6) 0%, transparent 60%),
		linear-gradient(180deg, #f8edd8, #ecd7b3);
	border-radius: 12px;
	padding: .45rem .85rem;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: .2px;
	cursor: pointer;
	transition: transform 90ms ease, filter 120ms ease, box-shadow 140ms ease;
	box-shadow: 0 6px 14px var(--shadow);
	white-space: nowrap;
}

.magus-dice .btn:hover { filter: brightness(1.02); }
.magus-dice .btn:active { transform: translateY(1px) scale(.99); }
.magus-dice .btn.primary {
	border-color: #846226;
	background:
		radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.6) 0%, transparent 60%),
		linear-gradient(180deg, #f2e0b8, #dcbe79);
}
.magus-dice .btn.danger {
	border-color: #7e2a2a;
	background:
		radial-gradient(140% 120% at 20% 0%, rgba(255,255,255,.5) 0%, transparent 60%),
		linear-gradient(180deg, #e5c2c2, #d19c9c);
}

.magus-dice .grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-template-columns: repeat(6, minmax(140px, 1fr));
	gap: .8rem;
	margin: 20px;
}

.magus-dice .die {
	position: relative;
	background:
		radial-gradient(120% 100% at 15% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 65%),
		linear-gradient(180deg, #fbf7ee, var(--bone));
	border: 1px solid #d8cdb7;
	border-radius: 14px;
	padding: .75rem .9rem .85rem;
	cursor: pointer;
	user-select: none;
	box-shadow: 0 6px 14px var(--shadow);
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, outline-color 140ms ease, opacity 140ms ease;
	outline: 2px solid transparent;
	min-width: 4rem;
    flex: 1 1 fit-content;
}

.magus-dice .die:hover { transform: translateY(-2px); box-shadow: 0 12px 22px var(--shadow-strong); border-color: #cbbba0; }
.magus-dice .die.active {
	outline-color: color-mix(in oklab, var(--leaf) 60%, white 0%);
	box-shadow: 0 0 0 6px rgba(47, 111, 58, .08), 0 12px 22px var(--shadow-strong);
	border-color: #a8c2a8;
}
.magus-dice .die.passive { opacity: .5; }

.magus-dice .die .row { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.magus-dice .die .kind { font-weight: 700; color: var(--ink); letter-spacing: .4px; }
.magus-dice .die .faces { color: var(--ink-muted); font-size: .9rem; }
.magus-dice .die .remove { border: none; background: transparent; color: var(--seal); font-weight: 900; cursor: pointer; padding: .1rem .3rem; border-radius: .5rem; font-size: 1.25rem; }
.magus-dice .die .remove:hover { background: rgba(143,29,29,.1); }

.magus-dice .value {
	margin-top: .35rem;
	min-height: 2rem;
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--leaf);
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
	font-variant-numeric: tabular-nums;
	letter-spacing: .5px;
	word-break: break-word;
}
.magus-dice .value.dim { color: #7f846f; }
.magus-dice .value.crit-max { color: var(--gold); text-shadow: 0 0 8px rgba(184,138,59,.35); }
.magus-dice .value.crit-min { color: var(--blue); text-shadow: 0 0 6px rgba(143,29,29,.25); }

.magus-dice .rowbar {
	display: flex;
	/* gap: .6rem; */
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1rem;
	font-size: 0.8rem;
}

.magus-dice .result { margin-top: .2rem; margin-left: .3rem; color: var(--ink-muted); }
.magus-dice .sum { margin-top: .2rem; margin-left: .6rem; font-weight: 800; color: var(--leaf); }

.magus-dice .history { margin-top: .6rem; padding-top: .4rem; border-top: 1px dashed rgba(0,0,0,.2); color: var(--ink-muted); font-size: .95rem; max-height: 180px; overflow: auto; }
.magus-dice .history li { margin: .2rem 0; }

/* Kifejezés doboz + szerkesztő */
.magus-dice .editor { margin-top: .8rem; display: grid; grid-template-columns: 1fr; gap: .6rem; }
.magus-dice .expr { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.magus-dice .expr input {
	padding: .35rem .5rem;
	border-radius: 10px;
	border: 1px solid #c5b393;
	background: linear-gradient(180deg, #fbf6ea, #f2e7cf);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
	font-family: inherit;
	font-size: 1rem;
	color: var(--ink);
	flex: 1 1 fit-content;
	min-width: 15rem;
}

.magus-dice .expr-hint { color: var(--ink-muted); font-size: .9rem; }
.magus-dice .editor-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.magus-dice select, .magus-dice input[type="number"], .magus-dice input[type="range"] {
	padding: .4rem .5rem;
	border-radius: 10px;
	border: 1px solid #c5b393;
	background: linear-gradient(180deg, #fbf6ea, #f2e7cf);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
	 font-family: inherit; font-size: .95rem; color: var(--ink);
}

.magus-dice .audio { display: flex; align-items: center; gap: .5rem; }
.magus-dice .audio label { color: var(--ink-muted); font-size: .95rem; }

/* dobás animáció */
@keyframes rollPulse {
	0% { transform: translateY(0) scale(1); filter: contrast(100%); }
	30% { transform: translateY(-2px) scale(1.02); filter: contrast(115%); }
	60% { transform: translateY(1px) scale(.995); filter: contrast(95%); }
	100% { transform: translateY(0) scale(1); filter: contrast(100%); }
}

.dobokockak_panelja {
	position: fixed;
	top: 12px;
	z-index: 10000;
	display: grid;
	align-items: end;
	justify-items: end;
	/* Alap: minimalizált nézet, a .minimized osztály vezérli */
}

/* KICSI ikon (minimized állapot) */
.dobokockak_panelja.minimized {
	width: var(--panel-min-size);
	height: var(--panel-min-size);
	right: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #fff2, #0001), var(--panel-bg);
	border: 2px solid var(--panel-border);
	box-shadow: var(--panel-shadow);
	cursor: pointer;
	overflow: hidden;
	opacity: 0.5;
}

.dobokockak_panelja.minimized > * {
	display: none;
}

/* Kocka ikon kirajzolása (pseudo) — igény szerint cserélhető img-re */
.dobokockak_panelja.minimized::before {
	content: "🎲";
	position: absolute;
	inset: 0;                  /* teljes kört kitölti */
	display: grid;
	place-items: center;
	line-height: calc(var(--panel-min-size) - 4px); /* border 2px-2px → mínusz 4px */
	font-size: calc((var(--panel-min-size) - 4px) * 0.84); /* 0.88 ~ tapasztalati szorzó */
	text-align: center;
	z-index: 1;
	font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
	place-self: anchor-center;
}

/* NAGY panel (expanded állapot) */
.dobokockak_panelja.expanded {
	width: min(var(--panel-width), 88vw);
	height: auto;
	/* max-height: min(75vh, 650px); */
	border-radius: var(--panel-radius);
	background: var(--panel-bg);
	border: 2px solid var(--panel-border);
	box-shadow: var(--panel-shadow);
	overflow: hidden;
	padding: 1.5rem 1rem 0 1rem;
	place-self: center;
    margin: 30px;
}

/* Fejléc */
.dobokockak_panelja.expanded .panel-header {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	/* background: var(--header-bg); */
	color: #3b2f2f;
	padding: 8px 10px;
	border-radius: 10px;
	/* border-bottom: 2px solid var(--panel-border); */
	position: absolute;
	top: 0px;
	user-select: none;
}

.dobokockak_panelja.expanded .panel-title {
	font-weight: 700;
	letter-spacing: 0.02em;
	display: none;
	visibility: hidden;
}

/* Bezáró gomb */
.dobokockak_panelja.expanded .panel-close {
	appearance: none;
	border: none;
	background: transparent;
	color: #3b2f2f;
	font-size: 1.5rem;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 8px;
	cursor: pointer;
}

.dobokockak_panelja.expanded .panel-close:hover {
	background: #0001;
}

/* Tartalom */
.dobokockak_panelja.expanded .panel-body {
	padding: 10px;
	overflow: auto;
}

/* Animáció/átmenet */
.dobokockak_panelja {
	transition: width .22s ease, height .22s ease, border-radius .22s ease, transform .22s ease, opacity .22s ease;
}

/* @media (max-width: 980px) { .magus-dice .grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); } } */
/* @media (max-width: 680px) { .magus-dice .grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } */

@media (pointer: coarse) and (aspect-ratio < 0.7) {
	.magus-dice h1 {
		font-size: 1.75rem !important;
	}
	
	.magus-dice .value {
		font-size: 1.2rem;
		min-height: 1.5rem;
	}
	
	.dobokockak_panelja.minimized {
		width: 8vw;
		height: 8vw;
	}
	
	.magus-dice .btn {
		font-size: 0.75rem;
		padding: .35rem .65rem;
	}
	
	.dobokockak_panelja.expanded .panel-close {
		font-size: 1.75rem;
	}
	
	.magus-dice .expr input {
		font-size: 0.8rem;
	}
}

@media (pointer: coarse) and (aspect-ratio < 0.7) {
	.magus-dice h1 {
		font-size: 1.75rem !important;
	}
	
	.magus-dice .value {
		font-size: 1.2rem;
		min-height: 1.5rem;
	}
	
	.dobokockak_panelja.minimized {
		width: 8vw;
		height: 8vw;
	}
	
	.magus-dice .btn {
		font-size: 0.75rem;
		padding: .35rem .65rem;
	}
	
	.dobokockak_panelja.expanded .panel-close {
		font-size: 1.75rem;
	}
	
	.magus-dice .expr input {
		font-size: 0.8rem;
	}
}

/* Fekvő, széles kép és érintő kijelző*/
@media (pointer: coarse) and (aspect-ratio >= 2) {
	.dobokockak_panelja.expanded {
		padding: 0 2rem 0 2rem;
		margin: 0;
	}
	
	.dobokockak_panelja.expanded .panel-header {
		padding: 0;
	}
	
	.magus-dice h1 {
		font-size: 1.25rem !important;
	}
	
	.magus-dice .header {
		padding: .25rem;
	}
	
	.magus-dice .panel {
		padding: .5rem;
	}
	
	.magus-dice .die {
		display: flex;
		padding: .25rem .75rem;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1rem;
		max-height: 2.5rem;
	}
	
	.magus-dice .btn {
		font-size: 0.85rem;
		padding: .35rem .65rem;
	}
	
	.magus-dice .row {
		font-size: 0.8rem;
	}
	
	.magus-dice .value {
		font-size: 1.7rem;
	}
	
	.magus-dice .expr input {
		font-size: 0.85rem;
	}
}