*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#07090b;
  --panel:#0c1014;
  --panel-2:#10151b;
  --line:#1c242d;
  --text:#d8ccb0;
  --muted:#7b8590;
  --gold:#f0c040;
  --green:#7ec882;
  --blue:#85a7ff;
  --danger:#ff7b7b;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top, rgba(240,192,64,.08), transparent 35%),
    linear-gradient(180deg,#090c10 0%, #050608 100%);
  color:var(--text);
  font-family:'VT323', monospace;
}

.rt-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 420px);
  gap:18px;
  padding:18px;
  max-width:1400px;
  margin:0 auto;
}

.rt-game,
.rt-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 20px 50px rgba(0,0,0,.35);
}

.rt-game{
  overflow:hidden;
  position:relative;
  min-height:760px;
  display:flex;
  flex-direction:column;
}

#rt-title{
  background:linear-gradient(180deg,#121820 0%, #0f141a 100%);
  border-bottom:2px solid var(--line);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

#rt-title-txt,
#rt-level,
.rtbtn,
.rt-side-btn,
.rtf{
  font-family:'Press Start 2P', monospace;
}

#rt-title-txt{
  color:var(--gold);
  font-size:12px;
  line-height:1.5;
}

#rt-level{
  font-size:9px;
  color:#98f0a4;
  background:#112715;
  border:1px solid #2d7a2d;
  border-radius:6px;
  padding:8px 10px;
}

#rt-venues{
  flex:1;
  padding:12px;
  overflow-y:auto;
  max-height:calc(100vh - 140px);
}

#rt-venues::-webkit-scrollbar{
  width:8px;
}

#rt-venues::-webkit-scrollbar-track{
  background:#0a0d0f;
}

#rt-venues::-webkit-scrollbar-thumb{
  background:#2a3038;
  border-radius:10px;
}

.rtv{
  background:#0f1318;
  border:1px solid #1a1f26;
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .15s;
}

.rtv:hover{
  transform:translateY(-1px);
}

.rtv.affordable{
  border-color:#c8a020;
  box-shadow:0 0 0 1px #c8a020, 0 0 20px rgba(200,160,32,.10);
}

.rtv.locked{
  opacity:.58;
}

.rtv-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}

.rtv-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
}

.rtv-meta{
  flex:1;
  min-width:0;
}

.rtv-name{
  font-size:22px;
  color:#efdcae;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
}

.rtv-sub{
  font-size:18px;
  color:var(--muted);
}

.rtv-badge{
  font-size:10px;
  color:#d8a6ff;
  background:#1f1030;
  padding:5px 7px;
  border-radius:5px;
  border:1px solid #6a2a9a;
}

.rtv-bar-wrap{
  height:28px;
  background:#080b0d;
  position:relative;
  cursor:pointer;
  border-top:1px solid #1a1f26;
  border-bottom:1px solid #1a1f26;
}

.rtv-bar{
  height:100%;
  width:0%;
  transition:width .12s linear;
}

.rtv-bar.ready{
  animation:rdyPulse .7s ease-in-out infinite alternate;
}

@keyframes rdyPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.35)}
}

.rtv-bar-lbl{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:18px;
  color:rgba(255,255,255,.88);
  pointer-events:none;
  white-space:nowrap;
}

.rtv-btns{
  display:flex;
  gap:8px;
  padding:10px 12px;
  flex-wrap:wrap;
}

.rtbtn{
  font-size:8px;
  line-height:1.5;
  padding:9px 10px;
  border-radius:6px;
  cursor:pointer;
  border:1px solid transparent;
  transition:filter .1s, transform .1s, opacity .2s;
}

.rtbtn:active:not(:disabled){
  transform:scale(.96);
}

.rtbtn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.rtbtn-buy{
  background:#102414;
  border-color:#2d7a2d;
  color:#8ef0a0;
}

.rtbtn-upg{
  background:#101a2c;
  border-color:#2a5a8a;
  color:#7cc0ff;
}

.rtbtn-mgr{
  background:#1a1128;
  border-color:#6a2a9a;
  color:#d19bff;
}

.rtbtn:not(:disabled):hover{
  filter:brightness(1.15);
}

.rtbtn-can-afford{
  box-shadow:0 0 12px rgba(255,255,255,.06);
}

#rt-tip{
  border-top:1px solid var(--line);
  padding:10px 14px;
  text-align:center;
  color:#707a85;
  background:#0b0f13;
  font-size:18px;
}

#rt-floats{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.rtf{
  position:absolute;
  white-space:nowrap;
  animation:rtfUp 1.2s ease-out forwards;
}

@keyframes rtfUp{
  0%{opacity:1;transform:translateY(0) scale(1)}
  25%{opacity:1;transform:translateY(-12px) scale(1.12)}
  100%{opacity:0;transform:translateY(-58px) scale(.82)}
}

/* SIDE */
.rt-side{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.rt-card{
  padding:16px;
}

.rt-side-title{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  color:var(--gold);
  margin-bottom:16px;
  line-height:1.5;
}

.rt-side-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:22px;
}

.rt-side-row:last-child{
  border-bottom:0;
}

.rt-side-row span{
  color:var(--muted);
}

.rt-side-row strong{
  color:#f0e3bd;
  font-size:24px;
}

.rt-side-buttons{
  display:grid;
  gap:10px;
}

.rt-side-btn{
  border:1px solid #2c3742;
  background:#111821;
  color:#d8e2ef;
  border-radius:10px;
  padding:12px 10px;
  font-size:8px;
  line-height:1.5;
  cursor:pointer;
  transition:filter .15s, transform .1s;
}

.rt-side-btn:hover{
  filter:brightness(1.08);
}

.rt-side-btn:active{
  transform:scale(.98);
}

.rt-side-btn-alt{
  background:#161329;
  border-color:#3e3a75;
  color:#c8c3ff;
}

.rt-side-btn-danger{
  background:#2b1111;
  border-color:#6d2929;
  color:#ffabab;
}

#rt-status{
  margin-top:14px;
  font-size:19px;
  color:#8a94a0;
  min-height:24px;
}

.rt-help{
  color:#8a94a0;
  font-size:20px;
  line-height:1.4;
}

@media (max-width: 980px){
  .rt-shell{
    grid-template-columns:1fr;
  }

  .rt-game{
    min-height:620px;
  }

  #rt-venues{
    max-height:none;
  }
}

@media (max-width: 640px){
  .rt-shell{
    padding:10px;
    gap:10px;
  }

  #rt-title-txt{
    font-size:10px;
  }

  #rt-level{
    font-size:8px;
  }

  .rtv-name{
    font-size:20px;
  }

  .rtv-sub,
  .rtv-bar-lbl,
  #rt-tip,
  .rt-help,
  #rt-status{
    font-size:16px;
  }

  .rt-side-row{
    font-size:18px;
  }

  .rt-side-row strong{
    font-size:20px;
  }

  .rtbtn,
  .rt-side-btn{
    font-size:7px;
  }
}