/* DROPOMANIA: фирменный знак и витрина на существующем мобильном экране. */
.app-head{gap:10px}
.wordmark{gap:8px;letter-spacing:0;flex-shrink:0;text-align:left}
.wordmark .brand-symbol{width:26px;height:30px;fill:none;stroke:#e85d32;stroke-width:1.8;stroke-linejoin:round;flex-shrink:0;filter:drop-shadow(0 0 8px #e85d3225)}
.wordmark .brand-name{display:flex;flex-direction:column;gap:4px;color:#fff;font-size:initial;animation:none}
.brand-name b{font-size:17px;font-weight:900;letter-spacing:-.8px;line-height:1}
.wordmark .brand-name b span{font-size:inherit;color:#e85d32;letter-spacing:inherit;animation:none}
.brand-name small{font-size:7px;font-weight:650;letter-spacing:2.1px;color:#77777e;line-height:1}
.balance strong{font-variant-numeric:tabular-nums;font-size:20px;letter-spacing:-.6px}.balance small{font-size:10px}
.avatar{background:#111114;border-color:#2b2b30;box-shadow:inset 0 1px 0 #ffffff0a}
.case-rail{background:#101012;border-color:#242428;box-shadow:inset 0 1px 0 #ffffff05}
.case-card{color:#7e7e87;transition:background .25s,color .25s,transform .2s}
.case-card.selected{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--case-color) 20%,#151517),#18181b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--case-color) 35%,#252528)}
.case-card strong{display:flex;align-items:center;gap:7px;font-size:15px}
.case-card strong:before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--case-color);opacity:.35;transition:opacity .25s,box-shadow .25s}
.case-card.selected strong:before{opacity:1;box-shadow:0 0 9px color-mix(in srgb,var(--case-color) 70%,transparent)}
.rarity-bar{border-bottom:1px solid #ffffff08;padding-bottom:5px}
.rarity-bar>strong{font-variant-numeric:tabular-nums;font-weight:750}
.photo-wrap:before{background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--rarity) 13%,transparent),transparent 66%)}
.display-orbit{display:block;left:9%;width:82%;bottom:12%;height:15%;border-color:color-mix(in srgb,var(--rarity) 20%,transparent);background:radial-gradient(ellipse,#ffffff04,transparent 65%);box-shadow:0 0 34px color-mix(in srgb,var(--rarity) 8%,transparent),inset 0 0 18px #ffffff03;animation:dm-orbit 5s ease-in-out infinite}
.display-orbit:after{content:'';position:absolute;inset:17% 10%;border:1px solid color-mix(in srgb,var(--rarity) 8%,transparent);border-radius:50%}
.photo-badge{color:#8b8b94;font-size:8px;letter-spacing:1.3px}
.item-copy>span{color:var(--rarity);font-weight:750;letter-spacing:2.6px}
.item-copy h1{color:#f7f7f9}
.actions button{background:#111114;border-color:#29292f;color:#dedee3;box-shadow:inset 0 1px 0 #ffffff04}
.actions button:disabled{background:#0b0b0d;border-color:#1d1d22;color:#72727c}
.actions #share{color:#babac4;border-color:#29292f}
.spin{box-shadow:0 6px 30px #e85d3227,inset 0 1px 0 #ffffff30;transition:transform .15s,box-shadow .2s}
.spin:active:not(:disabled){transform:scale(.98);box-shadow:0 2px 10px #e85d3220}
.spin span{font-variant-numeric:tabular-nums;background:#bd4524;border:1px solid #ffffff0b}
.selectors select,.selectors>button{color:#aaaab3}
#toast{color:#666670}#toast.has-message{color:#d8d8e1}
.app-nav{background:#09090b;border-top-color:#202024}
.app-nav button.active{background:#e85d320a}
.app-nav button.active:before{content:'';position:absolute;top:-7px;width:22px;height:2px;border-radius:2px;background:#e85d32;box-shadow:0 0 12px #e85d3260}
.profile-card,.stats-grid article,.item{background:linear-gradient(150deg,#17171b,#0c0c0f);border-color:#2c2c33!important}
.item button{background:#232329;color:#e2e2e9}
.daily-reward{background:radial-gradient(ellipse at top right,#e85d3215,transparent 75%),#131316;border-color:#503023}
.daily-reward strong,.profile-note strong{color:#ededf1}.daily-reward p{color:#92929b}
.profile-note{background:#111114;border-color:#2b2b31}
.box-face span{font-size:13px;letter-spacing:-.4px;padding:5px}.box-face small{font-size:5px;letter-spacing:.25px}
@keyframes dm-orbit{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.9;transform:scale(1.03)}}
@media(max-width:360px){.app-head{gap:7px}.wordmark{gap:5px}.wordmark .brand-symbol{width:22px;height:26px}.brand-name b{font-size:14px}.brand-name small{font-size:6px;letter-spacing:1.8px}.balance strong{font-size:18px}.balance small{font-size:9px}.case-card strong{font-size:14px;gap:5px}}
@container(max-height:600px){.brand-name b{font-size:15px}.wordmark .brand-symbol{width:23px;height:27px}.brand-name small{font-size:6px}.balance strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.display-orbit{animation:none}.case-card,.spin{transition:none}}

/* Элементы коллекции остаются удобными для пальца и клавиатуры. */
.filter-chips{flex-wrap:wrap;gap:7px}
.filter-chips button{min-height:40px;padding:9px 11px;font-size:12px;color:#b2b2bd}
.filter-chips button.active{color:#fff}
.sort-label select{min-height:40px}
.app button:focus-visible,.app select:focus-visible,dialog button:focus-visible{outline:2px solid #ffa778;outline-offset:3px}
.app-nav button{color:#93939d}
.selectors select,.selectors>button{color:#b5b5bf}
.daily-reward p[role="status"]{min-height:30px;line-height:1.45}
.collection-note{color:#aaaab4}
.discovery-album{padding:18px 16px;margin:15px 0;border:1px solid #38303a;border-radius:18px;background:radial-gradient(ellipse at top right,#bda4ff0c,transparent 75%),#111114}
.discovery-album>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.discovery-album strong{font-size:15px;color:#f2f2f7}.discovery-album b{font-size:16px;font-variant-numeric:tabular-nums;color:#bda4ff}
.discovery-album progress{display:block;width:100%;height:7px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:#29242f;margin:15px 0}
.discovery-album progress::-webkit-progress-bar{background:#29242f}.discovery-album progress::-webkit-progress-value{background:linear-gradient(90deg,#8d73cf,#bda4ff);border-radius:8px}.discovery-album progress::-moz-progress-bar{background:#bda4ff;border-radius:8px}
.discovery-album p{font-size:12px;line-height:1.45;color:#d2cbdc;margin:0 0 7px}.discovery-album small{font-size:11px;line-height:1.4;color:#93909b}
.discovery-album.complete{border-color:#776044}.discovery-album.complete b{color:#ffd185}
.item .view-item{display:block;width:100%;height:140px;min-height:0;border:0;padding:0;background:transparent;border-radius:12px;cursor:pointer}
.item .view-item img{width:100%;height:100%;object-fit:contain}
.item .view-item:active{background:#ffffff05}

/* Выбор кейса находится в одном месте: нижняя панель открывает каталог. */
#case-rail{display:none}
#game{grid-template-rows:minmax(0,1fr) 128px}
#box-select[hidden]{display:none!important}
.selectors #case-picker-button{justify-content:space-between;gap:8px;min-width:0;color:#eeeeF3;text-align:left}
#selected-case-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selectors #case-picker-button>span:last-child{color:#e88b69;font-size:20px;flex-shrink:0}
#case-picker{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,470px);max-width:470px;max-height:calc(var(--app-height,100dvh) - var(--safe-top,0px) - 24px);padding:12px 18px calc(18px + var(--safe-bottom,0px));border:1px solid #373139;border-bottom:0;border-radius:26px 26px 0 0;background:#0d0d10;color:#fff;overflow:auto;overscroll-behavior:contain;box-sizing:border-box;animation:case-drawer-in .25s ease-out}
#case-picker::backdrop{background:#000b;backdrop-filter:blur(5px)}
.drawer-handle{width:36px;height:4px;border-radius:4px;background:#49444e;margin:0 auto 17px}
.case-picker-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.case-picker-head>div>span{color:#ba8974;font-size:9px;letter-spacing:1.6px;font-weight:700}
.case-picker-head h2{font-family:inherit;font-size:27px;letter-spacing:-.7px;margin:6px 0 0;color:#fff}
#case-picker-close{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#242329;color:#d8d5de;border:1px solid #35323b;font-size:27px;line-height:1}
.case-picker-note{font-size:12px;color:#98949f;margin:13px 0 18px;line-height:1.4}
#case-picker-list{display:grid;gap:11px}
.case-choice{display:grid;grid-template-columns:96px minmax(0,1fr);gap:15px;width:100%;padding:14px 12px;background:radial-gradient(ellipse at left,color-mix(in srgb,var(--case-color) 9%,transparent),transparent 65%),#16151a;border:1px solid #2e2b34;border-radius:18px;color:#e6e4eb;text-align:left;min-height:146px;transition:border-color .2s,background .2s}
.case-choice.selected{border-color:var(--case-color);background:radial-gradient(ellipse at left,color-mix(in srgb,var(--case-color) 17%,transparent),transparent 70%),#1d191b}
.case-choice-visual{position:relative;display:block;min-width:0;align-self:stretch;isolation:isolate}
.case-choice-visual:before{content:'';position:absolute;inset:14% -5%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--case-color) 15%,transparent),transparent 70%)}
.case-choice-visual img{position:absolute;width:86%;height:73%;object-fit:contain;top:12%;left:5%;filter:drop-shadow(0 5px 4px #0009)}
.case-choice-visual img:nth-child(2){width:56%;height:55%;top:2%;left:40%;transform:rotate(12deg);z-index:-1;opacity:.8}
.case-choice-visual img:nth-child(3){width:55%;height:50%;top:48%;left:-10%;transform:rotate(-12deg);z-index:1}
.case-choice-copy{min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center}
.case-choice-copy strong{font-size:18px;line-height:1.2;color:#fff}.case-choice-copy>span{font-size:11px;color:#b9b2c0;line-height:1.45}.case-choice-copy small{font-size:10px;line-height:1.4;color:#8e8798}.case-choice-copy b{font-size:17px;color:var(--case-color);font-variant-numeric:tabular-nums;margin-top:2px}
.case-choice:focus-visible,#case-picker-close:focus-visible{outline:2px solid #ffa778;outline-offset:3px}
@keyframes case-drawer-in{from{transform:translateY(35px);opacity:0}to{transform:translateY(0);opacity:1}}
@container(max-height:600px){#game{grid-template-rows:minmax(0,1fr) 116px}}
@media(max-width:360px){#case-picker{padding-left:14px;padding-right:14px}.case-choice{grid-template-columns:82px minmax(0,1fr);gap:11px}.case-choice-copy strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){#case-picker{animation:none}.case-choice{transition:none}}

/* Длинный референс часов не расширяет игровую сетку за экран. */
#game{grid-template-columns:minmax(0,1fr)}
.app main,.stage,.item-copy,.bottom-controls,.selectors,.rarity-bar{min-width:0}
.selectors>button{min-width:0}
#case-picker-button{flex:1;max-width:62%;justify-content:space-between;gap:8px}
#selected-case-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#odds-button{flex:0 0 auto}
.item-copy h1{max-width:100%}
.item-copy p{display:block;font-size:11px;line-height:1.2;color:#9c9ca7;margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Двойное нажатие — игровой жест; браузер не приближает интерфейс. */
html,body,.app,.app *,dialog,dialog *{touch-action:manipulation}

/* Telegram controls occupy a separate safe row in fullscreen. */
.app,body[data-screen="collection"] .app,body[data-screen="account"] .app{padding-left:max(18px,var(--safe-left,0px));padding-right:max(18px,var(--safe-right,0px))}
/* Every aura fades to transparent before its bounds. */
.stage:before{display:none}
.photo-wrap{box-shadow:none}
.photo-wrap:before{border-radius:50%;background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--rarity) 15%,transparent) 0%,transparent 100%)}
.photo-wrap .tilt-object{overflow:visible}
.is-opening .box-aura{border-radius:50%;background:radial-gradient(ellipse closest-side,color-mix(in srgb,var(--rarity) 35%,transparent),transparent 100%)}
.box-flash{border-radius:50%;background:radial-gradient(ellipse closest-side,#fff 0%,var(--rarity) 30%,transparent 100%)}

.is-opening .box-aura,.box-flash{mask-image:radial-gradient(ellipse closest-side,#000 45%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 45%,transparent 100%)}