/* Compact header, bottom controls and accessible navigation drawer. */
.hint-preview { position: absolute; inset: 0; pointer-events: none; z-index: 1500; }
.hint-card { position: absolute; top: 0; left: 0; width: var(--card-w); height: var(--card-h); border-radius: 7px; opacity: .55; box-shadow: 0 0 0 3px var(--gold), 0 10px 26px #0007, 0 0 24px #dfc89166; }
.hint-card img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: inherit; }
.header {
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid #c8dfcd22;
  background: #09291f70;
}
.header-navigation { display: flex; align-items: center; height: 100%; }
.header button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex: 0 0 40px;
  border-radius: 4px;
  font-size: 23px;
}
.header button span[aria-hidden] { margin: 0; }
.hamburger { width: 19px; height: 14px; border-block: 2px solid currentColor; position: relative; }
.hamburger::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.fullscreen-icon { width: 18px; height: 18px; background: linear-gradient(currentColor,currentColor) left top / 6px 2px,linear-gradient(currentColor,currentColor) left top / 2px 6px,linear-gradient(currentColor,currentColor) right top / 6px 2px,linear-gradient(currentColor,currentColor) right top / 2px 6px,linear-gradient(currentColor,currentColor) left bottom / 6px 2px,linear-gradient(currentColor,currentColor) left bottom / 2px 6px,linear-gradient(currentColor,currentColor) right bottom / 6px 2px,linear-gradient(currentColor,currentColor) right bottom / 2px 6px; background-repeat: no-repeat; }
#fullscreen[aria-pressed="true"] { color: var(--gold); background: #ffffff14; }
#fullscreen[aria-pressed="true"] .fullscreen-icon { transform: scale(.75); }
#audio svg { display: block; width: 24px; height: 24px; }
#audio[aria-pressed="false"] .audio-on,
#audio[aria-pressed="true"] .audio-off { display: none; }
#audio[aria-pressed="true"] { color: var(--gold); }
.header .scoreboard { margin-left: auto; height: 100%; align-items: center; }
.header .scoreboard > div { min-width: 76px; padding: 0 14px; }
.header .scoreboard span { font-size: 9px; line-height: 12px; margin: 0; letter-spacing: .3px; }
.header .scoreboard strong { display: block; font-size: 16px; line-height: 19px; letter-spacing: .3px; }
.toolbar { background: rgb(0 0 0 / 25%); --toolbar-label-size: 13px; flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; padding: 6px 0; border-block: 1px solid #c8dfcd22; }
.toolbar-dock { position: sticky; bottom: 0; z-index: 2000; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: end; gap: 4px; flex: 0 0 auto; }
#toolbar-toggle { width: 36px; height: 44px; margin: 0 10px; padding: 0; font-size: 27px; align-self: end; background: #09291fe6; }
#toolbar-toggle img { display: block; width: 32px; height: 32px; object-fit: contain; }
.toolbar-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s ease; }
.toolbar-panel-inner { min-height: 0; }
.toolbar-panel .toolbar { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .24s ease, opacity .24s ease, visibility 0s; }
.toolbar-dock.is-collapsed .toolbar-panel { grid-template-rows: 0fr; }
.toolbar-dock.is-collapsed .toolbar-panel-inner { overflow: hidden; }
.toolbar-dock.is-collapsed .toolbar { transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform .24s ease, opacity .24s ease, visibility 0s .24s; }
#toolbar-actions { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 6px; }
#toolbar-actions[hidden] { display: none; }
#toolbar-actions button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; min-width: 0; text-align: center; font-size: var(--toolbar-label-size); padding: 9px 14px; }
#toolbar-actions button span { max-width: 100%; overflow-wrap: anywhere; }
#toolbar-actions button img { display: block; width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; border-radius: 6px; }
.toolbar-more { position: relative; display: flex; align-self: center; margin-left: auto; flex: 0 0 48px; }
#more-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 48px; height: 48px; padding: 0; background: rgb(0 0 0 / 25%); text-align: center; }
#more-toggle .more-icon { display: block; width: 32px; height: 32px; object-fit: contain; margin: 0; }
#more-toggle:hover, #more-toggle[aria-expanded="true"] { background: rgb(0 0 0 / 40%); }
#more-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 2000; display: flex; flex-direction: column; width: 190px; padding: 6px; border: 1px solid #d3d8ba36; border-radius: 10px; background: #173e32; box-shadow: 0 8px 32px #0006; }
#more-menu[hidden] { display: none; }
#more-menu button { width: 100%; text-align: left; padding: 12px; font-size: 13px; }
.bottom-note { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-height: 26px; padding: 0 10px; font-size: 10px; line-height: 16px; border: 0; color: #d4e2d5; text-align: right; }
.bottom-note .table-meta { justify-content: flex-start; flex-wrap: wrap; gap: 4px 16px; padding: 0; text-align: left; }
.bottom-note .signature { margin-left: auto; white-space: nowrap; }
.paused .bottom-note { visibility: visible; }
dialog.menu-drawer {
  position: fixed;
  inset: var(--drawer-top, 40px) auto auto 0;
  margin: 0;
  width: min(310px, 88vw);
  height: auto;
  max-height: calc(100dvh - var(--drawer-top, 40px));
  z-index: 3000;
  border-radius: 0 16px 16px 0;
  padding: 28px 20px;
  animation: drawer-in 180ms ease-out;
}
.drawer-links { display: flex; flex-direction: column; margin-top: 28px; gap: 4px; }
.drawer-links button { width: 100%; min-height: 48px; padding: 14px; text-align: left; border-bottom: 1px solid #ffffff14; border-radius: 6px; }
.drawer-links button:hover { color: var(--gold); }
.menu-drawer .actions:empty { display: none; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (max-width: 700px) {
  .header button { width: 36px; flex-basis: 36px; }
  .header .scoreboard > div { min-width: 0; padding: 0 9px; }
  .header .scoreboard strong { font-size: 14px; }
  .header .scoreboard span { font-size: 8px; }
  .toolbar { --toolbar-label-size: 11px; gap: 2px; }
  .toolbar-dock { grid-template-columns: 50px minmax(0, 1fr); }
  #toolbar-toggle { width: 30px; }
  #toolbar-actions { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  #toolbar-actions button { flex: 1 1 auto; flex-direction: column; gap: 4px; padding: 7px 5px; min-height: 40px; }
  #toolbar-actions button span { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 390px) {
  .header .scoreboard > div { padding-inline: 6px; }
  .toolbar { --toolbar-label-size: 10px; }
  #toolbar-actions button { padding-inline: 4px; }
}

/* Nested information view within the navigation drawer. */
dialog.menu-drawer.has-subdrawer { overflow: visible; }
.information-drawer { position: absolute; z-index: 1; top: 12px; left: -1px; width: calc(100% + 2px); min-height: calc(100% - 12px); max-height: calc(100dvh - var(--drawer-top, 40px) - 12px); overflow: auto; padding: 28px 16px; border: 1px solid #d3d8ba36; border-radius: 0 16px 16px 0; background: linear-gradient(145deg, #10352b, #08241d); box-shadow: -8px 0 24px #0005; animation: subdrawer-in 180ms ease-out; }
@keyframes subdrawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.drawer-heading h2 { margin: 0; font-size: 27px; }
.drawer-back { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; }

/* Accessible switches retain native keyboard and checked-state behavior. */
.setting-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 78px; width: 78px; height: 44px; }
.setting-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { display: block; position: relative; flex: 0 0 46px; width: 46px; height: 26px; border: 1px solid #ffffff50; border-radius: 999px; background: #08281f; transition: background-color .2s ease, border-color .2s ease; pointer-events: none; }
.switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #e8ede7; box-shadow: 0 1px 4px #0005; transition: transform .2s ease, background-color .2s ease; }
.setting-switch input:checked + .switch-track { background: var(--gold); border-color: var(--gold); }
.setting-switch input:checked + .switch-track::before { transform: translateX(20px); background: #173e32; }
.setting-switch input:focus-visible + .switch-track { outline: 3px solid var(--gold); outline-offset: 4px; }
.setting-switch input:disabled { cursor: not-allowed; }
.setting-switch input:disabled + .switch-track { opacity: .45; }
@media (forced-colors: active) {
  .switch-track { background: Canvas; border-color: ButtonText; }
  .switch-track::before { background: ButtonText; }
  .setting-switch input:checked + .switch-track { background: Highlight; border-color: Highlight; }
  .setting-switch input:checked + .switch-track::before { background: HighlightText; }
  .setting-switch input:focus-visible + .switch-track { outline-color: Highlight; }
}

.switch-status { flex: 0 0 24px; font-size: 14px; line-height: 1; text-align: left; pointer-events: none; }
.switch-yes { display: none; }
.setting-switch input:checked ~ .switch-status .switch-yes { display: inline; }
.setting-switch input:checked ~ .switch-status .switch-no { display: none; }
.setting-switch input:disabled ~ .switch-status { opacity: .45; }
.blog-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 16px; border: 1px solid #dfc89180; border-radius: 10px; background: linear-gradient(135deg, #dfc89126, #ffffff0a); color: var(--gold); font-size: 14px; font-weight: 650; line-height: 1.3; text-decoration: none; box-shadow: 0 6px 20px #00181133; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.blog-link span:last-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #173e32; font-size: 18px; line-height: 1; }
.blog-link:hover { transform: translateY(-2px); background: linear-gradient(135deg, #dfc8913d, #ffffff12); box-shadow: 0 10px 24px #00181155; }
.blog-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }