/* Keep the MARVEL RIVALS image and both placements centered on narrow screens. */
@media(max-width:700px){.marvel-card .rank-card-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0;padding:17px 14px}.marvel-card .rank-game{text-align:center;width:100%;white-space:normal}.marvel-card .rank-card-top .marvel-icon{display:block;width:min(100%,340px);max-width:100%;height:auto;aspect-ratio:635/214;object-fit:contain;object-position:center;margin:0 auto}.marvel-card .rank-card-body{text-align:center}.marvel-card .marvel-placement{display:flex;align-items:baseline;justify-content:center;flex-wrap:nowrap;gap:5px;white-space:nowrap;font-size:clamp(15px,4vw,20px)!important}.marvel-card .marvel-placement strong{font-size:inherit}.marvel-card .marvel-placement .rank-side{display:inline;white-space:nowrap;margin-left:4px;font-size:inherit}}
.notification-sound-controls{flex-wrap:wrap}.notification-sound-controls select{flex:1 1 130px;min-width:0;padding:8px;border:1px solid #5a606b;border-radius:5px;background:#202329;color:#f3f4f6;font-size:13px}.notification-sound-controls button{flex:1 1 100px}
/* A quiet deep-sea entrance, with the rules always within reach. */
body.rules-open{overflow:hidden}
.site-rules-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#03121c;color:#edf8fc;overflow:hidden;overscroll-behavior:contain;isolation:isolate}
.site-rules-dialog::backdrop{background:#03121c}
.rules-ocean{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% -20%,#1a5b72 0,transparent 65%),radial-gradient(ellipse at 90% 85%,#103748 0,transparent 55%),#03121c}
.rules-light{position:absolute;inset:-30%;background:conic-gradient(from 156deg at 45% 0%,transparent 0deg,#77d9f50b 12deg,transparent 20deg,#77d9f511 31deg,transparent 42deg);filter:blur(24px);animation:rules-light 18s ease-in-out infinite alternate}
.rules-school{position:absolute;max-width:none!important;height:auto;filter:brightness(0) invert(1);will-change:transform;pointer-events:none}
.rules-school-near{width:1100px;width:max(900px,90vw);left:-20%;top:25%;opacity:.11;animation:rules-swim 48s linear infinite;animation-delay:-14s}
.rules-school-far{width:850px;width:max(650px,65vw);left:-35%;top:-8%;opacity:.045;animation:rules-swim 70s linear infinite;animation-delay:-43s}
.rules-grain{position:absolute;inset:0;background:linear-gradient(transparent 60%,#010c15a6);box-shadow:inset 0 0 140px #01090da6}
.rules-stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom));box-sizing:border-box}
.rules-masthead{width:min(100%,920px);display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none}
.rules-wordmark{font-family:Georgia,'Times New Roman',serif;font-size:24px;letter-spacing:.02em;color:#fff;text-shadow:0 0 24px #76d9f480}
.rules-wordmark>span{color:#8bc6d7;font-size:.85em}
.rules-motion{border:1px solid #7ab8c236;background:#081e2999;color:#b9d4df;border-radius:30px;min-height:44px;padding:8px 14px;font-size:14px;cursor:pointer}
.rules-motion:hover{background:#153647;color:#fff}
.site-rules-inner{width:min(100%,920px);min-height:0;display:flex;flex-direction:column;border:1px solid #74c3dd45;border-top:1px solid #a7e9fa9c;border-radius:18px;background:linear-gradient(145deg,#122a38e8,#081b29ed);box-shadow:0 24px 100px #0007,0 0 65px #3ebdd013,inset 0 1px 0 #bdf1ff18;overflow:hidden;animation:rules-enter 1.2s both}
.rules-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#426c80 transparent;padding:32px 36px 26px}
.rules-heading{text-align:center;margin-bottom:27px}
.site-rules-eyebrow{font-size:14px;letter-spacing:.17em;font-weight:700;color:#b8e5f3;margin:0 0 16px}
.site-rules-eyebrow span{color:#79a8b9;font-size:12px;letter-spacing:.15em}
.site-rules-dialog h2{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:.05em;line-height:1.5;margin:0 0 14px;text-shadow:0 0 28px #88dbf24a}
.site-rules-lead{color:#b4cbd5;font-size:16px;line-height:1.8;margin:0}
.site-rules-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;counter-reset:rule;padding:0;margin:0}
.site-rules-list li{counter-increment:rule;display:grid;grid-template-columns:25px minmax(0,1fr);gap:12px;padding:20px 18px;border:1px solid #78b8cf24;border-radius:9px;background:#0717226b;align-items:start}
.site-rules-list li::before{content:counter(rule,decimal-leading-zero);font-size:14px;font-family:Georgia,serif;line-height:1.9;color:#78d1e8}
.site-rules-list h3{font-size:16px;font-weight:700;line-height:1.6;color:#def4fb;margin:0 0 7px}
.site-rules-list p{font-size:16px;line-height:1.8;color:#adc3cf;margin:0;overflow-wrap:anywhere}
.site-rules-list p+p{margin-top:12px}
.rules-afterword{margin-top:18px;padding:22px 24px;border:1px solid #78b8cf24;border-radius:9px;background:#0717226b;color:#bed3dc;font-size:15px;line-height:1.9}
.rules-afterword p{margin:0 0 12px}.rules-afterword p:last-child{margin-bottom:0}.rules-afterword strong{color:#eaf9fd}.rules-afterword h3{font-size:17px;color:#def4fb;margin:22px 0 8px}
.site-rules-lead strong{display:inline-block;color:#e8f8fc;font-weight:700;margin-bottom:8px}
.rules-intro{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#01070c;opacity:1;visibility:visible;transition:opacity .7s ease,visibility .7s ease;pointer-events:auto}
.rules-intro::before{content:"";position:absolute;inset:0;background:url('./legion-fish-bg.png') center/contain no-repeat;filter:brightness(0) invert(1);opacity:.14;animation:rules-intro-school 3.4s ease-out both;pointer-events:none}
.rules-intro.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.rules-intro-content{text-align:center;padding:24px}
.rules-intro-logo{display:block;color:#f4fdff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(31px,8vw,68px);letter-spacing:.04em;text-shadow:0 0 30px #79cfe8a8;opacity:0;transform:translateY(14px);animation:rules-intro-reveal .8s 1.75s ease forwards}
.rules-intro-logo span{color:#82bfce;font-size:.72em}
.rules-intro-content p{margin:22px 0 0;color:#d2e8ef;font-size:clamp(16px,3.2vw,24px);letter-spacing:.12em;line-height:1.6;opacity:0;transform:translateY(12px);animation:rules-intro-reveal .8s 2.8s ease forwards}
.rules-skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));border:1px solid #7ab8c266;background:#081e29bf;color:#d5eaf0;border-radius:28px;min-height:44px;padding:9px 18px;font-size:14px;cursor:pointer}
.rules-skip:hover{background:#153647}.rules-intro .rules-school{opacity:.22}
@keyframes rules-intro-reveal{to{opacity:1;transform:none}}
@keyframes rules-intro-school{from{transform:translateX(-60%) scale(.9);opacity:0}30%{opacity:.16}to{transform:translateX(34%) scale(1.08);opacity:.08}}
.rules-footer{flex:none;display:flex;align-items:center;gap:24px;justify-content:space-between;padding:20px 36px;border-top:1px solid #79b6cc30;background:#081925}
.site-rules-check{display:flex;gap:12px;align-items:center;min-width:0;font-size:14px;line-height:1.7;color:#cbdee7;cursor:pointer}
.site-rules-check input{width:22px;height:22px;flex:none;margin:0;accent-color:#75dbeb}
.rules-mobile-break{display:none}
.site-rules-continue{display:flex;align-items:center;justify-content:space-between;gap:26px;flex:none;min-height:50px;border:1px solid #a6e4f3;border-radius:5px;padding:12px 20px;color:#052033;background:linear-gradient(115deg,#a2e6ee,#69b9d8);font-size:15px;font-weight:800;box-shadow:0 0 25px #58bed22b;cursor:pointer;transition:opacity .2s,box-shadow .2s}
.site-rules-continue:hover:not(:disabled){box-shadow:0 0 32px #58bed263}
.site-rules-continue:disabled{background:#18303e;border-color:#446271;color:#859ba8;box-shadow:none;cursor:not-allowed}
.site-rules-dialog :focus-visible{outline:2px solid #a6e4f3;outline-offset:4px}
.rules-bottom{margin:0;font-size:11px;letter-spacing:.15em;color:#7e9cab;flex:none;text-align:center}.rules-bottom span{margin:0 8px;color:#5d8899}
.rules-paused .rules-ocean *{animation-play-state:paused!important}
@keyframes rules-swim{from{transform:translate3d(-65vw,6vh,0)}to{transform:translate3d(125vw,-16vh,0)}}
@keyframes rules-light{to{transform:rotate(12deg) translateX(3%)}}
@keyframes rules-enter{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(max-width:600px){.rules-stage{gap:14px;padding:14px 14px max(14px,env(safe-area-inset-bottom))}.rules-masthead{gap:10px}.rules-wordmark{font-size:21px}.rules-motion{font-size:12px;padding:8px 11px}.site-rules-inner{width:100%;border-radius:12px;flex:1}.rules-scroll{padding:25px 18px 18px}.rules-heading{margin-bottom:22px}.site-rules-eyebrow{font-size:13px;letter-spacing:.08em;margin-bottom:13px}.site-rules-eyebrow span{font-size:11px}.site-rules-lead{font-size:14px}.site-rules-list{grid-template-columns:1fr;gap:10px}.site-rules-list li{padding:15px 13px;gap:8px}.rules-footer{display:flex;flex-direction:column;align-items:stretch;gap:13px;padding:15px 18px}.site-rules-check{font-size:13px;line-height:1.6}.site-rules-continue{width:100%;min-height:48px;justify-content:center}.site-rules-continue>span:last-child{margin-left:auto}.site-rules-continue>span:first-child{margin-left:auto}.rules-bottom{display:none}.rules-school-near{top:35%;opacity:.1}.rules-school-far{top:5%;opacity:.065}}
@media(max-height:520px) and (min-width:601px){.rules-stage{gap:10px;padding:12px 20px}.rules-bottom{display:none}.rules-scroll{padding:20px}.rules-footer{padding:12px 20px}}
@media(prefers-reduced-motion:reduce){.rules-ocean *,.site-rules-inner{animation:none!important}.rules-school-near{transform:translateX(0)}.rules-motion{display:none}}
@media(prefers-reduced-motion:reduce){.rules-intro{display:none}.rules-intro-content{animation:none}}
.site-rules-dialog .rules-heading{display:block;position:static;padding:0;border:0;background:none;box-shadow:none;text-align:center}