@import url("./notification-toast.css?v=eacc9cb8c4");
@import url("./rank-text.css?v=eacc9cb8c4");
@font-face{font-family:"MFM Pixel";src:url("./fonts/BoutiqueBitmap9x9_1.93.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"MFM Pixel";src:url("./fonts/BoutiqueBitmap9x9_Bold_1.93.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"MFM Reading";src:url("./fonts/Cubic_11.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#f1eedc;--muted:#878679;--line:#48483f;--accent:#72aa83;--danger:#c94b4b;--gold:#c8a951;--cyan:#6cbebc;--panel:#050605;--mfm-frame-shadow:5px 5px 0 #111,inset 0 0 0 2px #090909;--safe-top:env(safe-area-inset-top,0px);--safe-right:max(env(safe-area-inset-right,0px),8px);--safe-bottom:max(env(safe-area-inset-bottom,0px),8px);--safe-left:max(env(safe-area-inset-left,0px),8px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{margin:0;min-height:100%;background:#000;color:var(--ink);font-family:"MFM Pixel",monospace;font-style:normal;font-weight:400;font-synthesis:none;font-kerning:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Locale changes translated UI weight only. Natural Boutique tracking is owned
   by the shared UI roles below; components add spacing only for real data/brand needs. */
html[data-mfm-locale="zh-TW"] body{font-weight:400;font-synthesis:none}
html[data-mfm-locale="zh-TW"] body :not([data-mfm-no-i18n],[data-mfm-no-i18n] *,.mfm-english-pixel,.mfm-english-pixel *){font-family:"MFM Pixel",monospace;font-weight:400!important;font-synthesis:none}
/* These three list states share typography only. Their respective layouts stay
   with the leaderboard, room browser, and online-player rail. */
.leaderboard-empty,.room-list-empty,.online-player-empty{font-size:11pt;font-weight:400;letter-spacing:normal;line-height:1.2;text-align:center}
body{overflow-x:hidden;text-shadow:0 0 1px rgba(241,238,220,.22)}
html::before{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 .34px,rgba(0,0,0,.08) .34px .72px,rgba(0,0,0,.035) .72px 1.10px,rgba(0,0,0,0) 1.10px 2.90px,rgba(0,0,0,.035) 2.90px 3.28px,rgba(0,0,0,.08) 3.28px 3.66px,rgba(0,0,0,.14) 3.66px 4px);opacity:.82;mix-blend-mode:multiply;animation:scan .7s linear infinite}
html::after{content:"";position:fixed;inset:0;z-index:51;pointer-events:none;background:radial-gradient(ellipse 92% 82% at 50% 48%,rgba(188,226,215,.032) 0%,rgba(145,190,177,.012) 55%,transparent 82%),radial-gradient(ellipse 68% 16% at 50% -2%,rgba(246,255,252,.06) 0%,rgba(211,235,227,.018) 46%,transparent 80%),radial-gradient(ellipse 100% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.17) 100%),linear-gradient(90deg,rgba(255,92,82,.008),transparent 7% 93%,rgba(94,138,255,.008));box-shadow:inset 0 1px rgba(248,255,252,.07),inset 1px 0 rgba(183,220,210,.032),inset -1px 0 rgba(183,220,210,.029),inset 0 0 34px rgba(168,210,198,.014)}
html:has(body.ui-effects-paused)::before{animation-play-state:paused}
.ui-power-section:not(.ui-section-active),.ui-power-section:not(.ui-section-active) *,.ui-power-section:not(.ui-section-active)::before,.ui-power-section:not(.ui-section-active)::after,.ui-power-section:not(.ui-section-active) *::before,.ui-power-section:not(.ui-section-active) *::after{animation-play-state:paused!important}
html:has(body.animation-30)::before{animation-timing-function:steps(21,end)}
body.animation-30 .toast,body.animation-30 .topbar{transition-timing-function:steps(6,end)}
body.low-power .toast,body.low-power .topbar{transition-duration:80ms!important}body.no-animation .toast,body.no-animation .topbar{transition:none!important}
@keyframes scan{to{background-position:0 4px,0 0}}
button,input,select,textarea,dialog{font-family:"MFM Pixel",monospace;font-style:normal;font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,select{font-size:inherit}
button{color:inherit}
button:focus:not(:focus-visible),a.pix-btn:focus:not(:focus-visible){outline:none}
button:focus-visible,a.pix-btn:focus-visible{outline:2px solid #f1eedc;outline-offset:2px}
.pixel-box{border:var(--mfm-pixel-border-3,3px) solid var(--line);background:#000;box-shadow:var(--mfm-frame-shadow)}
.shell{width:min(1120px,calc(100% - 24px));min-height:var(--ui-viewport-height,100dvh);margin:auto;padding:12px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.topbar{height:56px;min-height:56px;padding:7px 7px 7px 14px;display:flex;align-items:center}
.lobby-header-actions{display:none;flex:0 0 auto;align-items:center;gap:6px}
body:has(#lobbyScreen:not([hidden])) .topbar .lobby-brand,body:has(#roomScreen:not([hidden])) .topbar .lobby-brand{width:auto;flex:1 1 auto}
body:has(#lobbyScreen:not([hidden])) .lobby-header-actions,body:has(#roomScreen:not([hidden])) .lobby-header-actions{display:flex}
body:has(#roomScreen:not([hidden])) .lobby-header-actions .lobby-news-btn{display:none}
.lobby-header-actions .pix-btn{height:40px;min-height:40px;padding:7px 12px;font-size:11pt}
.lobby-header-actions .lobby-news-btn{position:relative;display:flex;align-items:center;justify-content:center;border-color:var(--cyan);color:var(--cyan);text-decoration:none}
.lobby-news-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:#e14a43;box-shadow:0 0 0 1px #000;opacity:0;pointer-events:none}
.lobby-news-btn.has-unread-news .lobby-news-dot{opacity:1}

.lobby-brand{width:100%;min-width:0;display:flex;align-items:flex-end;gap:21.56px;overflow:visible}
.hex-logo{width:max-content;min-width:max-content;height:40px;flex:0 0 auto;display:flex;align-items:center;gap:21.56px;overflow:visible;filter:drop-shadow(0 0 1px rgba(255,255,255,.18))}
.hex-logo-word{position:relative;height:40px;flex:0 0 auto;min-width:max-content;display:flex;align-items:flex-start;gap:7.19px;overflow:visible;transform:translateY(3px)}
.hex-logo-letter{position:relative;height:40px;flex:0 0 auto;flex-shrink:0}
.hex-logo-dot{position:absolute;width:6.19px;height:7.14px;background:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.brand-meta{min-width:0;flex:1;display:flex;align-items:flex-end;gap:16px;min-height:40px;padding-bottom:3px}.online-link-label{width:max-content;height:40px;display:grid;grid-template-rows:repeat(2,1fr);align-items:center;color:#fff;font-size:10pt;line-height:1;letter-spacing:.16em;white-space:nowrap}
.kicker,.step{margin:0;color:var(--muted);font-size:11pt;letter-spacing:normal}
h1,h2,h3,p{margin-top:0}
h1{margin:4px 0 0;font-size:28px;letter-spacing:normal;color:#fff}
h2{margin:7px 0;font-size:22px;letter-spacing:normal;color:var(--accent)}
h3{margin:0;font-size:17px;letter-spacing:normal}
.link-state{width:10px;height:10px;min-width:10px;margin-left:auto;display:flex;align-items:center;justify-content:center;flex:none;color:#e06b66}.link-state i{display:block;width:10px;height:10px;background:currentColor;box-shadow:0 0 6px currentColor}.link-state.connecting{color:var(--gold)}.link-state.online{color:var(--accent)}
.screen{min-width:0;min-height:0}
#identityScreen{display:grid;grid-template-columns:1fr minmax(310px,460px);align-items:center;gap:46px;padding:clamp(24px,7vw,82px)}
.auth-terminal{display:grid}.auth-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(108px,1.1fr);gap:5px;margin-bottom:8px}.auth-tabs button{min-height:38px;border:var(--mfm-pixel-border-2,2px) solid #45473f;background:#000;color:var(--muted);cursor:pointer}.auth-tabs button.active{border-color:var(--gold);color:var(--gold)}.auth-locale-control{display:block;min-width:0}.auth-locale-control select{height:38px;padding:6px 8px;font-size:11pt;line-height:1;color:var(--muted);border-color:#45473f;background:#050705;text-align:center;text-align-last:center;cursor:pointer;appearance:none;-webkit-appearance:none}.auth-form{border-left-color:var(--cyan)}.auth-form label{gap:5px}.recovery-copy,.register-legal{margin:0;color:#b9b6a4;font-size:11pt;line-height:1.45}.register-legal a{color:var(--gold)}

.guest-divider{height:16px;display:flex;align-items:center;gap:8px;color:#5f6159;font-size:10pt}.guest-divider::before,.guest-divider::after{content:"";height:1px;flex:1;background:#35372f}.guest-login{color:var(--cyan)}
.screen-copy p{max-width:530px;color:#b9b6a4;line-height:1.7;font-size:12pt}
html[data-mfm-locale="zh-TW"] body .screen-copy p,html[data-mfm-locale="zh-TW"] body .recovery-copy,html[data-mfm-locale="zh-TW"] body .register-legal,html[data-mfm-locale="zh-TW"] body .dialog-copy,html[data-mfm-locale="zh-TW"] body .mfm-reading-copy{font-family:"MFM Reading","MFM Pixel",monospace;font-weight:400;font-synthesis:none;letter-spacing:normal}
.terminal-form,.room-card{display:grid;gap:13px}
.terminal-form{padding:20px;border-left:var(--mfm-pixel-border-3,3px) solid var(--accent);background:#050705}
.auth-panel{overflow:hidden;border-left:var(--mfm-pixel-border-3,3px) solid var(--accent);background:#050705}
.auth-panel>.auth-form{border-left:0;background:transparent}
label{display:grid;gap:6px;color:var(--muted);font-size:11pt;letter-spacing:normal}label small{font-size:9pt;color:#62645c}
.input-row{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:22px}
input,select{width:100%;min-width:0;padding:10px 11px;color:#fff;background:#000;border:var(--mfm-pixel-border-2,2px) solid #5d5d54;border-radius:0;outline:0}
#loginId,#registerId,#recoveryId{text-transform:uppercase}
textarea{width:100%;min-width:0;padding:10px 11px;color:#fff;background:#000;border:var(--mfm-pixel-border-2,2px) solid #5d5d54;border-radius:0;outline:0;resize:vertical}textarea:focus{border-color:#fff}
input:focus,select:focus{border-color:#fff}input:invalid:not(:placeholder-shown){border-color:var(--danger)}
.test-code-row{color:var(--gold)}#testCode{text-transform:none;letter-spacing:.12em}
.timer-setting{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px}.timer-setting #customTurnSeconds{text-align:center}.timer-setting:has(#customTurnSeconds[hidden]){grid-template-columns:1fr}
.pixel-select{position:relative;display:block;min-width:0}.pixel-select-trigger{width:100%;height:44px;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:#000;border:var(--mfm-pixel-border-2,2px) solid #5d5d54;cursor:pointer;text-align:left}.pixel-select-trigger:focus-visible,.pixel-select.open .pixel-select-trigger{outline:0;border-color:#fff}.pixel-select-trigger i{font-style:normal;font-size:10pt;color:var(--ink)}.pixel-select-menu{box-sizing:border-box;position:fixed;inset:auto;margin:0;z-index:1000;max-width:calc(100vw - 16px);padding:4px;display:grid;overflow-x:hidden;background:#000;border:var(--mfm-pixel-border-2,2px) solid #73736b;box-shadow:4px 4px 0 #151515}.pixel-select-menu button{min-height:36px;padding:7px 8px;color:var(--ink);background:#000;border:0;text-align:left;cursor:pointer;letter-spacing:normal}.pixel-select-menu button:hover,.pixel-select-menu button:focus-visible{outline:0;background:#151711;color:#fff}.pixel-select-menu button[aria-selected="true"]{color:var(--accent)}.pixel-select-menu button[aria-selected="true"]::before{content:"> ";color:var(--accent)}
.pix-btn{min-height:44px;padding:9px 13px;border:var(--mfm-pixel-border-2,2px) solid #73736b;background:#000;box-shadow:3px 3px #222;cursor:pointer;font-weight:900;letter-spacing:normal}.pix-btn:hover:not(:disabled){filter:brightness(1.3)}.pix-btn:active:not(:disabled),.pix-btn[data-mfm-keyboard-pressed]:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px #111}.pix-btn.primary{border-color:var(--accent);color:#b7dfbf}.pix-btn.danger{border-color:var(--danger);color:#dc8982}.pix-btn:disabled{opacity:.28;cursor:not-allowed}
.pix-btn.guest-login{border-color:var(--cyan);box-shadow:3px 3px #214746,0 0 8px rgba(108,190,188,.34)}
.form-error{display:block;min-height:1.25em;color:#e07770;font-size:11pt}.text-btn{padding:0;border:0;background:none;color:var(--gold);cursor:pointer;text-align:left;text-decoration:underline}
.lobby-screen{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-content:start;font-size:13pt}.lobby-screen>*{min-width:0}.lobby-screen .step{font-size:13pt}.lobby-screen h2{font-size:27px}.lobby-screen label,.lobby-screen .role-switch legend{font-size:13pt}.lobby-screen label small{font-size:11pt}.lobby-screen input,.lobby-screen .pixel-select-trigger,.lobby-screen .pixel-select-menu button,.lobby-screen .pix-btn{font-size:13pt}.identity-card{min-width:0;padding:18px;height:max-content;display:grid;gap:10px;overflow:hidden}.identity-card strong{font-size:25px;color:var(--muted);letter-spacing:0}.room-actions{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.room-card{min-width:0;padding:22px;overflow:hidden}.role-switch{margin:0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.role-switch legend{margin-bottom:6px;color:var(--muted);font-size:13pt}.role-switch label{display:block;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.role-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.role-switch span{display:block;padding:9px;border:var(--mfm-pixel-border-2,2px) solid #464840;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none}.role-switch input:checked+span{border-color:var(--gold);color:var(--gold);background:#0d0c07}
.player-rail{min-width:0;display:grid;gap:12px;align-content:start}.player-rail>*{min-width:0}.player-rail .step{font-size:12.5pt}.identity-card strong{font-size:31px}.identity-actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:8px}
.identity-actions .color-lab-link{grid-column:1/-1;text-align:center}.identity-actions .text-btn{min-width:0;font-size:12.5pt;text-decoration:none;transition:color .12s,background .12s,border-color .12s,box-shadow .12s,transform .12s}.identity-actions .text-btn:hover:not(:disabled),.identity-actions .text-btn:focus-visible{outline:0;color:#f0d772;background:#151308;border-color:var(--gold);box-shadow:0 0 8px rgba(200,169,81,.34)}.identity-actions .text-btn:active:not(:disabled):is(:hover,:focus-visible){transform:translate(1px,1px);background:#0b0a05;box-shadow:none}

.player-stats{
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr 1.08fr;
    gap:6px;
}

.player-stats span{
    min-width:0;
    min-height:60px;
    padding:4px 3px;
    border:var(--mfm-pixel-border-1,1px) solid #34362f;

    display:grid;
    grid-template-rows:auto auto;
    place-content:center;
    justify-items:center;

    gap:5px;
    text-align:center;
    overflow:hidden;
}

.player-stats small{
    color:var(--muted);
    font-size:9.5pt;
    line-height:1;
    white-space:nowrap;
}

.player-stats b{
    max-width:100%;
    color:var(--gold);
    font-size:10.5pt;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
}

/* RTG and WIN% stay compact; GAMES keeps the widest track for five digits. */
.player-stats span:nth-child(-n+2) b{
    font-size:10pt;
}
.rank-placement{color:var(--gold);font-size:9pt;line-height:1;letter-spacing:normal;white-space:nowrap}.rank-placement[data-rank-tier="bronze"]{color:#d89559}.rank-placement[data-rank-tier="silver"]{color:#c2d0d6}.rank-placement[data-rank-tier="gold"]{color:#e2b94e}.rank-placement[data-rank-tier="platinum"]{color:#8fe8dc}.rank-placement[data-rank-tier="diamond"]{color:#c8adff}.rank-placement[data-rank-tier="master"]{color:#f1f5f4}.matchmaking-card,.leaderboard-card{min-width:0;padding:16px;overflow:hidden}.matchmaking-card{display:grid;gap:10px}.matchmaking-card h2{margin:0;font-size:26px}.matchmaking-card p{min-width:0;margin:0;color:var(--muted);font-size:13pt;line-height:1.35;white-space:normal;overflow-wrap:break-word}.matchmaking-card .pix-btn{width:100%;min-width:0;min-height:44px;font-size:12pt}.leaderboard-head{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px}.leaderboard-head>*{min-width:0}.leaderboard-head .text-btn{font-size:12pt}.leaderboard-card ol{list-style:none;margin:12px 0 0;padding:0;display:grid}.leaderboard-card li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:5px;padding:7px 0;border-bottom:var(--mfm-pixel-border-1,1px) solid #272820;font-size:11pt}.leaderboard-card li b{overflow:hidden;text-overflow:ellipsis;color:#fff}.leaderboard-card li span{color:var(--gold)}.leaderboard-empty{display:block!important;color:var(--muted)}.room-roster-snap{display:contents}

.lobby-settings-dialog{width:min(520px,calc(var(--ui-viewport-width,100vw) - var(--safe-left) - var(--safe-right)));max-height:calc(var(--ui-viewport-height,100dvh) - var(--safe-top) - var(--safe-bottom));overflow:auto}.lobby-settings-dialog form,.lobby-settings-dialog [data-mfm-settings-content]{display:grid;gap:12px}.lobby-settings-dialog h2{margin:0 0 4px}.lobby-settings-dialog label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;color:var(--muted);font-size:12pt;letter-spacing:normal}.lobby-settings-dialog select{grid-column:1/-1;width:100%;height:44px;padding:8px 10px;border:var(--mfm-pixel-border-2,2px) solid #5d5d54;border-radius:0;background:#000;color:var(--ink);font-size:13pt}.lobby-settings-dialog input[type="range"]{grid-column:1/-1;width:100%}.lobby-settings-dialog .setting-toggle{min-height:44px;padding:8px 10px;border:var(--mfm-pixel-border-2,2px) solid #555;background:#030303;color:var(--ink)}.lobby-settings-dialog .setting-toggle input{width:22px;height:22px}.lobby-settings-dialog [data-mfm-settings-fullscreen]{border-color:var(--accent);color:#b7dfbf;background:#061008}

.lobby-settings-dialog :is(select,input,button):focus-visible{outline:2px solid #f1eedc;outline-offset:2px}
.lobby-settings-dialog .controls-link{display:flex;align-items:center;justify-content:center;border-color:var(--cyan);background:#061012;color:var(--cyan);box-shadow:3px 3px #1d4242;text-decoration:none}
.player-rail .step{font-size:13pt}
.player-overview-page{display:contents}
.player-rail{grid-row:auto;grid-template-rows:auto minmax(0,1fr) auto;height:100%}.leaderboard-card{min-height:0;display:flex;flex-direction:column}.leaderboard-self{grid-template-columns:1fr!important;margin:12px 0 5px!important}.leaderboard-self li{grid-template-columns:34px minmax(0,1fr) auto!important;padding:9px 6px!important;border:var(--mfm-pixel-border-2,2px) solid var(--gold)!important;background:#0c0b06}.leaderboard-card #leaderboardList{min-height:0;flex:1;align-content:start;margin-top:4px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) #000}
.leaderboard-full-link{margin-top:10px;display:flex;align-items:center;justify-content:center;color:var(--cyan);border-color:var(--cyan);font-size:12pt;text-decoration:none;text-align:center}
.support-card{border-color:#66582e;background:linear-gradient(135deg,#080702,#020202)}.support-desktop{padding:13px 16px;display:grid;justify-items:center;gap:7px;text-align:center}.support-link-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:clamp(8px,.9cqw,12px);row-gap:6px}.support-title-link{color:var(--muted);text-decoration:none;white-space:nowrap}.support-title-link:hover{color:var(--gold)}.support-title-link.support-discord-link{color:#5865f2}.support-title-link.support-discord-link:hover{color:#8b95ff}.support-title-link.support-sponsor-link{color:var(--gold)}.support-title-link.support-sponsor-link:hover{color:#f0d772}.support-link{color:var(--gold);font-size:14pt;letter-spacing:normal;text-decoration:none;overflow-wrap:anywhere}.support-link:hover{color:#f0d772}.support-legal{width:100%;margin-top:4px;padding-top:9px;border-top:var(--mfm-pixel-border-1,1px) solid #40391f;display:flex;align-items:center;justify-content:center;gap:12px;color:#77766d;font-size:9pt;letter-spacing:normal;line-height:1}.support-legal nav{display:flex;gap:10px}.support-legal a{color:#92938a;text-decoration:underline}.support-legal a:hover{color:var(--gold)}
.ranking-back{border-color:var(--gold)!important;color:var(--gold)!important;box-shadow:3px 3px #3b3218!important}
.ranking-shell{height:var(--ui-viewport-height,100dvh);overflow:hidden}.ranking-panel{overflow:hidden}.ranking-list{padding-right:14px!important;overflow-y:auto!important;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line) #000;overscroll-behavior-y:contain}
.room-card{align-content:start;grid-template-rows:auto auto auto auto minmax(0,1fr) auto}.room-card>label>input,.room-card>.pix-btn{height:44px;min-height:44px}.room-card>.pix-btn{align-self:end}#createForm>label:nth-of-type(3){align-content:start}.role-switch span{height:38px}
.room-secret-input{-webkit-text-security:disc}.room-secret-input::placeholder{-webkit-text-security:none}
.room-browser{grid-column:2;padding:18px;min-width:0;overflow:hidden}.room-browser-head{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:var(--mfm-pixel-border-2,2px) solid #3d3d36}.room-browser-head>*{min-width:0}.room-browser-head h2{margin:4px 0 0}.room-browser-actions{min-width:0;display:flex;align-items:center;gap:8px}.online-players-link{min-height:44px;padding:7px 12px;display:flex;align-items:center;justify-content:center;border-color:var(--cyan);color:var(--cyan);font-size:12pt;text-decoration:none;white-space:nowrap}.refresh-rooms{min-height:44px;padding:7px 12px}.room-list{min-width:0;display:grid}.room-entry{min-width:0;display:grid;grid-template-columns:minmax(105px,.7fr) minmax(0,1.5fr) auto;align-items:center;gap:12px;min-height:76px;padding:12px 0;border-bottom:var(--mfm-pixel-border-2,2px) solid #262720;overflow:visible}.room-entry:last-child{border-bottom:0}.room-entry-code{display:grid;gap:4px}.room-entry-code strong{color:#fff;font-size:23px;letter-spacing:normal}.room-entry-code small{color:var(--muted);font-size:11pt}.room-entry-meta{min-width:0;display:grid;gap:6px}.room-entry-meta-primary,.room-entry-meta-secondary{min-width:0;display:flex;flex-wrap:wrap;gap:6px}.room-entry-meta span{padding:5px 8px;border:var(--mfm-pixel-border-1,1px) solid #4b4d45;color:#a7a79a;font-size:11pt;white-space:nowrap}.room-entry-meta .open{color:var(--accent);border-color:#42664b}.room-entry-meta .locked{color:var(--gold);border-color:#6b5c2f}.room-entry-meta .live{color:#d47b74;border-color:#75423e}.room-entry-actions{display:flex;gap:7px}.room-entry-actions .pix-btn{min-width:82px;min-height:44px;padding:7px 10px;font-size:12pt;font-weight:700;letter-spacing:normal}.room-list-empty{min-height:0;margin:0;color:var(--muted)}.room-list-empty.error{color:var(--danger)}

.room-entry-code small{font-size:9.5pt}.room-entry-code .room-entry-state{white-space:nowrap}.room-entry-code .room-entry-state.waiting{color:var(--accent)}.room-entry-code .room-entry-state.live{color:#d47b74}.room-list-pagination{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:12px;border-top:var(--mfm-pixel-border-2,2px) solid #3d3d36}.room-list-pagination[hidden]{display:none}.room-list-pagination .pix-btn{min-width:78px;min-height:40px;padding:6px 10px}.room-list-page{display:flex;align-items:baseline;justify-content:center;gap:7px;min-width:112px;color:var(--muted);font-size:11pt}.room-list-page output{color:#fff;font:inherit}
.room-entry-meta .master{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 7px rgba(108,190,188,.24)}
.room-entry-meta .custom{color:var(--gold);border-color:var(--gold);box-shadow:0 0 7px rgba(200,169,81,.22)}
.room-entry-meta .ranked{color:var(--accent);border-color:var(--accent);box-shadow:0 0 7px rgba(114,170,131,.24)}
.guest-watch-label{color:var(--cyan);font-size:12pt;letter-spacing:normal;white-space:nowrap}.guest-exit{border-color:var(--gold);color:var(--gold)}.lobby-screen.guest-mode{grid-template-columns:1fr}.lobby-screen.guest-mode>.player-rail,.lobby-screen.guest-mode>.room-actions{display:none!important}.lobby-screen.guest-mode>.room-browser{grid-column:1}.lobby-screen.guest-mode>.room-browser{height:100%;min-height:0}.lobby-screen.guest-mode .online-players-link{display:none!important}
.lobby-screen.guest-mode .room-entry-actions{grid-template-columns:1fr}.member-tags .guest-tag{border-color:#477b79;color:var(--cyan)}
.room-entry-code{min-width:0}.room-entry-code strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-entry-code small{letter-spacing:.08em}
.room-screen{display:grid;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}.room-head{grid-column:1/-1;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.room-head h2{margin:3px 0 0;font-size:30px;color:#fff;letter-spacing:normal}.room-badges{display:flex;gap:8px}.room-badges span{padding:6px 9px;border:var(--mfm-pixel-border-2,2px) solid #57574e;color:var(--muted)}
.room-head{gap:16px}.room-title{min-width:0}.room-title-row{display:flex;align-items:baseline;gap:12px}.room-head h2{max-width:min(48vw,520px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-code-line{margin:1px 0 0;color:var(--muted);font-size:9pt;letter-spacing:.1em}.room-code-line strong{color:var(--cyan);letter-spacing:normal}.room-name-edit{margin-top:8px;display:grid;grid-template-columns:minmax(160px,320px) auto auto;gap:7px}.room-name-edit input{height:38px;padding:6px 9px}.room-name-edit .pix-btn{min-height:38px;padding:6px 9px}
.members-panel{padding:16px}.section-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;border-bottom:var(--mfm-pixel-border-2,2px) solid #3d3d36}.section-head span{color:var(--gold)}.player-head-actions{display:flex;align-items:center;gap:9px}.add-cpu{min-height:32px;padding:4px 9px;font-size:9pt;color:var(--cyan);border-color:#477b79}.add-cpu:disabled{color:#4c5652;border-color:#30342f}.watch-head{margin-top:18px}.member-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}.member{min-height:52px;padding:8px 10px;border:var(--mfm-pixel-border-2,2px) solid #34362f;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.member.self{border-color:var(--member-color,var(--cyan))}.member-main{display:flex;align-items:center;gap:9px;min-width:0}.member-dot{width:9px;height:9px;background:var(--member-color,#5e6158);box-shadow:0 0 4px color-mix(in srgb,var(--member-color,#5e6158) 60%,transparent)}.member.ready .member-dot{box-shadow:0 0 7px var(--member-color,var(--accent))}.member-name{overflow:hidden;text-overflow:ellipsis;color:var(--member-color,#f1eedc)}.member-tags{display:flex;gap:5px}.member-tags span{font-size:9pt;padding:3px 5px;border:var(--mfm-pixel-border-1,1px) solid #55584f;color:var(--muted)}
.member-tags .wait-tag{
    border-color:#8b783b;
    color:#d6b84f;
}

.member-tags .ready-tag{
    border-color:#4f8b5c;
    color:#72c982;
}

.member-tags .cpu-tag{border-color:#477b79;color:var(--cyan)}.member-tags .link-lost-tag{border-color:#8b783b;color:#c8a951}.member-tags .entering-game-tag{border-color:#477b79;color:var(--cyan)}.member-actions{display:flex;gap:5px}.member-actions button{padding:5px 7px;border:var(--mfm-pixel-border-1,1px) solid #5d5f57;background:#050505;color:#aaa;cursor:pointer}.compact .member{min-height:42px}
.invite-panel{grid-row:2;grid-column:2;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center}.invite-panel>.step{align-self:flex-start}.qr-shell{margin:13px 0 9px;padding:8px;background:#f1eedc;border:4px solid #45453d;image-rendering:pixelated}.qr-shell canvas{display:block;width:224px;height:224px;image-rendering:pixelated}.invite-panel p{width:100%;font-size:9pt;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}.invite-panel .pix-btn{width:100%}
.room-footer{grid-row:3;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.room-config{min-width:0;padding:10px;display:grid;grid-template-columns:minmax(95px,.42fr) minmax(238px,1fr) minmax(165px,185px);gap:8px;align-items:stretch}.room-controls{padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end}.room-controls>.pix-btn{width:100%;height:48px;min-height:48px;align-self:end;display:flex;align-items:center;justify-content:center}.self-status{min-width:0;display:grid;align-content:center;gap:3px}.self-status span{color:var(--muted);font-size:10pt}.self-status strong{color:var(--gold)}.color-picker,.room-timer-edit{min-width:0;min-height:61px;display:grid;grid-template-rows:auto 36px;gap:5px;align-content:center;align-items:end;justify-items:start;text-align:left}.color-picker>span{align-self:end;color:var(--muted);font-size:9pt;letter-spacing:normal}.color-picker>div{height:36px;display:flex;align-items:center;justify-content:flex-start;gap:5px;flex-wrap:nowrap}.color-choice{position:relative;width:22px;height:22px;min-width:22px;padding:0;border:var(--mfm-pixel-border-2,2px) solid #34352f;background:var(--choice);box-shadow:2px 2px #000;cursor:pointer}.color-choice:hover:not(:disabled){border-color:#fff}.color-choice.selected{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 8px var(--choice)}.color-choice.selected::after{content:none}.color-choice:disabled:not(.selected){filter:grayscale(1) brightness(.32);cursor:not-allowed}.room-timer-edit{width:100%;grid-template-columns:minmax(0,1fr) auto}.room-timer-edit label{grid-column:1/-1;grid-row:1;align-self:end;display:flex;justify-content:flex-start;gap:8px;font-size:9pt}.room-timer-input{grid-column:1;grid-row:2;min-width:0;width:100%;height:36px;display:flex;align-items:center;gap:5px}.room-timer-input input{min-width:0;height:36px;padding:5px 7px}.room-timer-edit .pix-btn{grid-column:2;grid-row:2;min-width:58px;min-height:36px;padding:5px 7px}
.toast.loading::after{content:"...";display:inline-block;vertical-align:baseline;margin-left:.15em;clip-path:inset(0 66.667% 0 0);animation:room-join-dots 1s steps(3,end) infinite}@keyframes room-join-dots{to{clip-path:inset(0 0 0 0)}}@media (prefers-reduced-motion:reduce){.toast.loading::after{animation:none;clip-path:none}}
.password-dialog{width:min(480px,calc(100% - 24px));padding:22px;color:var(--ink);background:#000}.password-dialog::backdrop{background:rgba(0,0,0,.86)}.password-dialog form,.password-dialog>section{display:grid;gap:13px}.password-dialog h2{margin:0 0 4px}.password-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.password-actions>.pix-btn{width:100%;min-width:0}.password-dialog form>.pix-btn,.password-dialog>section>.pix-btn{width:100%;min-width:0}.password-dialog .form-error{margin:0}
.custom-style-dialog textarea{box-sizing:border-box;width:100%;min-height:118px;padding:9px 10px;border:var(--mfm-pixel-border-2,2px) solid #555;background:#050505;color:var(--ink);font-size:11pt;line-height:1.35;resize:vertical;overflow-wrap:anywhere}.custom-style-dialog textarea:focus{border-color:var(--gold);outline:none}.custom-style-designer-link{display:flex;align-items:center;justify-content:center;border-color:var(--gold);color:var(--gold);text-decoration:none}
.dialog-copy{margin:0;color:#b9b6a4;font-size:12pt;line-height:1.45}.recovery-success-dialog input[readonly]{color:var(--gold);font-size:17pt;letter-spacing:.08em}
.site-legal{position:fixed;z-index:46;left:50%;bottom:5px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;color:#64655d;font-size:9pt;letter-spacing:normal;line-height:1;white-space:nowrap;text-align:center}.site-legal a{color:#85877e;text-decoration:underline}.site-legal a:hover{color:var(--gold)}
body:has(#identityScreen:not([hidden])) .shell{min-height:calc(var(--ui-viewport-height,100dvh) - 34px)}body:has(#identityScreen:not([hidden])) .site-legal{position:relative;left:auto;bottom:auto;transform:none;width:max-content;max-width:calc(100% - 16px);margin:0 auto 8px}

@media(min-width:761px) and (max-width:1100px){.room-footer{grid-template-columns:1fr}.room-config{grid-template-columns:minmax(95px,.42fr) minmax(238px,1fr) minmax(165px,185px)}.room-controls{grid-template-columns:repeat(3,1fr)}.room-controls>.pix-btn{width:100%}}
@media(min-width:761px){
  .topbar{height:56px;min-height:56px;padding:7px 7px 7px 14px;align-items:center}
  .lobby-brand{align-items:flex-end}
  .brand-meta{align-self:flex-end;align-items:flex-end;padding-bottom:0}
  html[data-screen-ratio="1:1"] .room-footer{grid-template-columns:1fr}
  html[data-screen-ratio="1:1"] .room-controls{grid-template-columns:repeat(3,1fr)}
  html[data-screen-ratio="1:1"] .room-controls>.pix-btn{width:100%}
  body:has(#lobbyScreen:not([hidden])) .shell{height:var(--ui-viewport-height,100dvh);overflow:hidden}
  body:has(#lobbyScreen:not([hidden])) .lobby-screen{height:100%;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
  .player-rail{min-height:0;overflow:hidden}.leaderboard-card #leaderboardList{padding-right:12px;scrollbar-gutter:stable;overscroll-behavior-y:contain}
  .room-browser{min-height:0;display:flex;flex-direction:column}.room-list{min-height:0;flex:1;align-content:start;padding-right:12px;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line) #000;overscroll-behavior-y:contain}.room-list-empty:not([hidden]){flex:1 1 auto;display:flex!important;align-items:center;justify-content:center;margin:0}.room-browser:has(.room-list-empty:not([hidden])) .room-list{flex:0 0 0;padding-top:0;padding-bottom:0;overflow:hidden}
}

/* Desktop status: keep the lamp beside LINK, with its right and lower edges
   aligned to the two-line ONLINE LINK label instead of the header frame. */
@media(min-width:761px){
  .auth-topbar .brand-meta{
    position:relative;
    width:max-content;
    min-width:max-content;
    min-height:40px;
    flex:0 0 auto;
    display:block;
  }
  .auth-topbar .brand-meta .link-state{
    position:absolute;
    right:calc(5px);
    bottom:5px;
    margin:0;
  }
  html[data-screen-ratio="1:1"] .auth-topbar .brand-meta{
    transform:translateY(2px);
  }
  html[data-screen-ratio="1:1"] .auth-topbar .brand-meta .link-state{
    bottom:8px;
  }
}

/* Account copy and PLAY ON are both part of the login flow. */
.screen-copy.auth-copy{text-align:left}
.screen-copy.auth-copy p{margin-inline:0}
.auth-form 

@media(min-width:761px){
  .room-controls{align-items:center}
  .room-controls>.pix-btn{align-self:center}
}

/* Keep lobby settings controls visually identical to the in-game settings. */
.lobby-settings-dialog input[type="range"]{
  height:24px;
  margin:0;
  accent-color:var(--gold);
  cursor:pointer;
}
.lobby-settings-dialog .setting-toggle input{
  margin:0;
  accent-color:var(--accent);
}

@media(min-width:761px){.player-overview-page>.identity-card{grid-row:1}.player-rail>.matchmaking-card{grid-row:2}.player-overview-page>.leaderboard-card{grid-row:3}.player-rail>.support-desktop{grid-row:4}.identity-actions{display:grid;grid-template-columns:1fr;gap:6px}.identity-actions .text-btn{width:100%;min-height:32px;padding:5px 7px;border:var(--mfm-pixel-border-1,1px) solid #41433c;justify-content:center;text-align:center}.identity-actions #logoutBtn{margin-left:0;text-align:center}}
@media(min-width:761px){.player-rail>.matchmaking-card{padding:30px 16px 22px;gap:9px}}

/* Keep the ranked action stable when FIND MATCH swaps to CANCEL SEARCH. */
.matchmaking-card{grid-template-rows:auto auto minmax(0,1fr)}
.matchmaking-card .pix-btn{grid-row:3;align-self:end}

/* Draw navigation arrows as geometry instead of a font glyph. The bundled
   pixel font has no arrow glyph, so platform font fallback looked damaged. */

@media(prefers-reduced-motion:reduce){html::before{animation:none}}

/* Keep interactive lobby UI inside camera-cutout and rounded-corner safe bounds. */


.ranking-head .pix-btn,.players-head .pix-btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none!important;text-align:center}
/* Player color collection: nine base colors and nine patterned reward skins. */
.member-dot{width:29px;height:29px;min-width:29px;box-sizing:border-box;border:var(--mfm-pixel-border-2,2px) solid color-mix(in srgb,var(--member-color,#5e6158) 70%,#333);background:var(--member-fill,var(--member-color,#5e6158));box-shadow:2px 2px #000,0 0 6px color-mix(in srgb,var(--member-color,#5e6158) 55%,transparent)}
.room-config{grid-template-columns:95px minmax(0,1fr) 185px;gap:7px}
.color-picker{justify-self:start;justify-items:start;text-align:left}
.color-picker>span{width:100%;text-align:left}
.color-picker>div{width:100%;height:36px;display:grid;grid-template-columns:repeat(18,29px);align-items:center;justify-content:start;gap:2px}
.color-choice{width:29px;height:29px;min-width:29px;background:var(--choice-fill,var(--choice));background-size:auto}
.color-choice.selected{box-shadow:0 0 0 2px #000,0 0 8px var(--choice)}

/* Screen-ratio presets constrain only the main UI frame. Fixed CRT overlays,
   noise and scan lines remain attached to the full browser viewport. */
html:not([data-screen-ratio="stretch"]) .shell{
  width:var(--layout-viewport-width,100%);
  height:var(--layout-viewport-height,var(--ui-viewport-height,100dvh));
  min-height:0!important;
  margin-top:var(--layout-viewport-top,0);
  margin-bottom:0;
}
html:not([data-screen-ratio="stretch"]) body:has(#identityScreen:not([hidden])) .shell{overflow:auto}
html:not([data-screen-ratio="stretch"]) body:has(#lobbyScreen:not([hidden])) .shell,
html:not([data-screen-ratio="stretch"]) body:has(#roomScreen:not([hidden])) .shell{overflow:hidden}
html[data-screen-ratio="stretch"] .shell{width:100%;max-width:none}

/* Room controls: names lock at creation, so the footer is dedicated to the
   playable color collection and the turn timer. */
.room-config{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  justify-items:start;
  gap:0;
  padding:12px 14px;
}
.color-picker{
  width:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto;
  gap:6px;
  justify-items:start;
  align-content:start;
  text-align:left;
}
.color-picker>div{
  width:100%;
  height:auto;
  display:grid;
  grid-template-columns:repeat(19,36px);
  grid-auto-rows:36px;
  align-items:center;
  justify-content:start;
  gap:5px;
}
.color-choice,.color-add-placeholder{
  box-sizing:border-box;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
}
.color-add-placeholder{
  border:var(--mfm-pixel-border-2,2px) dashed #66685f;
  background:#080808;
  box-shadow:2px 2px #000;
  color:#9b9d94;
  font:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.color-add-placeholder:hover,.color-add-placeholder:focus-visible{
  border-color:var(--gold);
  color:var(--gold);
}
.room-timer-edit{
  width:min(440px,100%);
  min-height:0;
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 68px;
  grid-template-rows:auto 36px;
  gap:6px 8px;
  justify-self:start;
  justify-items:start;
  align-content:start;
  text-align:left;
}
.room-timer-edit label{width:100%;justify-content:flex-start}
.room-timer-input,.room-timer-input input{height:36px}
.room-timer-input input{text-align:center}
.room-timer-edit .pix-btn{width:68px;height:36px;min-height:36px}

/* Desktop: keep the color collection, future-color slot and compact timer
   controls on one line, with TIMER immediately after the plus slot. */
@media(min-width:761px){
  .room-config{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    align-items:flex-end;
    column-gap:3px;
    row-gap:5px;
    padding-block:12px;
  }
  .color-picker{display:contents}
  .color-picker>span{
    order:-1;
    flex:0 0 100%;
    position:static;
  }
  .color-picker>div{display:contents}
  .color-choice{
    order:0;
    width:34px;
    height:34px;
    min-width:34px;
  }
  .room-timer-edit{
    position:relative;
    order:2;
    flex:0 0 126px;
    width:126px;
    margin:0 0 0 10px;
    grid-template-columns:minmax(0,1fr) 48px;
    grid-template-rows:34px;
    gap:3px;
  }
  .room-timer-edit label{
    position:absolute;
    left:0;
    bottom:calc(100% + 5px);
    width:100%;
  }
  .room-timer-input{grid-row:1}
  .room-timer-edit .pix-btn{grid-row:1}
  .room-timer-input,.room-timer-input input,
  .room-timer-edit .pix-btn{
    height:34px;
    min-height:34px;
  }
  .room-timer-edit .pix-btn{width:48px;min-width:48px;padding-inline:4px}
  .color-add-placeholder{
    order:1;
    width:34px;
    height:34px;
    min-width:34px;
  }
}
@media(min-width:761px) and (max-width:900px){
  .color-choice,.color-add-placeholder{
    width:34px;
    height:34px;
    min-width:34px;
  }
  .room-timer-edit{
    flex-basis:104px;
    width:104px;
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-rows:34px;
    margin-left:6px;
  }
  .room-timer-input,.room-timer-input input,
  .room-timer-edit .pix-btn{
    height:34px;
    min-height:34px;
  }
  .room-timer-edit .pix-btn{width:44px;min-width:44px}
}

/* Computed season-rank badge and rank-colored player IDs. */
.ranked-heading{min-width:0}.ranked-heading-copy{position:relative;min-width:0;padding-right:84px;display:grid;gap:10px}.ranked-heading-copy>.step{line-height:normal}.ranked-heading-rank{min-width:0}.ranked-heading-rank-copy{min-width:0;display:grid;gap:3px}.ranked-heading-rank-copy h2{margin:0}.rank-badge{position:absolute;top:calc(50% - 36px - var(--badge-effect-outset,0px));right:calc(2px - var(--badge-effect-outset,0px));width:calc(72px * var(--badge-effect-scale-x,1));height:calc(72px * var(--badge-effect-scale-y,1));transform:none;image-rendering:auto}
/* === MFM SEASON TOP RATING LIST ===
   Compact lobby list: rank + Player ID + RTG. Rating is the only ranking
   strength value; W/L/GAMES/WIN% remain detailed statistics on FULL RANK. */
.player-history-menu{position:fixed;inset:auto;margin:0;min-width:172px;padding:5px;width:max-content;max-width:240px;display:grid;gap:4px;background:#000}.player-history-menu:not(:popover-open){display:none}
.player-history-menu a{display:flex;align-items:center;min-height:36px;padding:6px 9px;border:1px solid #555;background:#080808;color:var(--ink);font:inherit;font-size:13pt;line-height:1;text-align:left;text-decoration:none;cursor:pointer}
.player-history-menu a:hover,.player-history-menu a:focus-visible{border-color:var(--gold);color:var(--gold);outline:0}
html[data-desktop-scale-mode="transform"] .player-history-menu{transform:scale(var(--mfm-desktop-applied-scale,1));transform-origin:top left}
.leaderboard-card{--season-top-scroll-reserve:var(--mfm-scroll-content-gutter-wide);--season-top-self-rating-offset:8px;--season-top-rating-width:5ch}
.leaderboard-card .leaderboard-self,
.leaderboard-card #leaderboardList{
  width:100%;
}
.leaderboard-card .leaderboard-self{
  margin:8px 0 4px!important;
  padding-right:calc(var(--season-top-scroll-reserve) - var(--season-top-self-rating-offset))!important;
}
.leaderboard-card .leaderboard-self li,
.leaderboard-card #leaderboardList li:not(.leaderboard-empty){
  min-width:0;
  min-height:32px;
  display:grid;
  grid-template-columns:26px minmax(12ch,1fr) var(--season-top-rating-width)!important;
  align-items:center;
  gap:0;
  border-left:0!important;
  border-right:0!important;
  font-size:11pt;
}
.leaderboard-card .leaderboard-self li{
  padding:6px 0 8px!important;
  border-top:0!important;
  border-bottom:var(--mfm-pixel-border-1,1px) solid var(--gold)!important;
  background:transparent!important;
}
.leaderboard-card #leaderboardList li:not(.leaderboard-empty){
  padding:6px 0!important;
  border-top:0;
  border-bottom:var(--mfm-pixel-border-1,1px) solid #272820;
}
.leaderboard-card .leaderboard-self li i,
.leaderboard-card #leaderboardList li i{
  min-width:0;
  font-style:normal;
  line-height:1;
  text-align:left;
  white-space:nowrap;
}
.leaderboard-card .leaderboard-self li b,
.leaderboard-card #leaderboardList li b{
  min-width:12ch;
  align-self:center;
  overflow:visible;
  line-height:1;
  text-align:left;
  text-overflow:clip;
  white-space:nowrap;
}
.leaderboard-card .leaderboard-rating{
  width:var(--season-top-rating-width);
  align-self:center;
  justify-self:end;
  color:var(--gold);
  font-size:10pt;
  font-weight:400;
  line-height:1;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.leaderboard-card #leaderboardList{
  /* Rankings always begin directly below the heading/self row. */
  align-content:start!important;
  justify-content:stretch!important;
}
.leaderboard-self .self-rank b{
  color:var(--muted);
}
/* === 手機版 Ranked 卡片配置 === */

/* === MFM room footer auto-stack === */
@media (min-width:761px){
  /*
    不再猜 1180px / 1240px breakpoint。
    JS 直接偵測 ROOM TIMER 是否已經掉到 PLAYER COLOR 下一排。
  */
  .room-footer.room-controls-below{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:stretch!important;
  }

  .room-footer.room-controls-below>.room-config{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
  }

  .room-footer.room-controls-below>.room-controls{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
    align-items:stretch!important;
  }

  .room-footer.room-controls-below>.room-controls>.pix-btn{
    width:100%!important;
  }
}
/* === /MFM room footer auto-stack === */

/* === MFM room list tags single row === */
@media (min-width:761px){
  .room-entry-meta{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    min-width:0!important;
    white-space:nowrap!important;
  }

  .room-entry-meta>span{
    flex:0 0 auto!important;
  }
}
/* === /MFM room list tags single row === */

/* === MFM login center content only === */
@media (min-width:761px){
  /*
    外框維持原本完整寬度。
    只把 PLAYER ACCOUNT + LOGIN FORM 兩個內容區塊集中到中央。
  */
  #identityScreen{
    width:auto!important;
    max-width:none!important;
    margin-inline:0!important;
    grid-template-columns:minmax(300px,420px) minmax(360px,450px)!important;
    justify-content:center!important;
    align-items:center!important;
    column-gap:48px!important;
    padding:clamp(24px,5vw,72px)!important;
  }

  #identityScreen>.screen-copy{
    width:100%!important;
    max-width:420px!important;
    justify-self:end!important;
  }

  #identityScreen>.terminal-form{
    width:100%!important;
    max-width:450px!important;
    justify-self:start!important;
  }
}

@media (min-width:761px) and (max-width:980px){
  #identityScreen{
    grid-template-columns:minmax(260px,1fr) minmax(340px,1.08fr)!important;
    column-gap:30px!important;
    padding:clamp(20px,3vw,40px)!important;
  }
}
/* === /MFM login center content only === */

/* Keep pointer hover distinct from the persistent selected player color. */
.color-choice:hover:not(:disabled):not(.selected){
  border-color:#fff;
}
.color-choice.selected{
  border-color:#fff;
  outline:0;
  box-shadow:0 0 8px var(--choice);
}