/* Rhythm Slide UI — deliberately game-like, not a component-library skin */
:root{
  --rh-bg:#0a0a0d;
  --rh-ink:#f1efe9;
  --rh-dim:#8d8b88;
  --rh-panel:#111116;
  --rh-panel2:#17171d;
  --rh-line:#313138;
  --rh-line-soft:#222229;
  --rh-accent:#a8acff;
  --rh-accent2:#78dfc2;
  --rh-warn:#f0c66a;
  --rh-danger:#ff7e8a;
}
*{box-sizing:border-box}
html{background:var(--rh-bg)!important}
body{
  margin:0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    #0a0a0d!important;
  color:var(--rh-ink)!important;
  font-family:"Trebuchet MS",Verdana,Arial,sans-serif!important;
  letter-spacing:0!important;
}
body:before{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit!important}
::selection{background:#b7b9ff;color:#0b0b0e}

/* global geometry: square, clipped, functional */
.shell,.wrap{width:min(1100px,calc(100% - 30px))!important;margin-inline:auto!important}
.card,.panel,.setting-box,.account-panel,.profile-stat,.profile-chart,.notification-panel,.notification-item,.rs-chart-preview,.rs-preflight-card,.settings,.level-card{
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  background:#111116!important;
  border:1px solid #2b2b32!important;
}
.btn,.back,.quick a,.tab,.account-btn,.tiny-btn,.mainplay,.online,.play,.mode,.pill,.sidebtn,.chip{
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .09s,color .09s,border-color .09s!important;
}
.btn,.back,.quick a,.tab,.tiny-btn,.pill,.sidebtn,.chip{
  background:#121217!important;
  color:#deddd8!important;
  border:1px solid #303038!important;
  font-weight:700!important;
}
.btn:hover,.back:hover,.quick a:hover,.tab:hover,.tiny-btn:hover,.pill:hover,.sidebtn:hover,.chip:hover{
  background:#1d1d23!important;
  border-color:#5a5a66!important;
  color:#fff!important;
}
.btn.primary,.tab.active,.mode.active,.account-btn,.play,.mainplay,.sidebtn.active,.chip.active{
  background:#eceae3!important;
  color:#0b0b0e!important;
  border-color:#eceae3!important;
}
.btn.danger{color:#ff9aa2!important;background:#1a1114!important;border-color:#5a2b32!important}

.field,input[type=text],input[type=number],input[type=url],input[type=email],input[type=password],select,textarea{
  border-radius:0!important;
  box-shadow:none!important;
  background:#09090c!important;
  color:#f2f0ea!important;
  border:0!important;
  border-bottom:1px solid #45454f!important;
  outline:none!important;
}
.field:focus,input:focus,select:focus,textarea:focus{border-bottom-color:#c1c3ff!important;background:#0f0f13!important}
.tag,.status-pill,.rs-chart-meta span{
  border-radius:0!important;
  background:transparent!important;
  border:0!important;
  border-left:2px solid #6e7084!important;
  color:#aaa9a4!important;
  padding:1px 6px!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
}
.muted,.sub,.section-help,.account-note,.profile-user,.profile-meta,.profile-chart-sub,.card p,.hero p{color:var(--rh-dim)!important}
.brand,.logo,h1,h2,h3,h4{font-family:"Trebuchet MS",Verdana,Arial,sans-serif!important}
h1,h2,h3,h4{letter-spacing:-.045em!important}

/* navigation: behaves like a game header, not a dashboard nav */
.top{
  border:0!important;
  border-bottom:1px solid #2a2a30!important;
  padding:14px 0 10px!important;
  margin-bottom:18px!important;
  min-height:46px!important;
}
.brand{
  font-weight:900!important;
  font-size:15px!important;
  letter-spacing:-.04em!important;
  position:relative;
  padding-left:14px!important;
}
.brand:before{content:"";position:absolute;left:0;top:2px;width:6px;height:15px;background:#b6b8ff;transform:skew(-13deg)}
.nav{gap:0!important}
.nav .btn,.top .back,.top .pill{
  border:0!important;
  border-left:1px solid #303037!important;
  background:transparent!important;
  padding:5px 12px!important;
  min-height:auto!important;
  font-size:12px!important;
}
.nav .btn:hover,.top .back:hover,.top .pill:hover{background:#17171c!important}

/* HOME — a title screen, not a landing page */
body:has(.home){display:block!important;min-height:100vh!important;overflow-x:hidden}
.home{
  width:min(790px,calc(100% - 30px))!important;
  margin:0 auto!important;
  text-align:left!important;
  padding:17vh 0 70px!important;
  position:relative!important;
}
.home:before{
  content:"";position:absolute;left:-90px;top:12vh;width:210px;height:5px;
  background:#afb1ff;transform:rotate(-7deg);opacity:.7
}
.home .logo{
  margin:0 0 5px!important;
  font-size:clamp(52px,9vw,92px)!important;
  line-height:.78!important;
  font-weight:900!important;
  letter-spacing:-.085em!important;
  transform:skew(-4deg)!important;
  transform-origin:left center;
}
.home .sub{
  margin:15px 0 30px!important;
  font-size:11px!important;
  letter-spacing:.26em!important;
  color:#74737a!important;
  text-transform:uppercase!important;
}
.home .mode-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  width:min(620px,100%)!important;
  margin:0!important;
}
.home .mainplay,.home .online{
  width:100%!important;margin:0!important;min-height:68px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  padding:0 24px!important;font-size:20px!important;font-weight:900!important;
  letter-spacing:-.02em!important;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)!important;
}
.home .mainplay{background:#efede7!important;color:#0b0b0e!important;border:0!important}
.home .online{background:#16161c!important;color:#f2f0ea!important;border:1px solid #393941!important}
.home .mainplay:after,.home .online:after{content:"›";margin-left:auto;font-size:27px;font-weight:400}
.home .quick{
  display:flex!important;gap:0!important;margin:16px 0 0!important;max-width:none!important;width:min(620px,100%)!important;
  border-top:1px solid #303037!important;
}
.home .quick .q{
  flex:0 0 auto!important;padding:9px 14px 8px 0!important;margin-right:14px!important;
  border:0!important;background:transparent!important;font-size:12px!important;color:#9c9aa0!important;
}
.home .quick .q:hover{color:#fff!important;text-decoration:underline;text-underline-offset:4px;background:transparent!important}

/* HUB — rows and one dominant official mode */
.wrap .hero{text-align:left!important;padding:22px 0 15px!important;border-bottom:1px solid #26262d!important;margin-bottom:10px!important}
.wrap .hero .kicker{display:none!important}
.wrap .hero h1{font-size:36px!important;line-height:.95!important;margin:0 0 5px!important;font-weight:900!important}
.wrap .grid{display:block!important}
.wrap .card,.wrap .card.official{
  min-height:74px!important;padding:12px 50px 12px 14px!important;margin:0!important;
  border:0!important;border-bottom:1px solid #292930!important;background:transparent!important;
  position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
}
.wrap .card.official{min-height:112px!important;border-left:4px solid #b4b6ff!important;background:#101015!important;padding-left:18px!important}
.wrap .card:hover{background:#17171c!important}
.wrap .card .ico,.wrap .card.official .ico{position:absolute!important;right:13px!important;top:50%!important;transform:translateY(-50%)!important;font-size:21px!important;color:#6f6f78!important;border:0!important;background:transparent!important}
.wrap .card h2,.wrap .card.official h2{font-size:21px!important;margin:0!important}
.wrap .card.official h2{font-size:29px!important}
.wrap .card .tag{margin:0 0 3px!important;border-left:2px solid #5f6070!important}
.wrap .quick{display:flex!important;gap:0!important;flex-wrap:wrap!important;margin-top:14px!important;border-top:1px solid #292930!important}
.wrap .quick a{border:0!important;background:transparent!important;padding:10px 16px 10px 0!important;margin-right:16px!important;color:#99989e!important}

/* CHART BROWSER — dense catalog, deliberately non-card */
.hero{padding-top:4px!important}
.hero h1{font-size:35px!important;margin:10px 0 2px!important;line-height:1!important}
.search{display:grid!important;grid-template-columns:minmax(0,1fr) 96px!important;gap:0!important;margin:18px 0 10px!important;border:1px solid #35353d!important}
.search .field{border:0!important;background:#0d0d11!important;padding:12px!important}
.search .btn{border:0!important;border-left:1px solid #35353d!important}
.modes{display:flex!important;gap:0!important;flex-wrap:wrap!important;margin:0 0 8px!important;border-bottom:1px solid #292930!important}
.mode{padding:8px 11px!important;border:0!important;background:transparent!important;color:#8e8d93!important}
.mode.active{background:transparent!important;color:#fff!important;border-bottom:2px solid #b6b8ff!important}
.filters{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:5px!important;margin-bottom:13px!important}
.filters select{padding:7px 8px!important;background:#101014!important;border:1px solid #2b2b31!important;border-bottom:1px solid #2b2b31!important;font-size:11px!important}
.levels{display:block!important}
.level{
  display:grid!important;grid-template-columns:58px minmax(0,1fr) 70px!important;gap:11px!important;
  align-items:center!important;min-height:70px!important;padding:6px 3px!important;margin:0!important;
  border:0!important;border-bottom:1px solid #24242a!important;background:transparent!important;
}
.level:nth-child(even){background:#0d0d11!important}
.level:hover{background:#17171d!important;padding-left:8px!important}
.level .cover{width:54px!important;height:54px!important;border-radius:0!important;border:1px solid #33333a!important;filter:saturate(.9)!important}
.level .title{font-size:15px!important;font-weight:900!important}
.level .meta{font-size:11px!important;line-height:1.5!important;color:#85848a!important}
.level .diff{font-size:17px!important;font-weight:900!important;text-align:right!important;padding-right:6px!important}
.level .diff:after{content:"";display:block;width:28px;height:2px;background:#b6b8ff;margin:4px 0 0 auto}

/* LEVEL PAGE — poster-ish, not centered card */
.level-card{border:0!important;background:transparent!important}
.levelhead{display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;gap:20px!important;padding:12px 0!important;border-bottom:1px solid #2a2a30!important}
.art{border-radius:0!important;border:1px solid #34343c!important;box-shadow:7px 7px 0 #111116!important}
.leveltitle{font-size:34px!important;line-height:.92!important;margin:7px 0!important}
.stats{display:flex!important;gap:18px!important;flex-wrap:wrap!important;margin-top:16px!important}
.stat{background:transparent!important;border:0!important;border-left:2px solid #383842!important;padding:0 0 0 8px!important}
.playwrap{padding:14px 0 8px!important}
.playwrap .play{min-height:54px!important;max-width:340px!important;font-size:18px!important;justify-content:flex-start!important;padding-left:22px!important;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)!important}
.actions{display:flex!important;gap:0!important;flex-wrap:wrap!important;padding:0 0 14px!important;border-bottom:1px solid #2a2a30!important}
.actions .btn{border:0!important;border-right:1px solid #303037!important;background:transparent!important;padding:8px 12px!important;color:#aaa9ae!important}
.actions .btn:hover{color:#fff!important;background:#17171c!important}
.tabs{display:flex!important;gap:0!important;border-bottom:1px solid #2a2a30!important}
.tabs .tab{border:0!important;background:transparent!important;padding:9px 13px!important}
.tabs .tab.active{background:transparent!important;color:#fff!important;border-bottom:2px solid #b6b8ff!important}
.panel{border:0!important;background:transparent!important;padding:13px 0!important}
.leadrow,.comment{border-radius:0!important;background:transparent!important;border:0!important;border-bottom:1px solid #26262c!important}

/* SETTINGS — old game options screen, not SaaS cards */
.settings{display:grid!important;grid-template-columns:180px minmax(0,1fr)!important;border:0!important;background:transparent!important;min-height:520px!important}
.settings .tabs{display:flex!important;flex-direction:column!important;gap:0!important;padding:0!important;border-right:1px solid #313137!important;border-bottom:0!important}
.settings .tab{justify-content:flex-start!important;text-align:left!important;border:0!important;background:transparent!important;padding:12px 13px!important;color:#85848a!important}
.settings .tab.active{background:#17171c!important;color:#fff!important;border-left:3px solid #b6b8ff!important;padding-left:10px!important}
.settings .content{padding:5px 0 30px 24px!important;max-width:760px!important}
.settings .content h1{font-size:30px!important;margin:0 0 13px!important}
.setting{display:grid!important;grid-template-columns:minmax(160px,1fr) minmax(190px,320px)!important;gap:18px!important;align-items:center!important;padding:12px 0!important;border-bottom:1px dotted #37373e!important}
.setting label{font-weight:800!important}
.setting small{display:block!important;margin-top:3px!important;color:#77767d!important;font-size:11px!important;line-height:1.35!important}
.setting input[type=range]{width:100%!important;accent-color:#b5b7ff!important}
.setting input[type=checkbox]{accent-color:#b5b7ff!important}

/* social/profile/account — fewer floating cards */
.layout,.profile,.box{border-radius:0!important}
.sidebar{border-right:1px solid #292930!important}
.sidebar .sidebtn{border:0!important;border-bottom:1px solid #24242a!important;background:transparent!important;text-align:left!important}
.sidebar .sidebtn.active{background:#17171c!important;color:#fff!important;border-left:3px solid #b6b8ff!important}
.feed-item,.user-card,.user-row{border-radius:0!important;border:0!important;border-bottom:1px solid #292930!important;background:transparent!important}
.avatar{border-radius:2px!important}
.profile .banner{border-radius:0!important}
.profile-body{border-radius:0!important}
.profile .stats{border-top:1px solid #292930!important;border-bottom:1px solid #292930!important}
.profile .stat{border-left:0!important;border-right:1px solid #292930!important;padding:10px!important}

/* preflight/game overlay: utilitarian */
#rs-preflight{background:#09090cf2!important;backdrop-filter:none!important}
.rs-preflight-card{border-radius:0!important;border:1px solid #33333b!important;padding:12px!important;background:#101015!important}
.rs-pre-art{border-radius:0!important}
.rs-pre-info h2{font-size:35px!important;letter-spacing:-.05em!important}
.rs-pre-stats span{border-radius:0!important}

@media(max-width:720px){
  .shell,.wrap{width:min(100% - 16px,1100px)!important}
  .home{width:min(100% - 22px,790px)!important;padding-top:13vh!important}
  .home .mode-row{grid-template-columns:1fr 1fr!important}
  .home .mainplay,.home .online{min-height:58px!important;padding:0 15px!important;font-size:16px!important}
  .home .quick{overflow-x:auto!important;white-space:nowrap!important}
  .filters{grid-template-columns:1fr 1fr!important}
  .levelhead{grid-template-columns:110px minmax(0,1fr)!important;gap:13px!important}
  .leveltitle{font-size:26px!important}
  .settings{grid-template-columns:1fr!important}
  .settings .tabs{flex-direction:row!important;overflow-x:auto!important;border-right:0!important;border-bottom:1px solid #313137!important}
  .settings .tab{white-space:nowrap!important}
  .settings .content{padding:15px 3px!important}
  .setting{grid-template-columns:1fr!important;gap:7px!important}
}
@media(max-width:480px){
  .filters{grid-template-columns:1fr!important}
  .level{grid-template-columns:48px minmax(0,1fr) 52px!important}
  .level .cover{width:44px!important;height:44px!important}
  .home .logo{font-size:52px!important}
}

/* =========================================================
   GAMEPLAY — same visual language as Index / Hub
   Hand-tuned, flat, compact. No glass cards, no pill HUD.
   ========================================================= */
#game-screen{
  --gp-ink:#09090d;
  --gp-panel:#0d0d12;
  --gp-line:#2a2a31;
  --gp-line-soft:#1b1b21;
  --gp-text:#f2f1f4;
  --gp-muted:#77767e;
  --gp-accent:#b6b8ff;
  --gp-danger:#ff4f67;
  background:#08080b!important;
  padding:22px 18px 18px!important;
  justify-content:flex-start!important;
  gap:0!important;
}

/* top HUD: deliberately plain, like the rest of the site */
#game-screen>#ui{
  width:min(92vw,460px)!important;
  max-width:460px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0 0 8px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:0!important;
  border-bottom:1px solid var(--gp-line)!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  font-family:inherit!important;
}
#game-screen>#ui>div{
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#game-screen .btn-exit{
  min-width:0!important;
  min-height:0!important;
  padding:7px 0!important;
  border:0!important;
  background:transparent!important;
  color:#a8a7ad!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  line-height:1!important;
}
#game-screen .btn-exit:hover{
  color:#fff!important;
  text-decoration:underline!important;
  text-underline-offset:4px!important;
  transform:none!important;
}
#game-screen .rs-score-readout{
  display:flex!important;
  align-items:baseline!important;
  gap:9px!important;
  font-variant-numeric:tabular-nums!important;
}
#game-screen .rs-score-label{
  color:#66656c!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
}
#game-screen #score{
  min-width:34px!important;
  text-align:right!important;
  color:#f6f5f7!important;
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}

/* stage: squared-off, slightly imperfect corners, no phone-card look */
#game-screen>#game-area{
  width:min(92vw,460px)!important;
  max-width:460px!important;
  height:min(80vh,760px)!important;
  margin:0!important;
  border:1px solid #303038!important;
  border-radius:0!important;
  background:#090a0f!important;
  box-shadow:none!important;
  overflow:hidden!important;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))!important;
}
#game-screen>#game-area::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),#1d1e25 50%,transparent calc(50% + .5px)),
    repeating-linear-gradient(0deg,transparent 0 43px,#111219 43px 44px)!important;
}
#game-screen>#game-area::after{
  content:"RHYTHM SLIDE"!important;
  left:11px!important;
  top:10px!important;
  color:#34343c!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.24em!important;
  text-shadow:none!important;
}

/* small top rails, matching the angular language used elsewhere */
#game-screen>#game-area{
  background-image:
    linear-gradient(90deg,#7d7fa8 0 34%,transparent 34% 100%),
    linear-gradient(90deg,transparent 0 70%,#45465d 70% 100%)!important;
  background-size:62px 1px,45px 1px!important;
  background-repeat:no-repeat!important;
  background-position:10px 8px,calc(100% - 10px) 8px!important;
  background-color:#090a0f!important;
}

/* life / rush HUD: text and lines, not a floating widget */
#game-screen #rs-life-system{
  left:11px!important;
  top:27px!important;
  width:min(265px,64%)!important;
  display:grid!important;
  gap:5px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#game-screen .rs-life-head{
  font-size:9px!important;
  color:#77767d!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#game-screen .rs-life-head b{
  color:#d7d6db!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
#game-screen .rs-life-track{
  height:4px!important;
  border:0!important;
  border-radius:0!important;
  background:#222229!important;
  overflow:hidden!important;
}
#game-screen .rs-life-track i{
  border-radius:0!important;
  box-shadow:none!important;
}
#game-screen #rs-rhythm-points{
  gap:5px!important;
  height:12px!important;
}
#game-screen .rs-rp{
  width:10px!important;
  height:10px!important;
  border-radius:0!important;
  border:1px solid #4f505c!important;
  opacity:1!important;
  transform:rotate(45deg)!important;
}
#game-screen .rs-rp::before{
  inset:2px!important;
  border-radius:0!important;
  background:#7d7fa8!important;
  opacity:0!important;
}
#game-screen .rs-rp.on::before{opacity:1!important}
#game-screen #rs-rush-status{
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
  color:#9998a0!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
}

/* combo is big type only, no floating panel */
#game-screen #rs-combo-hud{
  right:11px!important;
  top:25px!important;
  text-align:right!important;
  filter:none!important;
}
#game-screen .rs-combo-num{
  color:#efedf0!important;
  font-family:inherit!important;
  font-size:29px!important;
  font-weight:900!important;
  letter-spacing:-.07em!important;
  text-shadow:none!important;
}
#game-screen .rs-combo-label{
  margin-top:2px!important;
  color:#5f5e66!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.21em!important;
}

/* input line: less laser sci-fi, more physical marker */
#game-screen #indicator-wrapper{opacity:1!important}
#game-screen .rs-input-line{
  height:1px!important;
  background:#7a3443!important;
  box-shadow:none!important;
}
#game-screen .rs-input-line::before,
#game-screen .rs-input-line::after{
  background:#c7485c!important;
  box-shadow:none!important;
}
#game-screen #crosshair-wrapper{
  width:58px!important;
  height:58px!important;
  filter:none!important;
}
#game-screen #crosshair-group{fill:#d7495e!important}

/* progress is a bottom rule, not a glowing pill */
#game-screen .rs-progress{
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:2px!important;
  border-radius:0!important;
  background:#17171d!important;
}
#game-screen .rs-progress>i{
  background:#8e90d0!important;
  box-shadow:none!important;
}

/* notes retain their gameplay colours but lose the overproduced bloom */
#game-screen .arrow{
  filter:none!important;
}
#game-screen .dodge-circle{
  background:#090a0f!important;
  box-shadow:none!important;
}

/* judgement: typography, not a notification card */
#game-screen #judge-popup{
  text-shadow:none!important;
  filter:none!important;
  font-family:inherit!important;
}
#game-screen #judge-popup .judge-main{
  font-weight:950!important;
  letter-spacing:-.03em!important;
}
#game-screen #judge-popup .judge-points{
  color:#7e7d84!important;
  letter-spacing:.12em!important;
}

/* video should remain the atmosphere, UI stays quiet */
#game-screen.rs-has-video>#game-area{
  background-color:rgba(9,10,15,.82)!important;
}

/* gamepad keeps its dedicated geometry, but adopts the same flat frame */
#game-screen.rs-gamepad-mode>#game-area{
  border-radius:0!important;
  box-shadow:none!important;
  background-color:#090a0f!important;
}

@media(max-width:700px){
  #game-screen{padding:8px!important}
  #game-screen>#ui{
    width:100%!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    margin-bottom:5px!important;
  }
  #game-screen>#game-area{
    width:100%!important;
    max-width:none!important;
    height:calc(100dvh - 51px)!important;
    min-height:0!important;
    clip-path:none!important;
  }
  #game-screen .btn-exit{font-size:10px!important}
  #game-screen #rs-life-system{top:24px!important;left:8px!important;width:58%!important}
  #game-screen #rs-combo-hud{top:23px!important;right:8px!important}
}


/* ========================================================================== 
   RHYTHM SLIDE — unified hand-built UI pass
   Applied across the normal site. ARG views opt out with html.rs-arg-mode.
   ========================================================================== */
html:not(.rs-arg-mode){
  --rs-paper:#ece9df;
  --rs-ink:#0a0a0d;
  --rs-bg:#09090c;
  --rs-surface:#101014;
  --rs-surface-2:#15151a;
  --rs-rule:#2a2a31;
  --rs-rule-bright:#44444e;
  --rs-text:#efede7;
  --rs-muted:#85838a;
  --rs-lilac:#b4b6ff;
  --rs-mint:#78dfc2;
}

html:not(.rs-arg-mode) body{
  background-color:var(--rs-bg)!important;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px)!important;
  background-size:52px 52px!important;
}

/* The site's shared rhythm: fewer boxes, more rules and space. */
html:not(.rs-arg-mode) main,
html:not(.rs-arg-mode) .shell,
html:not(.rs-arg-mode) .wrap,
html:not(.rs-arg-mode) .container{
  position:relative;
}
html:not(.rs-arg-mode) main::before,
html:not(.rs-arg-mode) .shell::before,
html:not(.rs-arg-mode) .wrap::before{
  pointer-events:none;
}

html:not(.rs-arg-mode) h1{
  font-size:clamp(30px,5vw,54px)!important;
  line-height:.9!important;
  font-weight:900!important;
  text-wrap:balance;
}
html:not(.rs-arg-mode) h2{font-weight:900!important;line-height:1!important}
html:not(.rs-arg-mode) p{line-height:1.55}

/* Buttons should look like controls, not app-store pills. */
html:not(.rs-arg-mode) :is(button,.btn,.back,.play,.mainplay,.online,.account-btn,.tiny-btn,.reaction,.sidebtn,.pill,.chip,.tab,.mode){
  border-radius:0!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html:not(.rs-arg-mode) :is(button,.btn,.back,.play,.account-btn,.tiny-btn,.reaction,.sidebtn){
  min-height:34px;
  border:1px solid var(--rs-rule)!important;
  background:#111116!important;
  color:#d7d5cf!important;
  font-weight:800!important;
}
html:not(.rs-arg-mode) :is(button,.btn,.back,.play,.account-btn,.tiny-btn,.reaction,.sidebtn):hover{
  border-color:#676773!important;
  background:#19191f!important;
  color:#fff!important;
}
html:not(.rs-arg-mode) :is(.btn.primary,.play,.account-btn,.mainplay){
  background:var(--rs-paper)!important;
  color:var(--rs-ink)!important;
  border-color:var(--rs-paper)!important;
}

/* Inputs are tools, not miniature cards. */
html:not(.rs-arg-mode) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select,.field){
  border-radius:0!important;
  background:#0c0c10!important;
  border:0!important;
  border-bottom:1px solid #464650!important;
  color:#eeece6!important;
  box-shadow:none!important;
}
html:not(.rs-arg-mode) :is(input,textarea,select,.field):focus{
  outline:0!important;
  border-bottom-color:var(--rs-lilac)!important;
}

/* Cards become sections. Kept broad on purpose so legacy screens match too. */
html:not(.rs-arg-mode) :is(.card,.panel,.box,.setting-box,.account-panel,.profile-card,.profile-stat,.profile-chart,.notification-panel,.notification-item,.feed-item,.comment,.leadrow,.level-card,.rs-chart-preview,.rs-preflight-card){
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html:not(.rs-arg-mode) :is(.card,.panel,.box,.setting-box,.account-panel,.profile-card,.notification-panel,.rs-chart-preview,.rs-preflight-card){
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--rs-rule)!important;
}

/* Top bars follow index/hub instead of floating glass navs. */
html:not(.rs-arg-mode) :is(.top,.header,.nav-header,.page-head){
  background:transparent!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  border-bottom:1px solid var(--rs-rule)!important;
}
html:not(.rs-arg-mode) .brand::before{
  background:var(--rs-lilac)!important;
}

/* Small metadata gets its own rhythm instead of badge soup. */
html:not(.rs-arg-mode) :is(.tag,.badge,.status-pill,.meta-chip){
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-left:2px solid #696a78!important;
  padding:1px 7px!important;
}

/* User/account/social screens: dense rows, no profile-dashboard toy blocks. */
html:not(.rs-arg-mode) :is(.users,.feed,.notifications,.comments,.leaderboard){
  gap:0!important;
}
html:not(.rs-arg-mode) :is(.user-card,.feed-item,.notification-item,.comment,.leadrow,.profile-chart){
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-bottom:1px solid #25252b!important;
}
html:not(.rs-arg-mode) :is(.user-card,.feed-item,.notification-item,.comment,.leadrow,.profile-chart):hover{
  background:#111116!important;
}
html:not(.rs-arg-mode) .avatar{
  border-radius:2px!important;
  box-shadow:none!important;
}

/* Settings keeps the same old-game/options-screen language. */
html:not(.rs-arg-mode) .rs-settings-expanded{
  border-radius:0!important;
  box-shadow:none!important;
  background:#0d0d11!important;
  border:1px solid #2a2a30!important;
}
html:not(.rs-arg-mode) .rs-settings-tab{
  border-radius:0!important;
  background:transparent!important;
}
html:not(.rs-arg-mode) .rs-settings-tab.active{
  background:#17171c!important;
  border-color:transparent!important;
  border-left:3px solid var(--rs-lilac)!important;
}
html:not(.rs-arg-mode) .rs-color-picker{
  border-radius:0!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #292930!important;
}

/* Browser / campaign / shop / daily content follows catalog-like rows. */
html:not(.rs-arg-mode) :is(.rs-browser-mode,.rs-browser-search,.rs-browser-filters,.rs-browser-chip){
  border-radius:0!important;
  box-shadow:none!important;
}
html:not(.rs-arg-mode) .rs-browser-mode{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #292930!important;
}
html:not(.rs-arg-mode) .rs-browser-mode.active{
  background:#141419!important;
  border-bottom:2px solid var(--rs-lilac)!important;
}
html:not(.rs-arg-mode) .rs-browser-search,
html:not(.rs-arg-mode) .rs-browser-filters{
  background:#0d0d11!important;
  border:1px solid #303037!important;
}
html:not(.rs-arg-mode) .rs-browser-chip.active{
  color:#fff!important;
  border-color:#66687d!important;
  background:#191920!important;
}

/* Remove decorative gradient/glass residue in ordinary pages. */
html:not(.rs-arg-mode) :is(.glass,.glass-card,.gradient-card,.hero-card){
  backdrop-filter:none!important;
  background:#111116!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Deliberate little imperfections: rules/cuts are part of the identity. */
html:not(.rs-arg-mode) :is(.hero,.section-title,.page-title){position:relative}
html:not(.rs-arg-mode) :is(.hero,.section-title,.page-title)::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  margin-top:11px;
  background:var(--rs-lilac);
  transform:skewX(-22deg) translateX(4px);
  opacity:.82;
}

/* The play screen already has a dedicated hand-built HUD. Don't flatten it. */
html:not(.rs-arg-mode) body.rs-play-only #game-screen :is(.card,.panel){
  border-bottom:0!important;
}

/* ARG escape hatch. Legacy/hidden views stay intentionally plain. */
html.rs-arg-mode,
html.rs-arg-mode body{
  background:#fff!important;
  color:#000!important;
  font-family:monospace!important;
}
html.rs-arg-mode body::before,
html.rs-arg-mode body::after{display:none!important}
html.rs-arg-mode *{text-shadow:none!important;box-shadow:none!important}

@media(max-width:700px){
  html:not(.rs-arg-mode) h1{font-size:34px!important}
  html:not(.rs-arg-mode) :is(.shell,.wrap,.container){width:min(100% - 20px,1100px)!important}
}

/* Gamepad arena: circular glass only. Notes are intentionally allowed to travel outside it. */
#game-screen.rs-gamepad-mode>#game-area{
  width:min(78vh,78vw)!important;
  height:min(78vh,78vw)!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  clip-path:none!important;
  overflow:visible!important;
  border:0!important;
  box-shadow:none!important;
  background:rgba(9,10,15,.33)!important; /* 67% transparent */
  background-image:none!important;
}
#game-screen.rs-gamepad-mode.rs-has-video>#game-area{
  background:rgba(9,10,15,.33)!important;
}
#game-screen.rs-gamepad-mode>#game-area::before,
#game-screen.rs-gamepad-mode>#game-area::after{
  display:none!important;
  content:none!important;
}
#game-screen.rs-gamepad-mode #rs-gamepad-arena{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:2px solid rgba(255,255,255,.72)!important;
  border-radius:50%!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
}
#game-screen.rs-gamepad-mode #game-area>.arrow,
#game-screen.rs-gamepad-mode #game-area>.dodge-circle{
  z-index:20!important;
}