/* DOG ISLAND: phong cách 16-bit pixel, bảng gỗ, nút xanh viền vàng. */
:root {
  --ink: #1b1730;
  --wood: #b8743a;
  --wood-light: #d99a55;
  --wood-dark: #7a4520;
  --wood-edge: #4a2810;
  --gold: #ffcc33;
  --gold-dark: #c98a00;
  --blue: #3d8ef0;
  --blue-light: #6fc0ff;
  --blue-dark: #1f4fb8;
  --green: #4fc23f;
  --green-light: #8de86a;
  --green-dark: #23862a;
  --cream: #fff3d6;
  --grass: #74cf55;
  --grass-dark: #4ea83a;
  --plot-edge: #d8b47a;
  --plot-edge-dark: #a8814a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --outline: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
             0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 4px 0 var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0d3346;
  background-image: radial-gradient(circle at 50% 30%, #17607a 0, #0d3346 70%);
  font-family: var(--font);
  color: #fff;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Khung game ---------- */
.game-frame {
  position: relative;
  width: 100%;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #1fb3c9;
  container-type: inline-size;
}
@media (min-width: 560px) {
  body { display: flex; align-items: center; justify-content: center; }
  .game-frame {
    width: min(440px, calc((100dvh - 32px) * 0.5));
    min-width: 360px;
    height: min(calc(100dvh - 32px), 900px);
    border: 4px solid var(--wood-edge);
    border-radius: 18px;
    box-shadow: 0 0 0 4px var(--gold-dark), 0 18px 60px rgba(0, 0, 0, .55);
  }
}
#scene { position: absolute; left: 0; top: 0; z-index: 0; }
.screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; }

/* ---------- Thành phần chung ---------- */
.px-icon { display: block; image-rendering: pixelated; pointer-events: none; }
.px-text { display: block; image-rendering: pixelated; }
.outlined { text-shadow: var(--outline); }

.btn {
  position: relative;
  border: 3px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blue-light) 0 45%, var(--blue) 45% 100%);
  box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 var(--blue-dark), inset 0 3px 0 rgba(255,255,255,.45), 0 6px 0 3px var(--ink);
  color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, filter .06s;
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.06); }
.btn:active, .btn.pressed {
  transform: translateY(4px);
  box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--blue-dark), inset 0 3px 0 rgba(255,255,255,.35), 0 2px 0 3px var(--ink);
}
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.btn.green {
  background: linear-gradient(180deg, var(--green-light) 0 45%, var(--green) 45% 100%);
  box-shadow: 0 0 0 3px var(--ink), inset 0 -6px 0 var(--green-dark), inset 0 3px 0 rgba(255,255,255,.5), 0 7px 0 3px var(--ink);
}
.btn.green:active, .btn.green.pressed {
  box-shadow: 0 0 0 3px var(--ink), inset 0 -3px 0 var(--green-dark), inset 0 3px 0 rgba(255,255,255,.4), 0 3px 0 3px var(--ink);
}
.btn.square { width: 46px; height: 46px; display: grid; place-items: center; padding: 0; }

.wood {
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(74,40,16,.35) 14px 16px),
    linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 3px solid var(--wood-edge);
  box-shadow: inset 0 0 0 2px #e8b878, inset 0 -4px 0 rgba(74,40,16,.4), 0 4px 0 rgba(0,0,0,.3);
  border-radius: 10px;
}

/* ---------- Trang chủ ---------- */
.home { padding: max(8px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)); gap: 6px; }
.top-bar { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 6px; flex: none; }
.logo { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.info-bar {
  flex: none; align-self: center;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px;
  min-width: 230px;
}
.info-bar .coins { font-size: 20px; font-weight: 900; text-shadow: var(--outline); flex: 1; }
.info-bar .rate {
  font-size: 14px; font-weight: 900; color: #c9ffb0;
  background: rgba(27, 23, 48, .55); border-radius: 6px; padding: 3px 8px;
}

.island-area { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; position: relative; }
.yard { flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 0; height: clamp(40px, 8.5vh, 66px); z-index: 2; margin-bottom: -8px; pointer-events: none; }
.yard .doghouse { height: 100%; width: auto; }
.yard .fence { height: 46%; width: auto; margin-bottom: 4px; }

.board-panel {
  flex: 1; min-height: 0; width: 100%;
  padding: 10px 8px 8px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%, #8be06a 0 2px, transparent 3px) 0 0/22px 22px, linear-gradient(180deg, #6dc94f, #5bb944);
  border: 4px solid var(--wood-edge);
  box-shadow: inset 0 0 0 3px #a06030, inset 0 0 0 6px #3b8a2c, 0 6px 0 rgba(0,0,0,.28);
  touch-action: none;
}
.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7px; height: 100%; }

/* Ô nuôi */
.slot {
  position: relative; min-height: 0; min-width: 0;
  border: 3px solid var(--plot-edge);
  border-radius: 10px;
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1.5px, transparent 2px) 3px 4px/14px 12px,
    linear-gradient(180deg, #96e273 0%, #7fd660 60%, #6cc650 100%);
  box-shadow: inset 0 0 0 2px var(--plot-edge-dark), inset 0 -4px 0 rgba(0,0,0,.12), 0 3px 0 rgba(40, 70, 20, .55);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  touch-action: none;
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.slot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.slot .stage { position: absolute; left: 0; right: 0; top: 3px; bottom: 21px; pointer-events: none; }
.slot .shadow { position: absolute; left: 50%; bottom: -2px; width: 58%; height: 9px; transform: translateX(-50%); background: rgba(30, 60, 20, .35); border-radius: 50%; }
.slot .dog {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  max-width: 96%; max-height: 104%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.slot .tag {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  white-space: nowrap;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 0 6px;
  font-size: 11px; font-weight: 900; line-height: 15px;
  pointer-events: none;
}
.slot .tag .q { font-weight: 900; }
.slot .gem {
  position: absolute; right: 5px; top: 5px; width: 11px; height: 11px;
  transform: rotate(45deg);
  background: var(--q); border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.55);
  pointer-events: none;
}
.slot.q-legendary .gem { animation: twinkle 1.4s steps(2) infinite; }
.slot.q-legendary { border-color: #ffd23f; }
.slot.q-epic { border-color: #c99aff; }
@keyframes twinkle { 50% { filter: brightness(1.6); } }

.slot.empty { background: linear-gradient(180deg, #7fd660, #6cc650); border-style: dashed; border-color: rgba(255,255,255,.7); box-shadow: inset 0 0 0 2px rgba(60,110,40,.35); cursor: default; }
.slot.empty .deco { position: absolute; inset: 0; display: grid; place-items: center; opacity: .55; pointer-events: none; }
.slot.empty .deco span { font-size: 11px; font-weight: 800; color: #2f6e22; margin-top: 2px; }

/* Trạng thái kéo */
.slot.drag-source { border-style: dashed; border-color: #fff; }
.slot.drag-source .dog { opacity: .28; filter: grayscale(.6); }
.slot.drag-source .tag, .slot.drag-source .gem { opacity: .4; }
.slot.drop-move { border-color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 0 0 3px rgba(255,255,255,.5); }
.slot.drop-merge { border-color: var(--gold); box-shadow: inset 0 0 0 3px #fff3a0, 0 0 0 3px var(--gold), 0 0 16px 4px rgba(255, 220, 80, .9); transform: scale(1.04); z-index: 2; }
.slot.drop-merge .dog { animation: hop .45s ease-in-out infinite alternate; }
.slot.drop-reject { border-color: #ff6b6b; box-shadow: inset 0 0 0 2px rgba(255,107,107,.6); }
.slot.drop-reject::after {
  content: "✕"; position: absolute; right: 4px; top: 2px; font-weight: 900; font-size: 15px; color: #ff4d4d;
  text-shadow: -1px -1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.slot.hint-merge { box-shadow: inset 0 0 0 2px rgba(255, 230, 120, .9); }
@keyframes hop { to { transform: translate(-50%, -6%); } }

.slot.shake { animation: shake .3s steps(4); }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.slot.bounce .dog { animation: bounce .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bounce { 0% { transform: translate(-50%, 0) scale(.7, 1.2); } 45% { transform: translate(-50%, -18%) scale(1.08, .95); } 100% { transform: translate(-50%, 0) scale(1); } }
.slot.poof .dog { animation: poof .32s steps(4) forwards; }
@keyframes poof { to { transform: translate(-50%, 0) scale(.2); opacity: 0; } }

.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.spark { position: absolute; width: 6px; height: 6px; background: #fff7a8; box-shadow: 0 0 0 2px #ffcc33; animation: spark .6s steps(6) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.25));
  transform-origin: 50% 100%;
  will-change: transform;
}
.drag-ghost.returning { transition: transform .18s ease-out; }

/* Xem trước ghép */
.merge-preview {
  position: fixed; z-index: 60; pointer-events: none;
  width: 214px;
  background: var(--cream); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 10px;
  box-shadow: 0 0 0 3px var(--gold), 0 6px 0 3px rgba(0,0,0,.3);
  padding: 7px 9px; font-size: 12px; line-height: 1.35; font-weight: 700;
}
.merge-preview .row { display: flex; align-items: center; gap: 8px; }
.merge-preview .thumb { width: 44px; height: 40px; object-fit: contain; flex: none; }
.merge-preview .keep { font-size: 13px; font-weight: 900; }
.merge-preview .lv { font-size: 14px; font-weight: 900; color: #1a5fb4; }
.merge-preview .lose { margin-top: 4px; padding-top: 4px; border-top: 2px dashed #d8b47a; color: #9c2d2d; }
.merge-preview .evo { color: #b06a00; font-weight: 900; }
.merge-preview.reject { width: auto; max-width: 220px; box-shadow: 0 0 0 3px #ff6b6b, 0 6px 0 3px rgba(0,0,0,.3); color: #9c2d2d; font-weight: 900; }
.merge-preview.move { width: auto; box-shadow: 0 0 0 3px #fff, 0 6px 0 3px rgba(0,0,0,.3); }

/* Thanh nút dưới */
.action-bar { flex: none; display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 10px; align-items: end; padding: 6px 4px 6px; }
.action-bar .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px 8px; min-height: 64px; font-size: 13px; text-shadow: var(--outline); line-height: 1.1; }
.action-bar .btn.big { min-height: 82px; font-size: 19px; }
.action-bar .price { display: flex; align-items: center; gap: 4px; font-size: 15px; background: rgba(27,23,48,.45); border-radius: 6px; padding: 1px 8px 1px 4px; }

/* ---------- Thông báo, hộp thoại ---------- */
.toast {
  position: absolute; left: 50%; top: 168px; z-index: 80;
  transform: translate(-50%, -12px); opacity: 0;
  background: var(--ink); color: #fff;
  border: 3px solid var(--gold); border-radius: 10px;
  padding: 8px 14px; font-weight: 800; font-size: 14px; text-align: center;
  max-width: 88%;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.evolve-banner {
  position: absolute; z-index: 70; pointer-events: none;
  transform: translate(-50%, -50%);
  animation: evo 1.1s ease-out forwards;
}
@keyframes evo { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -60%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }

.modal-backdrop {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(10, 16, 36, .55);
  display: grid; place-items: center;
  padding: 16px;
  animation: fadein .12s;
}
@keyframes fadein { from { opacity: 0; } }
.modal {
  position: relative; width: min(330px, 100%);
  padding: 14px 14px 14px;
  color: var(--ink);
  animation: popin .16s cubic-bezier(.3, 1.5, .6, 1);
}
@keyframes popin { from { transform: scale(.8); } }
.modal .close { position: absolute; right: -10px; top: -12px; width: 40px; height: 40px; font-size: 20px; text-shadow: var(--outline); }
.modal .ribbon {
  margin: -4px auto 10px; width: fit-content; max-width: 100%;
  background: linear-gradient(180deg, #4f9df5, #2a6fd8); border: 3px solid var(--gold); border-radius: 8px;
  box-shadow: 0 0 0 3px var(--ink);
  padding: 4px 14px; color: #fff; font-weight: 900; font-size: 17px; text-shadow: var(--outline); text-align: center;
}
.card-scene {
  display: grid; place-items: end center;
  height: 150px; border-radius: 8px; border: 3px solid #8fb3e0;
  background: linear-gradient(180deg, #8ad6ff 0 55%, #7fd660 55% 100%);
  box-shadow: inset 0 0 0 2px #fff;
  padding-bottom: 8px; overflow: hidden;
}
.card-scene img { max-height: 125px; max-width: 90%; }
.stats { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 15px; background: var(--cream); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 8px 10px; }
.stats dt { font-weight: 700; color: #6b4a2a; }
.stats dd { margin: 0; font-weight: 900; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.stats .note { grid-column: 1 / -1; font-size: 11px; color: #8a6a4a; font-weight: 600; text-align: center; }
.qgem { display: inline-block; width: 11px; height: 11px; transform: rotate(45deg); background: var(--q); border: 2px solid var(--ink); }
.modal .actions { display: flex; gap: 10px; margin-top: 12px; }
.modal .actions .btn { flex: 1; min-height: 44px; font-size: 15px; text-shadow: var(--outline); }
.modal .actions .btn.gray { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); }
.confirm-pair { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cream); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 8px; }
.confirm-pair figure { margin: 0; text-align: center; font-size: 12px; font-weight: 800; width: 110px; }
.confirm-pair img { height: 64px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 4px; }
.confirm-pair .arrow { font-size: 22px; font-weight: 900; color: var(--ink); }
.confirm-text { font-size: 14px; font-weight: 700; margin: 10px 2px 0; line-height: 1.4; }
.confirm-text b.lose { color: #9c2d2d; }

/* ---------- Bộ sưu tập ---------- */
.collection { padding: max(8px, env(safe-area-inset-top)) 10px 0; gap: 6px; }
.col-header { flex: none; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 8px; }
.col-title { padding: 6px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.col-title .px-host { width: 100%; display: flex; justify-content: center; }
.col-title .progress { background: #4a2810; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 12px; font-weight: 900; font-size: 15px; color: #fff; }
.col-title .progress b { color: var(--gold); }
.set-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.set-row { padding: 8px; }
.set-badge {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  background: linear-gradient(180deg, #3f86e8, #2a5fc0); border: 3px solid var(--gold); border-radius: 8px;
  box-shadow: 0 0 0 2px var(--ink);
  padding: 4px 10px;
}
.set-badge .name { flex: 1; font-weight: 900; font-size: 16px; text-shadow: var(--outline); }
.set-badge .count { display: flex; align-items: center; gap: 5px; font-weight: 900; font-size: 15px; background: rgba(27,23,48,.5); border-radius: 6px; padding: 1px 8px 1px 5px; }
.set-badge .count b { color: var(--gold); }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.breed-card {
  position: relative; padding: 0; cursor: pointer;
  border: 3px solid #a9c3e6; border-radius: 8px;
  background: #fff; overflow: hidden;
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  touch-action: manipulation;
  transition: transform .08s;
}
.breed-card:active { transform: translateY(2px); }
.breed-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.breed-card .pic { position: relative; aspect-ratio: 1 / 0.95; background: linear-gradient(180deg, #8ad6ff 0 58%, #7fd660 58% 100%); display: grid; place-items: end center; padding-bottom: 3px; }
.breed-card .pic img.dog { max-width: 92%; max-height: 92%; }
.breed-card .label { background: var(--cream); color: var(--ink); font-size: 10.5px; font-weight: 900; line-height: 1.15; padding: 2px 1px 3px; text-align: center; min-height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breed-card.locked { border-color: #5c7194; background: #2c3d5e; }
.breed-card.locked .pic { background: linear-gradient(180deg, #3a4f75, #2c3d5e); }
.breed-card.locked .label { background: #1e2b45; color: #9fb2d4; }
.silhouette { filter: brightness(0) saturate(0); opacity: .55; }
.breed-card .lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.breed-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--gold), 0 0 12px 5px rgba(255,210,63,.7); z-index: 1; }

.detail { flex: none; margin: 0 -10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; border-bottom: 0; }
.detail .head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; }
.detail .head .px-host { width: 100%; display: flex; justify-content: center; }
.detail .sub { font-size: 12px; font-weight: 800; color: #fff; text-shadow: var(--outline); }
.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.form-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.form-card .pic { position: relative; width: 100%; aspect-ratio: 1 / 0.9; border: 3px solid #8fb3e0; border-radius: 8px; box-shadow: 0 0 0 2px var(--ink); background: linear-gradient(180deg, #8ad6ff 0 55%, #7fd660 55% 100%); display: grid; place-items: end center; overflow: hidden; padding-bottom: 3px; }
.form-card .pic img.dog { max-width: 92%; max-height: 92%; }
.form-card.locked .pic { background: linear-gradient(180deg, #3a4f75, #2c3d5e); border-color: #5c7194; }
.form-card .lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.form-card .lv { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; font-weight: 900; padding: 0 6px; white-space: nowrap; }
.detail .foot { margin-top: 8px; text-align: center; font-weight: 900; font-size: 13px; background: #4a2810; border: 2px solid var(--ink); border-radius: 8px; padding: 4px 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.detail .foot b { color: var(--gold); }
.detail .foot.hint { color: #ffe9a8; font-weight: 800; }

/* Màn hình thấp: thu nhỏ khoảng cách */
@media (max-height: 640px) {
  .action-bar .btn { min-height: 56px; font-size: 12px; }
  .action-bar .btn.big { min-height: 70px; font-size: 17px; }
  .info-bar .coins { font-size: 18px; }
  .board-grid { gap: 5px; }
  .card-scene { height: 120px; }
}
@container (max-width: 359px) {
  .action-bar { gap: 7px; }
  .action-bar .btn { font-size: 11.5px; }
  .breed-card .label { font-size: 9.5px; }
}

/* ================= Bổ sung theo ảnh concept trang chủ ================= */
.top-area { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.top-bar { width: 100%; }
.logo { flex-direction: column; gap: 0; padding: 4px 14px 6px; min-height: 0; justify-self: center; width: fit-content; max-width: 100%; }
.logo .px-host { display: flex; justify-content: center; }
.logo .px-host + .px-host { margin-top: -4px; }
.info-bar {
  background: linear-gradient(180deg, #2f6fd6, #1f4fb8);
  border: 3px solid var(--gold); border-radius: 12px;
  box-shadow: 0 0 0 3px var(--ink), inset 0 3px 0 rgba(255,255,255,.25), 0 5px 0 3px rgba(0,0,0,.25);
  width: min(300px, 92%); min-width: 0;
}

/* Bàn: các ô đất cỏ nằm thẳng trên đảo, viền đá */
.board-panel { background: transparent; border: 0; box-shadow: none; padding: 6px 2px 2px; }
.slot { border-radius: 12px; border-width: 4px; border-color: #d9b77e; box-shadow: inset 0 0 0 2px #a8814a, inset 0 -4px 0 rgba(0,0,0,.1), 0 4px 0 #3f8f2c; }
.slot.empty { border-style: solid; border-color: #d2b07a; background: radial-gradient(circle at 28% 32%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 70%, #9aa3ad 0 4px, transparent 5px), linear-gradient(180deg, #84d965, #6cc650); box-shadow: inset 0 0 0 2px #a8814a, 0 4px 0 #3f8f2c; }
.slot.empty .deco { opacity: .45; }
.slot.selected { border-color: var(--gold); box-shadow: inset 0 0 0 2px #fff3a0, 0 0 0 3px var(--gold), 0 0 14px 3px rgba(255,210,63,.75); z-index: 2; }
.slot.selected .tag { z-index: 3; }
.slot.spawn { animation: glow .6s steps(6); }
@keyframes glow { 0% { box-shadow: 0 0 0 6px #fff, 0 0 26px 10px #fff7a8; } 100% { box-shadow: inset 0 0 0 2px #a8814a, 0 4px 0 #3f8f2c; } }
.slot.petting .dog { animation: wiggle .6s steps(6); }
@keyframes wiggle { 0%, 100% { transform: translate(-50%, 0) rotate(0); } 20% { transform: translate(-50%, -8%) rotate(-6deg); } 40% { transform: translate(-50%, 0) rotate(5deg); } 60% { transform: translate(-50%, -5%) rotate(-4deg); } 80% { transform: translate(-50%, 0) rotate(3deg); } }

.btn.adopt { background: linear-gradient(180deg, var(--blue-light) 0 45%, var(--blue) 45% 100%); }
.btn.adopt .adopt-title { font-size: inherit; }
.btn.adopt .adopt-note { font-size: 11px; color: #ffe9a8; min-height: 0; }
.btn.adopt .adopt-note:empty { display: none; }
.btn.adopt.poor { filter: saturate(.55) brightness(.92); }
.btn.adopt.poor .price { color: #ffb3b3; }
.btn.adopt.full { filter: saturate(.4); }
.btn.nudge { animation: shake .3s steps(4); }
.btn.red { background: linear-gradient(180deg, #ff7a6b 0 45%, #e5483f 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -4px 0 #a52e2a, 0 5px 0 3px var(--ink); }
.btn.gray { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); }
.btn:disabled { cursor: default; }

/* Bảng thông tin chó: bảng gỗ nổi phía dưới */
.info-sheet {
  position: absolute; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 40;
  padding: 10px 10px 10px; border-radius: 14px; color: var(--ink);
}
.info-sheet.enter { animation: sheetin .18s ease-out; }
@keyframes sheetin { from { transform: translateY(40px); opacity: 0; } }
.info-sheet .close { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; font-size: 18px; text-shadow: var(--outline); }
.sheet-title { display: flex; justify-content: center; margin: -2px 48px 8px; min-height: 30px; }
.sheet-body { display: grid; grid-template-columns: 40% 1fr; gap: 10px; align-items: stretch; }
.sheet-pic { position: relative; border-radius: 10px; border: 3px solid var(--wood-edge); background: linear-gradient(180deg, #8ad6ff 0 55%, #7fd660 55% 100%); box-shadow: inset 0 0 0 2px #fff; display: grid; place-items: end center; padding-bottom: 6px; min-height: 120px; overflow: hidden; }
.sheet-pic .sheet-dog { max-width: 92%; max-height: 118px; }
.sheet-dog.wiggle { animation: wiggle2 .6s steps(6); }
@keyframes wiggle2 { 0%, 100% { transform: rotate(0); } 25% { transform: translateY(-8px) rotate(-6deg); } 50% { transform: rotate(5deg); } 75% { transform: translateY(-4px) rotate(-3deg); } }
.sheet-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet-stats { display: flex; flex-direction: column; gap: 4px; }
.srow { display: flex; align-items: center; gap: 6px; background: var(--cream); border: 2px solid #d8b47a; border-radius: 8px; padding: 3px 8px; font-size: 14px; }
.srow .k { font-weight: 800; color: #6b4a2a; }
.srow .v { font-weight: 900; margin-left: auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.srow small { font-weight: 700; color: #8a6a4a; font-size: 11px; }
.srow .blue { color: #1a5fb4; }
.btn.pet { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; text-shadow: var(--outline); }
.btn.pet.waiting { filter: saturate(.4) brightness(.95); }
.pet-hint { text-align: center; font-size: 11px; font-weight: 700; color: #6b4a2a; }
.hearts { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.heart-fx { position: absolute; bottom: 30%; animation: heart 1s steps(8) forwards; opacity: 0; }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), -60px); } }

/* Banner nhận chó */
.adopt-banner {
  position: absolute; left: 50%; bottom: 128px; z-index: 75;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #2f6fd6, #1f4fb8); color: #fff;
  border: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px rgba(0,0,0,.3);
  padding: 6px 14px 6px 8px; min-width: 220px; max-width: 92%;
  transition: opacity .15s, transform .15s;
}
.adopt-banner.show { opacity: 1; transform: translate(-50%, 0); }
.adopt-banner img { height: 46px; width: auto; }
.adopt-banner .t1 { font-weight: 900; font-size: 15px; text-shadow: var(--outline); }
.adopt-banner .t1 b { color: var(--gold); }
.adopt-banner .t2 { font-weight: 900; font-size: 13px; }
.adopt-banner .new { background: #e5483f; border-radius: 4px; padding: 0 4px; font-size: 11px; }

/* Popup chào mừng trở lại */
.modal.welcome { padding-top: 54px; overflow: visible; }
.welcome-head { position: absolute; left: 0; right: 0; top: -58px; display: flex; flex-direction: column; align-items: center; }
.welcome-dog { height: 74px; width: auto; margin-bottom: -10px; position: relative; z-index: 1; }
.px-ribbon { padding: 6px 10px; display: flex; justify-content: center; max-width: 96%; }
.welcome-card { background: var(--cream); border: 3px solid #d8b47a; border-radius: 10px; text-align: center; padding: 10px 8px; color: var(--ink); }
.welcome-card .away { font-weight: 800; font-size: 15px; }
.welcome-card .capped { font-weight: 800; font-size: 13px; color: #b06a00; margin-top: 2px; }
.welcome-card .label { font-weight: 900; font-size: 17px; margin-top: 6px; }
.welcome-card .amount { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; font-weight: 900; margin: 4px 0; }
.welcome-card .amount b { font-size: 30px; color: #ffcc33; text-shadow: var(--outline); }
.welcome-card .added { font-weight: 800; font-size: 13px; color: #6b4a2a; }
.btn.big-cta { min-height: 52px; font-size: 20px; }

/* Cài đặt */
.settings-list { display: flex; flex-direction: column; gap: 8px; background: var(--cream); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 10px; }
.set-row-item { display: flex; align-items: center; gap: 10px; }
.set-row-item .k { flex: 1; font-weight: 800; font-size: 15px; }
.btn.toggle { min-width: 92px; min-height: 38px; font-size: 14px; text-shadow: var(--outline); }
.settings-note { font-size: 12px; font-weight: 700; color: #fff; text-shadow: var(--outline); margin: 10px 2px 0; line-height: 1.5; }
.modal .close.red { right: -10px; top: -12px; }

.mode-tag { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 30; background: #e5483f; color: #fff; font-size: 10px; font-weight: 900; padding: 1px 8px; border-radius: 0 0 6px 6px; pointer-events: none; white-space: nowrap; }

/* Giảm chuyển động: tắt nảy/lắc/hạt, giữ viền sáng, nhãn và thông báo */
body.reduce-motion .slot .dog,
body.reduce-motion .sheet-dog,
body.reduce-motion .slot.shake,
body.reduce-motion .btn.nudge,
body.reduce-motion .modal,
body.reduce-motion .info-sheet.enter,
body.reduce-motion .slot.spawn { animation: none !important; }
body.reduce-motion .spark, body.reduce-motion .heart-fx { display: none; }
body.reduce-motion .evolve-banner { animation: evoStatic 1.1s steps(1) forwards; }
@keyframes evoStatic { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
body.reduce-motion .drag-ghost.returning { transition: none; }
body.reduce-motion .slot.drop-merge { transform: none; }
body.reduce-motion .slot.spawn { box-shadow: 0 0 0 4px #fff; }

/* ---------- Hoạt ảnh chờ ---------- */
/* Chỉ biến đổi ảnh (không đổi ô, không đổi vùng bấm); ô có overflow: hidden nên sprite không lấn sang ô bên.
   Các hiệu ứng khác (.bounce, .petting, .drop-merge…) có độ ưu tiên cao hơn nên tạm thay nhịp thở. */
.slot .idle-breathe { animation: idleBreathe var(--idle-dur, 2.6s) ease-in-out var(--idle-delay, 0s) infinite; }
.slot .idle-bob { animation: idleBob var(--idle-dur, 2.6s) ease-in-out var(--idle-delay, 0s) infinite; }
@keyframes idleBreathe { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 50% { transform: translateX(-50%) scale(1.018, .972); } }
@keyframes idleBob { 0%, 60%, 100% { transform: translateX(-50%) translateY(0) scale(1, 1); } 30% { transform: translateX(-50%) translateY(-3%) scale(.99, 1.01); } }
.slot.drag-source .dog { animation: none; }
body.anim-paused .slot .dog { animation-play-state: paused; }

/* ---------- Khóa chó, gợi ý ghép, thả chó ---------- */
.slot .lock-badge { position: absolute; left: 4px; top: 4px; z-index: 2; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.slot.drop-move { border-color: #fff; background: linear-gradient(180deg, #b9f59a, #93e176); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px rgba(255,255,255,.85), 0 0 12px 2px rgba(255,255,255,.6); }
.slot.hint-merge { border-color: var(--gold); box-shadow: inset 0 0 0 2px #fff3a0, 0 0 0 3px var(--gold), 0 0 10px 2px rgba(255,210,63,.7); }
.slot.suggest-from { border-color: var(--blue-light); box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--blue), 0 0 14px 4px rgba(111,192,255,.9); z-index: 2; }
.slot.suggest-to { border-color: var(--gold); box-shadow: inset 0 0 0 2px #fff3a0, 0 0 0 3px var(--gold), 0 0 14px 4px rgba(255,210,63,.9); z-index: 2; }
.slot.suggest-to .dog, .slot.suggest-from .dog { animation: hop .45s ease-in-out infinite alternate; }
.suggest-arrow { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; overflow: visible; animation: sgpulse .8s ease-in-out infinite alternate; }
@keyframes sgpulse { to { opacity: .7; } }
.release-fx { position: absolute; object-fit: contain; pointer-events: none; animation: releasefx .6s steps(6) forwards; }
@keyframes releasefx { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-26px) scale(.35); } }

.merge-preview .res-title { font-size: 12px; font-weight: 900; }
.merge-preview .res-title b { color: #1a5fb4; }
.merge-preview .res-chip { display: inline-block; margin: 2px 0; padding: 0 8px; border: 2px solid var(--ink); border-radius: 6px; background: #eaffd9; box-shadow: inset 0 0 0 2px var(--q); font-size: 14px; font-weight: 900; }
.merge-preview .warn { margin-top: 4px; color: #c0392b; font-weight: 900; }

.sheet-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sheet-tools .btn { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; text-shadow: var(--outline); }
.sheet-tools .ic { display: flex; }
.btn.lock-btn.on { background: linear-gradient(180deg, #ffe27a 0 45%, #f4b322 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #b37a00, 0 6px 0 3px var(--ink); }
.btn.release-btn { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); border-color: #e9eef5; }
.btn.release-btn.blocked { filter: saturate(.2) brightness(.85); opacity: .75; }
.tool-note { text-align: center; font-size: 11px; font-weight: 800; color: #7a3b16; margin-top: 8px; min-height: 0; }
.tool-note:empty { display: none; }
.sheet-pic .pic-lock { position: absolute; right: 6px; top: 6px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }

.release-modal .px-ribbon { margin-bottom: 6px; }
.release-card { background: var(--cream); border: 3px solid var(--wood-edge); border-radius: 10px; padding: 10px; text-align: center; color: var(--ink); }
.release-card img { height: 84px; width: auto; max-width: 70%; object-fit: contain; display: block; margin: 0 auto 6px; }
.release-name { display: inline-block; background: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 10px; font-weight: 900; font-size: 14px; }
.release-high { margin-top: 6px; font-weight: 900; color: #7a3b16; font-size: 12px; }
.release-warn { margin-top: 8px; color: #c0392b; font-weight: 900; font-size: 14px; line-height: 1.35; }

.board-notice {
  position: absolute; left: 50%; top: 162px; z-index: 76;
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  width: min(92%, 360px);
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff;
  border: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 6px 0 3px rgba(0,0,0,.3);
  padding: 8px 10px 8px 12px; font-weight: 800; font-size: 13px; line-height: 1.35;
  transition: opacity .15s, transform .15s;
}
.board-notice.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.board-notice .msg { flex: 1; }
.board-notice .btn.small { flex: none; min-height: 38px; padding: 4px 10px; font-size: 13px; font-weight: 900; text-shadow: var(--outline); white-space: nowrap; }

body.reduce-motion .suggest-arrow,
body.reduce-motion .slot.suggest-to .dog,
body.reduce-motion .slot.suggest-from .dog,
body.reduce-motion .release-fx { animation: none !important; }
body.reduce-motion .release-fx { opacity: 0; }

/* ---------- Tài khoản ---------- */
.account-row { margin-bottom: 8px; }
.account-row .k b { color: #1a5fb4; }
.account-row .k i { color: #6b4a2a; font-style: normal; }
.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.acc-tabs .btn { min-height: 40px; font-size: 14px; text-shadow: var(--outline); }
.acc-form { display: flex; flex-direction: column; gap: 8px; background: var(--cream); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 10px; color: var(--ink); }
.acc-form label { display: flex; flex-direction: column; gap: 3px; font-weight: 800; font-size: 13px; }
.acc-form input { font: inherit; font-size: 16px; font-weight: 700; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); -webkit-user-select: text; user-select: text; }
.acc-form input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.acc-err { color: #c0392b; font-weight: 900; font-size: 13px; min-height: 0; }
.acc-err:empty { display: none; }
.acc-note { font-size: 12px; font-weight: 700; color: #6b4a2a; line-height: 1.4; }
.acc-form .btn.big-cta { min-height: 46px; font-size: 16px; text-shadow: var(--outline); margin-top: 4px; }
.acc-card { background: var(--cream); border: 2px solid var(--wood-edge); border-radius: 8px; padding: 10px; color: var(--ink); font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.acc-card .acc-name { font-size: 20px; font-weight: 900; color: #1a5fb4; }
.prog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.prog-card { background: var(--cream); border: 3px solid var(--wood-edge); border-radius: 10px; padding: 8px; color: var(--ink); font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.prog-card.cloud { border-color: var(--blue); }
.prog-card .pc-title { font-weight: 900; font-size: 12px; color: #6b4a2a; }
.prog-card .pc-time { font-size: 11px; color: #8a6a4a; }

/* ---------- Nhiệm vụ ngày ---------- */
.mission-btn { position: relative; }
.mission-btn .mission-label {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  white-space: nowrap; font-size: 9px; font-weight: 900; color: #fff; text-shadow: var(--outline); letter-spacing: .2px;
  pointer-events: none;
}
.mission-btn .mission-dot {
  position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: #ff4d4d; border: 2px solid var(--ink); display: none;
}
.mission-btn.has-reward .mission-dot { display: block; animation: dotpulse 1s ease-in-out infinite; }
@keyframes dotpulse { 50% { transform: scale(1.25); } }
body.reduce-motion .mission-btn .mission-dot, body.anim-paused .mission-btn .mission-dot { animation: none; }

.modal.missions { width: min(360px, 100%); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); display: flex; flex-direction: column; }
.modal.missions .ribbon { font-size: 18px; padding: 5px 18px; }
.mission-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding: 2px; }
.mission-row {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px;
  background: var(--cream); border: 3px solid var(--wood-edge); border-radius: 10px;
  box-shadow: inset 0 0 0 2px #ffe9b8; padding: 8px;
}
.mission-row.ready { box-shadow: inset 0 0 0 2px #fff6a8, 0 0 0 3px var(--gold); }
.mission-row.claimed { opacity: .82; }
.mission-icon { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.mission-mid { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mission-title { font-weight: 900; font-size: 14px; line-height: 1.15; }
.mission-bar {
  position: relative; height: 18px; border-radius: 9px; overflow: hidden;
  background: #cfc2a6; border: 2px solid #8f7f63;
}
.mission-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8de86a, #3fae32); transition: width .25s; }
.mission-row.claimed .mission-bar .fill { background: linear-gradient(180deg, #c9d2df, #9aa6b8); }
.mission-bar .txt { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 900; line-height: 14px; color: #fff; text-shadow: var(--outline); }
.mission-reward { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; color: #7a4520; }
.mission-note { font-size: 11px; color: #9c2d2d; font-weight: 700; }
.btn.mission-swap { font-size: 11px; line-height: 1.2; padding: 5px 6px 7px; min-height: 30px; text-shadow: var(--outline); }
.btn.mission-claim { min-width: 74px; min-height: 44px; font-size: 13px; padding: 4px 6px 7px; text-shadow: var(--outline); }
.btn.mission-claim:disabled { cursor: default; filter: none; }
.btn.mission-claim.wait { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); font-size: 11px; }
.btn.mission-claim.done { background: linear-gradient(180deg, #e8dcc0 0 45%, #cbb98f 45% 100%); color: #6b5a3a; text-shadow: none; box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #a8946a, 0 6px 0 3px var(--ink); font-size: 11px; }
.mission-foot { margin-top: 10px; background: var(--cream); border: 3px solid var(--wood-edge); border-radius: 10px; padding: 6px 8px; font-size: 12px; text-align: center; line-height: 1.35; }
.mission-foot small { color: #6b5a3a; font-size: 10.5px; }
@media (max-width: 340px) {
  .mission-row { grid-template-columns: 40px 1fr auto; gap: 6px; padding: 6px; }
  .mission-icon { width: 40px; height: 40px; }
  .btn.mission-claim { min-width: 62px; }
}

/* ---------- Sổ thành tựu (tab trong Bộ sưu tập) ---------- */
.col-tabs { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 2px; }
.col-tab {
  position: relative; min-height: 40px; cursor: pointer; touch-action: manipulation;
  font: 900 14px var(--font); color: #e8dcc0; text-shadow: var(--outline);
  background: linear-gradient(180deg, #8a5a30, #6b4120); border: 3px solid var(--wood-edge); border-radius: 10px 10px 4px 4px;
  box-shadow: 0 0 0 2px var(--ink);
}
.col-tab.active { color: #fff; background: linear-gradient(180deg, var(--wood-light), var(--wood)); border-color: var(--gold); }
.col-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.col-tab .tab-dot, .action-bar .ach-dot {
  position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%;
  background: #ff4d4d; border: 2px solid var(--ink); display: none; pointer-events: none;
}
.col-tab .tab-dot.on, .action-bar .has-badge .ach-dot { display: block; animation: dotpulse 1s ease-in-out infinite; }
.action-bar .btn.side { position: relative; }
body.reduce-motion .tab-dot, body.reduce-motion .ach-dot, body.anim-paused .tab-dot, body.anim-paused .ach-dot { animation: none !important; }
.ach-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 2px max(14px, env(safe-area-inset-bottom)); }
.ach-list[hidden], .set-list[hidden], .detail[hidden] { display: none; }
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ach-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: var(--cream); color: var(--ink); border: 3px solid var(--wood-edge); border-radius: 10px;
  box-shadow: 0 0 0 2px var(--ink), 0 3px 0 2px rgba(0,0,0,.3); padding: 8px 6px 8px;
}
.ach-pic { position: relative; width: 64px; height: 56px; display: grid; place-items: center; }
.ach-icon { max-width: 64px; max-height: 56px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.ach-card.locked .ach-icon { filter: grayscale(1) brightness(.75); opacity: .7; }
.ach-pic .lock { position: absolute; right: 0; bottom: 0; }
.ach-card.ready { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--gold), 0 0 14px 5px rgba(255,210,63,.65); }
.ach-card.claimed { background: #f3ead2; }
.ach-name { font-weight: 900; font-size: 14px; line-height: 1.15; }
.ach-desc { font-size: 11.5px; font-weight: 700; color: #6b4a2a; line-height: 1.2; min-height: 28px; }
.ach-bar { position: relative; width: 100%; height: 16px; background: #4a2810; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.ach-bar .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ffe066, #f0a020); }
.ach-card.claimed .ach-bar .fill { background: linear-gradient(180deg, #8de86a, #3fae32); }
.ach-bar .txt { position: relative; display: block; font-size: 11px; font-weight: 900; line-height: 12px; color: #fff; text-shadow: var(--outline); }
.btn.ach-claim { width: 100%; min-height: 40px; font-size: 12px; padding: 4px 4px 7px; margin-top: 2px; text-shadow: var(--outline); }
.btn.ach-claim:disabled { cursor: default; filter: none; }
.btn.ach-claim.wait { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); }
.btn.ach-claim.done { background: linear-gradient(180deg, #e8dcc0 0 45%, #cbb98f 45% 100%); color: #6b5a3a; text-shadow: none; box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #a8946a, 0 6px 0 3px var(--ink); }
.ach-date { font-size: 10.5px; color: #6b5a3a; font-weight: 700; margin-top: 4px; }
.ach-note { margin: 12px 4px 0; font-size: 12px; font-weight: 700; color: #fff; text-shadow: var(--outline); text-align: center; line-height: 1.35; }
@media (max-width: 340px) {
  .ach-grid { gap: 8px; }
  .ach-card { padding: 6px 4px; }
  .ach-name { font-size: 13px; }
  .btn.ach-claim { font-size: 11px; }
}

/* ---------- Hướng dẫn lần đầu ---------- */
.tut-layer { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.tut-layer[hidden], .tut-bubble[hidden], .tut-layer [hidden], .tut-bubble [hidden] { display: none !important; }
.tut-img { position: absolute; image-rendering: pixelated; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tut-glow {
  position: absolute; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 8px var(--gold), 0 0 0 11px var(--ink), 0 0 26px 12px rgba(255,220,80,.9);
  animation: tutglow 1s ease-in-out infinite alternate;
}
@keyframes tutglow { to { box-shadow: 0 0 0 3px var(--ink), 0 0 0 8px #fff3a0, 0 0 0 11px var(--ink), 0 0 34px 16px rgba(255,220,80,.95); } }
.tut-ring, .tut-box { object-fit: contain; }
.tut-ring { animation: tutpulse .9s ease-in-out infinite alternate; }
@keyframes tutpulse { to { transform: scale(1.08); } }
.tut-hand-wrap { position: absolute; pointer-events: none; }
.tut-hand { position: static; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(27,23,48,.35)); }
.tut-hand.tap { animation: tuttap .9s ease-in-out infinite; }
@keyframes tuttap { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-4px); } }
.tut-hand.drag { animation: tutdrag 1.8s ease-in-out infinite; }
@keyframes tutdrag {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { transform: translate(0, 0); opacity: 1; }
  72% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  88%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.tut-arrow { object-fit: contain; animation: tutpulse .7s ease-in-out infinite alternate; }
.tut-bubble {
  position: absolute; z-index: 36; pointer-events: none; max-width: 340px; /* chạm xuyên qua chữ xuống bàn; chỉ nút bấm được */
  background: var(--cream); color: var(--ink); border: 3px solid var(--wood-edge); border-radius: 12px;
  box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px rgba(0,0,0,.35);
  padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; transition: opacity .15s;
}
.tut-bubble .btn { pointer-events: auto; }
.tut-bubble.dim { opacity: .35; }
.tut-bubble.dim .btn { pointer-events: none; }
.tut-step { align-self: flex-start; font-size: 11px; font-weight: 900; color: #fff; background: var(--blue-dark); border: 2px solid var(--ink); border-radius: 6px; padding: 0 7px; text-shadow: none; letter-spacing: .3px; }
.tut-text { font-size: 15px; font-weight: 800; line-height: 1.3; }
.tut-note { font-size: 12.5px; font-weight: 700; color: #9c2d2d; line-height: 1.3; background: #ffe3d6; border: 2px solid #e8a487; border-radius: 8px; padding: 4px 7px; }
.tut-btns { display: flex; gap: 8px; justify-content: flex-end; }
.tut-btns .btn { min-height: 38px; min-width: 92px; font-size: 13px; padding: 4px 10px 7px; text-shadow: var(--outline); }
.tut-btns .btn.tut-skip { background: linear-gradient(180deg, #c9d2df 0 45%, #9aa6b8 45% 100%); box-shadow: 0 0 0 3px var(--ink), inset 0 -5px 0 #6c788a, 0 6px 0 3px var(--ink); }
.modal .actions .btn.tut-replay { background: linear-gradient(180deg, var(--blue-light) 0 45%, var(--blue) 45% 100%); font-size: 13px; }
body.anim-paused .tut-layer *, body.anim-paused .tut-glow { animation-play-state: paused !important; }
body.reduce-motion .tut-layer *, body.reduce-motion .tut-glow { animation: none !important; }
body.reduce-motion .tut-hand.drag { opacity: 1; transform: none; }