/* Layered over autobattle's theme.css, which supplies the base palette. */ .rp-top{display:flex;align-items:center;gap:1.25rem;padding:.75rem 1rem;border-bottom:1px solid #2a2a38;flex-wrap:wrap} /* The wordmark is now artwork, so the type rules only matter as a fallback if the image ever fails to load. width/height are on the to reserve the space and stop the header jumping as it decodes. */ .rp-brand{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#d0a028; text-decoration:none;display:inline-flex;align-items:center;flex:0 0 auto} .rp-brand img{display:block;height:2rem;width:auto} .rp-foot a{color:#9aa0c0} .rp-nav{display:flex;gap:1rem} .rp-nav a{color:#9aa0c0;text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent} .rp-nav a.on{color:#e2e2ea;border-bottom-color:#d0a028} .rp-me{margin-left:auto;color:#58649a;font-size:.85rem} .rp-main{max-width:56rem;margin:0 auto;padding:1.5rem 1rem 3rem} .rp-foot{text-align:center;color:#58649a;font-size:.8rem;padding:2rem 1rem} h2{font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;color:#9aa0c0;margin:2rem 0 .5rem} .rp-note{color:#58649a;font-size:.85rem;line-height:1.5;margin:.35rem 0 1rem} .rp-empty{color:#58649a;padding:1rem;border:1px dashed #2a2a38;border-radius:6px} .rp-standing{display:flex;align-items:center;gap:1.25rem;padding:1.25rem;border:1px solid #2a2a38;border-radius:8px;flex-wrap:wrap} .rp-rank{font-size:2.6rem;font-weight:700;color:#d0a028;line-height:1} .rp-standing-meta{display:flex;flex-direction:column;gap:.15rem} .rp-standing-meta span{color:#58649a;font-size:.85rem} .rp-standing .btn{margin-left:auto} .rp-table{width:100%;border-collapse:collapse} .rp-table th{text-align:left;font-size:.75rem;text-transform:uppercase;color:#58649a;padding:.4rem .5rem} .rp-table td{padding:.45rem .5rem;border-top:1px solid #22222e} .rp-num{color:#d0a028;font-variant-numeric:tabular-nums;width:4rem} .rp-feed{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem} .rp-feed li{padding:.6rem .75rem;border-left:3px solid #2a2a38;background:#16161f;border-radius:0 6px 6px 0} .rp-feed li.lost{border-left-color:#a33} .rp-feed li.held{border-left-color:#3a7} .rp-cards{display:block;margin-top:.2rem} .rp-cards em{font-style:normal;color:#9aa0c0;font-size:.85rem} .rp-cards em:not(:last-child):after{content:" · ";color:#3a3a4a} /* Wider cells now that a card carries its rules text: comparing fifteen cards to pick three should not require fifteen popups. */ .rp-pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem;margin:.5rem 0 1rem} .rp-card{display:flex;flex-direction:column;gap:.2rem;padding:.55rem .65rem;border:1px solid #2a2a38;border-radius:6px;cursor:pointer;background:#16161f} .rp-card-head{display:flex;align-items:center;gap:.4rem;min-width:0} .rp-card-meta{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#58649a} .rp-card-win{color:#9aa0c0} /* Clamped so a long ability cannot make one cell tower over its neighbours -- the '?' still opens the untruncated text. */ .rp-card-rules{font-size:.76rem;line-height:1.35;color:#9aa0c0; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .rp-card-rules em{color:#4d5478} .rp-card:has(input:checked){border-color:#d0a028;background:#1e1a10} .rp-card.spent{opacity:.4;cursor:not-allowed} .rp-card.intel{border-color:#a33} .rp-card input{margin-right:.4rem} .rp-card-name{font-size:.9rem} .rp-card-tag{font-size:.7rem;text-transform:uppercase;color:#58649a;letter-spacing:.04em} .rp-card.intel .rp-card-tag{color:#c55} .rp-cost{color:#9aa0c0;font-size:.85rem;min-height:1.2em;margin:.25rem 0 1rem} .rp-target{display:block;margin:1rem 0;color:#9aa0c0;font-size:.85rem} .rp-target select{display:block;margin-top:.3rem;padding:.45rem;background:#16161f;color:#e2e2ea;border:1px solid #2a2a38;border-radius:6px;min-width:18rem;max-width:100%} .btn{display:inline-block;padding:.5rem .9rem;border-radius:6px;border:1px solid #d0a028;background:#d0a028;color:#14140f;font-weight:600;text-decoration:none;cursor:pointer} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-sm{padding:.25rem .6rem;font-size:.8rem} .btn-ghost{background:transparent;color:#9aa0c0;border-color:#2a2a38} .rp-result{margin-top:1rem;padding:.85rem 1rem;border-radius:6px;border:1px solid #2a2a38} .rp-result.good{border-color:#3a7;background:#0f1a14} .rp-result.bad{border-color:#a33;background:#1a0f0f} .gate{max-width:34rem;margin:3rem auto;text-align:center} .gate-lede{color:#d0a028} .gate-actions{margin-top:1.5rem} /* ── card viewer ─────────────────────────────────────────────────────────── */ .rp-info{position:relative;margin-left:auto;background:#1f1f2b;border:1px solid #3a3a4a;color:#9aa0c0; border-radius:50%;width:1.4rem;height:1.4rem;line-height:1;font-size:.75rem;cursor:pointer; padding:0;flex:0 0 auto;font-weight:700} .rp-info>*,.rp-info{z-index:1} .rp-info:hover{color:#d0a028;border-color:#d0a028} .rp-card{position:relative} .rp-card .rp-card-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto} .rp-chip{background:#1b1b26;border:1px solid #2a2a38;color:#9aa0c0;border-radius:4px; padding:.15rem .45rem;font-size:.8rem;cursor:pointer;font-family:inherit} .rp-chip:hover{border-color:#d0a028;color:#e2e2ea} .rp-cd{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50; width:min(26rem,calc(100vw - 2rem));max-height:80vh;overflow-y:auto; background:#14141c;border:1px solid #d0a028;border-radius:10px;padding:1rem 1.1rem; box-shadow:0 12px 40px rgba(0,0,0,.6)} .rp-cd-x{position:absolute;right:.5rem;top:.4rem;background:transparent;border:0;color:#58649a; font-size:1.3rem;cursor:pointer;line-height:1} .rp-cd-x:hover{color:#e2e2ea} .rp-cd-head{display:flex;gap:.75rem;align-items:flex-start;margin-right:1rem} .rp-cd-art{width:4.5rem;height:auto;border-radius:6px;flex:0 0 auto} .rp-cd h3{margin:0 0 .2rem;font-size:1rem;color:#e2e2ea} .rp-cd-meta{margin:0;color:#58649a;font-size:.78rem} .rp-cd-rules{margin:.75rem 0 0;font-size:.88rem;line-height:1.5;color:#c8c8d8} .rp-cd-win{margin:.6rem 0 0;font-size:.82rem;color:#9aa0c0} .rp-cd-win strong{color:#d0a028} .rp-cd-flavor{margin:.6rem 0 0;font-size:.8rem;font-style:italic;color:#4d5478} /* ── scouting ────────────────────────────────────────────────────────────── */ .rp-scout-panel{position:relative;margin-top:1rem;padding:.9rem 1rem;border:1px solid #2a2a38; border-radius:8px;background:#14141c} .rp-scout-panel h3{margin:0 0 .3rem;font-size:1rem;color:#d0a028} .rp-seen{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:.55rem} .rp-seen li{padding:.4rem .55rem;border-left:2px solid #2a2a38;background:#16161f;border-radius:0 5px 5px 0} /* ── opening draft ───────────────────────────────────────────────────────── */ .rp-draft .rp-pool{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))} .rp-draft .rp-card{gap:.25rem} .rp-draft .rp-card input:disabled ~ .rp-card-name{opacity:.45} /* ── table helpers ───────────────────────────────────────────────────────── */ /* Wide tables scroll INSIDE their own box. The page body must never scroll sideways -- on a phone that turns every vertical swipe into a fight. */ .rp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -.25rem;padding:0 .25rem} .rp-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .rp-you{background:#1b1a12} .rp-you td{border-top-color:#3a3320} /* ══ MOBILE ═══════════════════════════════════════════════════════════════ Written as a real layer rather than a couple of overrides. The game is a grid of tappable cards and a few dense tables, and both fail on a phone in specific ways: 1.25rem tap targets are unhittable, six-column tables force the body to scroll sideways, and a centred modal lands under the thumb. */ /* overflow-x:hidden was here as a horizontal-scroll guard and it had to go: an ancestor with any overflow other than visible silently disables position:sticky for everything inside, which is why the raid action bar would not pin. It was masking rather than preventing anyway -- the fix for sideways scroll is the element that overflows, and the deploy measures for it at four viewports. max-width still stops the common causes. */ html,body{max-width:100%} img,table{max-width:100%} @media (max-width:48rem){ .rp-main{padding:1rem .75rem 4rem} /* Header: brand on the left, rank chip on the right, nav on its own row so it never collides with a long display name. */ .rp-top{position:sticky;top:0;z-index:20;background:#0f0f16;gap:.5rem 1rem; padding:.6rem .75rem;padding-top:max(.6rem, env(safe-area-inset-top))} .rp-brand{font-size:.95rem} .rp-brand img{height:1.6rem} .rp-me{font-size:.78rem;margin-left:auto} .rp-nav{order:3;width:100%;gap:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:.15rem} .rp-nav::-webkit-scrollbar{display:none} .rp-nav a{white-space:nowrap;padding:.6rem .5rem;min-height:2.75rem; display:flex;align-items:center} h2{margin:1.5rem 0 .4rem} /* Two columns at 360px, three once there is room. Tap targets get real height -- these are the primary control in the game. */ /* One column on a phone: a card now carries a paragraph of rules text, and two columns of that is unreadable. */ .rp-pool{grid-template-columns:1fr;gap:.45rem} .rp-card{padding:.65rem .6rem;min-height:0} .rp-card-name{font-size:.92rem;line-height:1.25} .rp-card-rules{font-size:.8rem;-webkit-line-clamp:3} /* Tap targets. 1.25rem was unhittable and 1.9rem (30px) still missed the 32px floor these were measured against; Apple asks for 44. The button is drawn small but its HIT AREA is padded out to 44 with a transparent box, so the control stays visually light without being a dexterity test. */ .rp-info{width:2.75rem;height:2.75rem;font-size:.85rem;margin-left:auto; display:inline-flex;align-items:center;justify-content:center; border:0;background:transparent} .rp-info::before{content:"";position:absolute;inset:auto;width:1.6rem;height:1.6rem; border:1px solid #2a2a38;border-radius:50%} .rp-info:hover::before{border-color:#d0a028} .rp-chip{padding:.55rem .7rem;font-size:.85rem;min-height:2.4rem} .rp-standing{padding:1rem;gap:.75rem} .rp-rank{font-size:2.2rem} .rp-standing .btn{margin-left:0;width:100%;text-align:center} .rp-target select{min-width:0;width:100%;font-size:1rem} /* 1rem stops iOS zooming on focus */ .btn{padding:.65rem 1rem;font-size:.95rem} .btn-sm{padding:.4rem .7rem} .rp-table th,.rp-table td{padding:.5rem .4rem;font-size:.85rem} .rp-feed li{padding:.55rem .65rem} /* Card details as a bottom sheet: reachable by thumb, and it does not cover the card you were comparing it against. */ /* left/right:0 with width:auto, NOT width:100%. There is no global box-sizing:border-box reset in this stack (deliberately, upstream), so width:100% plus horizontal padding is wider than the viewport and clips the rules text off the right edge. Anchoring both sides sidesteps it without imposing a reset on anything else. */ .rp-cd{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-width:none; max-height:72vh;border-radius:12px 12px 0 0;border-left:0;border-right:0;border-bottom:0; padding-bottom:max(1rem, env(safe-area-inset-bottom))} .rp-cd-x{width:2.4rem;height:2.4rem;font-size:1.5rem;right:.25rem;top:.15rem} .rp-cd-art{width:3.5rem} .rp-scout-panel{padding:.75rem .8rem} } @media (max-width:22rem){ .rp-card-name{font-size:.88rem} .rp-rank{font-size:1.9rem} } /* Coarse pointers get bigger targets regardless of viewport width -- a tablet is wide and still touched. */ /* A tablet is wide and still touched, so size targets by INPUT type as well as by width. */ @media (pointer:coarse){ .rp-info{width:2.75rem;height:2.75rem;display:inline-flex;align-items:center; justify-content:center;border:0;background:transparent} .rp-info::before{content:"";position:absolute;width:1.6rem;height:1.6rem; border:1px solid #2a2a38;border-radius:50%} .rp-card{min-height:3.4rem} .rp-nav a{padding:.6rem .5rem;min-height:2.75rem;display:flex;align-items:center} .rp-chip{min-height:2.4rem;padding:.55rem .7rem} .btn-sm{padding:.55rem .8rem} } /* Explicit border-box on the few boxes that combine a width with padding. Deliberately NOT a global reset -- upstream's theme.css relies on the default content-box and a blanket reset would reflow the shared chrome. */ .rp-cd,.rp-scout-panel,.rp-result,.rp-card,.rp-standing,.rp-empty,.rp-target select{box-sizing:border-box} .rp-cd-rules,.rp-cd-meta,.rp-cd-win,.rp-cd-flavor{overflow-wrap:anywhere} /* ── live rail ───────────────────────────────────────────────────────────── */ /* Desktop: a permanent column beside the page. Mobile: a slide-up panel behind a toggle, so ambient awareness never costs the primary screen. */ .rp-shell{display:block} .rp-rail{border:1px solid #2a2a38;border-radius:8px;background:#12121a;padding:.85rem .9rem} .rp-rail h3{margin:1rem 0 .4rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase; color:#58649a;display:flex;align-items:center;gap:.4rem} /* An author display: rule outranks the UA stylesheet's [hidden]{display:none}, so "Climbing at you" stayed visible with nothing under it. Any element the JS hides with .hidden = true needs this, not just this heading. */ .rp-rail [hidden],[hidden]{display:none !important} .rp-rail h3:first-of-type{margin-top:.75rem} .rp-rail-more{margin-left:auto;color:#d0a028;text-decoration:none;font-size:.7rem} .rp-rail-me{display:flex;align-items:baseline;gap:.5rem;padding-bottom:.6rem;border-bottom:1px solid #22222e} .rp-rail-rank{font-size:1.5rem;font-weight:700;color:#d0a028;line-height:1} .rp-rail-sub{color:#58649a;font-size:.78rem} .rp-rail-top,.rp-rail-threats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem} .rp-rail-top li,.rp-rail-threats li{display:flex;align-items:baseline;gap:.45rem;font-size:.82rem} .rp-rail-n{color:#3a3a4a;width:1rem;flex:0 0 auto;font-variant-numeric:tabular-nums} .rp-rail-name{color:#c8c8d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-rail-name em{font-style:normal;color:#d0a028} .rp-rail-score{margin-left:auto;color:#9aa0c0;font-variant-numeric:tabular-nums;flex:0 0 auto} .rp-rail-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem; max-height:26rem;overflow-y:auto} .rp-ev{display:flex;gap:.5rem;align-items:baseline;font-size:.8rem;line-height:1.35; padding:.35rem .45rem;border-left:2px solid #2a2a38;background:#16161f;border-radius:0 4px 4px 0} .rp-ev-take{border-left-color:#c55} .rp-ev-hold{border-left-color:#3a7} .rp-ev-quiet{border-left-color:#2a2a38} .rp-ev-t{color:#c8c8d8} .rp-ev-ago{margin-left:auto;color:#4d5478;font-size:.72rem;flex:0 0 auto} @keyframes rp-flash{from{background:#241f10}to{background:#16161f}} .rp-ev-new{animation:rp-flash 1.6s ease-out} .rp-live{width:.45rem;height:.45rem;border-radius:50%;background:#2a2a38;transition:background .2s} .rp-live.on{background:#3a7} /* The mobile ticker: a persistent bar, not a button that hides the feed. */ .rp-ticker{position:fixed;left:0;right:0;bottom:0;z-index:30;width:auto;box-sizing:border-box; display:flex;align-items:center;gap:.5rem;text-align:left; background:#15151f;border:0;border-top:1px solid #2a2a38;color:#c8c8d8; font-family:inherit;font-size:.82rem;cursor:pointer; padding:.6rem .8rem;padding-bottom:max(.6rem, env(safe-area-inset-bottom)); box-shadow:0 -6px 20px rgba(0,0,0,.45)} .rp-ticker-rank{color:#d0a028;font-weight:700;flex:0 0 auto} .rp-ticker-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#9aa0c0} .rp-ticker-text.rp-tone-take{color:#e0a0a0} .rp-ticker-text.rp-tone-hold{color:#9ad3b8} @keyframes rp-tick-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}} .rp-ticker-in{animation:rp-tick-in .35s ease-out} .rp-ticker-chev{flex:0 0 auto;width:0;height:0;border-left:.32rem solid transparent; border-right:.32rem solid transparent;border-bottom:.4rem solid #58649a; transition:transform .2s} .rp-rail-open .rp-ticker-chev{transform:rotate(180deg)} .rp-rail-badge{display:inline-block;background:#d0a028;color:#14140f;flex:0 0 auto; border-radius:999px;padding:.05rem .42rem;font-size:.72rem;font-weight:700} .rp-rail-scrim{position:fixed;inset:0;z-index:28;background:rgba(0,0,0,.5)} /* Wide: rail sits beside the page and the toggle disappears. */ @media (min-width:64rem){ .rp-shell{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1.25rem; max-width:76rem;margin:0 auto;align-items:start} .rp-main{max-width:none;margin:0;padding-left:1rem} .rp-rail{position:sticky;top:4.25rem;margin:1.5rem 1rem 0 0} .rp-ticker,.rp-rail-scrim{display:none} } /* Narrow: the ticker is always on screen; the full rail slides up over it. */ @media (max-width:63.99rem){ /* Reserve room so the ticker never sits on top of the last row of content. */ .rp-main{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))} .rp-rail{position:fixed;left:0;right:0;bottom:0;z-index:29;box-sizing:border-box; border-radius:14px 14px 0 0;border-left:0;border-right:0;border-bottom:0; max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(101%);transition:transform .24s ease-out; padding-bottom:calc(4.2rem + env(safe-area-inset-bottom))} .rp-rail-open .rp-rail{transform:translateY(0)} .rp-rail-feed{max-height:none} /* A grab handle, so the panel reads as draggable/dismissable rather than as a page that has appeared from nowhere. */ .rp-rail::before{content:"";display:block;width:2.5rem;height:.25rem;border-radius:999px; background:#2a2a38;margin:0 auto .7rem} .rp-rail h3{margin:1.1rem 0 .45rem} .rp-rail-feed .rp-ev{font-size:.85rem;padding:.5rem .55rem} .rp-rail-top li,.rp-rail-threats li{font-size:.88rem;padding:.15rem 0} } .rp-rail-you .rp-rail-name{color:#e2e2ea} .rp-rail-you .rp-rail-score{color:#d0a028} /* Close button was 24px even on desktop; small for a mouse, unusable by thumb. */ .rp-cd-x{width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center} /* ── admin ───────────────────────────────────────────────────────────────── */ .rp-admin-filter{width:100%;box-sizing:border-box;padding:.6rem .7rem;margin:.5rem 0 1rem; background:#16161f;color:#e2e2ea;border:1px solid #2a2a38;border-radius:6px; font-family:inherit;font-size:1rem} .rp-admin-table{font-size:.85rem} .rp-admin-rules{color:#9aa0c0;max-width:32rem;font-size:.8rem;line-height:1.4} .rp-banned{opacity:.5} .rp-banned .rp-chip{text-decoration:line-through} @media (max-width:48rem){ .rp-admin-rules{max-width:16rem} } .rp-quick{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0 1rem} .rp-quick-btn{text-transform:lowercase} /* live page updates */ @keyframes rp-bump{0%{transform:scale(1)}35%{transform:scale(1.18);color:#fff}100%{transform:scale(1)}} .rp-bump{animation:rp-bump .5s ease-out} .rp-stale{margin:0 0 1rem;padding:.6rem .8rem;border:1px solid #3a3320;background:#1b1a12; border-radius:6px;color:#c8c8d8;font-size:.85rem} .rp-stale button{margin-left:.4rem;background:#d0a028;color:#14140f;border:0;border-radius:5px; padding:.35rem .7rem;font-family:inherit;font-weight:600;cursor:pointer;min-height:2.2rem} .rp-sort{cursor:pointer;user-select:none;white-space:nowrap} .rp-sort:hover{color:#d0a028} .rp-sort.on{color:#d0a028} .rp-arrow{font-size:.6rem;opacity:.8} /* ── avatars ─────────────────────────────────────────────────────────────── */ .rp-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; border-radius:50%;vertical-align:middle; border:1px solid #2a2a38;background:#1b1b26} /* object-fit:cover on a CIRCLE throws away the corners of a square source, so a face that fills its frame loses its edges. contain keeps the whole crop visible inside the circle; object-position sits slightly high because faces in card art are usually above centre. The art still has to be a centred face with margin -- this only stops the display from making a good crop worse. */ img.rp-av{object-fit:contain;object-position:center 45%} .rp-av-mono{font-weight:700;font-size:.8em;color:#e2e2ea;letter-spacing:0} .rp-name{display:inline-flex;align-items:center;gap:.45rem;min-width:0} .rp-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-av-lg{border-width:2px;border-color:#3a3a4a} .rp-av-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.5rem;margin:.5rem 0 1rem} .rp-av-pick label{display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer; padding:.5rem;border:1px solid #2a2a38;border-radius:8px;background:#16161f} .rp-av-pick label:has(input:checked){border-color:#d0a028;background:#1e1a10} .rp-av-pick input{margin:0} /* ── raid detail: what they sent vs what answered it ─────────────────────── */ .rp-vs{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:.4rem 0 .25rem} .rp-vs-side{display:flex;flex-direction:column;gap:.2rem;min-width:0} .rp-vs-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#4d5478} .rp-vs-label em{font-style:normal;color:#58649a;text-transform:none;letter-spacing:0} .rp-seat{display:block;font-size:.74rem;margin-top:.15rem} @media (max-width:48rem){ .rp-vs{gap:.5rem} .rp-vs-side{flex:1 1 100%} } /* ── your walls ──────────────────────────────────────────────────────────── */ .rp-walls{border:1px solid #2a2a38;border-radius:8px;background:#12121a;padding:.6rem .85rem;margin:0 0 1.25rem} .rp-walls summary{cursor:pointer;font-size:.9rem;color:#c8c8d8} .rp-walls summary::marker{color:#58649a} .rp-wall-list{list-style:none;margin:.7rem 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.4rem} .rp-wall-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; padding:.4rem .5rem;border-left:2px solid #2a2a38;background:#16161f;border-radius:0 5px 5px 0} .rp-wall-next{border-left-color:#d0a028 !important;background:#1b1a12} .rp-wall-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:#4d5478; min-width:5.5rem;flex:0 0 auto} .rp-wall-next .rp-wall-tag{color:#d0a028} .rp-wall-avg{margin-left:auto;color:#9aa0c0;font-variant-numeric:tabular-nums;font-size:.82rem;flex:0 0 auto} @media (max-width:48rem){ .rp-wall-tag{min-width:0} .rp-wall-avg{margin-left:0} } /* ── wall editor ─────────────────────────────────────────────────────────── */ .rp-wall-pick{display:flex;gap:.25rem;margin-top:.15rem;flex-wrap:wrap} .rp-wall-opt{display:inline-flex;align-items:center;justify-content:center;cursor:pointer; min-width:2rem;min-height:2rem;border:1px solid #2a2a38;border-radius:5px;background:#1b1b26} .rp-wall-opt input{position:absolute;opacity:0;width:0;height:0} .rp-wall-opt span{font-size:.8rem;color:#58649a;padding:0 .35rem} .rp-wall-opt:has(input:checked){border-color:#d0a028;background:#241f10} .rp-wall-opt:has(input:checked) span{color:#d0a028;font-weight:700} .rp-wall-opt:has(input:disabled){opacity:.4;cursor:not-allowed} .rp-card.rp-wall-bad{border-color:#a33} @media (pointer:coarse){ .rp-wall-opt{min-width:2.5rem;min-height:2.5rem} } /* One row per wall. The trio is pinned to RP_TEAM_SIZE columns rather than auto-fill, because "each wall on its own line" is the whole point -- an auto-fill grid packs four cards abreast on a wide screen and the five walls stop being visible as five things. */ .rp-wall-tools{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:.5rem 0 .75rem} .rp-sortby{color:#9aa0c0;font-size:.85rem} .rp-sortby select{margin-left:.4rem;padding:.35rem .45rem;background:#16161f;color:#e2e2ea; border:1px solid #2a2a38;border-radius:6px;font-family:inherit;font-size:.85rem} .rp-wall-row{border:1px solid #2a2a38;border-radius:8px;background:#12121a; padding:.55rem .6rem .3rem;margin:0 0 .6rem} /* An author rule on .rp-wall-row would outrank the UA stylesheet's [hidden]{display:none} and the empty "waiting for a wall" row would never hide. Stated explicitly so it survives any later display: here. */ .rp-wall-row[hidden]{display:none} .rp-wall-row.rp-wall-next{border-color:#3a3320;background:#15140f} .rp-wall-row.rp-row-bad{border-color:#a33} .rp-wall-head{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .45rem;font-size:.9rem;font-weight:600} .rp-wall-name{color:#c8c8d8} .rp-wall-head .rp-wall-tag{min-width:0} .rp-wall-head .rp-wall-avg{margin-left:auto} .rp-wall-row .rp-pool{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 .35rem} /* The homeless row can hold the whole pool, so it packs instead. */ .rp-wall-loose .rp-pool{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))} /* Below three comfortable columns, stack rather than crush the cards. */ @media (max-width:60rem){ .rp-wall-row .rp-pool{grid-template-columns:1fr} } /* ── dragging ────────────────────────────────────────────────────────────── */ /* touch-action:none ONLY on the grip. Put it on the card and a swipe to scroll the page on a phone picks the card up instead. */ .rp-grip{touch-action:none;cursor:grab;color:#4d5478;font-size:.95rem;line-height:1; padding:.15rem .25rem;border-radius:4px;flex:0 0 auto;user-select:none} .rp-grip:hover{color:#d0a028;background:#1b1b26} .rp-grip:active{cursor:grabbing} .rp-row-grip{margin-right:.1rem} .rp-row-move{display:inline-flex;gap:.2rem;margin-left:.5rem;flex:0 0 auto} .rp-move{min-width:1.9rem;min-height:1.9rem;border:1px solid #2a2a38;border-radius:5px; background:#1b1b26;color:#9aa0c0;cursor:pointer;font-family:inherit;font-size:.85rem; line-height:1;padding:0} .rp-move:hover:not(:disabled){border-color:#d0a028;color:#e2e2ea} .rp-move:disabled{opacity:.3;cursor:not-allowed} /* The dragged element rides above the page under the finger. pointer-events must be off or elementFromPoint only ever reports the thing being dragged, and it can never find a drop target. */ .rp-drag{position:fixed;z-index:60;pointer-events:none;margin:0; box-shadow:0 10px 30px rgba(0,0,0,.55);border-color:#d0a028 !important; opacity:.95;transform:rotate(.4deg)} body.rp-dragging{cursor:grabbing;user-select:none} /* The placeholder is what actually travels through the list; the drop is just putting the element back where the placeholder stopped. */ .rp-ph{border:1px dashed #d0a028;border-radius:6px;background:#1a1710;box-sizing:border-box} .rp-ph-row{margin:0 0 .6rem} /* The row a card would land in. A card drops into a WALL, not a slot, so the whole row is the target and it says so. */ .rp-wall-row.rp-drop{border-color:#d0a028;background:#1c1a12; box-shadow:inset 0 0 0 1px rgba(208,160,40,.35)} @media (pointer:coarse){ /* The grip is THE control for dragging on a phone, so it gets a real 44px hit box (Apple's floor) while the glyph stays small -- the same trick .rp-info uses. Padding alone gave 31px, which is the size that has already been measured as unhittable on this screen. */ .rp-grip{font-size:1.15rem;padding:0;min-width:2.75rem;min-height:2.75rem; display:inline-flex;align-items:center;justify-content:center} .rp-move{min-width:2.75rem;min-height:2.75rem} } .rp-av-link{display:inline-flex;line-height:0;border-radius:50%;text-decoration:none} .rp-av-link:hover .rp-av{border-color:#d0a028} .rp-forced{border-left:2px solid #d0a028;padding-left:.6rem;color:#c8c8d8} .rp-name-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left} .rp-name-btn:hover span{color:#d0a028;text-decoration:underline} .rp-scout-panel h4{margin:.9rem 0 .3rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#58649a} .rp-scout-walls li{border-left-color:#3a3a4a} /* ── card artwork ────────────────────────────────────────────────────────── */ /* A banner rather than a square: the cards are wide cells carrying rules text, and a tall image would push the text below the fold of the grid. */ .rp-card-art{display:block;width:100%;height:4.5rem;object-fit:cover;object-position:center 30%; border-radius:4px;margin:-.15rem 0 .3rem;background:#1b1b26} .rp-card.spent .rp-card-art{filter:grayscale(1) brightness(.6)} @media (max-width:48rem){ .rp-card-art{height:5.5rem} } /* ── raid actions: reachable without scrolling ───────────────────────────── */ /* The pool is fifteen cards tall on a phone, so the send button sat a long way below the selection. Sticky rather than fixed: it occupies its own space in the flow and only pins itself while the form is still on screen, so it never covers the last card. Offset clears the mobile ticker bar. */ .rp-raid-actions{background:#0f0f16;border-top:1px solid #2a2a38; padding:.7rem .75rem calc(.7rem + env(safe-area-inset-bottom)); margin:1rem -.75rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem} .rp-raid-actions .rp-cost{flex:1 1 100%;margin:0;min-height:0} .rp-raid-actions .rp-target{margin:0;flex:1 1 14rem} .btn-send{flex:0 0 auto;padding:.75rem 1.4rem;font-size:1rem} @media (max-width:63.99rem){ .rp-raid-actions{position:sticky;bottom:3.4rem;z-index:12; box-shadow:0 -8px 20px rgba(0,0,0,.55);border-radius:8px 8px 0 0; margin-left:-.75rem;margin-right:-.75rem} /* Once a full team is picked, make the button unmistakable. */ .rp-raid-actions.rp-ready{border-top-color:#d0a028} .rp-raid-actions.rp-ready .btn-send{box-shadow:0 0 0 2px rgba(208,160,40,.35)} } @media (min-width:64rem){ .rp-raid-actions{position:sticky;bottom:0;border-radius:8px 8px 0 0;margin-left:0;margin-right:0} } /* ── leaderboard ─────────────────────────────────────────────────────────── */ /* The score as a trophy: a shield the number sits inside, so the thing players compete on reads as an award rather than a table cell. Metal only for the top three -- if everything glitters, nothing does. */ .rp-trophy{display:inline-flex;flex-direction:column;align-items:center;justify-content:center; min-width:3.1rem;padding:.28rem .45rem .2rem;border-radius:6px 6px 14px 14px; border:1px solid #2a2a38;background:linear-gradient(180deg,#1c1c27,#15151f);line-height:1} .rp-trophy-num{font-weight:700;font-size:.95rem;color:#c8c8d8;font-variant-numeric:tabular-nums} .rp-trophy-cap{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#4d5478;margin-top:.1rem} .rp-t-gold{border-color:#d0a028;background:linear-gradient(180deg,#3a2e0e,#241c08); box-shadow:0 0 0 1px rgba(208,160,40,.25),0 3px 12px rgba(208,160,40,.18)} .rp-t-gold .rp-trophy-num{color:#f0c85a} .rp-t-silver{border-color:#9aa4b8;background:linear-gradient(180deg,#262b33,#191d23)} .rp-t-silver .rp-trophy-num{color:#d7dee9} .rp-t-bronze{border-color:#a9704a;background:linear-gradient(180deg,#33220f,#20160b)} .rp-t-bronze .rp-trophy-num{color:#e0a072} .rp-trophy-lg{min-width:5rem;padding:.5rem .7rem .38rem;border-radius:8px 8px 20px 20px} .rp-trophy-lg .rp-trophy-num{font-size:1.9rem} .rp-trophy-lg .rp-trophy-cap{font-size:.6rem} /* Podium: the winner raised, flanked by second and third. */ .rp-podium{list-style:none;margin:1.25rem 0 1.75rem;padding:0; display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:.6rem;align-items:end} .rp-pod{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center; padding:1rem .7rem;border:1px solid #2a2a38;border-radius:10px;background:#14141c;position:relative} .rp-pod-1{order:2;padding-top:1.6rem;border-color:#d0a028;background:#191509} .rp-pod-2{order:1} .rp-pod-3{order:3} .rp-pod-place{position:absolute;top:-.7rem;width:1.6rem;height:1.6rem;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700; background:#2a2a38;color:#c8c8d8;border:1px solid #12121a} .rp-pod-1 .rp-pod-place{background:#d0a028;color:#14140f} .rp-pod-name{font-size:.9rem;color:#e2e2ea;overflow-wrap:anywhere} .rp-pod-name em{font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em; color:#d0a028;display:block;margin-top:.1rem} .rp-pod-meta{font-size:.72rem;color:#58649a} .rp-board td{vertical-align:middle} .rp-board .rp-note{font-size:.68rem;display:block} @media (max-width:48rem){ .rp-podium{grid-template-columns:1fr;gap:.5rem} .rp-pod,.rp-pod-1,.rp-pod-2,.rp-pod-3{order:0;flex-direction:row;text-align:left;padding:.75rem; gap:.7rem;align-items:center} .rp-pod-1{padding-top:.75rem} .rp-pod-place{position:static;flex:0 0 auto} .rp-pod-name{flex:1 1 auto;font-size:.95rem} .rp-pod-meta{flex:1 1 100%;order:5} .rp-trophy-lg{min-width:4rem} .rp-trophy-lg .rp-trophy-num{font-size:1.4rem} } .rp-pod-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:.4rem} .rp-pod-link:hover .rp-pod-name{color:#d0a028;text-decoration:underline} .rp-pod-link:hover .rp-av{border-color:#d0a028} @media (max-width:48rem){ .rp-pod-link{flex-direction:row;gap:.7rem;flex:1 1 auto;text-align:left;min-width:0} } /* ── leaderboard on a phone ──────────────────────────────────────────────── */ /* Ten columns is 689px of table in a 375px viewport. Shrinking it makes it both unreadable and sideways-scrolling, so below 48rem each row becomes a card. Same markup -- the headings ride on data-label attributes. The stats sit in a fixed three-column grid rather than flowing, because flowed pairs wrap raggedly and nothing lines up between one card and the next, which is most of what made the table worth having. */ @media (max-width:48rem){ .rp-board,.rp-board tbody,.rp-board tr,.rp-board td{display:block;width:auto} .rp-board thead{display:none} .rp-scroll:has(.rp-board){overflow-x:visible;margin:0;padding:0} .rp-board tr{position:relative;margin:0 0 .5rem;padding:.55rem .65rem .55rem 2.4rem; border:1px solid #2a2a38;border-radius:8px;background:#14141c; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem .5rem; align-items:start} .rp-board tr.rp-you{border-color:#3a3320;background:#1b1a12} .rp-board td{border:0;padding:0;text-align:left} /* Place sits in the gutter so the three stat columns stay equal. */ .rp-c-place{position:absolute;left:.5rem;top:.6rem;font-size:.95rem;font-weight:700;color:#58649a} .rp-c-who{grid-column:1 / span 2;grid-row:1;min-width:0} .rp-c-who .rp-name{gap:.45rem} .rp-c-who .rp-name>span:last-child{font-size:.92rem} .rp-c-avg{grid-column:3;grid-row:1;justify-self:end} /* Each stat: heading above value, one per column, so cards align with each other down the page. display:block rather than flex-column -- with flex the value's text node and its percentage span become separate flex items and the percentage drops to its own line, opening a gap in every card. */ .rp-board td[data-label]:not(.rp-c-avg){display:block;font-size:.88rem;color:#e2e2ea;line-height:1.25} .rp-board td[data-label]:not(.rp-c-avg)::before{ content:attr(data-label);display:block;font-size:.58rem;letter-spacing:.06em; text-transform:uppercase;color:#4d5478;font-weight:600} .rp-board .rp-note{display:inline;font-size:.68rem;margin-left:.25rem;color:#58649a} .rp-board .rp-card-tag{display:none} /* human/guest badge: the podium says it */ /* "On board" is the same figure for everyone who has been here since the sampler started, so it earns a whole row on a phone for nothing. It stays on the desktop table where space is free. */ /* Must carry :not(.rp-c-avg) too. Without it this selector is LESS specific than the display:block rule above -- :not() contributes its argument's specificity -- so the hide silently lost and the row kept showing. */ .rp-board td[data-label="On board"]:not(.rp-c-avg){display:none} /* A podium 946px tall meant three screens before the table. */ .rp-podium{margin:.75rem 0 1.1rem} /* flex-wrap is the whole fix. .rp-pod is display:flex and wrap defaults to NOWRAP, so place + avatar + name + trophy + meta were all forced onto one line; every child shrank, the name was crushed to about one character wide, and overflow-wrap:anywhere then broke it one LETTER per line. Wrapping lets the meta drop to its own row and gives the name real width. */ .rp-pod{padding:.55rem .65rem;gap:.4rem .55rem;flex-wrap:wrap;align-items:center} .rp-pod .rp-av{width:2.5rem !important;height:2.5rem !important} .rp-pod-link{flex:1 1 8rem;min-width:0;align-items:center} /* Ellipsis rather than character-breaking: a long name should be cut off, never shredded. */ .rp-pod-name{font-size:.9rem;overflow-wrap:normal;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto} .rp-pod-name em{display:inline;margin-left:.35rem} .rp-trophy-lg{min-width:3.4rem;padding:.3rem .5rem .24rem;flex:0 0 auto} .rp-trophy-lg .rp-trophy-num{font-size:1.15rem} .rp-pod-meta{font-size:.68rem;order:5;flex:1 1 100%;margin-top:-.1rem} } /* Account control in the header. A guest had no way to sign in and a signed-in player had no way to sign out; both live here now. */ .rp-account { margin-left: auto; display: flex; gap: .75rem; align-items: center; } .rp-account a { font-size: .8rem; opacity: .8; } .rp-account a:hover { opacity: 1; } /* The cycle countdown. Reprisal's whole shape is "one decision a day", and until now nothing on screen said when the day turns over. */ .rp-rail-cycle { display:block; font-size:.72rem; opacity:.65; margin-top:.15rem; } .rp-rail-cycle b { font-variant-numeric: tabular-nums; opacity:.9; } .rp-cycle { font-size:.75rem; opacity:.6; margin-left:.5rem; } .rp-cycle b { font-variant-numeric: tabular-nums; } /* ── tabs + bundles ──────────────────────────────────────────────────────── */ /* Both panels are in the DOM at once and the inactive one is [hidden], so state the display rule explicitly -- an author display: on .rp-panel would outrank the UA stylesheet's [hidden]{display:none} and show both at once. */ .rp-tabs{display:flex;gap:.35rem;margin:.75rem 0 .5rem;flex-wrap:wrap} .rp-tab{padding:.5rem .8rem;border:1px solid #2a2a38;border-radius:6px 6px 0 0; background:#16161f;color:#9aa0c0;cursor:pointer;font-family:inherit;font-size:.88rem} .rp-tab:hover{color:#e2e2ea;border-color:#3a3a4a} .rp-tab.on{color:#d0a028;border-color:#d0a028;background:#1b1a12} .rp-panel[hidden]{display:none} .rp-bundles-h{margin:2rem 0 .3rem;font-size:1rem;color:#c8c8d8} .rp-bundle-list{list-style:none;margin:.5rem 0;padding:0;display:flex;flex-direction:column;gap:.4rem} .rp-bundle-list li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; padding:.45rem .55rem;border:1px solid #2a2a38;border-radius:6px;background:#16161f} .rp-bundle-name{font-size:.9rem;color:#e2e2ea;min-width:7rem;flex:0 0 auto;overflow-wrap:anywhere} .rp-bundle-list .rp-wall-avg{margin-left:auto} /* A card a saved group still points at but the player no longer holds. */ .rp-chip.rp-gone{text-decoration:line-through;border-color:#a33;color:#c55} .rp-bundle-pick{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))} .rp-bundle-pick .rp-card{gap:.15rem} .rp-row-name{background:#16161f;color:#e2e2ea;border:1px solid #2a2a38;border-radius:5px; padding:.25rem .4rem;font-family:inherit;font-size:.82rem;width:9rem;min-width:0} .rp-row-name:disabled{opacity:.45} @media (max-width:48rem){ .rp-bundle-name{min-width:0;flex:1 1 100%} .rp-bundle-list .rp-wall-avg{margin-left:0} .rp-row-name{width:100%;order:3} .rp-bundle-pick{grid-template-columns:1fr} } /* ── saved groups on the raid page ───────────────────────────────────────── */ .rp-nextup{margin:.5rem 0 1.25rem} .rp-group-list{list-style:none;margin:.4rem 0;padding:0;display:flex;flex-direction:column;gap:.4rem} .rp-group{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem .6rem; border:1px solid #2a2a38;border-radius:6px;background:#16161f} .rp-group.rp-next{border-color:#d0a028;background:#1b1a12} .rp-group.rp-next .rp-wall-tag{color:#d0a028} /* Spent and broken read differently on purpose: one is the normal state of four trios in five, the other needs the player to do something. */ .rp-group.rp-group-off{opacity:.55} /* The reason a group cannot be used shrinks rather than pushing the button onto a second line -- a spent row was a head taller than a ready one. */ .rp-group-why{flex:1 1 8rem;min-width:0;color:#58649a;text-align:right} .rp-group .rp-cards{flex:0 1 auto;min-width:0} .rp-group .rp-wall-avg{margin-left:auto;flex:0 0 auto} .rp-group .rp-use{flex:0 0 auto} .rp-chip.rp-spent-chip{opacity:.5} @media (max-width:48rem){ .rp-group .rp-bundle-name{flex:1 1 100%} .rp-group .rp-wall-avg{margin-left:0} .rp-group .rp-use{margin-left:auto} } /* ── card stats ──────────────────────────────────────────────────────────── */ /* Brighter and a shade larger than .rp-cd-meta: this is the line a player compares cards on, where the type and cost are just context. */ .rp-cd-stats{display:flex;gap:.75rem;flex-wrap:wrap;margin:.25rem 0 0; font-size:.88rem;color:#c8c8d8} .rp-stat{display:inline-flex;align-items:center;gap:.28rem;font-variant-numeric:tabular-nums} .rp-stat-icon{font-size:.95rem;line-height:1} /* The word behind each icon, for screen readers only. A visually-hidden class rather than a title attribute, which touch devices never surface. */ .rp-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* When a raid happened, in the corner of its row. Absolutely positioned so it cannot push the outcome line around; the row reserves space for it so a long display name never runs underneath. */ .rp-feed li{position:relative;padding-right:5rem} .rp-feed-ago{position:absolute;top:.45rem;right:.55rem;margin-left:0; font-variant-numeric:tabular-nums;white-space:nowrap} /* ── sortable leaderboard ────────────────────────────────────────────────── */ .rp-sortbar{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:.5rem 0 .6rem} .rp-board th.rp-sortable{cursor:pointer;user-select:none;white-space:nowrap} .rp-board th.rp-sortable:hover{color:#e2e2ea} .rp-board th.rp-sortable:focus-visible{outline:2px solid #d0a028;outline-offset:2px} /* The caret only appears on the column actually in use: an arrow on every header is noise, and one that never moves is a lie. */ .rp-board th.rp-sortable::after{content:"";margin-left:.3rem;opacity:0} .rp-board th.rp-sorted{color:#d0a028} .rp-board th.rp-sorted[aria-sort=ascending]::after{content:"\2191";opacity:1} .rp-board th.rp-sorted[aria-sort=descending]::after{content:"\2193";opacity:1} @media (max-width:48rem){ /* thead is hidden here, so the select IS the control rather than a shortcut. */ .rp-sortbar{gap:.5rem} .rp-sortbar .rp-note{flex:1 1 100%} }