/* ===== Shared inner-page header (SINGLE SOURCE OF TRUTH) =====
   Extracted verbatim from tournaments.html. All inner pages link this file.
   The home page (index.html) does NOT link this file and keeps its own large header.
   Do not edit per-page header styles; edit here and it applies everywhere. */

.soc img,
.soc svg {
  width: 22px;
  height: 22px;
  flex: none;
  object-fit: contain;
}

/* ===== HEADER v15: V14 base + 1) logo ring brown removed to soft pink blended into bg 2) url enlarged with clear green-pink gradient ===== */
header{position:sticky;top:0;z-index:40;background:#FFFAF6;border-bottom:none;padding-top:env(safe-area-inset-top)}
.nav{display:block;padding:4px 28px 5px;max-width:100%}
.row1{display:flex;align-items:center;gap:22px;min-width:0}
.row2{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:-4px;padding-right:6px;position:relative}

.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;flex:0 0 auto;min-width:0;max-width:100%}
.brand-mark{
  width:auto;height:auto;flex:0 0 auto;position:relative;display:block;
  background:transparent;border:none;border-radius:8px;box-shadow:none;padding:0;
  min-width:60px;min-height:80px;
}
.brand-mark::before{content:none}
.brand-mark img{
  display:block;height:160px;width:auto;object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
  -ms-interpolation-mode:bicubic;
  /* neutral soft shadow only; the former pink halo backdrop was removed */
  filter:drop-shadow(0 2px 8px rgba(20,50,42,.12));
  transform:translateY(12px);
}
.brand-mark img{max-width:100%;height:auto;object-fit:contain;max-height:160px}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;min-width:0;max-width:100%;flex:1 1 auto;gap:5.8px;padding:6.5px 0}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;letter-spacing:.22em;background:linear-gradient(120deg,var(--jade) 0%,var(--rose-d) 50%,var(--jade) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.6);text-transform:uppercase}
.brand-divider{height:1px;width:72px;background:linear-gradient(90deg,var(--rose),var(--jade));border:none;margin:2.5px 0;opacity:.6}
.brand-url{
  font-family:'Playfair Display',serif;
  font-size:23px;letter-spacing:.16em;
  background:linear-gradient(100deg,var(--gold-d) 0%,var(--gold) 38%,var(--celadon) 70%,var(--jade) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;text-transform:lowercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:1;line-height:1.15;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
@media(max-width:480px){
  .brand-url{font-size:15.5px;letter-spacing:.12em}
}

/* Home / Login buttons: V10 colors untouched 100% */
.home-btn{font-family:'Fraunces',serif;font-size:13.5px;font-weight:600;letter-spacing:.06em;color:#fff;background:linear-gradient(170deg,var(--jade-l),var(--jade));border:none;border-radius:999px;padding:8px 16px 8px 18px;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;position:relative;overflow:hidden}
.home-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .6s}
.home-btn::after{content:'';width:7px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg) translateY(-2px);margin-left:2px;transition:transform .25s;opacity:.85}
.drop-wrap.open .home-btn::after{transform:rotate(225deg) translateY(-2px)}
.login-btn{font-family:'Fraunces',serif;font-size:13.5px;font-weight:600;letter-spacing:.18em;color:#fff;background:linear-gradient(170deg,var(--rose-l),var(--blush) 60%,var(--rose-d));border:none;border-radius:999px;padding:8px 18px 8px 16px;cursor:pointer;transition:.25s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;position:relative;overflow:hidden}
.login-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s}
.login-btn .dot{width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--gold-l));box-shadow:0 0 5px rgba(255,255,255,.7)}

.dropdown{position:absolute;top:calc(100% + 10px);right:0;transform:translateY(-6px);min-width:200px;background:linear-gradient(170deg,var(--paper),var(--pale));border:1px solid var(--rose-l);border-radius:16px;padding:8px;box-shadow:0 24px 56px rgba(180,120,130,.28),inset 0 1px 0 #fff;opacity:0;visibility:hidden;pointer-events:none;transition:.22s;z-index:50}
.drop-wrap{position:static}
.drop-wrap.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;border-bottom:1px solid rgba(217,166,176,.16);white-space:nowrap;transition:.18s}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{background:linear-gradient(90deg,rgba(246,216,221,.5),rgba(164,197,182,.15));color:var(--jade);padding-left:20px}
.dropdown a::before{content:'';width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--jade-l));flex:none}

.mask{position:fixed;inset:0;background:rgba(61,46,50,.4);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;z-index:100;padding:24px;pointer-events:none}
.mask.open{display:flex;pointer-events:auto}
.modal{background:linear-gradient(170deg,var(--paper),var(--pale));border:1.5px solid var(--rose-l);border-radius:26px;padding:40px 36px;max-width:440px;width:100%;text-align:center;box-shadow:0 50px 100px rgba(180,120,130,.4),inset 0 1px 0 #fff;position:relative}
.modal::before{content:'';position:absolute;top:14px;left:14px;right:14px;bottom:14px;border:1px solid rgba(217,166,176,.4);border-radius:18px;pointer-events:none}
.modal h3{font-family:'Fraunces',serif;font-size:30px;font-weight:600;margin-bottom:6px;position:relative;background:linear-gradient(120deg,var(--jade),var(--rose-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.modal .sub{color:var(--ink-soft);font-size:15px;margin-bottom:26px;letter-spacing:.06em;position:relative}
.modal .x{position:absolute;top:18px;right:22px;border:none;background:transparent;font-size:22px;color:var(--ink-soft);cursor:pointer;z-index:2}
.soc{display:flex;align-items:center;gap:14px;width:100%;border:1px solid var(--rose-l);background:#fff;border-radius:14px;padding:16px 20px;font-size:17px;margin-bottom:11px;cursor:pointer;font-family:inherit;color:var(--ink);font-weight:700;transition:.18s;position:relative}
.soc:hover{border-color:var(--rose-d);box-shadow:0 8px 22px rgba(217,166,176,.3);transform:translateY(-1px)}
.soc svg{width:22px;height:22px;flex:none}
.modal .rule{margin-top:20px;font-size:13px;color:var(--ink-soft);position:relative}

/* ===== Dropdown three groups ten items (LEARN & PLAY TOGETHER / PLAY & EXPLORE / CARE & SUPPORT) ===== */
.dropdown{min-width:230px;width:320px;max-width:calc(100vw - 36px);padding:2px 0 4px}
.dropdown .dd-group{padding:2px 0 4px}
/* Champagne gold -> celadon green elegant divider */
.dropdown .dd-group + .dd-group{border-top:1px solid rgba(199,165,103,.38)}
/* Group titles: not clickable / smaller / all-caps / gold */
.dropdown .dd-title{display:flex;align-items:center;gap:9px;padding:7px 11px 2px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none}
.dropdown .dd-title::after{content:'';flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(199,165,103,.60),rgba(143,182,162,.34),rgba(255,255,255,0))}
/* Submenu items: white background / dark large text / wide line spacing for easy tapping */
.dropdown a{display:flex;align-items:center;gap:8px;margin:2px 7px;padding:7px 10px;border:1px solid rgba(217,166,176,.30);border-radius:10px;background:#FFFFFF;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:.004em;white-space:normal;transition:.18s}
.dropdown a:last-child{border-bottom:1px solid rgba(217,166,176,.30)}
.dropdown a::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gold-l),var(--celadon))}
.dropdown a:hover{background:#FFFFFF;padding:7px 10px;border-color:var(--celadon);color:var(--jade);box-shadow:0 6px 16px rgba(143,182,162,.22)}
/* Highest priority: Mahjong Helpers light-gray highlighted background */
.dropdown a.dd-hot{background:#F5F5F5;border-color:#E2E2E2}
.dropdown a.dd-hot::before{width:6px;height:6px;background:linear-gradient(135deg,var(--gold),var(--jade))}
.dropdown a.dd-hot:hover{background:#EAEAEA;border-color:var(--celadon);color:var(--jade)}
/* Tournaments: plain white, the same as every other item in the group */
.dropdown a.dd-tour{background:#FFFFFF;border-color:rgba(217,166,176,.30)}
.dropdown a.dd-tour:hover{background:#FFFFFF;border-color:var(--celadon);color:var(--jade)}
/* Mah Jongg Coach: light gray background (same as Mahjong Helpers), dark text + dark download icon */
.dropdown a.dd-coach{background:#F5F5F5;border-color:#E2E2E2;color:#234B41}
.dropdown a.dd-coach:hover{background:#EAEAEA;border-color:var(--celadon);color:#234B41}
/* Items with an inline SVG icon: hide the default dot, size the icon */
.dropdown a.dd-coach::before,.dropdown a.dd-ico-item::before{display:none}
.dropdown .dd-ico{width:15px;height:15px;flex:none}
.dropdown a.dd-coach .dd-ico{color:#234B41}
.dropdown a.dd-ico-item .dd-ico{color:var(--jade)}
.dropdown a.dd-ico-item:hover{background:#F2F7F4;border-color:var(--celadon);color:var(--jade)}
/* Disclaimer */
.dd-note{margin:3px 0 2px;padding:6px 11px 3px;border-top:1px solid rgba(199,165,103,.38);font-size:10.5px;line-height:1.4;color:var(--ink-soft);white-space:normal}

.user-wrap{position:relative;display:inline-flex;align-items:center}
.user-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 5px;border:none;border-radius:999px;background:linear-gradient(170deg,var(--rose-l),var(--blush) 60%,var(--rose-d));color:#fff;font-family:'Fraunces',serif;font-size:13.5px;font-weight:600;letter-spacing:.06em;cursor:pointer;white-space:nowrap}
.user-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper);border:1px solid rgba(255,255,255,.6)}
.user-av-txt{display:inline-flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:var(--gold-d)}
.user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:132px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none}
.user-menu.open{display:block}
.user-menu a{display:block;padding:8px 12px;border-radius:10px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.user-menu a:hover{background:var(--pale)}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:7px;width:56px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:52px;height:5px;border-radius:3px;background:var(--jade);transition:transform .25s ease,opacity .2s ease}
.drop-wrap.open .burger span:nth-child(1){transform:translateY(12px) rotate(45deg)}
.drop-wrap.open .burger span:nth-child(2){opacity:0}
.drop-wrap.open .burger span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}
.row2 .login-btn,.row2 .user-wrap{order:1}
.row2 .drop-wrap{order:2}
/* avatar left, hamburger far right; the pink capsule tucks just under the
   domain line (mahjongnmjl.com) instead of towering over the logo */
.row2{align-items:flex-end;margin-top:-64px;padding-right:0;height:86px}
.user-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:0;border:none;border-radius:999px;background:linear-gradient(170deg,var(--rose-l),var(--blush) 60%,var(--rose-d));color:#fff;font-family:'Nunito',sans-serif;cursor:pointer;white-space:nowrap}
.user-btn-home{flex-direction:row;align-items:center;gap:9px;padding:6px 18px 6px 6px;margin-bottom:0}
.user-btn-home .user-name{font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:0;color:#fff;max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* smaller logo on phones -> shift the capsule up to stay tucked under the domain */
@media (max-width:480px){.row2{margin-top:-69px}}
.user-btn-round{padding:0;background:none;border-radius:50%;gap:0}
.user-ring{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;padding:5px;border-radius:50%;background:linear-gradient(170deg,var(--rose-l),var(--blush));flex:none}
.user-av{width:40px;height:40px;border:none}
.user-av-txt{font-size:17px}

/* ===== Inner-page header (matches guide / contact / start inner pages) =====
   Scoped to .inpage so the home-page header is never touched. Brand block on
   the left, actions on the right; signed-in state shows a round avatar only
   (no username) — identical to the canonical inner pages. */
.inpage .brand-mark{min-height:auto;height:auto;width:auto;min-width:0;max-width:none}
.inpage .brand-mark img{width:auto;height:70px;max-height:70px;object-fit:contain;max-width:none;transform:none}
.inpage .brand-txt{padding:0;gap:2px;flex:0 1 auto}
.inpage .nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 16px}
.inpage .row1{flex:0 1 auto;min-width:0;gap:12px;flex-wrap:nowrap}
.inpage .brand{flex-wrap:nowrap;gap:12px;flex:1 1 auto;min-width:0;max-width:100%}
.inpage .brand-mark,.inpage .brand-name,.inpage .brand-url{text-decoration:none}
.inpage .row2{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-top:0;padding-right:0;flex:0 0 auto}
.inpage .row-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;white-space:nowrap}
.inpage .drop-wrap{display:flex}
.inpage .home-btn,.inpage .login-btn{height:38px;padding:0 16px;font-size:13px;line-height:1;border-radius:999px;align-items:center;justify-content:center;box-shadow:none}
.inpage .sbtn{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;background:none;border:none;box-shadow:none;color:var(--gold-d);font-size:16px;font-weight:800;letter-spacing:.01em;line-height:1.25;padding:2px 2px;text-decoration:none}
.inpage .sbtn:hover{transform:none;box-shadow:none;color:var(--jade)}
.inpage .home-btn:hover,.inpage .login-btn:hover{box-shadow:none}
@media (max-width:640px){
  .inpage .brand-name{font-size:26px;letter-spacing:.18em}
  .inpage .brand-url{font-size:13.5px;letter-spacing:.12em}
  .inpage .brand-divider{width:52px}
  .inpage .brand{gap:10px}
  .inpage .nav{gap:8px;padding:6px 10px}
  .inpage .home-btn,.inpage .login-btn{height:34px;padding:0 12px;font-size:12px;box-shadow:none}
}
@media (max-width:400px){
  .inpage .brand-name{font-size:22px;letter-spacing:.12em}
  .inpage .brand-mark img{height:56px;max-height:56px}
  .inpage .row1 .brand{padding:8px;margin:-8px 0}
  .inpage .burger{width:38px}
  .inpage .login-btn{padding:0 10px}
}
@media (max-width:480px){
  .inpage .brand-mark img{height:64px;max-height:64px}
}
@media (max-width:370px){
  .inpage .brand-url{display:none}
  .inpage .brand-name{font-size:20px;letter-spacing:.08em}
  .inpage .brand-mark img{height:48px;max-height:48px}
  .inpage .row-actions .burger{width:30px}
  .inpage .row-actions .burger span{width:22px}
  .inpage .home-btn,.inpage .login-btn{height:30px;padding:0 8px;font-size:11px}
}

/* ---- signed-in header (avatar + name + Log out) ---- */
.user-wrap{position:relative;display:inline-flex;align-items:center}
.user-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 5px;border:none;border-radius:999px;background:linear-gradient(170deg,var(--rose-l),var(--blush) 60%,var(--rose-d));color:#fff;font-family:'Fraunces',serif;font-size:13.5px;font-weight:600;letter-spacing:.06em;cursor:pointer;white-space:nowrap}
.user-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper);border:1px solid rgba(255,255,255,.6)}
.user-av-txt{display:inline-flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:var(--gold-d)}
.user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:132px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:none}
.user-menu.open{display:block}
.user-menu a{display:block;padding:8px 12px;border-radius:10px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.user-menu a:hover{background:var(--pale)}
/* ---- hamburger menu button (replaces the old Home pill) ---- */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:0;border:none;background:transparent;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:26px;height:3px;border-radius:2px;background:var(--jade);transition:transform .25s ease,opacity .2s ease}
.drop-wrap.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.drop-wrap.open .burger span:nth-child(2){opacity:0}
.drop-wrap.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* avatar on the left, hamburger on the far right */
.row2 .login-btn,.row2 .user-wrap{order:1}
.row2 .drop-wrap{order:2}
.inpage .row-actions .login-btn,.inpage .row-actions .user-wrap{order:1}
.inpage .row-actions .drop-wrap{order:2}
/* whole brand block is one big tap target back to the homepage */
.inpage .brand{padding:8px 12px;margin:-8px 0;border-radius:16px}
/* avatar: no white ring, a touch larger */
.user-av{width:32px;height:32px;border:none}
.user-av-txt{font-size:15px}
.user-btn{font-family:'Nunito',sans-serif;letter-spacing:0}
.user-name{font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:0}
/* ---- inner header: one horizontal line, avatar + hamburger ---- */
.inpage .row2{display:flex;flex-direction:row;align-items:center;gap:12px;margin-top:0;padding-right:0;flex:0 0 auto}
.inpage .nav{align-items:center}
.inpage .burger{width:44px;height:38px;gap:6px}
.inpage .burger span{width:34px;height:4px;border-radius:2px}
.inpage .drop-wrap.open .burger span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.inpage .drop-wrap.open .burger span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
/* signed-in avatar: shared shapes */
.user-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:0;border:none;border-radius:999px;background:linear-gradient(170deg,var(--rose-l),var(--blush) 60%,var(--rose-d));color:#fff;font-family:'Nunito',sans-serif;cursor:pointer;white-space:nowrap}
.user-btn-home{flex-direction:column;gap:6px;padding:12px 20px 13px}
.user-btn-home .user-name{font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:0;color:#fff;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.user-btn-round{padding:0;background:none;border-radius:50%;gap:0}
.user-ring{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;padding:5px;border-radius:50%;background:linear-gradient(170deg,var(--rose-l),var(--blush));flex:none}
.user-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper);border:none}
.user-av-txt{font-size:17px}
/* neutralize the home header's fixed row height so the inner row sizes to content */
.inpage .row2{height:auto}

/* ---- unread messages badge: red dot on the header avatar ----
   Same shape, size, colour and corner as the home page (feed.css), so the
   dot sits on the avatar's top-right on every inner page. auth.js inserts
   the dot only for signed-in visitors and toggles .show from
   /api/say-hello/unread-count; signed-out visitors never see it. */
.user-btn-round,.user-ring{position:relative}
.user-badge{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#E23B3B;box-shadow:0 0 0 2px #fff;display:none;z-index:2}
.user-badge.show{display:block}
/* Inbox icon dot: the 18px envelope needs a proportionally smaller dot than
   the ~38px avatar (12px there), so the same look scales down to 5px. */
.um-ico .user-badge{width:5px;height:5px;top:-2px;right:-2px;box-shadow:0 0 0 1.5px #fff}