/* =====================================================================
   The Esc book's systems pages as an icon drawer (2026-10-18, the user: "ทำให้หน้านี้ดูง่ายสะอาดตาหน่อย"; layout "C" of the
   three shown on escmenupick.html): no card frames, a thin coloured title per category, 6 icons a row; every system an icon
   with its short name on one line under it (js/ui.js SHORT, the full name in the tooltip), the red count on the icon's
   corner, the key small in the tile's corner, locked / online-only ones dimmed with a small tag over the icon's foot.
   All 39 systems on the two pages without scrolling (a page scrolls only if it ever outgrows it).
   Loaded after style.css and before booklight.css; #pause in the selectors wins over the older list-row rules there.
   ===================================================================== */
#ui #pause.bw-pause .hub-page { gap: 20px; overflow-y: auto; }
#ui #pause.bw-pause .hub-page.l { padding-left: 10px; }   /* (the first column off the book's inner edge: no card frame holds it in any more) */
#ui #pause.bw-pause .hub-page .hub-sec { padding: 0; border: 0; border-image: none; background: none; }
#ui #pause.bw-pause .hub-page .hub-sec h3 { margin: 0 0 8px; padding: 0 2px 6px; font-size: 19px; line-height: 27px; border-bottom-width: 1px; }
#ui #pause.bw-pause .hub-page .hub-sec h3 img { width: 27px; height: 27px; }
#ui #pause.bw-pause .hub-page .hub-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 2px; }
#ui #pause.bw-pause .hub-page .hub-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  height: auto; min-height: 0; padding: 8px 1px 6px; border: 0; border-radius: 10px; background: none; box-shadow: none; text-align: center; font: 600 14.5px/1.2 'Mali', sans-serif; }
#ui #pause.bw-pause .hub-page .hub-tile .hub-ic { position: relative; display: block; flex: none; width: 60px; height: 60px; font-style: normal; }
#ui #pause.bw-pause .hub-page .hub-tile .hub-ic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); transition: transform 0.12s; }
#ui #pause.bw-pause .hub-page .hub-tile span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui #pause.bw-pause .hub-page .hub-tile kbd { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 17px; padding: 0 3px; box-sizing: border-box;
  font: 800 11px/17px 'Fredoka', sans-serif; opacity: 0.85; }
#ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) { background: radial-gradient(closest-side, rgba(255, 214, 110, 0.2), transparent); box-shadow: none; }
#ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) .hub-ic img { transform: translateY(-2px) scale(1.06); }
/* something waiting: a red count on the icon's top-right corner */
#ui #pause.bw-pause .hub-page .hub-tile .hub-badge:not(.net) { position: absolute; top: -5px; right: -10px; left: auto; transform: none; min-width: 20px; max-width: 46px; height: 20px;
  padding: 0 5px; border-radius: 10px; box-sizing: border-box; font: 800 12px/20px 'Fredoka', sans-serif; text-align: center; overflow: hidden; white-space: nowrap; }
/* locked / online only: the tile dimmed, a small tag over the icon's foot */
#ui #pause.bw-pause .hub-page .hub-tile .hub-badge.net { position: absolute; left: 50%; right: auto; top: auto; bottom: -5px; transform: translateX(-50%); display: block;
  max-width: none; min-width: 0; height: auto; padding: 1px 6px; border-radius: 6px; background: rgba(14, 11, 8, 0.82); box-shadow: none;
  color: #e6dcc4; font: 600 10.5px/1.25 'Mali', sans-serif; letter-spacing: 0; white-space: nowrap; }
#ui #pause.bw-pause .hub-page .hub-tile:is(.off, .lock) { opacity: 0.62; cursor: default; }
#ui #pause.bw-pause .hub-page .hub-tile:is(.off, .lock) .hub-ic img { filter: grayscale(1) brightness(0.7); }
#ui #pause.bw-pause .hub-page .hub-tile.lock kbd { display: none; }
:root[data-booklight] #ui #pause.bw-pause .hub-page .hub-tile .hub-badge.net { background: rgba(255, 252, 244, 0.95); box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.35); color: var(--bk-ink); }
:root[data-booklight] #ui #pause.bw-pause .hub-page .hub-tile:hover:not(.off):not(.lock) { background: radial-gradient(closest-side, color-mix(in srgb, var(--bk-acc) 18%, transparent), transparent); }