.detail-acts { display: flex; align-items: center; gap: 12px; }
.odds-title { margin: 0 3px 12px; }

body.pc .cases-pc { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 520px); gap: 28px; align-items: start; }
body.pc .cases-pc .shelf-wall { justify-content: center; align-content: start; }
body.pc .case-side { --px: 3px; margin: 3px; padding: 20px 18px; position: sticky; top: 0; max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; }
body.pc .detail-side .detail-head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
body.pc .detail-side .detail-head > .grow { display: none; }
body.pc .detail-side .detail-crate { display: flex; justify-content: center; align-items: flex-end; min-height: 150px; padding: 14px 0 6px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
body.pc .detail-side .detail-titles { align-items: stretch; text-align: center; gap: 12px; }
body.pc .detail-side .detail-titles .muted { line-height: 1.4; font-size: 14px; }
body.pc .detail-side .pity { min-width: 0; }
body.pc .detail-side .detail-acts .btn { flex: 1; justify-content: center; text-align: center; }
body.pc .detail-side .odds-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
body.pc .detail-side .mini { width: auto; }
body.pc .detail-side .mini-name { text-align: center; }
.case-tile.sel .case-crate { filter: drop-shadow(3px 0 0 var(--accent)) drop-shadow(-3px 0 0 var(--accent)) drop-shadow(0 3px 0 var(--accent)) drop-shadow(0 -3px 0 var(--accent)); }
.case-tile.sel .case-name { color: var(--accent); }

body.pc .screen-collection .col { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
body.pc .screen-collection .col-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; }
body.pc .screen-collection .col-tab { justify-content: space-between; }
body.pc .screen-collection .col-list { display: flex; flex-direction: column; gap: 6px; }
body.pc .screen-collection .book { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

body.pc .tu { grid-template-columns: auto minmax(0, 1fr); gap: 28px; }
body.pc .tu-right .item-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: calc(100vh - 330px); }
body.pc .tu-right .card-sm { width: auto; min-width: 0; }

.jr-tabs { display: flex; flex-direction: column; gap: 6px; }
body.pc .jr-ach { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

body.phone .screen-cases .shelf-wall { justify-content: center; gap: 28px 0; padding: 6px 0; }
body.phone .screen-cases .view-head { margin-bottom: 14px; }
body.phone .screen-cases .case-label { width: calc(100% + 28px); white-space: normal; gap: 8px; }
body.phone .screen-cases .case-name { font-size: 13px; line-height: 1.15; text-align: center; text-box: none; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
body.phone .screen-cases .case-sub { font-size: 11px; text-align: center; justify-content: center; }
body.phone .screen-cases .case-sub.has-badge { gap: 4px; }

body.phone .modal:has(.detail, .jr-pick, .sticker-drawer) { padding: 18px 14px calc(14px + env(safe-area-inset-bottom)); }
body.phone .detail-head { flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
body.phone .detail-head > .grow { display: none; }
body.phone .detail-crate { flex: none; }
body.phone .detail-titles { flex: 1 1 170px; min-width: 0; gap: 9px; }
body.phone .detail-titles h2 { font-size: 20px; }
body.phone .detail-titles .muted { font-size: 13px; line-height: 1.35; }
body.phone .detail .pity { min-width: 0; }
body.phone .detail-acts { flex: 1 1 100%; }
body.phone .detail-acts .btn.big { flex: 1; min-height: 52px; justify-content: center; text-align: center; }
body.phone .detail-acts .btn.help { min-width: 52px; min-height: 52px; }
body.phone .odds-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.phone .mini { width: auto; min-width: 0; }
body.phone .mini-name { font-size: 12px; text-align: center; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

body.phone .col-tabs, body.phone .col-list, body.phone .jr-tabs, body.phone .screen-tradeup .subtabs {
  position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden;
  margin: 0 -12px; padding: 5px 15px 9px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
body.phone .col-tabs::-webkit-scrollbar, body.phone .col-list::-webkit-scrollbar, body.phone .jr-tabs::-webkit-scrollbar, body.phone .screen-tradeup .subtabs::-webkit-scrollbar { display: none; }
body.phone .col-tabs > *, body.phone .col-list > *, body.phone .jr-tabs > *, body.phone .screen-tradeup .subtabs > * { flex: none; scroll-snap-align: center; white-space: nowrap; margin: 2px 0; }
body.phone .col-tab { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
body.phone .col-list .col-case, body.phone .jr-tabs .col-case { min-height: 48px; padding: 6px 14px; gap: 10px; background: var(--bg2); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--lo); margin: 3px 0; }
body.phone .col-list .col-case.on, body.phone .jr-tabs .col-case.on { box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--accent); }
body.phone .col-case:hover { transform: none; }
body.phone .screen-tradeup .subtab { min-height: 44px; margin: 3px 0; }

body.phone .screen-collection .col { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.phone .col-side { gap: 2px; min-width: 0; position: relative; z-index: 1; }
body.phone .col-main { padding-top: 14px; clip-path: inset(0 -40px -100000px -40px); }
body.phone .col-main .view-head { gap: 10px; margin: 0 0 14px; }
body.phone .col-main .progress { flex: 1 1 100px; width: auto; }
body.phone .col-main .view-head .btn { min-height: 44px; }
body.phone .book { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px; touch-action: pan-y; }
body.phone .book-slot { padding: 12px 6px 14px; gap: 9px; min-width: 0; }
body.phone .book-art { max-width: 100%; justify-content: center; }
body.phone .book-art canvas { max-width: 100%; }
body.phone .book-name { font-size: 13px; line-height: 1.15; text-box: none; text-align: center; overflow-wrap: anywhere; }
body.phone .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; margin: 18px 3px 3px; padding: 14px; }

body.phone .screen-tradeup .view-head { gap: 10px; margin-bottom: 12px; }
body.phone .screen-tradeup .view-head > .muted { flex: 1 1 100%; font-size: 13px; line-height: 1.4; }
body.phone .screen-tradeup .subtabs { margin-bottom: 10px; }
body.phone .tu { grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.phone .contract { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
body.phone .contract .slot-empty { width: auto; height: 64px; margin: 2px; }
body.phone .contract .card { width: auto; min-width: 0; margin: 2px; }
body.phone .contract .card > :not(.card-art) { display: none; }
body.phone .contract .card-art { height: 58px; padding: 0 2px; }
body.phone .contract .card-art canvas { max-width: 100%; height: auto; }
body.phone .tu-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 14px 3px; padding: 14px; }
body.phone .tu-sum > .grow { display: none; }
body.phone .tu-sum > .btn { grid-column: 1 / -1; min-height: 46px; justify-content: center; text-align: center; }
body.phone .tu-out { min-height: 40px; font-size: 13px; }
body.phone .tu-right .bench { display: none; }
body.phone .tu-right .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; gap: 8px; }
body.phone .tu-right .card-sm { width: auto; min-width: 0; }

body.phone .jr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.phone .jr-side { position: static; gap: 8px; min-width: 0; }
.jr-more { display: none; }
body.phone .jr-profile { margin: 3px; padding: 8px 10px 9px; gap: 12px; }
body.phone .jr-profile.open { padding-bottom: 14px; }
body.phone .jr-profile:not(.open) > :not(.jr-pick-row) { display: none; }
body.phone .jr-pick-row { gap: 12px; }
body.phone .jr-who { flex: 1 1 auto; gap: 8px; }
body.phone .jr-title { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
body.phone .jr-main .btn.small { min-height: 44px; }
body.phone .jr-title { position: relative; padding-block: 17px; margin-block: -17px; }
body.phone .jr-track { margin: 0 -12px; padding: 8px 15px 14px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
body.phone .jr-track::-webkit-scrollbar { display: none; }
body.phone .jr-tier { scroll-snap-align: center; }
body.phone .jr-more { display: inline-flex; flex: none; min-width: 88px; justify-content: center; }
body.phone .jr-pemblem { max-height: 44px; width: auto; }
body.phone .jr-lv { width: 44px; height: 44px; font-size: 20px; }
body.phone .jr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
body.phone .jr-stats .k { font-size: 10px; line-height: 1.2; text-box: none; }
body.phone .jr-stats .v { font-size: 15px; }
body.phone .jr-profile .btn { min-height: 44px; }
body.phone .jr-main { gap: 10px; }
body.phone .jr-sec { gap: 10px; margin: 6px 3px 2px; }
body.phone .jr-quest { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px 10px; padding: 12px; }
body.phone .jr-quest > .jr-qicon { grid-row: 1 / span 2; align-self: center; }
body.phone .jr-qbody { grid-column: 2 / -1; }
body.phone .jr-qtext { font-size: 14px; line-height: 1.2; text-box: none; }
body.phone .jr-qreward { grid-column: 2 / -1; grid-row: 2; flex-direction: row; align-items: center; gap: 14px; min-width: 0; white-space: nowrap; }
body.phone .jr-quest > .jr-qicon { grid-row: 1 / span 3; }
body.phone .jr-quest > :nth-child(n+4) { grid-row: 3; }
body.phone .jr-quest > :last-child { grid-column: 4; }
body.phone .jr-quest > :nth-child(4):not(:last-child) { grid-column: 3; }
body.phone .jr-quest .btn { min-height: 44px; }
body.phone .jr-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 4px; }
body.phone .jr-day { height: 100px; }
body.phone .jr-ach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px; }
body.phone .jr-badge { padding: 12px 8px; gap: 9px; }
body.phone .jr-bname { font-size: 14px; line-height: 1.15; text-box: none; }
body.phone .jr-btext { font-size: 12px; }
body.phone .jr-sets { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.phone .jr-set { padding: 12px; }
body.phone .jr-set-foot { grid-template-columns: 1fr auto; }
body.phone .jr-set-foot > :last-child { grid-column: 1 / -1; }
body.phone .jr-mast { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 10px 12px; }
body.phone .jr-pips { grid-column: 2; flex-wrap: wrap; }
body.phone .jr-score { padding: 14px; gap: 14px; }
body.phone .jr-pick { min-width: 0; }
body.phone .jr-titles .subtab { min-height: 44px; }

body.phone .sticker-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 54dvh; }
body.phone .sticker-pick { min-height: 96px; min-width: 0; font: inherit; color: var(--fg); border: 0; }
body.phone .sticker-name { font-size: 13px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
body.phone .sticker-grid { scrollbar-width: none; overscroll-behavior: contain; }
body.phone .inspect > .reveal-actions { flex-wrap: wrap; width: 100%; gap: 10px; }
body.phone .inspect > .reveal-actions > .btn { flex: 1 1 auto; justify-content: center; text-align: center; margin: 3px; }
body.phone .insp-stickers { flex-wrap: wrap; justify-content: center; }
body.phone .insp-stickers > .k { flex: 1 1 100%; text-align: center; }

@media (hover: none) {
  .jr-tier:hover, .jr-day:hover, .subtab:hover, .chip:hover { transform: none; }
}