/*! Copyright (c) 1988-2026 Daniel Hedrick. ChesSphere(TM). m0188: Observatory look. Ink navy, one gold accent, hairlines instead of glows, one serif (Cinzel) for headings and Inter for the interface. Loaded last; nothing here removes a control. */
@font-face{font-family:Inter;font-weight:400 700;font-display:swap;src:url(assets/fonts/inter.woff2) format("woff2")}
@font-face{font-family:Cinzel;font-weight:600;font-display:swap;src:url(assets/fonts/cinzel.woff2) format("woff2")}
:root{--ob-bg:#090e20;--ob-bg2:#12193a;--ob-panel:#101832;--ob-panel2:#16203f;--ob-line:#2b3760;--ob-ink:#ece6d6;--ob-mut:#8c96b4;--ob-gold:#c9a65a;--ob-gold-hi:#dcc17c;--ob-gold-lo:rgba(201,166,90,.14);--ob-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ob-serif:Cinzel,"Cormorant Garamond",Georgia,serif;
 --cs-glow:0 0 0 1px rgba(201,166,90,.22),0 10px 28px -10px rgba(0,0,0,.7)}
html.obs body:not(.theme-mono){--cs-glow:0 0 0 1px rgba(201,166,90,.22),0 10px 28px -10px rgba(0,0,0,.7)}
/* type */
html.obs body{font-family:var(--ob-sans);font-variant-numeric:tabular-nums;color:var(--ob-ink);background:var(--ob-bg)}
html.obs body :where(*:not(svg):not(svg *):not(code):not(.key)){font-family:var(--ob-sans)}
html.obs body .ngTitle,html.obs body #panel .title,html.obs body .trialBox h2,html.obs body .aboutCard h2,html.obs body .cTitle,html.obs body .vpTitle,html.obs body .lpBig,html.obs body #landing h1,html.obs body #landing h2,html.obs body .promoBox h2,html.obs body .memberBox h2,html.obs body #newsBox .ngTitle,html.obs body .ccTitle,html.obs body .ccTitle *{font-family:var(--ob-serif);font-weight:600;letter-spacing:.04em}
html.obs body #panel .title{font-size:21px;color:var(--ob-ink);letter-spacing:.06em}
html.obs body #panel .title .tagline{font-family:var(--ob-sans);font-size:10px;letter-spacing:.18em;color:var(--ob-gold);text-transform:uppercase}
html.obs body .ngTitle{font-size:20px;color:var(--ob-ink)}
html.obs body #clocks b,html.obs body #moves,html.obs body #moves *,html.obs body .rating,html.obs body #ratingBox *{font-variant-numeric:tabular-nums lining-nums}
/* surfaces: solid ink, hairline border, no glow */
html.obs body:not(.theme-mono) :is(#panel,#movesPanel,#mapPanel,#legendBox,#coachPanel,#tutorBox,.floatpanel,#csTopBar,#soundPop,#tcBar,#lobbyBox,#lbBox,#guideCard,#teaseCard,#edgeCard,#lightNotice,#avaNews,#corrBar,#onlineBar,#lichessBar,#menuMode,.cSec){background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:0 10px 28px -12px rgba(0,0,0,.75)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.obs body:not(.theme-mono) :is(#panel,#movesPanel,#mapPanel,#legendBox,#coachPanel,.floatpanel,.cSec){border-radius:10px!important}
html.obs body:not(.theme-mono) #panel .cSec,html.obs body:not(.theme-mono) #panel #menuMode{box-shadow:none!important;background:transparent!important}
html.obs body:not(.theme-mono) :is(.promoBox,.trialBox,.aboutCard,.welcome){background:var(--ob-panel)!important;border:1px solid rgba(201,166,90,.45)!important;border-radius:12px!important;box-shadow:0 24px 70px -20px rgba(0,0,0,.85)!important}
html.obs body .modal{background:rgba(5,8,20,.72)}
html.obs body:not(.theme-mono) #bubble{background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:0 10px 28px -12px rgba(0,0,0,.75)!important;color:var(--ob-ink);border-radius:10px;border-left:2px solid var(--ob-gold)!important}
html.obs body #bubble .bTail{display:none}
html.obs body:not(.theme-mono) .floatpanel .grip{background:transparent;border-bottom:1px solid var(--ob-line);color:var(--ob-mut);font-family:var(--ob-serif);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
/* buttons: quiet outlines, gold for selected and primary */
html.obs body:not(.theme-mono) :is(button,select,input[type=text],input[type=email],input:not([type]),input[type=number],textarea){font-family:var(--ob-sans);background:var(--ob-panel2);color:var(--ob-ink);border:1px solid var(--ob-line);border-radius:8px;box-shadow:none;text-shadow:none}
html.obs body:not(.theme-mono) :is(button,.tab,.stab):hover:not(:disabled){border-color:var(--ob-gold);background:#1a2548}
html.obs body:not(.theme-mono) :is(button.on,.tab.on,.stab.on,button[aria-pressed=true],button[aria-checked=true],.menuMode button.on,#bvGroup .bvRow button.on,.svTile.on){background:var(--ob-gold-lo)!important;border-color:var(--ob-gold)!important;color:var(--ob-gold-hi)!important;outline:none!important;box-shadow:none!important;font-weight:600}
html.obs body:not(.theme-mono) :is(button.accent,.accent){background:var(--ob-gold)!important;color:#15110a!important;border:1px solid var(--ob-gold)!important;font-weight:600;box-shadow:none!important}
html.obs body:not(.theme-mono) :is(button.accent,.accent):hover:not(:disabled){background:var(--ob-gold-hi)!important;border-color:var(--ob-gold-hi)!important}
html.obs body:not(.theme-mono) #panel :is(#hintBtn.accent){background:var(--ob-panel2)!important;color:var(--ob-ink)!important;border:1px solid var(--ob-line)!important;font-weight:500}
html.obs body:not(.theme-mono) #panel #hintBtn.accent:hover{border-color:var(--ob-gold)!important}
html.obs body :is(button,input,select,textarea,a,[tabindex]):focus-visible{outline:2px solid var(--ob-gold)!important;outline-offset:2px}
html.obs body button:disabled{opacity:.4}
html.obs body a{color:var(--ob-gold-hi)}
/* Board view as one joined segmented control */
html.obs body #bvGroup .bvRow{gap:0;border:1px solid var(--ob-line);border-radius:8px;overflow:hidden}
html.obs body #bvGroup .bvRow button{border:0!important;border-radius:0!important;background:transparent}
html.obs body #bvGroup .bvRow button+button{border-left:1px solid var(--ob-line)!important}
html.obs body #bvGroup .bvRow button:nth-child(n+3){border-top:1px solid var(--ob-line)!important}
html.obs body #bvGroup .bvRow button:nth-child(3){border-left:0!important}
html.obs body .bvT,html.obs body .vpTitle{color:var(--ob-mut);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
html.obs body .bvT small{letter-spacing:0;text-transform:none;color:var(--ob-gold)}
/* top bar: hairline pill, no glow; icons stay as they are */
html.obs body:not(.theme-mono) #csTopBar{border-radius:12px!important;padding:4px 6px;gap:6px}
html.obs body:not(.theme-mono) #csTopBar button{border-radius:9px}
html.obs body:not(.theme-mono) #csTopBar #newGameFab{background:var(--ob-gold)!important;color:#15110a!important;font-weight:600}
/* tiny helpers */
html.obs body .hint,html.obs body .muted,html.obs body small{color:var(--ob-mut)}
html.obs body .grid label,html.obs body label{color:var(--ob-ink)}
html.obs body #panel{font-size:13px}
html.obs body .obsIc{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* New game dialog: mode cards with line icons, gold selected state */
html.obs body .ngModes label{border:1px solid var(--ob-line);background:var(--ob-panel2);border-radius:10px;position:relative;padding:12px 12px 12px 44px!important;transition:border-color .12s}
html.obs body .ngModes label:hover{border-color:var(--ob-gold)}
html.obs body .ngModes label:has(input:checked){border-color:var(--ob-gold);background:var(--ob-gold-lo)}
html.obs body .ngModes label>.obsIc{position:absolute;left:13px;top:13px;width:22px;height:22px;color:var(--ob-mut)}
html.obs body .ngModes label:has(input:checked)>.obsIc{color:var(--ob-gold)}
html.obs body .ngModes span{color:var(--ob-mut)}
/* Welcome card: calm full ink scrim, the game UI waits behind it */
html.obs body #welcomeBox{background:radial-gradient(120% 90% at 50% 20%,#141d44 0,#090e20 70%)!important;z-index:60}
html.obs body #welcomeBox .promoBox{max-width:460px;text-align:center}
html.obs body #welcomeBox .ngTitle{font-size:26px;color:var(--ob-gold-hi)}
html.obs body #welcomeBox input{background:#0b1226;text-align:center}
/* first-visit landing: ink, serif, gold hairlines */
html.obs body #landing{background:radial-gradient(120% 90% at 50% 25%,#141d44 0,#090e20 72%)!important;color:var(--ob-ink)}
html.obs body #landing .lpBig{color:var(--ob-ink)}
html.obs body #landing .lpTag,html.obs body #landing .lpRot{font-family:var(--ob-serif);letter-spacing:.14em;color:var(--ob-gold-hi);text-transform:uppercase;font-size:13px}
html.obs body #landing hr.lpHr{border:0;border-top:1px solid rgba(201,166,90,.45);box-shadow:none}
html.obs body #landing .lpChoices button{background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:none!important;border-radius:12px}
html.obs body #landing .lpChoices button:hover{border-color:var(--ob-gold)!important}
html.obs body #landing .lpNext{background:var(--ob-gold)!important;color:#15110a!important;border:0!important;box-shadow:none!important}
html.obs body #landing input{background:#0b1226;border:1px solid var(--ob-line);color:var(--ob-ink)}
html.obs body #landing .lpCopy{color:var(--ob-mut)}
/* ===== Traditional classic ===== */
#obsBack{position:fixed;inset:0;z-index:2;pointer-events:none;display:none;background:radial-gradient(70% 70% at 50% 50%,#0a1022 0,#0a1022 62%,rgba(10,16,34,.88) 100%),#0a1022}
#obsBack:before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1px 1px at 12px 18px,#fff8,transparent 60%),radial-gradient(1px 1px at 70px 90px,#fff6,transparent 60%),radial-gradient(1.2px 1.2px at 130px 40px,#e8d9a8aa,transparent 60%),radial-gradient(1px 1px at 40px 140px,#fff5,transparent 60%);background-size:160px 170px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 55%,#000 100%);mask-image:radial-gradient(70% 70% at 50% 50%,transparent 55%,#000 100%)}
html.obs body.tcOn #obsBack{display:block}
html.obs body.tcOn #tcDraw{z-index:15}
html.obs body:not(.theme-mono) #tcBar{border-radius:10px!important;gap:2px;padding:3px}
html.obs body #tcBar button{background:transparent;border:0;color:var(--ob-ink);border-radius:8px;min-width:40px;justify-content:center}
html.obs body #tcBar button:hover:not(:disabled){background:var(--ob-gold-lo);color:var(--ob-gold-hi)}
html.obs body #tcBar button.on{background:var(--ob-gold-lo)!important;color:var(--ob-gold-hi)!important}
html.obs body #tcBar em{color:var(--ob-gold-hi);font-size:12px}
html.obs body #tcBar.rv{border-color:var(--ob-gold)!important}
html.obs body #tcToast,html.obs body #csSaved{background:var(--ob-panel);border:1px solid var(--ob-gold);color:var(--ob-ink)}
/* docked right column (desktop, Traditional classic) */
#obsDock{position:fixed;right:12px;top:68px;bottom:12px;width:300px;z-index:6;display:none;flex-direction:column;gap:8px;overflow:auto;pointer-events:none;scrollbar-width:thin}
html.obs body.tcOn:not(.mob) #obsDock.on{display:flex}
#obsDock>*{pointer-events:auto;position:static!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;flex:none}
#obsDock>#movesPanel{flex:1 1 auto;min-height:150px;height:auto!important}
#obsDock>.mini{height:auto!important}
#obsDock .rsz{display:none}
html.obs body.tcOn #movesPanel #moves{display:grid;grid-template-columns:2.6em 1fr 1fr;gap:0 .4em;list-style:none;margin:0;padding:0;font:500 14px/1.7 var(--ob-sans);counter-reset:none;align-content:start}
html.obs body.tcOn #movesPanel #moves li{display:contents}
html.obs body.tcOn #movesPanel #moves li:before{content:attr(value) ".";color:var(--ob-mut);text-align:right}
/* Ava perch */
#obsAva{position:fixed;z-index:8;width:46px;height:46px;display:none;pointer-events:none;transform:rotate(14deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
#obsAva img{width:100%;height:100%;object-fit:contain;transform-origin:50% 60%}
html.obs body.tcOn #obsAva.on{display:block}
#obsAva.say img{animation:obsBeat 4.2s ease-out 1}
@keyframes obsBeat{0%{transform:scaleX(1)}6%{transform:scaleX(.5)}12%{transform:scaleX(1)}18%{transform:scaleX(.55)}24%{transform:scaleX(1)}30%{transform:scaleX(.7)}38%,100%{transform:scaleX(1)}}
html.obs body.tcOn:not(.mob) #bubble:not(.moved){left:var(--obs-bx,40%)!important;top:var(--obs-by,80%)!important;right:auto!important;bottom:auto!important;width:var(--obs-bw,360px)!important;max-width:none!important;transform:none!important;text-align:center}
/* Sign in and member pages share these */
body.obsPage{margin:0;min-height:100vh;background:radial-gradient(120% 90% at 30% 10%,#141d44 0,#090e20 70%);color:var(--ob-ink);font-family:var(--ob-sans);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){#obsAva.say img{animation:none}}

@keyframes obsIn{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:none}}
html.obs body #landing .lpBflyBtn,html.obs body #landing .lpBflyBtn:hover{background:transparent!important;border:0!important;box-shadow:none!important}
html.obs body #tcBar em{max-width:320px;white-space:normal;line-height:1.35}