/* V2 shell. Colours come from the same CSS variables as the existing app, so the
   redesign keeps the brand identity and both themes (dark and light) apply
   automatically rather than the shell defining its own palette. */
#v2-prototype { display:none; }
html[data-experience="v2"] #v2-prototype [hidden] { display:none !important; }
html[data-experience="v2"] #app > .app-header, html[data-experience="v2"] #app > #browse-view,
html[data-experience="v2"] #app > #player-view, html[data-experience="v2"] #app > .app-footer,
html[data-experience="v2"] #app > .status-bar, html[data-experience="v2"] #app > .offline-banner { display:none !important; }
html[data-experience="v2"]:not(.v2-player-open) #btn-chat-fab,
html[data-experience="v2"]:not(.v2-player-open) #chat-panel { display:none !important; }
html[data-experience="v2"] #v2-prototype { display:block; min-height:100dvh; background:var(--bg); color:var(--text); }
html[data-experience="v2"].v2-player-open #v2-prototype .v2-layout { display:none; }
/* The player is a full-screen surface with its own header and back control, so
   the shell navigation is hidden while it is open. Previously the bottom bar
   stayed visible but belonged to the hidden layout, so tapping it did nothing. */
html[data-experience="v2"].v2-player-open .v2-bottom-nav,
html[data-experience="v2"].v2-player-open .v2-side-nav { display:none !important; }
html[data-experience="v2"] #v2-player { display:block; }
html[data-experience="v2"] #v2-player[hidden] { display:none !important; }
.v2-layout { min-height:100dvh; }
.v2-main-column { min-width:0; }
/* The shell fills the column it is given rather than centring itself inside a
   second, narrower maximum — nesting 1040px inside a 1280px container left a
   dead margin down each side on wide screens. */
.v2-shell { width:100%; max-width:1180px; margin:0; padding:28px 20px 100px; }
.v2-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface); }
.v2-back { width:42px; height:42px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); color:var(--text); font-size:1.25rem; cursor:pointer; }
.v2-mobile-brand { display:flex; flex:1; flex-direction:column; }
.v2-mobile-brand small { color:var(--text-muted); font-size:.72rem; }
.v2-page-label { color:var(--text-muted); font-size:.8rem; }
.v2-country { border:1px solid var(--border); border-radius:7px; background:var(--surface2); color:var(--text); padding:8px 11px; font:inherit; cursor:pointer; }
.v2-side-nav { display:none; }
.v2-bottom-nav { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,1040px); border:1px solid var(--border); border-bottom:0; background:var(--surface); }
.v2-nav-button { display:grid; place-items:center; gap:2px; min-height:64px; border:0; border-right:1px solid var(--border); background:var(--surface); color:var(--text-muted); font:inherit; font-size:.76rem; cursor:pointer; }
.v2-nav-button span { font-size:1.1rem; }
.v2-nav-button:last-child { border-right:0; }
.v2-nav-button.is-active { background:var(--accent); color:#fff; font-weight:700; }
.v2-page { display:none; }
.v2-page.is-active { display:block; }
.v2-eyebrow { margin:0 0 5px; color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.v2-title { margin:0; font-size:clamp(1.65rem,5vw,2.4rem); line-height:1.12; }
.v2-title:focus { outline:none; }
.v2-title:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.v2-intro { max-width:680px; margin:9px 0 24px; color:var(--text-muted); line-height:1.55; }
.v2-section { margin-top:30px; }
.v2-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.v2-section h2 { margin:0 0 11px; font-size:1.05rem; }
.v2-section-head h2 { margin:0; }
.v2-link-button { padding:0; border:0; background:none; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer; }
.v2-offline { position:sticky; top:68px; z-index:25; padding:10px 20px; border-bottom:1px solid var(--accent3); background:var(--surface2); color:var(--text); text-align:center; }
.v2-offline button { border:0; background:none; color:var(--accent); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.v2-state { display:grid; justify-items:center; gap:10px; padding:80px 20px; color:var(--text-muted); text-align:center; }
.v2-state span { display:block; }
.v2-spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:v2-spin .7s linear infinite; }
@keyframes v2-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .v2-spinner { animation:none; } }