/* gh-radio.css — GamerHandles Radio player (js/gh-radio.js), on every page via stylesheets.php.
   Closed it is a round orange-blue pill in the bottom-right; clicking it grows the pill into a
   retro handheld with an LCD. The panel itself is the pill: size, corners, colour and shadow
   animate together on one element, while the controls (.ghr-body, laid out at the open size)
   fade in once there's room. */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

.ghr {
    --ghr-or: #ff7f00;
    --ghr-bl: #0085ff;
    --ghr-lcd: #a3b86c;
    --ghr-ink: #22301a;
    --ghr-dark: #1c1f2a;
    --ghr-vol: 80%;
    --ghr-w: 290px;
    --ghr-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 58px; height: 58px;
    font-family: Poppins, sans-serif; color: #fff; line-height: 1.2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ghr:not(.is-open):hover { transform: scale(1.07); }
:where(.ghr) button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ghr button:focus-visible, .ghr input:focus-visible { outline: 2px solid var(--ghr-bl); outline-offset: 2px; }
:where(.ghr) svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* ---------- the morphing shell: pill when closed, handheld when open */
.ghr-panel { position: absolute; right: 0; bottom: 0; overflow: hidden;
    width: var(--ghr-w); height: var(--ghr-h, 150px); border-radius: 16px 16px 40px 16px;
    background: linear-gradient(160deg, #4b4f63, #2f3242 70%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), inset 0 -4px 0 rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.55);
    transition: width 0.55s var(--ghr-ease), height 0.55s var(--ghr-ease), border-radius 0.55s var(--ghr-ease), box-shadow 0.55s var(--ghr-ease); }
.ghr:not(.is-open) .ghr-panel { width: 58px; height: 58px; border-radius: 29px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: width 0.4s cubic-bezier(0.55, 0, 0.25, 1), height 0.4s cubic-bezier(0.55, 0, 0.25, 1), border-radius 0.4s cubic-bezier(0.55, 0, 0.25, 1), box-shadow 0.4s; }
/* the pill's colours: fade out as it grows, back in as it shrinks */
.ghr-panel::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: linear-gradient(135deg, var(--ghr-or), #c2410c 50%, var(--ghr-bl)); opacity: 0; transition: opacity 0.35s ease 0.08s; }
.ghr:not(.is-open) .ghr-panel::before { opacity: 1; transition: opacity 0.3s ease 0.05s; }

/* controls sit at their final size, anchored bottom-right, so nothing reflows mid-animation */
.ghr-body { position: absolute; right: 0; bottom: 0; width: var(--ghr-w); box-sizing: border-box;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; padding: 14px 14px 16px;
    transition: opacity 0.3s ease 0.22s, transform 0.45s var(--ghr-ease) 0.18s, visibility 0s; }
.ghr:not(.is-open) .ghr-body { opacity: 0; visibility: hidden; transform: scale(0.94); transform-origin: bottom right;
    transition: opacity 0.12s ease, transform 0.2s ease, visibility 0s linear 0.4s; }

/* ---------- LCD */
.ghr-meta { order: 0; flex: 1 1 100%; min-width: 0; position: relative; padding: 10px 12px 9px; border-radius: 8px;
    background: var(--ghr-lcd); color: var(--ghr-ink); font-family: VT323, monospace;
    box-shadow: inset 0 0 0 3px var(--ghr-dark), inset 0 3px 10px rgba(0, 0, 0, 0.35); }
.ghr-meta::after { content: ''; position: absolute; inset: 3px; border-radius: 6px; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px); }
.ghr-station { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.ghr-name { overflow: hidden; text-overflow: ellipsis; }
.ghr-listeners { margin-left: auto; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.ghr-live { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.ghr-live::before { content: ''; width: 6px; height: 6px; background: #4a5a32; }
.ghr[data-state="playing"] .ghr-live::before { background: var(--ghr-ink); animation: ghr-blink 0.8s steps(1) infinite; }
.ghr-lcd { overflow: hidden; margin-top: 3px; }
.ghr-scroll { display: inline-block; white-space: nowrap; font-size: 1.45rem; line-height: 1; }
.ghr.is-long .ghr-scroll { animation: ghr-marquee var(--ghr-dur, 10s) steps(40) infinite alternate; }
.ghr.is-new .ghr-scroll { animation: ghr-fade 0.6s ease; }

/* ---------- controls row: play, equaliser, volume */
.ghr-play { order: 1; position: relative; width: 46px; height: 46px; padding: 13px; border-radius: 50%; color: #2a1300;
    background: radial-gradient(circle at 35% 30%, #ff9a3c, var(--ghr-or) 55%, #b45309);
    box-shadow: 0 4px 0 #7c2d12, 0 6px 12px rgba(0, 0, 0, 0.4); transition: transform 0.1s, box-shadow 0.1s; }
.ghr-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #7c2d12; }
.ghr[data-state="loading"] .ghr-play::after,
.ghr[data-state="error"] .ghr-play::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ghr-lcd); animation: ghr-spin 0.8s linear infinite; }

.ghr-art { order: 2; height: 34px; padding: 0 10px; border-radius: 6px; display: flex; align-items: center; background: var(--ghr-dark); color: var(--ghr-lcd); }
.ghr-art .ghr-eq { height: 20px; }
.ghr-art .ghr-eq i { width: 4px; border-radius: 0; }

.ghr-vol { order: 3; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ghr-mute { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--ghr-dark); color: #c9ccd8; }
.ghr.is-muted .ghr-wave { display: none; }
.ghr-vol input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; margin: 0; cursor: pointer;
    background: linear-gradient(var(--ghr-lcd), var(--ghr-lcd)) 0 0 / var(--ghr-vol) 100% no-repeat, var(--ghr-dark); }
.ghr-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; border-radius: 2px; background: #c9ccd8; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.ghr-vol input::-moz-range-thumb { width: 12px; height: 16px; border: 0; border-radius: 2px; background: #c9ccd8; }

/* equaliser bars: still when stopped, dance when playing */
.ghr-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.ghr-eq i { width: 3px; height: 30%; border-radius: 2px; background: currentColor; }
.ghr[data-state="playing"] .ghr-eq i { animation: ghr-eq 0.9s ease-in-out infinite alternate; }
.ghr-eq i:nth-child(2) { animation-delay: -0.35s !important; animation-duration: 0.7s !important; }
.ghr-eq i:nth-child(3) { animation-delay: -0.6s !important; animation-duration: 1.1s !important; }
.ghr-eq i:nth-child(4) { animation-delay: -0.15s !important; animation-duration: 0.8s !important; }
.ghr-eq i:nth-child(5) { animation-delay: -0.8s !important; animation-duration: 1s !important; }

/* ---------- pill face: icon / equaliser and the spinning ring, on top; they fade as it opens */
.ghr-launch { position: absolute; right: 0; bottom: 0; z-index: 3; width: 58px; height: 58px; border-radius: 50%; color: #fff;
    transition: opacity 0.25s ease 0.15s; }
.ghr-launch > svg { width: 22px; height: 22px; }
.ghr-launch .ghr-eq { display: none; }
.ghr[data-state="playing"] .ghr-launch > svg { display: none; }
.ghr[data-state="playing"] .ghr-launch .ghr-eq { display: inline-flex; }
.ghr.is-open .ghr-launch { opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
/* Ring: two arcs drawn with a conic gradient cut to a 2px ring. --ghr-arc is each arc's
   length; it grows from a sliver to 90deg once the handheld has shrunk back to the pill. */
@property --ghr-arc { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ghr-launch::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
    --ghr-arc: 0deg;
    background: conic-gradient(from calc(var(--ghr-arc) / -2),
        rgba(255, 127, 0, 0.6) 0 var(--ghr-arc), transparent 0 180deg,
        rgba(0, 133, 255, 0.6) 180deg calc(180deg + var(--ghr-arc)), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    opacity: 0; animation: ghr-spin 3s linear infinite;
    transition: opacity 0.12s ease, --ghr-arc 0s linear 0.12s; }
.ghr[data-state="playing"]:not(.is-open) .ghr-launch::before { opacity: 1; --ghr-arc: 90deg;
    transition: opacity 0.25s ease 0.38s, --ghr-arc 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.38s; }
/* browser blocked autoplay after a full page load: the pill pulses until clicked */
.ghr[data-state="resume"]:not(.is-open) .ghr-panel { animation: ghr-pulse-btn 1.4s infinite; }

/* thin progress bar while the next page loads */
html.ghr-loading::after { content: ''; position: fixed; left: 0; top: 0; z-index: 2000; height: 2px; width: 100%;
    background: linear-gradient(90deg, var(--ghr-or, #ff7f00), #0085ff); transform-origin: left; animation: ghr-load 1.2s ease-out forwards; pointer-events: none; }

@media (max-width: 420px) { .ghr { --ghr-w: calc(100vw - 28px); right: 14px; bottom: 14px; } }

/* ---------- animations */
@keyframes ghr-eq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 45%; } }
@keyframes ghr-pulse-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 0, 0.7), 0 10px 28px rgba(0, 0, 0, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(255, 127, 0, 0), 0 10px 28px rgba(0, 0, 0, 0.5); } }
@keyframes ghr-spin { to { transform: rotate(360deg); } }
@keyframes ghr-blink { from { opacity: 1; } to { opacity: 0.45; } }
@keyframes ghr-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ghr-marquee { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(calc(-1 * var(--ghr-over))); } }
@keyframes ghr-load { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }
@media (prefers-reduced-motion: reduce) {
    .ghr, .ghr *, .ghr *::before, .ghr *::after { animation: none !important; transition: none !important; }
}

/* Forums: the page moves into this frame while the radio plays (frameForum() in gh-radio.js) */
.ghr-frame { position: fixed; inset: 0; z-index: 899; width: 100%; height: 100%; border: 0; visibility: hidden; background: transparent; }
html.ghr-framed .ghr-frame { visibility: visible; }
html.ghr-framed, html.ghr-framed body { overflow: hidden; height: 100%; }

/* Room at the bottom so the last footer links scroll clear of the pill (www footer, XenForo footer) */
.footer, .p-footer, .p-footer--container { padding-bottom: 84px; }