
:root { --ease-out:cubic-bezier(.22,1,.36,1); --bg-page:#fafaf9; }
[data-theme="dark"] { --bg-page:#151422; }
.hero { display:none; }
.app-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:0 40px; background:var(--bg-surface); border-bottom:1px solid var(--border); position:relative; z-index:600; }
.app-identity { display:flex; align-items:center; gap:13px; color:var(--grass); text-decoration:none; flex-shrink:0; }
.app-identity img { object-fit:contain; border-radius:50%; }
.app-identity strong { display:block; font-size:20px; line-height:1.3; letter-spacing:1px; font-weight:600; }
.app-identity strong span { font-size:12px; font-weight:400; margin-left:6px; color:var(--brand-gold); }
.app-identity small { display:block; font-size:8px; letter-spacing:1.25px; margin-top:3px; color:var(--text-secondary); }
.tabs { padding:0; border:0; gap:36px; background:none; backdrop-filter:none; }
.tab { flex:none; padding:25px 0; font-size:12px; color:var(--text-secondary); letter-spacing:.3px; }
.tab .tab-en { font-size:9px; letter-spacing:.6px; margin-top:3px; opacity:.7; }
.tab::after { left:0; right:0; bottom:0; height:2px; transition:transform 320ms var(--ease-out); }
.tab:hover { color:var(--grass); }
.tab:focus-visible { outline:2px solid var(--brand-gold); outline-offset:5px; border-radius:2px; }
.page-intro { max-width:980px; margin:0 auto; padding:64px 32px 32px; }
.eyebrow { color:var(--brand-gold); font-size:9px; letter-spacing:2.5px; font-weight:500; }
.page-intro h2 { margin-top:14px; font-size:32px; font-weight:500; line-height:1.35; letter-spacing:1px; }
.page-intro h2 span { display:block; font-size:14px; color:var(--text-secondary); font-weight:400; letter-spacing:.5px; margin-top:9px; }
.page-intro p { margin-top:20px; font-size:12px; color:var(--text-secondary); }
.status-bar { justify-content:space-between; max-width:916px; margin:28px auto 0; background:none; padding:0; border:0; }
.leaderboard-wrap,.schedule-wrap { max-width:980px; padding:8px 32px 70px; }
.lb-loading,.lb-error { min-height:260px; justify-content:center; border-radius:12px; border-color:var(--border); box-shadow:0 8px 32px #29236303; }
.lb-error span:not(.lb-error-icon) { font-size:13px; line-height:1.9; }
.lb-retry-btn { font-size:11px; font-weight:500; margin-top:8px; padding:11px 24px; border-radius:6px; transition:transform 180ms var(--ease-out),background 180ms; }
.lb-retry-btn:hover { opacity:1; background:#3d3677; transform:translateY(-1px); }
.timeline { padding:0; }
.timeline::before,.tl-dot { display:none; }
.tl-item { padding:0; }
.tl-card { border:0; border-top:1px solid var(--border); background:none; border-radius:0; transition:background 220ms; }
.tl-card:hover { background:var(--bg-surface); }
.tl-header { padding:26px 0 14px; }
.tl-body { padding:0 0 26px; }
.tl-header .round-name { display:flex; align-items:center; flex-direction:row-reverse; gap:18px; font-size:16px; font-weight:500; }
.tl-header .round-name .tag { background:none; color:var(--brand-gold); padding:0; margin:0; font-size:8px; letter-spacing:1px; }
.tl-badge { font-size:12px; }
.tl-header::after { transition:transform 260ms var(--ease-out) !important; }
.course-shell { height:calc(100svh - 88px); min-height:440px; }
body.map-view .footer { display:none; }
.course-brand { top:28px; left:30px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; text-shadow:0 2px 12px #0009; }
.course-brand small { color:#fff; opacity:.7; font-size:8px; letter-spacing:2px; margin-bottom:8px; }
.course-brand strong { color:#fff; font-size:22px; letter-spacing:2px; font-weight:400; }
.course-controls { right:28px; top:28px; border:1px solid #ffffff50; background:#fffffff2; border-radius:10px; box-shadow:0 6px 24px #0002; }
.course-controls button { width:40px; height:42px; font-weight:300; transition:background 160ms,color 160ms; }
.course-dock { bottom:28px; background:#fffffff2; color:var(--brand-ink); border:1px solid #ffffff70; border-radius:14px; padding:5px; gap:3px; box-shadow:0 8px 32px #0002; backdrop-filter:blur(14px); }
.course-dock button { display:flex; align-items:center; gap:8px; color:#777381; min-width:0; padding:15px 20px; border-radius:9px; font-size:11px; transition:background 220ms,color 220ms,transform 220ms var(--ease-out); }
.course-dock svg { width:17px; height:17px; }
.course-dock button:hover { color:var(--brand-ink); background:#29236308; }
.course-dock button[aria-expanded=true] { color:var(--brand-ink); background:#2923630c; }
.course-dock button:active { transform:scale(.96); }
.course-hint { bottom:99px; background:none; padding:0; font-size:9px; color:#fff; opacity:.7; letter-spacing:1px; text-shadow:0 1px 8px #000; }
.course-credit { bottom:7px; right:12px; opacity:.55; font-size:8px; }
.course-panel { left:30px; bottom:28px; transform:none; width:330px; padding:28px; max-height:65%; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 48px #0002; }
.course-panel:not([hidden]) { animation:panel-in 320ms var(--ease-out) both; }
.course-panel.is-closing { animation:panel-out 170ms ease both; pointer-events:none; }
.course-panel h2 { font-size:21px; font-weight:500; margin-bottom:18px; letter-spacing:.5px; }
.course-panel p { font-size:12px; line-height:1.9; margin-top:16px; }
.course-tag { background:none; padding:0; color:var(--brand-gold); font-size:8px; letter-spacing:1.2px; }
.course-panel-close { background:none; color:var(--text-secondary); transition:background 180ms,transform 180ms; }
.course-panel-close:hover { background:var(--grass-bg); transform:rotate(90deg); }
.course-layer { font-size:12px; }
.course-layer input { width:17px; height:17px; cursor:pointer; }
#courseShade { transition:opacity 350ms ease; }
.footer { background:none; border:0; }
button:focus-visible,a:focus-visible { outline:2px solid var(--brand-gold); outline-offset:4px; }
@keyframes panel-in { from {opacity:0;translate:0 12px;} to {opacity:1;translate:0 0;} }
@keyframes panel-out { to {opacity:0;translate:0 8px;} }
::view-transition-old(root) { animation:180ms ease both fade-out; }
::view-transition-new(root) { animation:300ms var(--ease-out) both reveal-page; }
@keyframes fade-out { to {opacity:0;} }
@keyframes reveal-page { from {opacity:0;transform:translateY(5px);} to {opacity:1;transform:translateY(0);} }
@media(max-width:900px) {
 .app-header { padding:0 24px; gap:24px; } .tabs { gap:24px; }
 .course-panel { bottom:100px; left:50%; transform:translateX(-50%); width:min(360px,calc(100% - 40px)); }
}
@media(max-width:600px) {
 .app-header { flex-wrap:wrap; gap:0; padding:17px 20px 0; min-height:121px; }
 .app-identity img { width:31px; height:31px; } .app-identity strong { font-size:16px; }
 .app-identity small { font-size:7px; letter-spacing:1px; }
 .tabs { width:100%; gap:0; justify-content:space-between; margin-top:9px; }
 .tab { flex:1; padding:13px 0 14px; font-size:11px; } .tab .tab-en { font-size:8px; }
 .tab::after { left:27%;right:27%; }
 .course-shell { height:calc(100svh - 121px); min-height:400px; }
 .course-brand { top:22px;left:20px; max-width:calc(100% - 88px); }
 .course-brand small { font-size:7px;letter-spacing:1.4px; } .course-brand strong { font-size:18px; }
 .course-controls { top:20px;right:18px; } .course-controls button { width:36px;height:38px; }
 .course-dock { bottom:27px; } .course-dock button { padding:13px 15px;font-size:10px;gap:7px; }
 .course-hint { bottom:91px; font-size:8px; }
 .page-intro { padding:40px 24px 28px; } .page-intro h2 { font-size:27px; }
 .page-intro h2 span { font-size:12px; } .page-intro p { font-size:11px; }
 .leaderboard-wrap,.schedule-wrap { padding:0 24px 44px; }
 .status-bar { margin:20px 24px 0; } .live-indicator { font-size:10px; }
 .tl-header .round-name { font-size:13px;gap:12px; } .tl-badge { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
 .course-panel:not([hidden]),.course-panel.is-closing { animation:none; }
 ::view-transition-group(*) { animation:none; } ::view-transition-old(root),::view-transition-new(root) { animation:none; }
 * { transition-duration:.01ms !important; }
}

body { overflow-anchor:none; }

/* Quiet neutral surfaces; brand colour is reserved for identity and selection. */
:root { --bg-page:#fafaf8; --text-primary:#2b2c30; --text-secondary:#81818a; --border:#e8e8e6; --border-light:#efefed; }
[data-theme="dark"] { --bg-page:#17171b; --bg-surface:#202025; --bg-card:#202025; --text-primary:#efeff1; --text-secondary:#a0a0a8; --border:#33333a; }
.eyebrow { color:var(--text-secondary); }
.app-identity strong span { color:var(--text-secondary); }
.tab::after { background:var(--brand-ink); }
[data-theme="dark"] .tab::after { background:#d6d2e8; }
.tl-header .round-name { color:var(--text-primary); }
.tl-header .round-name .tag { color:var(--text-secondary); }
.course-tag { color:var(--text-secondary); }
.course-panel.gsap-panel:not([hidden]) { animation:none; }

/* English typography and the event's deep indigo masthead. */
.app-header { background:#292363; border-bottom:1px solid #ffffff14; }
.app-identity { color:#fff; }
.app-identity strong { font-size:21px; font-weight:500; letter-spacing:1.5px; }
.app-identity strong span { color:#c8bfa9; font-size:11px; letter-spacing:1px; }
.app-identity small { color:#d1ccdf; font-size:8px; letter-spacing:1.6px; }
.app-header .tabs { background:transparent; }
.app-header .tab { color:#bdb8d0; font-weight:400; padding:34px 0; letter-spacing:.35px; font-size:12px; }
.app-header .tab.active,.app-header .tab:hover { color:#fff; }
.app-header .tab::after { background:#b8a980; bottom:0; }
.course-brand strong { font-family:'Playfair Display',Georgia,serif; font-size:27px; letter-spacing:0; line-height:1.25; }
.course-brand small { letter-spacing:2.3px; font-size:8px; }
.page-intro h2 { font-family:'Playfair Display',Georgia,serif; font-size:38px; font-weight:700; letter-spacing:-.5px; }
.page-intro p { line-height:1.8; max-width:420px; }
.course-panel h2 { font-family:'Playfair Display',Georgia,serif; font-weight:700; letter-spacing:0; }
.course-dock button { font-weight:400; letter-spacing:.2px; }
@media(max-width:600px) {
 .app-header { min-height:109px; } .app-header .tab { padding:17px 0; font-size:11px; }
 .app-identity strong { font-size:17px; } .app-identity small { font-size:6px;letter-spacing:1.25px; }
 .course-shell { height:calc(100svh - 109px); }
 .course-brand strong { font-size:23px; max-width:235px; }
 .course-dock button { font-size:10px;padding:13px 12px;gap:6px; }
 .course-dock svg { width:15px;height:15px; }
 .page-intro h2 { font-size:32px; }
}

.event-facts { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.event-facts small { display:block;font-size:8px;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:10px; }
.event-facts strong { font-size:12px;font-weight:500; }
.schedule-note { font-size:10px;color:var(--text-secondary);line-height:1.8;margin:18px 0 26px;max-width:550px; }
.course-facts { display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11px;color:var(--text-primary);padding:18px 0 0; }
@media(max-width:600px){.event-facts{grid-template-columns:1fr;gap:18px;} .event-facts small{margin-bottom:5px;}}

.preview-notice { font-size:10px;line-height:1.8;padding:14px 18px;margin-bottom:18px;border-left:2px solid var(--brand-gold);background:var(--grass-bg);color:var(--text-secondary); }
.preview-notice[hidden] { display:none; }
