.rg-room{height:100%;min-height:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 60%,#32534c,#101f25 75%);color:#fff0ce;padding:18px;box-sizing:border-box;overflow:hidden}.rg-header{display:flex;justify-content:space-between;gap:20px;align-items:center;flex:none}.rg-header h1{font-size:clamp(22px,4vh,38px);margin:3px 0}.rg-header p,.rg-caption{font-size:13px;margin:3px 0}.rg-header small{color:#acd4c3}.rg-hands{position:relative;flex:1;min-height:0;aspect-ratio:1.5;max-width:100%;align-self:center}.rg-hands-art{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.rg-finger{position:absolute;transform:translate(-50%,-50%);width:7%;aspect-ratio:1;min-width:34px;min-height:34px;padding:0;border:1px dashed #fff0ba99;border-radius:50%;background:#173a3877;color:#fff1ba;cursor:pointer}.rg-finger:focus-visible,.rg-finger:hover{outline:3px solid #a2f2d5;background:#23675ac9}.rg-finger span{font-size:24px}.rg-finger img{width:150%;height:150%;object-fit:contain;position:absolute;left:-25%;top:-25%;filter:drop-shadow(0 3px 2px #0008);pointer-events:none;image-rendering:pixelated}.rg-worn{border:0;background:transparent}.rg-wrist{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#193d3fdd;border:1px solid #b5985b;border-radius:8px;color:#ffe8ab;padding:8px}.rg-caption{text-align:center}.rg-collection{width:min(1100px,96vw);height:min(740px,94dvh);max-height:94dvh;box-sizing:border-box;padding:16px;background:#10282f;color:#f6e8c6;border:2px solid #c6a266;border-radius:16px;overflow:hidden}.rg-collection::backdrop{background:#020a10cc}.rg-collection[open]{display:flex;flex-direction:column;gap:10px}.rg-collection header{display:flex;align-items:center;justify-content:space-between;gap:10px}.rg-collection h2{margin:2px 0;font-size:24px}.rg-collection button{color:inherit;cursor:pointer}.rg-collection button:disabled{cursor:default;opacity:.5}.rg-collection header button{border:1px solid #9bbaaa;background:#193b42;border-radius:8px;font-size:28px;min-width:44px;min-height:44px}.rg-filter{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.rg-filter select{background:#183c44;color:#fff0ca;padding:8px;min-height:40px;border:1px solid #82aa9d;border-radius:6px}.rg-collection-body{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:14px;min-height:0;flex:1}.rg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px;align-content:start;overflow:auto;padding:3px}.rg-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:#1b3a42;border:1px solid #587a78;border-radius:10px;padding:7px;min-width:0}.rg-card img{width:78px;height:78px;object-fit:contain;image-rendering:pixelated}.rg-card strong{font-size:12px;line-height:1.2}.rg-card small{font-size:11px;color:#a9cdc1}.rg-card.locked img{filter:grayscale(.8);opacity:.6}.rg-card.selected{outline:2px solid #f2ce7b;background:#32504a}.rg-detail{border-radius:10px;border:1px solid #658078;padding:12px;text-align:center;overflow:auto;background:#0a1e26}.rg-detail img{width:120px;height:120px;object-fit:contain;display:block;margin:auto;image-rendering:pixelated}.rg-detail h3{font-size:21px;margin:7px 0}.rg-detail p{font-size:13px;line-height:1.45}.rg-detail small,.rg-unlock{color:#b4d6c6}.rg-detail button{width:100%;padding:10px;min-height:42px;border:1px solid #bda066;border-radius:7px;background:#276556;margin:4px 0}.rg-detail [data-rg-remove]{background:#203d45}.rg-detail-star{font-size:70px;color:#dfba69}.premium-preview{height:100%;overflow:auto;background:radial-gradient(ellipse at top,#3a514c,#11232a);color:#fff0ca;text-align:center;padding:18px;box-sizing:border-box}.premium-preview h1{margin:5px;font-size:34px}.premium-preview header small{color:#bde4d0;letter-spacing:2px}.premium-price{font-size:28px;color:#f4d084;margin:8px}.premium-price span{font-size:12px}.premium-preview p{font-size:13px;line-height:1.4}.premium-items{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;margin:16px auto}.premium-items article{background:#10292c;border:1px solid #b3935c;border-radius:13px;padding:16px}.premium-items h2{font-size:19px}.premium-bracelet{display:flex;align-items:center;justify-content:center;gap:6px;border:12px ridge #e3b958;box-shadow:inset 0 0 0 3px #6f4b22,0 5px 0 #684923;border-radius:50%;width:100px;height:66px;margin:10px auto;color:#fce59a}.premium-bracelet b{border:3px solid #ecd17d;border-radius:7px;padding:5px;background:#6c3d8a;font-size:24px}.premium-luck b{background:#23654b;color:#a5eaa7}.premium-watch{display:block;width:44px;height:105px;border:4px ridge #edcb7e;background:repeating-linear-gradient(0deg,#a37d34 0 5px,#edcb7e 5px 9px);position:relative;margin:auto}.premium-watch i{position:absolute;top:21px;left:-17px;width:70px;height:65px;border:7px ridge #f2d891;background:#15393b;border-radius:50%;font-style:normal;font-size:15px;line-height:20px;color:#f9e4ae}.premium-preview footer{background:none;border:0;display:block;padding:5px;color:inherit}.premium-preview footer button{background:#445955;color:#e8dfcb;border:1px solid #91a99d;padding:10px 30px;border-radius:8px}.rg-loading{padding:30px}.rg-live:empty{display:none}@media(max-height:450px){.rg-room{padding:8px 14px}.rg-header h1{font-size:22px}.rg-header p{font-size:11px}.rg-header>p{max-width:230px}.rg-caption{font-size:11px}.rg-collection{padding:8px;gap:5px!important}.rg-collection h2{font-size:18px}.rg-collection-body{grid-template-columns:minmax(0,1fr) 200px;gap:8px}.rg-cards{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}.rg-card img{width:52px;height:52px}.rg-card strong{font-size:10px}.rg-detail img{width:65px;height:65px}.rg-detail h3{font-size:17px}.rg-detail p{font-size:11px}.premium-preview{padding:9px}.premium-preview h1{font-size:25px}.premium-items{margin:8px auto;gap:8px}.premium-items article{padding:6px}.premium-items h2{font-size:14px}.premium-preview p{font-size:11px}.premium-bracelet{transform:scale(.65);margin:-5px auto}.premium-watch{transform:scale(.65);margin:-18px auto}.premium-preview footer p{margin:5px}}@media(max-width:600px){.rg-filter>span{display:none}.rg-collection-body{grid-template-columns:minmax(0,1fr) 155px}.rg-detail{padding:7px}}

.rg-slotbar{display:none}@media(max-height:450px){.rg-slotbar{display:flex;justify-content:center;gap:7px;flex:none}.rg-slotbar button{width:44px;height:44px;min-width:44px;padding:0;position:relative;border:1px solid #bd9e65;background:#14343a;color:#fce7b3}.rg-slotbar img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.rg-finger{min-width:14px!important;min-height:14px!important;pointer-events:none}.rg-finger>span{font-size:12px}.rg-wrist,.rg-caption{display:none}.rg-header{height:44px}.rg-header>p{font-size:10px}.rg-header h1{font-size:20px}.rg-room{gap:3px}.rg-hands{flex:1}.rg-slotbar small{font-size:8px}}

.premium-product{width:160px;height:140px;object-fit:contain;image-rendering:pixelated}@media(max-height:450px){.premium-product{width:100px;height:75px}}

.rg-drag-preview{position:fixed;width:80px;height:80px;object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;z-index:30000;image-rendering:pixelated;filter:drop-shadow(0 4px 3px #0008)}


.rg-room{justify-content:flex-start;gap:4px}.rg-hands{flex:none;max-height:none;min-height:0;position:relative}.rg-hands-art{display:block;width:100%;height:100%;object-fit:contain}.rg-finger{width:44px;height:44px;min-width:44px;min-height:44px;aspect-ratio:auto;border:0;background:transparent;border-radius:50%}.rg-finger:not(.rg-worn){background:transparent}.rg-finger>span:not(.rg-finger-skin){display:block;margin:auto;width:18px;height:18px;font-size:15px;line-height:17px;border:1px dashed #fff0ba88;border-radius:50%;background:#163a3844}.rg-finger img{width:var(--ring-size);height:var(--ring-size);left:calc(50% - var(--ring-size)*.5);top:calc(50% - var(--ring-size)*.5);transform:rotate(var(--ring-angle)) scaleY(.86);filter:drop-shadow(0 1px 1px #24180d88)}.rg-finger-skin{position:absolute;left:calc(50% - var(--ring-size)*.3);top:calc(50% - var(--ring-size)*.03);width:calc(var(--ring-size)*.6);height:calc(var(--ring-size)*.16);background-image:url('assets/achievement-rings-v1/hands.webp');background-repeat:no-repeat;clip-path:ellipse(50% 50% at 50% 50%);pointer-events:none}.rg-worn:hover{background:transparent}.rg-hands .rg-finger{pointer-events:auto!important}.rg-slotbar{flex:none}@media(max-height:450px){.rg-finger>span:not(.rg-finger-skin){width:12px;height:12px;font-size:10px;line-height:11px}}

/* Keep the artwork and finger anchors in the same measured box. */
#achievement-rings .rg-overview{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;flex:1;min-height:0;min-width:0}
#achievement-rings .rg-hand-column{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:0;overflow:hidden}
#achievement-rings .rg-hands{flex:none;max-width:none;aspect-ratio:auto;align-self:center}
#achievement-rings .rg-hands-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
#achievement-rings .rg-hands .rg-finger{margin:0;padding:0;transform:translate(-50%,-50%)}
#achievement-rings .rg-hands .rg-finger:active{transform:translate(-50%,-50%)}
#achievement-rings .rg-benefits{background:#122b30;border:1px solid #698b7d;border-radius:16px;padding:18px;overflow-y:auto;min-height:0;scrollbar-width:thin}
#achievement-rings .rg-benefits h2{font-size:22px;margin:0 0 6px;color:#f6d99b}
#achievement-rings .rg-benefits>p{font-size:13px;line-height:1.45;color:#bdd4c8;margin:0 0 18px}
#achievement-rings .rg-benefits h3{font-size:12px;color:#d6f2ad;margin:17px 0 9px;letter-spacing:.4px}
#achievement-rings .rg-benefits ul{padding:0;margin:0;list-style:none;display:grid;gap:12px}
#achievement-rings .rg-benefits li{display:flex;align-items:flex-start;gap:9px}
#achievement-rings .rg-benefits li img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex:none}
#achievement-rings .rg-benefits li strong{display:block;font-size:14px;line-height:1.4;font-weight:500;color:#f1f2dc}
#achievement-rings .rg-benefits li small{display:block;font-size:11px;line-height:1.3;color:#9ebcaf;margin-top:4px}
#achievement-rings .rg-benefits .rg-benefits-note{font-size:11px;margin:20px 0 0;border-top:1px solid #37584f;padding-top:12px}
#achievement-rings .rg-benefits-empty{padding:20px 0;text-align:center}
#achievement-rings .rg-benefits-empty>span{font-size:36px;display:block;color:#e4c474}
#achievement-rings .rg-benefits-empty p{font-size:14px;line-height:1.5}
@media(max-height:500px),(max-width:900px){#achievement-rings .rg-overview{grid-template-columns:220px minmax(0,1fr);gap:12px}#achievement-rings .rg-benefits{padding:12px}#achievement-rings .rg-benefits h2{font-size:18px}#achievement-rings .rg-benefits li strong{font-size:12px}#achievement-rings .rg-benefits li small{font-size:10px}#achievement-rings .rg-benefits h3{margin-top:12px}#achievement-rings .rg-benefits ul{gap:9px}#achievement-rings .rg-benefits>p{font-size:12px;margin-bottom:10px}#achievement-rings .rg-header{min-height:54px}#achievement-rings .rg-header>p{font-size:11px}}
@media(max-width:600px) and (orientation:portrait){#achievement-rings .rg-room{overflow:auto}#achievement-rings .rg-overview{display:flex;flex-direction:column;flex:none}#achievement-rings .rg-hand-column{order:-1;height:320px;flex:none}#achievement-rings .rg-benefits{overflow:visible}#achievement-rings .rg-header{height:auto;min-height:70px;gap:10px}#achievement-rings .rg-header>p{max-width:145px}}

/* Collection cards keep their content height inside the scrolling grid. */
dialog.rg-collection[open]{height:min(740px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);overflow:hidden;padding:12px;gap:8px}
dialog.rg-collection>header{flex:none;min-height:44px;padding:0;margin:0;background:none;border:0}
dialog.rg-collection>.rg-filter{flex:none;min-height:44px}
dialog.rg-collection .rg-collection-body{min-height:0;overflow:hidden;grid-template-columns:minmax(0,1fr) 220px}
dialog.rg-collection .rg-cards{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-auto-rows:minmax(132px,max-content);align-items:stretch;align-content:start;padding:3px}
dialog.rg-collection .rg-card{box-sizing:border-box;display:grid;grid-template-rows:56px minmax(30px,auto) auto;justify-items:center;align-content:start;gap:5px;padding:8px;height:auto!important;min-height:132px;max-height:none;overflow:hidden;white-space:normal;line-height:1.2}
dialog.rg-collection .rg-card>img{position:static;width:56px;height:56px;min-height:56px;max-height:none;object-fit:contain;transform:none}
dialog.rg-collection .rg-card>strong,dialog.rg-collection .rg-card>small{position:static;display:block;width:100%;min-width:0;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
dialog.rg-collection .rg-card>strong{font-size:12px}dialog.rg-collection .rg-card>small{font-size:11px}
dialog.rg-collection .rg-detail{min-height:0;min-width:0;overscroll-behavior:contain}
@media(max-height:450px){dialog.rg-collection[open]{padding:8px;gap:5px!important}dialog.rg-collection .rg-collection-body{grid-template-columns:minmax(0,1fr) 190px;gap:8px}dialog.rg-collection>header h2{font-size:18px}dialog.rg-collection .rg-filter{font-size:11px}}
@media(max-width:600px) and (orientation:portrait){dialog.rg-collection .rg-collection-body{display:flex;flex-direction:column;gap:8px}dialog.rg-collection .rg-cards{flex:1;min-height:140px;grid-template-columns:repeat(2,minmax(0,1fr))}dialog.rg-collection .rg-detail{flex:none;max-height:34dvh;padding:8px}dialog.rg-collection .rg-detail>img{width:48px;height:48px;float:left;margin:0 8px 5px 0}dialog.rg-collection .rg-detail h3{font-size:17px;margin:4px 0}dialog.rg-collection .rg-detail p{font-size:12px;margin:5px 0}dialog.rg-collection .rg-detail-star{font-size:24px;float:left;margin-right:10px}dialog.rg-collection .rg-detail button{min-height:44px}dialog.rg-collection .rg-filter>span{display:none}}