.rp-bright {
  --sky: #45aaf2; --sky-hi: #8fd3ff; --sea: #2f93e0; --sea-hi: #58b4f4;
  --grass: #63c74d; --grass-hi: #8be36c; --grass-lo: #3e8948;
  --wood: #c47a3a; --wood-hi: #e09a52; --wood-lo: #8a4f22;
  --parch: #fbe8c0; --parch-lo: #e9c98c;
  --ol: #2a1608;
  --wud: #e8432f; --wud-hi: #ff6a52; --wud-lo: #a32615;
  --sun: #ffcf3f;
  --pxl: "Pixelify Sans", "Inter Tight", system-ui, sans-serif;
  background: var(--sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' shape-rendering='crispEdges'%3E%3Cg fill='%2358b4f4'%3E%3Crect x='6' y='8' width='14' height='3'/%3E%3Crect x='20' y='5' width='8' height='3'/%3E%3Crect x='56' y='30' width='14' height='3'/%3E%3Crect x='70' y='27' width='8' height='3'/%3E%3C/g%3E%3C/svg%3E") repeat;
  background-size: 192px 96px;
  image-rendering: pixelated;
}
.rp-bright .fx-scan, .rp-bright .fx-grain, .rp-bright .page-bg { display: none; }
.rp-bright ::selection { background: var(--sun); color: var(--ol); }

.rp-bright .rp { position: relative; padding-top: 96px; background: linear-gradient(180deg, var(--sky) 0, var(--sky-hi) 640px, rgba(143, 211, 255, 0) 900px); }
.rp-bright .rp::before, .rp-bright .rp::after { content: ""; position: absolute; z-index: 0; pointer-events: none; height: 70px; width: 210px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M6 4h3V2h3V1h6v1h3v2h2v1h3v1h2v3H1V6h2V5h3z'/%3E%3Cpath fill='%23d7efff' d='M1 8h28v1H1z'/%3E%3C/svg%3E") center / contain no-repeat; animation: rpb-drift 60s linear infinite; }
.rp-bright .rp::before { top: 150px; left: -220px; }
.rp-bright .rp::after { top: 470px; left: -220px; width: 150px; height: 50px; animation-duration: 84s; animation-delay: -40s; }
@keyframes rpb-drift { to { transform: translateX(calc(100vw + 440px)); } }
.rp-bright .rp > * { position: relative; z-index: 1; }

.rp-bright .rp-title, .rp-bright .rp-head h2, .rp-bright .rp-wiki h2 {
  font-family: var(--pxl); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: #fff;
  text-shadow: .05em 0 0 var(--ol), -.05em 0 0 var(--ol), 0 .05em 0 var(--ol), 0 -.05em 0 var(--ol), .05em .05em 0 var(--ol), -.05em .05em 0 var(--ol), .05em -.05em 0 var(--ol), -.05em -.05em 0 var(--ol), 0 .12em 0 rgba(42, 22, 8, .35);
}
.rp-bright .rp-title { font-size: clamp(56px, 7.6vw, 128px); line-height: .9; }
.rp-bright .rp-foam { background: none; color: var(--wud); -webkit-text-fill-color: var(--wud); filter: none; }
.rp-bright .rp-tag { font-family: var(--pxl); font-weight: 700; text-transform: uppercase; color: var(--sun); text-shadow: 3px 0 0 var(--ol), -3px 0 0 var(--ol), 0 3px 0 var(--ol), 0 -3px 0 var(--ol); }
.rp-bright .rp-sub { color: #fff; font-weight: 600; text-shadow: 0 2px 0 rgba(42, 22, 8, .55); }
.rp-bright .rp-idx { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--ol); color: var(--sun); box-shadow: 0 4px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-idx span { color: #fff; }
.rp-bright .rp-icon { border: 4px solid var(--ol); border-radius: 0; background: var(--parch); box-shadow: inset 0 0 0 3px #fff6dc, 0 4px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-beta { color: var(--ol); background: var(--sun); }
.rp-bright .rp-chip { border: 4px solid var(--ol); border-radius: 0; background: var(--parch); box-shadow: inset 0 0 0 2px #fff6dc; }
.rp-bright .rp-chip .label { color: var(--wud-lo); }
.rp-bright .rp-chip__v { color: var(--ol); font-weight: 600; }
.rp-bright .rp-betanote { color: #fff; text-shadow: 0 2px 0 rgba(42, 22, 8, .5); }
.rp-bright .rp-betanote a { color: var(--sun); }

.rp-bright .btn.rp-btn-gold, .rp-bright .btn.rp-btn-ghost {
  border: 4px solid var(--ol); border-radius: 0; font-family: var(--pxl); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .08s, filter .15s; image-rendering: pixelated;
}
.rp-bright .btn.rp-btn-gold { background: var(--wud); color: #fff; box-shadow: inset 0 -6px 0 var(--wud-lo), inset 0 4px 0 var(--wud-hi), 0 5px 0 rgba(42, 22, 8, .35); text-shadow: 0 2px 0 var(--wud-lo); }
.rp-bright .btn.rp-btn-ghost { background: var(--wood); color: #fff; box-shadow: inset 0 -6px 0 var(--wood-lo), inset 0 4px 0 var(--wood-hi), 0 5px 0 rgba(42, 22, 8, .35); text-shadow: 0 2px 0 var(--wood-lo); }
.rp-bright .btn.rp-btn-gold:hover, .rp-bright .btn.rp-btn-ghost:hover { filter: brightness(1.08); transform: translateY(-2px); color: #fff; border-color: var(--ol); }
.rp-bright .btn.rp-btn-gold:active, .rp-bright .btn.rp-btn-ghost:active { transform: translateY(2px); }

.rp-bright .rp-halo { width: min(560px, 96%); background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); filter: none; }
.rp-bright .rpgt { --glow: drop-shadow(calc(var(--s) * .018) 0 0 var(--ol)) drop-shadow(calc(var(--s) * -.018) 0 0 var(--ol)) drop-shadow(0 calc(var(--s) * .018) 0 var(--ol)) drop-shadow(0 calc(var(--s) * -.018) 0 var(--ol)) drop-shadow(0 calc(var(--s) * .04) 0 rgba(42, 22, 8, .3)); }
.rp-bright .rp-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 13%; height: 92px; z-index: 1;
  background:
    linear-gradient(180deg, var(--grass-hi) 0 8px, var(--grass) 8px 26px, var(--grass-lo) 26px 32px, var(--wood) 32px 58px, var(--wood-lo) 58px 70px, transparent 70px);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 96% 38%, 96% 52%, 90% 52%, 90% 66%, 80% 66%, 80% 80%, 64% 80%, 64% 90%, 36% 90%, 36% 80%, 20% 80%, 20% 66%, 10% 66%, 10% 52%, 4% 52%, 4% 38%, 0 38%);
  filter: drop-shadow(0 4px 0 var(--ol)); animation: rpfloat 6s ease-in-out infinite reverse; }
.rp-bright .rp-logo { z-index: 3; margin-bottom: 60px; }
.rp-bright .rp-hint { z-index: 3; color: #fff; text-shadow: 0 2px 0 var(--ol); }
.rp-bright .rp-pop b { color: #fff; text-shadow: 3px 0 0 var(--ol), -3px 0 0 var(--ol), 0 3px 0 var(--ol), 0 -3px 0 var(--ol); }

.rp-bright .rp-recipe { margin-top: 10px; border: 4px solid var(--ol); background: var(--wood) repeating-linear-gradient(180deg, transparent 0 22px, rgba(138, 79, 34, .55) 22px 25px); box-shadow: inset 0 4px 0 var(--wood-hi), inset 0 -6px 0 var(--wood-lo), 0 8px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-recipe > div + div { border-left: 4px solid var(--ol); }
.rp-bright .rp-recipe .label { color: var(--parch); text-shadow: 0 2px 0 var(--wood-lo); }
.rp-bright .rp-recipe b { font-family: "Jersey 10", var(--pxl); font-weight: 400; font-size: clamp(34px, 3vw, 50px); line-height: .9; color: #fff; text-shadow: 3px 0 0 var(--ol), -3px 0 0 var(--ol), 0 3px 0 var(--ol), 0 -3px 0 var(--ol); }

.rp-bright .rp-sec { position: relative; padding-top: 40px; }
.rp-bright .rp-sec::before { content: ""; position: absolute; left: 50%; top: -34px; width: 100vw; height: 46px; transform: translateX(-50%); pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M0 12V8h3V6h4V4h4V3h6v1h3v2h5V5h4V3h5v1h4v2h3v2h4v1h4v1h5v2z'/%3E%3C/svg%3E") 0 100% / 240px 46px repeat-x; }
.rp-bright .rp-head p { color: #fff; font-weight: 600; font-size: 15.5px; text-shadow: 0 2px 0 rgba(42, 22, 8, .55); }
.rp-bright .rp-head code { background: var(--ol); color: var(--sun); }

.rp-bright .rp-screen { border: 8px solid var(--wood); outline: 4px solid var(--ol); box-shadow: inset 0 0 0 4px var(--ol), 0 12px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-screen__note { color: #fff; font-weight: 600; text-shadow: 0 2px 0 rgba(42, 22, 8, .55); }

.rp-bright .rp-chat, .rp-bright .rp-game, .rp-bright .rp-box { border: 4px solid var(--ol); background: #23150b; box-shadow: inset 0 0 0 4px var(--wood-lo), 0 8px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-chat__head { background: var(--wood); border-bottom: 4px solid var(--ol); box-shadow: inset 0 3px 0 var(--wood-hi); }
.rp-bright .rp-chat__ch, .rp-bright .rp-chat__head .rp-live { color: #fff; text-shadow: 0 2px 0 var(--wood-lo); }

.rp-bright .rp-board, .rp-bright .rp-steps li, .rp-bright .rp-card, .rp-bright .rp-land__b, .rp-bright .rp-trail {
  --ink: #2f1c0c; --ink-2: #4f341c; --ink-3: #8a6a48; --cream: #2a1608; --cream-2: #3a2412; --g1: #c2410c; --g2: #b8541c; --gline: rgba(42, 22, 8, .18); --soil: var(--parch);
}
.rp-bright .rp-board { border: 4px solid var(--ol); background: var(--parch); box-shadow: inset 0 0 0 3px #fff6dc, 0 8px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-board__head { background: var(--parch-lo); border-bottom: 4px solid var(--ol); }
.rp-bright .rp-board li { border-bottom: 2px dashed rgba(42, 22, 8, .14); }
.rp-bright .rp-board li:nth-child(-n + 3) .rp-board__rank { color: var(--wud); }
.rp-bright .rp-board__rank { font-family: "Jersey 10", var(--pxl); font-weight: 400; font-size: 30px; }

.rp-bright .rp-lands, .rp-bright .rp-steps, .rp-bright .rp-where { gap: 16px; background: none; border: 0; }
.rp-bright .rp-land { border: 4px solid var(--ol); background: var(--parch); box-shadow: 0 8px 0 rgba(42, 22, 8, .3); transition: transform .15s; }
.rp-bright .rp-land:hover { transform: translateY(-4px); }
.rp-bright .rp-land__art { border-bottom: 4px solid var(--ol); }
.rp-bright .rp-land__art canvas { filter: saturate(1.2) brightness(1.05); }
.rp-bright .rp-land__b { background: var(--parch); }
.rp-bright .rp-land__b b, .rp-bright .rp-steps b, .rp-bright .rp-card b, .rp-bright .rp-trail b { font-family: var(--pxl); font-weight: 700; text-transform: uppercase; }

.rp-bright .rp-steps li, .rp-bright .rp-card { border: 4px solid var(--ol); background: var(--parch); box-shadow: inset 0 0 0 3px #fff6dc, 0 8px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-steps img { filter: drop-shadow(2px 0 0 var(--ol)) drop-shadow(-2px 0 0 var(--ol)) drop-shadow(0 2px 0 var(--ol)) drop-shadow(0 -2px 0 var(--ol)); }
.rp-bright .rp-steps .label, .rp-bright .rp-card > .label { color: var(--wud-lo); }
.rp-bright .rp-card b code { color: var(--wud); }
.rp-bright .rp-link { color: var(--wud-lo); font-weight: 700; }

.rp-bright .rp-trail { margin-top: 16px; border: 4px solid var(--ol); background: var(--parch); box-shadow: inset 0 0 0 3px #fff6dc, 0 8px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-trail li + li { border-left: 4px solid var(--ol); }
.rp-bright .rp-trail em { color: var(--wud-lo); }
.rp-bright .rp-fine { color: #fff; text-shadow: 0 2px 0 rgba(42, 22, 8, .55); }

.rp-bright .rp-wiki { border: 4px solid var(--ol); background: var(--grass) repeating-linear-gradient(90deg, transparent 0 46px, rgba(62, 137, 72, .35) 46px 50px); box-shadow: inset 0 6px 0 var(--grass-hi), inset 0 -8px 0 var(--grass-lo), 0 10px 0 rgba(42, 22, 8, .3); }
.rp-bright .rp-wiki p { color: #fff; font-weight: 600; text-shadow: 0 2px 0 rgba(42, 22, 8, .5); }
.rp-bright .rp-wiki .rp-idx { box-shadow: none; }
.rp-bright .rp-wiki__icons img { filter: drop-shadow(3px 0 0 var(--ol)) drop-shadow(-3px 0 0 var(--ol)) drop-shadow(0 3px 0 var(--ol)) drop-shadow(0 -3px 0 var(--ol)); }

.rp-bright .foot { background: var(--ol); border-top: 6px solid var(--grass-lo); box-shadow: inset 0 6px 0 var(--grass); padding-top: 30px; }

@media (max-width: 960px) {
  .rp-bright .rp-recipe > div:nth-child(4) { border-left: 0; }
  .rp-bright .rp-recipe > div:nth-child(n + 4) { border-top: 4px solid var(--ol); }
  .rp-bright .rp-trail li + li { border-left: 0; border-top: 4px solid var(--ol); }
}
@media (max-width: 560px) {
  .rp-bright .rp-recipe > div:nth-child(n) { border-left: 0; border-top: 0; }
  .rp-bright .rp-recipe > div:nth-child(even) { border-left: 4px solid var(--ol); }
  .rp-bright .rp-recipe > div:nth-child(n + 3) { border-top: 4px solid var(--ol); }
  .rp-bright .rp-stage::after { height: 72px; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-bright .rp::before, .rp-bright .rp::after, .rp-bright .rp-stage::after { animation: none; }
}
.rp-bright .rp-card b code { font-family: var(--pxl); font-weight: 700; }