/* Original sky sanctuary composition, extended with mode selection and new features. */
#dragon-home,#dragon-collection{font-family:'Trebuchet MS',Arial,sans-serif;color:#173f49;box-sizing:border-box}
#dragon-home *,#dragon-collection *{box-sizing:border-box}
#dragon-home button,#dragon-collection button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#dragon-home button:focus-visible,#dragon-collection button:focus-visible{outline:3px solid #246ba1;outline-offset:4px}
#dragon-home{position:fixed;inset:0;z-index:4;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom));pointer-events:auto}
.home-header{width:100%;min-height:84px;position:relative;flex:none}
.home-brand{text-align:center;padding:6px 185px 0}
.home-brand h1{margin:0;line-height:0}
.home-logo{display:block;width:100%;max-width:340px;height:92px;object-fit:contain;margin:0 auto}
.home-brand p{font-size:12px;font-weight:bold;margin:0;color:#376368}
.home-account{position:absolute;z-index:5;right:12px;top:0;display:flex;align-items:flex-end;flex-direction:column;gap:12px}
.home-account>button{position:relative;width:54px;height:54px;padding:5px;border:2px solid #fbfdeb;border-radius:50%;background:linear-gradient(#fffff1,#e1eedc);box-shadow:0 5px 0 #6b9c9b4a,0 9px 0 #426d7d1a;color:#a9534c}
.home-sound-art,.home-sound-art svg{display:block;width:100%;height:100%}.home-account>button[data-action="sound"]{overflow:hidden}.home-sound-muted{position:absolute;inset:auto 3px 3px auto;width:23px;height:23px;display:grid;place-items:center;border:2px solid #fff9e8;border-radius:50%;background:#c85e55;color:#fff9e8;box-shadow:0 1px 3px #173f4966;font-size:0;line-height:1;font-weight:bold}.home-sound-muted::after{content:'×';font-size:17px}.home-sound-muted[hidden]{display:none}
.home-wallet{display:flex;align-items:center;justify-content:flex-end;min-width:150px;height:42px;gap:18px;padding:0 0 0 20px;border:2px solid #59999b;border-radius:26px;background:linear-gradient(#96c5c2,#48838c);box-shadow:0 4px 0 #38687942,inset 0 2px 0 #d9f0dc78;color:#fff8de}
.home-wallet svg{width:53px;height:53px;flex:none;margin-right:-5px}.home-wallet b{font-size:23px;letter-spacing:.025em}
.home-stage{width:min(800px,100%);position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) 110px;height:clamp(360px,39vh,560px);min-height:360px;flex:none}
.home-navigation{align-self:center;display:flex;flex-direction:column;gap:22px;grid-column:1}
.home-navigation button{display:flex;align-items:center;flex-direction:column;border:0;padding:0;background:none;color:#153f49;text-align:center}
.home-nav-art{display:block;flex:none;width:76px;height:76px;border-radius:50%;background:linear-gradient(#ffffed,#dfedda);box-shadow:0 5px 0 #699e9d44,0 9px 0 #477a9017}
.home-nav-art svg,.home-nav-art img{width:100%;height:100%;display:block;object-fit:contain}
.home-daily-art img{transform:scale(.82);transform-origin:center}
.home-navigation b{font-size:18px;margin-top:7px;text-shadow:0 1px 0 #efffed}
.home-navigation small{font-size:10px;font-weight:bold;margin-top:4px;color:#325f66}
.home-navigation b,.home-navigation small{display:none}
.home-hero{grid-column:2;display:flex;flex-direction:column;min-width:0}
.home-orbit{flex:1;min-height:170px}
.home-hero-bottom{text-align:center;flex:none}
.home-hero-bottom h2{display:inline-block;margin:0;padding:5px 23px;background:linear-gradient(#639d8a,#376f68);border:1px solid #b7dfc3;border-radius:24px;color:#fff7db;font-size:16px;box-shadow:0 3px 0 #43757622}
.home-hero-bottom p{font-size:11px;font-weight:bold;color:#2d5a63;margin:5px 0 0}
#dragon-home.home-time-mode .home-hero-bottom{padding-bottom:10px}
#dragon-home.home-time-mode .home-launch{margin-top:8px}
#dragon-home.home-time-mode .home-navigation>[data-action="supplies"] small{display:none}
.home-launch{width:min(480px,90%);display:flex;flex-direction:column;align-items:center;flex:none}
.home-mode-switch{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:10px}
.home-mode-switch button{border:2px solid #e5f0d8;border-radius:24px;background:linear-gradient(#fffcec,#e1ecdc);box-shadow:0 4px 0 #6c9c9748,inset 0 2px 0 #fffdf8;padding:10px 5px;color:#244f58;font-size:14px}
.home-mode-switch [aria-pressed=true]{background:linear-gradient(#b5e6cd,#77bfab);border-color:#d6f4dd;box-shadow:0 4px 0 #4c8d834f,inset 0 2px 0 #f2ffe17a}
.home-navigation .home-daily-entry{display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:#153f49}
.home-daily-entry:disabled{opacity:1;cursor:default}
.home-daily-entry>b,.home-daily-entry>small,.home-daily-entry>strong{display:none}
.home-mode-description{font-size:11px;font-weight:bold;margin:10px 0;color:#2d5862;text-align:center}
.home-play{display:flex;justify-content:center;align-items:center;gap:23px;width:88%;border:2px solid #83c5ab;border-radius:36px;background:linear-gradient(#b6e8cf,#6ab9a4);box-shadow:0 5px 0 #4a8a8059,0 9px 0 #7ba59826,inset 0 2px 0 #e4f7dc;color:#153f49;padding:12px;font-size:24px!important;font-weight:bold!important}
.home-play:active{transform:translateY(2px);box-shadow:0 3px 0 #58998d}
.home-input-help{font-size:11px;font-weight:bold;color:#315c64;margin:10px 0 0;text-align:center}
.home-bottom{width:min(720px,100%);flex:none}
.home-tip-grid,.home-upgrade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.home-tip-grid article,.home-upgrade-grid article{display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(140deg,#fffef3,#edf3e4);border:5px solid #f8fce9;border-radius:36px;padding:9px 10px 14px;box-shadow:0 6px 0 #63949047,0 11px 0 #678e961a;min-width:0}
.home-tip-grid h3,.home-upgrade-grid h3{border-radius:24px;background:#d7ead4;padding:8px 3px;width:100%;font-size:16px;line-height:1.15;margin:0;color:#173f49}
.home-tip-art,.home-upgrade-art{display:block;width:clamp(54px,9vh,100px);height:clamp(54px,9vh,100px);margin:9px 0 6px}
.home-tip-art svg,.home-tip-art img,.home-upgrade-art svg,.home-upgrade-art img{width:100%;height:100%;object-fit:contain}
.home-tip-grid p,.home-upgrade-grid p{font-size:11px;font-weight:bold;color:#345e63;line-height:1.3;margin:3px 0 0}
.home-upgrade-level{display:flex;justify-content:space-around;width:90%;border-radius:22px;background:linear-gradient(#95c4b7,#639d94);border:2px solid #86b5a5;box-shadow:inset 0 2px 0 #e8f4dc5e;padding:4px;color:#fff6dd;font-size:17px;font-weight:bold}
.home-upgrade-grid p{font-size:10px;min-height:25px;margin:5px 0}
.home-upgrade-grid button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:2px solid #b4dac0;background:linear-gradient(#d2efda,#93cbb2);color:#244e53;border-radius:26px;min-height:43px;font-size:13px;font-weight:bold;box-shadow:0 4px 0 #759e8e4d,inset 0 2px 0 #fff7dd88}
.home-upgrade-grid button.video{background:linear-gradient(#ffe8ac,#f0c36a);border-color:#f4cf7c;color:#674719}.home-upgrade-grid button svg{width:28px;height:23px;flex:none}
.dragon-home-layout #dragon-mode-picker,.dragon-home-layout #dragon-infinity-guide{display:none!important}
.dragon-transition #dragon-home{visibility:hidden}
@media(max-width:600px){
.home-logo{height:72px;margin-left:0}
 #dragon-home{padding:14px 10px max(18px,env(safe-area-inset-bottom));gap:10px}
 .home-header{min-height:103px}.home-brand{padding:8px 110px 0 4px;text-align:left}.home-brand h1{font-size:18px;max-width:220px;line-height:1.2}.home-brand p{font-size:10px;max-width:180px}
 .home-account{right:3px;gap:9px}.home-account>button{width:43px;height:43px}.home-account>.home-daily-entry{top:124px}.home-wallet{min-width:109px;height:34px;gap:9px;padding-left:14px}.home-wallet svg{width:43px;height:43px}.home-wallet b{font-size:18px}
 .home-stage{grid-template-columns:73px minmax(0,1fr) 30px;height:210px;min-height:210px;flex:none}.home-navigation{gap:20px}.home-nav-art{width:59px;height:59px}.home-navigation b{font-size:14px}.home-navigation small{font-size:9px;max-width:70px;line-height:1.35}
 .home-orbit{min-height:160px}.home-hero-bottom h2{font-size:14px;padding:4px 20px}.home-hero-bottom p{font-size:10px}
 .home-launch{width:min(390px,94%)}.home-mode-switch button{font-size:12px;padding:9px 4px}.home-mode-description{font-size:10px;margin:9px 0}.home-play{font-size:21px!important;padding:10px}.home-input-help{font-size:10px;margin-top:9px}
 .home-tip-grid,.home-upgrade-grid{gap:8px}.home-tip-grid article,.home-upgrade-grid article{padding:6px 5px 10px;border-width:4px;border-radius:27px}
 .home-tip-grid h3,.home-upgrade-grid h3{font-size:12px;min-height:38px;display:grid;place-items:center;padding:5px 2px}
 .home-tip-art,.home-upgrade-art{width:60px;height:60px;margin:7px 0 3px}.home-tip-grid p{font-size:10px;min-height:27px}.home-upgrade-grid p{font-size:9px;min-height:27px}.home-upgrade-level{font-size:15px;width:95%}
 .home-upgrade-grid button{font-size:10px;gap:3px;min-height:39px;border-width:1px}.home-upgrade-grid button svg{width:20px;height:18px}
}
@media(min-width:601px) and (max-height:760px){
.home-logo{height:52px}
 #dragon-home{padding-top:12px;gap:8px}.home-header{min-height:63px}.home-brand h1{font-size:23px}.home-account{flex-direction:row;align-items:center}.home-stage{height:clamp(190px,26vh,220px);min-height:190px;flex:none}.home-orbit{min-height:135px}.home-nav-art{width:57px;height:57px}.home-navigation{gap:13px}.home-navigation b{font-size:15px}
 .home-mode-switch button{padding:7px}.home-mode-description{margin:8px 0}.home-play{padding:9px;font-size:21px!important}.home-tip-art,.home-upgrade-art{width:60px;height:60px}.home-tip-grid h3,.home-upgrade-grid h3{font-size:14px;padding:5px}.home-tip-grid article,.home-upgrade-grid article{padding:7px}.home-upgrade-grid button{min-height:36px}
}

#dragon-collection{position:fixed;inset:0;z-index:8;background:#153b4dc9;display:grid;place-items:center;padding:20px}
.collection-shell{width:min(1100px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:linear-gradient(140deg,#fffdf5,#eaf1e4);border:5px solid #f8fbea;border-radius:36px;padding:20px;box-shadow:0 8px 0 #779a9c50;overflow:auto}
.collection-shell>header{display:flex;align-items:center;gap:18px;flex:none;padding:0 3px 17px}.collection-shell h1{font-size:26px;margin:5px 0 0}.collection-shell>header small{font-size:10px;letter-spacing:.15em;color:#4e7872}.collection-wallet{margin-left:auto;font-size:14px;font-weight:bold}.collection-shell button{color:#173f49;border:1px solid #bfdaca;background:#e5f0de;border-radius:20px;padding:10px;font-weight:bold}.collection-shell>header button{font-size:25px;padding:4px 14px}
.collection-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;min-height:0}.collection-showcase{background:radial-gradient(ellipse at 50% 20%,var(--skin-light),var(--skin-top));border-radius:28px;color:#fff8df;text-align:center;padding:15px;align-self:start}.collection-showcase canvas{width:100%;height:300px;display:block}.collection-showcase h2{font-size:28px;margin:0}.collection-family{font-size:12px}.collection-actions{display:grid;gap:10px;margin:20px 0 15px}.collection-actions button{display:flex;justify-content:center;align-items:center;gap:8px;background:linear-gradient(#c0ead7,#82c9b2);box-shadow:0 4px 0 #1d45595c;font-size:16px;min-height:44px}.collection-actions button:disabled{opacity:.65;cursor:default}.collection-actions [data-action=trial]{background:linear-gradient(#ffe8ad,#f1c56a);border-color:#ebcb82;color:#64451e}.skin-video{width:26px;height:22px}.collection-showcase>small{font-size:11px}
.collection-list{min-height:0;display:flex;flex-direction:column}.collection-list nav{display:flex;gap:7px;flex:none;margin-bottom:13px}.collection-list nav button{font-size:12px;flex:1}.collection-list [aria-pressed=true]{background:#91cfb8;border-color:#4e9d8e}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:auto;max-height:570px;padding:3px 3px 10px}.collection-grid .collection-card{min-width:0;padding:7px;border-radius:24px;background:#f8f9ed;box-shadow:0 4px 0 #a7c5b84d}.collection-card.selected{border:2px solid #458c83;background:#e2f2e5}.collection-picture{display:block;aspect-ratio:1;overflow:hidden;border-radius:18px}.collection-picture svg{width:100%;height:100%;display:block}.collection-card b,.collection-card small{display:block;margin-top:5px}.collection-card b{font-size:14px}.collection-card small{font-size:10px;color:#3f6b6b}

@media(max-width:760px){.collection-layout{grid-template-columns:1fr}.collection-shell{padding:12px;max-height:calc(100dvh - 20px)}.collection-shell h1{font-size:21px}.collection-wallet{font-size:11px}.collection-showcase canvas{height:220px}.collection-actions{grid-template-columns:1fr 1fr;margin:12px 0}.collection-actions button{font-size:12px}.collection-showcase h2{font-size:23px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}#dragon-collection{padding:10px}}
/* Timed unlock details and podium collection. */
.collection-duration{display:inline-block;border:1px solid #e5dcb48c;border-radius:20px;padding:7px 18px;background:#173f4970;color:#fff1cb;font-size:15px}
.collection-once{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(#ffe7ac,#eac46d)!important;color:#634621!important;margin-bottom:10px}
.collection-rule{font-size:12px;line-height:1.6;color:#f4f7e9;max-width:370px;margin:12px auto}
.collection-ad-progress{display:block;width:90%;height:12px;margin:13px auto;accent-color:#f4cc77;border-radius:20px;overflow:hidden}
.collection-ad-progress[hidden]{display:none}
.collection-showcase .collection-base{display:block;margin:6px auto 15px;background:#ffffff13;border-color:#e7eee46b;color:#fff4da;font-size:12px}
.collection-card .skin-rarity{display:inline-block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:12px;background:#dbeadd;color:#284e50;margin-top:6px}
.collection-grid .honor-card{border:2px solid #bfa263;background:linear-gradient(140deg,#fff3ca,#ece8d6)}
.collection-grid .honor-2{border-color:#8ca6b8;background:linear-gradient(140deg,#f0f8ff,#dfe5ee)}
.collection-grid .honor-3{border-color:#b08363;background:linear-gradient(140deg,#ffe9d5,#e9ded0)}
.collection-list nav button{min-height:40px}
.collection-picture{position:relative;background:#e1eddf}
.collection-picture img{display:block;width:100%;height:100%;object-fit:contain}
.collection-picture:not([data-loaded])::after{content:'Loading…';position:absolute;inset:0;display:grid;place-items:center;color:#527773;font-size:12px;pointer-events:none}
.collection-picture[data-failed]::after{content:'Image unavailable'}
.collection-picture[data-failed] img{visibility:hidden}
@media(max-width:760px){.collection-rule{font-size:11px}.collection-duration{font-size:13px}.collection-actions{grid-template-columns:1fr}.collection-showcase canvas{height:210px}}