@charset "UTF-8";
.mon-page .server-roulette [hidden]{display:none!important}

.mon-page .server-roulette{--server-roulette-card-width:208px;--server-roulette-gap:12px;min-width:0;margin:0 0 34px;padding:20px 22px 0;border:1px solid #57432b;border-radius:12px;background:radial-gradient(ellipse at 50% 0,#f5a6320b,transparent 70%),linear-gradient(120deg,#20252b,#191d22);overflow:hidden}
.mon-page .server-roulette-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.mon-page .server-roulette-heading .mon-eyebrow{font-size:9px;margin-bottom:5px;letter-spacing:.15em}
.mon-page .server-roulette-heading h2{font-size:22px;margin:0;line-height:1.25}
.mon-page .server-roulette-heading h2 span{color:var(--mon-accent);white-space:nowrap}
.mon-page .server-roulette-pool{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11px;color:var(--mon-muted);white-space:nowrap;padding:5px 8px;border:1px solid #3b4449;border-radius:5px;background:#151b1f}
.mon-page .server-roulette-pool i{width:5px;height:5px;border-radius:50%;background:var(--mon-green);margin-right:2px}
.mon-page .server-roulette-stage{position:relative;min-width:0}
.mon-page .server-roulette-viewport{overflow:hidden;min-width:0;height:170px;border:1px solid #3e3b34;border-radius:8px;background:#11161b;position:relative}
.mon-page .server-roulette-viewport::before,.mon-page .server-roulette-viewport::after{content:"";position:absolute;inset-block:0;width:34px;z-index:2;pointer-events:none}
.mon-page .server-roulette-viewport::before{left:0;background:linear-gradient(90deg,#11161b,transparent)}
.mon-page .server-roulette-viewport::after{right:0;background:linear-gradient(-90deg,#11161b,transparent)}
.mon-page .server-roulette-pointer{position:absolute;left:50%;top:-6px;z-index:4;width:16px;height:14px;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%);background:var(--mon-accent);filter:drop-shadow(0 1px 4px #f5a63280);pointer-events:none}
.mon-page .server-roulette-track{display:flex;gap:var(--server-roulette-gap);align-items:stretch;width:max-content;height:100%;padding:12px 0;transform:translate3d(0,0,0)}
.mon-page .server-roulette[data-state=spinning] .server-roulette-track{will-change:transform}
.mon-page .server-roulette-card{position:relative;flex:0 0 var(--server-roulette-card-width);width:var(--server-roulette-card-width);min-width:0;height:144px;border:1px solid #3a424d;border-radius:7px;background:#20262d;overflow:hidden;opacity:.65;transition:opacity .15s,border-color .15s,box-shadow .15s}
.mon-page .server-roulette-card.is-current{border-color:#d89534;opacity:1;box-shadow:0 0 0 1px #f5a63225,0 4px 16px #0003}
.mon-page .server-roulette-card-media{height:77px;position:relative;background:#252b32;overflow:hidden}
.mon-page .server-roulette-card-media img{display:block;width:100%;height:100%;object-fit:cover;opacity:.75}
.mon-page .server-roulette-card-map{position:absolute;inset:auto 0 0;padding:8px 9px 4px;background:linear-gradient(transparent,#10151be8);color:#e7eaf0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-page .server-roulette-card-body{padding:7px 9px}
.mon-page .server-roulette-card h3{margin:0 0 4px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-page .server-roulette-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;line-height:1.4;color:#a8b4c3}
.mon-page .server-roulette-card-online{display:inline-flex;align-items:center;gap:4px;color:var(--mon-green)}
.mon-page .server-roulette-card-online::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.mon-page .server-roulette-card-players{font-variant-numeric:tabular-nums}
.mon-page .server-roulette-card-players strong{color:#f1f2f4;font-weight:650}
.mon-page .server-roulette-controls{display:flex;align-items:center;gap:16px;padding:14px 0}
.mon-page .server-roulette-spin{min-width:137px;min-height:39px;padding:8px 15px;gap:9px;flex:none;font-size:12px}
.mon-page .server-roulette-controls p{margin:0;font-size:11px;line-height:1.55;color:var(--mon-muted)}
.mon-page .server-roulette-result{margin-inline:-22px;padding:12px 22px;min-height:69px;border-top:1px solid #373c42;background:#14191e66}
.mon-page .server-roulette-result-placeholder{margin:8px 0;font-size:12px;line-height:1.5;color:#929eae}
.mon-page .server-roulette-result-content{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mon-page .server-roulette-chosen{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;min-width:0}
.mon-page .server-roulette-result-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--mon-accent);grid-row:1 / 3;line-height:1.6}
.mon-page .server-roulette-chosen>strong{font-size:12px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.mon-page .server-roulette-copy{display:inline-flex;align-items:center;justify-self:start;gap:6px;max-width:100%;padding:0;border:0;color:var(--mon-muted);background:none;font-size:10px;line-height:1.5;text-align:left}
.mon-page .server-roulette-copy:hover{color:var(--mon-accent)}
.mon-page .server-roulette-result-actions{display:flex;align-items:center;gap:14px;flex:none}
.mon-page .server-roulette-result-actions .mon-button{font-size:11px;min-height:33px;gap:8px}
.mon-page .server-roulette-details{color:#b6c0ce;font-size:11px;white-space:nowrap}
.mon-page .server-roulette-empty{display:flex;align-items:center;justify-content:center;height:170px;padding:20px;margin:0;color:var(--mon-muted);font-size:13px;text-align:center;border:1px dashed #46505b;border-radius:8px;background:#14191e}
.mon-page .server-roulette[data-state=empty] .server-roulette-pointer{display:none}
.mon-page .server-roulette-noscript{font-size:12px;color:var(--mon-muted);margin-top:12px}
@container monitoring (max-width:690px){.mon-page .server-roulette-heading h2{font-size:20px}.mon-page .server-roulette-result-content{align-items:flex-start;flex-direction:column;gap:10px}.mon-page .server-roulette-result-actions{width:100%;justify-content:space-between}.mon-page .server-roulette-chosen{width:100%}.mon-page .server-roulette-result-label{grid-row:auto;grid-column:1 / -1}.mon-page .server-roulette-chosen>strong{grid-column:1 / -1}.mon-page .server-roulette-copy{grid-column:1 / -1}}
@container monitoring (max-width:440px){.mon-page .server-roulette{--server-roulette-card-width:188px;padding:17px 14px 0}.mon-page .server-roulette-heading{gap:8px;margin-bottom:15px}.mon-page .server-roulette-heading h2{font-size:18px;max-width:190px}.mon-page .server-roulette-heading .mon-eyebrow{font-size:8px}.mon-page .server-roulette-pool{font-size:10px;padding:4px 6px}.mon-page .server-roulette-controls{gap:10px;align-items:flex-start}.mon-page .server-roulette-spin{min-width:123px}.mon-page .server-roulette-controls p{font-size:10px;margin-top:4px}.mon-page .server-roulette-result{margin-inline:-14px;padding:12px 14px}.mon-page .server-roulette-result-placeholder{font-size:11px;margin:2px 0}}
@media(prefers-reduced-motion:reduce){.mon-page .server-roulette *{transition:none!important;scroll-behavior:auto!important}}
