/* Vice City Stories — rules page */
.rcats {
  display: grid;
  gap: 10px;
}
.rc {
  border: 2px solid var(--cc);
  background: rgba(10, 3, 20, 0.7);
  box-shadow: 0 0 10px var(--cc);
  transition: box-shadow 0.2s;
}
.rc.open {
  box-shadow:
    0 0 22px var(--cc),
    inset 0 0 14px rgba(255, 255, 255, 0.06);
}
.rh {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 13px 16px;
  font:
    11px "Press Start 2P",
    "Courier New",
    monospace;
  letter-spacing: 0.06em;
  text-align: left;
  touch-action: manipulation;
}
.rh:hover {
  background: rgba(255, 255, 255, 0.05);
}
.ri {
  width: 30px;
  text-align: center;
  font-size: 16px;
}
.rt {
  flex: 1;
  color: var(--cc);
  text-shadow: 0 0 8px var(--cc);
  line-height: 1.5;
}
.rn {
  background: var(--cc);
  color: #10061c;
  padding: 3px 7px;
  font-size: 9px;
}
.ra {
  color: var(--cc);
  transition: transform 0.25s;
}
.rc.open .ra {
  transform: rotate(180deg);
}
.rb {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.rc.open .rb {
  grid-template-rows: 1fr;
}
.rb > .rl {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  list-style: none;
  counter-reset: q;
}
.rc.open .rb > .rl {
  padding: 4px 18px 16px;
}
.rl li {
  counter-increment: q;
  position: relative;
  padding: 9px 0 9px 38px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
  line-height: 1.6;
}
.rl li::before {
  content: counter(q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--cc);
  font:
    10px "Press Start 2P",
    "Courier New",
    monospace;
  text-shadow: 0 0 8px var(--cc);
}

/* ---- dynamic rules: header icons, admin form ---- */
.rh{outline:none}
.rh:focus-visible{background:rgba(255,255,255,.07)}
.rico{flex:none;width:28px;height:28px;padding:0;border:2px solid var(--cc,#27e8ff);background:#0b0418;color:var(--cc,#27e8ff);font:bold 13px/1 "Courier New",monospace;cursor:pointer;box-shadow:2px 2px 0 #000;touch-action:manipulation}
.rico:hover{background:var(--cc,#27e8ff);color:#0b0418}
.rico.rx{--cc:#ff2d4d}
.rhead{display:flex;justify-content:flex-end;margin:0 0 10px}
.rhead:has(#rnew[style*="none"]){display:none}
.rform{max-width:none!important;margin:0 0 18px;padding:16px;border:2px dashed #ff2d4d;background:rgba(10,3,20,.6)}
.rform h3{color:#ff2d4d!important}
.rfrow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.rficon{width:110px}
.rfcol small{display:block;color:#27e8ff;font:9px "Press Start 2P",monospace;margin-bottom:6px}
.rfsw{display:flex;gap:6px;flex-wrap:wrap}
.rfsw button{width:26px;height:26px;border:2px solid #0b0418;cursor:pointer;box-shadow:2px 2px 0 #000}
.rfsw button.on{outline:2px solid #fff;outline-offset:1px}
.rfrules{display:flex;flex-direction:column;gap:8px}
.rfr{display:flex;align-items:flex-start;gap:8px}
.rfn{flex:none;width:30px;padding-top:11px;color:#ff2d4d;font:10px "Press Start 2P",monospace;text-shadow:0 0 8px #ff2d4d}
.rfr textarea{flex:1;min-height:44px!important}
.rfr .rico{margin-top:6px;--cc:#9a85b8}
.rfr .rico.rx{--cc:#ff2d4d}
.rform > .abtn.ghost{align-self:flex-start}
@media(max-width:560px){.rh{gap:8px;padding:12px 10px}.rico{width:24px;height:24px;font-size:11px}}

/* ---- icon picker ---- */
.ri i{font-size:15px}
.rficon small{display:block;color:#27e8ff;font:9px "Press Start 2P",monospace;margin-bottom:6px}
.ricsel{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#0a0314;border:2px solid #3b2f54;color:#fff;cursor:pointer;box-shadow:3px 3px 0 #000}
.ricsel:hover{border-color:#ff2d4d}
.ricsel{border-color:var(--ic,#3b2f54)}
.ricsel .ricico{font-size:18px;min-width:22px;text-align:center;color:var(--ic,#ffd23c);text-shadow:0 0 8px var(--ic,#ffd23c)}
.ricch{font:8px "Press Start 2P",monospace;color:#9a85b8}
#ricpick .mbox{width:min(760px,100%)!important;border-color:#ff2d4d;box-shadow:0 0 40px #ff2d4d,inset 0 0 30px rgba(255,45,77,.2)}
#ricpick .mbox h3{font-size:18px!important;text-shadow:0 0 12px #ff2d4d,2px 2px 0 #27e8ff!important}
#ricpick .ricq{width:100%;font:14px "Courier New",monospace;color:#fff;background:#0a0314;border:2px solid #3b2f54;padding:10px 12px;outline:none;margin-bottom:12px;box-sizing:border-box}
#ricpick .ricq:focus{border-color:#ff2d4d}
.ricgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;max-height:52vh;overflow:auto;padding:2px 4px 4px 2px}
.ricbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:74px;padding:6px 4px;background:#0a0314;border:2px solid #3b2f54;color:#e5d6f5;cursor:pointer;touch-action:manipulation}
.ricbtn .ricico{font-size:22px;color:#ffd23c}
.ricbtn small{font-size:9px;color:#9a85b8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ricbtn:hover,.ricbtn.on{border-color:#ff2d4d;box-shadow:0 0 12px #ff2d4d;background:#1c0b3a}
.ricbtn.on small{color:#fff}