/* Packs (owner request, 10 Oct 2026; packs-ui.mjs, pack-opening.mjs): PACKS, a loot-box tile of its own at the left side
   of the island; the Packs window (a wide .pcs-dialog: GPU, CPU and PC tabs, four tier cards, the chosen pack's odds and
   its Open buttons); the opening's full-screen overlay (Boot's canvas and the results panel). The HUD's cream pixel
   style; text never below 12 px; buttons touch-sized on phones. Tier colours: Bronze, Silver, Gold, Diamond; rarity
   colours: Common grey, Rare blue, Epic purple, Legendary gold. */
:root{--pack-bronze:#c27a3e;--pack-bronze-soft:#f6e1cc;--pack-silver:#8a97ab;--pack-silver-soft:#e8edf4;--pack-gold:#e3a42c;--pack-gold-soft:#fdf0cc;
  --pack-diamond:#5a5bd0;--pack-diamond-soft:#e5e8ff;
  --rarity-common:#8f877a;--rarity-rare:#3d8fd9;--rarity-epic:#9a5ae6;--rarity-legendary:#d99a17}

/* ---------------------------------------------------------------- the island's tile */
.packs-entry-root{position:fixed;left:0;top:0;width:0;height:0;z-index:60;font-family:Pixeloid,monospace;font-synthesis:none}
.packs-entry{position:fixed;left:18px;top:50%;transform:translateY(-50%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;width:96px;height:94px;margin:0;padding:4px 2px 6px;border:8px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;
  background:none;border-radius:0;box-shadow:none;color:#492b22;font:700 12px/1 Pixeloid,monospace;letter-spacing:.02em;cursor:pointer;
  touch-action:manipulation;overflow:hidden;isolation:isolate;filter:drop-shadow(0 3px 0 #34273733)}
.packs-entry[hidden]{display:none!important}
.packs-entry .pixel-icon{display:block;flex:none;width:44px;height:44px;image-rendering:pixelated;animation:packs-bob 2.6s ease-in-out infinite}
/* the label fits the longest translations (PACOTES, НАБОРЫ); a longer one is clipped, never wrapped */
.packs-entry-label{display:block;max-width:100%;overflow:hidden;white-space:nowrap}
/* a slow shine across the tile, and a soft violet glow under the box */
.packs-entry::before{content:'';position:absolute;inset:-8px;z-index:-1;background:radial-gradient(circle at 50% 42%,#b98bff59 0%,#b98bff00 62%);pointer-events:none}
.packs-entry::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-60%;width:34%;transform:skewX(-18deg);background:linear-gradient(90deg,#fff0 0%,#fffbe8b3 50%,#fff0 100%);
  animation:packs-shine 4.2s ease-in-out infinite;pointer-events:none}
.packs-entry:focus-visible{outline:3px solid #58a7ce;outline-offset:2px}
.packs-entry:active{transform:translateY(calc(-50% + 2px))}
@media(hover:hover) and (pointer:fine){.packs-entry:hover{filter:drop-shadow(0 3px 0 #34273733) brightness(1.07)}}
@keyframes packs-shine{0%,62%{left:-60%}88%,100%{left:130%}}
@keyframes packs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
body.decorating .packs-entry{display:none!important}
body[data-wallet-locked=true]>.packs-entry-root{visibility:hidden;pointer-events:none}
/* Out of the way while LEADERBOARD, the profile or Island Style (the left-side panels) is open, as the tiles under it (STAKE,
   the Daily Social Pot: stake-boost.css, social-pot.css): such a panel is never drawn under a tile. */
body:has(:is(.leaderboard-panel,.island-profile-panel,.island-style-panel):not([hidden])) .packs-entry{visibility:hidden}
@media(max-width:700px){
  .packs-entry{left:10px;top:44%;width:72px;height:72px;border-width:6px;gap:2px;font-size:10px;letter-spacing:0}
  .packs-entry .pixel-icon{width:32px;height:32px}
}
/* A mouse screen: the left column (PACKS, then STAKE and the Daily Social Pot's tile under it: stake-boost.css,
   social-pot.css) clear of the camera's 28 px edge pan (app.mjs), wide or narrow. */
@media(hover:hover) and (pointer:fine){.packs-entry{left:32px}}
/* A short screen (at most 540 px tall: a phone held sideways): the left column of three tiles does not fit between the top
   cards and the bottom, so the tiles stand in a row of 56 px tiles, 6 px apart: PACKS, then STAKE and the Daily Social
   Pot (stake-boost.css, social-pot.css). --tile-row-x is the row's left edge, --tile-row-y its centre line: at the bottom
   left (clear of the edge pan on a mouse screen); at most 700 px wide, right of the settings gear (settings.css: 46 px at
   the bottom navigation's left end) and centred on it. */
:root{--tile-row-x:max(18px,env(safe-area-inset-left));--tile-row-y:calc(100% - max(14px,env(safe-area-inset-bottom)) - 28px)}
@media(hover:hover) and (pointer:fine){:root{--tile-row-x:32px}}
@media(max-width:700px){:root{--tile-row-x:calc(max(10px,env(safe-area-inset-left)) + 54px);--tile-row-y:calc(100% - max(14px,env(safe-area-inset-bottom)) - 86px)}}
body:has(.game-settings-button[data-dock=nav]:not([hidden])){--tile-row-x:calc(max(10px,env(safe-area-inset-left)) + 54px);
  --tile-row-y:calc(100% - max(14px,env(safe-area-inset-bottom)) - 86px)}
@media(max-height:540px){
  .packs-entry{left:var(--tile-row-x);top:var(--tile-row-y);width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  .packs-entry .pixel-icon{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.packs-entry::after,.packs-entry .pixel-icon{animation:none}.packs-entry:active{transform:translateY(-50%)}}

/* ---------------------------------------------------------------- the window */
.packs-dialog{--q:clamp(.9px,min(calc((100vw - 24px) / 980),calc((100dvh - 24px) / 760)),1.2px);width:min(calc(980 * var(--q)),calc(100vw - 24px))}
.packs-title-icon{display:block;flex:none;width:calc(30 * var(--q));height:calc(30 * var(--q))}
.packs-title-icon .pixel-icon{display:block;width:100%;height:100%;image-rendering:pixelated}
.packs-dialog .pcs-dialog-title{font-size:max(17px,calc(23 * var(--q)));letter-spacing:.03em;text-transform:uppercase}
.packs-body{gap:calc(10 * var(--q))}
.packs-intro{color:var(--ink)}
.packs-tabs{display:flex;gap:calc(6 * var(--q));flex-wrap:wrap}
.packs-tab{flex:1 1 0;min-width:0;min-height:max(40px,calc(42 * var(--q)));padding:calc(4 * var(--q)) calc(10 * var(--q));border:calc(6 * var(--q)) solid transparent;
  border-image:url('../ui/frames/tile.svg') 8 fill stretch;background:none;color:var(--soft);font:700 max(13px,calc(15 * var(--q)))/1.1 Pixeloid,monospace;cursor:pointer}
.packs-tab[aria-selected=true]{border-image-source:url('../ui/frames/power-gold.svg');border-image-slice:12 fill;color:#3a1c08}
.packs-tab:disabled{cursor:not-allowed}
.packs-line-note{font-size:max(13px,calc(13 * var(--q)));line-height:1.4;color:var(--soft)}
.packs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10 * var(--q))}
.packs-card{--tier:var(--pack-gold);--tier-soft:var(--pack-gold-soft);
  position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(3 * var(--q));min-width:0;padding:calc(10 * var(--q)) calc(8 * var(--q)) calc(8 * var(--q));
  border:calc(3 * var(--q)) solid var(--tier);background:var(--tier-soft);box-shadow:inset 0 calc(6 * var(--q)) var(--tier);color:var(--ink);text-align:center;cursor:pointer;
  font:400 max(13px,calc(13 * var(--q)))/1.3 Pixeloid,monospace}
.packs-card[data-tier=bronze]{--tier:var(--pack-bronze);--tier-soft:var(--pack-bronze-soft)}
.packs-card[data-tier=silver]{--tier:var(--pack-silver);--tier-soft:var(--pack-silver-soft)}
.packs-card[data-tier=diamond]{--tier:var(--pack-diamond);--tier-soft:var(--pack-diamond-soft)}
.packs-card[data-selected=true]{outline:calc(3 * var(--q)) solid #3e211d;outline-offset:calc(2 * var(--q))}
.packs-card:disabled{cursor:not-allowed;opacity:.75}
/* the crate: the PACKS box recoloured to its tier */
.packs-crate{display:block;width:calc(44 * var(--q));height:calc(44 * var(--q))}
.packs-crate .pixel-icon{display:block;width:100%;height:100%;image-rendering:pixelated}
.packs-card[data-tier=bronze] .packs-crate{filter:hue-rotate(118deg) saturate(.75) brightness(.95)}
.packs-card[data-tier=silver] .packs-crate{filter:grayscale(1) brightness(1.15)}
.packs-card[data-tier=gold] .packs-crate{filter:hue-rotate(140deg) saturate(1.5) brightness(1.18)}
.packs-card[data-tier=diamond] .packs-crate{filter:hue-rotate(-40deg) saturate(1.3)}
.packs-card-name{font-size:max(14px,calc(15 * var(--q)));line-height:1.2}
.packs-card-price{font:700 max(17px,calc(21 * var(--q)))/1.1 Pixeloid,monospace;color:#3a1c08}
/* The owner's sale (10 Oct 2026; packs-ui.mjs, token-prices.css): every card the same two lines, the struck list price and
   the chip over the sale price. */
.packs-card-price.price-on-sale{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.3em}
.packs-card-price.price-on-sale>.price-now{order:1;flex-basis:100%}
.packs-card-tokens{font-size:max(12px,calc(12 * var(--q)));color:var(--muted)}
.packs-card-best{font-size:max(12px,calc(12 * var(--q)));color:var(--soft);line-height:1.3}
.packs-card-best .packs-best-name{color:var(--rarity,#3e211d);font-weight:700}
.packs-card-off{font-size:max(12px,calc(12 * var(--q)));color:#873e2d}
:is(.packs-dialog,.pack-opening) [data-rarity=common]{--rarity:var(--rarity-common)}
:is(.packs-dialog,.pack-opening) [data-rarity=rare]{--rarity:var(--rarity-rare)}
:is(.packs-dialog,.pack-opening) [data-rarity=epic]{--rarity:var(--rarity-epic)}
:is(.packs-dialog,.pack-opening) [data-rarity=legendary]{--rarity:var(--rarity-legendary)}
/* the chosen pack's odds (owner, 10 Oct 2026): every outcome in view as a compact grid of small tiles, best first */
.packs-detail{--tier:var(--pack-gold);display:grid;gap:calc(6 * var(--q));padding:calc(8 * var(--q)) calc(10 * var(--q));border:calc(3 * var(--q)) solid var(--tier);background:#fffaf0}
.packs-detail[data-tier=bronze]{--tier:var(--pack-bronze)}
.packs-detail[data-tier=silver]{--tier:var(--pack-silver)}
.packs-detail[data-tier=diamond]{--tier:var(--pack-diamond)}
.packs-detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--q));flex-wrap:wrap}
.packs-detail-name{font:700 max(14px,calc(16 * var(--q)))/1.2 Pixeloid,monospace;color:var(--ink)}
.packs-odds-title{font:700 max(12px,calc(12 * var(--q)))/1.2 Pixeloid,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.packs-odds{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(230px,calc(250 * var(--q))),1fr));gap:calc(5 * var(--q))}
.packs-odd{display:grid;grid-template-columns:calc(38 * var(--q)) minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:calc(7 * var(--q));row-gap:1px;
  min-width:0;padding:calc(4 * var(--q)) calc(7 * var(--q)) calc(4 * var(--q)) calc(5 * var(--q));background:#fff;border-left:calc(4 * var(--q)) solid var(--rarity);box-shadow:inset 0 0 0 1px #00000010}
.packs-odd-art{grid-row:1/3;display:grid;place-items:center;width:calc(38 * var(--q));height:calc(32 * var(--q))}
.packs-odd-art img{max-width:100%;max-height:100%;object-fit:contain}
.packs-odd-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:max(12px,calc(12.5 * var(--q)));line-height:1.25;color:var(--ink)}
.packs-odd-chance{font:700 max(13px,calc(14 * var(--q)))/1 Pixeloid,monospace;color:var(--rarity);text-align:right;font-variant-numeric:tabular-nums}
.packs-odd-meta{grid-column:2/4;display:flex;align-items:center;gap:calc(6 * var(--q));min-width:0;overflow:hidden;white-space:nowrap;font-size:max(12px,calc(11.5 * var(--q)));color:var(--soft)}
.packs-odd-figures{font-variant-numeric:tabular-nums}
.packs-odd-socket{overflow:hidden;text-overflow:ellipsis}
.pack-rarity{display:inline-block;flex:none;padding:0 calc(5 * var(--q));background:var(--rarity);color:#fff;font-style:normal;font-weight:700;font-size:max(12px,calc(11 * var(--q)));line-height:1.45}
.packs-footer{flex:none;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:calc(8 * var(--q));padding:calc(10 * var(--q)) calc(14 * var(--q));border-top:calc(2 * var(--q)) solid #e6c99b}
.packs-go,.pack-opening-again{display:inline-flex;align-items:center;gap:calc(8 * var(--q))}
.pack-go-coin{display:block;flex:none;width:calc(24 * var(--q));height:calc(24 * var(--q));min-width:20px;min-height:20px}
.pack-go-coin .pixel-icon{display:block;width:100%;height:100%;image-rendering:pixelated}
.pack-go-copy{display:grid;justify-items:start;gap:1px;text-align:left}
.pack-go-label{font:700 max(14px,calc(15 * var(--q)))/1.15 Pixeloid,monospace}
.pack-go-cost{font:400 max(12px,calc(12 * var(--q)))/1.2 Pixeloid,monospace;opacity:.85}
@media(max-width:760px){
  .packs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .packs-footer>.pcs-button{flex:1 1 0}
  .pack-go-label{white-space:nowrap}
}
/* Phones: small side-by-side tier cards (crate, name, price) so the odds stay in view; the header's X closes. */
@media(max-width:620px){
  .packs-tab{min-height:38px;padding:2px 4px;font-size:12px;white-space:nowrap}
  .packs-grid{gap:6px}
  .packs-card{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;row-gap:0;align-items:center;justify-items:start;
    padding:7px 7px 6px;text-align:left;box-shadow:inset 0 4px var(--tier)}
  .packs-card .packs-crate{grid-row:1/3;width:30px;height:30px}
  .packs-card-name{font-size:12px;line-height:1.15}
  .packs-card-price{font-size:15px}
  .packs-card-price.price-on-sale{justify-content:flex-start}
  .packs-card :is(.packs-card-tokens,.packs-card-best){display:none}
  .packs-odds{grid-template-columns:minmax(0,1fr)}
  .packs-footer .packs-cancel{display:none}
}

/* ---------------------------------------------------------------- the opening */
dialog.pack-opening,dialog.pack-opening:modal{
  position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100vh;height:100dvh;max-width:none!important;max-height:none!important;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;outline:none;color:#3a2618;
  font:400 14px/1.4 Pixeloid,monospace;font-synthesis:none;letter-spacing:0;text-shadow:none;-webkit-tap-highlight-color:transparent;
}
dialog.pack-opening::backdrop{background:transparent;backdrop-filter:none}
dialog.pack-opening *{box-sizing:border-box}
dialog.pack-opening [hidden]{display:none!important}
.pack-opening-veil{position:absolute;inset:0;opacity:0;cursor:pointer;
  background:radial-gradient(ellipse 72% 60% at 50% 38%,#111d3970 0%,#111d39b0 70%,#0c1430cc 100%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pack-opening-scene{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.pack-opening-skip{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;padding:3px 10px;background:#0c143099;color:#fff6df;font-size:12px;pointer-events:none}
.pack-opening-panel{position:absolute;left:50%;top:var(--pack-panel-top,60%);width:min(560px,calc(100vw - 20px));max-height:calc(100dvh - var(--pack-panel-top,60%) - 10px);
  margin:0 0 0 calc(min(560px,calc(100vw - 20px)) / -2);display:flex;flex-direction:column;gap:8px;padding:8px 14px 12px;overflow:auto;overscroll-behavior:contain;
  border:9px solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;box-shadow:0 5px 0 #3d332d26,0 10px 28px #0a0f2247;opacity:0}
.pack-opening-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pack-opening-headline{margin:0;font:700 20px/1.2 Pixeloid,monospace;color:var(--rarity,#3a2618)}
.pack-opening-panel[data-rarity=common] .pack-opening-headline{color:#3a2618}
.pack-opening-pack{margin:0;font-size:13px;color:#7a6650}
.pack-opening-items{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.pack-opening-item{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;padding:4px 8px;background:#fffdf6;border-left:5px solid var(--rarity)}
.pack-opening-thumb{display:grid;place-items:center;width:52px;height:44px}
.pack-opening-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.pack-opening-words{display:grid;gap:2px;min-width:0}
.pack-opening-name{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.pack-opening-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:#6a4a2f}
.pack-opening-meta .pack-rarity{font-size:12px}
.pack-opening-where{font-size:12px;color:#345d35}
.pack-opening-summary{margin:0;font-size:13px;font-weight:700;color:#3a2618}
.pack-opening-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.pack-opening-actions .pcs-button{--q:1px;min-height:44px;padding:3px 14px;border:7px solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;background:none;
  color:#3e211d;font:700 14px/1.1 Pixeloid,monospace;cursor:pointer}
.pack-opening-actions .pcs-button.pcs-go{border-image-source:url('../ui/frames/power-gold.svg');border-image-slice:12 fill;color:#3a1c08}
.pack-opening-actions .pcs-button:disabled{color:#8b7964;cursor:not-allowed}
.pack-opening-actions .pcs-button:focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.pack-opening .pack-go-coin{width:22px;height:22px}
@media(max-width:620px){
  .pack-opening-panel{padding:6px 10px 10px;border-width:8px}
  .pack-opening-headline{font-size:18px}
  .pack-opening-actions .pcs-button{flex:1 1 0}
}