/* หน้าต่างกลุ่มชีวิต/สังคม/ร้าน (life.js) — ใช้ตัวแปรจาก theme.css เท่านั้น · คลาสขึ้นต้นด้วย lf- */

/* ---------- ตัวช่วยทั่วไป ---------- */
.lf-gap { margin-bottom: 8px; }
.lf-gap-t { margin-top: 8px; }
.lf-ell { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-pre { white-space: pre-wrap; word-break: break-word; }
.lf-title { font-size: 16px; font-weight: 700; color: var(--moon); }
.lf-big-ico { font-size: 40px; line-height: 1; margin: 4px auto 6px; }
.lf-big-ico.sm { font-size: 26px; margin: 0; }
.lf-split { display: grid; grid-template-columns: 200px 1fr; gap: 12px; align-items: start; }
.lf-side, .lf-main { min-width: 0; }
.lf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lf-col { min-width: 0; }
.lf-tablewrap { overflow-x: auto; }
.lf-acts { gap: 2px; flex: none; }
.lf-off, .item.off { opacity: .62; }
.lf-fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px 8px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.lf-fieldset legend { padding: 0 4px; color: var(--text-2); }
.lf-qty { width: 84px; min-height: 30px; padding: 4px 8px; }
button.item.lf-pick { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.item.lf-pick:last-child { border-bottom: 0; }
button.item.lf-pick.on { background: color-mix(in srgb, var(--gold) 10%, transparent); box-shadow: inset 3px 0 0 var(--gold); }
.lf-banner { padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--moon-glow) 18%, transparent), transparent 55%), linear-gradient(var(--surface-2), var(--surface)); }
.lf-banner-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 45%, transparent)); }
.lf-banner .bar { margin-top: 6px; }

/* ---------- ฟาร์ม ---------- */
.lf-plots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lf-plot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.lf-plot .bar { width: 100%; }
.lf-plot .btn { width: 100%; padding: 2px 4px; }
.lf-plot.ready { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px color-mix(in srgb, var(--gold) 30%, transparent); }
.lf-plot.locked { opacity: .75; background: repeating-linear-gradient(45deg, var(--surface) 0 8px, var(--bg-2) 8px 16px); }
.lf-soil { position: relative; width: 100%; aspect-ratio: 1.25; border-radius: var(--r-sm); display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--gold-2) 55%, var(--bg)) 0 45%, color-mix(in srgb, var(--gold-2) 30%, var(--bg)) 70%);
  border: 1px solid color-mix(in srgb, var(--gold-2) 40%, var(--line)); }
.lf-soil.wet { background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--gold-2) 35%, var(--sp)) 0 45%, color-mix(in srgb, var(--gold-2) 20%, var(--bg)) 70%); }
.lf-plot.empty .lf-soil, .lf-plot.locked .lf-soil { background: var(--bg-2); border-style: dashed; }
.lf-crop { font-size: 26px; line-height: 1; }
.lf-plot.stage-seed .lf-crop { font-size: 16px; }
.lf-plot.stage-sprout .lf-crop { font-size: 20px; }
.lf-plot.ready .lf-crop { font-size: 30px; animation: lf-bounce 1.4s ease-in-out infinite; }
.lf-drop { position: absolute; right: 3px; top: 2px; font-size: 11px; }
.lf-stage { color: var(--text-2); }
.lf-plot.ready .lf-stage { color: var(--gold); font-weight: 700; }

.lf-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.lf-animal { padding: 10px; }
.lf-animal.ready { border-color: var(--ok); }
.lf-animal-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 28px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-2); }
.lf-animal-ico.sm { width: 34px; height: 34px; font-size: 20px; }
.lf-animal .btn { padding: 2px 6px; }

/* ---------- สัตว์เลี้ยง ---------- */
.lf-pets { grid-template-columns: 190px 1fr; }
.lf-petorb { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 40px;
  background: radial-gradient(circle at 40% 35%, var(--surface-3), var(--bg)); border: 2px solid var(--line-2); }
.lf-petorb.on { border-color: var(--moon-glow); box-shadow: 0 0 18px color-mix(in srgb, var(--moon-glow) 40%, transparent); }
.lf-petorb.sm { width: 34px; height: 34px; font-size: 18px; border-width: 1px; }
.lf-petcard { padding: 14px; }
.lf-pethead { align-items: flex-start; gap: 12px; }
.lf-petname { font-size: 18px; color: var(--moon); }
.lf-petbars { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; margin-top: 12px; }
.lf-petbars .bar { height: 16px; }
.lf-petbars .bar > span { line-height: 14px; }
.lf-eggbox { padding: 10px; }
.lf-egg { display: inline-block; font-size: 44px; line-height: 1; }
.lf-egg.sm { font-size: 24px; }
.lf-egg.idle { animation: lf-wobble 1.6s ease-in-out infinite; }
.lf-hatch { position: relative; height: 96px; display: grid; place-items: center; }
.lf-hatch > * { grid-area: 1 / 1; }
.lf-egg.crack { font-size: 60px; animation: lf-wobble .25s ease-in-out 4, lf-out .3s 1s forwards; }
.lf-born { font-size: 64px; opacity: 0; animation: lf-in .5s 1.2s cubic-bezier(.2, 1.6, .4, 1) forwards; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--moon) 70%, transparent)); }

/* ---------- ตกปลา ---------- */
.lf-pond { position: relative; height: 150px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2);
  background: linear-gradient(var(--bg) 0 28%, color-mix(in srgb, var(--sp) 30%, var(--bg)) 28% 30%, color-mix(in srgb, var(--sp) 22%, var(--bg-2)) 30%, var(--bg)); }
.lf-pond::before { content: ""; position: absolute; left: 70%; top: 8%; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, transparent 45%, var(--moon) 46%); opacity: .75; }
.lf-pond.full::before { background: radial-gradient(circle at 40% 40%, var(--moon), color-mix(in srgb, var(--moon) 70%, var(--gold))); box-shadow: 0 0 22px color-mix(in srgb, var(--moon) 60%, transparent); opacity: 1; }
.lf-moonref { position: absolute; left: calc(70% - 10px); top: 34%; width: 46px; height: 70%; background: repeating-linear-gradient(transparent 0 6px, color-mix(in srgb, var(--moon) 30%, transparent) 6px 8px);
  filter: blur(1px); animation: lf-shimmer 3s ease-in-out infinite alternate; }
.lf-ripple { position: absolute; left: 30%; top: 58%; width: 60px; height: 14px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--moon-glow) 40%, transparent); animation: lf-ripple 2.6s ease-out infinite; }
.lf-bobber { position: absolute; left: calc(30% + 24px); top: calc(58% - 6px); width: 12px; height: 16px; border-radius: 50% 50% 45% 45%;
  background: linear-gradient(var(--danger) 0 50%, var(--text) 50%); box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 60%, transparent); animation: lf-bob 1.8s ease-in-out infinite; }
.lf-bobber.dip { animation: lf-dip .35s ease-in-out infinite; }
.lf-bang { position: absolute; left: calc(30% + 18px); top: 18%; font: 900 38px/1 var(--font-display); color: var(--gold); text-shadow: 0 0 12px var(--gold); animation: lf-pop .25s ease-out, pulse .5s .25s infinite; }
.lf-hook { margin-top: 10px; animation: pulse .5s infinite; }
.lf-reel { display: flex; flex-direction: column; gap: 10px; user-select: none; -webkit-user-select: none; }
.lf-track { position: relative; height: 54px; border-radius: var(--r); border: 1px solid var(--line-2); overflow: hidden; touch-action: none; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp) 25%, var(--bg)), color-mix(in srgb, var(--sp) 12%, var(--bg-2)), color-mix(in srgb, var(--sp) 25%, var(--bg))); }
.lf-pz { position: absolute; top: 4px; bottom: 4px; border-radius: 6px; border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 22%, transparent); transition: box-shadow .15s, border-color .15s; }
.lf-track.over .lf-pz { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 22%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 50%, transparent); }
.lf-fz { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-size: 24px; pointer-events: none; }
.lf-meter { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; }
.lf-tens.hot { animation: pulse .3s infinite; }
.lf-prog > i, .lf-tens > i { transition: none; }
.lf-holdbtn { touch-action: none; user-select: none; -webkit-user-select: none; }
.lf-result { position: relative; padding: 18px 12px; }
.lf-result.fail { border-color: var(--line-2); }
.lf-result.r-uncommon { border-color: var(--r-uncommon); }
.lf-result.r-rare { border-color: var(--r-rare); box-shadow: 0 0 22px color-mix(in srgb, var(--r-rare) 30%, transparent); }
.lf-result.r-epic, .lf-result.r-legend { border-color: var(--r-epic); box-shadow: 0 0 26px color-mix(in srgb, var(--r-epic) 35%, transparent); }
.lf-result-ico { font-size: 54px; line-height: 1.1; animation: lf-in .45s cubic-bezier(.2, 1.6, .4, 1); }
.lf-result-name { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.lf-record { position: absolute; top: 8px; right: 8px; animation: lf-pop .4s .2s both; }
.lf-journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lf-jcard { text-align: center; padding: 10px 6px; }
.lf-jcard.unknown { opacity: .6; border-style: dashed; }
.lf-jico { font-size: 30px; line-height: 1.2; }
.lf-jcard.unknown .lf-jico { filter: grayscale(1) brightness(.6); }

/* ---------- เพื่อน/ปาร์ตี้/กิลด์ ---------- */
.lf-frow .row { gap: 6px; }
.lf-job { width: 32px; height: 32px; flex: none; display: grid; place-items: center; font-size: 18px; background: var(--bg-2); border-radius: 50%; border: 1px solid var(--line-2); }
.lf-member { align-items: flex-start; }
.lf-hpsp { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0 2px; }
.lf-hpsp .bar { height: 12px; }
.lf-hpsp .bar > span { font-size: 9px; line-height: 10px; }
.lf-settings { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.lf-settings .seg { justify-self: start; flex-wrap: wrap; }
.seg button:disabled { cursor: not-allowed; opacity: .7; }
.lf-emblem { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 32px; border-radius: 12px;
  background: radial-gradient(circle at 40% 35%, var(--surface-3), var(--bg)); border: 2px solid var(--gold-2); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 25%, transparent); }
.lf-emblem.sm { width: 38px; height: 38px; font-size: 22px; border-width: 1px; border-radius: 8px; }
.lf-emblems { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-notice { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(color-mix(in srgb, var(--gold) 8%, var(--surface)), var(--surface)); }

/* ---------- จดหมาย ---------- */
.lf-mailwrap { grid-template-columns: 250px 1fr; }
.lf-maillist .list { max-height: 360px; overflow: auto; }
.lf-mail { align-items: flex-start; }
.lf-mail > .grow { display: flex; flex-direction: column; gap: 1px; }
.lf-mail.unread .lf-subj { font-weight: 700; color: var(--moon); }
.lf-mail:not(.unread) .lf-subj { color: var(--text-2); }
.lf-mico { font-size: 18px; flex: none; }
.lf-maildetail .text { color: var(--text); }
.lf-mailbody { min-height: 70px; line-height: 1.6; }
.lf-claimed { opacity: .5; }
.lf-backbtn { display: none; margin-bottom: 6px; }

/* ---------- คลัง / แลกเปลี่ยน / รายงาน ---------- */
.lf-kafra { padding: 20px 16px; }
.lf-gridbox { max-height: 250px; overflow: auto; min-height: 90px; }
.lf-gridbox.sm { max-height: 150px; min-height: 0; }
.lf-grid { gap: 4px; }
.lf-movebar { padding: 8px 10px; }
.lf-offer { min-height: calc(var(--slot) + 4px); margin-top: 8px; }
.lf-lockedcard { border-color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.lf-warnbox { padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--text-2); }
.lf-nocash { display: contents; }
.lf-chatlines { max-height: 110px; overflow: auto; margin: 4px 0 0 24px; font-family: ui-monospace, monospace; color: var(--text-2); }

/* ---------- ร้านคริสตัล ---------- */
.lf-walletbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r); border: 1px solid var(--line-2);
  background: radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--moon-glow) 22%, transparent), transparent 40%), linear-gradient(var(--surface-2), var(--surface)); }
.lf-gem { font-size: 30px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--moon-glow) 60%, transparent)); }
.lf-bal { font-size: 22px; font-weight: 800; color: var(--moon); line-height: 1.1; }
.lf-price { font-size: 18px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.lf-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lf-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px 12px; color: inherit; font: inherit; cursor: pointer; text-align: center;
  transition: transform .1s, border-color .15s, box-shadow .15s; }
.lf-pack:hover:not(:disabled) { border-color: var(--frame-hi); transform: translateY(-2px); box-shadow: var(--shadow); }
.lf-pack:disabled { cursor: default; opacity: .7; }
.lf-pack.tag-best { border-color: var(--gold-2); }
.lf-pack.tag-popular { border-color: color-mix(in srgb, var(--info) 55%, var(--line)); }
.lf-pack.tag-value { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
.lf-ribbon { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; }
.lf-pack-ico { font-size: 26px; letter-spacing: -6px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--moon-glow) 50%, transparent)); }
.lf-pack-amt { font-size: 22px; font-weight: 800; color: var(--moon); }
.lf-monthly { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.lf-legal { line-height: 1.6; }
.lf-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.lf-sitem { display: flex; flex-direction: column; justify-content: space-between; }
.lf-boxwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.lf-boxcard { padding: 16px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--r-epic) 18%, transparent), transparent 60%), var(--surface); }
.lf-boxart { font-size: 56px; line-height: 1.1; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--r-epic) 60%, transparent)); animation: lf-float 3s ease-in-out infinite; }
.lf-rates td, .lf-rates th { padding: 5px 6px; }
.lf-rates tfoot td { border-bottom: 0; }
.lf-reveal { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.lf-rcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; text-align: center; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line-2); }
.lf-reveal.anim .lf-rcard { animation: lf-flip .5s both; }
.lf-rglyph { font-size: 26px; line-height: 1.2; }
.lf-rcard.r-uncommon { border-color: var(--r-uncommon); }
.lf-rcard.r-rare { border-color: var(--r-rare); box-shadow: 0 0 10px color-mix(in srgb, var(--r-rare) 35%, transparent); }
.lf-rcard.r-epic { border-color: var(--r-epic); box-shadow: 0 0 14px color-mix(in srgb, var(--r-epic) 45%, transparent); }
.lf-rcard.r-legend { border-color: var(--r-legend); box-shadow: 0 0 18px color-mix(in srgb, var(--r-legend) 55%, transparent); }
.lf-ledger td { vertical-align: top; }

/* ขั้นตอนชำระเงิน */
.lf-summary { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.lf-summary .sep { margin: 6px 0; }
.lf-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lf-method { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg-2); cursor: pointer; font-size: 13px; }
.lf-method.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg-2)); }
.lf-method input { accent-color: var(--gold); }
.lf-mglyph { font-size: 18px; }
.lf-proc { padding: 26px 0 10px; }
.lf-spin-lg { width: 40px; height: 40px; border-width: 4px; margin: 0 auto 12px; }
.lf-qrbox { position: relative; width: 196px; margin: 10px auto; padding: 8px; border-radius: var(--r); background: var(--moon); }
.lf-qr { display: block; width: 100%; height: auto; fill: var(--bg); shape-rendering: crispEdges; }
.lf-qr .bg { fill: var(--moon); }
.lf-qrmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 4px; background: var(--sp); color: var(--moon); font: 700 11px var(--font); }
.lf-receipt-head { padding: 6px 0 10px; }
.lf-okmark { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 900;
  background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border: 2px solid var(--ok); animation: lf-in .4s cubic-bezier(.2, 1.6, .4, 1); }
.lf-receipt { padding: 10px 12px; }
.lf-receipt dd { overflow-wrap: anywhere; }

/* ---------- ช่วยเหลือ ---------- */
.lf-faq { display: flex; flex-direction: column; gap: 6px; }
.lf-faq details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.lf-faq details[open] { border-color: var(--line-2); }
.lf-faq summary { padding: 9px 12px; cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; min-height: 36px; }
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary::before { content: "▸"; color: var(--gold); transition: transform .15s; }
.lf-faq details[open] summary::before { transform: rotate(90deg); }
.lf-faq-a { padding: 0 12px 12px 30px; color: var(--text-2); line-height: 1.65; font-size: 13.5px; }
.lf-links .btn { color: var(--gold); }
.lf-legaltext ul { padding-left: 20px; margin: 6px 0; }
.lf-legaltext li { margin: 3px 0; }

/* ---------- แอนิเมชัน ---------- */
@keyframes lf-bounce { 50% { transform: translateY(-3px) scale(1.06); } }
@keyframes lf-wobble { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes lf-out { to { opacity: 0; transform: scale(1.4); } }
@keyframes lf-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes lf-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes lf-bob { 50% { transform: translateY(3px); } }
@keyframes lf-dip { 50% { transform: translateY(9px); } }
@keyframes lf-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes lf-shimmer { to { opacity: .55; transform: scaleX(.8); } }
@keyframes lf-float { 50% { transform: translateY(-5px); } }
@keyframes lf-flip { from { opacity: 0; transform: perspective(300px) rotateY(90deg) scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- มือถือ / จอเล็ก ---------- */
@media (max-width: 760px), (max-height: 480px) {
  .lf-split, .lf-pets, .lf-mailwrap, .lf-two, .lf-boxwrap { grid-template-columns: 1fr; }
  .lf-plots { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .lf-packs { grid-template-columns: repeat(2, 1fr); }
  .lf-methods { grid-template-columns: 1fr; }
  .lf-fieldset { grid-template-columns: 1fr; }
  .lf-hide-sm { display: none; }
  /* จดหมาย: เลือกแล้วแสดงเฉพาะรายละเอียด พร้อมปุ่มย้อนกลับ */
  .lf-mailwrap.has-sel .lf-maillist { display: none; }
  .lf-mailwrap:not(.has-sel) > .lf-main { display: none; }
  .lf-backbtn { display: inline-flex; }
  .lf-maillist .list { max-height: none; }
  .lf-gridbox { max-height: 180px; }
}
@media (max-width: 420px) {
  .lf-plots { grid-template-columns: repeat(3, 1fr); }
  .lf-pack-amt { font-size: 18px; }
  .lf-petorb { width: 58px; height: 58px; font-size: 32px; }
}

/* ---------- สร้างเมืองของฉัน (D-067) ---------- */
.hb-away { text-align: center; padding: 16px 8px; }
.hb-big { font-size: 46px; }
.hb-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.hb-modes { margin-bottom: 4px; }
.hb-hint { margin: 2px 0 8px; }
.hb-sel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px; }
.hb-g { font-size: 22px; }
.hb-cats { margin-bottom: 8px; }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.hb-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; text-align: center; font: inherit; }
.hb-item b { font-size: 12px; }
.hb-item:hover { border-color: var(--frame-hi); }
.hb-item.on { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
.hb-item.locked { opacity: .5; cursor: not-allowed; }
.hb-n { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 10px; color: var(--gold); }