@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════
   ROOT APP
   ═══════════════════════════════════════════════════ */
.wof-app {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 24px 52px;
	font-family: 'Nunito', -apple-system, sans-serif;
	background: linear-gradient(145deg, #0f0c29 0%, #302b63 50%, #1a1040 100%);
	border-radius: 32px;
	color: #fff;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 40px 100px rgba(8,5,35,0.6);
}

/* Orbs */
.wof-orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.wof-orb-1 { width:320px;height:320px;top:-80px;left:-60px;background:radial-gradient(circle,rgba(109,40,217,.4) 0%,transparent 70%);animation:wof-fl1 9s ease-in-out infinite; }
.wof-orb-2 { width:260px;height:260px;bottom:-60px;right:-40px;background:radial-gradient(circle,rgba(59,130,246,.3) 0%,transparent 70%);animation:wof-fl2 11s ease-in-out infinite; }
.wof-orb-3 { width:180px;height:180px;top:45%;right:3%;background:radial-gradient(circle,rgba(236,72,153,.22) 0%,transparent 70%);animation:wof-fl1 13s ease-in-out infinite reverse; }
@keyframes wof-fl1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(28px) scale(1.07)} }
@keyframes wof-fl2 { 0%,100%{transform:translateX(0) scale(1)} 50%{transform:translateX(-18px) scale(1.05)} }

/* ═══ HEADER ═══ */
.wof-header { position:relative;z-index:1;text-align:center;margin-bottom:28px; }
.wof-crown { font-size:34px;display:block;animation:wof-bounce 2.6s ease-in-out infinite; }
@keyframes wof-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.wof-title {
	font-size:42px;font-weight:900;margin:4px 0 6px;letter-spacing:-.5px;line-height:1.1;
	background:linear-gradient(135deg,#fff 30%,#c4b5fd 70%,#f0abfc 100%);
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.wof-title em { font-style:italic;background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.wof-subtitle { margin:0;font-size:14px;font-weight:700;color:rgba(196,181,253,.8);letter-spacing:1.5px;text-transform:uppercase; }

/* ═══ BODY GRID ═══ */
.wof-body { position:relative;z-index:1;display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start; }

/* ═══ LEFT ═══ */
.wof-left { display:flex;flex-direction:column;align-items:center;gap:20px; }

/* Legend */
.wof-legend { display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%; }
.wof-chip {
	display:flex;align-items:center;gap:7px;
	background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
	backdrop-filter:blur(6px);color:rgba(255,255,255,.9);
	padding:7px 14px;border-radius:30px;font-size:12.5px;font-weight:700;
}
.wof-chip em { font-style:normal;color:#fde68a;margin-left:2px;font-weight:800; }
.wof-chip .dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 5px rgba(255,255,255,.4); }

/* Stage */
.wof-stage { position:relative;display:flex;align-items:center;justify-content:center; }
.wof-wheel-glow {
	position:absolute;width:400px;height:400px;border-radius:50%;
	box-shadow:0 0 60px 20px rgba(139,92,246,.35),0 0 110px 40px rgba(99,102,241,.18);
	animation:wof-glow-pulse 3s ease-in-out infinite;
}
@keyframes wof-glow-pulse { 0%,100%{box-shadow:0 0 60px 20px rgba(139,92,246,.35),0 0 110px 40px rgba(99,102,241,.18)} 50%{box-shadow:0 0 80px 28px rgba(167,139,250,.5),0 0 150px 55px rgba(139,92,246,.28)} }
.wof-wheel-wrap { position:relative;z-index:2; }
.wof-pointer-wrap { position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:10; }
.wof-pointer-pin { width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:34px solid #FFD93D;filter:drop-shadow(0 4px 8px rgba(255,210,60,.6)); }
#wof-canvas { display:block;width:430px;height:430px;max-width:90vw;border-radius:50%;box-shadow:0 0 0 7px rgba(255,255,255,.07),0 0 0 14px rgba(255,255,255,.03),0 28px 55px rgba(0,0,0,.5); }

/* Spin button hub */
.wof-spin-btn {
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:96px;height:96px;border-radius:50%;border:none;
	background:linear-gradient(145deg,#7c3aed,#a855f7);
	color:#fff;cursor:pointer;z-index:6;padding:0;
	box-shadow:0 0 0 4px rgba(255,255,255,.15),0 0 0 8px rgba(139,92,246,.2),0 12px 28px rgba(0,0,0,.4);
	transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
}
.wof-spin-btn:hover:not(:disabled) { transform:translate(-50%,-50%) scale(1.1); box-shadow:0 0 0 5px rgba(255,255,255,.25),0 0 0 12px rgba(167,139,250,.3),0 16px 36px rgba(0,0,0,.5); }
.wof-spin-btn:active:not(:disabled) { transform:translate(-50%,-50%) scale(.95); }
.wof-spin-btn:disabled { opacity:.65;cursor:not-allowed; }
.wof-spin-inner { display:flex;flex-direction:column;align-items:center;gap:2px; }
.wof-spin-icon { font-size:22px;line-height:1; }
.wof-spin-label { font-size:12px;font-weight:900;letter-spacing:2.5px; }

/* ═══ TASK POPUP (modal) ═══ */
.wof-task-overlay {
	display:none;position:fixed;inset:0;z-index:99998;
	background:rgba(5,3,20,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	align-items:center;justify-content:center;padding:20px;
}
.wof-task-overlay.show { display:flex; }

.wof-task-modal {
	position:relative;width:100%;max-width:460px;
	background:linear-gradient(160deg,rgba(30,22,84,.98),rgba(45,31,107,.98));
	border:1px solid rgba(167,139,250,.3);
	border-radius:28px;padding:28px 26px 24px;
	box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(139,92,246,.22);
	animation:wof-modal-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wof-modal-pop { from{transform:scale(.7) translateY(30px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

.wof-task-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px; }

.wof-task-badge-wrap { display:flex;align-items:center;gap:12px; }
.wof-task-emoji-big { font-size:44px;line-height:1;animation:wof-emoji-pop .5s cubic-bezier(.34,1.56,.64,1);flex-shrink:0; }
@keyframes wof-emoji-pop { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.wof-task-badge {
	display:inline-block;padding:6px 14px;border-radius:20px;font-size:11px;
	font-weight:800;letter-spacing:1.3px;text-transform:uppercase;margin-right:8px;
	background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.4);color:#c4b5fd;
}
.wof-task-pts-label { font-size:20px;font-weight:900;color:#fde68a;text-shadow:0 0 12px rgba(253,230,138,.5); }

/* Circular timer */
.wof-timer-wrap { position:relative;width:64px;height:64px;flex-shrink:0; }
.wof-timer-svg { width:64px;height:64px;transform:rotate(-90deg); }
.wof-timer-bg { fill:none;stroke:rgba(255,255,255,.1);stroke-width:5; }
.wof-timer-ring {
	fill:none;stroke:#6BCB77;stroke-width:5;
	stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:0;
	transition:stroke-dashoffset .9s linear,stroke .5s;
}
.wof-timer-text {
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	font-size:16px;font-weight:900;color:#fff;
}
.wof-timer-ring.urgent { stroke:#FF6B6B;animation:wof-timer-pulse .5s ease-in-out infinite alternate; }
@keyframes wof-timer-pulse { from{opacity:1} to{opacity:.5} }

.wof-task-text { font-size:20px;font-weight:800;color:#fff;line-height:1.45;margin:0 0 20px;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.3); }

/* Team pick */
.wof-team-select-area { display:none; }
.wof-team-select-area.is-visible { display:block; }
.wof-team-select-label { text-align:center;font-size:13px;font-weight:700;color:rgba(196,181,253,.8);letter-spacing:.5px;margin:0 0 12px;text-transform:uppercase; }
.wof-team-select-btns { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.wof-team-pick-btn {
	padding:14px 10px;border:none;border-radius:16px;font-family:'Nunito',sans-serif;
	font-size:15px;font-weight:800;color:#fff;cursor:pointer;
	transition:transform .18s ease,box-shadow .18s ease;
	display:flex;flex-direction:column;align-items:center;gap:6px;
}
.wof-team-a-pick { background:linear-gradient(135deg,#1d4ed8,#3b82f6);box-shadow:0 6px 20px rgba(59,130,246,.4); }
.wof-team-b-pick { background:linear-gradient(135deg,#dc2626,#f87171);box-shadow:0 6px 20px rgba(220,38,38,.4); }
.wof-team-pick-btn:hover { transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.4); }
.wof-pick-icon { font-size:20px; }

/* Action buttons */
.wof-action-area { display:none;grid-template-columns:1fr 1fr 1fr;gap:12px; }
.wof-action-area.is-visible { display:grid; }
.wof-action-btn {
	display:flex;flex-direction:column;align-items:center;gap:5px;
	padding:14px 8px;border:none;border-radius:18px;font-family:'Nunito',sans-serif;
	font-weight:800;color:#fff;cursor:pointer;
	transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s ease;
}
.wof-action-icon { font-size:24px;line-height:1; }
.wof-action-label { font-size:13px;letter-spacing:.3px; }
.wof-action-pts { font-size:15px;font-weight:900;color:#fff; }
.wof-done { background:linear-gradient(145deg,#16a34a,#22c55e);box-shadow:0 6px 20px rgba(22,163,74,.45); }
.wof-partial { background:linear-gradient(145deg,#b45309,#f59e0b);box-shadow:0 6px 20px rgba(180,83,9,.45); }
.wof-nodone { background:linear-gradient(145deg,#991b1b,#ef4444);box-shadow:0 6px 20px rgba(153,27,27,.45); }
.wof-action-btn:hover { transform:translateY(-4px) scale(1.04); }
.wof-action-btn:active { transform:translateY(-1px) scale(.98); }

/* Result flash */
.wof-result-flash {
	display:none;text-align:center;padding:16px;border-radius:16px;
	font-size:20px;font-weight:900;margin-top:12px;animation:wof-flash-in .4s cubic-bezier(.34,1.4,.64,1);
}
.wof-result-flash.show { display:block; }
@keyframes wof-flash-in { from{transform:scale(.8);opacity:0} to{transform:scale(1);opacity:1} }

/* ═══ SCOREBOARD ═══ */
.wof-right { position:sticky;top:20px; }
.wof-scoreboard {
	background:linear-gradient(160deg,rgba(24,18,60,.98),rgba(36,26,82,.98));
	border:1px solid rgba(167,139,250,.2);
	border-radius:24px;padding:22px 18px;
	box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
}

.wof-sb-header { display:flex;align-items:center;gap:10px;margin-bottom:20px;justify-content:center; }
.wof-sb-icon { font-size:22px; }
.wof-sb-title { font-size:15px;font-weight:900;letter-spacing:3px;color:#c4b5fd; }

/* Team cards */
.wof-teams-wrap { display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:16px; }
.wof-team-card {
	background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
	border-radius:18px;padding:16px 10px;text-align:center;
	transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.wof-team-card.is-active {
	border-color:rgba(253,230,138,.6);
	box-shadow:0 0 0 1px rgba(253,230,138,.3),0 8px 24px rgba(0,0,0,.3);
	transform:scale(1.03);
}
.wof-team-card-a.is-active { border-color:rgba(59,130,246,.7);box-shadow:0 0 0 2px rgba(59,130,246,.25),0 8px 24px rgba(0,0,0,.3); }
.wof-team-card-b.is-active { border-color:rgba(239,68,68,.7);box-shadow:0 0 0 2px rgba(239,68,68,.25),0 8px 24px rgba(0,0,0,.3); }

.wof-team-avatar { font-size:26px;margin-bottom:6px; }
.wof-team-name-input {
	background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.25);
	color:#e2d8ff;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;
	text-align:center;width:100%;outline:none;padding:2px 0;margin-bottom:8px;
	letter-spacing:.3px;
}
.wof-team-name-input:focus { border-bottom-color:rgba(167,139,250,.7); }
.wof-team-score-big { font-size:36px;font-weight:900;line-height:1;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4); }
.wof-team-pts-lbl { font-size:10px;font-weight:700;color:rgba(196,181,253,.5);letter-spacing:1px;text-transform:uppercase;margin-top:2px; }

.wof-vs-col { display:flex;flex-direction:column;align-items:center;gap:8px; }
.wof-vs-badge {
	width:38px;height:38px;border-radius:50%;
	background:linear-gradient(135deg,#7c3aed,#a855f7);
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:900;letter-spacing:.5px;
	box-shadow:0 4px 14px rgba(124,58,237,.5);
}
.wof-toss-note { font-size:10px;font-weight:700;color:rgba(196,181,253,.55);text-align:center;letter-spacing:.3px; }

/* Progress bar */
.wof-progress-wrap { margin-bottom:18px; }
.wof-progress-track { height:10px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;overflow:hidden;margin-bottom:6px; }
.wof-progress-a { background:linear-gradient(90deg,#1d4ed8,#60a5fa);border-radius:10px 0 0 10px;transition:width .6s cubic-bezier(.34,1.2,.64,1); }
.wof-progress-b { background:linear-gradient(90deg,#f87171,#dc2626);border-radius:0 10px 10px 0;transition:width .6s cubic-bezier(.34,1.2,.64,1); }
.wof-progress-labels { display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:rgba(196,181,253,.6); }

/* History */
.wof-history-wrap { margin-bottom:14px; }
.wof-history-header { font-size:11px;font-weight:800;letter-spacing:2px;color:rgba(196,181,253,.5);text-transform:uppercase;margin-bottom:10px; }
.wof-history-list { max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:6px; }
.wof-history-list::-webkit-scrollbar { width:4px; }
.wof-history-list::-webkit-scrollbar-track { background:rgba(255,255,255,.04);border-radius:4px; }
.wof-history-list::-webkit-scrollbar-thumb { background:rgba(167,139,250,.3);border-radius:4px; }
.wof-history-empty { font-size:12px;color:rgba(196,181,253,.35);text-align:center;padding:12px 0;font-style:italic; }
.wof-history-row {
	display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
	background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
	font-size:11.5px;font-weight:700;
	animation:wof-flash-in .3s ease;
}
.wof-history-row .wof-hr-team { font-size:13px; }
.wof-history-row .wof-hr-name { flex:1;color:rgba(255,255,255,.85);font-size:11px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.wof-history-row .wof-hr-pts { font-size:13px;font-weight:900;white-space:nowrap; }
.wof-history-row .wof-hr-pts.pos { color:#4ade80; }
.wof-history-row .wof-hr-pts.zero { color:rgba(255,255,255,.3); }

/* Reset / Finish actions */
.wof-sb-actions { display:grid;grid-template-columns:1fr 1.3fr;gap:10px; }
.wof-reset-btn {
	padding:12px 8px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
	background:rgba(255,255,255,.05);color:rgba(196,181,253,.7);font-family:'Nunito',sans-serif;
	font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.3px;
	transition:background .2s,color .2s;white-space:nowrap;
}
.wof-reset-btn:hover { background:rgba(255,255,255,.1);color:#fff; }
.wof-finish-btn {
	padding:12px 8px;border:none;border-radius:12px;
	background:linear-gradient(135deg,#d97706,#f59e0b,#fbbf24);
	color:#1a1040;font-family:'Nunito',sans-serif;
	font-size:12.5px;font-weight:900;cursor:pointer;letter-spacing:.3px;white-space:nowrap;
	box-shadow:0 6px 18px rgba(217,119,6,.4);
	transition:transform .18s ease,box-shadow .18s ease;
}
.wof-finish-btn:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(217,119,6,.55); }
.wof-finish-btn:active { transform:translateY(0); }

/* ═══ WINNER OVERLAY ═══ */
.wof-winner-overlay {
	display:none;position:fixed;inset:0;z-index:99999;
	background:rgba(5,3,20,.8);backdrop-filter:blur(12px);
	align-items:center;justify-content:center;
}
.wof-winner-overlay.show { display:flex; }
.wof-winner-card {
	position:relative;overflow:hidden;
	background:linear-gradient(145deg,#1e1654,#2d1f6b);
	border:1px solid rgba(253,230,138,.35);border-radius:32px;padding:48px 40px;
	text-align:center;max-width:380px;width:90%;
	box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 80px rgba(253,230,138,.15);
	animation:wof-modal-in .45s cubic-bezier(.34,1.56,.64,1);
}
.wof-winner-confetti-bar { position:absolute;top:0;left:0;right:0;height:5px;
	background:linear-gradient(90deg,#4D96FF,#FF6B6B,#FFD93D,#6BCB77,#a855f7); }
@keyframes wof-modal-in { from{transform:scale(.6) translateY(40px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.wof-winner-emoji { font-size:80px;line-height:1;margin-bottom:10px;animation:wof-bounce 1.5s ease-in-out infinite; }
.wof-winner-title { font-size:15px;font-weight:900;letter-spacing:3px;color:#fde68a;margin-bottom:10px; }
.wof-winner-name { font-size:32px;font-weight:900;color:#fff;margin-bottom:6px;line-height:1.25; }
.wof-winner-score { font-size:18px;font-weight:700;color:rgba(196,181,253,.8);margin-bottom:28px; }
.wof-winner-close {
	padding:14px 36px;border:none;border-radius:20px;
	background:linear-gradient(135deg,#7c3aed,#a855f7,#ec4899);
	color:#fff;font-size:16px;font-weight:800;font-family:'Nunito',sans-serif;
	cursor:pointer;box-shadow:0 8px 24px rgba(124,58,237,.5);
	transition:transform .18s ease;
}
.wof-winner-close:hover { transform:scale(1.06); }

/* confetti */
#wof-confetti-canvas { position:fixed;inset:0;pointer-events:none;z-index:999999; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 820px) {
	.wof-body { grid-template-columns:1fr; }
	.wof-right { position:static; }
	.wof-scoreboard { margin-top:0; }
	.wof-teams-wrap { grid-template-columns:1fr auto 1fr; }
}
@media (max-width: 520px) {
	.wof-app { padding:28px 14px 40px;border-radius:22px; }
	.wof-title { font-size:32px; }
	#wof-canvas { width:320px;height:320px; }
	.wof-wheel-glow { width:300px;height:300px; }
	.wof-spin-btn { width:78px;height:78px; }
	.wof-spin-icon { font-size:18px; }
	.wof-spin-label { font-size:11px; }
	.wof-action-area { grid-template-columns:1fr 1fr 1fr;gap:8px; }
	.wof-action-btn { padding:10px 5px; }
	.wof-action-label { font-size:11px; }
	.wof-action-pts { font-size:12px; }
	.wof-team-score-big { font-size:28px; }
	.wof-task-modal { padding:22px 18px 18px; }
	.wof-task-text { font-size:17px; }
	.wof-sb-actions { grid-template-columns:1fr 1fr; }
}