/* Keep the menu compact after removing its retired subtitle. */
.hub .brand {
  padding-bottom: 12px;
}

/* Album flags stay still and fully contained inside their own cards. */
#album-grid .album-card {
  min-width: 0;
  min-height: 148px;
}

#album-grid .album-card img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

#album-grid .album-card b,
#album-grid .album-card small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* RV3 Álbum V1: colección editorial; motion stays inside flags and controls. */
#album.screen.active { max-width: none; padding: clamp(12px, 2vw, 26px); }
#album .album-premium { max-width: 1240px; padding: 0 0 32px; text-align: left; }
#album .album-sector-nav { display:flex; gap:8px; margin: 2px 0 14px; padding:6px; width:max-content; max-width:100%; border:1px solid #4bc8e044; border-radius:14px; background:linear-gradient(135deg,#0b1d32,#101a36); box-shadow:0 10px 28px #02091466; }
#album .album-sector-nav button { min-height:40px; padding:8px 14px; border:1px solid transparent; border-radius:10px; color:#b9cde3; background:transparent; font-weight:900; }
#album .album-sector-nav button.active { color:#f3fcff; border-color:#67e9f277; background:linear-gradient(120deg,#116a83aa,#403d88aa); box-shadow:inset 0 0 18px #50ddeb22,0 0 18px #41d9e622; }
#album .album-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,230px) minmax(130px,190px); gap:clamp(12px,2.5vw,32px); align-items:center; overflow:hidden; min-height:180px; padding:clamp(18px,3vw,34px); border:1px solid #4bd9ef66; border-radius:24px; background:radial-gradient(ellipse at 80% 45%,#216e9666,transparent 38%),linear-gradient(125deg,#102b45,#111b36 56%,#251c4c); box-shadow:0 18px 48px #02081688,inset 0 1px #c2f7ff30; }
#album .album-hero::before { content:""; position:absolute; z-index:-1; inset:-45%; background:conic-gradient(from 15deg at 70% 50%,transparent 0 18%,#51e6ff0a 22%,transparent 29% 55%,#c297ff0b 61%,transparent 70%); animation:album-hero-drift 22s linear infinite; pointer-events:none; }
#album .album-hero-copy { position:relative; z-index:1; }
#album .album-hero .eyebrow { margin:0 0 7px; color:#73f1f3; }
#album .album-hero h2 { margin:0; color:#f4f8ff; font-size:clamp(1.35rem,3vw,2.25rem); line-height:1.08; text-wrap:balance; }
#album .album-hero-copy>p:last-child { max-width:590px; margin:10px 0 0; color:#b5c9dd; font-weight:650; line-height:1.45; }
#album .album-hero-art { position:relative; width:min(100%,205px); aspect-ratio:1; justify-self:center; border:1px solid #79e8f06b; border-radius:50%; background:radial-gradient(circle at 34% 27%,#8ff5efaa,#35a6c044 23%,#122b56 62%,#061125); box-shadow:0 0 45px #35d8f55c,inset -18px -14px 35px #020919b0,inset 8px 8px 25px #c4ffff55; }
#album .album-hero-art::before,#album .album-hero-art::after { content:""; position:absolute; inset:16%; border:1px solid #8beff159; border-radius:50%; transform:rotate(-28deg) scaleX(.47); }
#album .album-hero-art::after { inset:4%; transform:rotate(24deg) scaleX(.76); border-color:#9e9bff55; }
#album .album-hero-art i { position:absolute; inset:0; overflow:hidden; border-radius:50%; background:repeating-linear-gradient(0deg,transparent 0 17%,#a3eff01b 17.5% 18%,transparent 18.5% 34%); mask-image:radial-gradient(circle,#000 60%,transparent 61%); }
#album .album-hero-progress { display:grid; justify-items:center; gap:8px; color:#b9cee2; text-align:center; font-size:.75rem; font-weight:900; letter-spacing:.08em; }
#album .album-progress-ring { --album-pct:0%; display:grid; place-items:center; width:116px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#72f2e9 var(--album-pct),#879bb433 0); box-shadow:0 0 27px #55e3ea2b; }
#album .album-progress-ring>span { display:grid; place-items:center; width:86px; aspect-ratio:1; border:1px solid #8df3e84a; border-radius:50%; background:radial-gradient(circle at 35% 20%,#183f58,#0a152b 75%); color:white; font-size:1.02rem; letter-spacing:0; }
#album .album-progress-ring small { margin-top:2px; color:#a6c5d9; font-size:.57rem; }
#album .album-region-progress { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin:12px 0 18px; }
#album .album-region-chip { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; padding:9px 11px; border:1px solid #4c759044; border-radius:13px; color:#d4e2ef; background:linear-gradient(145deg,#102740,#101b31); text-align:left; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s; }
#album .album-region-chip:hover,#album .album-region-chip:focus-visible { border-color:#6ce5efaa; background:linear-gradient(145deg,#16415a,#171e3e); box-shadow:0 0 18px #45d9ea22; }
#album .album-region-chip b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }
#album .album-region-chip span { color:#8fa9c0; font-size:.68rem; font-weight:850; }
#album .album-region-chip i { grid-column:1/-1; height:3px; overflow:hidden; border-radius:9px; background:#71829b35; }
#album .album-region-chip i::after { content:""; display:block; width:var(--region-pct,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#55cde7,#a5f5d5); box-shadow:0 0 9px #6befe6; }
#album .collection-filters { grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) minmax(170px,1fr) minmax(220px,1.4fr); gap:10px; margin:0 0 8px; padding:13px; border:1px solid #4b76904d; border-radius:17px; background:linear-gradient(135deg,#0f2339,#10182c); box-shadow:inset 0 1px #d7f5ff14; }
#album .collection-filters label { color:#b5c9dd; }
#album .collection-filters select,#album .album-search-input { min-height:42px; border:1px solid #5a82a066; border-radius:10px; color:#eaf6ff; background:#081629; }
#album .album-search-input { width:100%; padding:9px 12px; font-size:.9rem; }
#album .album-search-input::placeholder { color:#8197ae; }
#album .collection-count { min-height:20px; margin:10px 2px 0; color:#91a9c1; font-size:.76rem; }
#album .album-grid { grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:12px; margin:10px 0 0; text-align:left; }
#album-grid .album-card { position:relative; isolation:isolate; min-height:208px; justify-content:flex-start; align-items:stretch; gap:6px; overflow:hidden; padding:10px; border:1px solid #496b8b66; border-radius:17px; color:#dceaf7; background:linear-gradient(150deg,#142b45,#0b172b 72%); box-shadow:0 10px 23px #02081655,inset 0 1px #e8faff14; text-align:left; transition:border-color .22s,box-shadow .22s,background .22s; }
#album-grid .album-card::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.35; background:radial-gradient(circle at 50% 4%,#49c5df22,transparent 50%),linear-gradient(120deg,transparent 35%,#bd9cff0b 50%,transparent 66%); pointer-events:none; }
#album-grid button.album-card { width:100%; font:inherit; cursor:pointer; }
#album-grid .album-card.open { border-color:#54d8c888; box-shadow:0 10px 25px #03101b88,inset 0 1px #e5fffc25; }
#album-grid .album-card:hover,#album-grid .album-card:focus-visible { z-index:2; border-color:#71edf0; background:linear-gradient(145deg,#1a3c59,#121c38); box-shadow:0 12px 28px #02081299,0 0 22px #48dceb32,inset 0 1px #e5ffff33; }
#album-grid .album-flag-window { position:relative; display:grid; place-items:center; min-height:91px; padding:10px; overflow:hidden; border:1px solid #7acddd55; border-radius:12px; background:radial-gradient(ellipse at 50% 0%,#66dbe51b,transparent 70%),linear-gradient(145deg,#0a182b,#10233c); box-shadow:inset 0 0 22px #020b1c88; }
#album-grid .album-flag-window::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent 22%,#d6ffff0d 48%,transparent 66%); pointer-events:none; }
#album-grid .album-card img { position:relative; z-index:1; width:100%; height:auto; max-height:70px; object-fit:contain; filter:drop-shadow(0 6px 7px #0009); animation:none!important; transform:none!important; }
#album-grid .album-card b { margin-top:3px; color:#f3f8ff; font-size:.76rem; line-height:1.25; }
#album-grid .album-card small { color:#95abc1; font-size:.62rem; line-height:1.25; }
#album-grid .album-card .collection-region { color:#74e8e3!important; }
#album-grid .collection-alt { color:#b2c3d4!important; }
#album-grid .collection-detail-hint { margin-top:auto; padding-top:5px; color:#7ce8ee!important; font-size:.59rem!important; letter-spacing:.04em; text-transform:uppercase; }
#album-grid .album-card.locked { justify-content:flex-start; opacity:.78; background:linear-gradient(150deg,#111f33,#0b1424); }
#album-grid .album-card.locked .lock-mark { position:relative; display:grid; place-items:center; min-height:91px; border:1px solid #63758c40; border-radius:12px; background:linear-gradient(145deg,#101d30,#0a1424); }
#album-grid .album-card.locked .lock-mark::before { content:""; width:28px; height:22px; margin-top:12px; border:2px solid #95a7bd99; border-radius:5px; background:#182a40; box-shadow:0 0 18px #899db222; }
#album-grid .album-card.locked .lock-mark::after { content:""; position:absolute; top:27px; width:14px; height:16px; border:2px solid #95a7bd99; border-bottom:0; border-radius:10px 10px 0 0; }
#album-grid .album-card.locked b { color:#a9bbcf; letter-spacing:.08em; font-size:.65rem; }
#album-grid .album-card.locked .collection-lock { margin-top:auto; color:#91a0b4; font-size:.61rem; }
#album-grid .album-card[hidden] { display:none!important; }
#album-grid .album-card.is-new-discovery { animation:album-discovery 1.15s ease-out both; }
.album-detail-dialog { width:min(900px,calc(100vw - 28px)); max-width:none; max-height:min(88vh,900px); padding:0; overflow:auto; border:1px solid #75dce887; border-radius:24px; color:#eaf5ff; background:radial-gradient(ellipse at 8% 0%,#1a587155,transparent 44%),linear-gradient(145deg,#101f37,#0a1326 75%); box-shadow:0 30px 100px #000c,0 0 35px #45d9ed22; }
.album-detail-dialog::backdrop { background:#020714c9; backdrop-filter:blur(8px); }
.album-detail-shell { position:relative; padding:clamp(18px,3vw,34px); }
.album-detail-close { position:sticky; z-index:4; top:8px; float:right; width:42px; height:42px; border:1px solid #74dce577; border-radius:13px; color:#effbff; background:#142840; font-size:1.35rem; }
.album-detail-header { display:grid; grid-template-columns:minmax(200px,.9fr) minmax(0,1.1fr); gap:clamp(18px,4vw,42px); align-items:center; padding:16px 20px 24px; border-bottom:1px solid #6baac344; text-align:left; }
.album-detail-flag { display:grid; place-items:center; min-height:210px; overflow:hidden; border:1px solid #72dbe477; border-radius:18px; background:radial-gradient(ellipse at 50% 0%,#7befff24,transparent 68%),linear-gradient(145deg,#081629,#10243d); box-shadow:inset 0 0 32px #020816aa,0 12px 28px #02081788; }
.album-detail-flag img,.album-detail-flag canvas { display:block; width:min(100%,460px); max-height:260px; object-fit:contain; }
.album-detail-flag img[hidden] { display:none!important; }
.album-detail-header .eyebrow { margin:0 0 8px; color:#76e9eb; }
.album-detail-header h2 { margin:0; color:#f5f9ff; font-size:clamp(1.5rem,4vw,2.6rem); line-height:1.05; }
.album-detail-alternate { color:#b9cce1; }
.album-detail-meta { display:inline-flex; margin:10px 0 0; padding:7px 10px; border:1px solid #78dfe144; border-radius:999px; color:#b3dbe2; background:#08182b; font-size:.75rem; font-weight:850; }
.album-kid-intro,.album-meaning-highlight,.album-detail-more { margin:18px 0 0; padding:18px; border:1px solid #5d809e55; border-radius:16px; background:linear-gradient(145deg,#132942aa,#0b1729cc); text-align:left; }
.album-kid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.album-kid-cards article { min-height:74px; display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #5c829d55; border-radius:12px; background:#0a192b; }
.album-kid-cards article span { flex:0 0 auto; color:#67e2e8; font-size:1.1rem; }
.album-kid-cards article b { color:#e1edf6; font-size:.82rem; line-height:1.35; }
.album-kid-fact { margin-top:12px; padding:13px 15px; border-left:3px solid #76e9d4; border-radius:0 11px 11px 0; background:#0b2635; }
.album-kid-fact p,.album-meaning p { margin:.45em 0 0; color:#c4d3e1; line-height:1.55; }
.album-detail-more summary { cursor:pointer; color:#87e9ed; font-weight:900; letter-spacing:.04em; }
.album-detail-more>div { padding-top:10px; }
.album-detail-section { margin:15px 0 0; padding:14px; border:1px solid #4c6b8755; border-radius:13px; background:#0a1729aa; }
.album-detail-section h3 { margin:0 0 10px; color:#9cece8; font-size:.96rem; }
.album-detail-section p,.album-detail-section dd { color:#c3d3e2; line-height:1.5; }
.album-detail-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 15px; margin:0; }
.album-detail-list dt { color:#88a9c0; font-size:.68rem; font-weight:900; text-transform:uppercase; }
.album-detail-list dd { margin:4px 0 0; }
.album-detail-return { display:block; min-height:46px; margin:18px auto 0; padding:10px 20px; border:1px solid #66e0dc99; border-radius:13px; color:#ecffff; background:linear-gradient(120deg,#126279,#353d87); font-weight:900; }
@keyframes album-hero-drift { to { transform:rotate(360deg); } }
@keyframes album-discovery { 0%{transform:scale(.96);filter:brightness(.7);box-shadow:0 0 0 #6fffe000} 35%{transform:scale(1.025);filter:brightness(1.25);box-shadow:0 0 32px #77f7e877} 100%{transform:scale(1);filter:none} }
@media (max-width:900px) { #album .album-hero { grid-template-columns:minmax(0,1fr) 130px; } #album .album-hero-progress { grid-column:1/-1; display:flex; justify-content:flex-start; } #album .album-progress-ring { width:64px; } #album .album-progress-ring>span { width:50px; font-size:.72rem; } #album .album-progress-ring small { display:none; } #album .album-region-progress { grid-template-columns:repeat(3,minmax(0,1fr)); } #album .collection-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px) { #album.screen.active { padding:10px; } #album .album-hero { grid-template-columns:minmax(0,1fr) 78px; min-height:130px; gap:8px; padding:14px; border-radius:18px; } #album .album-hero-art { width:76px; } #album .album-hero-progress { font-size:.64rem; } #album .album-region-progress { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } #album .album-region-chip { padding:8px; } #album .collection-filters { grid-template-columns:1fr 1fr; padding:9px; gap:8px; } #album .collection-filters label:last-child { grid-column:1/-1; } #album .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #album-grid .album-card { min-height:180px; padding:8px; } #album-grid .album-flag-window,#album-grid .album-card.locked .lock-mark { min-height:76px; } #album-grid .album-card img { max-height:54px; } .album-detail-header { grid-template-columns:1fr; padding:8px 0 16px; } .album-detail-flag { min-height:150px; } .album-detail-flag img,.album-detail-flag canvas { max-height:190px; } .album-detail-dialog { width:calc(100vw - 14px); max-height:92vh; border-radius:17px; } }
@media (prefers-reduced-motion: reduce) { #album .album-hero::before,#album-grid .album-card.is-new-discovery { animation:none!important; } #album .album-sector-nav button,#album .album-region-chip,#album-grid .album-card { transition:none!important; } }
:root[data-motion="reduced"] #album .album-hero::before,:root[data-motion="reduced"] #album-grid .album-card.is-new-discovery { animation:none!important; }
:root[data-motion="reduced"] #album .album-sector-nav button,:root[data-motion="reduced"] #album .album-region-chip,:root[data-motion="reduced"] #album-grid .album-card { transition:none!important; }

/* Banderas creadas: una vista de colección propia, usando las imágenes reales del jugador. */
#ranking.screen.active { max-width:none; padding:clamp(12px,2vw,26px); }
#ranking .collection-page { max-width:1240px; padding:0 0 32px; text-align:left; }
#ranking .collection-page > .eyebrow { margin:8px 0; color:#79e9e9; letter-spacing:.14em; }
#ranking .collection-page > h2 { margin:0; color:#f3f8ff; font-size:clamp(1.5rem,3vw,2.3rem); }
#ranking .collection-page > p:not(.eyebrow) { color:#b5c9dd; }
#ranking .created-flags-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:22px; }
#ranking .created-flag-card { min-width:0; overflow:hidden; padding:12px; border:1px solid #526f9177; border-radius:17px; color:#e8f3fc; background:linear-gradient(150deg,#142b45,#0b172b 72%); box-shadow:0 10px 23px #02081655,inset 0 1px #e8faff14; transition:border-color .2s,box-shadow .2s,background .2s; }
#ranking .created-flag-card:hover { border-color:#71edf0; background:linear-gradient(145deg,#1a3c59,#121c38); box-shadow:0 12px 28px #02081299,0 0 22px #48dceb32,inset 0 1px #e5ffff33; }
#ranking .created-flag-image { display:grid; place-items:center; min-height:128px; padding:14px; overflow:hidden; border:1px solid #7acddd55; border-radius:12px; background:radial-gradient(ellipse at 50% 0%,#66dbe51b,transparent 70%),linear-gradient(145deg,#0a182b,#10233c); box-shadow:inset 0 0 22px #020b1c88; }
#ranking .created-flag-image img { display:block; width:100%; max-width:100%; height:100px; object-fit:contain; filter:drop-shadow(0 6px 7px #0009); }
#ranking .created-flag-card h3 { margin:12px 2px 6px; color:#f3f8ff; font-size:1rem; line-height:1.25; overflow-wrap:anywhere; }
#ranking .created-flag-card p { margin:5px 2px; color:#b5c9dd; font-size:.82rem; }
#ranking .created-flag-card p b { color:#85e9e5; }
#ranking .created-flag-card small { display:block; margin:8px 2px 2px; color:#91a9c1; font-size:.7rem; line-height:1.4; }
#ranking .created-flags-grid > p { grid-column:1/-1; margin:0; padding:22px; border:1px dashed #5f829a88; border-radius:14px; color:#b5c9dd; background:#0e2035aa; }
@media (max-width:580px) { #ranking.screen.active { padding:10px; } #ranking .created-flags-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #ranking .created-flag-card { padding:8px; } #ranking .created-flag-image { min-height:94px; padding:8px; } #ranking .created-flag-image img { height:76px; } #ranking .created-flag-card h3 { font-size:.85rem; } }
@media (prefers-reduced-motion: reduce) { #ranking .created-flag-card { transition:none!important; } }
:root[data-motion="reduced"] #ranking .created-flag-card { transition:none!important; }

/* RV3 Album V2: compact collection header, real embedded geography, more flag area. */
#album .album-premium { width:100%; max-width:none; padding:0 0 18px; }
#album .album-sector-nav { margin:0 0 8px; padding:4px; gap:5px; border-radius:12px; }
#album .album-sector-nav button { min-height:34px; padding:6px 11px; }
#album .album-hero { min-height:104px; grid-template-columns:minmax(0,1fr) 112px minmax(94px,118px); gap:12px; padding:10px 16px; border-radius:18px; }
#album .album-hero-copy .eyebrow { margin-bottom:3px; font-size:.67rem; }
#album .album-hero h2 { font-size:clamp(1.2rem,2.3vw,1.75rem); }
#album .album-hero-copy>p:last-child { margin:4px 0 0; font-size:.78rem; line-height:1.3; }
#album .album-hero-art { width:104px; border-color:#84eaff99; background:radial-gradient(circle at 34% 27%,#8ff5ef55,#35a6c033 22%,#122b56 64%,#061125); box-shadow:0 0 24px #35d8f538,inset -12px -10px 22px #020919b0,inset 6px 6px 14px #c4ffff44; }
#album .album-hero-art::before,#album .album-hero-art::after { display:none; }
#album .album-hero-art i { z-index:2; border-radius:50%; background:linear-gradient(110deg,transparent 20%,#ddffff13 48%,transparent 63%); mask-image:none; animation:album-globe-glint 9s ease-in-out infinite; pointer-events:none; }
#album .album-globe-canvas { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; border-radius:50%; }
#album .album-hero-progress { gap:4px; font-size:.64rem; }
#album .album-progress-ring { width:62px; }
#album .album-progress-ring>span { width:48px; font-size:.69rem; }
#album .album-progress-ring small { font-size:.48rem; }
#album .album-region-progress { grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:7px 0; }
#album .album-region-chip { padding:6px 8px; gap:2px 5px; border-radius:10px; }
#album .album-region-chip b { font-size:.66rem; }
#album .album-region-chip span { font-size:.62rem; }
#album .collection-filters { grid-template-columns:minmax(120px,.8fr) minmax(130px,.9fr) minmax(130px,.9fr) minmax(190px,1.3fr); gap:8px; margin:0 0 3px; padding:8px 10px; border-radius:13px; }
#album .collection-filters label { font-size:.68rem; }
#album .collection-filters select,#album .album-search-input { min-height:34px; padding-top:5px; padding-bottom:5px; font-size:.78rem; }
#album .album-search-input { padding-left:10px; }
#album .collection-count { min-height:15px; margin:3px 2px 0; font-size:.68rem; }
#album .album-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:9px; margin-top:5px; }
#album-grid .album-card { min-height:148px; padding:8px; gap:4px; border-radius:14px; }
#album-grid .album-flag-window,#album-grid .album-card.locked .lock-mark { min-height:68px; padding:6px; border-radius:10px; }
#album-grid .album-card img { max-height:54px; }
#album-grid .album-card b { font-size:.72rem; }
#album-grid .album-card small { font-size:.59rem; }
#album-grid .collection-detail-hint { padding-top:2px; }

/* The native dialog is the only scroll owner; its inner shell provides one contained scroll area. */
#album-detail-dialog { overflow:hidden; overscroll-behavior:contain; scrollbar-width:none; }
#album-detail-dialog::-webkit-scrollbar { display:none; }
#album-detail-dialog:has(.album-flag-viewer) { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; }
#album-detail-dialog .album-detail-shell { box-sizing:border-box; width:100%; max-height:min(88vh,900px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#album-detail-dialog .album-detail-flag { cursor:zoom-in; }
#album-detail-dialog .album-detail-flag img,#album-detail-dialog .album-detail-flag canvas { max-width:100%; }
.album-flag-viewer { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:clamp(14px,4vw,52px); background:radial-gradient(ellipse at 50% 44%,#163e5beF,#061020f7 74%); backdrop-filter:blur(12px); animation:album-viewer-in .24s ease-out both; }
.album-viewer-stage { position:relative; display:grid; place-items:center; width:min(88vw,1100px); max-height:78vh; aspect-ratio:3/2; overflow:visible; border-radius:4px; filter:drop-shadow(0 24px 38px #000b) drop-shadow(0 0 26px #63e9ff35); }
.album-viewer-stage img,.album-viewer-stage canvas { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:78vh; object-fit:contain; }
.album-viewer-stage img { z-index:1; }
.album-viewer-stage canvas { z-index:2; }
.album-viewer-stage img[hidden],.album-viewer-stage canvas[hidden],.album-viewer-heading[hidden],.album-viewer-status[hidden],.album-viewer-actions[hidden],.album-viewer-error[hidden] { display:none!important; }
.album-viewer-content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; max-height:100%; }
.album-viewer-heading { display:flex; flex-direction:column; align-self:flex-start; width:min(88vw,1100px); color:#eafaff; text-shadow:0 2px 12px #0009; }
.album-viewer-heading strong { font-size:clamp(1rem,2vw,1.45rem); letter-spacing:.05em; }
.album-viewer-heading span { color:#a9cadb; font-size:.82rem; }
.album-viewer-stage { width:min(88vw,1100px); height:auto; max-height:68vh; border-radius:3px; }
.album-viewer-stage img { max-height:68vh; }
.album-viewer-stage canvas { left:-3%; top:-7%; width:106%; height:114%; max-height:none!important; }
.album-viewer-stage canvas { transition:opacity .16s ease; }
.album-viewer-error { position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:24px; color:#d8e9f5; text-align:center; background:#0b1b2bdd; }
.album-viewer-status { margin:0; color:#bdefff; font-size:.84rem; text-align:center; }
.album-viewer-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.album-viewer-actions button { min-height:38px; padding:8px 14px; border:1px solid #62d9e877; border-radius:10px; color:#eafaff; background:linear-gradient(135deg,#153b59,#25345b); font-weight:850; cursor:pointer; }
.album-viewer-actions button:hover,.album-viewer-actions button:focus-visible { border-color:#75f1f3; box-shadow:0 0 18px #45dce844; outline:2px solid #75f1f355; }
.album-viewer-actions button:disabled { opacity:.55; cursor:not-allowed; }
.album-viewer-close { position:absolute; z-index:3; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(130,226,239,.38); border-radius:14px; color:#effcff; background:linear-gradient(145deg,rgba(24,48,72,.97),rgba(9,22,42,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 22px rgba(0,8,20,.3); backdrop-filter:blur(12px) saturate(135%); font:300 1.65rem/1 system-ui,sans-serif; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.album-viewer-close:hover,.album-viewer-close:focus-visible { border-color:rgba(117,241,243,.82); background:linear-gradient(145deg,#20516b,#173452); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 3px rgba(119,238,242,.15),0 10px 24px rgba(0,8,20,.36); outline:2px solid rgba(119,238,242,.72); outline-offset:2px; transform:translateY(-1px); } .album-viewer-close:active { transform:scale(.96); } @media (prefers-reduced-motion:reduce) { .album-viewer-close { transition:none; } }
@keyframes album-globe-glint { 0%,100%{opacity:.45;transform:translateX(-10%)} 50%{opacity:.9;transform:translateX(10%)} }
@keyframes album-viewer-in { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:scale(1)} }
@media (max-width:900px) {
  #album .album-hero { grid-template-columns:minmax(0,1fr) 94px minmax(78px,90px); }
  #album .album-hero-progress { grid-column:auto; display:grid; justify-items:center; }
  #album .album-hero-art { width:88px; }
  #album .album-region-progress { grid-template-columns:repeat(6,minmax(0,1fr)); }
  #album .album-region-chip { padding:5px 6px; }
  #album .album-region-chip b { font-size:.58rem; }
  #album .album-region-chip span { font-size:.55rem; }
  #album .collection-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #album .collection-filters label { min-width:0; }
  #album .collection-filters select { width:100%; }
}
@media (max-width:580px) {
  #album.screen.active { padding:8px; }
  #album .album-hero { min-height:84px; grid-template-columns:minmax(0,1fr) 64px 58px; gap:5px; padding:8px 10px; border-radius:14px; }
  #album .album-hero-art { width:60px; }
  #album .album-hero h2 { font-size:1.03rem; }
  #album .album-hero-copy>p:last-child { font-size:.65rem; }
  #album .album-hero-progress { font-size:.5rem; }
  #album .album-progress-ring { width:43px; }
  #album .album-progress-ring>span { width:34px; font-size:.58rem; }
  #album .album-progress-ring small { display:none; }
  #album .album-region-progress { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:5px 0; }
  #album .album-region-chip { padding:4px 6px; }
  #album .album-region-chip b,#album .album-region-chip span { font-size:.55rem; }
  #album .collection-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px; gap:5px; }
  #album .collection-filters label:last-child { grid-column:auto; }
  #album .collection-filters label { font-size:.58rem; }
  #album .collection-filters select,#album .album-search-input { min-height:30px; font-size:.66rem; }
  #album .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #album-grid .album-card { min-height:132px; padding:6px; }
  #album-grid .album-flag-window,#album-grid .album-card.locked .lock-mark { min-height:58px; }
  #album-grid .album-card img { max-height:47px; }
  #album-detail-dialog { width:calc(100vw - 12px); max-height:92vh; }
  #album-detail-dialog .album-detail-shell { max-height:92vh; padding:14px; }
  #album-detail-dialog .album-detail-header { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px; padding:6px 40px 12px 0; }
  #album-detail-dialog .album-detail-flag { min-height:100px; }
  #album-detail-dialog .album-detail-flag img,#album-detail-dialog .album-detail-flag canvas { max-height:115px; }
  #album-detail-dialog .album-detail-header h2 { font-size:1.45rem; }
  .album-viewer-stage { width:min(92vw,1100px); max-height:64vh; }
}
@media (max-height:500px) and (orientation:landscape) {
  #album.screen.active { padding:6px 10px; }
  #album .album-sector-nav { min-height:28px; margin-bottom:4px; }
  #album .album-sector-nav button { min-height:26px; padding:3px 8px; font-size:.64rem; }
  #album .album-hero { min-height:68px; grid-template-columns:minmax(0,1fr) 58px 58px; padding:5px 9px; gap:6px; }
  #album .album-hero-art { width:54px; }
  #album .album-hero-copy .eyebrow { display:none; }
  #album .album-hero h2 { font-size:.95rem; }
  #album .album-hero-copy>p:last-child { margin-top:2px; font-size:.57rem; }
  #album .album-progress-ring { width:40px; }
  #album .album-progress-ring>span { width:31px; }
  #album .album-region-progress { margin:4px 0; }
  #album .album-region-chip { padding:3px 5px; }
  #album .album-region-chip i { height:2px; }
  #album .collection-filters { padding:5px 7px; gap:5px; }
  #album .collection-filters select,#album .album-search-input { min-height:27px; padding-top:3px; padding-bottom:3px; }
  #album .collection-count { display:none; }
  #album .album-grid { margin-top:4px; }
}
@media (prefers-reduced-motion:reduce) {
  #album .album-hero-art i,.album-flag-viewer { animation:none!important; }
  #album .album-globe-canvas { animation:none!important; }
}
:root[data-motion="reduced"] #album .album-hero-art i,:root[data-motion="reduced"] .album-flag-viewer { animation:none!important; }


/* RV3 Album V3: personal collection shares the Album's compact visual system. */
#album .pfe-collection-v1 { box-sizing:border-box; width:100%; max-width:none!important; margin:0; padding:0!important; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
#album .pfe-collection-v1 .album-sector-nav { margin:0 0 8px; }
#album .pfe-collection-v1 .pfe-v1-hero { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; padding:10px 14px; border:1px solid #4bd9ef55; border-radius:14px; background:linear-gradient(120deg,#102b45,#111b36 62%,#211b43); box-shadow:0 9px 28px #02081655,inset 0 1px #c2f7ff1d; }
#album .pfe-collection-v1 .pfe-v1-hero:before { display:none; }
#album .pfe-collection-v1 .pfe-v1-copy { max-width:none; }
#album .pfe-collection-v1 .pfe-v1-kicker { display:none; }
#album .pfe-collection-v1 .pfe-v1-hero h1 { margin:0; color:#f4f8ff; font-size:clamp(1.05rem,2.2vw,1.55rem); letter-spacing:.08em; }
#album .pfe-collection-v1 .pfe-v1-count { display:flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:10px; font-size:.72rem; }
#album .pfe-collection-v1 .pfe-v1-count strong { display:inline; font-size:1.1rem; }
#album .pfe-collection-v1 .pfe-collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:10px; align-items:stretch; margin:0; }
#album .pfe-collection-v1 .pfe-saved-card { min-width:0; padding:7px; border:1px solid #4bc8e044; border-radius:14px; background:linear-gradient(155deg,#142a43,#0d1a2d 75%); box-shadow:0 9px 25px #02091455,inset 0 1px #d5faff12; overflow:visible; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
#album .pfe-collection-v1 .pfe-saved-card:hover { border-color:#67e9f277; box-shadow:0 13px 30px #02091477,0 0 18px #43dbe522; transform:translateY(-2px); }
#album .pfe-collection-v1 .pfe-card-open { padding:4px; border-radius:10px; }
#album .pfe-collection-v1 .pfe-card-flag { aspect-ratio:3/2; padding:7px; border-radius:9px; }
#album .pfe-collection-v1 .pfe-card-flag img { border-radius:2px; }
#album .pfe-collection-v1 .pfe-card-open h3 { margin:8px 3px 3px; font-size:.9rem; }
#album .pfe-collection-v1 .pfe-card-open p,#album .pfe-collection-v1 .pfe-card-open small { margin:3px; font-size:.68rem; }
#album .pfe-collection-v1 .pfe-saved-actions { display:flex; flex-wrap:wrap; gap:7px; padding:8px 3px 3px; }
#album .pfe-collection-v1 .pfe-saved-actions button { flex:1 1 118px; min-height:38px; padding:8px 10px; border:1px solid #55cfe2; border-radius:10px; background:linear-gradient(135deg,#173b55,#1a3150); color:#edfaff; font:800 .74rem/1.2 system-ui,sans-serif; box-shadow:inset 0 1px #d7fbff16,0 4px 12px #02091444; cursor:pointer; transition:filter .16s ease,border-color .16s ease,transform .16s ease; }#album .pfe-collection-v1 .pfe-saved-actions button:hover { filter:brightness(1.14); border-color:#79e9f4; transform:translateY(-1px); }
#album .pfe-collection-v1 .pfe-saved-actions button:focus-visible { outline:3px solid #ffcf52; outline-offset:2px; }
#album .pfe-collection-v1 .pfe-saved-actions .pfe-representative { border-color:#41d7e4; background:linear-gradient(135deg,#087d91,#195da0); }
#album .pfe-collection-v1 .pfe-saved-actions .pfe-delete { border-color:#9b6072; background:linear-gradient(135deg,#47283b,#342540); color:#ffe8ed; }
@media(prefers-reduced-motion:reduce){#album .pfe-collection-v1 .pfe-saved-actions button{transition:none}}
#album .pfe-demo-collection .pfe-saved-actions { display:none; }
#album .pfe-demo-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }
@media(max-width:760px) {
  #album .pfe-collection-v1 .pfe-collection-grid,#album .pfe-demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  #album .pfe-collection-v1 .pfe-v1-hero { margin-bottom:7px; padding:8px 10px; }
  #album .pfe-collection-v1 .pfe-card-flag { padding:5px; }
  #album .pfe-collection-v1 .pfe-saved-actions button { flex-basis:100%; }
  .album-viewer-stage,.album-viewer-heading { width:min(92vw,1100px); }
  .album-viewer-content { gap:8px; }
  .album-viewer-stage { max-height:60vh; }
  .album-viewer-stage img { max-height:60vh; }
  .album-viewer-stage canvas { max-height:none!important; }
}
@media(max-height:500px) and (orientation:landscape) {
  .album-flag-viewer { padding:8px 46px; }
  .album-viewer-content { gap:5px; }
  .album-viewer-stage { max-height:58vh; }
  .album-viewer-stage img { max-height:58vh; }
  .album-viewer-stage canvas { max-height:none!important; }
  .album-viewer-heading strong { font-size:.95rem; }
  .album-viewer-heading span,.album-viewer-status { font-size:.68rem; }
  .album-viewer-actions button { min-height:30px; padding:4px 9px; font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce) { #album .pfe-collection-v1 .pfe-saved-card { transition:none!important; } }
:root[data-motion="reduced"] #album .pfe-collection-v1 .pfe-saved-card { transition:none!important; }