/* Content-based layouts replace bitmap-positioned controls. */
html body .rel-overlay{font:14px/1.5 system-ui,sans-serif;background:color-mix(in srgb, var(--ui-panel) 79%, transparent)}
html body .rel-dialog{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--ui-line);background:linear-gradient(155deg,var(--ui-panel),var(--ui-panel) 45%);border-radius:24px}
html body .rel-dialog *{box-sizing:border-box;min-width:0}
html body .rel-page>.rel-dialog{width:100%;height:100dvh;max-height:none;border-radius:0}
html body .rel-dialog>header{background:color-mix(in srgb, var(--ui-panel) 91%, transparent);border-bottom:1px solid var(--ui-line);padding:16px;gap:10px}
html body .rel-page>.rel-dialog>header{padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
html body .rel-dialog h2{font-size:20px;line-height:1.3;letter-spacing:-.5px}
html body .rel-body{padding:18px;min-height:0;overflow:auto;overscroll-behavior:contain}
html body .rel-page>.rel-dialog>.rel-body{padding:18px 16px calc(24px + env(safe-area-inset-bottom))}
html body .rel-body button:not(.rel-avatar){font:inherit;cursor:pointer;touch-action:manipulation}
html body .rel-body button:focus-visible{outline:3px solid var(--ui-line);outline-offset:3px}
html body .rel-body button:disabled{cursor:default;opacity:.48}
html body .rel-body .rel-primary{background:linear-gradient(120deg,var(--ui-primary),var(--ui-danger-bg))!important;border:1px solid var(--ui-line)!important;min-height:44px!important}
html body .rel-body .rel-note{font-size:12px;color:var(--ui-muted);line-height:1.65}
html body .rel-home-dashboard{max-width:720px;display:grid;gap:18px}
html body .rel-home-dashboard section{border:1px solid var(--ui-line);border-radius:24px;padding:18px;background:var(--ui-panel)}
html body .rel-home-dashboard h3{font-size:19px;line-height:1.3;margin:0;letter-spacing:-.4px}
html body .rel-home-heading,html body .rel-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
html body .rel-home-heading small{display:block;font-size:9px;color:var(--ui-gold);letter-spacing:1.6px;margin-bottom:6px}
html body .rel-day-chip{white-space:nowrap;border:1px solid var(--ui-line);border-radius:14px;padding:8px 12px;color:var(--ui-ink);font-size:12px;background:color-mix(in srgb, var(--ui-button) 7%, transparent)}
html body .rel-partners{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
html body .rel-partner{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;background:color-mix(in srgb, var(--ui-panel) 2%, transparent);border:1px solid var(--ui-line)}
html body .rel-partner .rel-avatar{width:48px;height:48px;flex:0 0 48px}
html body .rel-partner .rel-partner-name{padding:0!important;min-height:44px!important;border:0!important;background:transparent!important;text-align:left;overflow-wrap:anywhere;font-size:13px!important}
html body .rel-home-art{position:relative;display:grid;justify-items:center;padding:8px 0 0;background:radial-gradient(ellipse at center,color-mix(in srgb, var(--ui-button) 14%, transparent),transparent 70%)}
html body .rel-home-art>img{display:block;width:100%;height:clamp(200px,50vw,340px);object-fit:contain}
html body .rel-level-badge{display:flex;align-items:center;gap:8px;margin:-14px 0 16px;padding:6px 14px 6px 8px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-panel);color:var(--ui-gold);font-weight:700}
html body .rel-level-badge img{width:46px;height:46px;object-fit:contain}
html body .rel-home-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}
html body .rel-home-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px!important;border:1px solid var(--ui-line)!important;background:var(--ui-raised)!important;border-radius:15px!important;padding:10px!important;font-size:12px!important}
html body .rel-home-controls .rel-home-ring img{width:28px;height:28px;object-fit:contain}
html body .rel-section-head>span{font-size:11px;color:var(--ui-gold)}
html body .rel-material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html body .rel-material-grid .rel-material-card{display:grid;justify-items:center;gap:7px;width:100%;padding:10px 8px!important;border:1px solid var(--ui-line)!important;background:linear-gradient(150deg,var(--ui-raised),var(--ui-raised))!important;border-radius:18px!important}
html body img.rel-material-preview{display:block;width:100%;height:82px;object-fit:contain}
html body .rel-body>img.rel-material-preview{width:150px;height:150px;margin:0 auto}
html body .rel-material-card b{font-size:13px}
html body .rel-material-card span,html body .rel-material-card small{font-size:10px;color:var(--ui-muted);overflow-wrap:anywhere;text-align:center}
html body .rel-material-card .rel-bar{width:100%;height:5px;margin:3px 0}
html body .rel-stock{margin:14px 0 0;font-size:11px;color:var(--ui-ink);overflow-wrap:anywhere}
html body .rel-level-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}
html body .rel-level-grid .rel-level-tile{display:grid;justify-items:center;gap:3px;padding:8px 4px!important;border:1px solid var(--ui-line)!important;border-radius:15px!important;background:color-mix(in srgb, var(--ui-panel) 1%, transparent)!important}
html body .rel-level-tile img{width:100%;height:64px;object-fit:contain}
html body .rel-level-tile b{font-size:12px;color:var(--ui-gold)}
html body .rel-level-tile small{font-size:9px;color:var(--ui-gold)}
html body .rel-level-grid .current{border-color:var(--ui-line)!important;background:color-mix(in srgb, var(--ui-button) 7%, transparent)!important}
html body .rel-level-tile.locked img{filter:saturate(.4);opacity:.62}
html body .rel-reward-summary{color:var(--ui-gold);font-size:12px;margin-bottom:12px}
html body .rel-reward-filters{display:flex;gap:7px;overflow:auto;margin-bottom:16px;padding-bottom:4px}
html body .rel-reward-filters button{flex:0 0 auto;white-space:nowrap;font-size:11px!important;min-height:44px!important}
html body .rel-reward-filters [aria-pressed=true]{border-color:var(--ui-line)!important;background:color-mix(in srgb, var(--ui-button) 33%, transparent)!important}
html body .rel-reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body .rel-reward-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--ui-line);border-radius:19px;background:var(--ui-raised)}
html body .rel-reward-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:10px;color:var(--ui-ink)}
html body .rel-reward-top img{width:34px;height:34px;object-fit:contain}
html body .rel-reward-top small{margin-left:auto;color:var(--ui-gold);font-size:9px}
html body .rel-body .rel-reward-preview{display:grid;place-items:center;min-height:120px!important;width:100%;border:1px solid var(--ui-line)!important;background:var(--ui-raised)!important;padding:8px!important;border-radius:13px!important}
html body .rel-reward-preview img{width:100%;height:130px;object-fit:contain}
html body .rel-reward-card>b{font-size:13px}
html body .rel-reward-card>small{font-size:10px;color:var(--ui-gold)}
html body .rel-reward-card>button:last-child{margin-top:auto}
html body .rel-reward-card.locked .rel-reward-preview img{opacity:.65}
html body .rel-reward-large{display:block;width:100%;height:min(55dvh,420px);object-fit:contain}
html body .rel-house-menu{top:100%;left:16px;z-index:5;max-width:calc(100vw - 32px)}
html body .rel-rings{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html body .rel-ring-choice{border-radius:16px!important;min-height:140px!important;background:var(--ui-panel)!important}
html body .rel-ring-choice>img{height:96px}
@media(max-width:370px){html body .rel-home-dashboard section{padding:12px}html body .rel-partner{flex-direction:column;text-align:center;padding:9px}html body .rel-partner .rel-partner-name{text-align:center;font-size:11px!important}html body .rel-material-grid{gap:6px}html body img.rel-material-preview{height:65px}html body .rel-level-tile img{height:48px}html body .rel-reward-grid{gap:8px}html body .rel-reward-card{padding:9px}}

html body .rel-welcome{text-align:center;padding:24px 18px;border:1px solid var(--ui-line);border-radius:24px;background:radial-gradient(ellipse at top,color-mix(in srgb, var(--ui-button) 21%, transparent),transparent 75%),var(--ui-panel)}html body .rel-welcome>img{display:block;width:110px;height:110px;object-fit:contain;margin:0 auto 12px}html body .rel-welcome small{color:var(--ui-gold);font-size:10px;letter-spacing:2px}html body .rel-welcome h3{font-size:23px;margin:10px 0 0;line-height:1.3}