/* Dragon collection: reusable vector artwork, no external fonts or dependencies. */
.dragon-icon { width:40px; height:40px; object-fit:contain; vertical-align:middle; flex:none; }
.fragment-reward { display:inline-flex; align-items:center; gap:4px; padding:3px 9px 3px 3px; border:1px solid #edc77c; border-radius:999px; background:#fff5d9; color:#824109; font-size:.8rem; font-weight:750; white-space:nowrap; vertical-align:middle; }
.fragment-reward .dragon-icon { width:27px; height:27px; }
.fragment-check { display:none; }
.fragment-reward.is-ready { background:#fff0ba; border-color:#d68e13; box-shadow:0 0 14px #ffc94e45; }
.fragment-reward.is-ready .fragment-check { display:inline; }
.fragment-preview { display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fff7df; border:1px solid #f1d59a; border-radius:12px; color:#78440e; font-weight:650; margin-top:20px; }
.dragon-counts { display:flex; align-items:center; gap:14px; }
.dragon-counts > span { display:grid; grid-template-columns:32px auto; column-gap:5px; align-items:center; min-width:64px; }
.dragon-counts .dragon-icon { grid-row:1/3; width:32px; height:32px; }
.dragon-counts b { line-height:1.1; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.dragon-counts small { font-size:.7rem; line-height:1.3; opacity:.8; }
.rank-rewards { display:flex; align-items:center; gap:16px; flex:none; }
.rank-rewards .dragon-counts { border-left:1px solid #eadfcf; padding-left:14px; color:#8b4f0d; gap:8px; }
.dragon-board-note { display:flex; align-items:center; justify-content:center; gap:10px; font-size:.86rem; color:#8a5412; padding:10px; background:#fff6e3; border-radius:12px; }
.dragon-panel { padding:26px; border:1px solid #48525e; border-radius:18px; color:#f8ecd4; margin:18px 0; background:radial-gradient(ellipse at 90% 0,#57402466,transparent 55%),linear-gradient(135deg,#15242d,#101924); overflow:hidden; }
.dragon-panel-head { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.dragon-panel h2 { font-size:1.35rem; margin:0; letter-spacing:.06em; }
.dragon-eyebrow { color:#d9ae65; font-size:.75rem; letter-spacing:.1em; margin:0 0 4px; }
.dragon-sockets { display:flex; gap:22px; justify-content:center; margin:22px 0 14px; }
.dragon-socket { display:flex; flex-direction:column; align-items:center; color:#b7b8b3; gap:5px; font-size:.75rem; }
.dragon-socket .dragon-icon { width:72px; height:72px; opacity:.22; filter:grayscale(1); }
.dragon-socket.is-collected .dragon-icon { opacity:1; filter:drop-shadow(0 0 12px #ffaf3955); }
.dragon-socket.is-collected { color:#ffcf71; }
.dragon-rule { text-align:center; font-size:.86rem; color:#e2d3b9; }
.dragon-progress { height:7px; overflow:hidden; background:#ffffff14; border-radius:10px; }
.dragon-progress > span { display:block; height:100%; background:linear-gradient(90deg,#db861a,#ffe299); border-radius:10px; }
.dragon-progress-caption { display:flex; justify-content:space-between; gap:10px; margin-top:7px; color:#cfbd9d; font-size:.73rem; }
.dragon-unlock-note { font-weight:600; color:#ffdfa1; margin:18px 0 12px; }
.btn.dragon-btn { background:linear-gradient(115deg,#f7d18a,#efae48); color:#392711; border-color:#ffd994; box-shadow:0 5px 24px #ecb4431f; }
.dragon-fine { color:#a5b4ba; font-size:.72rem; margin:14px 0 0; }
/* Dream wishing pool */
.wish-page { max-width:1150px; margin:0 auto; padding:28px 22px 70px; }
.wish-page > .wish-back { color:#775219; font-size:.85rem; }
.wish-hero { margin-top:18px; color:#f1e6ce; background:radial-gradient(ellipse at 40% 30%,#244d4944,transparent 55%),linear-gradient(145deg,#152a30,#0c1521 75%); border:1px solid #3d494c; border-radius:24px; padding:34px; overflow:hidden; }
.wish-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.wish-heading h1 { font-size:clamp(1.7rem,4vw,2.5rem); font-weight:750; letter-spacing:.1em; margin:5px 0 8px; }
.wish-heading p { margin:0; color:#b5c8c5; font-size:.85rem; }
.wish-heading .dragon-counts { color:#f7d38e; }
.wish-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:30px; align-items:center; margin-top:28px; }
.wish-scene { position:relative; height:540px; isolation:isolate; }
.wish-halo { position:absolute; width:78%; aspect-ratio:1; border:1px solid #d2a94c38; border-radius:50%; left:11%; top:40px; box-shadow:0 0 0 24px #d2a94c05,0 0 0 25px #d2a94c10; }
.wish-halo:after { content:'✦'; position:absolute; top:-17px; left:calc(50% - 12px); font-size:24px; color:#d9bc76; }
.wish-dragon { position:absolute; width:100%; height:460px; object-fit:contain; bottom:67px; left:0; opacity:.17; filter:saturate(.2); transform:translateY(35px) scale(.93); transition:opacity 1.2s,transform 1.8s,filter 1.2s; z-index:3; }
.wish-pool { position:absolute; left:10%; right:10%; height:82px; border-radius:50%; bottom:44px; background:radial-gradient(ellipse,#99ebd8aa,#217c7299 40%,#102c34 66%); border:8px solid #918269; box-shadow:0 12px 0 #514b41,0 19px 0 #383d3c,0 35px 35px #03070f99,inset 0 0 18px #b8ffe777; z-index:4; }
.wish-pool:before,.wish-pool:after { content:''; position:absolute; inset:15%; border:1px solid #d2fff29c; border-radius:50%; }
.wish-pool:after { inset:32%; }
.wish-orbits { position:absolute; bottom:0; left:0; width:100%; display:flex; justify-content:center; gap:18px; z-index:5; }
.wish-orbits .dragon-icon { width:60px; height:60px; filter:drop-shadow(0 0 15px #ffb33244); }
.wish-orbits .dragon-icon:nth-child(2) { transform:translateY(9px); }
.wish-stardust { position:absolute; inset:0; z-index:2; pointer-events:none; }
.wish-stardust span { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff2bc; box-shadow:0 0 9px #ffd585; left:var(--x); top:var(--y); opacity:.6; }
.wish-card-wrap { perspective:1100px; }
.wish-card { height:310px; position:relative; transform-style:preserve-3d; transition:transform 1.5s cubic-bezier(.2,.7,.2,1); }
.wish-card-front,.wish-card-back { position:absolute; inset:0; border:1px solid #bd9b57; border-radius:16px; padding:26px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; backface-visibility:hidden; background:linear-gradient(145deg,#283e43,#142830); box-shadow:inset 0 0 0 7px #1a2f35,inset 0 0 0 8px #ad874844,0 18px 38px #030a1166; }
.wish-card-front:before,.wish-card-back:before { content:'✦'; position:absolute; top:16px; color:#e6c887; }
.wish-card-front .dragon-icon { width:85px; height:85px; margin:12px 0; }
.wish-card h2 { color:#f4d89a; font-size:1.45rem; letter-spacing:.12em; margin:14px 0 5px; }
.wish-card p { color:#c5d5d0; font-size:.86rem; margin:5px 0; }
.wish-card small { color:#ddba77; letter-spacing:.22em; }
.wish-card-back { transform:rotateY(180deg); background:radial-gradient(ellipse at top,#54706288,transparent),#173033; }
.wish-card-seal { font-size:2.4rem; color:#ffdf99; border:1px solid #cbaa6a; width:78px; height:78px; line-height:78px; border-radius:50%; margin-top:8px; }
.wish-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.wish-actions .btn { white-space:normal; }
.wish-status { min-height:2.5em; font-size:.83rem; color:#ddc18e; text-align:center; }
.wish-write { margin-top:24px; padding-top:22px; border-top:1px solid #b39b622f; }
.wish-write label { color:#eee1c4; font-size:.9rem; }
.wish-write textarea { color:#eef2e5; background:#ffffff08; border-color:#708778; }
.wish-write textarea::placeholder { color:#91a79f; }
.wish-write .small { color:#bacac3; }
.wish-locked { text-align:center; color:#bcd0c5; padding-top:20px; }
.wish-locked .btn { margin-top:15px; }
.wish-hero.is-summoned .wish-dragon { opacity:1; filter:drop-shadow(0 0 19px #90f0ba44); transform:translateY(0) scale(1); }
.wish-hero.is-summoned .wish-card { transform:rotateY(180deg); }
.wish-hero.is-summoned .wish-halo { box-shadow:0 0 55px #c9a44920,0 0 0 24px #d2a94c05,0 0 0 25px #d2a94c28; }
.wish-hero.is-summoned .wish-pool:before { animation:pool-ripple 3s ease-out 3; }
.wish-hero.is-summoned .wish-stardust span { animation:dust-rise 4s ease-out 2; animation-delay:var(--delay); }
@keyframes pool-ripple { from { transform:scale(.3); opacity:1; } to { transform:scale(1.4); opacity:0; } }
@keyframes dust-rise { from { transform:translateY(60px); opacity:0; } 40% { opacity:1; } to { transform:translateY(-45px); opacity:0; } }
@media(max-width:760px) {
 .rank-row { flex-wrap:wrap; }
 .rank-main { min-width:150px; }
 .rank-rewards { margin-left:auto; gap:12px; }
 .wish-layout { grid-template-columns:1fr; gap:20px; }
 .wish-scene { height:450px; max-width:450px; width:100%; margin:auto; }
 .wish-dragon { height:385px; }
 .wish-hero { padding:24px; }
 .wish-card-wrap { max-width:450px; width:100%; margin:auto; }
}
@media(max-width:480px) {
 .rank-row { display:grid; grid-template-columns:24px 40px minmax(0,1fr); }
 .rank-row > .avatar { width:40px; height:40px; }
 .rank-main { min-width:0; }
 .rank-rewards { grid-column:2/4; width:100%; justify-content:flex-end; }
 .rank-rewards .rank-count { margin-right:auto; text-align:left; width:auto; font-size:.8rem; }
 .rank-rewards .dragon-counts { padding-left:10px; }
 .dragon-panel { padding:18px; }
 .dragon-panel-head { flex-wrap:wrap; gap:12px; }
 .dragon-sockets { gap:16px; }
 .dragon-progress-caption { font-size:.68rem; }
 .wish-page { padding:18px 12px 45px; }
 .wish-hero { padding:20px 15px; }
 .wish-heading { flex-wrap:wrap; }
 .wish-heading .dragon-counts { margin-top:8px; }
 .wish-scene { height:395px; }
 .wish-dragon { height:330px; bottom:62px; }
 .wish-card { height:285px; }
 .wish-card-front,.wish-card-back { padding:24px 18px; }
 .fragment-reward { font-size:.73rem; }
}
@media(prefers-reduced-motion:reduce) {
 .wish-dragon,.wish-card { transition:none; }
 .wish-hero.is-summoned .wish-pool:before,.wish-hero.is-summoned .wish-stardust span { animation:none; }
}
.wish-no-motion .wish-dragon,.wish-no-motion .wish-card { transition:none; }
.wish-no-motion .wish-stardust span,.wish-no-motion .wish-pool:before { animation:none !important; }

.wish-hero[data-unlocked="0"] .wish-orbits { filter:grayscale(1); opacity:.28; }

.fragment-fraction { display:block; font-size:.62rem; font-weight:500; line-height:1.2; opacity:.85; }

/* One-shot rewards after a successful increase, never ambient animation. */
.dragon-reward-toast { position:fixed; right:24px; bottom:24px; z-index:1000; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:18px; border:1px solid #f6cc75; border-radius:18px; background:#193b35; color:#ffe4a9; box-shadow:0 12px 45px #0005; animation:reward-enter .45s ease-out both; }
.dragon-reward-toast p { margin:5px 0 0; font-size:.8rem; color:#f2e2c6; }
.dragon-reward-toast button { align-self:flex-start; border:0; background:transparent; color:#ffe4a9; cursor:pointer; font-size:24px; padding:0 4px; }
.dragon-reward-art { position:relative; width:64px; height:72px; flex:none; }
.dragon-reward-art .dragon-icon { position:absolute; width:64px; height:64px; left:0; top:0; }
.reward-shard { animation:reward-shard .8s ease-out both; }
.is-fusion .reward-shard { animation:reward-fuse 1.2s ease-in both; }
.is-fusion .reward-orb { animation:reward-orb .9s 1s ease-out both; }
.reward-count-pop { animation:reward-count .7s .3s ease-out both; }
@keyframes reward-enter { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes reward-shard { from { opacity:0; transform:translateY(20px) rotate(-25deg) scale(.3); } 65% { transform:translateY(-5px) rotate(8deg) scale(1.12); } to { opacity:1; transform:none; } }
@keyframes reward-fuse { 0% { opacity:0; transform:rotate(-35deg) scale(.3); } 35% { opacity:1; transform:rotate(0) scale(1.15); filter:drop-shadow(0 0 10px #ffcd66); } 100% { opacity:0; transform:rotate(100deg) scale(.1); } }
@keyframes reward-orb { from { opacity:0; transform:scale(.1); } 60% { opacity:1; transform:scale(1.22); filter:drop-shadow(0 0 18px #ffd66b); } to { opacity:1; transform:scale(1); filter:drop-shadow(0 0 6px #ffce66); } }
@keyframes reward-count { 50% { transform:scale(1.18); color:#dd910e; } }
@media(max-width:480px) { .dragon-reward-toast { right:16px; bottom:16px; padding:12px; gap:8px; } }
@media(prefers-reduced-motion:reduce) {
 .dragon-reward-toast,.reward-shard,.is-fusion .reward-shard,.is-fusion .reward-orb,.reward-count-pop { animation:none; }
 .is-fusion .reward-shard { visibility:hidden; }
}

/* Keep collection and wish cards inside narrow or enlarged-text layouts. */
.dragon-counts, .rank-rewards { flex-wrap:wrap; max-width:100%; }
.dragon-counts > span { min-width:0; }
.dragon-panel-head, .wish-heading { flex-wrap:wrap; }
.wish-card { display:grid; height:auto; min-height:310px; }
.wish-card-front, .wish-card-back { position:relative; grid-area:1/1; min-width:0; }
.wish-card-front:before, .wish-card-back:before { top:6px; }
.wish-card-front small { margin-top:12px; }
.dragon-sockets { gap:12px; }
.dragon-socket .dragon-icon { width:min(72px,16vw); height:min(72px,16vw); }
@media(max-width:560px) {
 .rank-main { min-width:0; flex-basis:calc(100% - 95px); }
 .rank-rewards { width:100%; justify-content:flex-end; }
 .dragon-panel { padding:18px; }
 .fragment-preview { align-items:flex-start; padding:12px; }
 .wish-card-front, .wish-card-back { padding:26px 16px; }
}