.rarsim-spanz{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}

.rs-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}
.rs-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,0.12);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 8px;
}
.rs-title{ margin:0; font-size: 28px; line-height:1.1; }
.rs-subtitle{ margin:6px 0 0; opacity: 0.8; }

.rs-btn{
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  padding:10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
}
.rs-btn:hover{ box-shadow: 0 8px 26px rgba(0,0,0,0.06); }

.rs-body{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.rs-left{ flex: 1 1 320px; min-width: 280px; }
.rs-right{ flex: 2 1 520px; min-width: 280px; }

.rs-card{
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.015);
}

.rs-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rs-chip{
  background:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
}
.rs-label{ opacity: .7; margin-right: 6px; }

.rs-figure{
  position: relative;
  height: 240px;
  margin: 10px 0 8px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background:#fff;
  overflow:hidden;
}
.rs-gallow .rs-post{
  position:absolute;
  left: 22px; bottom: 18px;
  width: 10px; height: 200px;
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
}
.rs-gallow .rs-beam{
  position:absolute;
  left: 22px; top: 30px;
  width: 150px; height: 10px;
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
}
.rs-gallow .rs-rope{
  position:absolute;
  left: 160px; top: 40px;
  width: 6px; height: 36px;
  background: rgba(0,0,0,0.20);
  border-radius: 10px;
}

.rs-man{
  position:absolute;
  left: 140px; top: 72px;
  width: 120px; height: 160px;
}
.rs-head{
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 4px solid rgba(0,0,0,0.22);
  position:absolute;
  left: 18px; top: 0px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .2s, transform .2s;
}
.rs-bodyline{
  position:absolute;
  left: 40px; top: 48px;
  width: 6px; height: 64px;
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .2s;
}
.rs-arm, .rs-leg{
  position:absolute;
  width: 42px; height: 6px;
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .2s;
}
.rs-arm-l{ left: 2px; top: 62px; transform: rotate(-25deg); }
.rs-arm-r{ left: 44px; top: 62px; transform: rotate(25deg); }
.rs-leg-l{ left: 10px; top: 116px; transform: rotate(25deg); }
.rs-leg-r{ left: 44px; top: 116px; transform: rotate(-25deg); }

.rs-hint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  font-weight: 900;
}
.rs-hint-label{ opacity:.7; margin-right: 8px; }

.rs-word{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background:#fff;
  min-height: 68px;
  align-items:center;
}
.rs-letter{
  width: 42px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
}
.rs-letter.is-space{
  width: 18px;
  border: none;
  background: transparent;
}

.rs-kbd{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.rs-key{
  border:1px solid rgba(0,0,0,0.12);
  background:#fff;
  border-radius: 12px;
  padding: 10px 0;
  cursor:pointer;
  font-weight: 900;
  text-align:center;
  user-select:none;
}
.rs-key:hover{ box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
.rs-key.is-used{
  opacity: .5;
  cursor: not-allowed;
}
.rs-key.is-good{
  border-color: rgba(13, 161, 98, 0.35);
  background: rgba(13, 161, 98, 0.06);
}
.rs-key.is-bad{
  border-color: rgba(229, 57, 53, 0.35);
  background: rgba(229, 57, 53, 0.06);
}

.rs-msg{
  margin-top: 12px;
  min-height: 22px;
  font-weight: 900;
}
.rs-msg.is-ok{ color:#0a7d2a; }
.rs-msg.is-error{ color:#b00020; }

.rs-note{
  margin-top: 8px;
  opacity: .8;
}

.rs-footer{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.rs-footnote{ opacity: 0.8; }
.rs-cta{
  font-weight: 900;
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,0.22);
}
.rs-cta:hover{ border-bottom-color: rgba(0,0,0,0.55); }

@media (max-width: 720px){
  .rs-title{ font-size: 22px; }
  .rs-kbd{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Category picker */
.rs-catpick{
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(0,0,0,0.015);
}
.rs-catpick-title{ font-weight: 1000; margin-bottom: 10px; }
.rs-catpick-btns{ display:flex; gap: 10px; flex-wrap: wrap; }
.rs-catpick .rs-btn{ padding:10px 12px; border-radius: 999px; }
.rs-catbtn.is-active{
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}
.rs-catpick-note{ margin-top: 10px; opacity: .8; font-weight: 900; font-size: 12px; }
.rs-game{ margin-top: 12px; }