.ug-page { --ug-accent: #c5b58e; color: #24354a; background: #faf6ec; min-height: 100vh; }
.ug-main { max-width: 1240px; margin: auto; padding: 46px 28px 70px; font-family: 'DM Sans',sans-serif; }
.ug-main * { box-sizing: border-box; }
.ug-eyebrow { color: #9a712e; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.ug-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.ug-hero h1 { font: 900 clamp(44px,7vw,78px)/1 'Fraunces',Georgia,serif; letter-spacing: -.055em; color: #102c49; margin: 12px 0; }
.ug-hero h1 span { color: #ba812b; }
.ug-hero p { font-size: 18px; margin: 0; color: #40526a; }
.ug-recipe { display: flex; align-items: center; gap: 16px; color: #bd8a33; }
.ug-recipe b { font: 900 48px 'Fraunces',Georgia,serif; color: #133858; }
.ug-recipe span { font-size: 30px; }
.ug-recipe svg { width: 68px; height: 68px; margin-left: 8px; }
.ug-main svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ug-intro { max-width: 740px; margin: 20px 0 24px; line-height: 1.7; font-size: 14px; }
.ug-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding-block: 12px 20px; }
.ug-toolbar label { display: grid; gap: 7px; font-weight: 700; font-size: 11px; }
.ug-toolbar select,.ug-search input { background: #fffdf8; color: #163552; border: 1px solid #d6c6a5; border-radius: 6px; padding: 12px; min-height: 44px; font: 600 13px 'DM Sans',sans-serif; }
.ug-toolbar select { min-width: 230px; }
.ug-toolbar > span { font-size: 12px; padding-bottom: 12px; color: #647183; }
.ug-workbench { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(270px,1fr); gap: 20px; align-items: stretch; }
.ug-forge { padding: 26px; border: 2px solid #9e793c; border-radius: 12px; color: #f6ead2; background: radial-gradient(ellipse at 50% 62%,#24547677,transparent 60%),#102b46; box-shadow: 0 6px 0 #0b2037,0 12px 28px #132c4318; }
.ug-forge-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ug-forge .ug-eyebrow { color: #e6bb69; }
.ug-counter { font: 900 24px 'Fraunces',Georgia,serif; }
.ug-counter small { color: #94aabd; font-size: 15px; }
.ug-slots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.ug-slot { position: relative; min-width: 0; aspect-ratio: 3/4.4; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed #b4a47f77; border-radius: 6px; background: #071d32aa; text-align: center; overflow: hidden; }
.ug-slot b { color: #46627a; font: 900 26px 'Fraunces',Georgia,serif; }
.ug-slot > span { font-size: 9px; color: #a2b3c3; margin-top: 8px; }
.ug-slot.is-filled { border: 1px solid #e0b865; justify-content: end; }
.ug-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ug-slot.is-filled > span { position: relative; color: #fff; font-size: 9px; line-height: 1.3; padding: 25px 5px 7px; width: 100%; background: linear-gradient(transparent,#081b2cee 40%); }
.ug-slot button { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border: 1px solid #ffe6ad; border-radius: 50%; background: #0c233ddd; color: #fff; cursor: pointer; font-size: 20px; }
.ug-flow { display: flex; align-items: center; justify-content: center; color: #e6bb69; gap: 15px; margin: 18px auto 12px; }
.ug-flow svg { width: 60px; height: 60px; }
.ug-flow i { width: 60px; height: 1px; background: linear-gradient(90deg,transparent,#e0ba65); }
.ug-flow i:last-child { transform: scaleX(-1); }
.ug-forge > p { text-align: center; font-size: 12px; line-height: 1.6; color: #c5d0db; }
.ug-button { border: 1px solid #b08332; border-radius: 5px; padding: 13px 20px; background: linear-gradient(#f1d48d,#d9ad55); color: #352b1b; font: 800 12px 'DM Sans',sans-serif; box-shadow: 0 3px 0 #946d2d; cursor: pointer; min-height: 44px; }
.ug-button:hover:not(:disabled) { filter: brightness(1.07); }
.ug-main button:disabled { opacity: .45; cursor: not-allowed; }
.ug-main :is(button,input,select,summary,a):focus-visible { outline: 3px solid #258a9e; outline-offset: 3px; }
.ug-activate { display: block; width: 100%; margin-top: 22px; }
.ug-forge > small { display: block; text-align: center; font-size: 10px; line-height: 1.6; color: #a7bbcc; margin-top: 14px; }
.ug-reward,.ug-result { --ug-accent: #b88d39; background: #fffdf8; border: 1px solid #d8c7a6; border-top: 4px solid var(--ug-accent); border-radius: 10px; padding: 28px; text-align: center; min-width: 0; }
.ug-r-uncommon { --ug-accent: #50925f; }.ug-r-rare { --ug-accent: #3e83ba; }.ug-r-epic { --ug-accent: #9753ba; }.ug-r-legendary { --ug-accent: #cd9a34; }
.ug-mystery { position: relative; margin: 20px auto 12px; width: 90px; height: 116px; display: grid; place-items: center; border: 2px solid var(--ug-accent); border-radius: 8px; color: var(--ug-accent); background: radial-gradient(#fff, #eae3d7); transform: rotate(5deg); }
.ug-mystery svg { width: 75px; height: 75px; opacity: .25; }
.ug-mystery b { position: absolute; font: 900 46px 'Fraunces',Georgia,serif; }
.ug-reward h3,.ug-result h3 { color: #183550; font: 900 25px/1.15 'Fraunces',Georgia,serif; margin: 20px 0 10px; }
.ug-reward p,.ug-result p { font-size: 12px; line-height: 1.6; }
.ug-odds { display: block; color: var(--ug-accent); font-size: 11px; font-weight: 800; padding: 7px 0 14px; }
.ug-reward > small { display: block; color: #697480; font-size: 10px; line-height: 1.6; margin-top: 15px; }
.ug-pool summary { font-size: 12px; color: #225c7e; cursor: pointer; padding: 10px; border-top: 1px solid #e8dfcd; }
.ug-pool > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; max-height: 310px; overflow-y: auto; padding-top: 12px; }
.ug-pool figure { margin: 0; min-width: 0; }
.ug-pool img { width: 100%; height: auto; aspect-ratio: 3/4; border-radius: 4px; object-fit: cover; }
.ug-pool figcaption { font-size: 9px; line-height: 1.3; margin-top: 5px; }
.ug-result-card { display: flex; justify-content: center; margin-top: 15px; }
.ug-result { animation: ug-appear .35s ease-out; }
.ug-inventory { margin-top: 42px; }
.ug-section-title { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.ug-section-title h2,.ug-history h2 { font: 900 25px 'Fraunces',Georgia,serif; color: #173450; margin: 8px 0 0; }
.ug-search input { width: 240px; max-width: 100%; }
.ug-protection { color: #687383; font-size: 11px; line-height: 1.7; margin: 14px 0 20px; max-width: 850px; }
.ug-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.ug-card { display: flex; gap: 12px; align-items: center; padding: 10px; background: #fffdf8; border: 1px solid #e0d4bb; border-left: 3px solid var(--ug-accent); border-radius: 7px; min-width: 0; }
.ug-card > img { width: 61px; height: 82px; object-fit: cover; border-radius: 4px; flex: none; }
.ug-card > div { min-width: 0; flex: 1; }
.ug-card strong { display: block; font-size: 11px; line-height: 1.4; }
.ug-card small { display: block; color: #718093; font-size: 10px; line-height: 1.5; margin-top: 4px; }
.ug-card.is-picked { border-color: var(--ug-accent); background: #fff8e8; box-shadow: 0 0 0 1px var(--ug-accent); }
.ug-card.is-protected img { filter: saturate(.4); }
.ug-stepper { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ug-stepper button { width: 32px; height: 32px; border: 1px solid #c8b993; border-radius: 4px; background: #f8f1df; color: #153751; font-size: 20px; cursor: pointer; }
.ug-stepper output { min-width: 12px; text-align: center; font-size: 12px; font-weight: 800; }
.ug-empty { padding: 45px 22px; border: 1px dashed #c9b995; background: #fffcf6; border-radius: 9px; text-align: center; grid-column: 1/-1; font-size: 13px; line-height: 1.7; }
.ug-empty a { color: #276b86; }
.ug-signin svg { width: 76px; height: 76px; color: #bb8b39; }
.ug-signin h2 { font: 900 26px 'Fraunces',Georgia,serif; }
.ug-error:empty { display: none; }.ug-error { background: #fff0e8; border-left: 3px solid #b44c35; color: #963b28; font-size: 12px; padding: 14px; line-height: 1.6; }
.ug-warning { color: #a5462d; }
.ug-history { margin-top: 42px; }
.ug-history ol { list-style: none; padding: 0; margin: 18px 0 0; }
.ug-history li { display: flex; gap: 18px; border-top: 1px solid #e4d9c3; padding: 12px 0; font-size: 11px; line-height: 1.6; }
.ug-history li span { color: #7b8390; flex: none; }
.ug-confirm { width: min(480px,calc(100vw - 32px)); border: 2px solid #b68c43; border-radius: 12px; background: #fffcf4; color: #24354a; padding: 28px; font-family: 'DM Sans',sans-serif; }
.ug-confirm::backdrop { background: #061a2acc; backdrop-filter: blur(4px); }
.ug-confirm h2 { font: 900 27px 'Fraunces',Georgia,serif; margin: 12px 0; }
.ug-confirm ul { padding: 16px 16px 16px 32px; background: #f0e9d9; border-radius: 6px; font-size: 12px; line-height: 1.8; }
.ug-confirm p { font-size: 12px; line-height: 1.8; }
.ug-confirm > div { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.ug-quiet { box-shadow: none; background: none; color: #4a5f6c; border-color: #cfc0a4; }
@keyframes ug-appear { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1000px) { .ug-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ug-forge { padding: 20px; }.ug-slots { gap: 6px; }.ug-reward,.ug-result { padding: 22px 16px; } }
@media(max-width:720px) { .ug-main { padding: 28px 16px 45px; }.ug-workbench { grid-template-columns: 1fr; }.ug-hero { gap: 10px; }.ug-recipe { gap: 9px; }.ug-recipe b { font-size: 35px; }.ug-recipe svg { display: none; }.ug-hero p { font-size: 14px; }.ug-toolbar { align-items: start; flex-direction: column; gap: 8px; }.ug-toolbar > span { padding: 0; }.ug-toolbar label,.ug-toolbar select { width: 100%; }.ug-section-title { align-items: start; flex-direction: column; }.ug-search,.ug-search input { width: 100%; }.ug-slot > span { font-size: 8px; }.ug-slot button { width: 25px; height: 25px; }.ug-forge { padding: 18px 12px; }.ug-slot { aspect-ratio: 3/4.8; }.ug-reward { display: flex; flex-direction: column; align-items: center; }.ug-pool { width: 100%; }.ug-pool > div { grid-template-columns: repeat(4,minmax(0,1fr)); }.ug-history li { flex-direction: column; gap: 3px; } }
@media(max-width:420px) { .ug-grid { grid-template-columns: 1fr; }.ug-card > img { width: 66px; height: 88px; }.ug-section-title h2 { font-size: 23px; } }
@media(prefers-reduced-motion:reduce) { .ug-result { animation: none; } }