.tabbar { display: none; }

body.phone { --top: calc(66px + env(safe-area-inset-top)); --bot: calc(76px + env(safe-area-inset-bottom)); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.phone .app { grid-template-rows: var(--top) minmax(0, 1fr) var(--bot); }
body.phone .hud { padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left)); gap: 6px; }
body.phone .hud-nav, body.phone .hud-brand > span, body.phone .xp-text, body.phone .hud-extra { display: none; }
body.phone .hud-brand { display: none; }
body.phone .hud-level { flex: 1 1 auto; min-width: 0; padding: 4px 8px 7px; margin: 2px; }
body.phone .xp { flex: 1; min-width: 0; }
body.phone .xp-bar { width: 100%; }
body.phone .hud-coins { min-width: 0; padding: 4px 10px 7px; font-size: 18px; margin: 2px; }
body.phone .hud-mute { display: none; }

body.phone .tabbar {
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg2); position: relative; z-index: 6;
  box-shadow: 0 -4px 0 0 var(--ink), inset 0 4px 0 0 var(--hi);
}
.tab-btn { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 6px 0 4px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; position: relative; cursor: pointer; }
.tab-btn canvas { opacity: .6; }
.tab-btn span { text-box: trim-both cap alphabetic; line-height: 1; }
.tab-btn.on { color: var(--fg); }
.tab-btn.on canvas { opacity: 1; }
.tab-btn::after { content: ''; position: absolute; left: 18%; right: 18%; top: 0; height: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .25s var(--spring); }
.tab-btn.on::after { transform: scaleY(1); }
.tab-btn.pip::before { content: ''; position: absolute; top: 8px; left: calc(50% + 12px); width: 8px; height: 8px; background: var(--bad); box-shadow: 0 0 0 2px var(--ink); }

body.phone .screen { padding: 14px 12px 24px; }
body.phone .screen-home { padding: 0; overflow-y: auto; overflow-x: hidden; }
body.phone .btn, body.phone .chip, body.phone .subtab, body.phone .nav-btn { min-height: 44px; }
body.phone .btn.small { min-height: 40px; }
body.phone .selbar .btn.small, body.phone .modal .btn.small, body.phone .detail .btn.small, body.phone .empty .btn.small { min-height: 44px; }
body.phone h1 { font-size: 24px; }

body.phone .backdrop { align-items: flex-end; }
body.phone .backdrop .modal { max-width: 100vw; width: 100vw; max-height: 92dvh; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body.phone .modal.wide { width: 100vw; }

.more-sheet { display: flex; flex-direction: column; gap: 14px; padding: 6px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-tile { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg3); border: 0; min-height: 84px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 0 var(--hi), inset 0 -3px 0 0 var(--lo); cursor: pointer; position: relative; }
.more-tile.on { color: #2b1d10; background: var(--accent); }
.more-tile span { text-box: trim-both cap alphabetic; line-height: 1; }

.phone-home { display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 28px; min-height: 100%; background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(120,150,255,.12), transparent 70%); }
.ph-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 4px 4px 0; }
.ph-hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ph-win { box-shadow: 0 0 24px rgba(120,150,255,.25); }
.ph-neon canvas { filter: drop-shadow(0 0 8px rgba(255,190,60,.6)); }
.ph-h { font-size: 20px; font-weight: 700; text-box: trim-both cap alphabetic; line-height: 1; }
.ph-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 0; }
.ph-more { font: inherit; font-size: 13px; color: var(--accent); background: none; border: 0; min-height: 44px; padding: 0 6px; cursor: pointer; }
.ph-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 14px; margin: 0 -12px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ph-row::-webkit-scrollbar { display: none; }
.ph-case { flex: none; scroll-snap-align: start; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 4px; min-height: 44px; }
.ph-case.locked { opacity: .55; }
.ph-ped { position: relative; }
.ph-ped .ped-crate-wrap, .ph-ped .ped-base { position: absolute; }
.ph-cname { font-size: 14px; text-align: center; line-height: 1.1; min-height: 2.2em; display: grid; place-items: center; }
.ph-price { font-size: 14px; }
.ph-price .lock { color: var(--muted); }
.ph-daily { display: flex; align-items: center; gap: 16px; padding: 16px 18px 20px; width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer; overflow: hidden; }
.ph-daily-art { flex: none; position: relative; }
.ph-daily .daily-glow { position: absolute; left: 4px; top: 50%; width: 110px; height: 110px; margin-top: -55px; pointer-events: none; }
.ph-daily-txt { display: flex; flex-direction: column; gap: 8px; position: relative; }
.ph-free { align-self: flex-start; color: #1c1405; background: var(--accent); padding: 6px 10px; box-shadow: 0 0 0 3px var(--ink); font-weight: 700; text-box: trim-both cap alphabetic; }
.ph-best { padding: 4px; width: 100%; display: flex; justify-content: center; }
.ph-frames { display: flex; gap: 10px; justify-content: center; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ph-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-height: 104px; padding: 10px 4px 8px; background: var(--bg2); box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 0 var(--hi), inset 0 -3px 0 0 var(--lo) !important; }
.ph-art { display: flex; align-items: flex-end; justify-content: center; min-height: 56px; }
.ph-name { font-size: 13px; text-align: center; line-height: 1.1; }

@media (hover: none) {
  .hot-label { display: none; }
  .hot:hover > canvas, .hot:hover > .fb { filter: none; transform: none; }
}

.home-widgets { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; padding: 18px 20px 24px 6px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; z-index: 2; scrollbar-width: none; background: linear-gradient(90deg, transparent, rgba(5,4,10,.55) 18px); }
.wg { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer; position: relative; overflow: hidden; flex: none; }
.wg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wg-title { font-size: 18px; font-weight: 700; text-box: trim-both cap alphabetic; line-height: 1; }
.wg-sub { font-size: 12px; color: var(--muted); text-box: trim-both cap alphabetic; line-height: 1; }
.wg-bar { height: 8px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.wg-fill { height: 100%; background: var(--accent); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.wg-list { display: flex; flex-direction: column; gap: 10px; }
.wg-q { display: flex; flex-direction: column; gap: 5px; }
.wg-q.done { opacity: .5; }
.wg-q.ready .wg-fill { background: var(--good); }
.wg-qt { font-size: 13px; line-height: 1.15; }
.wg-streak { display: flex; align-items: baseline; gap: 10px; }
.wg-big { font-size: 34px; color: var(--accent); font-weight: 700; text-box: trim-both cap alphabetic; line-height: 1; }
.wg-val { display: flex; }
.wg-daily { flex-direction: row; align-items: center; gap: 14px; }
.wg-daily .daily-glow { position: absolute; left: 6px; top: 50%; width: 120px; height: 120px; margin-top: -60px; pointer-events: none; }
.wg-daily-art { flex: none; position: relative; }
.wg-daily-txt { display: flex; flex-direction: column; gap: 8px; position: relative; }
.wg-free { align-self: flex-start; color: #1c1405; background: var(--accent); padding: 6px 10px; box-shadow: 0 0 0 3px var(--ink); font-weight: 700; text-box: trim-both cap alphabetic; line-height: 1; }
.ph-widgets { display: flex; flex-direction: column; gap: 12px; }

.home-widgets.drawer { transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.9,.25,1); background: linear-gradient(90deg, transparent, rgba(5,4,10,.82) 18px); z-index: 4; }
.home-widgets.drawer.open { transform: none; }
.wg-toggle { position: absolute; right: 14px; top: 12px; z-index: 5; min-width: 88px; }
.wg-toggle.on { right: 366px; }
.wg-toggle.pip::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; background: var(--bad); box-shadow: 0 0 0 2px var(--ink); }
.home-widgets.drawer { top: 62px; }

body.pc .hud.on-home .hud-nav { opacity: 1; pointer-events: auto; transform: none; }
.nav-key { font-size: 10px; color: var(--muted); margin-left: 2px; opacity: .8; text-box: trim-both cap alphabetic; }

@media (max-width: 2200px) and (min-width: 761px) {
  body.pc .nav-btn > span { display: none; }
  body.pc .nav-btn { padding: 10px 9px; }
  body.pc .hud-nav { margin-left: 0; gap: 2px; }
  body.pc .hud-brand > span { display: none; }
}

body.phone .vault-room { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.phone .vault-side, body.phone .inv-area { min-width: 0; }
body.phone .vault-side { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
body.phone .vault-side .vault-door { display: none; }
body.phone .vault-stats { flex-direction: row; justify-content: space-between; align-self: auto; flex: 1 1 100%; padding: 10px 14px; }
body.phone .vault-side .chips { max-width: none; flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 4px 2px 8px; scrollbar-width: none; }
body.phone .vault-side .chips::-webkit-scrollbar { display: none; }
body.phone .chip { flex: none; min-width: 44px; justify-content: center; }
body.phone .inv-area { touch-action: pan-y; padding: 2px; min-height: 0; }
body.phone .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.phone .inv-grid .card:hover { transform: none; filter: none; }
body.phone .card.armed { transform: scale(1.05); filter: brightness(1.2); }
body.phone .card.sel { outline: 3px solid var(--accent); outline-offset: 1px; }
body.phone .selbar { bottom: calc(var(--bot) + 10px); width: calc(100vw - 16px); min-width: 0; flex-wrap: wrap; padding: 8px 10px 12px; gap: 8px; }
body.phone .selbar .sel-info { flex: 1 1 100%; }
body.phone .selbar .btn { flex: 1; }
body.phone .sellzone { bottom: calc(var(--bot) + 10px); width: calc(100vw - 24px); height: 84px; }
body.phone .card-skin { font-size: 14px; }
body.phone .card-foot { padding: 6px 8px 12px; }

body.phone .selbar:not(.show), body.phone .sellzone:not(.show) { translate: -50% calc(100% + var(--bot) + 40px); }
body.phone .hud-level .lv-badge { font-size: 12px; }
body.phone .hud-level .xp-slot { display: none; }
body.phone .hud-level { gap: 8px; max-width: 46%; }
body.phone .xp-bar { min-width: 36px; }
body.phone .hud-desktop, body.phone .hud-extra, body.phone [class*="desk"] .hud-btn { display: none; }

body.phone .hud .grow { display: none; }
body.phone .hud-level, body.phone .hud-coins { margin: 0; align-self: center; }
body.phone .hud-level { flex: 1 1 0; max-width: none; }
body.phone .hud-coins { flex: 1 1 0; justify-content: center; }

.phone-home .wall-frame { position: relative; left: auto !important; top: auto; flex: none; }
.wg-bar { background: color-mix(in srgb, var(--bg3) 70%, #000); }

body.phone .screens::before { display: none; }
body.phone .stage { align-items: center; justify-content: center; overflow: hidden; }
body.phone .stage-box { width: 100vw; max-width: 100vw; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); gap: 10px; transform-origin: 50% 50%; }

body.phone .insp-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.phone .insp-stage { min-height: 200px; }
body.phone .insp-slot { width: 52px; height: 52px; }
body.phone .sticker-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 56vh; }
body.phone .inspect { gap: 12px; }
body.phone .insp-row { gap: 10px; }
body.phone .insp-hint { bottom: 0; }

.sheet-grip { display: none; }
body.phone .sheet-grip { display: flex; justify-content: center; align-items: center; height: 28px; margin: -4px 0 4px; touch-action: none; cursor: grab; flex: none; overflow: visible; }
body.phone .sheet-grip i { display: block; width: 56px; height: 6px; background: var(--muted); box-shadow: 0 0 0 2px var(--ink); }
body.phone .modal > .sheet-grip { padding: 0; position: sticky; top: 0; z-index: 3; background: inherit; }

.k-button .more-tile, .k-button .ph-tile { color: #2b1d10; }
.k-tab_on .tab-btn.on { color: #2b1d10; }
body.phone .tabbar { padding-top: 0; padding-bottom: env(safe-area-inset-bottom); }
.tab-btn { min-height: 0; padding: 2px 0 0; gap: 4px; }
.k-tab_on .tab-btn.on::after { display: none; }
.k-panel_wood .tabbar { box-shadow: none; }