/* Reader Picks: Tecmo-style NES look. Palette: #000 #fcfcfc #00a800 #008800 #d82800 #0058f8 #f8b800 */
.rp{--k:#000;--w:#fcfcfc;--g:#00a800;--r:#d82800;--b:#0058f8;--y:#f8b800;--fs:max(11px,3.2cqw);box-sizing:border-box;width:min(100%,420px);aspect-ratio:1/1;margin:2rem auto;position:relative;overflow:hidden;container-type:size;font-family:"Press Start 2P","Courier New",ui-monospace,monospace;color:var(--w);background:var(--g) center/100% 100%;image-rendering:pixelated;border:4px solid var(--k);box-shadow:0 0 0 4px var(--w),0 0 0 8px var(--k)}
.rp *{box-sizing:border-box}
/* scanlines sit on the field only; screens/logos stack above */
.rp::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.rp-sb{position:absolute;inset:0 0 auto;box-sizing:content-box!important;height:max(44px,10cqw);z-index:3;display:flex;align-items:center;gap:2cqw;padding:0 2.5cqw;background:var(--k);border-bottom:.8cqw solid var(--w);font-size:var(--fs);color:var(--y);white-space:nowrap}
.rp-sb .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.rp-sb .who b{color:var(--w);font-weight:400}
.rp-s{position:absolute;inset:calc(max(44px,10cqw) + .8cqw) 0 0;z-index:1;padding:2cqw;display:flex;flex-direction:column;gap:1.8cqw;font-size:var(--fs);line-height:1.25;transition:transform .3s steps(5)}
.rp-s.in{transform:translateX(100%)}.rp-s.out{transform:translateX(-100%)}
.rp-box{background:var(--k);border:.8cqw solid var(--w);box-shadow:0 0 0 .8cqw var(--k);padding:1.4cqw 2cqw}
.rp h3{margin:0;font-size:max(12px,3.8cqw);color:var(--y);text-transform:uppercase;font-weight:400}
.rp h3:focus{outline:none}
.rp p{margin:0}
.rp button{font:inherit;color:var(--w);background:var(--k);border:.8cqw solid var(--w);box-shadow:0 0 0 .6cqw var(--k);padding:1cqw;cursor:pointer;min-width:0;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rp button:focus-visible{outline:3px dashed var(--y);outline-offset:-7px}
@media (hover:hover){.rp button:hover{background:#202020}}
.rp button:active{transform:translate(2px,2px)}
.rp button:disabled{opacity:.6;cursor:wait}
.rp .go{background:var(--r);color:var(--w)}
.rp img{display:block;image-rendering:pixelated;flex:none;margin:0 auto}
.rp .x1{width:24px;height:24px}.rp .x2{width:48px;height:48px}.rp .x4{width:96px;height:96px}
.rp .nm{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:12px}
.rp-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:1.6cqw}
.rp-grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:2px;overflow:hidden}
.rp-id{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqw;text-align:center}
.rp-row{display:flex;gap:2.5cqw}.rp-row>*{flex:1}
.rp-bar{display:flex;gap:1cqw;margin:1cqw 0}.rp-bar i{width:max(10px,3.6cqw);height:max(10px,3.6cqw);background:var(--k);border:2px solid var(--w)}.rp-bar i.d{background:var(--y)}.rp-bar i.c{background:var(--r)}
.rp-tip{color:var(--y)}
.rp-vs{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;gap:1.6cqw;align-items:stretch}
.rp-vs>b{align-self:center;color:var(--y);font-size:max(12px,4.4cqw);font-weight:400;text-shadow:2px 2px 0 var(--k)}
.rp-vs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;text-align:center;overflow:hidden;min-width:0}
.rp-vs .tn{font-size:11px;line-height:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:100%}
.rp-vs .nm{color:var(--y)}
.rp-vs button[aria-pressed=true],.rp-vs button.pk{border-color:var(--y);background:#503000}
.rp-vs button.pk{animation:rpB .22s steps(3)}@keyframes rpB{50%{transform:translateY(-6px)}}
.rp-sum{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1.4cqw}
.rp-m{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2px;background:var(--k);border:2px solid var(--w);padding:2px;min-height:0;min-width:0;overflow:hidden;color:var(--w);font:inherit}
button.rp-m{padding:2px;min-height:0;border-width:2px;box-shadow:none}
.rp-m span{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;gap:1px}
.rp-m span img{outline:2px solid #888;outline-offset:-2px;opacity:.6}
.rp-m span .nm{color:#bbb}
.rp-m span.w img{outline:3px solid var(--y);opacity:1}
.rp-m span.w .nm{color:var(--y)}
.rp-m span.w::before{content:"PICK";position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--y);color:var(--k);font-size:11px;line-height:11px;padding:0 2px}
.rp-m i{display:none}
.rp .nm{font-family:"Courier New",ui-monospace,monospace;font-weight:700;letter-spacing:-.3px}
.rp-c{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3cqw}
.rp-blink{animation:rpBl 1s steps(2) infinite}@keyframes rpBl{50%{opacity:0}}
.rp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rp-hold{background:#000;transform:none!important;z-index:8;inset:0!important}
.rp-hold img{flex:1;min-height:0;width:auto;max-width:100%;-webkit-touch-callout:default;user-select:auto}
@media(prefers-reduced-motion:reduce){.rp *{animation:none!important;transition:none!important}}
.rp-td{position:absolute;inset:0;background:#000}
.rp-td canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.rp-tdt{position:absolute;inset:6% 4% auto;text-align:center;background:rgba(0,0,0,.75);border:.8cqw solid var(--w);padding:2cqw}
.rp-tdt h3{font-size:max(18px,7cqw);color:var(--y);text-shadow:3px 3px 0 var(--r)}
.rp-tdt p{display:flex;align-items:center;justify-content:center;gap:2cqw;margin-top:2cqw}
.rp-tdt img{margin:0}
.rp .rp-skip{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:0;box-shadow:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3cqw;font-size:11px;color:var(--w)}
.rp .rp-skip:hover{background:transparent}
.rp .rp-snd{flex:none;min-width:44px;min-height:44px;height:44px;padding:0;border-width:2px;box-shadow:none;color:#888;display:flex;align-items:center;justify-content:center}
.rp .rp-snd svg{width:24px;height:24px}.rp .rp-snd .on{display:none}.rp .rp-snd.is-on{color:var(--y)}.rp .rp-snd.is-on .on{display:inline}.rp .rp-snd.is-on .off{display:none}
.rp-cta{margin-top:1cqw;color:var(--w);font-size:var(--fs);line-height:1.6}
.rp.rp-start .rp-grid button{animation:rpPu 2.4s steps(4) infinite both}@keyframes rpPu{0%,70%,100%{transform:none}80%{transform:scale(1.06)}90%{transform:scale(1.03)}}
.rp.rp-start{animation:rpSh 2s steps(8) infinite}@keyframes rpSh{0%,100%{box-shadow:0 0 0 4px var(--w),0 0 0 8px var(--k)}50%{box-shadow:0 0 0 4px var(--y),0 0 0 8px var(--k)}}
@media(prefers-reduced-motion:reduce){.rp,.rp.rp-start,.rp *{animation:none!important;transition:none!important}}