/* ninhadas: lista (PackShop), detalhes (DeckViewer) e criador (DeckBuilder) — codex.js */
/* glifos brancos do jogo pintados de marrom escuro, como a lupa, o "?" e o "X" laranjas das capturas */
.pk-look img, .pk-sq img, .pk-tool img, .pk-search > img { filter: brightness(0) sepia(1) saturate(4) hue-rotate(-18deg) brightness(.45); }

/* ---------- lista ---------- */
/* barra de rolagem = ScrollbarHorizontalAppBar do PackShop (1 unidade = 0,6325 px, ver codex.js): no topo do Layout, que tem
   16 de margem; 200 unidades da esquerda, 96 da direita, 80 de altura. ScrollbarHorizontal e Handle usam o sprite ComicFlat
   (contorno de 8 px num sprite de 128 px por unidade = 4 px aqui) com as cores #ddd e #ff6a00; o puxador cobre a altura toda. */
.pk-scroll { position: absolute; left: 136.6px; top: 10.1px; width: 1072.6px; height: 50.6px; box-sizing: border-box; background: #ddd; border: 4px solid var(--ink); border-radius: 8px; touch-action: none; }
.pk-scroll i { position: absolute; top: -4px; bottom: -4px; left: -4px; width: 60px; box-sizing: border-box; background: #ff6a00; border: 4px solid var(--ink); border-radius: 8px; }
.pk-row { position: absolute; left: 0; top: 150px; width: 1280px; height: 380px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; touch-action: none; }
.pk-row::-webkit-scrollbar { display: none; }
/* o Viewport do client tem 500 unidades (316,2 px) no meio da tela: a sobra de cada lado é (1280 - 316,2) / 2 */
.pk-track { display: flex; gap: 43px; padding: 46px 481.9px 0; width: max-content; }
.pk-card { position: relative; flex: none; width: 314px; height: 290px; outline-offset: 6px; border-radius: 18px; }
.pk-card .pk-board { position: absolute; inset: 0; background: center / 100% 100% no-repeat; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
/* hover: o card não cresce nem sobe, só o fundo muda com o material HoverButton (#hover-gui, em index.html), que dá as cores
   medidas no client (247,204,139 -> 255,231,142 no papel; 255,105,0 -> 255,131,0 na faixa) e mantém o contorno preto */
.pk-card:hover .pk-board, .pk-card:focus-visible .pk-board { filter: url(#hover-gui) drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
/* balão (ButtonTooltip): 800 unidades de largura, padding 16, ComicFlat branco; a seta ComicArrow (57x41) entra 9,75 no balão */
.pk-ttip { position: absolute; z-index: 6; width: 506px; box-sizing: border-box; padding: 8px 12px; transform: translateY(-100%); background: #fff; border: 4px solid var(--ink); border-radius: 8px; font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); pointer-events: none; }
.pk-ttip img { position: absolute; top: calc(100% - 2.2px); width: 36px; height: 26px; transform: translateX(-50%); }
.pk-ttip[hidden] { display: none; }
.pk-card .pk-mascot { position: absolute; left: 50%; top: 22%; width: 124px; height: 112px; transform: translate(-50%, -12%); object-fit: contain; pointer-events: none; }
.pk-card.weekly .pk-mascot { top: 30%; height: 100px; }
.pk-card.custom .pk-mascot { top: 27%; height: 100px; }
.pk-card .pk-band { position: absolute; left: 4%; right: 4%; top: 63%; height: 22%; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pk-card .pk-band span { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1; color: #4e2408; letter-spacing: -.01em; }
.pk-card.custom .pk-band { left: 10%; right: 10%; top: 70%; height: 16%; background: #ff6a00; border: 4px solid var(--ink); border-radius: 6px; }
.pk-card.custom .pk-band span { font-size: 22px; }
.pk-card .pk-days { position: absolute; left: 25%; right: 25%; top: 9.5%; height: 15%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #8a1d1d; white-space: nowrap; letter-spacing: -.01em; pointer-events: none; }
.pk-card .pk-look { position: absolute; right: -6px; top: -12px; width: 80px; height: 80px; border-style: solid; border-width: 7px 7px 14px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pk-card .pk-look img { width: 52px; height: 52px; }
.pk-card .pk-look:hover { filter: brightness(1.08); }
.pk-card .pk-look:active { transform: translateY(3px); }
.pk-card .pk-check { position: absolute; left: -18px; top: -26px; width: 84px; height: 84px; z-index: 2; pointer-events: none; transform: rotate(-4deg); }
.pk-card .pk-lock { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; background: #fff; border: 3px solid var(--ink); border-radius: 8px; padding: 1px 9px; font-family: var(--body); font-weight: 800; font-size: 14px; color: var(--ink); z-index: 2; }
.pk-card .pk-lock img { width: 16px; height: 16px; filter: brightness(0); }
.pk-bottom { top: 632px; height: 80px; width: 290px; font-size: 40px; border-width: 8px 8px 18px; }
.pk-bottom .paw { height: 42px; }

/* ---------- detalhes ---------- */
.pk-frame { position: absolute; left: 76px; top: -14px; width: 1134px; height: 760px; background: #d6a06c; border: 16px solid #8a5532; border-top-width: 14px; border-radius: 22px; box-shadow: inset 0 0 0 4px #6b3d20, 0 0 0 4px var(--ink); }
.pk-title { position: absolute; left: 150px; top: 14px; min-width: 252px; max-width: 360px; height: 54px; padding: 0 16px; background: #ff6a00; border: 4px solid var(--ink); border-radius: 9px; display: flex; align-items: center; font-family: var(--display); font-weight: 700; font-size: 28px; color: #5a2205; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-topbar { position: absolute; left: 520px; top: 16px; width: 390px; height: 50px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pk-topbar .btn-orange { position: static; }
.pk-st { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--ink); border-radius: 8px; padding: 4px 10px; font-family: var(--body); font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; }
.pk-st img { width: 22px; height: 22px; }
.pk-st.no img { filter: brightness(0); width: 16px; height: 16px; }
.pk-sq { position: absolute; top: 14px; width: 104px; height: 54px; border-style: solid; border-width: 6px 6px 12px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; }
.pk-sq img { width: 34px; height: 34px; }
.pk-sq:active { transform: translateY(3px); }
.pk-tier { position: absolute; left: 133px; width: 1018px; height: 100px; background: #d9a26d; border-radius: 4px; box-shadow: inset 0 -5px 0 #b57d4b, inset 0 3px 0 #e8b985, 0 3px 0 #8f5a33; }
.pk-die { position: absolute; left: 12px; top: 14px; width: 46px; height: 46px; opacity: .28; }
.pk-turn { position: absolute; left: 4px; top: 64px; width: 62px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 13px; color: rgba(70,35,10,.42); }
.pk-pets { position: absolute; left: 66px; top: 17px; display: flex; gap: 6px; }
.pk-foods { position: absolute; right: 12px; top: 17px; display: flex; gap: 6px; }
.pk-it { width: 56px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: transform .1s ease; }
.pk-it img { width: 56px; height: 56px; object-fit: contain; pointer-events: none; }
.pk-it:hover, .pk-it:focus-visible { transform: scale(1.14); }
.pk-tip { position: absolute; left: 133px; bottom: 8px; width: 1018px; min-height: 124px; background: #fff; border: 4px solid var(--ink); border-radius: 12px; display: flex; gap: 12px; padding: 8px 14px 8px 8px; z-index: 5; pointer-events: none; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.pk-tip.top { bottom: auto; top: 82px; }
.pk-tip .pic { position: relative; flex: none; width: 76px; height: 106px; }
.pk-tip .pic img { position: absolute; left: 6px; top: 0; width: 64px; height: 64px; object-fit: contain; }
.pk-tip .pic.food img { top: 14px; }
.pk-tip .pic .st { position: absolute; top: 64px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: center / contain no-repeat; font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.pk-tip .pic .st.a { left: -2px; background-image: url("../img/sprites/Fist.png"); }
.pk-tip .pic .st.h { left: 36px; background-image: url("../img/sprites/Heart.png"); }
.pk-tip .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-tip .nm { font-family: var(--display); font-weight: 700; font-size: 25px; color: var(--ink); line-height: 1.1; }
.pk-tip .nm small { margin-left: 10px; font-family: var(--body); font-size: 13px; color: var(--muted); }
.pk-tip .ln { display: flex; gap: 8px; align-items: flex-start; font-family: var(--body); font-style: italic; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--ink); }
.pk-tip .ln.one { font-style: normal; font-size: 16px; }
.pk-tip .ln img { width: 17px; height: 17px; vertical-align: -3px; }
.pk-tip .lv { flex: none; display: inline-flex; align-items: baseline; justify-content: center; width: 24px; height: 20px; margin-top: 1px; background: var(--ink); color: #fff; border-radius: 4px; font-style: normal; font-family: var(--display); font-size: 12px; line-height: 20px; }
.pk-tip .lv i { font-style: normal; color: var(--yellow); font-size: 15px; }
.pk-tip .tr { font-weight: 900; }
.pk-tip .ar { margin: 0 6px; font-style: normal; }
.pk-tip .note { margin-top: 2px; font-family: var(--body); font-weight: 700; font-size: 12.5px; color: #9a4b12; }
.pk-help { top: 240px; font-size: 19px; line-height: 1.4; }

/* ---------- criador ---------- */
.pk-save { width: 92px; height: 50px; font-family: var(--display); font-weight: 700; font-size: 21px; color: #4e2d14; }
.pk-tabs { position: absolute; left: 124px; top: 8px; display: flex; gap: 13px; }
.pk-tab { width: 48px; height: 50px; border-style: solid; border-width: 5px 5px 10px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; }
.pk-tab img { width: 30px; height: 30px; }
.pk-tab.cur { filter: brightness(1.25) drop-shadow(0 0 0 #fff) drop-shadow(0 3px 0 #fff); transform: translateY(-2px); }
.pk-tab:active { transform: translateY(3px); }
.pk-search { position: absolute; left: 494px; top: 8px; width: 491px; height: 50px; border-style: solid; border-width: 5px 5px 10px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.pk-search > img { width: 28px; height: 28px; }
.pk-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--display); font-weight: 700; font-style: italic; font-size: 24px; color: #4e2408; }
.pk-search input::placeholder { color: rgba(78,36,8,.7); }
.pk-search:focus-within { outline: 3px solid #fff; outline-offset: 2px; }
.pk-tool { position: absolute; top: 8px; width: 97px; height: 50px; border-style: solid; border-width: 5px 5px 10px; border-image: url("../img/sprites/ButtonShadeOrange.png") 64 64 136 fill; display: flex; align-items: center; justify-content: center; }
.pk-tool img { width: 32px; height: 32px; }
.pk-tool:active { transform: translateY(3px); }
.pk-banner { position: absolute; left: 13px; top: 76px; width: 1190px; height: 58px; background: #f2cf9b; border: 4px solid var(--ink); border-radius: 6px; box-shadow: inset 0 -6px 0 #d8ac70; display: flex; align-items: center; gap: 18px; padding: 0 16px; z-index: 1; }
.pk-banner b { font-family: var(--display); font-weight: 700; font-size: 34px; color: #1f120a; }
.pk-banner span { display: flex; gap: 6px; }
.pk-banner span i { width: 26px; height: 26px; border-radius: 6px; border: 3px solid rgba(31,18,10,.35); font-style: normal; font-family: var(--display); font-weight: 700; font-size: 15px; color: rgba(31,18,10,.5); display: flex; align-items: center; justify-content: center; }
.pk-banner span i.ok { border-color: #3d8b2e; background: #7bd35f; color: #1f3a12; }
.pk-banner em { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-style: normal; font-weight: 700; font-size: 22px; color: #6b3f12; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-banner em img { width: 40px; height: 40px; object-fit: contain; }
.pk-body { position: absolute; left: 24px; top: 130px; width: 1168px; height: 590px; background: #fdd9a8; border: 4px solid var(--ink); border-top: 0; overflow-y: auto; scrollbar-width: none; padding: 14px 16px 24px; }
.pk-body::-webkit-scrollbar { display: none; }
.pk-count { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.pk-count .box { width: 38px; height: 38px; border: 4px solid var(--ink); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.pk-count .box img { width: 34px; height: 34px; }
.pk-count b { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink); white-space: nowrap; }
.pk-count p { margin: 0 0 0 auto; max-width: 560px; font-family: var(--body); font-weight: 800; font-size: 13px; color: #8a5a2a; line-height: 1.3; }
.pk-count.food { margin-top: 18px; }
.pk-count.food b { font-size: 24px; }
.pk-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pk-none { font-family: var(--body); font-weight: 800; color: #8a5a2a; }
.pk-bi { position: relative; width: 101px; height: 122px; background: #e8b47c; border: 3px solid transparent; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; }
.pk-bi img { width: 76px; height: 76px; object-fit: contain; pointer-events: none; }
.pk-bi span { font-family: var(--body); font-weight: 800; font-size: 12px; line-height: 1.05; color: #4e2408; text-align: center; max-height: 26px; overflow: hidden; }
.pk-bi:hover:not(.off) { filter: brightness(1.07); }
.pk-bi.on { background: #b9e59c; border-color: #2f7a22; box-shadow: 0 3px 0 #2f7a22; }
.pk-bi .ck { position: absolute; right: -6px; top: -8px; width: 34px; height: 34px; }
.pk-bi.off { background: transparent; opacity: .42; }
.pk-vscroll { touch-action: none; position: absolute; left: 1222px; top: 80px; width: 46px; height: 630px; background: #fff; border: 4px solid var(--ink); border-radius: 8px; overflow: hidden; }
.pk-vscroll i { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: #ff6a00; border-bottom: 3px solid var(--ink); }
.pk-menu, .pk-mascots, .pk-savebox { top: 150px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pk-menu .btn-orange { position: static; height: 54px; font-size: 24px; }
.pk-mascots > div:first-of-type { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 330px; overflow: auto; }
.pk-mascots .pk-bi { width: 84px; height: 84px; }
.pk-mascots .pk-bi img { width: 64px; height: 64px; }
.pk-savebox input { font-family: var(--display); font-size: 28px; padding: 8px 12px; border: 4px solid var(--ink); border-radius: 10px; color: var(--ink); text-align: center; }
.pk-savebox p { margin: 0; font-size: 15px; line-height: 1.35; color: #8a4a12; }
@media (prefers-reduced-motion: reduce) { .pk-row { scroll-behavior: auto; } .pk-it { transition: none; } .pk-it:hover, .pk-it:focus-visible { transform: none; } }
.pk-tip.wide { left: 24px; width: 1168px; bottom: 8px; }
.pk-tip.wide.top { top: 136px; bottom: auto; }
.pk-tip[hidden], .pk-scroll[hidden] { display: none; }