/* Keep the existing menu action and compact header height. */
.site-header .hamburger-button { width:44px; height:44px; min-height:44px; padding:2px; }
.rank-menu-glyph { position:relative; isolation:isolate; overflow:hidden; display:grid; align-content:center; justify-items:center; width:38px; height:38px; border:1px solid var(--gold); border-radius:4px; background:var(--surface-2); color:var(--text); }
.rank-menu-glyph small { position:relative; z-index:1; font-size:.625rem; line-height:1; color:var(--text); text-shadow:0 1px 2px var(--surface-2), 0 0 3px var(--surface-2); }
.rank-menu-glyph strong { position:relative; z-index:1; max-width:100%; font-size:1rem; line-height:1.2; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px var(--surface-2), 0 0 3px var(--surface-2); }
.rank-menu-glyph.is-long strong { font-size:.78rem; }
.rank-menu-glyph i { position:absolute; z-index:1; top:0; right:1px; font-size:.6rem; font-style:normal; color:var(--text); text-shadow:0 1px 2px var(--surface-2); }
.rank-menu-water {
  --rank-water-body:color-mix(in srgb, var(--gold) 65%, var(--rf-gem, var(--gold-strong, var(--gold))));
  --rank-water-glint:color-mix(in srgb, var(--rf-gem, var(--gold-strong, var(--gold))) 76%, white);
  position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none;
}
.rank-menu-water-level {
  position:absolute; inset:0;
  transform:translateY(calc(100% - var(--rank-fill, 0%)));
  transition:transform 650ms ease-out;
  background:linear-gradient(var(--rank-water-body), color-mix(in srgb, var(--gold) 88%, var(--surface-2))) 0 2px / 100% 100% no-repeat;
}
/* The frame clips the moving water. Only confirmed point gains animate the waves. */
.rank-menu-water-level::before,.rank-menu-water-level::after {
  content:""; position:absolute; width:calc(100% + 72px); height:6px; left:-36px; top:-3px;
  background:linear-gradient(var(--rank-water-glint) 35%, var(--rank-water-body) 92%);
  -webkit-mask:url("/rank-water-surface.svg?v=20261026-1") 0 0 / 36px 6px repeat-x;
  mask:url("/rank-water-surface.svg?v=20261026-1") 0 0 / 36px 6px repeat-x;
}
.rank-menu-water-level::after {
  --rank-wave-travel:28px; opacity:.5;
  -webkit-mask-size:28px 6px; mask-size:28px 6px;
  -webkit-mask-position:12px 0; mask-position:12px 0;
}
.rank-menu-glyph.is-empty .rank-menu-water { visibility:hidden; }
.rank-menu-glyph.is-gaining { animation:rank-water-gain 1500ms ease-out; }
.rank-menu-glyph.is-gaining .rank-menu-water-level::before { animation:rank-water-surge 1s linear 3; }
.rank-menu-glyph.is-gaining .rank-menu-water-level::after { animation:rank-water-surge 1.5s linear 2 reverse; }
.rank-menu-glyph.is-ranking-up { box-shadow:inset 0 0 8px color-mix(in srgb, var(--gold) 65%, transparent); }
@keyframes rank-water-surge { 0% { transform:translateX(0); } 50% { transform:translateX(calc(var(--rank-wave-travel, 36px) / 2)) translateY(-1px); } 100% { transform:translateX(var(--rank-wave-travel, 36px)); } }
@keyframes rank-water-gain { 0%,100% { border-color:var(--gold); } 20% { border-color:var(--text); box-shadow:inset 0 0 8px color-mix(in srgb, var(--gold) 65%, transparent); } }
/* Reuse the battle healing number's green; the label never captures menu input. */
.rank-point-gain { position:absolute; z-index:2; left:2px; top:calc(100% - 8px); pointer-events:none; white-space:nowrap; color:#79df87; font-size:.8125rem; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px #08150b, 0 -1px 2px #08150b, 1px 0 2px #08150b, -1px 0 2px #08150b; animation:rank-point-rise 1800ms ease-out both; }
@keyframes rank-point-rise { 0% { opacity:0; transform:translateY(6px) scale(.9); } 15% { opacity:1; transform:translateY(0) scale(1); } 70% { opacity:1; } 100% { opacity:0; transform:translateY(-18px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .rank-menu-water-level { transition:none; }
  .rank-point-gain { animation:none; }
  .rank-menu-water-level::before,.rank-menu-water-level::after,.rank-menu-glyph.is-gaining,.rank-menu-glyph.is-gaining .rank-menu-water-level::before,.rank-menu-glyph.is-gaining .rank-menu-water-level::after { animation:none; }
}
.site-header .hamburger-button:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
/* The rank panel has one scroll flow; its header stays available on short screens. */
.rank-details-panel { max-height:100dvh; }
/* The large panel shares the selected badge's generated palette, without its 38px layout. */
.rank-details-panel[data-rank-frame] {
  --rf-ink:#f1eedf; --rf-edge:#d9b45e; --rf-top:#22261d; --rf-bottom:#1a1d16;
  --rf-water:#5d532d; --rf-gem:#d9b45e; --rf-ring2:transparent; --rf-ring3:transparent;
  --rf-diamonds:none; --rf-stars:none; --rf-corner:6px;
  --text:var(--rf-ink); --gold:var(--rf-edge); --gold-strong:var(--rf-gem);
  --muted:color-mix(in srgb,var(--rf-ink) 72%,var(--rf-bottom));
  --surface:var(--rf-bottom); --surface-2:color-mix(in srgb,var(--rf-top) 72%,var(--rf-bottom));
  --line:color-mix(in srgb,var(--rf-edge) 28%,var(--rf-bottom));
  --ga-control-border:color-mix(in srgb,var(--rf-edge) 48%,var(--rf-bottom));
  --ga-control-bg:linear-gradient(180deg,var(--surface-2),var(--surface));
  isolation:isolate; border:2px solid var(--rf-edge); color:var(--text);
  background:radial-gradient(ellipse at 85% 0%,color-mix(in srgb,var(--rf-gem) 16%,transparent),transparent 48%),linear-gradient(165deg,var(--rf-top),var(--rf-bottom) 55%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rf-edge) 40%,var(--rf-bottom)),18px 0 48px rgb(0 0 0 / 52%);
}
.rank-details-panel[data-rank-frame]::before {
  content:""; position:absolute; z-index:2; pointer-events:none; inset:4px;
  border:1px solid var(--rf-ring2); box-shadow:inset 0 0 0 2px var(--rf-ring3);
}
.rank-details-panel[data-rank-frame]::after {
  content:""; position:absolute; z-index:2; pointer-events:none; inset:0;
  background:linear-gradient(135deg,var(--rf-edge) 0 42%,color-mix(in srgb,var(--rf-edge) 55%,white) 43% 50%,transparent 51%) top left,
    linear-gradient(225deg,var(--rf-edge) 0 42%,color-mix(in srgb,var(--rf-edge) 55%,white) 43% 50%,transparent 51%) top right,
    linear-gradient(45deg,var(--rf-edge) 0 42%,color-mix(in srgb,var(--rf-edge) 55%,white) 43% 50%,transparent 51%) bottom left,
    linear-gradient(315deg,var(--rf-edge) 0 42%,color-mix(in srgb,var(--rf-edge) 55%,white) 43% 50%,transparent 51%) bottom right;
  background-size:calc(var(--rf-corner) * 2) calc(var(--rf-corner) * 2); background-repeat:no-repeat;
}
.rank-details-panel[data-rank-frame] .side-menu-header {
  border-bottom-color:color-mix(in srgb,var(--rf-edge) 55%,var(--rf-bottom));
  background:linear-gradient(110deg,color-mix(in srgb,var(--rf-gem) 16%,transparent),transparent 75%);
}
.rank-details-panel[data-rank-frame] .side-menu-close { border-color:var(--ga-control-border); color:var(--text); }
.rank-details-panel[data-rank-frame] .adventure-rank-summary { background:linear-gradient(165deg,color-mix(in srgb,var(--rf-top) 82%,var(--rf-bottom)),var(--rf-bottom)); }
.rank-panel-ornament { position:absolute; z-index:2; pointer-events:none; inset:0; }
.rank-panel-ornament::before,.rank-panel-ornament::after {
  content:""; position:absolute; top:4px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rf-gem) 45%,white),var(--rf-gem) 45%,var(--rf-edge));
}
.rank-panel-ornament::before { display:var(--rf-diamonds); left:calc(50% - 12px); width:8px; height:12px; clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%); }
.rank-panel-ornament::after { display:var(--rf-stars); left:calc(50% + 3px); width:12px; height:12px; clip-path:polygon(50% 0,61% 34%,98% 35%,68% 57%,79% 98%,50% 74%,21% 98%,32% 57%,2% 35%,39% 34%); }
.rank-details-panel > #rank-menu-summary { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.rank-details-panel .side-menu-close { width:44px; height:44px; min-height:44px; }
.rank-menu-feedback { flex:0 0 auto; margin:0; padding:10px 12px max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--gold); font-size:var(--ga-font-note,.75rem); overflow-wrap:anywhere; }
.rank-menu-feedback.is-error { color:color-mix(in srgb,var(--red) 70%,var(--text)); }
.adventure-rank-summary { margin:8px 12px 12px; padding:12px; border:1px solid var(--line); border-radius:4px; background:var(--surface-2); }
.adventure-rank-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; }
.adventure-rank-heading strong { font-size:var(--ga-font-section, .9375rem); }
.adventure-rank-heading span,.adventure-rank-summary p,.adventure-rank-summary dl { font-size:var(--ga-font-note, .75rem); }
.adventure-rank-summary p { margin:8px 0; overflow-wrap:anywhere; }
.adventure-rank-summary progress { display:block; width:100%; height:8px; accent-color:var(--gold); }
.adventure-rank-summary dl { display:grid; gap:4px; margin:12px 0; }
.adventure-rank-summary dl>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; }
.adventure-rank-summary dd { margin:0; font-variant-numeric:tabular-nums; }
.adventure-rank-summary .secondary-button { width:100%; }
.adventure-rank-note { color:var(--muted); }
.rank-session-gain { color:var(--gold); }
.adventure-rank-rules { margin-top:12px; font-size:var(--ga-font-note, .75rem); }
.adventure-rank-rules summary { min-height:44px; display:flex; align-items:center; cursor:pointer; text-decoration:underline; }
.achievement-rank-points { color:var(--gold); font-variant-numeric:tabular-nums; }
@media (min-width:701px) { .site-header { grid-template-columns:44px minmax(96px,.9fr) minmax(100px,1fr) minmax(74px,.8fr) 36px; padding-block:0; } }