/* Collection stays native-dialog based so touch, keyboard and Android Back agree. */
.dd-avatar-reward { display:inline-flex; position:relative; width:100%; height:100%; aspect-ratio:1; padding:3px; border-radius:27%; background:var(--avatar-tier); vertical-align:middle; }
.dd-avatar-reward>.dd-avatar-art { width:100%; height:100%; object-fit:cover; border-radius:24%; }
.dd-avatar-level { position:absolute; right:-2px; bottom:-2px; display:grid; place-items:center; min-width:18px; height:18px; padding-inline:3px; border-radius:6px; background:var(--avatar-tier); color:#fff; font:800 11px/1 system-ui,sans-serif; border:1px solid #fff; }
.dd-avatar-reward[data-avatar-tier="4"] .dd-avatar-level { color:#182537; background:#ffd17b; }
.dd-avatar-reward[data-avatar-tier="1"] .dd-avatar-level { background:#226d64; }
.dd-avatar-reward[data-avatar-tier="5"],.dd-avatar-mystery[data-avatar-tier="5"] { background:#252c3a; border:1px solid #ae744a; }
:is(.dd-avatar-reward,.dd-avatar-mystery)[data-avatar-tier="5"] .dd-avatar-level { background:#59352e; color:#ffe0b8; border-color:#e4bc97; }
.dd-avatar-mystery[data-avatar-tier="5"]>svg { background:#222c40; color:#e4bc97; }
body.dd-pro .avatar-picker-dialog { width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); padding:0; border:0; border-radius:22px; color:var(--dd-ink,#202f47); background:var(--dd-surface,#fff); overflow:auto; box-shadow:0 16px 50px #0c1b3740; }
body.dd-pro .avatar-picker-dialog::backdrop { background:#101c35a6; }
body.dd-pro .avatar-picker-heading { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 20px; background:var(--dd-surface,#fff); border-bottom:1px solid var(--dd-edge,#dfe4eb); }
.avatar-picker-heading h2 { margin:0; font-size:23px; }
.avatar-picker-heading p { margin:4px 0 0; color:var(--dd-muted,#5d6c83); font-size:13px; }
body.dd-pro .avatar-picker-close { flex:none; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:12px; background:var(--dd-soft,#eaf0fa); color:var(--dd-ink,#202f47); font-size:26px; }
.avatar-box-summary { display:flex; gap:12px; align-items:center; padding:16px 20px; background:var(--dd-soft,#eaf0fa); }
.avatar-box-mini { width:48px; height:48px; flex:none; }
.avatar-box-mini img { width:100%; height:100%; object-fit:contain; }
.avatar-box-summary>div { display:grid; gap:4px; min-width:0; flex:1; }
.avatar-box-summary strong { font-size:14px; }
.avatar-box-summary span:not(.avatar-box-mini) { color:var(--dd-muted,#5d6c83); font-size:12px; line-height:1.5; }
.avatar-box-summary>.btn { min-height:44px; padding:9px 12px; white-space:normal; }
.avatar-box-odds { margin:0;padding:0 20px 10px;border-bottom:1px solid var(--dd-edge,#dfe4eb);color:var(--dd-ink,#202f47);font-size:13px; }
.avatar-box-odds summary { min-height:44px;padding:12px 0;cursor:pointer;font-weight:650; }
.avatar-box-odds p { margin:0 0 10px;color:var(--dd-muted,#5d6c83);font-size:12px;line-height:1.5; }
.avatar-box-odds dl { display:grid;gap:5px;margin:0 0 4px; }
.avatar-box-odds dl>div { display:flex;justify-content:space-between;gap:16px; }
.avatar-box-odds dt { display:flex;gap:8px;align-items:center; }
.avatar-box-odds dt i { width:8px;height:8px;flex:none;border-radius:50%;background:var(--avatar-tier); }
.avatar-box-odds dd { margin:0;font-weight:750;font-variant-numeric:tabular-nums; }
.avatar-tier-tabs { display:flex; flex-wrap:wrap; gap:5px; padding:16px 16px 8px; }
.avatar-tier-tabs button,.avatar-family-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 10px; border:1px solid var(--dd-edge,#dfe4eb); border-radius:10px; background:var(--dd-surface,#fff); color:var(--dd-ink,#202f47); font:650 13px/1.3 system-ui,sans-serif; cursor:pointer; }
.avatar-tier-tabs button[aria-pressed="true"],.avatar-family-tabs button[aria-pressed="true"] { background:#254671; color:#fff; border-color:#254671; }
.avatar-tier-tabs i { width:8px; height:8px; border-radius:50%; background:var(--avatar-tier); border:1px solid currentColor; }
.avatar-family-tabs { display:flex; gap:6px; padding:0 16px; }
.avatar-family-tabs button { flex:1; }
.avatar-tier-note { margin:12px 20px 0; color:var(--dd-muted,#5d6c83); font-size:12px; }
.avatar-picker-status { margin:8px 20px; font-size:13px; color:var(--dd-ink,#202f47); }
.avatar-picker-status:empty { display:none; }
.avatar-picker-status button { min-height:44px; border:0; border-radius:8px; color:var(--dd-ink,#202f47); background:var(--dd-soft,#eaf0fa); text-decoration:underline; padding:8px; }
body.dd-pro .avatar-picker-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:16px 20px 20px; }
body.dd-pro .avatar-picker-grid>button { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 5px; min-width:0; min-height:44px; border:1px solid transparent; border-radius:14px; color:var(--dd-ink,#202f47); background:transparent; }
body.dd-pro .avatar-picker-grid>button> :is(.dd-avatar-art,.dd-avatar-reward,.dd-avatar-legacy,.dd-avatar-mystery) { width:68px; height:68px; max-width:100%; flex:none; }
body.dd-pro .avatar-picker-grid>button>span:not(.dd-avatar-reward) { font-size:12px; line-height:1.3; text-align:center; overflow-wrap:anywhere; }
.avatar-picker-grid>button>small { color:var(--dd-muted,#5d6c83); font:400 10px/1.3 system-ui,sans-serif; }
body.dd-pro .avatar-picker-grid>button[aria-checked="true"] { background:var(--dd-soft,#eaf0fa); border-color:var(--dd-navy,#254671); }
body.dd-pro .avatar-picker-grid>button[aria-disabled="true"] { opacity:1; cursor:default; }
.dd-avatar-mystery { display:grid; place-items:center; position:relative; padding:3px; border-radius:27%; background:var(--avatar-tier); color:#c8d9f0; }
.dd-avatar-mystery>svg { width:100%; height:100%; border-radius:24%; background:#203654; }
.dd-avatar-mystery[data-avatar-tier="4"] .dd-avatar-level { color:#182537; background:#ffd17b; }
.dd-avatar-mystery[data-avatar-tier="1"] .dd-avatar-level { background:#226d64; }
body.dd-pro .avatar-picker-grid>button .avatar-picker-check { position:absolute; top:4px; right:3px; width:20px; height:20px; display:none; border-radius:7px; background:#254671; color:#fff; font-style:normal; }
body.dd-pro .avatar-picker-grid>button[aria-checked="true"] .avatar-picker-check,
body.dd-pro .avatar-picker-grid>button[aria-disabled="true"] .avatar-picker-check { display:grid; place-items:center; }
.avatar-picker-check svg { width:14px; height:14px; }
body.dd-pro .avatar-picker-actions { position:sticky; bottom:0; z-index:2; display:flex; gap:8px; align-items:center; margin:0; padding:12px 20px max(12px,env(safe-area-inset-bottom,0px)); background:var(--dd-surface,#fff); border-top:1px solid var(--dd-edge,#dfe4eb); }
.avatar-selection-name { flex:1; min-width:0; color:var(--dd-muted,#5d6c83); font-size:12px; }
.avatar-picker-actions>.btn { flex:none; width:auto; min-height:44px; padding:9px 14px; }
.avatar-picker-dialog :focus-visible { outline:3px solid var(--dd-navy,#254671); outline-offset:2px; }
.avatar-reveal { min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; text-align:center; }
.avatar-reveal-box { width:min(320px,100%); aspect-ratio:1; flex:none; }
.avatar-reveal-box>img { width:100%; height:100%; object-fit:contain; }
.avatar-reveal-opening { gap:0; padding-top:0; }
.avatar-reveal-box dd-chest-opening { display:block; width:100%; }
.avatar-reveal-portrait { width:160px; height:160px; }
.avatar-reveal h3 { margin:4px 0 0; font-size:26px; }
.avatar-reveal p { margin:0; color:var(--dd-muted,#5d6c83); font-size:14px; }
.avatar-reveal .btn { margin-top:12px; min-height:48px; }
.study-avatar-reward { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid var(--dd-edge,#dfe4eb); }
.study-avatar-reward>span { min-width:0; display:grid; gap:4px; font-size:13px; color:var(--dd-ink,#202f47); }
.study-avatar-reward small { color:var(--dd-muted,#5d6c83); line-height:1.5; }
.study-avatar-reward button { min-height:44px; border:0; border-radius:10px; padding:8px 12px; background:var(--dd-gold,#ffd17b); color:#26354c; font-weight:700; flex:none; }
.avatar-admin-tools { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--dd-edge,#dfe4eb); color:var(--dd-ink,#202f47); }
.avatar-admin-tools>div { flex:1; min-width:160px; }
.avatar-admin-tools strong { font-size:13px; }
.avatar-admin-tools p { margin:4px 0 0; color:var(--dd-muted,#5d6c83); font-size:12px; line-height:1.5; }
.avatar-admin-tools button { min-height:44px; padding:10px 12px; border:1px solid var(--dd-edge,#dfe4eb); border-radius:10px; background:var(--dd-soft,#eaf0fa); color:var(--dd-ink,#202f47); font:650 13px/1.3 system-ui,sans-serif; cursor:pointer; }
.avatar-admin-tools button:disabled { cursor:wait; opacity:.65; }
.avatar-admin-tools .avatar-admin-status { flex:1 0 100%; margin:0; }
.avatar-admin-status:empty { display:none; }
.study-planner .avatar-admin-tools { padding-inline:0; border-bottom:0; border-top:1px solid var(--dd-edge,#dfe4eb); }
.avatar-earned-notice { position:fixed; z-index:18000; right:max(16px,env(safe-area-inset-right,0px)); bottom:max(20px,env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:64px 1fr 44px; gap:4px 12px; align-items:center; width:min(390px,calc(100vw - 32px)); padding:12px; border-radius:16px; background:#213d62; color:#fff; box-shadow:0 10px 30px #0b172b40; }
.avatar-earned-notice[hidden] { display:none; }
.avatar-earned-icon { width:64px; height:64px; grid-row:span 2; }
.avatar-earned-icon img { width:100%; height:100%; object-fit:contain; }
.avatar-earned-copy { min-width:0; display:grid; gap:4px; }
.avatar-earned-copy strong { font:750 16px/1.3 system-ui,sans-serif; }
.avatar-earned-copy small { color:#d5e4f7; font:400 13px/1.45 system-ui,sans-serif; }
.avatar-earned-notice .avatar-earned-open { grid-column:2; justify-self:start; min-height:44px; padding:8px 14px; border:0; border-radius:10px; background:#ffd17b; color:#21344e; font:750 14px/1.3 system-ui,sans-serif; cursor:pointer; }
.avatar-earned-notice .avatar-earned-dismiss { grid-column:3; grid-row:1; align-self:start; width:44px; height:44px; min-height:44px; border:0; border-radius:10px; background:transparent; color:#fff; font-size:24px; cursor:pointer; }
.avatar-earned-dismiss svg { width:20px; height:20px; }
.avatar-earned-notice button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.avatar-earned-notice .avatar-earned-open:hover { background:#ffdc98; }
.avatar-earned-notice .avatar-earned-dismiss:hover { background:#ffffff17; }
@media(prefers-reduced-motion:no-preference) {
  .avatar-earned-notice { animation:avatar-notice-in .3s cubic-bezier(.16,1,.3,1) both; }
  .avatar-earned-icon { animation:avatar-earned .7s .1s cubic-bezier(.16,1,.3,1) both; }
  .avatar-reveal-portrait { animation:avatar-reward-in .4s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes avatar-notice-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes avatar-earned { 0% { transform:scale(.85) rotate(-6deg); } 55% { transform:scale(1.12) rotate(3deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes avatar-reward-in { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@media(max-width:460px) {
  body.dd-pro .avatar-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px; }
  body.dd-pro .avatar-picker-heading,body.dd-pro .avatar-picker-actions { padding-inline:12px; }
  .avatar-box-summary { display:grid; grid-template-columns:48px minmax(0,1fr); padding:12px; }
  .avatar-box-summary>.btn { grid-column:2; justify-self:start; margin:0; }
  .avatar-tier-tabs { padding-inline:12px; gap:4px; }
  .avatar-tier-tabs button { flex:1 0 28%; }
  .avatar-selection-name { display:none; }
  body.dd-pro .avatar-picker-actions>.btn { flex:1; }
}
@media(max-height:450px) and (orientation:landscape) {
  body.dd-pro .avatar-picker-heading { position:static; padding-block:8px; }
  body.dd-pro .avatar-picker-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .avatar-reveal { min-height:180px; display:grid; grid-template-columns:120px 1fr; gap:8px 20px; text-align:left; }
  .avatar-reveal-portrait { grid-row:span 4; width:120px; height:120px; }
  .avatar-reveal-box { width:200px; }
  .avatar-reveal-opening { grid-template-columns:200px 1fr; justify-content:center; padding:0 20px 12px; }
  .avatar-reveal h3 { font-size:22px; }
  .avatar-earned-notice { bottom:12px; }
}