/* Roll For First Modal Styles */
.cmp-roll-for-first.rff-modal { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:5vh; z-index:100000; /* Above all other components including tokyo-yield-modal */ pointer-events:none; }
.cmp-roll-for-first.rff-modal.hidden { display:none; }
.cmp-roll-for-first.rff-modal.hidden { display:none; }
.cmp-roll-for-first.rff-modal .rff-frame { pointer-events:auto; background:#1c1c1c; border:0.2vh solid #111; box-shadow:0.93vh 0.93vh 0 #000, 0 0 0 0.2vh #000 inset, 0 1.67vh 3.9vh -1.3vh rgba(0,0,0,.85); padding:2.8vh 4.3vh 7.2vh; width:min(75vw,96vw); max-height:92vh; overflow:auto; border-radius:0; font-family:'Bangers',cursive; color:#e4e4e4; position:relative; }
.cmp-roll-for-first.rff-modal .rff-title { text-align:center; font-size:4.2vh; margin:0 0 0.93vh; letter-spacing:0.16vmin; color:#f1f1f1; text-shadow: -0.16vmin -0.16vmin 0 #000,0.16vmin -0.16vmin 0 #000,-0.16vmin 0.16vmin 0 #000,0.16vmin 0.16vmin 0 #000,0.56vh 0.56vh 1.1vh rgba(0,0,0,.8); }
.cmp-roll-for-first.rff-modal .rff-close { position:absolute; top:0.93vh; right:0.93vh; background:#181818; color:#bbb; border:0.1vh solid #333; width:3.9vh; height:3.9vh; font-size:1.85vh; cursor:pointer; font-family:'Bangers',cursive; display:flex; align-items:center; justify-content:center; box-shadow:0.2vh 0.2vh 0 #000; transition:background .18s ease; }
.cmp-roll-for-first.rff-modal .rff-close:hover { background:#232323; }
.cmp-roll-for-first.rff-modal .rff-broadcast { background:#111; border:0.1vh solid #2a2a2a; padding:1.1vh 1.67vh 1.3vh; margin:0.37vh 0 1.67vh; font-family:'Bangers',cursive; font-size:2.5vh; line-height:1.15; letter-spacing:0.05vmin; text-align:center; color:var(--color-brand-gold,#FFD700); min-height:8.3vh; display:flex; flex-direction:column; justify-content:center; gap:0.56vh; box-shadow:0 0 0 0.1vh #000 inset; position:relative; overflow:visible; transition:min-height .35s ease, padding .35s ease, font-size .25s ease, color .25s ease; }

@media (max-width: 800px) { .cmp-roll-for-first.rff-modal .rff-broadcast { min-height:12vh; } }
@media (max-width: 560px) { .cmp-roll-for-first.rff-modal .rff-broadcast { min-height:11.1vh; } }

/* Winner banner when moved into broadcast area */
.cmp-roll-for-first.rff-modal .rff-broadcast .rff-winner-banner { margin-top:0; width:100%; align-self:stretch; animation:rff-broadcast-expand .55s ease forwards; }

/* When winner banner exists, allow broadcast section to grow a bit more (handled by banner animation) */
@keyframes rff-broadcast-expand { 0% { opacity:0; transform:translateY(0.74vh) scale(.96); } 100% { opacity:1; transform:translateY(0) scale(1); } }

/* Utility: once winner inserted, bump min-height via parent selector (JS already replaces inner HTML) */
.cmp-roll-for-first.rff-modal .rff-broadcast:has(.rff-winner-banner) { min-height:13.9vh; padding-top:1.5vh; padding-bottom:1.85vh; }
.cmp-roll-for-first.rff-modal .rff-rolls { list-style:none; margin:0 0 1.3vh; padding:0; display:grid; grid-template-columns:1fr 4.2vw; row-gap:0.56vh; column-gap:0.52vw; font-family:Arial,sans-serif; }
.cmp-roll-for-first.rff-modal .rff-rolls li { display:contents; }
.cmp-roll-for-first.rff-modal .rff-mon { background:#181818; padding:0.56vh 0.52vw; border:0.1vh solid #2d2d2d; border-radius:0; text-align:left; font-weight:600; color:#ddd; }
.cmp-roll-for-first.rff-modal .rff-val { background:#222; padding:0.56vh 0; border:0.1vh solid #333; border-radius:0; text-align:center; font-weight:700; font-size:1.05rem; color:#e4e4e4; box-shadow:0 0 0 0.1vh #000 inset; }
/* Footer with persistent controls */
.cmp-roll-for-first.rff-modal .rff-footer { position:sticky; bottom:0; display:flex; justify-content:center; gap:0.94vw; padding:1.3vh 0.52vw 0.37vh; background:linear-gradient(to top, rgba(28,28,28,.95), rgba(28,28,28,.6) 60%, rgba(28,28,28,0)); -webkit-backdrop-filter:blur(0.2vh); backdrop-filter:blur(0.2vh); margin-top:1.3vh; }
.cmp-roll-for-first.rff-modal .rff-footer .rff-btn { box-shadow:0.28vh 0.28vh 0 #000; }
.cmp-roll-for-first.rff-modal .rff-footer .rff-skip { align-self:center; }

/* Reserve extra breathing room at bottom so winner banner + trophy never cut off */
.cmp-roll-for-first.rff-modal .rff-frame:after { content:""; position:absolute; left:0; right:0; bottom:0; height:3.7vh; pointer-events:none; background:linear-gradient(to bottom, rgba(28,28,28,0), rgba(28,28,28,0.85)); }
.cmp-roll-for-first.rff-modal .rff-btn { font-family:'Bangers',cursive; letter-spacing:0.05vmin; font-size:2vh; padding:1.1vh 1.67vw 1.3vh; border-radius:0; border:0.2vh solid #333; background:#222; color:#e4e4e4; cursor:pointer; box-shadow:0.28vh 0.28vh 0 #000; position:relative; text-shadow:none; transition:background .18s ease, transform .15s ease; }
.cmp-roll-for-first.rff-modal .rff-btn-primary { background:#2e2e2e; color:#eaeaea; border-color:#444; }
.cmp-roll-for-first.rff-modal .rff-btn:hover { background:#303030; }
.cmp-roll-for-first.rff-modal .rff-btn:active { transform:translateY(0.2vh); box-shadow:0.1vh 0.1vh 0 #000; }
 .cmp-roll-for-first.rff-modal .rff-skip { font-family:Arial,sans-serif; font-size:1.2vh; letter-spacing:0.03vmin; text-transform:uppercase; color:#bbb; text-decoration:none; opacity:.85; transition:color .2s ease, opacity .2s ease; }
 .cmp-roll-for-first.rff-modal .rff-skip:hover { color:#fff; opacity:1; }
@media (max-width:640px) { .cmp-roll-for-first.rff-modal .rff-frame { padding:2vh 1.04vw 2.8vh; } .cmp-roll-for-first.rff-modal .rff-title { font-size:3.2vh; } .cmp-roll-for-first.rff-modal .rff-btn { font-size:1.8vh; padding:0.74vh 0.83vw 0.93vh; } .cmp-roll-for-first.rff-modal .rff-footer { gap:0.63vw; padding:1.1vh 0.31vw 0.37vh; } }

/* Mobile-first adaptations - Full screen modal */
@media (max-width: 720px) {
	.cmp-roll-for-first.rff-modal { align-items: stretch; padding-top: 0; }
	.cmp-roll-for-first.rff-modal .rff-frame { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-width: 0; border-radius: 0; padding: 0.74vh 0.63vw 0.37vh; }
	.cmp-roll-for-first.rff-modal .rff-title { font-size: 3vh; }
	.cmp-roll-for-first.rff-modal .rff-broadcast { font-size: 1.8vh; padding: 0.2vh; }
	.cmp-roll-for-first.rff-modal .rff-rolls { grid-template-columns: 1fr 3.3vw; }
	.cmp-roll-for-first.rff-modal .rff-footer { position: sticky; bottom: 0; flex-wrap: wrap; gap: 0.52vw; padding: 0.93vh 0.31vw 0.56vh; }
	.cmp-roll-for-first.rff-modal .rff-btn { padding: 0.74vh 0.73vw 0.93vh; font-size: 1.8vh; }
}
@media (max-width: 480px) { 
	.cmp-roll-for-first.rff-modal .rff-title { font-size: 2.5vh; }
	.cmp-roll-for-first.rff-modal .rff-broadcast { padding: 0.2vh; min-height: 6.5vh; font-size: 1.6vh; }
}

/* Animated dice (legacy-inspired) */
.cmp-roll-for-first .rff-anim-dice { display:flex; gap:0.52vw; flex-wrap:wrap; margin:0.93vh 0 0.37vh; }
.cmp-roll-for-first .rff-die { width:4.8vh; height:4.8vh; position:relative; background:radial-gradient(circle at 30% 30%, #fff, #e3e3e3); border:0.28vh solid #111; border-radius:0.93vh; box-shadow:0 0.37vh 0 #000, 0 0 0 0.2vh #222 inset, 0 0.74vh 1.3vh -0.56vh rgba(0,0,0,.7); animation: rff-die-wobble 2.4s ease-in-out infinite; }
.cmp-roll-for-first .rff-die .pip { position:absolute; width:0.93vh; height:0.93vh; background:#111; border-radius:50%; box-shadow:0 0 0 0.2vh #000 inset, 0 0 0.37vh rgba(0,0,0,.35); opacity:0; }
/* Pip layout (six pips base) */
.cmp-roll-for-first .rff-die .p1 { top:0.74vh; left:0.74vh; }
.cmp-roll-for-first .rff-die .p2 { top:0.74vh; right:0.74vh; }
.cmp-roll-for-first .rff-die .p3 { top:50%; left:50%; transform:translate(-50%,-50%); }
.cmp-roll-for-first .rff-die .p4 { bottom:0.74vh; left:0.74vh; }
.cmp-roll-for-first .rff-die .p5 { bottom:0.74vh; right:0.74vh; }
.cmp-roll-for-first .rff-die .p6 { top:50%; left:0.74vh; transform:translateY(-50%); }
.cmp-roll-for-first .rff-die[data-face="1"] .p3,
.cmp-roll-for-first .rff-die[data-face="2"] .p1, .cmp-roll-for-first .rff-die[data-face="2"] .p5,
.cmp-roll-for-first .rff-die[data-face="3"] .p1, .cmp-roll-for-first .rff-die[data-face="3"] .p3, .cmp-roll-for-first .rff-die[data-face="3"] .p5,
.cmp-roll-for-first .rff-die[data-face="4"] .p1, .cmp-roll-for-first .rff-die[data-face="4"] .p2, .cmp-roll-for-first .rff-die[data-face="4"] .p4, .cmp-roll-for-first .rff-die[data-face="4"] .p5,
.cmp-roll-for-first .rff-die[data-face="5"] .p1, .cmp-roll-for-first .rff-die[data-face="5"] .p2, .cmp-roll-for-first .rff-die[data-face="5"] .p3, .cmp-roll-for-first .rff-die[data-face="5"] .p4, .cmp-roll-for-first .rff-die[data-face="5"] .p5,
.cmp-roll-for-first .rff-die[data-face="6"] .p1, .cmp-roll-for-first .rff-die[data-face="6"] .p2, .cmp-roll-for-first .rff-die[data-face="6"] .p4, .cmp-roll-for-first .rff-die[data-face="6"] .p5, .cmp-roll-for-first .rff-die[data-face="6"] .p6 { opacity:1; }
@keyframes rff-die-wobble { 0%,100% { transform:translateY(0) rotate(0deg); } 20% { transform:translateY(-0.56vh) rotate(4deg); } 40% { transform:translateY(0.2vh) rotate(-3deg); } 60% { transform:translateY(-0.37vh) rotate(2deg); } 80% { transform:translateY(0.1vh) rotate(-2deg); } }

/* Scoreboard Table (Mini Dice Rows) */
.cmp-roll-for-first .rff-table { width:100%; border-collapse:collapse; margin:0.74vh 0 1.67vh; table-layout:fixed; font-family:Arial,sans-serif; }
.cmp-roll-for-first .rff-table thead th { background:linear-gradient(135deg,#272727,#1c1c1c); color:#f2f2f2; padding:0.93vh 0.63vw; border:0.1vh solid #383838; font-size:1.6vh; letter-spacing:0.05vmin; text-align:center; text-transform:uppercase; font-weight:700; }
.cmp-roll-for-first .rff-table tbody td { padding:1.3vh 0.52vw; border:0.1vh solid #2a2a2a; font-size:1.5vh; text-align:center; background:#121212; color:#ddd; }
.cmp-roll-for-first .rff-table tfoot td { background:linear-gradient(135deg,#1c1c1c,#272727); color:#999; padding:0.74vh 0.63vw; border:0.1vh solid #383838; font-size:1.1vh; text-align:center; font-style:italic; }
.cmp-roll-for-first .rff-table td.rff-player { text-align:left; font-weight:700; background:#141414; display:flex; align-items:center; gap:0.63vw; }
.cmp-roll-for-first .rff-table .rff-avatar { width:4.3vh; height:4.3vh; border:0.2vh solid #000; border-radius:50%; overflow:hidden; background:#222; flex-shrink:0; box-shadow:0 0 0 0.2vh #333 inset, 0.2vh 0.2vh 0 #000; display:flex; align-items:center; justify-content:center; }
.cmp-roll-for-first .rff-table .rff-avatar { background:#fff; }
.cmp-roll-for-first .rff-table .rff-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.cmp-roll-for-first .rff-table .rff-name { font-size:1.6vh; letter-spacing:0.03vmin; }
.cmp-roll-for-first .rff-table .rff-dice-set { display:flex; gap:0.42vw; justify-content:center; align-items:center; }
.cmp-roll-for-first .rff-table .mini-die { width:3.3vh; height:3.3vh; font-size:1.5vh; line-height:1; display:flex; align-items:center; justify-content:center; border:0.2vh solid #333; border-radius:0.65vh; background:linear-gradient(145deg,#fafafa,#d9d9d9); color:#111; box-shadow:0.2vh 0.2vh 0.37vh rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease, background .3s ease, color .3s ease; position:relative; font-weight:700; }
.cmp-roll-for-first .rff-table .mini-die.f-heart .rff-face-heart { color:#d01212; font-size:1.67vh; text-shadow:0 0 0.37vh rgba(255,0,0,.5); }
.cmp-roll-for-first .rff-table .mini-die.f-energy .rff-face-energy { color:#ffce00; font-size:1.67vh; text-shadow:0 0 0.56vh rgba(255,215,0,.7); }
.cmp-roll-for-first .rff-table .mini-die.f-claw .rff-face-claw { color:#fff; font-size:1.67vh; filter:drop-shadow(0 0 0.37vh rgba(255,0,0,.7)); }
.cmp-roll-for-first .rff-table .mini-die.attack { border-color:#FF4444; background:linear-gradient(145deg,#ff6a6a,#ff3737); box-shadow:0 0 0.56vh rgba(255,68,68,.6),0.2vh 0.2vh 0.37vh rgba(0,0,0,.4); color:#fff; }
.cmp-roll-for-first .rff-table .mini-die.f-num { color:#111; }
.cmp-roll-for-first .rff-table .mini-die.rolling { animation:shake3D .75s cubic-bezier(0.68,-0.55,0.265,1.55) infinite; }
.cmp-roll-for-first .rff-table tr.winner .mini-die { border-color:#FFD700; box-shadow:0 0 0 0.2vh #000 inset,0 0 0.93vh rgba(255,215,0,.7); background:linear-gradient(145deg,#ffe077,#ffcf33); }
.cmp-roll-for-first .rff-table tr.winner td { background:#1d1a07; color:#f9e7a2; }
.cmp-roll-for-first .rff-table tr.winner td.rff-result { font-weight:700; font-size:1.7vh; }
.cmp-roll-for-first .rff-table tr.winner .rff-name { color:#FFDF3D; text-shadow:0 0 0.56vh rgba(255,223,61,.8); }
/* Rolling row highlight */
.cmp-roll-for-first .rff-table tr.rolling-row td { background:#1d1d1d; }
.cmp-roll-for-first .rff-table tr.rolling-row .rff-name { color:#fff; }
.cmp-roll-for-first .rff-table tr.rolling-row .mini-die { filter:brightness(1.05); }
.cmp-roll-for-first .rff-cpu-tag { position:relative; font-size:0.9vh; padding:0.2vh 0.26vw 0.28vh; margin-left:0.31vw; font-family:Arial,sans-serif; letter-spacing:0.03vmin; font-weight:600; line-height:1; display:inline-block; color:#888; border:none; box-shadow:none; border-radius:0; background:none; }
.cmp-roll-for-first .rff-table tr:not(.winner) .mini-die[data-finalized='1'] { opacity:.9; }
.cmp-roll-for-first .rff-table .rff-result { font-weight:600; }
/* Hide dice placeholder until row rolls (dice not inserted until roll) */
[data-dice-cell] .rff-dice-set:not(.initialized) .mini-die { visibility:hidden; }
[data-dice-cell] .rff-dice-set.initialized .mini-die { visibility:visible; }

/* Winner message placeholder */
.cmp-roll-for-first .rff-winner-msg { font-family:Arial,sans-serif; font-size:1.4vh; color:#bbb; letter-spacing:0.03vmin; }
/* Enhanced winner banner */
.cmp-roll-for-first .rff-winner-banner { 
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	gap:0.37vh; 
	padding:1.67vh 1.04vw 1.85vh; 
	background:linear-gradient(135deg,#2d2505,#3b3108 35%,#5a490c); 
	border:0.2vh solid #000; 
	box-shadow:0 0 0 0.2vh #4f3d07 inset, 0 0 1.3vh -0.2vh rgba(255,215,0,.55), 0.37vh 0.37vh 0 #000; 
	font-family:'Bangers',cursive; 
	letter-spacing:0.05vmin; 
	position:relative; 
	margin-top:0.37vh; 
	width:min(33.3vw,100%);
	animation:rff-winner-pop .55s cubic-bezier(.65,-0.35,.35,1.4);
	text-align:center;
}

/* Slightly larger max width overall but still stretch inside broadcast */

.cmp-roll-for-first .rff-winner-banner:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 40%,rgba(255,215,0,.35),rgba(255,215,0,0) 60%); mix-blend-mode:screen; opacity:.8; }
.cmp-roll-for-first .rff-winner-icon { font-size:3vh; filter:drop-shadow(0 0 0.56vh rgba(255,215,0,.8)); animation:rff-winner-icon-pulse 2.4s ease-in-out infinite; }
.cmp-roll-for-first .rff-winner-text { font-size:2.5vh; color:#FFDF3D; text-shadow:0 0 0.74vh rgba(255,215,0,.75), -0.2vh -0.2vh 0 #000, 0.2vh 0.2vh 0 #000; line-height:1.05; }
.cmp-roll-for-first .rff-winner-sub { font-family:Arial,sans-serif; font-size:1.2vh; color:#f5e8b5; letter-spacing:0.04vmin; text-transform:uppercase; opacity:.9; }
@keyframes rff-winner-pop { 0% { transform:scale(.65) rotate(-4deg); opacity:0; } 60% { transform:scale(1.05) rotate(2deg); opacity:1; } 85% { transform:scale(.97) rotate(-1deg);} 100% { transform:scale(1) rotate(0deg);} }
@keyframes rff-winner-icon-pulse { 0%,100% { transform:scale(1) rotate(0deg);} 40% { transform:scale(1.18) rotate(8deg);} 70% { transform:scale(1.05) rotate(-6deg);} }
.cmp-roll-for-first .rff-table tr + tr td { border-top:0.1vh solid #1d1d1d; }
.cmp-roll-for-first .rff-table tbody tr:hover td { background:#181818; }

@keyframes shake3D { 0%{ transform:translate3d(0,0,0) rotate(0deg);} 20%{ transform:translate3d(0.2vh,-0.28vh,0) rotate(5deg);} 40%{ transform:translate3d(-0.28vh,0.2vh,0) rotate(-4deg);} 60%{ transform:translate3d(0.28vh,-0.2vh,0) rotate(3deg);} 80%{ transform:translate3d(-0.2vh,0.2vh,0) rotate(-3deg);} 100%{ transform:translate3d(0,0,0) rotate(0deg);} }