/* Desktop Crafter layout finishing — profile, inventory, offers, cart, Arena.
   The original <=1023px mobile controls are intentionally unchanged. */
@media (min-width:1024px) {
  /* The Arena stake bar used to be fixed to the viewport like a phone dock.
     In the desktop shell it is a normal block, centered under the board. */
  #app.arena-view #main {
    width:100%!important;
    min-width:0!important;
    padding-bottom:42px!important;
  }
  #app.arena-view .arena-page {
    display:block;
    width:100%!important;
    max-width:min(860px,100%)!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:0 0 25px!important;
  }
  #app.arena-view .arena-table {
    width:min(100%,760px)!important;
    max-width:760px!important;
    margin:0 auto!important;
    min-width:0!important;
  }
  #app.arena-view .arena-board-frame,
  #app.arena-view .arena-board-viewport,
  #app.arena-view .arena-board {max-width:100%!important}
  #app.arena-view .arena-page:not(.arena-private-lobby)>.arena-dock {
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:min(100%,760px)!important;
    max-width:760px!important;
    min-width:0!important;
    margin:22px auto 26px!important;
    padding:13px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,#ffffff11,#ffffff03 60%),#222326d9!important;
    border:1px solid #ffffff35!important;
    box-shadow:inset 0 1px #ffffff20,0 12px 35px #0005!important;
    backdrop-filter:blur(18px) saturate(.8);
    -webkit-backdrop-filter:blur(18px) saturate(.8);
  }
  #app.arena-view .arena-page:not(.arena-private-lobby)>.arena-dock>.arena-modes {
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:100%!important;min-height:42px!important;
    margin:0 0 12px!important;
    padding:0!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    flex-wrap:wrap!important;gap:9px!important;
    pointer-events:auto!important;
  }
  #app.arena-view .arena-page:not(.arena-private-lobby) .arena-dock>.arena-actions{
    display:flex!important;
    width:100%!important;min-width:0!important;
    align-items:center!important;gap:9px!important;
    flex-wrap:wrap!important;
  }
  #app.arena-view .arena-page:not(.arena-private-lobby) .arena-actions button {
    min-width:0!important;
    min-height:46px!important;
    border-radius:15px!important;
    flex:1 1 165px!important;
    font-size:clamp(12px,.95vw,15px)!important;
  }
  #app.arena-view .arena-page:not(.arena-private-lobby) .arena-actions .arena-pencil {
    flex:0 0 42px!important;
  }
  #app.arena-view .arena-page:not(.arena-private-lobby) .arena-room-tabs button{
    font-size:12px!important;
    padding:7px 16px!important;
  }
  #app.arena-view .arena-roster-heading,
  #app.arena-view .arena-players {
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
  #app.arena-view .arena-private-lobby {
    max-width:min(760px,100%)!important;
    margin:0 auto!important;
  }
  #app.arena-view .arena-private-lobby .arena-private-dock {
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;width:100%!important;max-width:760px!important;
    margin:20px auto 28px!important;
    background:linear-gradient(140deg,#ffffff12,#ffffff05),#242528c9!important;
    border:1px solid #ffffff26!important;border-radius:19px!important;
    padding:11px!important;
  }
  #app.arena-view .arena-private-lobby #arena-private-list,
  #app.arena-view .arena-private-lobby .arena-private-group-list {margin-bottom:18px!important}
  /* The Arena Info button is retired; header balance stays visible. */
  #app.arena-view > header > .arena-rules-button {display:none!important}
  #app.arena-view > header > .balance {margin-left:auto!important}
  /* Craft's Info belongs at the far right in the same line as the balance,
     below the winter garland (and never absolute over the decoration). */
  #app:not(.craft-view) > header > .craft-header {display:none!important}
  #app.craft-view > header > .balance {order:50!important;margin-left:auto!important}
  #app.craft-view > header > .craft-header{
    display:flex!important;align-items:center!important;justify-content:center!important;
    order:60!important;position:static!important;inset:auto!important;
    transform:none!important;flex:0 0 38px!important;
    width:38px!important;margin:0 0 0 8px!important;z-index:4!important;
  }
  #app.craft-view > header > .craft-header .info-btn{
    display:grid!important;place-items:center!important;
    width:36px!important;height:36px!important;min-width:36px!important;
    padding:0!important;margin:0!important;
    border:1px solid #ffffff4b!important;border-radius:50%!important;
    background:linear-gradient(150deg,#ffffff26,#ffffff0b),#27282caa!important;
    color:#fff!important;font-size:15px!important;font-weight:800!important;
    box-shadow:inset 0 1px #ffffff22!important;
    backdrop-filter:blur(12px);
  }
  /* All gift containers keep regular 7-column cards by default.
     The offers panel deliberately gets larger 5/6-column cards. */
  #main .grid:has(> .collection-offer-card):not(.list) {
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:clamp(11px,1.1vw,16px)!important;
  }
  #main .grid:has(> .collection-offer-card):not(.list) > .collection-offer-card {
    width:100%!important;min-width:0!important;
    padding:clamp(12px,1.1vw,17px)!important;
    border-radius:19px!important;
    gap:9px!important;
    background:linear-gradient(145deg,#ffffff17,#ffffff04 65%),#27282cd6!important;
    border:1px solid #ffffff37!important;
    box-shadow:inset 0 1px #ffffff1f,0 9px 19px #0003!important;
  }
  #main .grid:has(> .collection-offer-card) > .collection-offer-card > img{
    width:min(100%,168px)!important;max-width:100%!important;
    aspect-ratio:1!important;height:auto!important;object-fit:contain!important;
    display:block!important;margin:0 auto 4px!important;
  }
  #main .grid:has(> .collection-offer-card) > .collection-offer-card > strong{
    font-size:clamp(17px,1.45vw,24px)!important;
  }
  #main .grid:has(> .collection-offer-card) > .collection-offer-card > small{
    font-size:12px!important;min-height:30px!important;
  }
  #main .grid:has(> .collection-offer-card) > .collection-offer-card button{
    min-height:39px!important;font-size:12px!important;border-radius:13px!important;
  }
  /* Fix the old 510px-centered inventory bank in the desktop sidebar layout. */
  #app #inventory-body .inventory-bank-float {
    position:fixed!important;
    right:clamp(20px,2.5vw,48px)!important;
    left:auto!important;
    bottom:clamp(20px,3dvh,37px)!important;
    transform:none!important;
    z-index:20!important;
    max-width:min(285px,calc(100vw - 320px))!important;
    width:max-content!important;min-width:155px!important;
    display:flex!important;align-items:center!important;gap:9px!important;
    padding:10px 14px!important;
    border-radius:17px!important;
    border:1px solid #ffffff4a!important;
    background:linear-gradient(145deg,#ffffff1f,#ffffff08),#25262bdc!important;
    color:#f5f5f6!important;
    box-shadow:inset 0 1px #ffffff2a,0 9px 25px #0006!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    pointer-events:none;
  }
  #app #inventory-body .inventory-bank-float span{min-width:0}
  #app #inventory-body .inventory-bank-float b{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:210px;display:block;
  }
  /* Cart checkout is an upper-right action alongside select/clear, not a
     floating mobile payment slab obstructing the desktop content. */
  #app.cart-view #main {min-width:0!important}
  #app.cart-view #main .cart-heading{max-width:none!important}
  #app.cart-view #main .cart-tools{
    display:grid!important;grid-template-columns:auto auto minmax(180px,1fr)!important;
    align-items:center!important;justify-content:stretch!important;
    gap:12px!important;min-width:0;
    margin:0 0 18px!important;
  }
  #app.cart-view #main .cart-tools button{
    min-height:43px!important;padding:10px 14px!important;
    border:1px solid #ffffff31!important;border-radius:14px!important;
    background:linear-gradient(145deg,#ffffff16,#ffffff07),#25262a!important;
    color:#e9e9eb!important;font-size:12px!important;
    white-space:nowrap;
  }
  #app.cart-view #main .cart-tools .cart-pay-top{
    justify-self:end!important;min-width:165px!important;
    max-width:310px!important;width:100%!important;
    display:inline-flex!important;align-items:center;justify-content:center;gap:10px!important;
    background:linear-gradient(150deg,#ffffffea,#bfc1c5)!important;
    color:#191a1e!important;border:1px solid #fff!important;
    font-weight:830!important;font-size:14px!important;
    box-shadow:inset 0 1px #ffffffbe,0 8px 19px #0004!important;
  }
  #app.cart-view #main .cart-tools .cart-pay-top:disabled{opacity:.4!important;cursor:not-allowed}
  #app.cart-view #main .cart-tools .cart-pay-top>small{font-size:11px;opacity:.78}
  #app.cart-view #main .cart-checkout {
    position:relative!important;
    inset:auto!important;left:auto!important;bottom:auto!important;
    transform:none!important;width:100%!important;max-width:none!important;
    margin:17px 0 0!important;padding:16px!important;
    background:linear-gradient(145deg,#ffffff0c,#ffffff03),#202124c7!important;
    border:1px solid #ffffff30!important;border-radius:17px!important;
    box-shadow:inset 0 1px #ffffff1b!important;
    backdrop-filter:blur(13px);
  }
  #app.cart-view #main .cart-checkout #cart-pay{display:none!important}
  #app.cart-view main{padding-bottom:35px!important}
  #app.cart-view #main .cart-row{border-radius:17px!important}
}
@media(min-width:1750px){
  #main .grid:has(> .collection-offer-card):not(.list){
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
}
@media(min-width:1024px) and (max-width:1250px){
  #app.cart-view #main .cart-tools {
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  #app.cart-view #main .cart-tools .cart-pay-top {
    grid-column:1/-1!important;
    width:100%!important;max-width:none!important;
  }
  #app.arena-view .arena-page{max-width:700px!important}
}
@media(max-width:1023.98px){
  .cart-pay-top{display:none!important}
}