/* css/pc-boxes.css - the PC page (js/ui/pc.js, DECISIONS 391): one box at a time as an 8 x 6
 * grid of squares (DECISIONS 551; the games' 6 x 5 until then), or every box stacked (DECISIONS 309); the box strip with its chips and arrows,
 * the switches, the extra row of a box over 30, drag & drop, the party tray, the filter (366) and a
 * scrollbar you can see. The card tiles are css/game.css's .pc-tile / .pc-grid; this file only adds
 * what is new. Load it after css/game.css. */

.pc-boxes-panel {
  --pc-pad: 14px;
  --pc-sticky-bg: #1a2338;   /* solid: tiles scroll underneath the sticky parts */
  --pc-cell: 56px;           /* one square at most; 8 x 56 + 7 x 4 = 476 px on a PC (48 until DECISIONS 553 gave the party's
                                room to the boxes), narrower screens shrink it (551) */
  --pc-icon: 42px;           /* the box icon on it at most (36 at 48 px squares) */
  padding: var(--pc-pad);
  /* No blur on this panel: hundreds of tiles scroll under it (bug H; the ladder lost it in 286 too). */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The switches, Filter and Release… stick to the top of the view's scroller while you scroll
 * through the boxes. The negative margins cover the panel padding, so no tile peeks out beside it. */
.pc-boxes-panel > .pc-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: calc(-1 * var(--pc-pad)) calc(-1 * var(--pc-pad)) 10px;
  padding: 8px var(--pc-pad);
  background: var(--pc-sticky-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
}
.pc-bar .panel-title { margin: 0; }

/* One box | All boxes, Icons | Cards: a segmented switch, the pressed half filled. */
.pc-seg { display: inline-flex; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; }
.pc-seg .btn { min-height: 28px; padding: 3px 10px; border: 0; border-radius: 0; background: transparent; font-size: 0.78rem; }
.pc-seg .btn + .btn { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.pc-seg .btn[aria-pressed="true"] { background: var(--accent); color: #fff; }
.pc-tools .btn.on { border-color: var(--accent); color: var(--accent-light); }

/* ---- The box strip: ‹ [1 12] [2 30] … › and "Box 3 of 24 · 12 / 30" ---------------------------- */
.pc-strip { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.pc-strip-row { display: flex; align-items: center; gap: 6px; }
.pc-strip-list {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: auto;
  scrollbar-color: #8a96b0 #141b2c;
}
.pc-strip-list::-webkit-scrollbar { height: 8px; }
.pc-strip-list::-webkit-scrollbar-thumb { background: #8a96b0; border-radius: 999px; }
.pc-strip-list::-webkit-scrollbar-track { background: #141b2c; border-radius: 999px; }
/* (`.pc-chip` is the filter's chip in js/ui/pc-filter.js - these are `.pc-box-chip`.) */
.pc-box-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 28px;
  padding: 2px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.pc-box-chip:hover:not(:disabled), .pc-box-chip:focus-visible { border-color: var(--accent); }
.pc-box-chip:disabled { opacity: 0.5; cursor: default; }
.pc-box-chip-no { font-weight: 800; }
.pc-box-chip-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-box-chip.is-current { border-color: var(--accent); background: rgba(214, 69, 69, 0.24); }
/* The box new catches go to: a green dot after its number (the marker of 309, small). */
.pc-box-chip.is-next .pc-box-chip-no::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--success, #4cd964); vertical-align: middle; }
.pc-box-chip.is-full .pc-box-chip-n { color: var(--danger, #e5484d); font-weight: 700; }
.pc-box-chip-hit { padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.66rem; font-weight: 700; }
.pc-arrow { flex: 0 0 auto; min-width: 32px; padding: 3px 6px; }
.pc-strip-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8rem; color: var(--muted); }
.pc-strip-label strong { color: var(--text, #fff); }
.pc-strip-label .pc-box-next { margin-left: 0; }

.pc-boxes { display: flex; flex-direction: column; gap: 16px; }
/* All boxes + Icons: the boxes side by side, as many as fit (owner, 26 September: "there is room for
 * several boxes next to each other"), each in its own frame with a plain title; one column on a phone. */
.pc-boxes-panel:not(.mode-one):not(.look-cards) .pc-boxes {
  display: grid;
  /* One 8-wide box (476 px + its frame and wallpaper padding) per column; never wider than the screen (551, 553). */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 516px), 1fr));
  gap: 12px 16px;
  align-items: start;
}
.pc-boxes-panel:not(.mode-one):not(.look-cards) .pc-box {
  padding: 8px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.pc-boxes-panel:not(.mode-one):not(.look-cards) .pc-box.is-next { border-color: var(--success, #4cd964); }
.pc-boxes-panel:not(.mode-one):not(.look-cards) .pc-box-head { position: static; margin: 0 0 6px; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* All boxes + Cards: the title of a box sticks just under the bar (--pc-bar-h is measured by pc.js)
 * while you are inside that (tall) box - the box name at the top of the games' box screen. Sections
 * off screen skip their layout work (content-visibility, bug H). */
.pc-box-head {
  position: sticky;
  top: var(--pc-bar-h, 48px);
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 calc(-1 * var(--pc-pad)) 8px;
  padding: 6px var(--pc-pad);
  background: var(--pc-sticky-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pc-boxes-panel:not(.mode-one) .pc-box { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* One box: the section is alone and the strip's line "Box 3 of 24 · 12 / 30" is its title. */
.pc-boxes-panel.mode-one .pc-box-head { display: none; }
.pc-box-title { font-weight: 800; font-size: 0.95rem; }
.pc-box-count { font-size: 0.8rem; color: var(--muted, #b8c0d4); font-variant-numeric: tabular-nums; }
/* 30 / 30 (or more, from before the limit): takes no new Pokémon. */
.pc-box-count.full { color: var(--danger, #e5484d); font-weight: 700; }

/* "New catches go here": the box PokemonFactory::boxForNew picks. */
.pc-box-next {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  color: #0d2413;
  background: var(--success, #4cd964);
}
.pc-box.is-next > .pc-box-head { box-shadow: inset 3px 0 0 var(--success, #4cd964); }
.pc-box-empty { margin-top: 8px; }

/* The box picker ("Move to…" / "Deposit in…"): 24 boxes as a compact grid instead of a long list. */
.picker-list.box-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.box-picker .picker-row { padding: 8px 10px; }
.box-picker .picker-row.full .muted { color: var(--danger, #e5484d); }
.box-picker .picker-row.next:not(:disabled) { border-color: var(--success, #4cd964); }
.box-picker .pc-box-next { margin: 3px 0 0; padding: 0 7px; font-size: 0.66rem; }

/* ---- The squares: the 8 x 6 box (Icons look, DECISIONS 551) ------------------------------------
 * --pc-cols comes from the server (pc?all=1 `columns`, set on the panel by pc.js). Each column is at most
 * --pc-cell and shrinks with the screen (minmax(0, ...)): 8 squares of 36 px on a 360 px phone, 31 px on a
 * 320 px one, so the box never runs off the side. The square stays square (aspect-ratio) and the icon
 * scales with it (cqi = the square's own width). */
.pc-grid.icons { grid-template-columns: repeat(var(--pc-cols, 8), minmax(0, var(--pc-cell))); gap: 4px; justify-content: start; }
.pc-grid.icons .pc-mini { width: 100%; height: auto; min-width: 0; aspect-ratio: 1; container-type: inline-size; }
.pc-grid.icons .pc-mini .sprite-wrap img { width: min(var(--pc-icon), 78cqi); height: min(var(--pc-icon), 78cqi); }
.pc-mini {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pc-cell);
  height: var(--pc-cell);
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--panel-2);
  color: inherit;
  cursor: pointer;
}
.pc-mini:hover:not(.empty), .pc-mini:focus-visible { border-color: var(--accent); background: var(--panel-3); }
.pc-mini .sprite-wrap img { width: var(--pc-icon); height: var(--pc-icon); max-width: 100%; object-fit: contain; }
.pc-mini.empty { border-style: dashed; background: rgba(255, 255, 255, 0.02); cursor: default; }
.pc-mini.empty:focus-visible { border-style: solid; }
.pc-mini.picked { box-shadow: 0 0 0 2px var(--danger); }
.pc-mini.locked { opacity: 0.6; outline: 1px dashed rgba(246, 201, 69, 0.75); outline-offset: -2px; }   /* the tooltip says why (DECISIONS 417) */
.pc-grid .pc-tile .pc-tile-lock { margin-top: 3px; padding: 0 7px; border-radius: 999px; background: rgba(246, 201, 69, 0.18); color: #f6c945; font-size: 0.62rem; font-weight: 600; white-space: nowrap; }   /* 600, not 800: it shouted (owner, 26 September) */
.pc-mini-lv {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000;
}
.pc-mini-marks { position: absolute; left: 3px; top: 2px; display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.pc-mini-form { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.pc-mini-form.shiny { background: #ffe07a; }
.pc-mini-form.golden { background: #ffb938; }
.pc-mini-form.dark { background: #a78bfa; }
.pc-mini-form.frozen { background: #8fe3ff; }
.pc-mini-form.shadow { background: #c8ccd8; }
.pc-mini-legend { font-size: 0.66rem; color: #f6c945; }
/* The IV pill (DECISIONS 396): the IV total as a percentage, coloured by the games' judge - gold =
 * Amazing / Best (151+), green = Fantastic (121+), blue = Very good (96+), the rest quiet. Top-right on a
 * square, after the level on a card; Amazing and Best also get a gold frame. */
.pc-iv { display: inline-block; padding: 1px 4px; border-radius: 6px; font-size: 0.54rem; font-weight: 800; line-height: 1.5; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.5); color: #9aa3b8; }
.pc-iv.iv-fair { background: rgba(255, 255, 255, 0.16); color: #e6e9f0; }
.pc-iv.iv-good { background: #8fe3ff; color: #0a2a36; }
.pc-iv.iv-fantastic { background: #4cd964; color: #0d2413; }
.pc-iv.iv-amazing, .pc-iv.iv-best { background: #f6c945; color: #2a1f00; }
.pc-iv.iv-best { box-shadow: 0 0 0 1px #fff3b0; }
.pc-mini .pc-iv { position: absolute; right: 1px; top: 1px; }
.pc-mini.iv-top { border-color: rgba(246, 201, 69, 0.85); }
.pc-grid .pc-tile.iv-top { border-color: rgba(246, 201, 69, 0.85); }
/* On a card: top-right corner, see-through and small (owner: "it may be less present"). */
.pc-grid.cards .pc-tile .lv .pc-iv { position: absolute; top: 5px; right: 5px; margin: 0; font-size: 0.5rem; padding: 0 4px; opacity: 0.72; }
.pc-mini .pc-iv { opacity: 0.85; }
/* The extra row: what a box holds past its last square (DECISIONS 309; db/install.php clears it up since 551). */
.pc-grid-overflow { margin-top: 8px; }
.pc-overflow-note { margin: 0 0 4px; }

/* The menu a square opens. */
.pc-mini-menu-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pc-mini-menu-head .types-row { display: inline-flex; margin: 3px 6px 0 0; }

/* ---- Cards look (owner, 26 September: "must be much nicer"): a 120 px card, the sprite a size
 * smaller, name / level + IV / types, and two full-width buttons under each other with a real button
 * face so their text reads. */
.pc-grid.cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pc-grid.cards .pc-tile { position: relative; gap: 3px; padding: 8px 6px 7px; font-size: 11.5px; }
/* The form label over the sprite's top-left corner, so a rare form never makes its card taller. */
.pc-grid.cards .pc-tile .pc-tile-form { position: absolute; top: 5px; left: 5px; z-index: 1; font-size: 8.5px; padding: 0 5px; line-height: 1.6; }
/* The buttons sit at the bottom of every card in a row (the cards stretch to the tallest one). */
.pc-grid.cards .pc-tile .tile-actions { margin-top: auto; padding-top: 3px; }
.pc-grid.cards .pc-tile .sprite-wrap img { width: 52px; height: 52px; object-fit: contain; }
.pc-grid.cards .pc-tile .name { font-size: 12px; }
.pc-grid.cards .pc-tile .lv { font-size: 11px; white-space: nowrap; color: var(--text, #fff); }   /* white: the muted grey was hard to read (owner) */
.pc-grid.cards .pc-tile .types-row { justify-content: center; flex-wrap: wrap; gap: 3px; }
.pc-grid.cards .pc-tile .tile-actions { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; margin-top: auto; }   /* auto, not 3px: it overrode the margin-top: auto above, so a taller card (a lock tag) left its neighbours' buttons floating (owner, 26 September) */
.pc-grid.cards .pc-tile .tile-actions .btn { width: 100%; min-height: 25px; padding: 2px 6px; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The type chips a notch smaller than elsewhere, and the sticky box title (All boxes) off the edge (owner, 26 September). */
.pc-grid.cards .pc-tile .types-row .type-badge { font-size: 8.5px; padding: 0 5px; line-height: 1.5; }
.pc-boxes-panel.look-cards:not(.mode-one) .pc-box-head { padding-left: calc(var(--pc-pad) + 10px); padding-right: calc(var(--pc-pad) + 10px); }

/* ---- Drag & drop (js/ui/pc-drag.js) ---------------------------------------------------------- */
[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-drag] img { -webkit-user-drag: none; }   /* the browser's own image drag would cancel ours */
.pc-mini[data-drag], .pc-tile[data-drag], .team-row[data-drag] { cursor: grab; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
.dragging { opacity: 0.35; }
.drop-ok { outline: 2px solid var(--success, #4cd964); outline-offset: -1px; background: rgba(76, 217, 100, 0.2) !important; }
.drop-no { outline: 2px solid var(--danger, #e5484d); outline-offset: -1px; background: rgba(229, 72, 77, 0.16) !important; }
.is-dragging .drop-no, .is-dragging .drop-no * { cursor: not-allowed !important; }
/* Picked up with Space: a dashed frame until it is put down. */
.carrying { outline: 2px dashed var(--accent); outline-offset: -1px; }
/* The ghost that follows the pointer: the sprite, centred on it, never in the way of elementFromPoint. */
.pc-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  transition: transform 0.04s linear;
  will-change: transform;
}
.pc-ghost.no-motion { transition: none; }
/* The party as six small squares in a dock at the bottom of the screen, only while a stored Pokémon
 * is being dragged (on document.body: it never shifts the page under the ghost, and it is in the
 * thumb's reach on a phone). */
.pc-tray {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #1a2338;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
}
.pc-tray[hidden] { display: none; }
.pc-tray-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.pc-tray-slot.empty { border-style: dashed; color: var(--muted); font-size: 0.75rem; }
.pc-tray-slot .sprite-wrap img { width: 32px; height: 32px; }

/* ---- The view's scrollbar on this page: wide and light (players missed the thin one) ---------- */
.view-scroll[data-view="pc"] { scrollbar-width: auto; scrollbar-color: #8a96b0 #141b2c; }
.view-scroll[data-view="pc"]::-webkit-scrollbar { width: 12px; }
.view-scroll[data-view="pc"]::-webkit-scrollbar-thumb { background: #8a96b0; border: 3px solid #141b2c; border-radius: 999px; }
.view-scroll[data-view="pc"]::-webkit-scrollbar-track { background: #141b2c; }

/* ---- Filter (js/ui/pc-filter.js, DECISIONS 366) ----------------------------------------------
 * A filter never moves a Pokémon: a match gets a red ring, the rest fades where it is. */

/* "Filter on · 12 matches in 4 boxes · Next match · Clear": a full row of the sticky bar. */
.pc-filter-line {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}
.pc-filter-line[hidden] { display: none; }
.pc-filter-line strong { color: var(--accent-light); }

/* The panel under the bar (it scrolls away with the boxes). Compact and aligned (owner, 26 September,
   DECISIONS 415): a label column of 56 px, every chip 22 px high - a type chip IS its badge, a form chip
   its label, so nothing wears two rings of padding - and a red Clear. */
.pc-filter {
  display: grid;
  gap: 9px;   /* a little air between the rows (owner, 26 September) */
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: var(--panel-border);
}
.pc-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
/* "Both types: ..." under the type chips, only while two are on (DECISIONS 532); display: flex above beats [hidden]. */
.pc-type-hint[hidden] { display: none; }
.pc-type-hint .small { color: #ffe7a3; }
.pc-filter-label { flex: 0 0 56px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pc-filter-gap { flex: 0 0 auto; margin-left: 10px; }
.pc-filter-q { flex: 1 1 200px; min-width: 0; height: 28px; font-size: 0.85rem; }
.pc-filter-num { width: 62px; height: 28px; font-size: 0.85rem; padding: 0 6px; }
.pc-filter-clear { height: 28px; }
.pc-chips { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 3px 0; }   /* and above and below the type / form chips */
.pc-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; font-size: 0.7rem; line-height: 1; white-space: nowrap;
  cursor: pointer; opacity: 0.55;
}
.pc-chip:hover:not(:disabled) { opacity: 0.9; }
.pc-chip.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pc-chip:disabled { cursor: not-allowed; opacity: 0.3; }
.pc-chip.type, .pc-chip.form { padding: 0; border-color: transparent; background: transparent; }
.pc-chip.type.on, .pc-chip.form.on { box-shadow: none; border-color: transparent; }
.pc-chip.type .type-badge { display: block; padding: 0 7px; font-size: 9.5px; line-height: 20px; border: 1px solid transparent; border-radius: 999px; }
.pc-chip.form .variant-label { font-size: 8.5px; }   /* the chip sets its own padding and height since DECISIONS 473 */
.pc-chip.type.on .type-badge { box-shadow: 0 0 0 2px var(--accent); }
/* Picked: the accent ring outside, the chip's own light and shade inside (DECISIONS 473). */
.pc-chip.form.on .variant-label { box-shadow: 0 0 0 2px var(--accent), inset 0 2px 0 var(--hi), inset 0 -2px 0 var(--lo); }
.pc-chip .type-badge, .pc-chip .variant-label { pointer-events: none; }
@media (max-width: 600px) { .pc-filter-label { flex-basis: 100%; } .pc-filter-gap { margin-left: 0; } }   /* the label above its row on a phone */

/* The marks. Faded tiles still work (hover brings them back a little to read them). */
.pc-grid .pc-dim { opacity: 0.25; filter: grayscale(1); transition: opacity 0.15s ease; }
.pc-grid .pc-dim:hover, .pc-grid .pc-dim:focus-within, .pc-grid .pc-dim:focus-visible { opacity: 0.7; }
.pc-grid .pc-tile.pc-match { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pc-grid .pc-mini.pc-match { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pc-box-matches { font-size: 0.8rem; font-weight: 700; color: var(--accent-light); }
.pc-box.no-match .pc-box-matches { font-weight: 400; color: var(--muted); }
.pc-box.no-match .pc-box-title { opacity: 0.6; }

/* ---- Phones ------------------------------------------------------------------------------------ */
@media (max-width: 600px) {
  .pc-boxes-panel { --pc-pad: 10px; }
  .pc-bar .pc-pick { margin-left: 0; }
  .picker-list.box-picker { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .pc-boxes-panel { --pc-cell: 46px; --pc-icon: 34px; }
  .pc-grid.icons { gap: 3px; }
  /* The corner marks a notch smaller on the narrow squares (8 abreast, DECISIONS 551), so level, IV pill and
     form dot stay clear of each other and of the icon. */
  .pc-grid.icons .pc-mini-lv { font-size: 0.56rem; right: 1px; }
  .pc-grid.icons .pc-mini .pc-iv { font-size: 0.48rem; padding: 0 3px; }
  .pc-grid.icons .pc-mini-form { width: 6px; height: 6px; }
  .pc-boxes-panel .pc-grid.pc-wall { padding: 5px; }   /* (beats the 8 px of the wallpaper rule further down) */
  .pc-filter-gap { margin-left: 0; }
}
/* The smallest phones (squares of ~31 px at 320 px): less gap, the icon fills more of its square and the IV pill
   shrinks to a tag, so it no longer covers half the icon (checked at 320 / 360 / 390 px, DECISIONS 551). */
@media (max-width: 360px) {
  .pc-grid.icons { gap: 2px; }
  .pc-grid.icons .pc-mini .sprite-wrap img { width: 86cqi; height: 86cqi; }
  .pc-grid.icons .pc-mini .pc-iv { font-size: 0.42rem; padding: 0 2px; line-height: 1.4; border-radius: 4px; }
  .pc-grid.icons .pc-mini-lv { font-size: 0.52rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-grid .pc-dim { transition: none; }
}

/* The results panel (DECISIONS 407, flat since 412): while a filter is on the boxes make way for one grid of
   every match, side by side, each tile wearing its box - a "Box 3" pill on a card (it opens the box), a corner
   number on a square. The grids are the ordinary .pc-grid.icons / .cards; the chips above are the drop targets. */
.pc-results { display: flex; flex-direction: column; gap: 10px; }
.pc-results-hint { margin: -4px 0 0; }
.pc-results-empty { padding: 18px 12px; text-align: center; }
.pc-results-empty > div { margin-top: 8px; }
.pc-grid.cards .pc-tile .pc-tile-box { align-self: center; margin: 0 0 4px; min-height: 20px; padding: 0 8px; font-size: 0.66rem; white-space: nowrap; }
.pc-mini .pc-mini-box { position: absolute; left: 1px; bottom: 1px; padding: 0 3px; border-radius: 4px; background: rgba(14, 20, 36, 0.85); color: #fff; font-size: 0.55rem; font-weight: 800; line-height: 1.4; pointer-events: none; }
.pc-boxes-panel.mode-results .pc-arrow[disabled] { opacity: 0.35; }

/* ---- Box names and wallpapers (Trainer Shop, DECISIONS 489, picture 08 of docs/PLAN-TRAINERSHOP.md) ---------- */
.pc-box-name { margin-left: 4px; font-weight: 800; color: var(--text); }
.pc-box-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.pc-box-tools .btn svg { width: 12px; height: 12px; vertical-align: -2px; }
/* A: a Dungeon picture behind the squares, the squares darkened so the icons stay clear; or a colour tint. */
.pc-grid.pc-wall { padding: 8px; border-radius: 12px; }
.pc-grid.pc-wall.wall-pic { background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pc-grid.pc-wall.wall-pic .pc-mini { background: rgba(10, 14, 26, 0.45); border-color: rgba(255, 255, 255, 0.22); }
.pc-grid.pc-wall.wall-pic .pc-mini.empty { background: rgba(10, 14, 26, 0.22); border-color: rgba(255, 255, 255, 0.3); }
.pc-grid.pc-wall.wall-pic .pc-tile { background: rgba(14, 20, 36, 0.82); }
.pc-grid.pc-wall.wall-tint { background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-edge); }
.tint-blue { --tint: rgba(90, 169, 255, 0.16); --tint-edge: rgba(90, 169, 255, 0.4); }
.tint-green { --tint: rgba(76, 217, 100, 0.14); --tint-edge: rgba(76, 217, 100, 0.4); }
.tint-gold { --tint: rgba(246, 201, 69, 0.15); --tint-edge: rgba(246, 201, 69, 0.45); }
.tint-red { --tint: rgba(214, 69, 69, 0.16); --tint-edge: rgba(214, 69, 69, 0.45); }
.tint-violet { --tint: rgba(167, 139, 250, 0.18); --tint-edge: rgba(167, 139, 250, 0.45); }
.tint-grey { --tint: rgba(255, 255, 255, 0.07); --tint-edge: rgba(255, 255, 255, 0.25); }
/* The picker (js/ui/pc.js openWallpaper, and the Trainer Shop's PC tab): pictures and tints as small tiles. */
.pc-wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.pc-wp {
  position: relative; display: block; height: 46px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
span.pc-wp { cursor: default; }
.pc-wp.tint { background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-edge); }
.pc-wp.none { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px); }
.pc-wp.none::after { content: "∅"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; }
.pc-wp.on { border-color: var(--accent); }
.pc-wp:disabled { cursor: not-allowed; opacity: 0.45; }
.pc-wp:not(:disabled):hover, .pc-wp:focus-visible { border-color: var(--accent-light); outline: none; }
.pc-wp-lock { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; color: #f6c945; }
.pc-wp-lock svg { width: 12px; height: 12px; }
.pc-rename input { width: 100%; margin: 4px 0 10px; }

/* The heart of a favourite (DECISIONS 532), next to the form dot top-left on every square. */
.pc-mini-fav { font-size: 0.7rem; line-height: 1; color: #ff7aa8; text-shadow: 0 1px 2px #000; }

/* ---- Deposit… and Sort (DECISIONS 553: the party left this page) ---------------------------------------
 * Deposit: a row per party member - the icon, name, level and HP as one button (into the open box) and
 * "Box…" beside it for another box. Sort: the five orders as plain rows. Both fit a 320 px phone. */
.pc-deposit { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.pc-deposit-row { display: flex; align-items: stretch; gap: 6px; }
.pc-deposit-row > .btn { flex: 0 0 auto; }
.pc-deposit-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.pc-deposit-main .sprite-wrap img { width: 36px; height: 36px; object-fit: contain; }
.pc-deposit-main .picker-main { min-width: 0; }
.pc-deposit-main .picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sort-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }