@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --yellow:#f4c318; --navy:#102b3b; --cream:#fff8e9; --red:#c43c2f; --muted:#d5dcda; }
* { box-sizing:border-box; }
body { margin:0; background:var(--navy); }
body.rof-modal-open { overflow:hidden; }
button,input,select { font:inherit; }
.rof-page { min-height:100vh; color:var(--cream); font-family:'DM Sans',sans-serif; }
.rof-header { height:88px; padding:8px 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,248,233,.2); }
.rof-brand { display:flex; align-items:center; gap:11px; color:var(--cream); text-transform:uppercase; font:800 20px/.78 'Barlow Condensed',sans-serif; letter-spacing:.02em; text-decoration:none; }.rof-brand img { width:64px; height:64px; object-fit:cover; border-radius:50%; }.rof-brand em { display:block; color:var(--yellow); font-size:11px; font-style:normal; letter-spacing:.13em; margin-top:7px; }.rof-back { color:var(--yellow); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.12em; text-decoration:none; }
.rof-kicker { margin:0 0 18px; color:var(--yellow); text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.18em; }
.rof-setup { min-height:calc(100vh - 88px); display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; padding:7vw 8vw; background:radial-gradient(circle at 78% 18%,rgba(196,60,47,.35),transparent 30%),var(--navy); }.rof-setup-intro h1,.rof-game-topbar h1 { margin:0; font:800 clamp(74px,10vw,150px)/.72 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:-.04em; }.rof-setup-intro h1 span,.rof-game-topbar h1 span { color:var(--yellow); }.rof-intro { max-width:470px; margin:35px 0 0; color:var(--muted); font-size:18px; line-height:1.65; }.rof-caution { display:flex; gap:12px; align-items:flex-start; max-width:470px; margin-top:35px; padding-top:18px; border-top:1px solid rgba(255,248,233,.2); color:var(--muted); font-size:13px; line-height:1.5; }.rof-caution span { color:var(--yellow); font-size:23px; }.rof-caution p { margin:0; }
.rof-setup-card { padding:38px; color:var(--navy); background:var(--cream); border:8px solid var(--yellow); box-shadow:12px 12px 0 var(--red); }.rof-resume-card { margin-bottom:24px; padding:18px; color:var(--cream); background:var(--navy); border-left:6px solid var(--red); }.rof-resume-card .rof-kicker { margin-bottom:10px; color:var(--yellow); }.rof-resume-card h3 { margin:0 0 8px; font:800 28px/.9 'Barlow Condensed',sans-serif; text-transform:uppercase; }.rof-resume-card p:not(.rof-kicker) { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.rof-resume-card .rof-primary { margin-top:16px; color:var(--cream); background:var(--red); box-shadow:4px 4px 0 var(--yellow); }.rof-clear-save { display:block; margin:15px 0 0; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.rof-clear-save:hover { color:var(--yellow); }.rof-form-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; border-bottom:2px solid rgba(16,43,59,.2); padding-bottom:24px; }.rof-form-heading .rof-kicker { color:var(--red); margin:0; }.rof-form-heading h2 { margin:0; text-align:right; font:800 54px/.75 'Barlow Condensed',sans-serif; text-transform:uppercase; }.rof-count-label { display:flex; flex-direction:column; gap:8px; margin:25px 0 16px; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.12em; }.rof-count-label select,.rof-name-grid input { width:100%; border:1px solid rgba(16,43,59,.3); border-radius:0; background:#fff; color:var(--navy); padding:12px; }.rof-name-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.rof-name-grid label { display:flex; align-items:center; gap:9px; }.rof-name-grid label span { width:23px; color:var(--red); font-size:11px; font-weight:800; }.rof-name-grid input { padding:10px; font-size:14px; }.rof-name-grid input:focus,.rof-count-label select:focus { outline:3px solid rgba(244,195,24,.8); outline-offset:1px; }
.rof-primary,.rof-ghost { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; border:0; cursor:pointer; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.1em; }.rof-primary { width:100%; margin-top:27px; padding:16px 18px; background:var(--red); color:#fff; box-shadow:5px 5px 0 var(--navy); }.rof-primary:hover { background:#a92f25; }.rof-primary span { font-size:18px; }.rof-ghost { padding:13px 15px; color:var(--navy); background:var(--cream); box-shadow:4px 4px 0 var(--red); }.rof-ghost:hover { background:var(--yellow); }
.rof-game { position:relative; padding:5vw 5vw 7vw; background:radial-gradient(circle at 83% 12%,rgba(196,60,47,.32),transparent 23%),var(--navy); }.rof-game-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }.rof-game-topbar h1 { font-size:clamp(70px,9vw,136px); }.rof-game-actions { text-align:right; }.rof-game-actions p { margin:0 0 16px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }.rof-game-actions strong { color:var(--yellow); font-size:22px; }.rof-action-buttons { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }.rof-save-status { display:block; margin-top:10px; color:var(--yellow); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.rof-phone-down { display:flex; justify-content:center; align-items:center; gap:6px; margin:38px auto 15px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }.rof-phone-down span { color:var(--yellow); font-size:19px; }.rof-phone-down strong { color:var(--cream); }
.rof-table { position:relative; min-height:clamp(480px,68vw,800px); display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,248,233,.15); background:radial-gradient(circle,#18465b 0 27%,#12384a 28% 59%,#0c2938 60%); box-shadow:inset 0 0 0 15px rgba(244,195,24,.05),inset 0 0 80px rgba(0,0,0,.35); }.rof-ring { position:absolute; inset:0; display:grid; place-items:center; }.rof-card { --angle:0deg; position:absolute; width:clamp(28px,4.4vw,58px); aspect-ratio:2/3; padding:0; border:2px solid var(--yellow); border-radius:5px; cursor:pointer; color:var(--yellow); background:repeating-linear-gradient(45deg,rgba(244,195,24,.8) 0 1px,transparent 1px 5px),var(--red); box-shadow:0 2px 4px rgba(0,0,0,.35); transform:rotate(var(--angle)) translateY(calc(-1 * clamp(125px,33vw,310px))) rotate(calc(-1 * var(--angle))); transition:filter .2s,opacity .2s; font:800 clamp(9px,1.4vw,16px)/1 'Barlow Condensed',sans-serif; }.rof-card:hover:not(:disabled) { filter:brightness(1.25); }.rof-card:focus-visible { outline:4px solid var(--cream); outline-offset:3px; }.rof-card b { display:block; font-size:1.3em; }.rof-card-drawn { color:var(--navy); background:var(--cream); border-color:var(--muted); opacity:.84; }.rof-red { color:var(--red); }
.rof-cup { position:relative; z-index:2; width:clamp(155px,22vw,250px); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle at 50% 32%,rgba(244,195,24,.2),transparent 32%),#0c2531; border:5px solid var(--yellow); box-shadow:0 0 0 8px rgba(244,195,24,.18),0 0 0 18px rgba(255,248,233,.06),0 12px 30px rgba(0,0,0,.45); }.rof-cup-halo { display:grid; place-items:center; width:55px; height:55px; margin-bottom:7px; border-radius:50%; background:var(--red); font-size:29px; }.rof-cup strong { color:var(--yellow); font:800 clamp(19px,2.8vw,32px)/.84 'Barlow Condensed',sans-serif; letter-spacing:.02em; }.rof-cup small { margin-top:13px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.18em; }
.rof-players-bar { margin-top:26px; }.rof-players-bar .rof-kicker { margin-bottom:12px; }.rof-player-buttons { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; }.rof-player-buttons button { display:flex; justify-content:space-between; align-items:center; padding:14px; border:1px solid rgba(255,248,233,.25); background:transparent; color:var(--cream); cursor:pointer; text-align:left; font:600 14px 'DM Sans',sans-serif; }.rof-player-buttons button:hover,.rof-player-buttons .rof-current { background:var(--yellow); border-color:var(--yellow); color:var(--navy); }.rof-player-buttons b { color:var(--yellow); font-size:18px; }.rof-player-buttons button:hover b,.rof-player-buttons .rof-current b { color:var(--red); }
.rof-modal-scrim { position:fixed; z-index:10; inset:0; display:grid; place-items:center; overflow:auto; padding:12px; background:rgba(6,18,25,.8); backdrop-filter:blur(5px); }.rof-modal { position:relative; width:min(100%,490px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:38px; background:var(--cream); color:var(--navy); box-shadow:10px 10px 0 var(--red); }.rof-close { position:absolute; top:12px; right:16px; border:0; background:none; cursor:pointer; color:var(--navy); font-size:32px; line-height:1; }.rof-modal h2 { margin:0 0 22px; font:800 68px/.78 'Barlow Condensed',sans-serif; text-transform:uppercase; }.rof-modal .rof-kicker { color:var(--red); }.rof-reveal-card { position:relative; width:145px; aspect-ratio:2/3; display:flex; flex-direction:column; justify-content:center; align-items:center; margin:0 auto 25px; border:5px solid var(--navy); background:#fff; box-shadow:6px 6px 0 var(--yellow); font-family:'Barlow Condensed',sans-serif; }.rof-reveal-card span { position:absolute; top:10px; left:12px; font-size:32px; font-weight:800; }.rof-reveal-card strong { font-size:80px; line-height:1; }.rof-reveal-card small { position:absolute; right:10px; bottom:10px; font:800 10px 'DM Sans',sans-serif; letter-spacing:.08em; }.rof-rule { margin:0 0 26px; padding:17px; border-left:6px solid var(--yellow); background:#efe7d4; font-size:16px; line-height:1.55; }.rof-rule strong { display:block; margin-bottom:6px; color:var(--red); font-size:11px; letter-spacing:.13em; }.rof-history-count { margin:0 0 15px; color:var(--red); font-weight:800; }.rof-history-list { margin-bottom:24px; border-top:1px solid rgba(16,43,59,.22); }.rof-history-list>div { display:grid; grid-template-columns:60px 1fr; gap:12px; padding:13px 0; border-bottom:1px solid rgba(16,43,59,.22); }.rof-history-list>div>span { font:800 23px 'Barlow Condensed',sans-serif; }.rof-history-list p { margin:0; font-size:13px; line-height:1.45; }.rof-empty { padding:18px 0; color:#52636a; font-size:14px; line-height:1.5; }
.rof-draw-visual { position:relative; display:grid; min-height:clamp(330px,36vw,410px); aspect-ratio:1; overflow:hidden; margin:0 0 25px; border:5px solid var(--navy); background:linear-gradient(135deg,#18465b,#0c2531); box-shadow:6px 6px 0 var(--yellow); isolation:isolate; }.rof-draw-visual::after { position:absolute; z-index:1; inset:0; content:""; background:linear-gradient(180deg,rgba(16,43,59,.14) 0 38%,rgba(16,43,59,.8) 100%); pointer-events:none; }.rof-draw-visual .rof-number-joke, .rof-draw-visual .rof-final-king-joke, .rof-draw-visual .rof-rule-joke { position:absolute; z-index:0; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; margin:0; border:0; box-shadow:none; }.rof-draw-overlay { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:100%; padding:18px; }.rof-draw-visual .rof-reveal-card { flex:0 0 auto; width:128px; margin:0 auto; box-shadow:6px 6px 0 var(--yellow); }.rof-draw-overlay .rof-rule { margin:0; padding:14px; color:var(--cream); background:rgba(16,43,59,.86); border-left:5px solid var(--yellow); font-size:14px; line-height:1.4; text-shadow:0 1px 1px rgba(0,0,0,.2); }.rof-draw-overlay .rof-rule strong { color:var(--yellow); }
.rof-modal-scrim[hidden] { display:none !important; }
@media (max-width:850px) { .rof-setup { grid-template-columns:1fr; gap:50px; padding:60px 7vw; }.rof-setup-intro h1 { font-size:90px; }.rof-game { padding:45px 20px 60px; }.rof-game-topbar { align-items:flex-start; }.rof-game-topbar h1 { font-size:88px; }.rof-table { min-height:clamp(455px,112vw,650px); }.rof-card { width:clamp(26px,6vw,42px); }.rof-phone-down { text-align:center; flex-wrap:wrap; line-height:1.4; } }
@media (max-width:560px) { .rof-header { height:75px; padding:7px 16px; }.rof-brand { font-size:16px; }.rof-brand img { width:52px; height:52px; }.rof-brand em { font-size:9px; }.rof-back { font-size:10px; }.rof-setup { padding:50px 20px 70px; }.rof-setup-intro h1 { font-size:76px; }.rof-intro { font-size:16px; }.rof-setup-card { padding:24px 18px; border-width:5px; box-shadow:7px 7px 0 var(--red); }.rof-form-heading h2 { font-size:43px; }.rof-name-grid { grid-template-columns:1fr; gap:9px; }.rof-game { padding:36px 13px 48px; }.rof-game-topbar { display:block; }.rof-game-topbar h1 { font-size:73px; }.rof-game-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:25px; text-align:left; }.rof-game-actions p { margin:0; font-size:10px; }.rof-game-actions strong { font-size:18px; }.rof-action-buttons { justify-content:flex-end; gap:7px; }.rof-action-buttons .rof-ghost { padding:10px 9px; font-size:10px; }.rof-save-status { text-align:right; }.rof-table { min-height:470px; margin-left:-13px; margin-right:-13px; }.rof-card { width:27px; border-width:1px; border-radius:3px; }.rof-cup { width:145px; }.rof-cup-halo { width:44px; height:44px; font-size:23px; }.rof-cup strong { font-size:19px; }.rof-cup small { font-size:7px; }.rof-player-buttons { grid-template-columns:1fr 1fr; }.rof-player-buttons button { padding:11px 10px; font-size:12px; }.rof-modal { padding:31px 23px 24px; }.rof-modal h2 { font-size:48px; margin-bottom:16px; }.rof-draw-visual { min-height:0; }.rof-draw-overlay { padding:12px; }.rof-draw-visual .rof-reveal-card { width:112px; }.rof-draw-overlay .rof-rule { padding:12px; font-size:12px; line-height:1.32; }.rof-reveal-card strong { font-size:60px; } }
@media (min-width:1200px) { .rof-game { padding-left:6vw; padding-right:6vw; }.rof-table { min-height:min(70vw,960px); }.rof-card { width:clamp(42px,3vw,64px); transform:rotate(var(--angle)) translateY(calc(-1 * clamp(150px,25vw,360px))) rotate(calc(-1 * var(--angle))); } }
.rof-king-history { margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,248,233,.2); }.rof-king-history .rof-kicker { margin-bottom:12px; }.rof-king-history-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }.rof-king-entry { min-height:116px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:13px; border:1px solid rgba(255,248,233,.22); background:rgba(7,24,33,.36); }.rof-king-entry.rof-king-pulled { border-color:var(--yellow); background:rgba(244,195,24,.09); }.rof-king-entry.rof-final-king { border-color:var(--red); }.rof-king-badge { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; color:var(--yellow); font-size:10px; font-weight:800; letter-spacing:.12em; }.rof-king-badge b { color:var(--cream); font:800 25px/.8 'Barlow Condensed',sans-serif; letter-spacing:0; }.rof-king-entry strong { color:var(--cream); font:800 24px/.85 'Barlow Condensed',sans-serif; text-transform:uppercase; overflow-wrap:anywhere; }.rof-king-entry small { color:var(--muted); font-size:9px; font-weight:800; line-height:1.25; letter-spacing:.1em; }.rof-king-entry.rof-final-king small { color:var(--yellow); }
@media (max-width:560px) { .rof-king-history-grid { grid-template-columns:1fr 1fr; }.rof-king-entry { min-height:108px; padding:11px; }.rof-king-entry strong { font-size:21px; }.rof-king-badge b { font-size:22px; } }
.rof-wake-active { background:var(--yellow); color:var(--navy); }.rof-wake-status { display:block; margin-top:8px; color:var(--yellow); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rof-number-joke { width:min(100%,260px); aspect-ratio:1; object-fit:cover; display:block; margin:0 auto 24px; border:5px solid var(--navy); background:var(--muted); box-shadow:6px 6px 0 var(--yellow); }
@media (max-width:560px) { .rof-number-joke { width:220px; } }
.rof-rule-joke { width:min(100%,260px); aspect-ratio:1; object-fit:cover; display:block; margin:0 auto 24px; border:5px solid var(--navy); background:var(--muted); box-shadow:6px 6px 0 var(--yellow); }
@media (max-width:560px) { .rof-rule-joke { width:220px; } }
.rof-final-king-joke { width:min(100%,300px); aspect-ratio:1; object-fit:cover; display:block; margin:0 auto 24px; border:5px solid var(--navy); background:var(--muted); box-shadow:6px 6px 0 var(--red); }
@media (max-width:560px) { .rof-final-king-joke { width:240px; } }
.rof-secret-tap { position:absolute; z-index:4; top:0; right:0; width:88px; height:88px; padding:0; border:0; background:transparent; cursor:default; touch-action:manipulation; }
.rof-king-flash .rof-king-entry,
.rof-king-flash .rof-king-entry strong,
.rof-king-flash .rof-king-entry small { color:#e9f8ff; }
.rof-king-flash .rof-king-entry,
.rof-king-flash .rof-king-entry.rof-king-pulled,
.rof-king-flash .rof-king-entry.rof-final-king { border-color:#7bd7ff; background:#07558d; box-shadow:0 0 20px rgba(69,190,255,.85); animation:rof-king-blue-flash .12s steps(1,end) infinite; }
.rof-king-flash .rof-king-badge,
.rof-king-flash .rof-king-badge b,
.rof-king-flash .rof-king-badge b.rof-red,
.rof-king-flash .rof-king-entry.rof-final-king small { color:#bceeff; }
@keyframes rof-king-blue-flash { 0%,49% { filter:brightness(1.35); } 50%,100% { filter:brightness(.78); } }
@media (max-width:560px) { .rof-setup-intro { max-height:800px; opacity:1; overflow:hidden; transition:max-height .25s ease,opacity .2s ease,transform .25s ease; }.rof-form-heading h2 { max-width:240px; overflow:hidden; transition:max-width .25s ease,opacity .2s ease; }.rof-setup.rof-roster-entry { gap:18px; padding-top:24px; }.rof-setup.rof-roster-entry .rof-setup-intro { max-height:0; margin:0; opacity:0; transform:translateY(-12px); pointer-events:none; }.rof-setup.rof-roster-entry .rof-form-heading { padding-bottom:12px; }.rof-setup.rof-roster-entry .rof-form-heading h2 { display:none; } }