.rof-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:40px 0 35px}
.rof-heading .eyebrow,.rof-card-info .eyebrow,.rof-status .eyebrow{color:#ffac69}
.rof-heading h1{font-size:clamp(50px,7vw,82px);letter-spacing:-.055em;line-height:1;margin:0}
.rof-heading h1 em{font-family:'Playfair Display',Georgia,serif;color:#ffac69}
.rof-heading>p{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
.rof-setup{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.rof-setup-preview{display:grid;justify-items:center;padding:40px 0;background:radial-gradient(ellipse,#c7692029,transparent 70%)}
.rof-setup-preview .rof-card{transform:rotate(-8deg)}
.rof-preview-note{font-size:12px;color:var(--muted);margin-top:45px;text-align:center}
.rof-setup-form{padding:32px}.rof-setup-form h2{margin:0 0 24px;font-size:30px;letter-spacing:-.03em}
.rof-field{display:grid;gap:9px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px}
.rof-field input,.rof-field textarea{font:inherit;font-size:16px;color:var(--ink);background:#130f19;border:1px solid var(--line);border-radius:7px;padding:13px;width:100%;min-width:0}
.rof-field textarea{resize:vertical;min-height:110px;line-height:1.5}
.rof-field input:focus,.rof-field textarea:focus{outline:2px solid #ffac69;outline-offset:2px}
.rof-help,.rof-save-note{color:var(--muted);font-size:12px;line-height:1.6;margin:10px 0 18px}
.rof-save-note{text-align:center;font-size:11px;margin:15px 0 0}
.rof-options{border:0;padding:0;margin:24px 0}.rof-options legend{font-weight:600;font-size:13px;margin-bottom:12px}
.rof-options-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rof-option{display:flex;align-items:center;gap:10px;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:15px 12px;background:#18121f}
.rof-option:has(input:checked){border-color:#e18c4f;background:#ff9c4010}
.rof-option input,.rof-life-player input{accent-color:#ffac69;min-height:20px;width:20px;height:20px;flex-shrink:0;margin:0}
.rof-option strong{display:block;font-size:13px}.rof-option small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:5px}
#rof-app .button.primary{background:#ffac69;color:#21120b}#rof-app .button.primary:hover{background:#ffc393}
#rof-app .button:disabled{opacity:.35;cursor:not-allowed;transform:none}
.rof-card{width:300px;aspect-ratio:5/7;position:relative;border-radius:17px;flex-shrink:0;isolation:isolate;box-shadow:0 24px 60px #0007,0 2px 3px #0005}
.rof-face{background:#f5eddb;border:1px solid #ded1b7;padding:47px 27px;color:#211727}
.rof-art{display:block;width:100%;height:100%;object-fit:contain;border:1px solid #c9b997;border-radius:65px 65px 55px 55px;background:#2d1525}
.rof-face:after{content:'';position:absolute;inset:9px;border:1px solid #c9b997;border-radius:10px;pointer-events:none;z-index:-1}
.rof-corner{position:absolute;display:flex;align-items:center;flex-direction:column;font-family:Georgia,serif;line-height:.9;gap:4px;z-index:1}
.rof-corner b{font-weight:700;font-size:30px;letter-spacing:-.08em}.rof-corner>span{font-size:25px}
.rof-corner-top{left:13px;top:14px}.rof-corner-bottom{right:13px;bottom:14px;transform:rotate(180deg)}.rof-red .rof-corner{color:#b43335}
.rof-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:9px solid #f5eddb;color:#ffd6a7;outline:1px solid #c9b997;outline-offset:-12px;background:repeating-linear-gradient(45deg,#b56e2614 0,#b56e2614 1px,transparent 1px,transparent 12px),repeating-linear-gradient(-45deg,#b56e2614 0,#b56e2614 1px,transparent 1px,transparent 12px),#321a2d}
.rof-back:before,.rof-back:after{content:'✦';position:absolute;font-size:30px;color:#e8a258;left:50%;transform:translateX(-50%)}.rof-back:before{top:30px}.rof-back:after{bottom:30px}
.rof-back-mark{width:145px;height:145px;border:1px solid #bd854e;border-radius:50%;display:grid;place-items:center;font:italic 700 110px/1 Georgia,serif;letter-spacing:-.13em;padding-right:15px;box-shadow:0 0 0 7px #321a2d,0 0 0 8px #bd854e}
.rof-back strong{font-size:12px;letter-spacing:.18em;margin-top:15px}.rof-back small{font-size:9px;letter-spacing:.3em;color:#b99779}
.rof-toolbar,.rof-turn{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.rof-toolbar{font-size:11px;color:var(--muted);padding:3px 0 18px;border-bottom:1px solid var(--line)}.rof-toolbar .link-button{font-size:12px}
.rof-turn{padding:24px 0 12px}.rof-turn strong{font-size:20px;overflow-wrap:anywhere}.rof-turn>span{font-size:12px;color:var(--muted)}
.rof-progress{display:block;width:100%;height:4px;border:0;appearance:none;background:var(--line);margin:0 0 30px}.rof-progress::-webkit-progress-bar{background:var(--line)}.rof-progress::-webkit-progress-value{background:#ffac69}.rof-progress::-moz-progress-bar{background:#ffac69}
.rof-board{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:28px;align-items:start}
.rof-stage{display:grid;grid-template-columns:300px minmax(0,1fr);gap:30px;align-items:start}
.rof-card-info{padding-top:10px;min-width:0}.rof-card-info h2{font-size:34px;line-height:1.1;letter-spacing:-.04em;margin:0 0 18px;overflow-wrap:anywhere}
.rof-rule-text{color:#cfc3d0;font-size:15px;line-height:1.8;margin:0 0 24px}
.rof-notice{font-size:14px;line-height:1.7;padding:16px;border:1px solid #78522c;background:#ffac690b;border-radius:8px;margin:0 0 20px;overflow-wrap:anywhere}
.rof-finale{border-color:#ffaa50;background:#f3872725;color:#ffcd9f}
.rof-status{display:grid;gap:12px}.rof-status-box{padding:20px}.rof-status .eyebrow{font-size:9px;margin-bottom:14px}.rof-status h3{font-size:19px;margin:0;overflow-wrap:anywhere}.rof-status .rof-help{font-size:11px;margin-bottom:0}
.rof-cup-count{display:block;font:700 36px/1 Georgia,serif;color:#ffd1aa}
.rof-king-dots{display:flex;gap:7px;margin:17px 0}.rof-king-dots span{display:grid;place-items:center;width:32px;height:40px;border:1px solid #564151;border-radius:4px;color:#887986;font:700 19px Georgia,serif}.rof-king-dots .filled{background:#edac69;color:#2a1820;border-color:#edac69}
.rof-group{font-size:13px;line-height:1.65;overflow-wrap:anywhere}.rof-laws{font-size:12px;line-height:1.6;padding-left:18px;margin-bottom:0;overflow-wrap:anywhere}.rof-laws li+li{margin-top:12px}.rof-laws small{display:block;color:var(--muted);margin-top:3px}
.rof-task{margin:24px 0;padding-top:22px;border-top:1px solid var(--line)}.rof-task h3{font-size:21px;margin:0 0 14px;overflow-wrap:anywhere}
.rof-player-buttons{display:flex;flex-wrap:wrap;gap:8px}.rof-player-buttons .button{overflow-wrap:anywhere;max-width:100%;font-size:12px;padding:12px 15px}
.rof-inline-form{display:grid;gap:8px;margin:18px 0}.rof-inline-form .button{width:100%;font-size:12px}
.rof-lives{display:grid;gap:7px;margin:18px 0}.rof-life-player{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 10px;border:1px solid var(--line);border-radius:7px;cursor:pointer;font-size:12px}.rof-life-player:has(input:checked){background:#ffac6917;border-color:#ffac69}.rof-life-player>span{overflow-wrap:anywhere}.rof-hearts{color:#ffac69;white-space:nowrap;font-size:18px;letter-spacing:2px}
.rof-used ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;max-height:180px;overflow:auto}.rof-used li{font-size:11px;padding:5px 9px;border-radius:4px;background:#37283a;overflow-wrap:anywhere;max-width:100%}
.rof-reference{margin-top:45px;border-top:1px solid var(--line);padding-top:20px}.rof-reference summary{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:14px;cursor:pointer}.rof-reference>p{font-size:14px;line-height:1.8;color:var(--muted)}
.rof-rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:25px}.rof-rules-grid article{padding:22px;border:1px solid var(--line);border-radius:8px}.rof-rule-rank{font:700 28px Georgia,serif;color:#ffac69}.rof-rules-grid h3{font-size:16px;margin:12px 0}.rof-rules-grid p{font-size:12px;line-height:1.8;color:var(--muted)}
.rof-warning{padding:15px 20px;background:#4a261f;border:1px solid #a96847;border-radius:7px;color:#ffdbbd;font-size:13px;line-height:1.6}.rof-warning[hidden]{display:none}
.rof-noscript{padding:25px}.rof-finished{padding:70px 35px;text-align:center}.rof-finished h2{font-size:clamp(32px,7vw,58px);margin:0 0 20px;letter-spacing:-.05em}.rof-finished>p:not(.eyebrow){color:var(--muted);line-height:1.8;margin-bottom:30px}
.rof-deal{animation:rof-deal .5s ease-out both}@keyframes rof-deal{0%{transform:perspective(900px) rotateY(-90deg) translateY(12px);opacity:.1}100%{transform:perspective(900px) rotateY(0) translateY(0);opacity:1}}
@media(max-width:1100px){.rof-stage{grid-template-columns:1fr;justify-items:center}.rof-card-info{width:100%;max-width:530px}.rof-board{grid-template-columns:minmax(0,1fr) 260px}.rof-setup{gap:28px}.rof-setup-form{padding:25px}}
@media(max-width:699px){.rof-heading{padding:28px 0;display:block}.rof-heading>p{margin-top:17px;font-size:12px}.rof-heading .eyebrow{font-size:9px}.rof-setup{grid-template-columns:1fr;gap:10px}.rof-setup-preview{padding:15px 0 25px}.rof-setup-preview .rof-card{width:190px}.rof-setup-preview .rof-face{padding:36px 22px}.rof-setup-preview .rof-corner b{font-size:22px}.rof-setup-preview .rof-corner>span{font-size:19px}.rof-preview-note{margin-top:30px}.rof-setup-form{padding:22px 18px}.rof-setup-form h2{font-size:26px}.rof-option{padding:13px 10px;gap:8px}.rof-option small{font-size:9px}.rof-board{grid-template-columns:1fr;gap:18px}.rof-card{width:min(280px,85vw)}.rof-stage{gap:26px}.rof-card-info{padding-top:0}.rof-card-info h2{font-size:31px}.rof-status{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.rof-status-box{padding:16px}.rof-status h3{font-size:17px}.rof-king-dots{gap:4px}.rof-king-dots span{width:25px;height:34px;font-size:16px}.rof-rules-grid{grid-template-columns:1fr}.rof-turn strong{font-size:18px}.rof-toolbar{font-size:10px}.rof-rule-text{font-size:14px}.rof-save-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.rof-deal{animation:none}}

#rof-app .button{overflow-wrap:anywhere}

/* The original artwork already contains the entire card, including its frame. */
.rof-design-picker{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 24px;font-size:12px;color:var(--muted)}
.rof-design-picker select{min-height:44px;max-width:100%;padding:10px 35px 10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.rof-design-picker select:focus-visible{outline:2px solid #ffac69;outline-offset:3px}
.rof-card.rof-legacy-card{padding:0;border:0;aspect-ratio:600/825;background:#111a1d;overflow:hidden}
.rof-legacy-art{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:699px){.rof-design-picker{justify-content:space-between}.rof-setup-preview .rof-legacy-card{padding:0}}

/* The default mode gives the phone screen to the card. */
.rof-mode-switch{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.rof-mode-switch a{padding:12px 16px;border:1px solid var(--line);border-radius:24px;text-decoration:none;color:var(--muted);font-size:12px;min-height:44px}
.rof-mode-switch [aria-current]{border-color:#ffac69;color:#ffac69;background:#ffac6910}
.rof-simple-setup{max-width:470px;margin:0 auto;padding:28px}.rof-simple-setup h2{font-size:30px;margin:0 0 18px}
.rof-simple-setup select,.rof-menu-content select{width:100%;min-height:44px;font:inherit;font-size:16px;color:var(--ink);background:#17121d;border:1px solid var(--line);border-radius:6px;padding:10px}
.rof-variants{margin:18px 0}.rof-variants summary{min-height:44px;cursor:pointer;font-size:13px}.rof-variants .rof-field{margin-top:12px}
.rof-simple-playing .site-header,.rof-simple-playing .game-nav-wrap,.rof-simple-playing .game-context,.rof-simple-playing .rof-heading,.rof-simple-playing .rof-mode-switch,.rof-simple-playing .rof-reference,.rof-simple-playing>footer{display:none}
.rof-simple-playing main{padding:0;max-width:none;min-height:0}
.rof-simple-playing .rof-warning:not([hidden]){position:fixed;top:55px;left:8px;right:8px;z-index:30;margin:0}
.rof-simple-game{height:100vh;height:100svh;max-width:560px;margin:auto;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
.rof-simple-header{display:flex;align-items:center;gap:12px;min-height:44px}.rof-simple-cup{font-size:15px;color:#ffca9c}.rof-simple-counter{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.rof-game-menu{position:relative}.rof-game-menu>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font-size:23px}.rof-game-menu>summary::-webkit-details-marker{display:none}
.rof-menu-content{position:absolute;right:0;top:48px;width:250px;padding:20px;border:1px solid var(--line);border-radius:10px;background:#231927;box-shadow:0 15px 40px #000a;z-index:20;display:grid;gap:14px}.rof-menu-content a{font-size:13px;min-height:44px;display:flex;align-items:center;text-decoration:none}
.rof-card-slot{display:flex;justify-content:center;align-items:center;min-height:0;container-type:size}
.rof-touch{position:relative;display:block;padding:0;border:0;margin:0;background:transparent;color:inherit;cursor:pointer;height:100%;width:auto;max-width:100%;aspect-ratio:5/7;border-radius:17px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}
@supports(width:1cqw){.rof-touch{width:min(100cqw,calc(100cqh * 5 / 7));height:auto}}
.rof-touch .rof-card{width:100%;height:100%;aspect-ratio:auto;box-shadow:none}.rof-touch img{pointer-events:none}.rof-touch:disabled{cursor:default;opacity:1}
.rof-touch:focus-visible{outline:3px solid #ffac69;outline-offset:-3px}
.rof-hold-progress{position:absolute;bottom:0;left:0;height:6px;width:0;background:#ffac69;pointer-events:none;box-shadow:0 0 14px #ffac69}
.rof-touch.is-holding .rof-hold-progress{width:100%;transition:width 1s linear}
.rof-touch.is-cooling .rof-hold-progress{width:100%;background:#8b7770;box-shadow:none}
.rof-simple-footer{text-align:center;min-width:0}.rof-hold-hint{font-size:11px;color:var(--muted);margin:6px 0;min-height:16px}
.rof-current-rule summary{cursor:pointer;min-height:36px;padding:7px;font-size:15px;font-weight:600;list-style:none}.rof-current-rule p{max-height:24svh;overflow:auto;color:#cfc3d0;font-size:13px;line-height:1.65;margin:5px 12px 10px;text-align:left}
.rof-cup-alert{padding:8px;margin:0 0 5px;border:1px solid #f2944c;border-radius:6px;background:#6c361a;color:#ffe4c4;font-size:14px;font-weight:700}
@media(prefers-reduced-motion:reduce){.rof-touch.is-holding .rof-hold-progress{transition:none}}