/* Home: the wall is the page. It fills the window under the header, and the case card, the activity log
   and the sticker strip float over it. Narrow screens keep the stacked layout. */
#view-wall .favorite-grid{scrollbar-width:none}
#view-wall .favorite-grid::-webkit-scrollbar{display:none}
/* «Все» is its own fixed cell at the right; the strip scrolls and is clipped before it */
#view-wall .favorite-row{display:flex;gap:10px;min-height:0;flex:1}
#view-wall .favorite-row .favorite-grid{flex:1;min-width:0}
#view-wall .favorite-all{flex:none;width:82px;border:1px solid #364157;border-radius:10px;background:#161b24;color:var(--accent-text,#b8c4ff);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
#view-wall .favorite-all:hover{color:#fff;border-color:#5b6b8c}

/* carousel arrows: bare chevrons inside the card, same click area as before */
/* centred on the whole card, not on the carousel inside it */
#view-wall .featured-case{position:relative}
#view-wall .case-carousel{position:static}
#view-wall .case-carousel-arrow{top:50%;width:26px;height:44px;border:0;background:none;color:#8f9bb0;text-shadow:0 1px 6px #000c;transition:color .15s,transform .15s}
#view-wall .case-carousel-arrow:hover{background:none;color:#fff}
#view-wall .case-carousel-arrow.previous{left:0}
#view-wall .case-carousel-arrow.next{right:0}
#view-wall .case-carousel-arrow.previous:hover{transform:translateY(-50%) translateX(-2px)}
#view-wall .case-carousel-arrow.next:hover{transform:translateY(-50%) translateX(2px)}

@media (min-width:901px){
  body[data-view=wall]{overflow:hidden;--strip:132px;--side:306px}
  body[data-view=wall] main{width:100%;max-width:none;margin:0;padding:0}
  #view-wall{position:fixed;inset:62px 0 0 0;min-height:0;animation:none}
  #view-wall .play-layout{display:block;position:absolute;inset:0}
  #view-wall .wall-card{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;background:none;overflow:hidden}
  #view-wall .wall-viewport{height:100%;min-height:0;border:0;border-radius:0}

  /* what used to sit on the canvas edges moves clear of the floating panels */
  #view-wall .wall-topline{right:calc(var(--side) + 28px)}
  #view-wall .target-info{left:66px;right:auto;top:64px}
  #view-wall .placement-tools{bottom:calc(var(--strip) + 26px)}

  /* case card: same card, about 300px wide */
  #view-wall .sidebar{position:absolute;right:14px;top:14px;z-index:8;width:var(--side);display:flex;flex-direction:column;gap:10px;height:auto;pointer-events:none}
  #view-wall .sidebar>*{pointer-events:auto}
  #view-wall .sidebar .panel{padding:11px 12px;box-shadow:0 10px 30px #0007}
  #view-wall .featured-case .panel-heading{margin-bottom:4px;font-size:11px}
  /* one case, shown large: chest, name, price, button. The contents live behind «Состав коллекции». */
  #view-wall .featured-case .case-feature{grid-template-columns:minmax(0,1fr);gap:4px;min-height:0;text-align:center}
  #view-wall .featured-case .case-render{height:176px}
  #view-wall .featured-case .case-copy h3{font-size:19px;line-height:1.15;margin:0 0 4px}
  #view-wall .featured-case .case-copy p{font-size:13px;margin:0 0 12px}
  #view-wall .featured-case .case-actions{display:flex;gap:8px;align-items:stretch;justify-content:center}
  #view-wall .featured-case .case-actions .price{font-size:17px;padding:0 14px;min-height:44px}
  #view-wall .featured-case .case-actions .primary{flex:1;font-size:15px;padding:0 14px;min-height:44px}
  #view-wall .featured-case .subheading,#view-wall .featured-case .odds{display:none}
  #view-wall .sidebar .activity-panel{min-height:0;font-size:11px}
  #view-wall .activity-panel h2{font-size:12px}
  /* the map sits bottom-left: the right column belongs to the case card and the activity log, whatever their height */
  #view-wall .minimap-wrap{left:12px;right:auto;bottom:calc(var(--strip) + 26px)}

  /* sticker strip: one row of small tiles along the bottom */
  #view-wall .favorites-panel{position:absolute;left:12px;right:12px;bottom:12px;z-index:8;height:var(--strip);min-height:0;margin:0;padding:9px 12px 10px;box-shadow:0 10px 30px #0007}
  #view-wall .favorites-panel .panel-heading{margin:0 0 7px;font-size:11px}
  #view-wall .favorites-panel h2{font-size:12px;margin:0}
  #view-wall .favorite-grid{grid-auto-columns:calc((100% - (var(--fit,12) - 1)*8px)/var(--fit,12));gap:8px;padding:1px 0;scroll-snap-type:x mandatory;scroll-padding:0}
  #view-wall .favorite-card{scroll-snap-align:start}
  #view-wall .favorite-card{position:relative;height:82px;padding:5px;border-bottom:3px solid var(--rarity-color)}
  #view-wall .favorite-art{height:100%}
  #view-wall .favorite-card h3,#view-wall .favorite-card p,#view-wall .favorite-meta b{display:none}
  #view-wall .favorite-meta{position:absolute;right:3px;top:3px;margin:0;padding:0;border:0}
  #view-wall .favorite-all{height:82px;margin-top:1px}
  body[data-view=wall] .toast{bottom:calc(var(--strip) + 28px);max-width:min(640px,calc(100vw - 2*var(--side) - 56px))}
  /* with a sticker in hand the bar of that sticker stands on the same spot: the toast goes above it */
  body[data-view=wall]:has(#placementTools:not([hidden])) .toast{bottom:calc(var(--strip) + 100px)}
  #view-wall .favorite-meta span{display:block;padding:1px 6px;border-radius:99px;background:#0b111aeb;color:#fff;font-size:10px;font-weight:700}
}
@media (min-width:901px) and (max-height:790px){
  #view-wall .sidebar .activity-panel{display:none}
}

/* Header nickname: the name is a button, one click turns it into an input in the same place. */
.mini-profile{cursor:default}
.mini-profile-avatar,.nick-button{border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;display:flex;align-items:center;gap:6px}
.nick-button strong{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-button span{color:var(--muted);font-size:12px}
.nick-button:hover:not(:disabled) strong{text-decoration:underline}
.nick-button:disabled{cursor:default}.nick-button:disabled span{display:none}
.nick-form{display:flex;margin:0}
.nick-form input{width:150px;height:28px;padding:0 8px;border:1px solid var(--control-line);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:600}
.target-info p{overflow-wrap:anywhere}
/* Saving progress: a small quiet entry after the nickname; on narrow headers only its sign stays. */
.save-button{border:0;background:none;padding:0 0 0 4px;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.save-button b{font-weight:600}.save-button:hover b{text-decoration:underline}.save-button.saved{color:#58b97a}
.save-dialog{width:min(440px,calc(100% - 32px))}
.save-panel{display:grid;gap:12px;justify-items:start}.save-panel p{margin:0}.save-panel .save-note{color:var(--muted);font-size:11px}
.save-panel .save-google{min-height:44px;color-scheme:light}.save-panel .save-error{color:#ff8f8f}.save-panel .save-done{color:#58b97a}
.save-panel .save-actions{display:flex;flex-wrap:wrap;gap:8px}
.save-panel button{height:34px;padding:0 14px;border:1px solid var(--control-line);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.save-panel .save-go{background:#8d46ff;border-color:#8d46ff;color:#fff}
.save-inline{border:0;background:none;padding:0;color:#ad6eff;font:inherit;text-decoration:underline;cursor:pointer}
.toast.action.show{pointer-events:auto;cursor:pointer}
/* Retention: collection progress and the free daily case on the case cards. */
.case-progress{display:block;margin:0;color:var(--muted);font-size:11px}.featured-case .case-progress{margin-top:8px}
.daily-entry{display:block;width:100%;margin-top:4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;text-align:inherit;cursor:pointer}
.daily-entry.ready{color:#58b97a;font-weight:700;text-decoration:underline}.case-card .daily-entry{margin-top:10px;text-align:left}
@media(max-width:1500px){.save-button b{display:none}.save-button{font-size:15px}}
/* Header columns. The menu column is never narrower than the menu, or the search would lie over its last item. */
.topbar{grid-template-columns:auto minmax(max-content,1fr) minmax(120px,210px) auto auto}
/* Narrow header: the avatar goes, the nickname stays, so it can be seen and changed at any width. */
@media(max-width:1350px){.topbar{grid-template-columns:auto minmax(max-content,1fr) minmax(0,190px) auto auto}.topbar .mini-profile{padding:0 10px 0 0}.topbar .mini-profile-avatar{display:none}}
@media(max-width:1080px){.topbar{grid-template-columns:auto 1fr auto auto}}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto auto}.topbar .mini-profile{grid-column:2;grid-row:1}.topbar .balance{grid-column:3}}
@media(max-width:650px){.topbar .mini-profile{padding:0 6px 0 0;border-right:0}.nick-button strong{max-width:96px}.nick-form input{width:110px}}
@media(max-width:480px){.topbar .brand-name{display:none}}

/* guarantee line on case cards, shield extension in the sticker card, the list of the longest-standing stickers */
.case-guarantee{display:block;flex-basis:100%;margin-top:4px;font-size:11px;line-height:1.35;color:#8f9bb0;cursor:help}
.target-info{pointer-events:auto}
.extend-button{display:block;width:100%;margin-top:8px;padding:7px 10px;border:1px solid #c9a227;border-radius:8px;background:#fff8e1;color:#5c4300;font:600 12px/1.2 inherit;cursor:pointer}
.extend-button:hover{background:#ffefb8}
.leaders{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:leader}
.leaders li{counter-increment:leader}
.leaders button{display:grid;grid-template-columns:22px 44px 1fr auto;align-items:center;gap:10px;width:100%;padding:6px 10px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff08;color:inherit;text-align:left;cursor:pointer}
.leaders button::before{content:counter(leader);color:#8f9bb0;font-size:12px;text-align:right}
.leaders button:hover{background:#ffffff14}
.leaders img{width:44px;height:44px;object-fit:contain}
.leaders span{display:grid;min-width:0}
.leaders strong,.leaders small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaders small{color:#8f9bb0;font-size:12px}
.leaders b{font-size:13px;white-space:nowrap}

/* the charge button and the lists of the day */
.favorites-panel .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.charge-button{padding:6px 12px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0a;color:#8f9bb0;font:600 12px/1.2 inherit;white-space:nowrap}
.charge-button.ready{border-color:#57c98a;background:#57c98a26;color:#bff3d6;cursor:pointer}
.charge-button.ready:hover{background:#57c98a40}
.leaders-title{margin:14px 0 6px;font-size:13px;color:#8f9bb0;font-weight:600}
.leaders-title:first-child{margin-top:0}
.leaders.day div{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:6px 10px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff08}
.leaders.day div::before{content:counter(leader);color:#8f9bb0;font-size:12px;text-align:right}
.leaders .none{color:#8f9bb0;font-size:13px;counter-increment:none}

/* Desktop header, with the columns set above: nothing leaves the window or runs into its neighbour, whatever the
   nickname and the balance. On a narrower window the menu tightens its gaps, then the search gives way, then the
   «beta» mark and a part of a long nickname. The last resort is a menu that scrolls. */
@media(min-width:901px) and (max-width:1350px){.topbar .nav{justify-content:space-between;gap:14px;max-width:470px;min-width:0;overflow-x:auto;scrollbar-width:none}.topbar .nav::-webkit-scrollbar{display:none}.topbar .search{overflow:hidden}}
@media(min-width:901px) and (max-width:1220px){.topbar .beta{display:none}.nick-button strong{max-width:120px}.nick-form input{width:120px}}
@media(min-width:901px) and (max-width:1150px){.nick-button strong{max-width:96px}.nick-form input{width:110px}}
@media(min-width:901px) and (max-width:1000px){.topbar .nav{gap:6px;max-width:445px}.nav-link{font-size:13px}}

/* Phone header: all six menu items fit in one row from 360px up. */
@media(max-width:480px){.topbar .nav{gap:6px;justify-content:space-between}}
@media(max-width:380px){.nav-link{font-size:11.5px}}

/* The «×N» of an owned card is painted over the picture, not under it. */
.copy-count{z-index:2}

/* A toast is as wide as its text, up to the screen; it used to be squeezed into the half right of the centre. */
.toast{width:max-content;max-width:min(640px,calc(100vw - 24px))}

/* Dialogs. Rules and leaders are long: the head with the close button stays in view while they scroll.
   The case dialog keeps its buttons in view on a short screen, and its chest takes less of one. */
.rules-dialog .dialog-head{position:sticky;top:0;z-index:2;background:var(--surface)}
.case-dialog{max-height:95dvh}
.case-dialog .dialog-actions{position:sticky;bottom:0;z-index:6;background:var(--surface)}
@media(max-height:700px){.case-stage{height:112px}.case-stage .case-render{width:150px;height:100px}}
@media(max-height:640px){.case-stage{height:64px}.case-stage .case-render{width:96px;height:64px}}
@media(max-width:600px){.rules-dialog .dialog-head{padding:16px 17px 12px}}

/* Narrow screens: the filters wrap two in a row so their labels are whole; the rules table fits without a sideways scroll. */
@media(max-width:600px){
  .catalog-filters select{flex:1 1 150px;width:auto;padding:11px 8px}
  .rules-dialog th{white-space:normal}
  .rules-dialog th,.rules-dialog td{padding:8px 5px}
  .rules-dialog td{font-size:12px}
}
/* Leaders of the day: a long nickname wraps instead of running into the number. */
.leaders.day div{grid-template-columns:22px minmax(0,1fr) auto}
.leaders.day span{display:block;overflow-wrap:anywhere}

/* Touch: fields at 16px (iOS zooms the page into anything smaller) and tap areas of at least 36px.
   Where a bigger box would move the layout, the area grows invisibly around the control instead. */
@media(pointer:coarse){
  .catalog-filters input,.catalog-filters select,.report-dialog select,.nick-form input,.search input{font-size:16px}
  .nick-button,.daily-entry,.extend-button,.report-button,.case-carousel-heading>button{min-height:36px}
  .save-button,.balance button,.charge-button{position:relative}
  .save-button::after{content:"";position:absolute;inset:-8px -9px}
  .balance button::after{content:"";position:absolute;inset:-7px}
  .charge-button::after{content:"";position:absolute;inset:-6px 0}
  .case-carousel-heading .case-carousel-auto{width:36px;height:36px;font-size:12px}
  .sound-toggle{min-height:36px;padding:0 10px}
  .collection-card a.source-link{margin-top:4px;line-height:36px}
  .report-button{margin-top:4px;padding:0}
}