/* v0.1.58 — Shared CLASS-mode visual shell. Never modifies Race, A4, game engines or private question banks.
   All 21 game sections are marked .shared-game-shell; their custom input panels remain independent. */
html[data-theme="light"] #brand-home,
html[data-theme="light"] #brand-home:hover,
html[data-theme="light"] #brand-home:focus-visible {color:#223b51!important;text-shadow:none!important}
html[data-theme="light"] #brand-home span,
html[data-theme="light"] #brand-home:hover span,
html[data-theme="light"] #brand-home:focus-visible span {color:#087f81!important}
html[data-theme="light"] #brand-home:hover,
html[data-theme="light"] #brand-home:focus-visible {background:#e0f2f0!important}
html[data-theme="dark"] #brand-home,
html[data-theme="dark"] #brand-home:hover,
html[data-theme="dark"] #brand-home:focus-visible {color:#edf8ff!important;text-shadow:none!important}
html[data-theme="dark"] #brand-home span,
html[data-theme="dark"] #brand-home:hover span,
html[data-theme="dark"] #brand-home:focus-visible span {color:#71d9d0!important}
html[data-theme="dark"] #brand-home:hover,
html[data-theme="dark"] #brand-home:focus-visible {background:#284453!important}

/* The same compact centered command bar used by Sudoku, on every game. */
body[data-mode="class"] section.shared-game-shell {
  background:var(--theme-main,#fafcfe);border-color:var(--theme-border,#cbd8e3);
}
body[data-mode="class"] section.shared-game-shell > .arena-head {
  box-sizing:border-box!important;flex:0 0 74px!important;
  width:100%!important;height:74px!important;max-height:74px!important;
  padding:8px 12px!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border-bottom:1px solid var(--theme-border,#dce7ec)!important;
  background:var(--theme-main,#fafcfe)!important;
}
body[data-mode="class"] section.shared-game-shell > .arena-head > .arena-game-brand {display:none!important}
body[data-mode="class"] section.shared-game-shell > .arena-head > .arena-head-actions {
  width:100%!important;max-width:none!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-wrap:nowrap!important;gap:14px!important;
}
body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn {
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 1 175px!important;width:175px!important;min-width:0!important;max-width:175px!important;
  min-height:54px!important;height:54px!important;padding:7px 18px!important;
  border-radius:16px!important;font-size:1rem!important;line-height:1.15!important;
  font-weight:900!important;text-align:center!important;white-space:nowrap!important;
  background:linear-gradient(180deg,#0fa39a,#0c857f)!important;
  color:#fff!important;border:1px solid #087974!important;
  box-shadow:0 3px 0 #075f5c,0 9px 19px #0c787214!important;
  text-shadow:none!important;
}
body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn:hover:not(:disabled),
body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn:focus-visible:not(:disabled) {
  background:linear-gradient(180deg,#12aaa0,#0b8983)!important;
  color:white!important;border-color:#07716d!important;
}
body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn span {color:inherit!important;display:inline!important}
html[data-theme="dark"] body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn {
  background:linear-gradient(180deg,#0c8980,#0b706e)!important;
  border-color:#53aaa4!important;color:#fff!important;
  box-shadow:0 3px 0 #064744,0 8px 16px #0003!important;
}
html[data-theme="dark"] body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn:hover:not(:disabled) {
  background:linear-gradient(180deg,#16a098,#0b7d77)!important;
}

/* A shared canvas with a centered game-specific board and familiar status region. */
body[data-mode="class"] section.shared-game-shell > .playground {
  display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
  width:100%;padding:9px 14px 12px!important;
  background:var(--theme-main,#fafcfe);
}
body[data-mode="class"] section.shared-game-shell > .playground::before,
body[data-mode="class"] section.shared-game-shell > .playground::after {display:none!important}
body[data-mode="class"] section.shared-game-shell .playground > :first-child:not(.arena-ornament) {margin-inline:auto;max-width:100%}
body[data-mode="class"] section.shared-game-shell .playground .feedback {
  box-sizing:border-box;flex-shrink:0;
  width:min(100%,820px);max-width:820px;
  margin-inline:auto;text-align:center;
  border-radius:999px;
  min-height:30px;padding:5px 12px;
  font-size:.79rem;line-height:1.45;
}
body[data-mode="class"] section.shared-game-shell .playground :is(.game-actions,.maze-controls,.abc-controls,.fence-controls,.sky-controls,.akari-controls,.bs-controls,.kk-controls,.ft-controls,.hs-controls,.ng-controls,.hi-controls,.sh-controls,.tt-controls,.nu-controls,.sb-controls,.kr-controls,.tz-controls,.py-controls,.cd-controls,.tg-controls) {
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;
}
body[data-mode="class"] section.shared-game-shell .playground :is(.game-actions,.maze-controls,.abc-controls,.fence-controls,.sky-controls,.akari-controls,.bs-controls,.kk-controls,.ft-controls,.hs-controls,.ng-controls,.hi-controls,.sh-controls,.tt-controls,.nu-controls,.sb-controls,.kr-controls,.tz-controls,.py-controls,.cd-controls,.tg-controls) .btn {
  min-height:42px;min-width:105px;padding:7px 13px;border-radius:12px;
  font-size:.9rem;font-weight:900;
}
/* Preserve each board's special interaction geometry, but limit maximum on-screen size
   to the Sudoku reference. Values use !important to cap JS-calculated inline sizes. */
body[data-mode="class"] section.shared-game-shell :is(
  .abc-board,.fence-board,.sky-board,.akari-board,.bs-board,.kk-board,.ft-board,
  .hs-board,.ng-board,.hi-board,.sh-board,.tt-board,.nu-board,.sb-board,
  .kr-board,.tz-board,.py-board,.cd-board
) {max-width:min(100%,465px,calc(100dvh - 235px))!important;max-height:min(465px,calc(100dvh - 235px))!important}
body[data-mode="class"] section.shared-game-shell .maze-board {max-width:min(100%,465px)!important;max-height:min(465px,calc(100dvh - 235px))!important}

@media (max-width:950px){
 body[data-mode="class"] section.shared-game-shell > .arena-head {flex-basis:65px!important;height:65px!important;max-height:65px!important}
 body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn {height:47px!important;min-height:47px!important;max-width:154px!important;font-size:.85rem!important;padding:5px 12px!important}
 body[data-mode="class"] section.shared-game-shell > .playground {padding:7px 9px 10px!important}
 body[data-mode="class"] section.shared-game-shell :is(.abc-board,.fence-board,.sky-board,.akari-board,.bs-board,.kk-board,.ft-board,.hs-board,.ng-board,.hi-board,.sh-board,.tt-board,.nu-board,.sb-board,.kr-board,.tz-board,.py-board,.cd-board,.maze-board){max-width:min(100%,430px,calc(100vw - 30px))!important;max-height:min(430px,calc(100dvh - 205px))!important}
}
@media (max-width:550px){
 body[data-mode="class"] section.shared-game-shell > .arena-head {flex-basis:55px!important;height:55px!important;max-height:55px!important;padding:5px 8px!important}
 body[data-mode="class"] section.shared-game-shell > .arena-head > .arena-head-actions {gap:9px!important}
 body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn {height:40px!important;min-height:40px!important;max-width:135px!important;font-size:.77rem!important;border-radius:11px!important;padding:4px 7px!important}
 body[data-mode="class"] section.shared-game-shell > .playground {padding:5px 7px!important}
 body[data-mode="class"] section.shared-game-shell :is(.abc-board,.fence-board,.sky-board,.akari-board,.bs-board,.kk-board,.ft-board,.hs-board,.ng-board,.hi-board,.sh-board,.tt-board,.nu-board,.sb-board,.kr-board,.tz-board,.py-board,.cd-board,.maze-board){max-width:min(100%,calc(100vw - 30px))!important;max-height:min(420px,calc(100dvh - 215px))!important}
 body[data-mode="class"] section.shared-game-shell .playground :is(.game-actions,.maze-controls,.abc-controls,.fence-controls,.sky-controls,.akari-controls,.bs-controls,.kk-controls,.ft-controls,.hs-controls,.ng-controls,.hi-controls,.sh-controls,.tt-controls,.nu-controls,.sb-controls,.kr-controls,.tz-controls,.py-controls,.cd-controls,.tg-controls) .btn {min-width:82px;min-height:33px;padding:5px 8px;font-size:.75rem}
 body[data-mode="class"] section.shared-game-shell .playground .feedback {font-size:.7rem;min-height:24px;padding:3px 8px}
}
@media(max-height:550px){
 body[data-mode="class"] section.shared-game-shell > .arena-head {flex-basis:42px!important;height:42px!important;max-height:42px!important;padding:3px!important}
 body[data-mode="class"] section.shared-game-shell > .arena-head .arena-head-actions > .btn {min-height:31px!important;height:31px!important;max-width:128px!important;font-size:.74rem!important}
 body[data-mode="class"] section.shared-game-shell > .playground {padding:3px 7px!important}
}
/* Match the Sudoku reference board footprint without interfering with its fit calculation. */
body[data-mode="class"] section.shared-game-shell #sudoku-board {
  max-width:min(465px,calc(100dvh - 225px),calc(100vw - 32px))!important;
  max-height:min(465px,calc(100dvh - 225px),calc(100vw - 32px))!important;
}
@media(max-width:550px){body[data-mode="class"] section.shared-game-shell #sudoku-board {
 max-width:min(96vw,calc(100dvh - 205px))!important;max-height:min(96vw,calc(100dvh - 205px))!important;
}}