/* Crosslink V280: ONE viewport-aligned shell for every non-game screen.
   Intentionally loaded last on each HTML page to neutralise older width rules.
   No selectors touch gameplay: body.board-view is excluded everywhere. */
:root {
  --cl-shell-max: 1080px;
  --cl-banner-max: 1040px;
  --cl-panel-max: 1056px;
  --cl-nav-max: 900px;
  --cl-shell-gutter: 12px;
  --cl-shell-panel-radius: 24px;
  --cl-shell-panel-border: #d9e4f1;
}
/* The main SPA has an outer .app; standalone pages have direct body children.
   Both now reference the same viewport measurements, NOT their parent widths. */
body:not(.board-view) .app {
  box-sizing:border-box!important;
  width:min(100%, var(--cl-shell-max))!important;
  max-width:var(--cl-shell-max)!important;
  margin:0 auto!important;
  padding:0 var(--cl-shell-gutter) 28px!important;
}
body:not(.board-view) .cl-header {
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  margin:0 auto 22px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body:not(.board-view) .cl-header .cl-brand {
  box-sizing:border-box!important;
  display:block!important;
  width:min(var(--cl-banner-max),calc(100vw - 2 * var(--cl-shell-gutter)))!important;
  max-width:var(--cl-banner-max)!important;
  margin:8px auto 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body:not(.board-view) .brand-header {
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(var(--cl-banner-max),calc(100vw - 2 * var(--cl-shell-gutter)))!important;
  max-width:var(--cl-banner-max)!important;
  margin:8px auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  overflow:visible!important;
}
body:not(.board-view) .brand-header::before,
body:not(.board-view) .brand-header::after {content:none!important;display:none!important;animation:none!important;}
body:not(.board-view) .brand-header .cl-banner-home {display:block!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;border:0!important;}
body:not(.board-view) .cl-header .cl-brand > img.crosslink-banner-clean,
body:not(.board-view) .brand-header img.crosslink-banner-clean {
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  object-fit:contain!important;
  box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
  filter:none!important;
  transform:none!important;
}
/* Both kinds of nav (SPA buttons and standalone links) have one grid and
   identical widths/positions.  Five slots include the Account name/status. */
body:not(.board-view) .cl-header .cl-nav,
body:not(.board-view) .cl-universal-nav {
  box-sizing:border-box!important;
  width:min(var(--cl-nav-max),calc(100vw - 2 * var(--cl-shell-gutter)))!important;
  max-width:var(--cl-nav-max)!important;
  min-height:60px!important;
  margin:0 auto!important;
  padding:6px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 2.2fr 1.15fr 1fr!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:5px!important;
  border:1px solid #d7e5f1!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 6px 20px rgba(34,70,103,.09)!important;
}
body:not(.board-view) .cl-universal-nav {margin:14px auto 22px!important;}
body:not(.board-view) .cl-header .cl-nav > :is(button,a),
body:not(.board-view) .cl-universal-nav > a {
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  max-width:none!important;
  margin:0!important;
  padding:8px 8px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  color:#3d526d!important;
  background:transparent!important;
  font:800 15px system-ui,sans-serif!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:none!important;
  white-space:normal!important;
}
body:not(.board-view) .cl-header .cl-nav > :is(button,a):hover,
body:not(.board-view) .cl-universal-nav > a:hover {background:#e8f6ff!important;color:#163e70!important;}
body:not(.board-view) .cl-header .cl-nav > [aria-current="page"],
body:not(.board-view) .cl-universal-nav > [aria-current="page"] {
  background:#1675cf!important;
  border-color:#1675cf!important;
  color:#fff!important;
  box-shadow:0 3px 9px #1865a533!important;
}
body:not(.board-view) .cl-header .cl-nav > a.cl-login-bar {
  background:#eaf8f0!important;
  color:#24543e!important;
  border-color:#a0d9bc!important;
  font-weight:700!important;
}
body:not(.board-view) .cl-header .cl-nav .cl-login-label {overflow:hidden!important;text-overflow:ellipsis!important;}
/* Main page cards and standalone-page panels use the same exact width,
   outer radius and spacing, without touching any inner forms. */
body:not(.board-view) #view-play,
body:not(.board-view) #view-online,
body:not(.board-view) #view-settings,
body:not(.board-view) #view-help,
body.crosslink-standalone-page > main,
body.crosslink-standalone-page.cl-signed-in > main,
body.history-body > .history-wrap {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--cl-panel-max)!important;
  margin:0 auto 24px!important;
  padding:20px 22px!important;
  background:#fff!important;
  border:1px solid var(--cl-shell-panel-border)!important;
  border-radius:var(--cl-shell-panel-radius)!important;
  box-shadow:0 12px 32px rgba(21,43,74,.12)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  min-height:0!important;
  height:auto!important;
}
body.crosslink-standalone-page > main,
body.crosslink-standalone-page.cl-signed-in > main,
body.history-body > .history-wrap {
  width:min(var(--cl-panel-max),calc(100% - 2 * var(--cl-shell-gutter)))!important;
  flex:0 0 auto!important;
}
body:not(.board-view) #view-play[hidden],
body:not(.board-view) #view-online[hidden],
body:not(.board-view) #view-settings[hidden],
body:not(.board-view) #view-help[hidden] {display:none!important;}
/* The main app's shell may wrap the four views: don't add a second panel. */
body:not(.board-view) .app > .panel {padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;}
@media(max-width:670px){
  body:not(.board-view) .cl-header {gap:10px!important;margin-bottom:14px!important;}
  body:not(.board-view) .brand-header {margin-top:8px!important;}
  body:not(.board-view) .cl-header .cl-nav,
  body:not(.board-view) .cl-universal-nav {gap:2px!important;padding:4px!important;min-height:48px!important;border-radius:14px!important;grid-template-columns:1fr 1fr 1.7fr 1fr 1fr!important;}
  body:not(.board-view) .cl-universal-nav {margin:10px auto 14px!important;}
  body:not(.board-view) .cl-header .cl-nav > :is(button,a),
  body:not(.board-view) .cl-universal-nav > a {font-size:clamp(10px,2.5vw,13px)!important;padding:8px 3px!important;min-height:40px!important;border-radius:9px!important;}
  body:not(.board-view) #view-play,body:not(.board-view) #view-online,
  body:not(.board-view) #view-settings,body:not(.board-view) #view-help,
  body.crosslink-standalone-page > main,body.crosslink-standalone-page.cl-signed-in > main,
  body.history-body > .history-wrap {padding:14px 12px!important;border-radius:18px!important;}
  body:not(.board-view) .cl-header .cl-brand > img.crosslink-banner-clean,
  body:not(.board-view) .brand-header img.crosslink-banner-clean {border-radius:12px!important;}
}