/* Cara Runs (run.html, game/runner/main.js): the canvas, the HUD and the four screens. Buttons are the menu's
   (.gbtn, menu.css); the colours and type are the site's (shared.css). */
.run-body { overflow: hidden; background: #0b130e; touch-action: none; user-select: none; -webkit-user-select: none; }
#run-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* the HUD */
.rhud { position: fixed; inset: 0; pointer-events: none; font-family: var(--font-body); color: #fff; }
.rhud__left { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); }
.rhud__score { font: 900 clamp(1.9rem, 6vw, 2.8rem)/1 var(--font-display); letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.rhud__dist { margin-top: 4px; font-weight: 600; font-size: 0.9rem; color: #ffe2b8; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
.rhud__right { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.rhud__tokens { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(8, 20, 14, 0.62); border: 1px solid rgba(160, 255, 200, 0.28); font: 800 1.2rem/1 var(--font-body); font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rhud__jade { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9df0bf, #2fa866 55%, #135c34); box-shadow: 0 0 0 2px #e0b450, 0 0 10px rgba(80, 230, 140, 0.55); }
.rhud__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(8, 20, 14, 0.62); color: #fff; font-size: 1.05rem; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rhud__btn:hover, .rhud__btn:focus-visible { border-color: #ffbe6e; outline: none; }
.rhud__btn.is-off { opacity: 0.45; text-decoration: line-through; }
.rhud__powers { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 8px; }
.rp { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 700 0.95rem/1 var(--font-body); background: rgba(8, 20, 14, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); animation: rp-in 0.25s ease-out; }
.rp b { min-width: 1.2em; font-variant-numeric: tabular-nums; color: #ffe2b8; }
.rp--magnet { border-color: #ff8a7a; } .rp--double { border-color: #ffd25a; } .rp--shield { border-color: #7ad0ff; box-shadow: 0 0 14px rgba(122, 208, 255, 0.45); }
@keyframes rp-in { from { transform: scale(0.6); opacity: 0; } }
.rhud__warn { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; background: rgba(150, 24, 24, 0.78); font: 700 1rem/1.2 var(--font-body); white-space: nowrap; animation: rwarn 0.6s ease-in-out infinite alternate; }
@keyframes rwarn { to { background: rgba(200, 50, 30, 0.9); transform: translateX(-50%) scale(1.05); } }
.rhud__hint { position: absolute; left: 50%; bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px)); transform: translateX(-50%); max-width: min(92vw, 640px); padding: 10px 18px; border-radius: 12px; background: rgba(8, 20, 14, 0.66); font: 600 1rem/1.35 var(--font-body); text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.rhud__hint.is-turn { top: 30%; bottom: auto; font: 900 clamp(1.6rem, 5vw, 2.4rem)/1.1 var(--font-display); color: #ffd678; letter-spacing: 0.06em; background: rgba(40, 20, 4, 0.55); animation: rwarn 0.4s ease-in-out infinite alternate; }
.rhud.is-down .rhud__hint, .rhud.is-down .rhud__warn { display: none; }
.rbubble { position: fixed; transform: translate(-50%, -100%); max-width: 260px; padding: 8px 14px; border-radius: 14px; background: #fffaf0; color: #2a1c10; font: 600 0.95rem/1.3 var(--font-body); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 5; }
.rbubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fffaf0; transform: translateX(-50%); }

/* the screens */
.rscreen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(6, 14, 10, 0.35), rgba(6, 14, 10, 0.78)); z-index: 10; overflow-y: auto; }
.rscreen--loading { background: radial-gradient(ellipse at center, #16261c, #070d09); }
.rcard { width: min(560px, 100%); padding: 26px 26px 22px; border-radius: 20px; background: rgba(12, 22, 16, 0.86); border: 1px solid rgba(255, 210, 150, 0.22); box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; }
.rcard--small { width: min(380px, 100%); }
.rcard__eyebrow { margin: 0; font: 600 0.82rem/1.3 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: #ffe0b4; }
.rlogo { margin: 4px 0 0; font: 900 clamp(2.6rem, 11vw, 4.2rem)/1 var(--font-display); letter-spacing: 0.14em; color: #fff7ea; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.75), 0 0 40px rgba(255, 170, 80, 0.25); }
.rlogo span { color: #ffb15c; }
.rcard__tag { margin: 6px 0 0; font: 600 italic 1.05rem/1.3 var(--font-display); color: #ffd48f; }
.rcard__head { margin: 0 0 8px; font: 900 clamp(2rem, 8vw, 2.8rem)/1.05 var(--font-display); letter-spacing: 0.06em; color: #fff3df; }
.rcard__text { margin: 14px 0 0; font-size: 0.98rem; line-height: 1.5; color: #e4ece4; text-align: left; }
.rcard__small { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); text-align: left; }
.rcard__sub { margin: 12px 0 0; color: var(--muted); }
.rkeys { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; text-align: left; font-size: 0.88rem; color: #d8e2d8; }
.rkeys kbd { margin-right: 4px; }
.rkeys__touch { grid-column: 1 / -1; color: var(--muted); }
.rbest { display: flex; justify-content: center; gap: 22px; margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.rbest b { color: #ffe2b8; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ractions { display: grid; gap: 10px; margin-top: 18px; }
.ractions .gbtn { width: 100%; justify-content: flex-start; }
.rbar { height: 8px; margin-top: 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.rbar i { display: block; height: 100%; width: 2%; border-radius: inherit; background: linear-gradient(90deg, #ffa458, #f06a1e); transition: width 0.2s ease; }
.rstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 0; }
.rstats div { padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.rstats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rstats dd { margin: 4px 0 0; font: 800 1.15rem/1.1 var(--font-body); color: #fff3df; font-variant-numeric: tabular-nums; }
.rnew { margin: 10px auto 0; width: max-content; padding: 4px 14px; border-radius: 99px; background: linear-gradient(135deg, #ffd25a, #f0a01e); color: #2a1600; font-weight: 800; animation: rp-in 0.35s ease-out; }
@media (max-width: 520px) { .rstats { grid-template-columns: repeat(2, 1fr); } .rkeys { grid-template-columns: 1fr; } .rcard { padding: 20px 16px 16px; } }
@media (hover: hover) and (pointer: fine) { .rkeys__touch { display: none; } }
@media (prefers-reduced-motion: reduce) { .rhud__warn, .rhud__hint.is-turn, .rp, .rnew { animation: none; } }

/* power-ups: badges with a ring that empties as time runs out, the banner when one is picked up, token pops */
.rp { position: relative; padding: 5px 12px 5px 6px; }
.rp__ring { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; background: conic-gradient(var(--c) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, 0.12) 0); }
.rp__ring > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 20, 14, 0.9); }
.rp--magnet { --c: #ff7a6a; } .rp--double { --c: #ffd25a; } .rp--shield { --c: #7ad0ff; }
.rp.is-ending { animation: rp-blink 0.35s steps(2) infinite; }
@keyframes rp-blink { 50% { opacity: 0.45; } }
.rhud__banner { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); padding: 6px 22px; border-radius: 999px; font: 900 clamp(1.4rem, 5vw, 2.2rem)/1.15 var(--font-display); letter-spacing: 0.06em; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); white-space: nowrap; animation: rbanner 1.4s ease-out forwards; }
.rhud__banner.is-magnet { background: linear-gradient(90deg, rgba(200, 50, 40, 0.75), rgba(50, 90, 200, 0.75)); }
.rhud__banner.is-double { background: linear-gradient(90deg, rgba(220, 150, 20, 0.8), rgba(255, 210, 90, 0.8)); color: #3a2200; text-shadow: none; }
.rhud__banner.is-shield { background: linear-gradient(90deg, rgba(40, 120, 200, 0.75), rgba(120, 210, 255, 0.75)); }
.rhud__banner.is-boost { background: rgba(8, 20, 14, 0.78); border: 1px solid rgba(160, 255, 200, 0.4); font-size: clamp(1rem, 3.6vw, 1.4rem); }
@keyframes rbanner { 0% { transform: translateX(-50%) scale(0.5); opacity: 0; } 12% { transform: translateX(-50%) scale(1.12); opacity: 1; } 22% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-18px); opacity: 0; } }
.rhud__tokens { position: relative; }
.rhud__pops { position: absolute; right: calc(100% + 8px); top: 50%; width: 0; height: 0; }
.rpop { position: absolute; right: 0; top: -0.5em; white-space: nowrap; font: 800 0.95rem/1 var(--font-body); color: #9dffd0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); animation: rpop 0.7s ease-out forwards; }
.rpop.is-double { color: #ffd25a; }
@keyframes rpop { from { transform: translateY(14px); opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }

/* the second wind */
.rrevive { position: fixed; inset: auto 0 22% 0; display: grid; place-items: center; z-index: 8; pointer-events: none; }
.rrevive__btn { pointer-events: auto; position: relative; overflow: hidden; display: grid; justify-items: center; gap: 2px; padding: 14px 30px 18px; border-radius: 18px; border: 2px solid #9dffd0; background: rgba(8, 30, 20, 0.9); color: #fff; font: 600 0.85rem/1.2 var(--font-body); cursor: pointer; box-shadow: 0 0 30px rgba(80, 230, 140, 0.45); animation: rp-in 0.25s ease-out; }
.rrevive__btn b { font: 900 1.5rem/1.1 var(--font-display); letter-spacing: 0.04em; }
.rrevive__btn small { color: var(--muted); }
.rrevive__icon { font-size: 1.8rem; }
.rrevive__bar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: linear-gradient(90deg, #3ff090, #9dffd0); transform-origin: left; }

/* screen buttons in a row; the boosts a run will start with */
.ractions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rboosts { margin: 0; font-size: 0.85rem; color: #ffe2b8; }

/* the jade shop */
.rcard--wide { width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; text-align: left; }
.rshop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rshop__head .rcard__head { margin: 0; }
.rshop__bank { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font: 800 1.2rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.rtabs { display: flex; gap: 6px; margin: 14px 0 10px; }
.rtabs button { flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #dfe8df; font: 700 0.95rem/1 var(--font-body); cursor: pointer; }
.rtabs button[aria-selected="true"] { background: linear-gradient(135deg, #ffa458, #f06a1e); color: #1f0d03; border-color: transparent; }
.rshop__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; overflow-y: auto; min-height: 0; padding: 2px; }
.ritem { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.ritem.is-on { border-color: #9dffd0; box-shadow: 0 0 0 1px #9dffd0 inset, 0 0 18px rgba(80, 230, 140, 0.2); }
.ritem__top { display: flex; align-items: center; gap: 10px; }
.ritem__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255, 255, 255, 0.08); flex: 0 0 auto; }
.ritem__name { font-weight: 800; font-size: 1rem; }
.ritem__what { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.ritem__pips { display: flex; gap: 4px; }
.ritem__pips i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.ritem__pips i.is-on { background: linear-gradient(90deg, #3ff090, #9dffd0); }
.ritem__meta { font-size: 0.78rem; color: #ffe2b8; }
.ritem__row { display: flex; gap: 6px; margin-top: auto; }
.ritem__buy { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #3fbf7a, #1f8a52); color: #fff; font: 800 0.9rem/1 var(--font-body); cursor: pointer; }
.ritem__buy:disabled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.4); cursor: default; }
.ritem__buy .rhud__jade { width: 14px; height: 14px; }
.ritem__alt { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #dfe8df; font: 700 0.82rem/1 var(--font-body); cursor: pointer; }
.ritem__alt[aria-pressed="true"] { border-color: #9dffd0; color: #9dffd0; }
.ritem.is-flash { animation: rflash 0.5s ease-out; }
@keyframes rflash { 0% { box-shadow: 0 0 0 3px #9dffd0, 0 0 40px rgba(80, 230, 140, 0.6); } }
.rshop__note { min-height: 1.3em; margin: 10px 0 0; font-size: 0.88rem; color: #ffd48f; }

/* the music menu */
.rmusic__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 6px 0 12px; font-size: 0.92rem; }
.rmusic__switch { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.rmusic__switch input { width: 18px; height: 18px; accent-color: #3fbf7a; }
.rmusic__vol { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.rmusic__vol input { flex: 1; accent-color: #ffa458; }
.rmusic__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
.rtrack { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: inherit; text-align: left; cursor: pointer; font: inherit; }
.rtrack:hover, .rtrack:focus-visible { border-color: #ffbe6e; outline: none; }
.rtrack[aria-checked="true"] { border-color: #9dffd0; background: rgba(80, 230, 140, 0.1); }
.rtrack__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); flex: 0 0 auto; }
.rtrack[aria-checked="true"] .rtrack__dot { border-color: #9dffd0; background: radial-gradient(circle, #9dffd0 45%, transparent 50%); }
.rtrack b { display: block; font-size: 0.95rem; }
.rtrack small { color: var(--muted); font-size: 0.78rem; }
.rtrack__eq { margin-left: auto; display: none; gap: 2px; align-items: flex-end; height: 14px; }
.rtrack[aria-checked="true"] .rtrack__eq { display: flex; }
.rtrack__eq i { width: 3px; background: #9dffd0; animation: req 0.8s ease-in-out infinite alternate; }
.rtrack__eq i:nth-child(2) { animation-delay: 0.2s; } .rtrack__eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes req { from { height: 3px; } to { height: 14px; } }
@media (max-width: 520px) { .ractions__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rhud__banner, .rpop, .rtrack__eq i, .rp.is-ending, .ritem.is-flash { animation: none; } }

/* the newer power-ups: badge rings, banners, the slowed screen, the score while it counts double */
.rp--spring { --c: #7dff7a; } .rp--glider { --c: #ffa458; } .rp--slow { --c: #9ab8ff; } .rp--score { --c: #d68aff; }
.rhud__banner.is-spring { background: linear-gradient(90deg, rgba(30, 140, 50, 0.8), rgba(125, 255, 122, 0.75)); color: #08300c; text-shadow: none; }
.rhud__banner.is-glider { background: linear-gradient(90deg, rgba(240, 106, 30, 0.8), rgba(47, 180, 168, 0.8)); }
.rhud__banner.is-slow { background: linear-gradient(90deg, rgba(40, 60, 150, 0.8), rgba(154, 184, 255, 0.75)); }
.rhud__banner.is-score { background: linear-gradient(90deg, rgba(110, 30, 170, 0.8), rgba(255, 154, 224, 0.75)); }
.rslow { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(70, 100, 200, 0.18) 75%, rgba(20, 30, 90, 0.42) 100%); }
.rslow.is-on { opacity: 1; }
.rhud__score.is-boosted { color: #ffe08a; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 18px rgba(214, 138, 255, 0.85); }
.rhud__score.is-boosted::after { content: '×2'; margin-left: 6px; font-size: 0.45em; vertical-align: super; color: #d68aff; }

/* the shop's runners */
.ritem__face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--c, #555); box-shadow: 0 0 0 2px var(--c, #555), 0 2px 8px rgba(0, 0, 0, 0.4); }
.ritem--runner .ritem__what i { font-style: italic; }
.ritem__tag { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #9dffd0; background: rgba(80, 230, 140, 0.12); }
.rtabs button { padding-inline: 6px; }
@media (prefers-reduced-motion: reduce) { .rslow { transition: none; } }
.ritem__knack { color: #9dffd0; font-weight: 700; }

/* the Sun Stone counter's icon: the Basin's amber stone */
.rhud__sunstone { width: 22px; height: 22px; clip-path: polygon(50% 0, 88% 50%, 50% 100%, 12% 50%); background: linear-gradient(135deg, #fff0c8 0%, #ffb340 45%, #c45f08 100%); filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.8)); }
.rhud__sunpill { border-color: rgba(255, 190, 110, 0.4); }
.rhud__sunpill[hidden] { display: none; }
.rpop { white-space: nowrap; }

/* the dash meter, under the score: fills with tokens, glows when full, runs down while she dashes */
.rmeter { position: relative; display: block; width: clamp(130px, 30vw, 190px); height: 22px; margin-top: 8px; padding: 0; overflow: hidden; border-radius: 999px; border: 1px solid rgba(160, 255, 200, 0.35); background: rgba(8, 20, 14, 0.62); color: #fff; font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; pointer-events: auto; cursor: pointer; }
.rmeter__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #1f8a52, #3ff090); transition: transform 0.15s linear; }
.rmeter__label { position: relative; display: block; text-align: center; line-height: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.rmeter__label::before { content: '⚡ '; }
.rmeter.is-full { border-color: #9dffd0; animation: rmeter 0.7s ease-in-out infinite alternate; }
.rmeter.is-full .rmeter__fill { background: linear-gradient(90deg, #3ff090, #c8ffe4, #3ff090); }
.rmeter.is-dash .rmeter__fill { background: linear-gradient(90deg, #9dffd0, #ffffff); transition: none; }
@keyframes rmeter { from { box-shadow: 0 0 0 0 rgba(63, 240, 144, 0.2); } to { box-shadow: 0 0 16px 3px rgba(63, 240, 144, 0.75); } }
.rhud__banner.is-dash { background: linear-gradient(90deg, rgba(20, 120, 70, 0.85), rgba(63, 240, 144, 0.75)); }
.rhud__banner.is-drop { background: linear-gradient(90deg, rgba(150, 100, 40, 0.85), rgba(63, 200, 130, 0.8)); font-size: clamp(1rem, 3.6vw, 1.4rem); }

/* the end screen's offer to keep running for jade */
.rcontinue { border-color: rgba(157, 255, 208, 0.55); background: linear-gradient(135deg, rgba(63, 191, 122, 0.28), rgba(31, 138, 82, 0.22)); }
.rcontinue .gbtn__label { display: inline-flex; align-items: center; gap: 4px; }
.rcontinue .rhud__jade { width: 14px; height: 14px; }
.rcontinue:disabled { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .rmeter.is-full { animation: none; box-shadow: 0 0 12px rgba(63, 240, 144, 0.6); } }

/* the Arcade minigames' title cards: Play / How to play tabs (game/arcade-tabs.js), the buttons at once on Play */
.rtabs.rtabs--title { margin: 12px 0 14px; }
.rtabs.rtabs--title button { padding: 8px 10px; font-size: 0.9rem; }
[data-tab-panel="how"] .rcard__text { margin-top: 0; }

/* the way out of an Arcade game, on every card: Arcade (back) and Main menu side by side, outlined so they stand out
   (game/arcade-tabs.js puts them in this row) */
.ractions__nav { grid-template-columns: 1fr 1fr !important; }
.ractions__nav .gbtn { border: 1.5px solid #ff9a4a; min-height: 48px; }
.ractions__nav .gbtn .gbtn__label { font-weight: 700; }
.ractions__nav .gbtn .ico { stroke-width: 2.6; }