/* Dedicated Mega collection. Native palette/font; approved immutable pixel icons. */
/* The collection can be read in portrait; closing it restores the normal phone rotation gate. */
html.rotate-phone.mm-reading #rotate { display:none; }
#scr-mega-menu { z-index:56; padding:16px; animation:none; }
.mm-screen .mm-frame { box-sizing:border-box; width:min(1480px,100%); height:min(900px,100%); max-height:100%; min-height:0; display:flex; flex-direction:column; gap:12px; overflow:hidden; text-align:left; color:var(--ink,#eef3ff); background:var(--box1,#14254a); }
.mm-header,.mm-toolbar,.mm-nav,.mm-footer { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:none; }
.mm-header,.mm-toolbar { justify-content:space-between; }
.mm-header h2,.mm-header p { margin:0; }
.mm-header h2 { color:#ffe19a; }
.mm-header p,.mm-help { color:#b8c8e0; font-size:13px; line-height:1.5; }
.mm-controls { display:contents; }
.mm-wallet { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.mm-balance { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #607ba4; background:#0c1934; font-size:13px; }
.mm-stone { display:block; flex:none; object-fit:contain; image-rendering:pixelated; background:transparent; border:0; padding:0; filter:none; }
.mm-stone-unavailable { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; color:#c9d5e8; }
.mm-nav { border-bottom:1px solid #526b94; padding-bottom:10px; }
.mm-nav [aria-pressed="true"] { color:#ffe39b; border-color:#ffe39b; }
.mm-screen .btn,.mm-screen select,.mm-choice { min-height:44px; max-width:100%; white-space:normal; overflow-wrap:anywhere; font:inherit; }
.mm-screen select { color:inherit; background:#122443; border:2px solid #637fa6; padding:7px; }
.mm-status { flex:none; margin:0; font-size:13px; line-height:1.4; }
.mm-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:24px; min-height:0; flex:1; }
.mm-list,.mm-detail { box-sizing:border-box; min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-gutter:stable; }
.mm-list { padding:0 8px 8px 0; }
.mm-group { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#ffe19a; margin:16px 0 10px; font-size:18px; }
.mm-group:first-child { margin-top:0; }
.mm-group small { display:flex; align-items:center; gap:7px; font-weight:normal; font-size:12px; color:#b8c8e0; }
.mm-row { box-sizing:border-box; width:100%; min-height:74px; display:grid; grid-template-columns:214px minmax(0,1fr) 82px; align-items:center; gap:16px; padding:10px 12px; margin-bottom:8px; color:inherit; font:inherit; text-align:left; background:#192d4d; border:1px solid #526f96; cursor:pointer; }
.mm-row.is-selected { outline:1px solid #ffe19a; outline-offset:-2px; border-color:#ffe19a; background:#263d60; }
.mm-pair { display:grid; grid-template-columns:58px 28px 32px 6px 24px 8px 58px; align-items:center; width:214px; }
.mm-normal { grid-column:1; }.mm-row-stone { grid-column:3; }.mm-row-arrow { grid-column:5; }.mm-mega { grid-column:7; }
/* Owner item 4: the arrow between the normal form and the Mega — a thin double chevron in the soft pink of the
   reference, instead of the old pixel arrow. Drawn inline (js/ui/mega-menu-ui.js), no asset. */
.mm-row-arrow { display:block; justify-self:center; width:20px; height:14px; fill:none; stroke:#f2a5d4; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; opacity:.92; }
/* Preview 9 R2: a closed Mega wears the Pokédex silhouette itself — G.UI.spriteCanvas draws it black at 55% on both
   paint paths (js/ui/ui.js) — so no colour filter sits on the canvas here; the class only marks the state. */
.mm-model canvas.mm-locked,.mm-hero canvas.mm-locked { opacity:1; }
.mm-model { height:50px; min-width:0; position:relative; display:flex; align-items:center; justify-content:center; }
.mm-model canvas,.mm-hero canvas { flex:none; image-rendering:pixelated; }
.mm-model-state { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:9px; color:#c9d5e8; }
.mm-model[data-asset="loading"] { background:#263c5b; }.mm-model[data-asset="error"] { outline:1px dashed #b79c65; }
.mm-row-copy { display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere; }
.mm-row-copy strong { font-size:18px; line-height:1.3; }.mm-row-copy span,.mm-row-state { font-size:12px; color:#b8c8e0; overflow-wrap:anywhere; }
.mm-detail { border:1px solid #6e789f; background:#101e37; padding:18px; }
.mm-detail-name { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin:12px 0 24px; }
.mm-detail-name h3 { margin:0; color:#ffe19a; font-size:24px; overflow-wrap:anywhere; }
.mm-pill { padding:4px 10px; font-size:13px; color:#c9d5e8; }
.mm-hero { height:160px; min-width:0; position:relative; display:flex; align-items:center; justify-content:center; }
.mm-detail h4 { margin:18px 0 10px; font-size:15px; }
.mm-stone-choices { display:flex; flex-direction:column; gap:10px; }
.mm-choice { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:54px; padding:10px; color:inherit; text-align:left; background:#132747; border:1px solid #607ba4; cursor:pointer; }
.mm-choice[aria-pressed="true"] { border:2px solid #ffe19a; background:#263d60; }.mm-choice:disabled { cursor:default; opacity:.65; }
#mm-unlock { display:block; width:100%; min-height:52px; margin-top:18px; }
#mm-back-list { display:none; }
.mm-footer { padding-top:8px; border-top:1px solid #526b94; }
.mm-footer small { max-width:440px; color:#b8c8e0; line-height:1.4; font-size:12px; }
/* Owner item 3: the footer points back to the limited banner instead of the C8 calendar. */
#mm-banner { display:inline-flex; align-items:center; gap:8px; }
.mm-back-arrow { flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mm-screen :focus-visible { outline:2px solid #fff6dc; outline-offset:2px; }
@media(max-width:1000px) and (min-width:701px) { .mm-layout{grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);gap:16px}.mm-row{grid-template-columns:214px minmax(0,1fr);gap:8px}.mm-row-state{grid-column:2}.mm-pair{grid-row:1/3}.mm-row-copy strong{font-size:16px} }
@media(max-width:700px), (max-width:1000px) and (max-height:480px) {
 #scr-mega-menu{padding:8px}.mm-screen .mm-frame{height:100%;padding:12px;gap:8px}.mm-header h2{font-size:23px}.mm-header p,.mm-status{font-size:12px}.mm-toolbar{gap:8px}.mm-balance{padding:5px 7px;font-size:12px}.mm-nav{gap:8px}.mm-nav .btn{min-height:48px;font-size:13px}.mm-layout{display:flex;flex-direction:column;min-height:0;gap:0}.mm-list,.mm-detail{flex:1;min-height:0}.mm-list{padding-right:4px}.mm-row{min-height:104px;grid-template-columns:188px minmax(0,1fr);gap:8px;padding:10px 12px}.mm-row-copy{grid-column:1/3;grid-row:1}.mm-row-copy strong{font-size:17px}.mm-row-copy>span{display:none}.mm-pair{grid-row:2;grid-column:1;width:188px;grid-template-columns:46px 26px 32px 4px 24px 10px 46px}.mm-row-state{grid-column:2;grid-row:2}.mm-model{height:44px}.mm-group{font-size:16px}.mm-group small{font-size:11px}.mm-detail{padding:12px}.mm-hero{height:136px}.mm-detail-name h3{font-size:23px}#mm-back-list{display:block;min-height:48px;margin-bottom:12px}.mm-choice,#mm-unlock{min-height:54px}.mm-screen .btn{min-height:48px}.mm-footer{font-size:12px}
 /* One horizontal strip keeps every filter and wallet control reachable without taking another list row. */
 .mm-controls{display:flex;flex:none;align-items:center;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 2px 6px}
 .mm-controls .mm-nav{order:0;flex-wrap:nowrap;gap:8px;border:0;padding:0}
 .mm-controls .mm-toolbar{order:1;flex-wrap:nowrap;gap:8px}
 .mm-controls .mm-wallet{flex-wrap:nowrap}
 .mm-controls .btn,.mm-controls select,.mm-balance{white-space:nowrap;flex-shrink:0}
 .mm-hero canvas{max-width:100%;max-height:100%;object-fit:contain}
 #scr-mega-menu[data-pane="list"] .mm-detail{display:none}
 #scr-mega-menu[data-pane="detail"] .mm-controls,#scr-mega-menu[data-pane="detail"] .mm-list,#scr-mega-menu[data-pane="detail"] .mm-nav,#scr-mega-menu[data-pane="detail"] .mm-toolbar{display:none}
}
@media(max-width:360px) { .mm-screen .mm-frame{padding:8px}.mm-row{padding:8px;gap:6px}.mm-row-copy strong{font-size:16px}.mm-row-state{font-size:11px}.mm-header h2{font-size:20px}.mm-balance{font-size:11px} }
/* Short phone landscapes use the same list/detail navigation as portrait phones. */
@media(max-width:1000px) and (max-height:480px) {
 #scr-mega-menu{padding:6px}
 .mm-screen .mm-frame{padding:8px;gap:4px}
 .mm-header{flex-wrap:nowrap;gap:8px}.mm-header h2{font-size:19px}.mm-header p,.mm-balance,.mm-status{font-size:11px}.mm-status{line-height:1.2}
 .mm-screen .btn,.mm-screen select{min-height:44px;padding:4px 8px;font-size:12px}
 .mm-controls{padding-top:2px;padding-bottom:4px}.mm-controls .mm-nav .btn{font-size:12px}
 .mm-balance{gap:4px;padding:2px 6px}
 .mm-row{min-height:54px;grid-template-columns:144px minmax(0,1fr) 118px;gap:8px;padding:4px 8px;margin-bottom:6px}
 .mm-pair{grid-column:1;grid-row:1;width:144px;grid-template-columns:40px 8px 24px 4px 20px 8px 40px}
 .mm-row-stone .mm-stone{width:24px;height:24px}.mm-model{height:40px}.mm-model canvas{max-width:100%;max-height:100%;object-fit:contain}
 .mm-row-copy{grid-column:2;grid-row:1;gap:4px}.mm-row-copy strong{font-size:15px;line-height:1.2}.mm-row-copy>span{display:block;font-size:11px}
 .mm-row-state{grid-column:3;grid-row:1;font-size:11px}.mm-group{font-size:14px;margin:8px 0 4px}.mm-group small{font-size:11px}
 .mm-footer{padding-top:4px}
 /* The complete hero shares the first detail rows with Back and the form name. Other details still scroll below. */
 #scr-mega-menu[data-pane="detail"] .mm-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(216px,1fr);align-content:start;column-gap:12px;padding:8px}
 .mm-detail>*{grid-column:1/-1}
 #mm-back-list{grid-column:1;grid-row:1;align-self:start;margin:0 0 6px}
 .mm-hero{grid-column:2;grid-row:1/3;height:136px}
 .mm-detail-name{grid-column:1;grid-row:2;gap:4px;margin:0 0 8px}.mm-detail-name h3{font-size:20px}
}

@media(prefers-reduced-motion:reduce) { .mm-screen *,.mm-screen *::before,.mm-screen *::after{animation:none!important;transition:none!important} }