/* style.css — nhận diện "bảng gỗ & giấy rơm" của Nông Trại Của Tôi */
:root {
  color-scheme: light;
  --ink: #3b2a1e; --ink-2: #6d5440;
  --paper: #fff4d4; --paper-2: #f6e3b4; --straw: #ecd08a;
  --wood: #6b4423; --wood-2: #8a5a34; --wood-3: #b07a44;
  --leaf: #4f9a3c; --leaf-d: #36702a; --sky: #3e8fd1; --sky-d: #2a6aa3;
  --berry: #d6453a; --berry-d: #a12f27; --gold: #f2b632; --gold-d: #c58b12;
  --shadow: rgba(40, 24, 10, 0.35);
  --font: "Baloo 2", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #f3e3bd; --paper-2: #e6cf98;
  }
}
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #4d8a35; font-family: var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; touch-action: none; }
.hidden { display: none !important; }
.ico { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.ico.big { width: 30px; height: 30px; }
.ico.huge { width: 64px; height: 64px; }
button { font-family: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
b { font-weight: 800; }
.pos { color: var(--leaf-d); } .neg { color: var(--berry); }
.muted { color: var(--ink-2); font-size: 13px; }

/* ---------- bảng gỗ dùng chung ---------- */
.board { background: var(--paper); border: 3px solid var(--wood); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--paper-2), 0 4px 0 var(--wood), 0 8px 18px var(--shadow); }

/* ---------- nút ---------- */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 34px; padding: 4px 12px; font-size: 14px; font-weight: 800; border: 2px solid var(--wood); border-radius: 8px; background: #fffaf0; box-shadow: 0 3px 0 var(--wood); cursor: pointer; line-height: 1.15; transition: transform 0.06s; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn small { font-weight: 600; font-size: 12px; opacity: 0.9; }
.btn.green { background: var(--leaf); color: #fff; border-color: var(--leaf-d); box-shadow: 0 3px 0 var(--leaf-d); }
.btn.gold { background: var(--gold); color: #4a3200; border-color: var(--gold-d); box-shadow: 0 3px 0 var(--gold-d); }
.btn.red { background: var(--berry); color: #fff; border-color: var(--berry-d); box-shadow: 0 3px 0 var(--berry-d); }
.btn.ghost { background: transparent; }
.btn.big { min-height: 48px; font-size: 18px; padding: 6px 22px; }
.btn.mini { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.actions.col { flex-direction: column; align-items: stretch; }
.actions.center { justify-content: center; }
.actions.sep { border-top: 2px dashed var(--straw); padding-top: 8px; }
.x { width: 30px; height: 30px; border: 2px solid var(--wood); border-radius: 7px; background: var(--paper-2); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; flex: none; }

/* ---------- panel ---------- */
#panel { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h, 70px) + 16px + env(safe-area-inset-bottom, 0px)); width: min(860px, calc(100vw - 16px)); max-height: min(62vh, calc(100vh - var(--hud-h, 50px) - var(--nav-h, 70px) - 40px)); display: flex; flex-direction: column; z-index: 13; background: var(--paper); border: 3px solid var(--wood); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--paper-2), 0 4px 0 var(--wood), 0 10px 24px var(--shadow); animation: rise 0.18s ease-out; }
@keyframes rise { from { transform: translate(-50%, 16px); opacity: 0; } }
.panel-head { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 3px solid var(--straw); }
.tabs { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tab { border: 2px solid var(--wood-3); background: transparent; padding: 4px 10px; border-radius: 7px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--wood-2); color: #fff6d8; border-color: var(--wood); }
.panel-body { overflow-y: auto; padding: 10px 12px 14px; font-size: 14px; }
.panel-body h4 { margin: 10px 0 6px; font-size: 15px; }
.card { background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 8px 10px; }
.card h4 { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
.card.warn { background: #fff0c8; border-color: var(--gold); display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; font-size: 13px; }
.row > span { color: var(--ink-2); }
.bar { display: inline-block; flex: 1; min-width: 70px; max-width: 160px; height: 9px; background: #e3d2a6; border: 1px solid var(--wood-3); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.bar i { display: block; height: 100%; }
.list { display: flex; flex-direction: column; gap: 6px; }
.li { display: flex; align-items: center; gap: 10px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 6px 10px; }
.li > div:not(.right) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.li small { color: var(--ink-2); font-size: 12px; }
.li.ok { border-color: var(--leaf); } .li.cur { border-color: var(--gold); background: #fff3d0; } .li.dim { opacity: 0.6; } .li.royal { border-color: #c08bff; }
.li.sm { padding: 4px 6px; }
.li .right { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tag { font-size: 11px; font-weight: 800; background: var(--paper-2); border: 1px solid var(--wood-3); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.rar { width: 10px; height: 26px; border-radius: 3px; border: 1px solid var(--wood-3); flex: none; }
.bcard { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 8px; }
.bcard small { font-size: 12px; color: var(--ink-2); }
.bcard .btn { margin-top: auto; align-self: stretch; }
.bcard.locked { opacity: 0.6; }
.ach { display: flex; flex-direction: column; gap: 3px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 8px; filter: grayscale(0.7); }
.ach.got { filter: none; border-color: var(--gold); background: #fff6d6; }
.ach small { font-size: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--ink-2); padding: 20px; }
.cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 12px; color: var(--ink-2); border-bottom: 2px solid var(--straw); padding: 4px; }
.tbl td { padding: 3px 4px; border-bottom: 1px dashed var(--straw); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 999px; padding: 2px 8px; font-size: 13px; }
.fcard { background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 8px 10px; }
.fhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fhead small { color: var(--ink-2); font-size: 12px; }
.fstats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin: 6px 0; }
.fstats span { display: inline-flex; align-items: center; gap: 4px; }
.jobs { display: flex; gap: 4px; flex-wrap: wrap; }
.jobs .btn { min-height: 28px; font-size: 12px; padding: 2px 9px; }
.rank { display: inline-block; font-weight: 800; font-size: 12px; color: #2b1d14; padding: 0 7px; border-radius: 5px; border: 2px solid var(--wood); }
.rank.big { font-size: 18px; padding: 2px 10px; }
.chain { display: flex; align-items: stretch; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.node { flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: #fffaf0; border: 2px solid var(--leaf); border-radius: 9px; padding: 6px; }
.node.off { border-style: dashed; border-color: var(--wood-3); opacity: 0.5; }
.node small { font-size: 11px; color: var(--ink-2); }
.arrow { align-self: center; font-size: 26px; font-weight: 800; color: var(--wood-3); }

/* ---------- popup ngữ cảnh ---------- */
#popup { position: fixed; left: 0; top: 0; width: 310px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--hud-h, 50px) - var(--nav-h, 70px) - 40px); overflow-y: auto; z-index: 12; background: var(--paper); border: 3px solid var(--wood); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--paper-2), 0 4px 0 var(--wood), 0 8px 18px var(--shadow); font-size: 14px; }
.pop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--wood-2); color: #fff6d8; font-size: 16px; position: sticky; top: 0; }
.pop-head .x { width: 26px; height: 26px; font-size: 17px; color: var(--ink); }
.pop-body { padding: 8px 12px 12px; }
.pop-body p { margin: 4px 0 6px; }
.seeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.seed { display: flex; flex-direction: column; align-items: center; gap: 0; background: #fffaf0; border: 2px solid var(--straw); border-radius: 8px; padding: 4px; cursor: pointer; font-size: 12px; font-weight: 700; }
.seed b { font-size: 12px; color: var(--leaf-d); }
.seed.on { border-color: var(--leaf); background: #eaf7dc; }
.seed:disabled { opacity: 0.45; cursor: not-allowed; }
.quote { background: #fff; border: 2px solid var(--straw); border-radius: 10px; padding: 6px 10px; font-style: italic; position: relative; }
.req { display: flex; align-items: center; gap: 8px; background: var(--paper-2); border-radius: 8px; padding: 6px 8px; margin: 6px 0; }
.req span { margin-left: auto; font-weight: 800; }
.contract { display: flex; gap: 8px; align-items: center; background: #f3eaff; border: 2px solid #c08bff; border-radius: 9px; padding: 6px 8px; }
.contract div { display: flex; flex-direction: column; }
.contract small { font-size: 12px; color: var(--ink-2); }
.recipe { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--straw); padding: 6px 0; }
.recipe div { flex: 1; display: flex; flex-direction: column; }
.recipe small { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.recipe small .ico { width: 14px; height: 14px; }
.check { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 6px; cursor: pointer; }
.gold-t { color: var(--gold-d); font-weight: 700; } .warn-t { color: var(--berry); font-weight: 700; }
ol.tasks { margin: 6px 0; padding-left: 20px; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(30, 20, 10, 0.5); padding: 12px; }
.mbox { width: min(460px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; background: var(--paper); border: 4px solid var(--wood); border-radius: 14px; box-shadow: inset 0 0 0 3px var(--paper-2), 0 6px 0 var(--wood), 0 16px 34px var(--shadow); padding: 16px 18px; animation: pop 0.2s ease-out; }
.mbox.wide { width: min(780px, 100%); }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } }
.mbox h2, .mbox h3 { margin: 0 0 8px; }
.report h2 { text-align: center; font-size: 24px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rgrid table { width: 100%; border-collapse: collapse; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; font-size: 13px; }
.rgrid th { background: var(--wood-2); color: #fff6d8; padding: 4px 8px; text-align: left; }
.rgrid td { padding: 3px 8px; border-bottom: 1px dashed var(--straw); }
.rgrid td:last-child { text-align: right; font-weight: 800; }
.event { text-align: center; }
.ev-art { width: 96px; height: 96px; margin: 0 auto 6px; display: grid; place-items: center; background: var(--paper-2); border: 4px solid var(--rc); border-radius: 14px; }
.rar-tag { display: inline-block; background: var(--rc); color: #2b1d14; font-weight: 800; font-size: 12px; padding: 1px 10px; border-radius: 999px; border: 2px solid var(--wood); }
.choices { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.choice { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #fffaf0; border: 2px solid var(--wood-3); border-radius: 9px; padding: 8px 12px; cursor: pointer; box-shadow: 0 3px 0 var(--wood-3); }
.choice:disabled { opacity: 0.45; cursor: not-allowed; }
.choice small { color: var(--ink-2); }
.help p { margin: 6px 0; font-size: 14px; }

/* ---------- menu chính ---------- */
#menu { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; }
.menu-card { width: min(420px, 100%); text-align: center; background: var(--paper); border: 4px solid var(--wood); border-radius: 16px; box-shadow: inset 0 0 0 3px var(--paper-2), 0 8px 0 var(--wood), 0 20px 40px rgba(0,0,0,0.4); padding: 18px 22px 16px; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.92; margin: 4px 0 10px; }
.logo .l1 { font-size: 46px; font-weight: 800; color: var(--leaf); -webkit-text-stroke: 2px var(--wood); text-shadow: 0 4px 0 var(--wood); letter-spacing: -0.5px; }
.logo .l2 { font-size: 40px; font-weight: 800; color: var(--gold); -webkit-text-stroke: 2px var(--wood); text-shadow: 0 4px 0 var(--wood); }
.logo small { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 1px; }
.story { font-size: 14px; color: var(--ink-2); margin: 6px 0 12px; }
.foot { font-size: 12px; color: var(--ink-2); margin: 12px 0 0; }



/* =================== HUD (3 cụm, không chồng chéo) =================== */
#hud { position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 6px; right: 6px; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "a b c"; gap: 6px; align-items: center; pointer-events: none; }
.hud-a, .hud-b, .hud-c { display: flex; gap: 6px; align-items: center; pointer-events: auto; min-width: 0; }
.hud-a { grid-area: a; } .hud-b { grid-area: b; justify-content: flex-end; } .hud-c { grid-area: c; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; min-width: 40px; padding: 0 10px; background: var(--paper); border: 3px solid var(--wood); border-radius: 9px; box-shadow: 0 3px 0 var(--wood), 0 5px 10px var(--shadow); font-size: 15px; white-space: nowrap; }
button.chip { cursor: pointer; } button.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.clock { background: var(--wood-2); color: #fff6d8; border-color: var(--wood); gap: 6px; }
.clock b { font-size: 13px; } .clock span { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.clock i { font-style: normal; font-size: 11px; font-weight: 800; background: var(--leaf); color: #fff; padding: 0 6px; border-radius: 5px; line-height: 18px; }
.clock.closed i { background: #5a5a6a; }
body.paused .clock i { background: var(--berry); }
.money b { color: #6a4a00; font-size: 17px; font-variant-numeric: tabular-nums; }
.menu-btn { flex-direction: column; gap: 4px; width: 44px; padding: 0; }
.menu-btn span { display: block; width: 20px; height: 3px; border-radius: 2px; background: var(--ink); }
.star { display: inline-block; width: 13px; height: 13px; background: linear-gradient(90deg, var(--gold) var(--f), #d8c8a0 var(--f)); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 72% 60%, 81% 100%, 50% 78%, 19% 100%, 28% 60%, 0 38%, 37% 35%); }
.rep b { font-size: 14px; }
.lvl { flex-direction: column; gap: 2px; padding: 0 9px; } .lvl b { font-size: 13px; line-height: 1; }
.xp { width: 52px; height: 6px; background: #d9c38f; border-radius: 3px; overflow: hidden; display: block; } .xp i { display: block; height: 100%; background: var(--leaf); }
.weather { padding: 0 8px; } .weather span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.icon-btn { padding: 0 8px; position: relative; }
.icon-btn em { position: absolute; top: -8px; right: -8px; font-style: normal; background: var(--berry); color: #fff; border-radius: 10px; font-size: 11px; min-width: 18px; line-height: 18px; text-align: center; padding: 0 4px; }
.icon-btn em:empty { display: none; }

/* =================== NHIỆM VỤ: góc dưới trái, thu gọn / mở rộng =================== */
#quest { position: fixed; left: 8px; bottom: calc(var(--nav-h, 70px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(320px, calc(100vw - 16px)); pointer-events: none; }
#quest > * { pointer-events: auto; }
.q-chip { display: flex; align-items: center; gap: 6px; max-width: 100%; height: 40px; padding: 0 10px 0 8px; background: var(--paper); border: 3px solid var(--wood); border-radius: 10px; box-shadow: 0 3px 0 var(--wood), 0 5px 10px var(--shadow); font-weight: 800; font-size: 14px; cursor: pointer; }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-prog { background: var(--leaf); color: #fff; border-radius: 6px; padding: 0 6px; font-size: 12px; }
.q-caret { font-style: normal; color: var(--ink-2); }
.q-card { width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - var(--hud-h, 50px) - var(--nav-h, 70px) - 60px); overflow-y: auto; background: var(--paper); border: 3px solid var(--wood); border-radius: 12px; box-shadow: 0 3px 0 var(--wood), 0 8px 16px var(--shadow); padding: 8px 10px 10px; font-size: 13px; animation: rise2 0.16s ease-out; }
@keyframes rise2 { from { transform: translateY(10px); opacity: 0; } }
.q-head { display: flex; align-items: center; gap: 6px; font-size: 15px; } .q-head b { flex: 1; } .q-head .x { width: 32px; height: 32px; font-size: 16px; }
.q-steps { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.q-steps li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; color: var(--ink-2); }
.q-steps li .bar { grid-column: 1 / -1; max-width: none; }
.q-steps li.now { color: var(--ink); font-weight: 700; } .q-steps li.done span { text-decoration: line-through; opacity: 0.6; }
.q-hint { background: var(--paper-2); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.q-rw { display: flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 6px; color: var(--gold-d); font-weight: 800; }
.q-side { border-top: 2px dashed var(--straw); margin-top: 8px; padding-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.q-side div { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; } .q-side div.done { opacity: 0.55; text-decoration: line-through; } .q-side small { color: var(--gold-d); }
.q-tasks { display: flex; align-items: center; gap: 6px; background: var(--paper); border: 2px solid var(--wood); border-radius: 9px; padding: 3px 4px 3px 8px; font-size: 13px; box-shadow: 0 2px 0 var(--wood); }
.q-paused { background: var(--berry); color: #fff; border: 2px solid var(--berry-d); border-radius: 9px; padding: 6px 10px; font-weight: 800; font-size: 13px; cursor: pointer; }

/* =================== MENU DƯỚI =================== */
#bottom { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 11; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(560px, calc(100vw - 12px)); padding: 5px; background: var(--wood-2); border: 3px solid var(--wood); border-radius: 12px; box-shadow: 0 4px 0 var(--wood), 0 8px 16px var(--shadow); }
#bottom button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 2px; background: var(--paper); border: 2px solid var(--wood); border-radius: 8px; font-weight: 800; font-size: 11px; cursor: pointer; box-shadow: 0 3px 0 var(--wood); white-space: nowrap; }
#bottom button.on { background: var(--gold); transform: translateY(-2px); box-shadow: 0 5px 0 var(--gold-d); }

/* =================== BUILD BAR & THÔNG BÁO =================== */
#buildbar { position: fixed; top: calc(var(--hud-h, 50px) + 14px); left: 50%; transform: translateX(-50%); z-index: 14; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 16px); padding: 6px 8px 6px 12px; background: var(--leaf); color: #fff; border: 3px solid var(--leaf-d); border-radius: 10px; box-shadow: 0 4px 0 var(--leaf-d), 0 8px 16px var(--shadow); font-size: 14px; }
#buildbar .btn { color: #fff; border-color: #fff; box-shadow: none; flex: none; }
#toasts { position: fixed; top: calc(var(--hud-h, 50px) + 14px + env(safe-area-inset-top, 0px)); right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; z-index: 15; pointer-events: none; width: min(330px, calc(100vw - 16px)); }
.toast { display: flex; align-items: center; gap: 6px; background: var(--paper); border: 2px solid var(--wood); border-left-width: 6px; border-radius: 8px; padding: 5px 9px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 0 var(--wood), 0 4px 10px var(--shadow); animation: tin 0.22s ease-out; }
.toast.weather { padding: 3px 9px; font-size: 12px; border-left-color: var(--sky); }
.toast .ico { width: 18px; height: 18px; }

/* =================== POPUP dạng sheet trên điện thoại =================== */
#popup.sheet { left: 8px; right: 8px; top: auto; width: auto; bottom: calc(var(--nav-h, 70px) + 14px + env(safe-area-inset-bottom, 0px)); max-height: min(52vh, calc(100vh - var(--hud-h, 50px) - var(--nav-h, 70px) - 40px)); transform: none !important; animation: rise2 0.16s ease-out; }

/* =================== MENU 3 GẠCH =================== */
.mbox.menu { width: min(400px, 100%); }
.m-head { display: flex; justify-content: space-between; align-items: center; }
.m-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 2px dashed var(--straw); }
.m-sec label { font-weight: 800; font-size: 14px; }
.m-sec.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 3px solid var(--wood); border-radius: 9px; overflow: hidden; }
.seg button { min-height: 42px; border: 0; border-right: 2px solid var(--paper-2); background: var(--paper); font-weight: 800; font-size: 15px; cursor: pointer; }
.seg button:last-child { border-right: 0; } .seg button.on { background: var(--leaf); color: #fff; }
.tgl-row { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 10px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; }
.sw { width: 40px; height: 22px; border-radius: 11px; background: #cbb88a; position: relative; transition: background 0.15s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.sw.on { background: var(--leaf); } .sw.on::after { left: 21px; }
.mbox.small { width: min(360px, 100%); }
.wx { display: flex; gap: 12px; align-items: center; } .wx h3 { margin: 0; }

/* =================== THẺ NHÂN VẬT, BỘ LỌC, SỔ =================== */
.fbar { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.chiprow { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; align-items: center; }
.chiprow::-webkit-scrollbar { display: none; }
.fchip { flex: none; min-height: 32px; padding: 0 11px; border: 2px solid var(--wood-3); border-radius: 999px; background: #fffaf0; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.fchip.on { background: var(--wood-2); color: #fff6d8; border-color: var(--wood); }
.sum { margin: 4px 0 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ccard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 7px; background: #fffaf0; border: 3px solid var(--rc, var(--straw)); border-radius: 11px; cursor: pointer; text-align: center; box-shadow: 0 3px 0 var(--rc, var(--straw)); min-width: 0; }
.ccard:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rc); }
.ccard .cname { font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 30px; }
.ccard small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-2); } .ccard small .ico { width: 14px; height: 14px; }
.ccard .rank { position: absolute; top: 5px; left: 5px; }
.ccard.locked { filter: saturate(0.4); opacity: 0.85; }
.ccard .lockt, .ccard .lv { font-style: normal; font-size: 10px; font-weight: 800; color: var(--ink-2); }
.por-wrap { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fff8e0, var(--rbg, #e8dcbc)); }
.por-wrap.big { width: 104px; height: 104px; flex: none; border: 3px solid var(--rc); }
.por { width: 56px; height: 56px; image-rendering: pixelated; } .por-wrap.big .por { width: 92px; height: 92px; }
.sdot { position: absolute; top: 8px; right: 8px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; display: inline-block; }
.row .sdot, .fd .sdot { position: static; vertical-align: middle; }
.s-work { background: #4fbf3c; } .s-rest { background: #f2b632; } .s-none { background: #9a9a9a; }
.r-N { --rc: #9fa3a8; --rbg: #e4e6e8; } .r-R { --rc: #3e8fd1; --rbg: #d7ebfb; } .r-SR { --rc: #9b5de5; --rbg: #ece0fb; } .r-SSR { --rc: #e8a317; --rbg: #fff0c2; } .r-UR { --rc: #e8483a; --rbg: #ffe0d8; }
.ccard.r-UR { background: linear-gradient(160deg, #fff6e8, #ffe8f0 50%, #e8f4ff); }
.rank { display: inline-block; font-weight: 800; font-size: 11px; line-height: 18px; color: #fff; padding: 0 6px; border-radius: 5px; background: var(--rc, #888); border: 2px solid rgba(0,0,0,0.25); text-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.rank.r-UR { background: linear-gradient(90deg, #ff4d4d, #ffb03d, #4dc9ff, #b07cff); }
.arch-sum { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 14px; } .arch-sum .bar { max-width: 220px; }
/* chi tiết */
.mbox.detail { width: min(560px, 100%); }
.fd-top { display: flex; gap: 12px; align-items: center; } .fd-top h3 { margin: 0 0 4px; } .fd-top p { margin: 6px 0 0; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; }
.stat { display: flex; flex-direction: column; gap: 2px; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; padding: 6px 8px; }
.stat span { font-size: 12px; color: var(--ink-2); } .stat b { font-size: 16px; } .stat small { font-size: 11px; color: var(--leaf-d); } .stat .bar { max-width: none; }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.area { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; border-radius: 9px; border: 2px solid var(--wood-3); background: #fffaf0; font-weight: 700; font-size: 13px; cursor: pointer; }
.area.no { opacity: 0.6; border-style: dashed; } .area.ok { border-color: var(--leaf); } .area.cur { background: var(--leaf); color: #fff; }
.amsg { margin-top: 8px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.amsg.bad { background: #ffe3dc; border: 2px solid var(--berry); } .amsg.good { background: #e3f6d8; border: 2px solid var(--leaf); }
.mini-f { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .mini-f .por { width: 44px; height: 44px; background: var(--paper-2); border-radius: 8px; }

/* =================== GACHA =================== */
.g-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; border: 3px solid var(--wood); background: linear-gradient(120deg, #3b2a5e, #6b3fb8 55%, #c46ad8); color: #fff; box-shadow: 0 3px 0 var(--wood); }
.g-banner > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; } .g-banner b { font-size: 18px; } .g-banner small { grid-column: 2; opacity: 0.9; }
.g-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .g-buttons .btn { min-width: 130px; }
.rates { width: 100%; border-collapse: collapse; font-size: 13px; } .rates td { padding: 3px 4px; border-bottom: 1px dashed var(--straw); } .rates td:nth-child(3) { text-align: right; } .rates .tot td { border: 0; font-weight: 800; }
.pity { padding: 6px 0; } .prow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .prow small { margin-left: auto; color: var(--ink-2); font-size: 12px; }
.pity .bar { max-width: none; width: 100%; height: 11px; }
.pity.near .prow small { color: var(--berry); font-weight: 800; } .pity.near .bar { animation: glow 1s ease-in-out infinite alternate; }
.pity.next .prow small { animation: blink 0.8s steps(2) infinite; }
@keyframes glow { to { box-shadow: 0 0 10px #ff8a5c; } } @keyframes blink { 50% { opacity: 0.4; } }
.hist .hn { width: 52px; font-size: 12px; color: var(--ink-2); }
/* màn hình quay */
.gacha { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: radial-gradient(circle at 50% 45%, #3a2a5a, #120c20 70%); overflow-y: auto; --tc: #ffffff; }
.gacha.tier-R { --tc: #5fb4ff; } .gacha.tier-SR { --tc: #c08bff; } .gacha.tier-SSR { --tc: #ffd23d; } .gacha.tier-UR { --tc: #ff5a5a; }
.g-stage { position: relative; width: 160px; height: min(160px, 40vh); display: grid; place-items: center; transition: all 0.4s; }
.g-orb { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--tc) 45%, transparent 72%); animation: charge 1.3s ease-in forwards; }
.g-beam { position: absolute; inset: -400px -20px; margin: auto; width: 40px; background: linear-gradient(transparent, var(--tc), transparent); opacity: 0; filter: blur(6px); animation: beam 1.3s ease-in forwards; }
.tier-UR .g-beam { background: linear-gradient(transparent, #ff4d4d, #ffd23d, #4dc9ff, #b07cff, transparent); }
@keyframes charge { 0% { transform: scale(0.4) rotate(0); } 70% { transform: scale(1) rotate(20deg); } 85% { transform: scale(0.9) rotate(-10deg); } 100% { transform: scale(1.5); opacity: 0.9; } }
@keyframes beam { 60% { opacity: 0; } 100% { opacity: 1; width: 120px; } }
.g-stage, .g-beam { pointer-events: none; } .gacha.reveal .g-stage { display: none; }
.g-cards { --cw: min(120px, calc((100vh - 190px) / 2 / 1.42), calc((100vw - 64px) / 5)); display: grid; grid-template-columns: repeat(5, var(--cw)); gap: 8px; perspective: 800px; opacity: 0; transition: opacity 0.3s; font-size: calc(var(--cw) * 0.1); }
.g-cards.n1 { --cw: min(180px, calc((100vh - 220px) / 1.42), calc(100vw - 80px)); grid-template-columns: var(--cw); }
.gacha.reveal { gap: 10px; }
.gacha.reveal .g-cards { opacity: 1; }
.g-card { position: relative; aspect-ratio: 3 / 4.2; transform-style: preserve-3d; transition: transform 0.45s; }
.g-card.flip { transform: rotateY(180deg); }
.g-back, .g-front { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.g-back { background: repeating-linear-gradient(45deg, #4a2f86, #4a2f86 8px, #3b2570 8px, #3b2570 16px); border: 3px solid #b998ff; }
.g-front { transform: rotateY(180deg); background: #fff8e8; border: 3px solid var(--rc); padding: 6px; text-align: center; box-shadow: 0 0 0 2px #000 inset; }
.g-front b { font-size: max(9px, 1em); line-height: 1.1; } .g-front small { font-size: max(8px, 0.9em); color: var(--ink-2); }
.g-front .por-wrap { width: 70%; height: auto; aspect-ratio: 1; } .g-front .por { width: 85%; height: 85%; }
.g-front em { font-style: normal; font-size: max(8px, 0.85em); font-weight: 800; padding: 1px 6px; border-radius: 6px; } .g-front em.new { background: var(--berry); color: #fff; } .g-front em.dup { background: var(--paper-2); }
.pityt { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 9px; font-weight: 800; background: var(--gold); color: #3b2a00; padding: 1px 5px; border-radius: 6px; border: 1px solid #000; }
.g-card.r-SR.flip .g-front { box-shadow: 0 0 14px #c08bff; }
.g-card.burst .g-front { animation: burst 1.2s ease-out; }
.g-card.r-SSR.flip .g-front { box-shadow: 0 0 22px #ffd23d, 0 0 0 2px #000 inset; }
.g-card.r-UR.flip .g-front { box-shadow: 0 0 26px #ff5a5a, 0 0 46px #b07cff; background: linear-gradient(160deg, #fff6e8, #ffe8f0 50%, #e8f4ff); }
@keyframes burst { 0% { filter: brightness(3); transform: rotateY(180deg) scale(1.25); } 100% { filter: none; transform: rotateY(180deg) scale(1); } }
.gacha.shake { animation: shake 0.45s; } @keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(4px, -1px); } }
.g-foot .btn { min-height: 34px; padding: 3px 10px; }
.g-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; max-width: 680px; }
.g-sum { width: 100%; text-align: center; color: #fff; font-weight: 700; }
.g-foot .btn.ghost { color: #fff; border-color: #fff; box-shadow: 0 3px 0 rgba(255,255,255,0.4); }

/* =================== RESPONSIVE: ưu tiên điện thoại =================== */
@media (max-width: 1000px) { #quest { bottom: calc(var(--nav-h, 70px) + 14px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1001px) { #quest { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 760px) {
  #hud { grid-template-columns: auto 1fr; grid-template-areas: "a c" "b b"; }
  .hud-c { justify-content: flex-end; } .hud-b { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .chip { height: 36px; min-width: 36px; font-size: 14px; padding: 0 8px; }
  .clock span { font-size: 17px; } .money b { font-size: 15px; }
  .weather span { display: none; }
  .lvl { display: none; }
  #panel { left: 6px; right: 6px; width: auto; transform: none; bottom: calc(var(--nav-h, 70px) + 12px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - var(--hud-h, 90px) - var(--nav-h, 70px) - 32px); animation: rise2 0.18s ease-out; }
  .panel-body { padding: 8px; }
  #toasts { left: 8px; right: 8px; width: auto; align-items: stretch; }
  .g-buttons { width: 100%; } .g-buttons .btn { flex: 1; min-width: 0; }
  .mbox { padding: 12px; }
}
@media (max-width: 380px) {
  .chip { padding: 0 6px; gap: 3px; } .clock b { display: none; } .fame { display: none; }
  #bottom button span { font-size: 10px; } .cards { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .por-wrap { width: 54px; height: 54px; } .por { width: 48px; height: 48px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #hud { grid-template-columns: auto 1fr auto; grid-template-areas: "a b c"; }
  .chip { height: 32px; } #bottom { width: min(460px, calc(100vw - 12px)); } #bottom button { min-height: 40px; } #bottom button span { display: none; }
  #panel { max-height: calc(100vh - var(--hud-h, 40px) - var(--nav-h, 50px) - 24px); }
  .q-card { max-height: calc(100vh - var(--hud-h, 40px) - var(--nav-h, 50px) - 30px); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
.stat .bar { flex: none; width: 100%; max-width: none; }
.g-front { overflow: hidden; } .g-front em { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#toasts { z-index: 12; }
@media (max-width: 380px) { .clock b { display: inline; } .clock .dl { display: none; } }
/* thẻ gacha 10 lượt: cao hơn một chút, chân dung nhỏ lại để không cắt chữ/nhãn */
.g-cards:not(.n1) .g-card { aspect-ratio: 3 / 4.7; }
.g-cards:not(.n1) .g-front { padding: 4px 2px 3px; gap: 1px; justify-content: space-between; }
.g-cards:not(.n1) .g-front .por-wrap { width: 62%; margin-top: 8px; }
.g-cards:not(.n1) .g-front .rank { position: absolute; top: 3px; left: 3px; }
.g-cards:not(.n1) .pityt { top: 2px; right: 2px; font-size: 7px; padding: 0 3px; }
.g-front em { margin-bottom: 1px; }

/* =================== AO CÁ & CÂU CÁ =================== */
.fish-list { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.fish-row { display: grid; grid-template-columns: 22px 1fr 70px auto; align-items: center; gap: 6px; font-size: 12px; }
.fish-row .bar { max-width: none; } .fish-row small { color: var(--ink-2); white-space: nowrap; }
.ico.gray { filter: grayscale(1) opacity(0.6); }
#fishing { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center; padding: 10px; background: radial-gradient(circle at 50% 30%, rgba(30, 80, 120, 0.92), rgba(8, 24, 44, 0.97)); }
.fx-box { width: min(420px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--paper); border: 4px solid var(--wood); border-radius: 14px; box-shadow: inset 0 0 0 3px var(--paper-2), 0 6px 0 var(--wood), 0 16px 34px rgba(0, 0, 0, 0.5); }
.fx-head { display: flex; align-items: center; gap: 8px; font-size: 17px; } .fx-head b:first-of-type { flex: 1; }
.fx-bait { display: inline-flex; align-items: center; gap: 3px; background: var(--paper-2); border: 2px solid var(--wood-3); border-radius: 8px; padding: 1px 7px; }
.fx-msg { text-align: center; font-weight: 800; font-size: 15px; min-height: 22px; color: var(--ink); }
.fx-msg.bite { color: var(--berry); animation: blink 0.35s steps(2) infinite; }
.fx-main { display: flex; gap: 10px; justify-content: center; align-items: stretch; }
.fx-track { position: relative; width: 74px; height: min(44vh, 300px); background: linear-gradient(#8ccaf5, #3c8fd0 60%, #2a6aa3); border: 3px solid var(--wood); border-radius: 10px; overflow: hidden; touch-action: none; }
.fx-zone { position: absolute; left: 0; right: 0; background: rgba(90, 220, 90, 0.5); border-top: 3px solid #7be05a; border-bottom: 3px solid #7be05a; transition: background 0.1s; }
.fx-zone.in { background: rgba(120, 255, 120, 0.7); }
.fx-fish { position: absolute; left: 50%; margin-left: -14px; width: 28px; height: 28px; }
.fx-fish .ico { width: 28px; height: 28px; }
.fx-side { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 120px; font-size: 12px; }
.fx-side b { font-size: 14px; }
.fx-meter { height: 14px; background: #d9c38f; border: 2px solid var(--wood-3); border-radius: 7px; overflow: hidden; margin-bottom: 6px; }
.fx-meter i { display: block; height: 100%; width: 0; background: var(--leaf); }
.fx-meter.time i { background: var(--sky); }
.fx-hold { min-height: 64px; border: 3px solid var(--leaf-d); border-radius: 12px; background: var(--leaf); color: #fff; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 var(--leaf-d); touch-action: none; user-select: none; -webkit-user-select: none; }
.fx-hold.on { transform: translateY(3px); box-shadow: 0 1px 0 var(--leaf-d); background: #5fbf4a; }
.fx-hold.alert { background: var(--berry); border-color: var(--berry-d); box-shadow: 0 4px 0 var(--berry-d); animation: blink 0.35s steps(2) infinite; }
.fx-tip { margin: 0; text-align: center; font-size: 12px; color: var(--ink-2); }
.fx-box.result { text-align: center; align-items: center; } .fx-box.result h3 { margin: 0; font-size: 22px; } .fx-box.result.lose h3 { color: var(--berry); } .fx-box.result.win h3 { color: var(--leaf-d); }
.fx-big { display: grid; place-items: center; width: 96px; height: 96px; background: var(--paper-2); border: 4px solid var(--wood-3); border-radius: 14px; }
@media (max-height: 560px) { .fx-track { height: 36vh; } .fx-hold { min-height: 52px; } }

/* chi tiết nhân vật: thanh tiêu đề có nút × luôn dính ở đầu khi cuộn */
.mbox.detail { padding-top: 0; }
.fd-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -18px 8px; padding: 10px 12px 10px 18px; background: var(--paper); border-bottom: 2px solid var(--straw); }
.fd-head b { font-size: 15px; }
.fd-head .x { width: 38px; height: 38px; font-size: 22px; }
@media (max-width: 760px) { .fd-head { margin: 0 -12px 8px; padding-left: 12px; } }
/* giao diện chạm: không trễ chạm đúp, không để cú chạm lọt xuống bản đồ */
#hud, #bottom, #quest, #popup, #panel, #modal, #buildbar, #gacha, #fishing, #menu { touch-action: manipulation; }
#panel, #popup, #modal .mbox { overscroll-behavior: contain; }

/* thanh di chuyển / xây: hai hàng, nút lớn, nằm sát dưới để ngón cái với tới */
#buildbar .bb-t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
#buildbar .bb-t[data-bad]:not([data-bad=""])::after { content: "! " attr(data-bad); display: block; color: #ffe08a; font-size: 12px; }
#buildbar .bb-b { display: flex; gap: 8px; flex: none; }
#buildbar .btn:disabled { opacity: .45; }
@media (max-width: 760px), (pointer: coarse) {
  #buildbar { top: auto; bottom: calc(var(--nav-h, 64px) + 12px); left: 8px; right: 8px; transform: none; max-width: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  #buildbar .bb-b { justify-content: stretch; }
  #buildbar .bb-b .btn { flex: 1; min-height: 44px; font-size: 15px; }
}
@media (pointer: coarse) and (max-height: 520px) {
  #buildbar { flex-direction: row; align-items: center; left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100vw - 16px)); }
  #buildbar .bb-b { flex: none; }
  #buildbar .bb-b .btn { flex: none; min-width: 84px; }
}

/* bộ chọn số lượng gieo */
.qty { margin: 8px 0 4px; padding: 8px; border: 2px dashed var(--straw); border-radius: 10px; background: rgba(255,255,255,.35); }
.qty-t { font-size: 13px; margin-bottom: 6px; } .qty-t small { color: var(--ink-2, #6b5a44); }
.qty-b { display: flex; flex-wrap: wrap; gap: 6px; } .qty-b .btn.mini { min-width: 42px; min-height: 36px; font-size: 15px; }
.qty-c { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.qty-in { width: 76px; min-height: 36px; font: inherit; font-size: 16px; text-align: center; border: 2px solid var(--wood-d, #6b4423); border-radius: 8px; background: #fffaf0; }

/* báo cáo cuối ngày: 1 bảng, 4 nút chuyển */
.rep-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.rep-tab { min-height: 40px; border: 2px solid var(--wood-d, #6b4423); border-radius: 9px; background: #fff6df; font: inherit; font-weight: 700; color: var(--ink, #3b2a1e); cursor: pointer; }
.rep-tab.on { background: var(--leaf); color: #fff; border-color: var(--leaf-d); }
.rep-box { position: relative; display: grid; }
.rep-pane { grid-area: 1 / 1; width: 100%; border-collapse: collapse; background: #fffaf0; border: 2px solid var(--straw); border-radius: 9px; font-size: 14px; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; visibility: hidden; }
.rep-pane td { padding: 6px 10px; border-bottom: 1px solid rgba(0,0,0,.06); } .rep-pane td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rep-pane.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .rep-pane { transition: none; } }
.autonext { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: #fff3c9; border: 2px solid var(--straw); }
.autonext .an-bar { grid-column: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.12); overflow: hidden; } .autonext .an-bar i { display: block; height: 100%; width: 0; background: var(--leaf); }
.autonext .btn { grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 520px) { .rep-tab { font-size: 13px; min-height: 38px; } }
.rep-pane { align-self: start; }                 /* bảng ngắn không bị kéo giãn theo bảng dài nhất */
.rep-tab { padding: 0 4px; white-space: nowrap; }
@media (max-width: 520px) { .rep-tabs { gap: 4px; } .rep-tab { font-size: 12.5px; } }

/* hàng biến thể & độ hiếm thời tiết */
.vico { position: relative; display: inline-flex; border-radius: 6px; box-shadow: 0 0 0 2px var(--vc), 0 0 8px var(--vc); background: rgba(255,255,255,.35); }
.rar { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #fff; vertical-align: 1px; }
.r-common { background: #4a8fd0; } .r-uncommon { background: #3aa8a0; } .r-rare { background: #d8a91f; color: #3b2a1e; } .r-epic { background: #c0823a; } .r-legendary { background: #2fa86a; } .r-mythic { background: #8a46d8; }
.wx-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px dashed var(--straw); } .wx-row small { display: block; color: var(--ink-2, #6b5a44); }
.var-note { margin: 4px 0; padding: 6px 8px; border-radius: 8px; border: 2px solid var(--vc); background: #fffaf0; font-size: 13px; }
.var-row td { background: rgba(255,240,200,.35); } .muted.small { font-size: 12px; margin: 2px 0 6px; }

/* nhà riêng */
#housebar { position: fixed; top: calc(var(--hud-h, 50px) + 10px); left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: 10px; align-items: center; padding: 6px 8px 6px 14px; border-radius: 12px; background: rgba(46,28,14,.88); color: #fff3c8; border: 2px solid #8a5a34; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.35); max-width: calc(100vw - 16px); }
#housebar.hidden { display: none; }
#housebar .btn { min-height: 34px; }
@media (max-width: 520px) { #housebar { font-size: 12px; } }

/* sprite nhân vật PNG: giữ nét pixel; nhân vật chưa sở hữu hiện bóng tối */
.por.spr { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain; }
.por.spr.locked { filter: brightness(0) opacity(.45); }

/* ================= HỒ SƠ NHÂN VẬT (theo ảnh tham khảo, mobile-first) ================= */
#modal .mbox.detail { padding: 0; width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 20px); height: calc(100dvh - 20px); display: flex; flex-direction: column; overflow: hidden;
  background: #fdf6e3; border: 4px solid #3b2a1e; border-radius: 22px; box-shadow: 0 6px 0 #2a1d14, 0 14px 30px rgba(0,0,0,.45); }
@media (min-height: 900px) { #modal .mbox.detail { height: min(860px, calc(100dvh - 40px)); } }
.pf { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; font-weight: 700; color: #3b2a1e; }
.pf-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 12px 12px 8px; }
.pf-ava { width: 66px; height: 66px; border-radius: 14px; display: grid; place-items: center; background: #fff1f0; border: 3px solid #f08aa0; box-shadow: 0 3px 0 #c9677d; overflow: hidden; }
.pf-ava .por { width: 62px; height: 62px; }
.pf-ava.r-N { border-color: #b9b2a6; box-shadow: 0 3px 0 #8f887d; background: #f6f2ea; } .pf-ava.r-R { border-color: #6fb4ff; box-shadow: 0 3px 0 #4a86c9; background: #eef6ff; }
.pf-ava.r-SR { border-color: #b07cff; box-shadow: 0 3px 0 #8458c9; background: #f5efff; } .pf-ava.r-SSR { border-color: #e8a83a; box-shadow: 0 3px 0 #b97f1e; background: #fff6e2; }
.pf-info { min-width: 0; }
.pf-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-rank { padding: 1px 8px; border: 3px solid #f08aa0; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.3; color: #3b2a1e; }
.pf-rank.r-N { border-color: #b9b2a6; } .pf-rank.r-R { border-color: #6fb4ff; } .pf-rank.r-SR { border-color: #b07cff; } .pf-rank.r-SSR { border-color: #e8a83a; }
.pf-name { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.pf-sub { color: #8a7458; font-size: 14px; margin: 2px 0 6px; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chip { padding: 2px 10px; border-radius: 999px; font-size: 13px; border: 2px solid; white-space: nowrap; }
.pf-chip.st-work { background: #e3f6e6; border-color: #9fd6a8; color: #2f8a45; } .pf-chip.st-idle { background: #eef1f4; border-color: #c6ccd4; color: #5d6670; }
.pf-chip.st-rest { background: #e8f1ff; border-color: #a9c6f0; color: #3a6fb5; } .pf-chip.st-off { background: #f1ece4; border-color: #d4c8b4; color: #7d6e58; }
.pf-chip.wage { background: #fff4cf; border-color: #f0d27a; color: #a8740f; }
.pf-btns { display: flex; gap: 8px; }
.pf-sq { width: 46px; height: 46px; border-radius: 12px; border: 3px solid #3b2a1e; background: #fbe6b4; box-shadow: 0 4px 0 #c99a4e; font: inherit; font-size: 20px; font-weight: 900; color: #3b2a1e; cursor: pointer; }
.pf-sq:active { transform: translateY(3px); box-shadow: 0 1px 0 #c99a4e; }
.pf-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 2px 12px 8px; padding: 6px; background: #f1e4c8; border-radius: 16px; }
.pf-tab { min-height: 42px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 13px; line-height: 1.15; color: #8a7458; cursor: pointer; }
.pf-tab.on { background: #fff; color: #3b2a1e; box-shadow: 0 3px 0 #dccba6; }
.pf-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 10px; -webkit-overflow-scrolling: touch; }
.pf-pane.enter { animation: pfIn .22s ease; } @keyframes pfIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pf-pane.enter { animation: none; } }
.pf-srow { display: grid; grid-template-columns: 88px 1fr 42px; align-items: center; gap: 8px; min-height: 30px; }
.pf-sn { font-size: 15px; color: #4a3826; white-space: nowrap; }
.pf-sv { text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; color: #3b2a1e; }
.pf-sv.hi { color: #e8891e; }
.pf-track { position: relative; height: 12px; border-radius: 999px; background: #efe5cf; }
.pf-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .35s ease; }
.pf-fill.hi { background: linear-gradient(90deg, #ffc93c, #ff8a2a); } .pf-fill.ok { background: linear-gradient(90deg, #4cbf73, #2f9a58); } .pf-fill.lo { background: #8fb594; }
.pf-fill.att { background: linear-gradient(90deg, #ffb13c, #ff7e1f); } .pf-fill.emo { background: linear-gradient(90deg, #ffa2b8, #f2547a); }
.pf-mid { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #8a7458; opacity: .7; }
.pf-stats { padding: 2px 0 8px; }
.pf-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.pf-box { padding: 8px 2px; border-radius: 14px; border: 3px solid #f6e3b0; background: #fffdf7; text-align: center; min-width: 0; }
.pf-box b { display: block; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; } .pf-box small { color: #8a7458; font-size: 12px; }
.pf-mood { padding: 10px; border-radius: 16px; border: 3px solid #f6e3b0; background: #fffdf7; }
.pf-mtxt { margin: 6px 0 8px; font-size: 14px; color: #6b5a44; } .pf-mtxt b { color: #4a3826; }
.pf-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pf-act { min-height: 54px; padding: 4px 2px; border: 3px solid #3b2a1e; border-radius: 12px; background: #fbe9c0; box-shadow: 0 4px 0 #3b2a1e; font: inherit; color: #3b2a1e; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.pf-act b { font-size: 13px; } .pf-act small { font-size: 12px; color: #8a6a3a; }
.pf-act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #3b2a1e; }
.pf-act:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 2px 0 #3b2a1e; }
.pf-card { padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; border: 3px solid #f6e3b0; background: #fffdf7; }
.pf-card h4 { margin: 0 0 6px; font-size: 16px; } .pf-card p { margin: 4px 0 8px; font-weight: 600; color: #5a4a36; line-height: 1.45; }
.pf-kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed #ecdcb4; font-size: 14px; } .pf-kv span { color: #7d6a50; } .pf-kv b { text-align: right; }
.pf-bio { background: #f8eed6; }
.pf-starrow { display: flex; gap: 6px; font-size: 30px; } .pf-star { color: #e2d6bc; } .pf-star.on { color: #ffc23d; text-shadow: 0 2px 0 #c98a1e; }
.pf-help { padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: #fff4cf; border: 2px dashed #e0b85a; font-size: 13px; } .pf-help p { margin: 4px 0; font-weight: 600; }
.pf-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px 12px; border-top: 2px solid #ecdcb4; background: #fdf6e3; }
.pf-big { min-height: 50px; border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.pf-big.blue { background: linear-gradient(#3d8ff0, #2369c8); box-shadow: 0 5px 0 #17478a; } .pf-big.grey { background: linear-gradient(#9b9ba4, #7c7c86); box-shadow: 0 5px 0 #55555d; }
.pf-big.red { background: linear-gradient(#ff6b4a, #e2432a); box-shadow: 0 5px 0 #a02a18; } .pf-big.red.arm { background: linear-gradient(#c62828, #8e1b1b); }
.pf-big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.pf-big:disabled { background: #dcd6cc; color: #fff; box-shadow: 0 5px 0 #bfb7aa; cursor: not-allowed; }
.pf-toast { position: absolute; left: 12px; right: 12px; bottom: 78px; padding: 8px 12px; border-radius: 12px; font-size: 13px; background: #2f8a45; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: none; animation: pfIn .2s ease; }
.pf-toast.bad { background: #b5452c; }
@media (max-width: 380px) {
  .pf-head { grid-template-columns: auto 1fr; } .pf-btns { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; margin-bottom: -40px; }
  .pf-info { padding-right: 96px; } .pf-ava { width: 58px; height: 58px; } .pf-ava .por { width: 54px; height: 54px; }
  .pf-srow { grid-template-columns: 76px 1fr 36px; gap: 6px; } .pf-sn { font-size: 14px; } .pf-tab { font-size: 12px; }
  .pf-big { font-size: 14px; min-height: 48px; } .pf-act b, .pf-act small { font-size: 11px; } .pf-box b { font-size: 15px; }
}

.pf-srow.wide { grid-template-columns: auto 1fr auto; }

/* ===== STYLE A — tạo / tùy chỉnh nhân vật chủ quán (mobile trước) ===== */
.mbox.sa { width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 0; overflow: hidden; display: flex; }
.sa-ui { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 16px); }
.sa-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px; }
.sa-head h3 { margin: 0; }
.sa-lead { margin: 0 14px 6px; font-size: 13px; }
.sa-prev { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: linear-gradient(#cfe3b4, #b9d39a); flex-wrap: wrap; }
.sa-prev #saBig { width: 96px; height: 112px; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.sa-dirs { display: flex; gap: 4px; }
.sa-dirs canvas { width: 48px; height: 56px; image-rendering: pixelated; image-rendering: crisp-edges; background: rgba(255,255,255,.35); border-radius: 6px; }
.sa-prev small { flex-basis: 100%; font-variant-numeric: tabular-nums; }
.sa-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px 4px; border-bottom: 1px solid var(--line, #d8c9a8); }
.sa-tabs button { flex: none; border: 1.5px solid var(--line, #d8c9a8); background: var(--paper, #fff8e8); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; min-height: 36px; cursor: pointer; color: inherit; }
.sa-tabs button.on { background: #3f7a3a; border-color: #3f7a3a; color: #fff; font-weight: 700; }
.sa-body { overflow-y: auto; padding: 8px 12px; flex: 1; -webkit-overflow-scrolling: touch; }
.sa-sec { margin-bottom: 10px; } .sa-sec > label { display: block; font-weight: 700; font-size: 13px; margin: 2px 0 6px; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.sa-grid.wide { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.sa-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1.5px solid var(--line, #d8c9a8); background: #fffdf4; border-radius: 10px; padding: 4px 3px; cursor: pointer; min-height: 44px; font: inherit; color: inherit; }
.sa-opt img { width: 48px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.sa-opt span { font-size: 10.5px; line-height: 1.2; text-align: center; max-height: 2.4em; overflow: hidden; }
.sa-opt.on { border-color: #3f7a3a; box-shadow: 0 0 0 2px #cfe8c8; background: #f1fbe9; }
.sa-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sa-sw button { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line, #d8c9a8); background: #fffdf4; border-radius: 10px; padding: 5px 7px; cursor: pointer; font: inherit; font-size: 11.5px; min-height: 40px; text-align: left; color: inherit; }
.sa-sw i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #261b17; flex: none; }
.sa-sw button.on { border-color: #3f7a3a; box-shadow: 0 0 0 2px #cfe8c8; background: #f1fbe9; }
.sa-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #d8c9a8); flex-wrap: wrap; }
.sa-foot .btn { min-height: 42px; }
.por.sa { image-rendering: pixelated; image-rendering: crisp-edges; object-fit: contain; }

/* ===== CỘT NÚT HÀNH ĐỘNG (góc dưới phải, đối diện ô nhiệm vụ) ===== */
#actbar { position: fixed; right: 8px; bottom: calc(var(--nav-h, 70px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
#actbar.hidden { display: none; }
#actbar .act { pointer-events: auto; display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; min-width: 132px; min-height: 48px; padding: 4px 10px 4px 6px; background: var(--paper); border: 3px solid var(--wood); border-radius: 12px; box-shadow: 0 3px 0 var(--wood), 0 5px 10px var(--shadow); cursor: pointer; font: inherit; color: var(--ink, #3b2a1e); text-align: left; }
#actbar .act .ico { grid-row: 1 / span 2; width: 30px; height: 30px; image-rendering: pixelated; }
#actbar .act b { font-size: 12.5px; letter-spacing: .02em; line-height: 1.1; }
#actbar .act small { font-size: 11px; opacity: .8; line-height: 1.1; white-space: nowrap; }
#actbar .act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
#actbar .truck.arriving, #actbar .truck.loading, #actbar .truck.leaving { background: #fff3c4; }
#actbar .truck.loading .ico { animation: actBounce .5s steps(2) infinite; }
#actbar .hurry.on { background: #ffe0d6; border-color: #c0392b; box-shadow: 0 3px 0 #8e2a1f, 0 5px 10px var(--shadow); }
#actbar .hurry.on .ico { animation: actShake .3s steps(2) infinite; }
#actbar .hurry.cd:not(.on) { opacity: .75; }
#actbar .stall.closed { background: #f4e2e0; }
@keyframes actBounce { 50% { transform: translateY(-2px); } }
@keyframes actShake { 50% { transform: rotate(-12deg); } }
@media (max-width: 520px) {
  /* điện thoại: 3 nút chỉ còn biểu tượng (ô vuông 52px, đủ lớn cho ngón tay) + huy hiệu trạng thái ở góc */
  #actbar { gap: 8px; }
  #actbar .act { position: relative; min-width: 0; width: 52px; height: 52px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; }
  #actbar .act .ico { width: 32px; height: 32px; }
  #actbar .act b, #actbar .act small { display: none; }
  #actbar .act .bd { display: flex; }
  #quest { max-width: calc(100vw - 16px - 66px); }
  #fishbtn { width: 52px; min-height: 52px; padding: 2px; border-radius: 14px; } #fishbtn b { font-size: 8.5px; }
}
@media (min-width: 1001px) { #actbar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } }

/* ===== GĐ2: HỒ SƠ NÔNG DÂN "THẺ NHÂN VIÊN" (bản sắc riêng) ===== */
.pf.idcard { --rk: #b9b2a6; --rk2: #8f887d; }
.pf.idcard.r-R { --rk: #5fa8f5; --rk2: #3f7fc4; } .pf.idcard.r-SR { --rk: #a274f2; --rk2: #7a52c4; }
.pf.idcard.r-SSR { --rk: #e8a83a; --rk2: #b97f1e; } .pf.idcard.r-UR { --rk: #ef5a6f; --rk2: #b83a4c; }
.pf-band { height: 10px; background: repeating-linear-gradient(135deg, var(--rk) 0 12px, var(--rk2) 12px 24px); border-radius: 14px 14px 0 0; }
.pf.idcard .pf-head { grid-template-columns: auto 1fr auto; padding: 10px 12px 6px; }
.pf.idcard .pf-ava { position: relative; border-color: var(--rk); box-shadow: 0 3px 0 var(--rk2); overflow: visible; }
.pf.idcard .pf-ava .por { border-radius: 10px; overflow: hidden; }
.pf-rk { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 7px; border-radius: 6px; background: var(--rk); color: #fff; font-style: normal; font-size: 12px; line-height: 17px; border: 2px solid #3b2a1e; }
.pf.idcard .pf-name { display: block; font-size: 19px; }
.pf-ribbon { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 2px; padding: 2px 10px 2px 6px; border-radius: 0 999px 999px 0; background: #e6f2dc; border-left: 4px solid #4f9a3c; color: #2f6a28; font-size: 13px; }
.pf-ribbon .ic { width: 16px; height: 16px; }
.pf-starrow.sm { font-size: 17px; gap: 2px; }
.pf-facts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; margin: 4px 12px 8px; }
.pf-fact { min-width: 0; padding: 5px 8px; border-radius: 12px; background: #fffdf7; border: 2px solid #ecdcb4; }
.pf-fact small { display: block; font-size: 11px; color: #8a7458; } .pf-fact b { display: block; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.pf-fact.st-work { border-color: #9fd6a8; background: #effaf1; } .pf-fact.st-work b { color: #2f8a45; }
.pf-fact.st-rest { border-color: #a9c6f0; background: #eef5ff; } .pf-fact.st-off { background: #f6f1e8; }
.pf.idcard .pf-tabs { grid-template-columns: repeat(3, 1fr); }
.pf-now { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; background: #24452e; color: #eaf6dc; }
.pf-now small { display: block; font-size: 11px; color: #a9cf9a; } .pf-now b { font-size: 15px; }
.pf-done { text-align: center; padding-left: 10px; border-left: 2px dashed #4e7556; } .pf-done b { display: block; font-size: 18px; color: #ffe27a; }
.pf-pulse { width: 12px; height: 12px; border-radius: 50%; background: #9aa39c; }
.pf-pulse.st-work { background: #6bd35a; animation: pfPulse 1.2s ease-in-out infinite; } .pf-pulse.st-rest { background: #6fb4ff; }
@keyframes pfPulse { 50% { box-shadow: 0 0 0 6px rgba(107,211,90,.25); } }
@media (prefers-reduced-motion: reduce) { .pf-pulse.st-work { animation: none; } }
.pf-fill.att { background: linear-gradient(90deg, #4fc3a1, #2e9c7c); } .pf-fill.xp { background: linear-gradient(90deg, #6fb4ff, #3d8ff0); }
.pf.idcard .areas { margin-top: 6px; }
@media (max-width: 520px) {
  .pf.idcard .pf-head { grid-template-columns: auto 1fr auto; } .pf.idcard .pf-btns { grid-column: auto; grid-row: auto; margin-bottom: 0; }
  .pf.idcard .pf-info { padding-right: 0; } .pf-facts { grid-template-columns: 1fr 1fr; } .pf-facts .pf-fact:first-child { grid-column: 1 / -1; }
}

/* ===== GĐ2: BỘ LỌC DẠNG DROPDOWN ===== */
.btn.blue { background: #2f80c0; color: #fff; border-color: #1f5f94; box-shadow: 0 3px 0 #1f5f94; }
.fdrop { position: relative; margin-bottom: 6px; }
.fdrop-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fdrop-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 2px solid var(--wood-3); border-radius: 12px; background: #fffaf0; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: #3b2a1e; }
.fdrop-btn .ic { width: 16px; height: 16px; } .fdrop-btn b { min-width: 20px; padding: 0 5px; border-radius: 999px; background: #2f80c0; color: #fff; font-size: 12px; text-align: center; }
.fdrop-btn.act { border-color: #2f80c0; } .fdrop-btn .caret { font-style: normal; transition: transform .15s; }
.fdrop.open .fdrop-btn .caret { transform: rotate(180deg); }
.fdrop-count { flex: 1; color: #8a7458; font-size: 13px; font-weight: 700; }
.fdrop-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; padding: 10px; border: 2px solid var(--wood-3); border-radius: 14px; background: #fffdf7; box-shadow: 0 6px 16px rgba(59,42,30,.18); animation: pfIn .15s ease; }
.fsel { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; font-weight: 800; color: #7d6a50; }
.fsel select { min-height: 38px; width: 100%; padding: 0 8px; border: 2px solid #e2cfa4; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: #3b2a1e; }
.fdrop-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 520px) { .fdrop-menu { grid-template-columns: 1fr 1fr; } }

/* ===================== GĐ3–6: HỆ THỐNG CÂU CÁ ===================== */
.fm-hide { display: none !important; }
#fishbtn { position: fixed; right: 8px; bottom: 290px; z-index: 9; display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 12px 5px 6px; min-height: 50px;
  background: linear-gradient(#3aa0d8, #2478b0); color: #fff; border: 3px solid #13507a; border-radius: 14px; box-shadow: 0 3px 0 #13507a, 0 6px 14px rgba(0,0,0,.25); font: inherit; cursor: pointer; text-align: left; }
#fishbtn .fb-ic { grid-row: 1 / span 2; font-size: 26px; line-height: 1; animation: fbBob 2.4s ease-in-out infinite; }
#fishbtn b { font-size: 12.5px; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(0,0,0,.3); } #fishbtn small { font-size: 11px; opacity: .9; }
#fishbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #13507a; }
#fishbtn.hidden { display: none; }
@keyframes fbBob { 50% { transform: translateY(-3px) rotate(-6deg); } }
@media (max-width: 520px) { #fishbtn { min-height: 44px; width: 62px; padding: 4px 2px; grid-template-columns: 1fr; text-align: center; justify-items: center; } #fishbtn .fb-ic { grid-row: auto; font-size: 22px; } #fishbtn b { font-size: 9.5px; line-height: 1.05; } #fishbtn small { display: none; } }
@media (prefers-reduced-motion: reduce) { #fishbtn .fb-ic { animation: none; } }

#fishroot { position: fixed; inset: 0; z-index: 26; background: #0d2a40; touch-action: none; user-select: none; -webkit-user-select: none; }
#fishroot.hidden { display: none; }
#fishcv { position: absolute; inset: 0; display: block; image-rendering: pixelated; }
#fishui { position: absolute; inset: 0; pointer-events: none; font-weight: 700; color: #3b2a1e; }
#fishui button, #fishui .fg-panel, #fishui .fg-card, #fishui .fg-bottom { pointer-events: auto; }
#fishtoasts { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.ftoast { padding: 9px 14px; border-radius: 12px; background: rgba(20,32,48,.92); color: #fff; font-size: 13.5px; font-weight: 700; border: 2px solid rgba(255,255,255,.2); box-shadow: 0 6px 16px rgba(0,0,0,.35); animation: rise .2s ease-out; transition: opacity .35s; }
.ftoast.good { border-color: #6bd35a; } .ftoast.bad { border-color: #ff6a5a; } .ftoast.gold, .ftoast.event { border-color: #ffd34d; background: rgba(60,40,10,.94); }
.ftoast.out { opacity: 0; }
.rk { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; line-height: 16px; color: #fff; font-weight: 900; background: #9aa3ad; vertical-align: 1px; }
.rk.r-R { background: #4f9cf0; } .rk.r-SR { background: #a46cf0; } .rk.r-SSR { background: linear-gradient(90deg, #f0a92a, #ffd34d); color: #4a2a00; } .rk.r-UR { background: linear-gradient(90deg, #ef4a5f, #ff8a3c, #ffd34d); }

.fm-btn { pointer-events: auto; min-height: 42px; padding: 4px 12px; border: 3px solid #3b2a1e; border-radius: 12px; background: #fffaf0; box-shadow: 0 3px 0 #3b2a1e; font: inherit; font-size: 13px; font-weight: 800; color: #3b2a1e; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.fm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #3b2a1e; }
.fm-top, .fg-top { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; right: 8px; display: flex; gap: 8px; align-items: flex-start; }
.fm-title, .fg-info { flex: 1; min-width: 0; padding: 6px 12px; border-radius: 12px; background: rgba(255,250,240,.94); border: 3px solid #3b2a1e; box-shadow: 0 3px 0 #3b2a1e; text-align: center; }
.fm-title b, .fg-info b { display: block; font-size: 15px; line-height: 1.2; } .fm-title small, .fg-info small { display: block; font-size: 12px; color: #6b5a44; line-height: 1.3; }
.fm-side { position: absolute; right: 8px; top: calc(70px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 6px; }
.fm-side .fm-btn { flex-direction: column; gap: 0; min-width: 76px; padding: 4px 6px; } .fm-side .fm-btn b { font-size: 11.5px; } .fm-side .fm-btn small { font-size: 10.5px; color: #6b5a44; } .fm-ic { font-size: 20px; line-height: 1.1; }
.fm-act { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: min(560px, calc(100vw - 20px)); }
.fm-big { pointer-events: auto; min-height: 54px; padding: 6px 18px; border: 3px solid #1e4a1e; border-radius: 14px; background: linear-gradient(#6bd35a, #3f9a34); color: #fff; font: inherit; font-size: 15px; font-weight: 900; box-shadow: 0 4px 0 #1e4a1e, 0 8px 16px rgba(0,0,0,.25); cursor: pointer; text-shadow: 0 1px 0 rgba(0,0,0,.3); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
.fm-big small { font-size: 11.5px; opacity: .92; font-weight: 700; }
.fm-big.cast { min-width: 200px; font-size: 18px; animation: fgPulse 1.6s ease-in-out infinite; }
.fm-big.ghost { background: #fffaf0; color: #3b2a1e; border-color: #3b2a1e; box-shadow: 0 4px 0 #3b2a1e; text-shadow: none; }
.fm-big:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1e4a1e; } .fm-big:disabled { opacity: .5; cursor: not-allowed; }
.fm-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; border-radius: 999px; background: rgba(20,32,48,.75); color: #fff; font-size: 12.5px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.fm-travel { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 16px; background: rgba(255,250,240,.95); border: 3px solid #3b2a1e; box-shadow: 0 4px 0 #3b2a1e; text-align: center; }
.fm-travel b { font-size: 17px; } .fm-travel small { display: block; margin-top: 6px; font-size: 12.5px; color: #6b5a44; min-height: 1.3em; }
.fm-bar { height: 14px; margin-top: 10px; border-radius: 999px; background: #e8dcc0; border: 2px solid #3b2a1e; overflow: hidden; } .fm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3aa0d8, #6bd35a); transition: width .15s linear; }
@keyframes fgPulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .fm-big.cast, .fg-main.hot { animation: none; } }

/* màn câu */
.fg-left { position: absolute; left: 8px; top: calc(72px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 6px; width: min(210px, 42vw); }
.fg-card { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; padding: 5px 8px 5px 5px; border-radius: 12px; background: rgba(255,250,240,.92); border: 2px solid #3b2a1e; }
.fg-card b { display: block; font-size: 12.5px; line-height: 1.2; } .fg-card small { display: block; font-size: 11px; color: #6b5a44; line-height: 1.3; }
.fg-rod { width: 40px; height: 40px; image-rendering: pixelated; } .fg-bk { font-size: 24px; width: 40px; text-align: center; }
.fg-bkbar { display: block; height: 6px; margin-top: 3px; border-radius: 99px; background: #e8dcc0; overflow: hidden; } .fg-bkbar em { display: block; height: 100%; background: #3aa0d8; }
.fg-zone { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: rgba(20,32,48,.7); color: #bfe8ff; font-size: 11.5px; }
.fg-right { position: absolute; right: 8px; bottom: calc(106px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: 112px; }
.fg-ctl, .fg-main, .fg-sec { pointer-events: auto; min-height: 64px; border: 3px solid #1e2a3a; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: 0 5px 0 #1e2a3a, 0 8px 16px rgba(0,0,0,.3); touch-action: none; -webkit-touch-callout: none; }
.fg-ctl small, .fg-main small { font-size: 10.5px; font-weight: 700; opacity: .9; margin-top: 2px; }
.fg-ctl.pull { background: linear-gradient(#6bd35a, #3f9a34); } .fg-ctl.slack { background: linear-gradient(#5ab0ff, #2f7fd0); } .fg-ctl.hold { background: linear-gradient(#ffb04a, #e07a1e); }
.fg-ctl.on, .fg-main.on { transform: translateY(4px); box-shadow: 0 1px 0 #1e2a3a, inset 0 0 0 3px rgba(255,255,255,.55); filter: brightness(1.1); }
.fg-main { min-height: 84px; font-size: 17px; background: linear-gradient(#ff8a3c, #e0582a); } .fg-main.cast { background: linear-gradient(#6bd35a, #3f9a34); } .fg-main.hook { background: linear-gradient(#ffd34d, #f0a020); color: #3b2a1e; text-shadow: none; }
.fg-main.hot { animation: fgPulse .35s ease-in-out infinite; background: linear-gradient(#ff5a4a, #d0281a); color: #fff; }
.fg-sec { min-height: 44px; font-size: 13px; background: #fffaf0; color: #3b2a1e; text-shadow: none; }
.fg-bottom { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(20,32,48,.86); border: 2px solid rgba(255,255,255,.18); transition: opacity .3s; }
.fg-bottom.dim { opacity: .45; }
.fg-bar { display: grid; grid-template-columns: 96px 1fr 120px; gap: 8px; align-items: center; color: #fff; }
.fg-bar span { font-size: 11.5px; letter-spacing: .04em; color: #bfe8ff; } .fg-bar small { font-size: 11.5px; text-align: right; color: #ffe9a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-bar i { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; border: 2px solid rgba(0,0,0,.35); }
.fg-bar em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; }
.fg-bar.stam em { background: linear-gradient(90deg, #2fb8a8, #6be0c8); } .fg-bar.stam em.p1 { background: linear-gradient(90deg, #4fb0e0, #8fd8ff); } .fg-bar.stam em.p2 { background: linear-gradient(90deg, #e0b030, #ffd860); } .fg-bar.stam em.p3 { background: linear-gradient(90deg, #e07a3a, #ffa060); }
.fg-bar.stam .wave { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.18) 0 6px, transparent 6px 16px); animation: fgWave 1.4s linear infinite; pointer-events: none; }
@keyframes fgWave { to { background-position: 40px 0; } }
.fg-bar.ten i.zones { background: linear-gradient(90deg, rgba(107,211,90,.25) 0 55%, rgba(255,211,77,.3) 55% 80%, rgba(255,90,74,.35) 80%); }
.fg-bar.ten em.green { background: #6bd35a; } .fg-bar.ten em.yellow { background: #ffd34d; } .fg-bar.ten em.red { background: #ff5a4a; animation: fgBlink .25s steps(2) infinite; }
.fg-bar.ten u { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(0,0,0,.45); }
@keyframes fgBlink { 50% { filter: brightness(1.5); } }
.fg-msg { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.9); padding: 8px 16px; border-radius: 12px; background: rgba(20,32,48,.9); color: #fff; font-size: 14px; opacity: 0; transition: opacity .2s, transform .2s; max-width: calc(100vw - 40px); text-align: center; pointer-events: none; }
.fg-msg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .fg-msg.good { border: 2px solid #6bd35a; } .fg-msg.bad { border: 2px solid #ff6a5a; }
.fg-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(8,16,28,.45); pointer-events: auto; }
.fg-panel { position: relative; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; border-radius: 18px; background: #fffaf0; border: 4px solid #3b2a1e; box-shadow: 0 6px 0 #3b2a1e, 0 14px 30px rgba(0,0,0,.4); text-align: center; animation: rise .25s ease-out; }
.fg-panel h3 { margin: 4px 0 6px; font-size: 22px; } .fg-panel p { margin: 6px 0; font-weight: 600; }
.fg-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .fg-row .fm-big { min-height: 48px; padding: 4px 14px; font-size: 14px; }
.rw-head { display: flex; gap: 8px; justify-content: center; align-items: center; } .rw-head .rk { font-size: 14px; line-height: 20px; padding: 0 10px; } .rw-head small { color: #6b5a44; }
.rw-fish { width: 100%; max-width: 320px; height: auto; aspect-ratio: 320 / 150; image-rendering: pixelated; border-radius: 14px; background: radial-gradient(circle at 50% 55%, #3a8ec0, #154a72); margin: 8px auto 0; display: block; }
.rw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; } .rw-grid div { padding: 6px 2px; border-radius: 10px; background: #f6ecd2; } .rw-grid small { display: block; font-size: 11px; color: #6b5a44; } .rw-grid b { font-size: 13.5px; }
.rw-var { margin: 6px 0; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--vc) 22%, #fffaf0); border: 2px solid var(--vc); font-size: 13px; }
.rw-rec { margin: 5px 0; padding: 5px 10px; border-radius: 10px; background: #fff1c0; border: 2px solid #f0c040; font-size: 13.5px; animation: rise .3s ease-out; } .rw-rec.new { background: #e3f6e6; border-color: #6bd35a; }
.rw-full { margin: 8px 0; padding: 8px; border-radius: 12px; background: #ffe6e0; border: 2px solid #e85a4a; font-size: 13.5px; }
.fg-panel.r-SSR { border-color: #c98a10; box-shadow: 0 6px 0 #8a5a00, 0 0 40px rgba(255,211,77,.7); }
.fg-panel.r-UR { border-color: #c0283a; box-shadow: 0 6px 0 #7a1020, 0 0 60px rgba(255,90,110,.8); background: linear-gradient(#fff6f0, #ffe8d8); }
.rw-rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,211,77,.18) 0 10deg, transparent 10deg 20deg); animation: rwSpin 8s linear infinite; pointer-events: none; z-index: 0; }
.fg-panel > *:not(.rw-rays) { position: relative; z-index: 1; }
.fg-panel.r-UR .rw-rays { background: repeating-conic-gradient(from 0deg, rgba(255,90,110,.2) 0 8deg, rgba(255,211,77,.18) 8deg 16deg, transparent 16deg 24deg); animation-duration: 4s; }
@keyframes rwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rw-rays, .fg-bar.stam .wave { animation: none; } }
@media (max-width: 520px) {
  .fg-left { width: 46vw; } .fg-card small { font-size: 10.5px; }
  .fg-right { width: 98px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); gap: 8px; } .fg-ctl { min-height: 60px; font-size: 14px; }
  .fg-bar { grid-template-columns: 74px 1fr 82px; gap: 6px; } .fg-bar span { font-size: 10px; } .fg-bar small { font-size: 10.5px; }
  .rw-grid { grid-template-columns: repeat(2, 1fr); }
  .fm-side .fm-btn { min-width: 64px; }
}

/* bảng phụ trợ */
#fishpanel { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(8,16,28,.55); pointer-events: auto; }
#fishpanel.hidden { display: none; }
.fp-box { display: flex; flex-direction: column; width: min(720px, calc(100vw - 16px)); max-height: calc(100dvh - 20px); border-radius: 18px; background: #fffaf0; border: 4px solid #3b2a1e; box-shadow: 0 6px 0 #3b2a1e, 0 14px 30px rgba(0,0,0,.45); overflow: hidden; color: #3b2a1e; font-weight: 700; }
.fp-head { display: flex; gap: 8px; align-items: center; padding: 8px; background: #f1e4c8; border-bottom: 3px solid #e2cfa4; }
.fp-tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .fp-tabs::-webkit-scrollbar { display: none; }
.fp-tab { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 13px; color: #8a7458; cursor: pointer; white-space: nowrap; } .fp-tab.on { background: #fff; color: #3b2a1e; box-shadow: 0 3px 0 #dccba6; }
.fp-x { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 3px solid #3b2a1e; background: #fbe6b4; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; }
.fp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; overscroll-behavior: contain; }
.fp-money { padding: 6px 12px; border-top: 2px solid #ecdcb4; background: #fdf6e3; font-size: 13px; text-align: right; }
.fp-card { padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; border: 3px solid #f0dca8; background: #fffdf7; }
.fp-card p { margin: 4px 0 8px; font-weight: 600; color: #5a4a36; }
.fp-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px dashed #ecdcb4; font-size: 13.5px; } .fp-row:first-child { border-top: 0; } .fp-row span { color: #7d6a50; } .fp-row b { text-align: right; }
.fp-row.ach.done span { color: #2f8a45; }
.fp-bar { display: block; height: 10px; margin: 6px 0; border-radius: 99px; background: #efe5cf; overflow: hidden; } .fp-bar em { display: block; height: 100%; background: linear-gradient(90deg, #3aa0d8, #6bd35a); }
.fp-warn { color: #c0392b !important; }
.fp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .fp-acts .fm-big { min-height: 46px; font-size: 13.5px; padding: 4px 12px; }
.fp-empty { text-align: center; color: #8a7458; padding: 20px; }
.fp-list { display: grid; gap: 6px; } .fp-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; background: #fffdf7; border: 2px solid #f0dca8; }
.fp-item b { display: block; font-size: 13.5px; } .fp-item small { font-size: 12px; color: #6b5a44; }
.fp-fish { width: 76px; height: 40px; image-rendering: pixelated; border-radius: 8px; background: radial-gradient(circle, #3a8ec0, #1d5a86); }
.fp-sell { min-height: 44px; padding: 2px 10px; border: 2px solid #1e4a1e; border-radius: 10px; background: #6bd35a; color: #fff; font: inherit; font-size: 11.5px; font-weight: 900; cursor: pointer; line-height: 1.2; }
.fp-rods { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-bottom: 10px; }
.fp-rod { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; border: 3px solid #e2cfa4; background: #fffdf7; font: inherit; cursor: pointer; color: #3b2a1e; min-height: 104px; }
.fp-rod canvas { width: 48px; height: 48px; image-rendering: pixelated; } .fp-rod b { font-size: 11.5px; line-height: 1.15; text-align: center; } .fp-rod small { font-size: 10.5px; color: #6b5a44; }
.fp-rod.on { border-color: #2f80c0; box-shadow: 0 0 0 2px #2f80c0 inset; } .fp-rod.notown { opacity: .78; }
.fp-rod.r-R { border-color: #9ac8f8; } .fp-rod.r-SR { border-color: #c8a8f8; } .fp-rod.r-SSR { border-color: #f0c860; background: #fffaf0; } .fp-rod.r-UR { border-color: #f08a9a; background: #fff6f6; }
.fp-stat { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 0; border-top: 1px dashed #ecdcb4; font-size: 13.5px; }
.fp-stat span { color: #7d6a50; } .fp-stat b em { color: #2f8a45; font-style: normal; }
.fp-pips { display: flex; gap: 3px; } .fp-pips u { width: 12px; height: 7px; border-radius: 3px; background: #e8dcc0; } .fp-pips u.on { background: #3aa0d8; }
.fp-up { min-height: 38px; padding: 0 10px; border: 2px solid #1f5f94; border-radius: 10px; background: #2f80c0; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .fp-up:disabled { background: #c8c0b0; border-color: #a8a090; cursor: not-allowed; }
.fp-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 520px) { .fp-dc dl { grid-template-columns: 1fr; } .fp-dc dt { margin-top: 2px; } .fp-dc { padding: 6px; } }
.fp-dc { padding: 8px; border-radius: 14px; border: 3px solid #e2cfa4; background: #fffdf7; text-align: center; } .fp-dc canvas { width: 100%; max-width: 180px; height: auto; aspect-ratio: 120 / 56; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(circle, #3a8ec0, #154a72); }
.fp-dc.locked canvas { background: radial-gradient(circle, #555c66, #2a2f38); } .fp-dc b { display: block; font-size: 14px; margin-top: 4px; } .fp-dc small { font-size: 11.5px; color: #6b5a44; }
.fp-dc dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 0; text-align: left; font-size: 12px; } .fp-dc dt { color: #8a7458; } .fp-dc dd { margin: 0; font-weight: 700; }
.fp-dc p { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #5a4a36; text-align: left; }
.fp-dc.r-SSR { border-color: #f0c860; } .fp-dc.r-UR { border-color: #f08a9a; } .fp-dc.r-SR { border-color: #c8a8f8; } .fp-dc.r-R { border-color: #9ac8f8; }
.vol-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 6px 0; font-size: 13px; } .vol-row span { flex: 1 0 100%; color: #6b5a44; }
.vol-row .vol { min-height: 36px; padding: 0 10px; border: 2px solid var(--wood-3, #c8a060); border-radius: 10px; background: #fffaf0; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .vol-row .vol.on { background: #2f80c0; color: #fff; border-color: #1f5f94; } .vol-row .vol:disabled { opacity: .5; }
#fishroot:has(#fishpanel:not(.hidden)) #fishtoasts { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
#fishroot:has(.fg-center) #fishtoasts { top: calc(6px + env(safe-area-inset-top, 0px)); } #fishroot:has(.fg-center) .ftoast:nth-last-child(n+3) { display: none; }
#fishpanel ~ #fishtoasts, #fishtoasts { z-index: 8; }

/* huy hiệu trạng thái của 3 nút (chỉ hiện trên điện thoại) */
#actbar .act .bd { display: none; position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; border: 2px solid var(--wood); align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 900; line-height: 1; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; }
#actbar .act .bd.ok { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -4px; right: -4px; background: #6bd35a; }
#actbar .act .bd.off { background: #d6453a; }
#actbar .act .bd.cd { background: #8a7458; }
#actbar .act .bd.hot { background: #e2432a; animation: actBounce .5s steps(2) infinite; }
#actbar .act .bd.busy { background: #f2b632; color: #3b2a1e; }
@media (prefers-reduced-motion: reduce) { #actbar .act .bd.hot { animation: none; } }
@media (max-width: 520px) { #actbar .act .bd { display: flex; } }

/* ===== CẦN CÂU & RỌ (bộ ảnh mới) — luôn giữ điểm ảnh sắc nét ===== */
.gear-ic { width: 48px; height: 48px; image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: middle; }
.gear-ic.big { width: 72px; height: 72px; } .gear-ic.sm { width: 32px; height: 32px; }
.fg-gear { width: 40px; height: 40px; image-rendering: pixelated; }
.gstars { display: inline-flex; gap: 1px; font-size: 12px; line-height: 1; } .gstars i { font-style: normal; color: #d8cdb6; } .gstars i.on { color: #f2b632; text-shadow: 0 0 2px #8a5a00; }
#fishpanel { position: fixed; z-index: 28; }
.fp-title { flex: 1; font-size: 17px; padding-left: 4px; }
.fp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.fp-seg button { min-height: 44px; border: 3px solid #e2cfa4; border-radius: 12px; background: #fffdf7; font: inherit; font-size: 14px; font-weight: 800; color: #7d6a50; cursor: pointer; }
.fp-seg button.on { border-color: #2f80c0; background: #e6f2ff; color: #1f5f94; }
.fp-equipped { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fp-equipped > div { display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 12px; background: #f6ecd2; min-width: 0; }
.fp-equipped span { min-width: 0; } .fp-equipped small { display: block; font-size: 11px; color: #8a7458; } .fp-equipped b { display: block; font-size: 12.5px; line-height: 1.2; }
.fp-gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-bottom: 10px; }
.fp-gi { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border: 3px solid #e2cfa4; border-radius: 12px; background: #fffdf7; cursor: pointer; font: inherit; min-height: 74px; }
.fp-gi.on { border-color: #2f80c0; box-shadow: 0 0 0 2px #2f80c0 inset; } .fp-gi.notown img { filter: grayscale(.85) brightness(.75); opacity: .7; }
.fp-gi .lk { font-size: 11px; } .fp-gi em { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: #2f80c0; color: #fff; font-size: 9.5px; font-style: normal; white-space: nowrap; }
.fp-card.gdet .gdet-top { display: flex; gap: 10px; align-items: center; } .gdet-top b { display: block; font-size: 15px; } .gdet-top small { display: block; font-size: 12px; color: #6b5a44; margin: 2px 0; }
.fp-card.gdet.r-N { border-color: #9CA3AF; } .fp-card.gdet.r-R { border-color: #22C55E; } .fp-card.gdet.r-SR { border-color: #A855F7; } .fp-card.gdet.r-SSR { border-color: #F59E0B; } .fp-card.gdet.r-UR { border-color: #F43F5E; }
.fp-shop { display: grid; gap: 8px; margin: 8px 0; }
.fp-set { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 14px; border: 3px solid #e2cfa4; background: #fffdf7; }
.fp-set.r-N { border-color: #cfd3da; } .fp-set.r-R { border-color: #86e0a6; } .fp-set.r-SR { border-color: #cfa6f8; }
.fp-set .ic2 { display: flex; gap: 2px; } .fp-set .nm b { display: block; font-size: 13.5px; } .fp-set .nm small { display: block; font-size: 11.5px; color: #6b5a44; line-height: 1.35; }
@media (max-width: 520px) { .fp-set { grid-template-columns: auto 1fr; } .fp-set > .fp-up, .fp-set > .tag { grid-column: 1 / -1; } .fp-set .gear-ic { width: 40px; height: 40px; } }
/* chiêu mộ cần câu */
.rg-banner { padding: 12px; border-radius: 16px; background: radial-gradient(circle at 50% 0%, #4a1a2e, #1d0f1a 70%); color: #fff; margin-bottom: 10px; border: 3px solid #F43F5E; box-shadow: 0 0 18px rgba(244,63,94,.45); }
.rg-title b { display: block; font-size: 18px; } .rg-title small { color: #fecdd3; font-size: 12.5px; }
.rg-urs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.rg-ur { text-align: center; padding: 6px 4px; border-radius: 12px; background: rgba(255,255,255,.06); border: 2px solid var(--au2); box-shadow: 0 0 12px var(--au2), inset 0 0 10px rgba(0,0,0,.4); animation: rgGlow 2.4s ease-in-out infinite; }
.rg-ur b { display: block; font-size: 12px; color: var(--au); line-height: 1.2; margin-top: 2px; } .rg-ur small { display: block; font-size: 10.5px; color: #e5e7eb; opacity: .85; }
.rg-pair { display: flex; justify-content: center; align-items: center; gap: 2px; } .rg-pair .gear-ic.big { width: 64px; height: 64px; } .rg-pair .gear-ic:not(.big) { width: 36px; height: 36px; }
@keyframes rgGlow { 50% { box-shadow: 0 0 22px var(--au), inset 0 0 10px rgba(0,0,0,.4); } }
@media (prefers-reduced-motion: reduce) { .rg-ur { animation: none; } }
@media (max-width: 520px) { .rg-pair .gear-ic.big { width: 48px; height: 48px; } .rg-pair .gear-ic:not(.big) { width: 28px; height: 28px; } }
.g-card.rodc .g-front { background: #181A20; color: #fff; border-color: var(--fr); box-shadow: 0 0 0 2px var(--fr) inset; }
.g-card.rodc.flip .g-front { box-shadow: 0 0 16px var(--fr), 0 0 0 2px var(--fr) inset; }
.g-card.rodc.r-UR.flip .g-front { box-shadow: 0 0 22px var(--au2), 0 0 8px var(--au), 0 0 0 3px #F43F5E inset; }
.g-card.rodc .rc-ics { display: flex; justify-content: center; gap: 2px; } .g-card.rodc .rc-ics .gear-ic { width: 40px; height: 40px; }
.g-card.rodc b { color: #fff; } .g-card.rodc .rc-st { display: block; font-size: 10px; color: #e5e7eb; line-height: 1.2; }
.g-card.rodc .g-back { font-size: 34px; }
.g-card.rodc .g-front, .g-card.rodc.flip .g-front, .g-card.rodc.r-UR.flip .g-front { background: var(--fbg, #181A20); padding: 4px 3px; gap: 1px; justify-content: flex-start; }
.g-card.rodc .gtier { align-self: flex-start; padding: 0 6px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 900; line-height: 16px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.g-card.rodc b { font-size: 11px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-card.rodc em { font-size: 10px; }
@media (max-width: 520px) { .g-card.rodc .rc-ics .gear-ic { width: 30px; height: 30px; } .g-card.rodc .rc-st { font-size: 9px; } .g-card.rodc b { font-size: 10px; } .g-card.rodc .pityt { font-size: 8.5px; } }
.g-card.rodc b { display: block; overflow: visible; -webkit-line-clamp: unset; color: #fff !important; text-align: center; flex: none; }
.g-card.rodc .g-front > * { flex: none; }
@media (max-width: 520px) { .g-card.rodc .rc-st + .rc-st { display: none; } }
.rg-ur { background: rgba(10,8,16,.55); }
/* màu bậc của CẦN & RỌ theo bảng màu bộ ảnh: N xám · R xanh lá · SR tím · SSR cam-vàng · UR đỏ hồng */
.rk.gk { background: #9CA3AF; color: #fff; } .rk.gk.r-R { background: #22C55E; } .rk.gk.r-SR { background: #A855F7; } .rk.gk.r-SSR { background: linear-gradient(90deg, #F59E0B, #FACC15); color: #4a2a00; } .rk.gk.r-UR { background: #F43F5E; }
.rates .rk.gk, .pity .rk.gk { font-size: 12px; line-height: 20px; padding: 0 8px; }
@media (max-width: 520px) { .g-card.rodc .rc-st { display: none !important; } }
/* 3 Ô NÚT CỐ ĐỊNH màn câu: không đổi vị trí giữa các giai đoạn (giật cần → kéo cùng 1 chỗ) */
.fg-right[data-shell] { display: grid; grid-template-rows: 60px 60px 96px; gap: 10px; width: 116px; align-items: stretch; }
.fg-slot { pointer-events: auto; border: 3px solid #1e2a3a; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 900; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-shadow: 0 1px 0 rgba(0,0,0,.35); box-shadow: 0 5px 0 #1e2a3a, 0 8px 16px rgba(0,0,0,.3); touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; padding: 2px 4px; transition: background .12s, filter .12s; }
.fg-slot small { font-size: 10.5px; font-weight: 700; opacity: .9; margin-top: 2px; }
.fg-slot.off { visibility: hidden; }
.fg-slot:disabled:not(.off) { filter: grayscale(.6) brightness(.85); }
.fg-slot.m-slack { background: linear-gradient(#5ab0ff, #2f7fd0); } .fg-slot.m-hold { background: linear-gradient(#ffb04a, #e07a1e); }
.fg-slot.m-pull { background: linear-gradient(#6bd35a, #3f9a34); } .fg-slot.m-cast { background: linear-gradient(#6bd35a, #3f9a34); font-size: 17px; }
.fg-slot.m-hook { background: linear-gradient(#ffd34d, #f0a020); color: #3b2a1e; text-shadow: none; font-size: 17px; }
.fg-slot.m-hook.hot { background: linear-gradient(#ff5a4a, #d0281a); color: #fff; animation: fgGlowBtn .35s ease-in-out infinite; }
.fg-slot.m-reel { background: #fffaf0; color: #3b2a1e; text-shadow: none; font-size: 13px; }
.fg-slot.on { transform: translateY(4px); box-shadow: 0 1px 0 #1e2a3a, inset 0 0 0 3px rgba(255,255,255,.55); filter: brightness(1.1); }
@keyframes fgGlowBtn { 50% { box-shadow: 0 5px 0 #1e2a3a, 0 0 22px #ff5a4a; } }
@media (prefers-reduced-motion: reduce) { .fg-slot.m-hook.hot { animation: none; } }
@media (max-width: 520px) { .fg-right[data-shell] { width: 100px; grid-template-rows: 56px 56px 88px; gap: 8px; } .fg-slot { font-size: 14.5px; } }
/* tuyệt kỹ UR trong hồ sơ nông dân */
.pf-card.ur-skill{border:2px solid var(--urc,#ff5a5a);box-shadow:0 0 0 2px rgba(0,0,0,.08) inset}
.pf-card.ur-skill h4{color:var(--urc,#ff5a5a);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.pf-card.ur-skill .btn{width:100%;margin-top:6px}
/* chiêu mộ cần câu: biểu tượng cần câu (giống nút Bản đồ câu cá) thay viên ngọc */
.g-orb.rod .g-rodic { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 10px var(--tc)) drop-shadow(0 3px 0 rgba(0,0,0,.45)); animation: rodSwing 1.3s ease-in-out forwards; display: inline-block; transform-origin: 30% 80%; }
@keyframes rodSwing { 0% { transform: rotate(-30deg) scale(.7); } 45% { transform: rotate(18deg) scale(1); } 70% { transform: rotate(-8deg) scale(1.05); } 100% { transform: rotate(0) scale(1.2); } }
.g-card.rodc .gkind { position: absolute; top: 3px; right: 4px; font-size: max(7px, .75em); font-weight: 800; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 5px; }
.g-card.rodc.k-set .g-front { outline: 3px solid #ffe14d; outline-offset: -6px; }
/* nút "Mở tất cả" luôn nằm trong màn hình khi đang chạy hoạt cảnh (trước khi lật thẻ, chưa chiếm chỗ của các thẻ) */
.gacha { justify-content: safe center; }
.gacha:not(.reveal) .g-cards { position: absolute; visibility: hidden; pointer-events: none; }
.gacha:not(.reveal) .g-foot { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); z-index: 2; }
.gacha.reveal .g-foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* thông báo tuyệt kỹ UR: giữa phía trên màn hình */
/* Bảng tuyệt kỹ UR — Mẫu A "Lưỡi Kiếm": dải chéo, tag nghề cắm chéo, tên chiêu phát sáng màu nghề, vệt chém lóe ngang */
#urbanner { --c: var(--urc, #00f5ff); position: fixed; top: calc(72px + env(safe-area-inset-top, 0px)); left: 50%; width: min(330px, calc(100vw - 24px)); height: 58px; z-index: 11; pointer-events: none;
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s, transform .3s; filter: drop-shadow(0 3px 0 #000); }
#urbanner.show { opacity: 1; transform: translate(-50%, 0); }
#urbanner .band, #urbanner .edge, #urbanner .shine { position: absolute; inset: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#urbanner .band { background: linear-gradient(100deg, #0b0710 0%, #1a1022 55%, #0b0710 100%); }
#urbanner .edge { background: linear-gradient(90deg, var(--c), transparent 30%, transparent 70%, var(--c)); padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
#urbanner .shine { overflow: hidden; }
#urbanner .shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40px; left: -60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
#urbanner .slash { position: absolute; left: -8%; right: -8%; top: 50%; height: 3px; background: linear-gradient(90deg, transparent, #fff, var(--c), transparent); opacity: 0; transform: translateY(-50%); }
#urbanner .tag { position: absolute; left: 8px; top: -9px; font-family: "Bungee", "Baloo 2", system-ui, sans-serif; font-size: 11px; line-height: 1.5; color: #140c02; background: var(--c); padding: 0 7px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
#urbanner .txt { position: absolute; inset: 0; padding: 8px 28px 6px 26px; display: flex; flex-direction: column; justify-content: center; }
#urbanner .t { font-family: "Bungee", "Baloo 2", system-ui, sans-serif; font-size: 16px; line-height: 1.1; color: #fff; text-shadow: 0 0 8px var(--c), 2px 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#urbanner .r { font-size: 11.5px; font-weight: 700; color: #ffe9b0; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#urbanner.play { animation: ubIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
#urbanner.play .shine::after { animation: ubShine .9s .35s ease-out both; }
#urbanner.play .slash { animation: ubSlash .35s ease-out both; }
@keyframes ubIn { 0% { opacity: 0; transform: translate(calc(-50% - 40px), 0) skewX(-12deg); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ubShine { to { left: 110%; } }
@keyframes ubSlash { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 70% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #urbanner.play, #urbanner.play * { animation: none !important; } }
@media (max-width: 520px) { #urbanner { top: calc(98px + env(safe-area-inset-top, 0px)); } #urbanner .t { font-size: 14px; } }
/* biểu tượng pixel 2D của khu câu cá */
.fpx { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -3px; display: inline-block; flex: none; }
.fm-ic .fpx { width: 26px; height: 26px; vertical-align: middle; }
.fg-slot .fpx { width: 20px; height: 20px; }
.fp-title .fpx { width: 22px; height: 22px; vertical-align: -5px; }
.rw-rec .fpx, .rw-var .fpx { width: 16px; height: 16px; }
.ftoast .fpx { width: 18px; height: 18px; }
/* thanh kéo âm lượng */
.vol-slider { display: grid; grid-template-columns: 1fr 44px; grid-template-areas: "l v" "r r"; align-items: center; gap: 2px 8px; margin: 8px 0 4px; font-size: 13px; }
.vol-slider span { grid-area: l; font-weight: 700; } .vol-slider b { grid-area: v; text-align: right; font-size: 13px; }
.vol-slider input[type=range] { grid-area: r; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; touch-action: none; margin: 0; }
.vol-slider input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; border: 2px solid #3b2a1e; background: linear-gradient(90deg, #6bd35a var(--p, 50%), #e9dcc0 var(--p, 50%)); }
.vol-slider input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; border: 2px solid #3b2a1e; background: #e9dcc0; }
.vol-slider input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: #6bd35a; }
.vol-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #ffd34d; border: 3px solid #3b2a1e; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.vol-slider input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffd34d; border: 3px solid #3b2a1e; }
.fm-vol { position: fixed; top: calc(62px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 31; width: min(260px, calc(100vw - 20px)); padding: 6px 12px 10px; background: #fff8e8; border: 3px solid #3b2a1e; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.35); pointer-events: auto; }
.fm-vol .fm-btn { width: 100%; justify-content: center; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.fm-vol.hidden { display: none; }
/* nút BẢN ĐỒ CÂU CÁ: cùng cỡ với các nút bên phải (Gọi xe tải, Đốc thúc) + icon cần câu pixel */
#fishbtn { min-width: 132px; min-height: 48px; padding: 4px 10px 4px 6px; grid-template-columns: 30px auto; border-radius: 12px; }
#fishbtn .fb-ic { display: grid; place-items: center; }
#fishbtn .fb-ic .fpx { width: 30px; height: 30px; }
#fishbtn b { font-size: 12.5px; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
@media (min-width: 521px) { #fishbtn { width: 132px; min-width: 132px; box-sizing: border-box; } #fishbtn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; } } #fishbtn small { font-size: 11px; line-height: 1.1; }
#fishbtn { box-shadow: 0 3px 0 #13507a; }
@media (max-width: 520px) {
  #fishbtn { width: 52px; min-width: 0; height: 52px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; }
  #fishbtn b, #fishbtn small { display: none; }
  #fishbtn .fb-ic .fpx { width: 32px; height: 32px; }
}
/* chiêu mộ: icon pixel thay emoji */
.tab .fpx.tabic, .rg-title .fpx.tabic { width: 20px; height: 20px; vertical-align: -4px; }
.tab .ico { width: 20px; height: 20px; vertical-align: -4px; }
.g-back .fpx.gback { width: 46%; height: auto; aspect-ratio: 1; }
.g-orb.rod .g-rodic .fpx.orb { width: 72px; height: 72px; }
/* màn câu cá: ô cần & rọ gọn trên điện thoại (không che tầm nhìn) */
@media (max-width: 600px) {
  .fg-left { width: auto; max-width: 46vw; gap: 4px; top: calc(66px + env(safe-area-inset-top, 0px)); }
  .fg-card { grid-template-columns: 28px 1fr; gap: 5px; padding: 3px 8px 3px 4px; border-radius: 10px; border-width: 2px; }
  .fg-card .fg-gear { width: 28px; height: 28px; border-radius: 6px; }
  .fg-card b { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
  .fg-card small { font-size: 9.5px; line-height: 1.2; white-space: nowrap; } .fg-card .rk { font-size: 8.5px; padding: 0 3px; }
  .fg-card .fg-x { display: none; }
  .fg-card .fg-bkbar { height: 3px; margin-top: 1px; }
  .fg-zone { font-size: 10px; padding: 2px 8px; }
}
@media (max-width: 600px) {
  .fg-card.bk > div { display: grid; grid-template-columns: auto auto; column-gap: 6px; }
  .fg-card.bk > div > b { grid-column: 1 / span 2; }
  .fg-card.bk #fg-bk { grid-column: 1; grid-row: 2; } .fg-card.bk #fg-bk2 { grid-column: 2; grid-row: 2; }
  .fg-card.bk .fg-bkbar:nth-of-type(1) { grid-column: 1; grid-row: 3; } .fg-card.bk .fg-bkbar:nth-of-type(2) { grid-column: 2; grid-row: 3; }
}
/* ---- Thủy Cung tầng hầm ---- */
#aqbar { position: fixed; top: calc(var(--hud-h, 50px) + 56px); left: 50%; transform: translateX(-50%); z-index: 12; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 12px; background: rgba(22,26,34,.92); color: #d8f3ff; border: 2px solid #4d5a6e; font-size: 13px; max-width: calc(100vw - 16px); }
#aqbar.hidden, #aqpanel.hidden { display: none; }
#aqbar .btn { min-height: 32px; font-size: 13px; padding: 3px 10px; }
#aqpanel { position: fixed; right: 12px; bottom: calc(var(--nav-h, 70px) + 12px); z-index: 13; width: min(340px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; background: #fffaf0; border: 3px solid var(--wood); border-radius: 12px; padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#aqpanel .aq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-right: 30px; position: relative; }
#aqpanel .aq-head small { color: #7d6750; }
#aqpanel .x { position: absolute; right: 0; top: -2px; }
#aqpanel .aq-list { display: grid; gap: 6px; margin: 6px 0; }
#aqpanel .aq-fi { display: grid; grid-template-columns: 36px auto 1fr; grid-template-rows: auto auto; gap: 0 6px; align-items: center; text-align: left; background: #fff; border: 2px solid #dcc9a8; border-radius: 8px; padding: 4px 6px; cursor: pointer; font: inherit; }
#aqpanel .aq-fi img { grid-row: span 2; width: 36px; height: 36px; image-rendering: pixelated; }
#aqpanel .aq-fi small { grid-column: 2 / 4; color: #7d6750; }
#aqpanel .aq-fi.no { opacity: .5; cursor: not-allowed; }
#aqpanel .aq-fish { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 8px 0; }
#aqpanel .aq-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aq-card .aq-img { width: 48px; height: 60px; object-fit: contain; image-rendering: pixelated; }
.aq-h { margin: 14px 0 8px; }
#aqplace { position: fixed; top: calc(var(--hud-h, 50px) + 10px); left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: 8px; align-items: center; padding: 5px 6px 5px 12px; border-radius: 10px; background: rgba(22,26,34,.92); color: #d8f3ff; border: 2px solid #4d5a6e; font-size: 13px; max-width: calc(100vw - 16px); }
#aqplace.hidden, #aqbar { display: none; }
#aqpanel .aq-fish { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; background: var(--rbg, #f3ead8); border: 2px solid var(--rc, #dcc9a8); border-radius: 10px; padding: 8px; }
#aqpanel .aq-av { width: 76px; height: 76px; border-radius: 8px; background: #123047; display: grid; place-items: center; }
#aqpanel .aq-av img { width: 64px; height: 64px; image-rendering: pixelated; }
#aqpanel .aq-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#aqpanel .aq-info b { font-size: 16px; }
#aqpanel .aq-info p { margin: 2px 0 0; font-size: 12px; color: #6b5640; line-height: 1.4; }
.aq-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
/* ---- Báo cáo cuối ngày (kiểu mới): thẻ lợi nhuận lớn + tab Thu chi / Hoạt động + ô tích tự sang ngày ---- */
.rp2 { display: flex; flex-direction: column; gap: 10px; }
.rp2 .rp-head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rp2 .rp-head h2 { margin: 0; letter-spacing: .5px; text-transform: uppercase; }
.rp-hero { position: relative; text-align: center; padding: 12px 12px 10px; border-radius: 14px; border: 3px solid #2e1c0e; box-shadow: 0 4px 0 #2e1c0e; background: repeating-linear-gradient(135deg, #eaf7e1 0 12px, #e2f2d6 12px 24px); }
.rp-hero.down { background: repeating-linear-gradient(135deg, #fbe7e2 0 12px, #f6ddd6 12px 24px); }
.rp-hero small { display: block; font-weight: 800; letter-spacing: 2px; color: #6b5640; font-size: 12px; }
.rp-hero strong { display: block; font-size: clamp(24px, 6vw, 34px); line-height: 1.15; color: #2f7d2a; font-variant-numeric: tabular-nums; }
.rp-hero.down strong { color: #b23a2e; }
.rp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 2px dashed rgba(46,28,14,.25); }
.rp-trio span { display: block; font-size: 12px; color: #6b5640; font-weight: 700; }
.rp-trio b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rp-trio b.pos { color: #2f7d2a; } .rp-trio b.neg { color: #b23a2e; }
.rp2 .rep-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: #efe2c6; }
.rp2 .rep-tab { border-radius: 9px; }
.rp2 .rep-pane { padding: 8px; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .rp-cols { grid-template-columns: 1fr; } }
.rp-cols section { border-radius: 10px; padding: 6px 8px; background: #fff; border: 2px solid #e6d6b4; }
.rp-cols section.rp-in { border-color: #b9dfa8; } .rp-cols section.rp-out { border-color: #efc0b6; }
.rp-cols h4 { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 4px; font-size: 14px; }
.rp-cols .rp-in h4 b { color: #2f7d2a; } .rp-cols .rp-out h4 b { color: #b23a2e; }
.rp-l { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(0,0,0,.08); font-size: 13.5px; }
.rp-l:last-child { border-bottom: 0; } .rp-l b { font-variant-numeric: tabular-nums; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .rp-grid { grid-template-columns: repeat(2, 1fr); } }
.rp-st { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 8px; border-radius: 10px; background: #fff; border: 2px solid #e6d6b4; }
.rp-st img { grid-row: span 2; } .rp-st span { font-size: 12px; color: #6b5640; font-weight: 700; } .rp-st b { font-size: 14px; }
.rp-foot { display: grid; gap: 8px; justify-items: center; }
.rp-auto { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; cursor: pointer; padding: 6px 12px; border-radius: 10px; background: #fff3c9; border: 2px solid var(--straw); }
.rp-auto input { width: 20px; height: 20px; accent-color: #3f8f3a; }
.rp-foot .autonext { width: 100%; grid-template-columns: auto 1fr; margin: 0; }
.rp-foot .autonext .an-bar { grid-column: 2; }
.rp-foot .autonext[hidden] { display: none; }
/* ---- Thẻ sự kiện (2 bản đồ) & hợp đồng ---- */
#evcard { position: fixed; z-index: 9500; top: calc(var(--hud-h, 50px) + 12px); left: 50%; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; width: min(440px, calc(100vw - 24px)); }
#evcard.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#evcard .ec { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fffaf0; color: #2e1c0e; border: 3px solid var(--ec, #8a5a34); box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 2px #fff; cursor: pointer; }
#evcard .ec-ic { grid-row: span 3; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--ec, #8a5a34) 22%, #fff); }
#evcard .ec-ic img { width: 34px; height: 34px; image-rendering: pixelated; }
#evcard small { font-weight: 800; letter-spacing: 1px; color: var(--ec, #8a5a34); font-size: 11px; text-transform: uppercase; }
#evcard b { font-size: 17px; line-height: 1.2; }
#evcard p { margin: 0; font-size: 14px; line-height: 1.4; color: #4a3826; }
#evcard .ec-act { grid-column: 2; display: flex; gap: 8px; margin-top: 4px; }
#ctoffer { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; background: rgba(20,12,6,.45); padding: 16px; }
#ctoffer.hidden { display: none; }
#ctoffer .co { width: min(380px, 100%); border-radius: 16px; background: #fffaf0; border: 3px solid #2e1c0e; box-shadow: 0 6px 0 #2e1c0e; padding: 14px; display: grid; gap: 10px; text-align: center; }
#ctoffer .co.royal { border-color: #b8860b; box-shadow: 0 6px 0 #8a6408; }
#ctoffer h3 { margin: 0; font-size: 20px; }
#ctoffer .co-item { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 800; }
#ctoffer .co-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#ctoffer .co-kv div { background: #f3ead8; border-radius: 9px; padding: 6px; } #ctoffer .co-kv span { display: block; font-size: 12px; color: #6b5640; font-weight: 700; } #ctoffer .co-kv b { font-size: 15px; }
#ctoffer .co-bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.12); overflow: hidden; } #ctoffer .co-bar i { display: block; height: 100%; background: #e8a317; }
#ctoffer .co-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Cửa hàng › Bán sỉ: chọn mặt hàng (không hiện số lượng kho) */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 6px 0 8px; }
.ws-it { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; text-align: left; padding: 6px; border-radius: 9px; border: 2px solid #e2d3b2; background: #fffaf0; cursor: pointer; font: inherit; }
.ws-it img { grid-row: span 3; }
.ws-it span { font-weight: 800; font-size: 13px; line-height: 1.15; } .ws-it small { font-size: 11.5px; color: #7d6750; }
.ws-it i { font-style: normal; font-size: 11px; font-weight: 800; color: #9a8a74; }
.ws-it.on { border-color: #4f9a3e; background: #eef8e6; } .ws-it.on i { color: #2f7d2a; }
.chip.orders b { font-variant-numeric: tabular-nums; }

/* ô thông báo gọn trong HUD: cạnh chuông, dưới ô tiền — dùng hết chỗ trống, 1 dòng */
#hudmsg { flex: 1 1 0; min-width: 0; height: 36px; display: none; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px; background: var(--paper, #fff8e6); border: 2px solid var(--wood, #8a5a34); border-left-width: 6px;
  box-shadow: 0 2px 0 var(--wood, #8a5a34); font-size: 13px; font-weight: 700; color: #2e1c0e; cursor: pointer; pointer-events: auto; animation: hmIn .25s ease-out; }
#hudmsg.on { display: flex; }
#hudmsg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hudmsg.full { height: auto; min-height: 36px; padding-block: 4px; } #hudmsg.full span { white-space: normal; }
#hudmsg .ico { width: 18px; height: 18px; flex: none; image-rendering: pixelated; }
#hudmsg.k-good { border-left-color: #4f9a3e; } #hudmsg.k-bad { border-left-color: #c8402e; } #hudmsg.k-warn { border-left-color: #e0a020; }
#hudmsg.k-gold, #hudmsg.k-event-epic, #hudmsg.k-event-legendary { border-left-color: #e8a317; } #hudmsg.k-hint { border-left-color: #3e86c9; } #hudmsg.k-weather { border-left-color: #6ab0e8; }
@keyframes hmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) { #hudmsg { order: -1; max-width: 520px; margin-right: auto; } }
#toasts { display: none; }
@media (max-width: 760px) { #hudmsg { font-size: 12px; line-height: 14px; padding: 0 8px; } #hudmsg span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }