/* Page furniture shared by the HUD and the drawer: the round menu button, the theme's logo plaque, the lesson line
   and the drawer itself. Colours come from the theme (js/themes.js sets the --skin-* variables). */
.round-btn { width: 50px; height: 50px; border-radius: 16px; border: 1px solid var(--line, var(--skin-frame)); color: var(--skin-text);
  background: linear-gradient(180deg, var(--glass-hi, var(--skin-panel)), var(--glass, var(--skin-panel))); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: transform .1s, background .15s;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25); }
.round-btn:active { transform: scale(.94); }
.round-btn svg { width: 24px; height: 24px; }
.round-btn:hover { background: color-mix(in srgb, var(--skin-panel) 75%, var(--skin-accent) 25%); }
.plaque-logo { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.plaque-logo img { height: 66px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)) drop-shadow(0 0 18px color-mix(in srgb, var(--skin-accent) 25%, transparent)); }
.plaque-logo img[hidden] { display: none; } .plaque-logo img:not([hidden]) + b { display: none; }
.plaque-logo b { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 900; line-height: 1.1; color: var(--skin-accent); -webkit-text-stroke: 1.5px rgba(0,0,0,.45);
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.5); text-align: center; text-wrap: balance; min-width: 0; max-width: 100%; }
/* the sign in type (a translated theme name, where the picture's English name would be wrong): a long name takes
   two balanced lines at a smaller size; js/game.js (fitSign) shrinks it further until whole words fit two lines */
.plaque-logo b.long { font-size: clamp(1rem, 4.2vw, 1.5rem); line-height: 1.02; }

/* one line on what the theme is about, top left of the board on wide screens */
.lesson { font-size: 13px; color: var(--muted); line-height: 1.35; }
.lesson b { color: var(--skin-accent); } .lesson i { font-style: normal; } .lesson span { color: #fff; }

/* the drawer, in the theme's colours */
.drawer__scrim { position: fixed; inset: 0; z-index: 90; background: rgba(4,6,12,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: 91; width: min(340px, 88vw); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,.2), color-mix(in srgb, var(--skin-panel) 30%, #0c0e15) 150px), var(--skin-bg-wide, none) center top / 100% 150px no-repeat, #0c0e15; color: var(--skin-text);
  border-inline-start: 1px solid var(--line, var(--skin-frame)); border-start-start-radius: 22px; border-end-start-radius: 22px; box-shadow: -24px 0 70px rgba(0,0,0,.6);
  transform: translateX(105%); visibility: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; overflow: hidden; font-family: var(--font); }
/* the drawer opens from the inline end: the right in LTR, the left in RTL, across from the menu button */
[dir="rtl"] .drawer { transform: translateX(-105%); box-shadow: 24px 0 70px rgba(0,0,0,.6); }
html.menu-open .drawer { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; }
html.menu-open .drawer__scrim { opacity: 1; pointer-events: auto; }
.drawer__head { display: flex; align-items: center; gap: 10px; min-height: 92px; padding: max(14px, env(safe-area-inset-top)) 12px 12px; padding-inline-start: 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
.drawer__head img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); height: 46px; width: auto; max-width: 150px; object-fit: contain; }
.drawer__head b { flex: 1; min-width: 0; font-size: 15px; letter-spacing: .08em; font-weight: 900; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__head img + b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.drawer__head img ~ .drawer__close { margin-inline-start: auto; }
.drawer__close { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); color: #fff; font-size: 18px; font-weight: 900; cursor: pointer; }
.drawer__close:hover { background: rgba(255,255,255,.16); }
.drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; overflow: auto; }
.drawer__row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding-block: 6px; padding-inline: 14px 8px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.drawer__row:hover { background: rgba(255,255,255,.06); }
.drawer__row > .k { flex: 1; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #a3a8b5; font-weight: 800; }
.menu-select { flex: 1.6; min-width: 0; font: inherit; font-size: 14px; font-weight: 700; padding: 10px 10px; border-radius: 12px; color: var(--skin-text);
  background: color-mix(in srgb, var(--skin-panel) 85%, transparent); border: 1px solid var(--line, var(--skin-frame)); }
.menu-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line, var(--skin-frame)); background: color-mix(in srgb, var(--skin-panel) 85%, transparent);
  color: var(--skin-text); font-size: 18px; display: grid; place-items: center; cursor: pointer; }
.menu-btn:hover { background: color-mix(in srgb, var(--skin-panel) 60%, var(--skin-accent) 25%); }
@media (max-height: 520px) and (orientation: landscape) { .drawer__row { min-height: 46px; padding: 4px 10px; } .drawer__head { padding: 8px 10px; padding-inline-start: 16px; } }