/* Hái lộc — giữ không khí Tết đỏ vàng, dùng chữ và chi tiết của hệ ThinhStudio */
:root { --gold: #facc15; --gold-2: #fde68a; }
/* Bảng chuẩn bị: thiệp đỏ son viền vàng, các mục đánh số */
.lx-panel {
  position: fixed; inset: 0; margin: auto; width: min(560px, calc(100% - 24px)); height: fit-content; max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: 22px 22px 18px; border-radius: 22px; color: #fff; scrollbar-width: thin; scrollbar-color: rgba(250, 204, 21, .3) transparent;
  background: radial-gradient(120% 60% at 50% 0%, rgba(220, 38, 38, .35), transparent 60%), linear-gradient(180deg, rgba(76, 12, 12, .94), rgba(48, 8, 8, .95));
  border: 1px solid rgba(250, 204, 21, .35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(250, 204, 21, .08) inset;
}
.lx-panel.hidden { display: none; }
/* điện thoại: chừa dải đáy cho nút về trang chủ / chơi lại */
@media (max-width: 640px) { .lx-panel { inset: 12px 0 72px; max-height: calc(100dvh - 84px); } }
.lx-head { text-align: center; margin-bottom: 14px; }
.lx-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: rgba(253, 230, 138, .75); margin: 0 0 6px; }
.lx-title {
  margin: 0; padding-top: .14em; font-weight: 900; letter-spacing: -.045em; line-height: 1;
  font-size: clamp(42px, 11vw, 60px); color: transparent; background: linear-gradient(180deg, #fef3c7, #f59e0b); -webkit-background-clip: text; background-clip: text;
}
.lx-title span { color: #f87171; -webkit-text-fill-color: #f87171; }
.lx-sub { margin: 8px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.45; color: rgba(254, 243, 199, .7); }

.lx-sec { padding: 14px; margin-top: 12px; border-radius: 16px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(250, 204, 21, .14); }
.lx-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--gold); letter-spacing: .04em; }
.lx-label b { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--gold); color: #450a0a; font-size: 11px; }
.lx-label em { font-style: normal; color: rgba(254, 243, 199, .5); font-size: 11px; }

.lx-trees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx-tree {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 2px solid rgba(255, 255, 255, .1); color: #fff; transition: background .2s, border-color .2s, transform .1s;
}
.lx-tree:active { transform: scale(.97); }
.lx-tree b { display: block; font-size: 15px; }
.lx-tree small { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 2px; }
.lx-tree-ico { font-size: 28px; line-height: 1; transition: transform .3s; }
.lx-tree:hover .lx-tree-ico { transform: scale(1.15) rotate(-8deg); }
.lx-tree.mai.on { background: linear-gradient(135deg, rgba(234, 179, 8, .45), rgba(180, 83, 9, .35)); border-color: #facc15; box-shadow: 0 0 20px rgba(250, 204, 21, .25); }
.lx-tree.dao.on { background: linear-gradient(135deg, rgba(236, 72, 153, .45), rgba(157, 23, 77, .35)); border-color: #f472b6; box-shadow: 0 0 20px rgba(244, 114, 182, .25); }
.lx-tree.on small { color: rgba(255, 255, 255, .8); }

.lx-denoms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lx-denom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 12px; background: rgba(69, 10, 10, .6); border: 1px solid rgba(220, 38, 38, .35); }
.lx-denom-big { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(202, 138, 4, .25), rgba(69, 10, 10, .6)); border-color: rgba(250, 204, 21, .5); }
/* nhãn mệnh giá vẽ như phong bao đỏ nhỏ có nắp vàng */
.lx-note {
  position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-width: 54px; height: 34px; padding: 6px 8px 0;
  border-radius: 6px; background: linear-gradient(180deg, #dc2626, #991b1b); color: #fde68a; font-family: var(--mono); font-weight: 700; font-size: 13px; text-align: center; line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.lx-note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 6px 6px 50% 50%; background: #facc15; opacity: .85; }
.lx-note small { font-size: 8px; font-weight: 500; letter-spacing: .08em; margin-top: 2px; color: #fef3c7; text-transform: uppercase; }
.lx-denom-big .lx-note { min-width: 74px; height: 40px; font-size: 15px; }
.lx-note-wish { background: linear-gradient(180deg, #facc15, #ca8a04); color: #7f1d1d; }
.lx-note-wish::before { background: #b91c1c; }

.lx-step { display: inline-flex; align-items: center; border-radius: 10px; overflow: hidden; border: 1px solid rgba(250, 204, 21, .35); background: rgba(0, 0, 0, .25); }
.lx-step button { width: 30px; height: 34px; color: var(--gold); font-size: 18px; font-weight: 700; cursor: pointer; transition: background .15s; }
.lx-step button:hover { background: rgba(250, 204, 21, .15); }
.lx-step button:active { background: rgba(250, 204, 21, .3); }
.lx-step input {
  width: 38px; height: 34px; border: 0; background: transparent; color: #fde68a; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 15px; outline: none; -moz-appearance: textfield;
}
.lx-step input::-webkit-outer-spin-button, .lx-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lx-denom-big .lx-step button, .lx-denom-big .lx-step input { height: 40px; }
.lx-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: rgba(254, 243, 199, .8); cursor: pointer; }
.lx-check input { width: 16px; height: 16px; accent-color: #facc15; }

.lx-wishrow { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.lx-wishnote { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(254, 243, 199, .6); }
.lx-wishcard, .lx-prize-wish {
  position: relative; margin: 12px 0 0; padding: 14px 14px 12px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); color: #7f1d1d; box-shadow: inset 0 0 0 1px rgba(161, 98, 7, .35), 0 6px 18px rgba(0, 0, 0, .25);
}
.lx-wishcard::before, .lx-prize-wish::before { content: "\201C"; position: absolute; right: 12px; top: -6px; font: 900 56px/1 Georgia, serif; color: rgba(185, 28, 28, .18); }
.lx-wishtag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #b91c1c; color: #fef3c7; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.lx-wishcard blockquote, .lx-prize-wish blockquote { margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45; min-height: 2.9em; }
.lx-wishnext { margin-top: 8px; font-family: var(--mono); font-size: 11px; color: #991b1b; cursor: pointer; opacity: .8; }
.lx-wishnext:hover { opacity: 1; text-decoration: underline; }

.lx-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 10px; font-family: var(--mono); font-size: 13px; color: rgba(254, 243, 199, .7); }
.lx-total b { color: var(--gold); font-size: 16px; }
.lx-start {
  display: block; width: 100%; padding: 15px; border-radius: 14px; cursor: pointer; color: #450a0a; font-weight: 800; font-size: 17px;
  background: linear-gradient(90deg, #eab308, #fde047, #eab308); box-shadow: 0 10px 30px rgba(234, 179, 8, .35); transition: transform .1s, filter .2s;
}
.lx-start:hover { filter: brightness(1.06); }
.lx-start:active { transform: scale(.98); }
.lx-start:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; }
.lx-start .arrow { display: inline-block; transition: transform .2s; }
.lx-start:hover .arrow { transform: translateX(3px); }
@media (max-width: 420px) {
  .lx-panel { padding: 16px 12px 12px; }
  .lx-sec { padding: 12px 10px; }
  .lx-tree { padding: 10px 8px; gap: 8px; }
  .lx-tree-ico { font-size: 24px; }
  .lx-denoms { gap: 6px; }
  .lx-note { min-width: 46px; font-size: 12px; }
  .lx-step button { width: 26px; }
  .lx-step input { width: 30px; }
  .lx-wishrow { grid-template-columns: 1fr; gap: 6px; }
}

/* Thẻ nhận lộc */
.lx-prize {
  width: min(380px, 100%); padding: 26px 22px 20px; border-radius: 28px; text-align: center; color: #fff;
  background: radial-gradient(100% 60% at 50% 0%, #ef4444, transparent 70%), linear-gradient(180deg, #b91c1c, #7f1d1d);
  border: 3px solid #facc15; box-shadow: 0 0 60px rgba(250, 204, 21, .35);
}
.lx-prize-ico { font-size: 64px; line-height: 1; }
.lx-prize-title { margin: 8px 0 14px; font-size: 28px; font-weight: 900; color: #fde047; text-transform: uppercase; letter-spacing: -.01em; }
.lx-prize-box { padding: 14px 8px; border-radius: 16px; background: rgba(69, 10, 10, .55); border: 1px solid rgba(250, 204, 21, .3); }
.lx-prize-cap { display: block; font-family: var(--mono); font-size: 11px; color: rgba(253, 224, 71, .7); text-transform: uppercase; letter-spacing: .1em; }
.lx-prize-amount { margin-top: 4px; font-size: 34px; font-weight: 900; color: #facc15; }
.lx-prize-wish { text-align: left; margin-bottom: 16px; }
.lx-prize .lx-start { margin-top: 4px; }
.lx-pill { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }

.lx-home, .lx-fab {
  position: fixed; bottom: 16px; z-index: 60; height: 44px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 12px; background: rgba(15, 23, 42, .45); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: background .2s, transform .1s;
}
.lx-home { left: 16px; padding: 0 14px; font-family: var(--mono); font-weight: 700; font-size: 14px; text-decoration: none; }
.lx-home b { color: #7dd3fc; }
.lx-home small { color: rgba(255, 255, 255, .55); font-weight: 500; font-size: 12px; }
.lx-fab { right: 16px; width: 44px; justify-content: center; font-size: 17px; cursor: pointer; }
.lx-home:hover, .lx-fab:hover { background: rgba(15, 23, 42, .65); }
.lx-fab:active { transform: scale(.92); }
@media (max-width: 420px) { .lx-home small { display: none; } }

/* Thanh chọn góc nhìn camera */
.lx-views {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: rgba(15, 23, 42, .5); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.lx-views::-webkit-scrollbar { display: none; }
.lx-views button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, .85); cursor: pointer; transition: background .2s, color .2s;
}
.lx-views button:hover { background: rgba(255, 255, 255, .12); }
.lx-views button.on { background: linear-gradient(180deg, #fde68a, #f59e0b); color: #450a0a; font-weight: 700; }
@media (max-width: 520px) {
  .lx-views button { padding: 0 11px; }
  .lx-views button span { display: none; }
  .lx-views button.on span { display: inline; }
}
@media (max-width: 520px) { .lx-hint-zoom { display: none; } }

/* Khi chơi: một dải đáy thẳng hàng với 2 nút góc; trên điện thoại dải góc nhìn nằm ngay trên */
.lx-dock { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.lx-dock .lx-views { height: 44px; align-items: center; }
.lx-hint { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: #3f2e14; text-shadow: 0 1px 6px rgba(255, 250, 235, .95); transition: opacity .8s; }
.lx-hint.gone { opacity: 0; }
.lx-count {
  font-family: var(--mono); font-size: 13px; color: #fef3c7; padding: 8px 16px; border-radius: 999px;
  background: rgba(69, 10, 10, .55); border: 1px solid rgba(250, 204, 21, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lx-count b { color: var(--gold); font-size: 15px; }
@media (max-width: 640px) { .lx-dock { bottom: 72px; } }

/* Nền toàn cảnh bám theo camera: lixi.js đặt kích thước và vị trí bằng transform */
.lx-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #4a3424; } /* màu trần (bg-lobby.svg) */
.lx-bg-pano { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/lixi/bg-lobby.svg?v1') repeat-x 0 0 / auto 100%; will-change: transform; }
.lx-bg-floor { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: #cdbfa9; will-change: transform; }
.lx-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 60%, rgba(60, 50, 30, .18) 100%); }