/* Poke Life - BO SKIN pixel (chang 17b). Nap SAU app.css, chi doi hinh thuc (khong doi bo cuc/chuc nang).
 * Hinh nam rieng trong ../skin/*.png (cat tu art/da_duyet/UI/ui00-ui17 bang tools/make_skin.py).
 * DOI HINH SAU NAY: thay file trong skin/ (giu ten; neu doi kich thuoc thi sua so "cat" 9-mieng o day).
 * Don vi --u = 1 diem anh cua tranh = --s pixel man hinh: dien thoai 1, may bang/PC 2, man rat lon 3.
 * Thieu tranh: bo cac dong tuong ung -> tu quay lai kieu dung mau trong app.css. */
:root { --s: 1; --u: calc(var(--s) * 1px); --cream: #f1e2c0; --brown: #5a3418; --brown-2: #8a5a2c; }
@media (min-width: 600px) and (min-height: 600px) { :root { --s: 2; } }
@media (min-width: 1000px) and (min-height: 1000px) { :root { --s: 3; } }
html { font-synthesis: none; font-size-adjust: 0.55; }   /* font pixel khong co dam/nghieng that: khong gia lap (gia lap lam be net) */
#game canvas, .pl-btn, .pl-panel, .pl-bar, .pl-toast, .pl-input, #joy, .ab, .px-frame { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- Khung ---------- */
.pl-panel { background: none; border: solid transparent; border-width: calc(var(--u) * 9); border-radius: 0; box-shadow: none; padding: 8px 12px;
  border-image: url(../skin/panel_lotus_a.png) 14 fill / calc(var(--u) * 14) stretch; }
.pl-panel > h2 { color: var(--brown); text-align: center; }
.pl-textbox { border-image-source: url(../skin/panel_lotus_b.png); }
/* Hop thoai: khung tre, nen kem (khung tre trong nen can nen) */
.pl-modal .pl-panel { background: var(--cream); background-clip: padding-box; border-width: calc(var(--u) * 8); padding: 14px 14px 12px;
  border-image: url(../skin/panel_bamboo.png) 24 / calc(var(--u) * 24) stretch; }
.pl-modal .pl-panel > h2 { margin: -6px calc(var(--u) * -10) 8px; padding: 6px 4px 5px; border: solid transparent; border-width: calc(var(--u) * 7) calc(var(--u) * 30) calc(var(--u) * 6);
  border-image: url(../skin/banner_b.png) 7 39 6 39 fill / calc(var(--u) * 7) calc(var(--u) * 39) calc(var(--u) * 6) calc(var(--u) * 39) stretch; color: var(--brown); font-size: 17px; }
/* ---------- Nut ---------- */
.pl-btn { border: solid transparent; border-width: calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * 8); border-radius: 0; box-shadow: none; background: none; padding: 4px 2px;
  color: var(--brown); text-shadow: 0 calc(var(--u) * 1) 0 rgba(255,236,170,.7);
  border-image: url(../skin/btn_yellow.png) 10 16 12 16 fill / calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12) calc(var(--u) * 16) stretch; }
.pl-btn.primary, .pl-btn.blue { color: #fff; text-shadow: 0 calc(var(--u) * 1) 0 #2c4818; border-image-source: url(../skin/btn_green.png); background: none; }
.pl-btn.danger { color: #fff; text-shadow: 0 calc(var(--u) * 1) 0 #4a1010; background: none;
  border-image: url(../skin/btn_no.png) 8 fill / calc(var(--u) * 8) stretch; border-width: calc(var(--u) * 7); }
.pl-btn.fight, .b-grid .fight { background: none; color: #fff2c8; text-shadow: 0 calc(var(--u) * 1) 0 #3a0c0c;
  border-image: url(../skin/btn_red.png) 8 14 10 14 fill / calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 14) stretch; border-width: calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * 8); }
.pl-btn.focus, .pl-btn:focus-visible { box-shadow: none; outline: 3px solid var(--accent-2); outline-offset: 1px; }
.pl-btn.down { transform: translateY(2px); box-shadow: none; filter: brightness(.88); }
.pl-btn[disabled] { opacity: .75; filter: grayscale(.9) brightness(1.08); }
.pl-btn small { opacity: .9; }
/* nut dang dong vai tro dong danh sach / o: khong dung mau nut */
.bag-item, .shop-item, .nc-row, .gym-stage, .wd-slot, .mvp, .look-card, .st-card, .nl-map, .pick-row, .unit, .nl-team { text-align: left; }
.look-card, .st-card, .nl-map { text-align: center; }
.t-chip { border-radius: 0; }
.pl-btn.t-NORMAL, .pl-btn.t-FIRE, .pl-btn.t-WATER { }   /* nut chieu: vien trai theo he van giu o app.css */
.b-moves .pl-btn { border-left-width: calc(var(--u) * 10); }
.pg-x { min-width: 44px; padding: 2px 6px; }

/* Tab: chip kem; tab dang chon: chip vien vang */
.pl-tabs .pl-btn { border: solid transparent; border-width: calc(var(--u) * 6) calc(var(--u) * 7); color: #7a5c34; text-shadow: none;
  border-image: url(../skin/tab_off.png) 8 fill / calc(var(--u) * 8) stretch; }
.pl-tabs .pl-btn.on { background: none; color: var(--brown); font-weight: 800; border-image-source: url(../skin/tab_on.png); }
.lib-tabs .pl-btn[data-badge]:not([data-badge=""])::after { border-radius: 0; }

/* Khung thong tin / the tin nho: vien nau mong */
.b-info.pl-panel, .box-sel, .team-card, .nl-sum, .nc-sum, .nc-ball, .fr-row, .offer, .gym-pairs .pair, .gym-tourney > .pair, .life-workers, .life-store, .life-coins, .nl-claim, .gym-banner, .gs-head, .gs-party {
  background: none; border: solid transparent; border-width: calc(var(--u) * 7); border-radius: 0; box-shadow: none; padding: 4px 6px;
  border-image: url(../skin/toast.png) 8 fill / calc(var(--u) * 8) stretch; color: var(--ink); }
.b-info.pl-panel { padding: 2px 6px; }
.gs-head, .gs-party { color: var(--ink); }
/* O doi hinh (mai ngoi): the doi + dong chon Pokemon */
.team-card, .pick-row, .unit, .nl-team {
  border: solid transparent; border-width: calc(var(--u) * 17) calc(var(--u) * 9) calc(var(--u) * 6); border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-shadow: none;
  border-image: url(../skin/slot_flat.png) 18 10 8 10 fill / calc(var(--u) * 18) calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 10) stretch; }
.team-card.on, .pick-row.on, .unit.on, .nl-team.on { border-image-source: url(../skin/slot_on_flat.png); background: none; box-shadow: none; }
.pick-row[disabled], .unit[disabled], .nl-team[disabled] { border-image-source: url(../skin/slot_off_flat.png); opacity: 1; filter: none; }
/* Dong danh sach (tui, cua hang...) */
.bag-item, .shop-item, .nc-row, .gym-stage, .wd-slot, .mvp, .look-card, .st-card, .nl-map, .mv, .iv {
  border: solid transparent; border-width: calc(var(--u) * 7); border-radius: 0; background: none; box-shadow: none; color: var(--ink); text-shadow: none;
  border-image: url(../skin/toast.png) 8 fill / calc(var(--u) * 8) stretch; }
.bag-item.on, .wd-slot.on, .look-card.on, .unit.on, .st-card.on, .mvp.on, .look-card.on, .st-card.on, .nc-row.on, .gym-stage.open, .flt-fav.on { border-image-source: url(../skin/slot_on_flat.png); border-image-slice: 18 10 8 10 fill; border-image-width: calc(var(--u) * 18) calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 10); border-width: calc(var(--u) * 17) calc(var(--u) * 9) calc(var(--u) * 6); box-shadow: none; background: none; }
.gym-stage.won { filter: hue-rotate(60deg) saturate(1.1); }
.bag-item[disabled], .shop-item[disabled], .nc-row[disabled], .gym-stage[disabled] { opacity: .6; }
/* O luoi (hop, pokedex, vuon) */
.bx-cell, .dx-cell, .life-plot, .life-kitchen {
  border: solid transparent; border-width: calc(var(--u) * 6); border-radius: 0; background: none; box-shadow: none;
  border-image: url(../skin/grid_cell.png) 6 fill / calc(var(--u) * 6) stretch; }
.bx-cell.sel, .dx-cell.sel { box-shadow: 0 0 0 3px var(--accent); }
.life-plot.grow, .life-kitchen.grow { filter: hue-rotate(40deg) saturate(1.3); }
.life-plot.ready, .life-kitchen.ready { filter: saturate(1.5) brightness(1.05); box-shadow: 0 0 0 3px var(--accent); }
.bx-cell.empty { opacity: .6; }
.bx-cell.sel .lv, .bx-cell .lv { text-shadow: none; }

/* O nhap */
.pl-input { background: none; border: solid transparent; border-width: calc(var(--u) * 8); border-radius: 0; padding: 4px 4px;
  border-image: url(../skin/input.png) 8 fill / calc(var(--u) * 8) stretch; color: var(--ink); outline: none; }
.pl-input:focus { border-image-source: url(../skin/input_focus.png); }
.box-search .pl-input, .flt-panel .pl-input, .dex-ctl .pl-input { padding: 2px 4px; }

/* ---------- Thanh HP / EXP / tien trinh ---------- */
.pl-bar { height: calc(var(--u) * 17); background: none; border: solid transparent; border-width: 0 calc(var(--u) * 13); border-radius: 0; overflow: hidden;
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 4); border-image: url(../skin/bar_frame.png) 0 13 fill / 0 calc(var(--u) * 13) stretch; }
.pl-bar > i { position: relative; display: block; left: auto; top: auto; bottom: auto; height: 100%; max-width: 100%; border-radius: 0; background: #6c9f3a;
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255,255,255,.22), inset 0 calc(var(--u) * -2) 0 rgba(0,0,0,.18); }
.pl-bar.exp > i { background: #48a8f0; } .pl-bar.prog > i { background: #f0b020; }
.pl-bar.mid > i { background: #e9c23a; } .pl-bar.low > i { background: #c8402e; }
.pl-screen .pl-bar { height: calc(var(--u) * 17); }
.pd-exp .pl-bar { min-width: 80px; }

/* ---------- Trang toan man ---------- */
.pg-head { background: none; color: #fff4d6; border: solid transparent; border-width: calc(var(--u) * 8) calc(var(--u) * 10); padding: 2px 4px; min-height: 48px;
  border-image: url(../skin/bar_wood_top.png) 10 12 fill / calc(var(--u) * 10) calc(var(--u) * 12) stretch; }
.pg-head h1 { text-shadow: 0 calc(var(--u) * 1) 0 #3a200c; }
.pg-foot { background: none; border: solid transparent; border-width: calc(var(--u) * 7); border-radius: 0; padding: 4px 6px; min-height: 56px;
  border-image: url(../skin/toast.png) 8 fill / calc(var(--u) * 8) stretch; }
.pg-foot:empty { display: none; }
.pg-steps i { border-radius: 0; }
.st-count { background: #e9e2cc; }

/* ---------- Thong bao nho ---------- */
.pl-toast { background: none; color: var(--ink); border: solid transparent; border-width: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 7); border-radius: 0; padding: 4px 10px;
  border-image: url(../skin/toast.png) 8 fill / calc(var(--u) * 8) stretch; }
.pl-toast.ok { padding-left: calc(var(--u) * 22); border-image: url(../skin/toast_ok.png) 8 8 8 22 fill / calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 22) stretch; border-left-width: calc(var(--u) * 22); }
.pl-toast.warn { padding-left: calc(var(--u) * 22); border-image: url(../skin/toast_warn.png) 8 8 8 22 fill / calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 22) stretch; border-left-width: calc(var(--u) * 22); }

/* ---------- Man phu (bat dau / tai) ---------- */
.pl-screen .tip { border: solid transparent; border-width: calc(var(--u) * 7); padding: 4px 8px; color: var(--ink); opacity: 1; min-height: 0;
  border-image: url(../skin/toast.png) 8 fill / calc(var(--u) * 8) stretch; }
.pl-logo { padding: calc(var(--u) * 6) calc(var(--u) * 40) calc(var(--u) * 8); border: solid transparent; border-width: calc(var(--u) * 7) calc(var(--u) * 30) calc(var(--u) * 6); font-size: clamp(34px, 9vmin, 72px);
  border-image: url(../skin/banner_a.png) 8 39 8 39 fill / calc(var(--u) * 8) calc(var(--u) * 39) calc(var(--u) * 8) calc(var(--u) * 39) stretch; text-shadow: 3px 3px 0 #b03a2e, 5px 5px 0 #000; }
.pl-screen .pl-tap { padding: calc(var(--u) * 4) calc(var(--u) * 14); }

/* ---------- Dieu khien ---------- */
#joy { width: calc(var(--joy-r, 48px) * 2.1); height: calc(var(--joy-r, 48px) * 2.1); margin: calc(var(--joy-r, 48px) * -1.05) 0 0 calc(var(--joy-r, 48px) * -1.05);
  border: 0; border-radius: 0; background: url(../skin/joy_base.png) center / 100% 100% no-repeat; opacity: .9; }
#joy-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 0; border-radius: 0; background: url(../skin/joy_knob.png) center / 100% 100% no-repeat; }
.ab { width: calc(var(--u) * 65); height: calc(var(--u) * 65); border: 0; border-radius: 0; background: center / 100% 100% no-repeat; box-shadow: none; font-size: 0; color: transparent; }
#btn-a { background-image: url(../skin/btn_a.png); margin-bottom: 26px; }
#btn-b { background-image: url(../skin/btn_b.png); }
.ab.down { transform: translateY(2px); box-shadow: none; filter: brightness(.88); }

/* dong danh sach: chua cho cho o ben trai */
.pick-row, .unit, .nl-team { padding: 2px 8px; }

.b-menu.pl-panel { padding: 8px 10px; }
.b-grid .pl-btn { font-size: 14px; padding: 8px 0; border-left-width: calc(var(--u) * 9); border-right-width: calc(var(--u) * 9); }
.b-msg { padding-left: 10px; }

/* ---------- Menu man chinh: 4 the khu vuc (ui07), the khoa co o khoa (chang 17e-2) ---------- */
.hp-menu { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5); }
.hp-who { font-size: 13px; color: var(--brown-2); }
.hp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 4); max-width: calc(var(--u) * 228); }
.hp-tile { position: relative; width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h, 102)); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.hp-art { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
.hp-name { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 9); height: calc(var(--u) * 24); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: calc(var(--s) * 11px); line-height: 1.05; color: var(--brown); }
.hp-tile.locked .hp-art { filter: grayscale(1) brightness(.66); }
.hp-tile.locked .hp-name { color: #6f6458; }
.hp-lock { position: absolute; left: 50%; top: calc(var(--u) * 24); width: calc(var(--u) * 24); height: calc(var(--u) * 28); margin-left: calc(var(--u) * -12);
  background: url(../skin/lock.png) center / 100% 100% no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; }
.hp-tile:focus-visible, .hp-tile.focus { outline: 3px solid var(--accent-2); outline-offset: 1px; }
.hp-tile:not(.locked):active { transform: translateY(2px); filter: brightness(.9); }

.hp-art.a0 { background-image: url(../skin/home_tile_0.png); }
.hp-art.a1 { background-image: url(../skin/home_tile_1.png); }
.hp-art.a2 { background-image: url(../skin/home_tile_2.png); }
.hp-art.a3 { background-image: url(../skin/home_tile_3.png); }
.pl-modal .pl-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (orientation: landscape) and (max-height: 480px) {
  .hp-menu { gap: calc(var(--u) * 3); }
  .hp-grid { max-width: none; flex-wrap: nowrap; gap: calc(var(--u) * 2); }
  .hp-tile { --k: .8; width: calc(var(--u) * var(--w) * .8); height: calc(var(--u) * var(--h, 102) * .8); }
  .hp-tile .hp-art, .hp-tile .hp-name { zoom: .8; }
  .pl-modal .pl-panel { width: min(560px, 100%); }
}