/* Mahjong Minions hub navigation - the ONE canonical implementation,
   owned by the hub project and inherited by every game page.
   An app keeps its own pinned header and reserves only its top-left
   slot for the hub: an empty element carrying data-hub-nav. This
   stylesheet (with nav.js) renders the standard hamburger into that
   slot and owns the left nav drawer it opens - markup, look, and
   gestures live here and nowhere else. */

/* ---------- Reserved trigger slot ---------- */
[data-hub-nav]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
/* Apps may hide the slot with the hidden attribute (for example while
   a game round is on screen); that must always win. */
[data-hub-nav][hidden]{display:none !important}

/* ---------- Standard hamburger trigger ---------- */
.hubnav-btn{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ccdcd6;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 2px 10px rgba(28,47,48,.09);
  color:#0a5f5e;
  cursor:pointer;
  touch-action:manipulation;
  padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease;
}
.hubnav-btn:active{transform:scale(.93);box-shadow:0 1px 3px rgba(28,47,48,.14)}
.hubnav-btn:focus-visible{outline:2px solid #0e7c7b;outline-offset:2px}
.hubnav-btn svg{display:block}

/* ---------- Scrim + drawer ---------- */
.hubnav-scrim{
  position:fixed;
  inset:0;
  background:rgba(20,38,39,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:190;
}
body.hubnav-open .hubnav-scrim{opacity:1;pointer-events:auto}
.hubnav-drawer{
  position:fixed;
  top:0;
  left:0;
  width:252px;
  max-width:86vw;
  height:100vh;
  height:100svh;
  overflow-y:auto;
  background:#f4f8f5;
  border-right:1px solid #ccdcd6;
  padding:calc(20px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px));
  z-index:200;
  transform:translateX(-106%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.32,.72,.28,1), visibility 0s linear .3s;
  box-shadow:0 0 44px rgba(28,47,48,.22);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  color:#1c2f30;
  text-align:left;
}
body.hubnav-open .hubnav-drawer{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .3s cubic-bezier(.32,.72,.28,1), visibility 0s;
}
.hubnav-close{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top,0px));
  right:12px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ccdcd6;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 2px 10px rgba(28,47,48,.09);
  color:#0a5f5e;
  cursor:pointer;
  touch-action:manipulation;
  padding:0;
}
.hubnav-close:active{transform:scale(.93);box-shadow:0 1px 3px rgba(28,47,48,.14)}
.hubnav-close:focus-visible{outline:2px solid #0e7c7b;outline-offset:2px}
.hubnav-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:2px 8px 14px;
  border-bottom:1px solid #ccdcd6;
  margin-bottom:14px;
}
.hubnav-brand img{width:64px;height:64px;display:block;margin-bottom:8px}
.hubnav-name{
  font-family:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:19px;
  font-weight:800;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#0a5f5e;
}
.hubnav-hub{
  font-family:"Gaegu","Comic Sans MS",system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#0e7c7b;
}
.hubnav-nav{display:flex;flex-direction:column;gap:4px}
.hubnav-link{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border-radius:12px;
  color:#1c2f30;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  touch-action:manipulation;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.hubnav-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dce8e2;
  border-radius:10px;
  overflow:hidden;
  background:#ffffff;
  color:#0e7c7b;
}
.hubnav-icon img{display:block;max-width:34px;max-height:34px;width:auto;height:auto;object-fit:contain}
.hubnav-icon.temple{background:#fff0d5;padding:3px}
.hubnav-icon.parla{background:#fdf3e0}
.hubnav-link-label{flex:1;min-width:0}
@media (hover:hover){a.hubnav-link:hover{background:#ffffff}}
a.hubnav-link:active{transform:scale(.965);background:#ffffff;box-shadow:0 1px 3px rgba(28,47,48,.14)}
.hubnav-link:focus-visible{outline:2px solid #0e7c7b;outline-offset:2px}
.hubnav-link.is-current{background:#e3f0ec;color:#0a5f5e}
.hubnav-link.is-current .hubnav-icon{border-color:#729e94}
.hubnav-link.is-soon{color:#3d5a5b;cursor:default;font-weight:500}
.hubnav-soon{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:#0a5f5e;
  background:#f4f8f5;
  border:1px solid #ccdcd6;
  border-radius:999px;
  padding:5px 10px;
  white-space:nowrap;
}
.hubnav-note{margin:16px 8px 0;font-size:12.5px;line-height:1.5;color:rgba(28,47,48,.62)}
@media (prefers-reduced-motion:reduce){
  .hubnav-drawer,.hubnav-scrim,.hubnav-btn{transition:none}
}