/* ===== Game Thi Kinh Thánh — giao diện ===== */
:root {
--bg0: #120c08;
--bg1: #1d1410;
--bg2: #2a1d14;
--ink: #2b1a0e;
--paper: #f4e7c8;
--paper2: #e8d5a8;
--gold: #e8c46a;
--gold2: #b8862f;
--gold3: #7a5418;
--text: #f6ead0;
--muted: #c7b38c;
--t0: #3fae5a; --t0d: #1d5a2c; --t0l: #9be3a8;
--t1: #3b7fe0; --t1d: #173a78; --t1l: #a9ccff;
--t2: #9a4fe0; --t2d: #46197a; --t2l: #dcb5ff;
--t3: #f0b52a; --t3d: #8a5a07; --t3l: #fff0b0;
--ok: #4fd17a; --bad: #e0574f;
--radius: 14px;
--font-ui: 'Be Vietnam Pro', system-ui, sans-serif;
--font-title: 'Playfair Display', 'Be Vietnam Pro', serif;
--font-serif: 'Lora', 'Playfair Display', Georgia, serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
font-family: var(--font-ui);
color: var(--text);
background: var(--bg0) url('../assets/bg-landscape.webp') center/cover fixed;
overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
/* Khung app dạng điện thoại, giữa màn hình trên máy tính */
#app {
position: relative;
width: 100%; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto;
display: flex; flex-direction: column;
background:
radial-gradient(ellipse at 50% 35%, rgba(232,196,106,.16), transparent 60%),
linear-gradient(180deg, rgba(18,12,8,.25), rgba(18,12,8,.55)),
url('../assets/bg-portrait.webp') center/cover,
radial-gradient(ellipse at 50% 0%, #3a2616, #120c08 75%);
box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 0 1px rgba(232,196,106,.18);
overflow: hidden;
}
#app::before { /* bụi sáng */
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0;
background-image:
radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,230,160,.7), transparent),
radial-gradient(1px 1px at 78% 14%, rgba(255,230,160,.6), transparent),
radial-gradient(1.5px 1.5px at 66% 62%, rgba(255,230,160,.5), transparent),
radial-gradient(1px 1px at 30% 80%, rgba(255,230,160,.6), transparent),
radial-gradient(1.2px 1.2px at 90% 44%, rgba(255,230,160,.5), transparent),
radial-gradient(1px 1px at 46% 36%, rgba(255,230,160,.5), transparent);
animation: drift 14s linear infinite alternate;
}
@keyframes drift { to { transform: translateY(-18px); } }
/* ===== Thanh trên ===== */
.topbar {
position: relative; z-index: 5; display: flex; align-items: center; gap: 10px;
padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
background: linear-gradient(180deg, rgba(10,6,3,.92), rgba(10,6,3,.6));
border-bottom: 1px solid rgba(232,196,106,.25);
}
.avatar {
width: 40px; height: 40px; border-radius: 50%; flex: none;
background: url('../assets/emblem.webp') center/82% no-repeat, radial-gradient(circle, #4a3018, #1d1208);
border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(232,196,106,.4);
}
.who { flex: 1; min-width: 0; line-height: 1.15; }
.who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { color: var(--gold); font-size: 11.5px; }
.stars { letter-spacing: 1px; font-size: 11px; }
.stars i { font-style: normal; color: #5a4630; }
.stars i.on { color: var(--gold); text-shadow: 0 0 6px rgba(232,196,106,.8); }
.gold-pill {
display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 99px;
background: linear-gradient(180deg, #3a2614, #1c1108); border: 1px solid var(--gold2);
font-weight: 700; font-size: 14px; color: var(--gold);
}
.coin {
width: 20px; height: 20px; border-radius: 50%; display: inline-block; flex: none;
background: radial-gradient(circle at 35% 30%, #fff6c8, #f0c44a 40%, #a26a10 100%);
box-shadow: inset 0 0 0 2px rgba(122,84,24,.6), 0 0 6px rgba(240,196,74,.5);
}
.icon-btn {
width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(232,196,106,.35);
background: rgba(0,0,0,.35); color: var(--gold); display: grid; place-items: center;
}
.icon-btn svg { width: 20px; height: 20px; }
/* ===== Vùng màn hình ===== */
#screen {
position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 14px 14px 18px; scrollbar-width: thin; scrollbar-color: var(--gold3) transparent;
}
.screen-title {
font-family: var(--font-title); font-weight: 800; font-size: 24px; margin: 4px 0 4px;
background: linear-gradient(180deg, #fff3c4, #e8c46a 55%, #a87526);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: 0 2px 12px rgba(232,196,106,.15);
}
.screen-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.section-h {
display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
font-family: var(--font-title); font-size: 17px; color: var(--gold); font-weight: 700;
}
.section-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,196,106,.5), transparent); }
/* ===== Thanh điều hướng dưới ===== */
.nav {
position: relative; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr);
padding: 6px 6px max(6px, env(safe-area-inset-bottom));
background: linear-gradient(0deg, rgba(10,6,3,.97), rgba(20,12,6,.9));
border-top: 1px solid rgba(232,196,106,.3);
}
.nav button {
background: none; border: 0; color: var(--muted); display: flex; flex-direction: column;
align-items: center; gap: 2px; padding: 6px 0 4px; font-size: 10.5px; font-weight: 600; border-radius: 10px;
position: relative;
}
.nav button svg { width: 26px; height: 26px; transition: transform .2s; }
.nav button.on { color: var(--gold); }
.nav button.on svg { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 6px rgba(232,196,106,.7)); }
.nav button.on::before {
content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 3px;
background: var(--gold); box-shadow: 0 0 10px var(--gold);
}
.nav .badge {
position: absolute; top: 2px; right: 22%; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
background: var(--bad); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700;
}
/* ===== Nút ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; font-size: 15px;
color: #2b1806; position: relative;
background: linear-gradient(180deg, #fff1b8, #f0c45a 45%, #c48a2a);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(122,84,24,.6), 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px #7a5418;
transition: transform .08s, filter .15s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { filter: grayscale(.9) brightness(.6); cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.big { padding: 15px 20px; font-size: 17px; border-radius: 14px; }
.btn.ghost {
color: var(--gold); background: rgba(0,0,0,.35);
box-shadow: inset 0 0 0 1px rgba(232,196,106,.55);
}
.btn.green { background: linear-gradient(180deg, #c8f5cf, #4fbf6a 50%, #2a7a3d); color: #062410; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.45), 0 0 0 1px #1d5a2c; }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
/* ===== Bảng / ô ===== */
.panel {
position: relative; border-radius: var(--radius); padding: 14px;
background: linear-gradient(180deg, rgba(48,32,18,.88), rgba(24,15,8,.92));
border: 1px solid rgba(232,196,106,.32);
box-shadow: inset 0 1px 0 rgba(255,230,160,.12), 0 6px 20px rgba(0,0,0,.35);
}
.panel + .panel { margin-top: 12px; }
.panel.paper {
color: var(--ink);
background: radial-gradient(ellipse at 30% 20%, #fbf2da, #efdcae 70%, #e2c88e);
border: 1px solid #b8862f;
}
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px;
font-size: 12px; font-weight: 600; background: rgba(0,0,0,.35); color: var(--muted);
border: 1px solid rgba(232,196,106,.25);
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
flex: 1; min-width: 0; padding: 9px 6px; border-radius: 10px; font-size: 13px; font-weight: 600;
background: rgba(0,0,0,.35); color: var(--muted); border: 1px solid rgba(232,196,106,.22);
}
.seg button.on { color: #2b1806; background: linear-gradient(180deg, #ffeeb0, #e2b04c); border-color: #f6d27a; box-shadow: 0 0 12px rgba(232,196,106,.35); }
.seg.tiers button.on.t0 { background: linear-gradient(180deg, #c8f5cf, var(--t0)); border-color: var(--t0l); }
.seg.tiers button.on.t1 { background: linear-gradient(180deg, #d6e7ff, var(--t1)); border-color: var(--t1l); color: #071a3a; }
.seg.tiers button.on.t2 { background: linear-gradient(180deg, #ecd8ff, var(--t2)); border-color: var(--t2l); color: #1e0638; }
.seg.tiers button.on.t3 { background: linear-gradient(180deg, #fff3c4, var(--t3)); border-color: var(--t3l); }
select, input[type=text], input[type=search], input[type=password], textarea {
width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px;
background: rgba(0,0,0,.4); color: var(--text); border: 1px solid rgba(232,196,106,.3);
}
select option { background: #1d1410; }
label.lbl { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 6px; font-weight: 600; letter-spacing: .02em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.center { text-align: center; }
.gold { color: var(--gold); }
/* ===== Trang chủ ===== */
.hero { text-align: center; padding: 8px 0 4px; }
.hero .emblem {
width: 104px; height: 104px; margin: 0 auto 4px;
background: url('../assets/emblem.webp') center/contain no-repeat;
filter: drop-shadow(0 0 22px rgba(240,196,74,.45));
animation: floaty 4s ease-in-out infinite;
}
.hero .emblem.fallback { display: grid; place-items: center; }
.hero h1 {
font-family: var(--font-title); font-weight: 900; font-size: 30px; line-height: 1.1; margin: 4px 0 2px;
background: linear-gradient(180deg, #fff7d6, #f0c45a 50%, #a8701e);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.6));
}
.hero p { margin: 0; color: var(--muted); font-size: 13px; }
@keyframes floaty { 50% { transform: translateY(-6px); } }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.mode {
position: relative; overflow: hidden; border-radius: 16px; padding: 14px 12px 12px; text-align: left; min-height: 132px;
border: 1px solid rgba(232,196,106,.45); color: var(--text);
background: linear-gradient(160deg, rgba(70,46,22,.95), rgba(26,16,8,.95));
box-shadow: inset 0 1px 0 rgba(255,230,160,.18), 0 8px 22px rgba(0,0,0,.45);
display: flex; flex-direction: column; gap: 4px;
}
.mode.wide { grid-column: span 2; min-height: 84px; flex-direction: row; align-items: center; gap: 14px; }
.mode .ico { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.mode .ico img, .mode .ico svg { width: 100%; height: 100%; object-fit: contain; }
.mode b { font-family: var(--font-title); font-size: 18px; color: #ffe9a8; }
.mode span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.mode::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,240,190,.12) 50%, transparent 60%); transform: translateX(-100%); animation: sheen 5s ease-in-out infinite; }
.mode.pvp { background: linear-gradient(160deg, rgba(110,40,30,.92), rgba(30,10,8,.95)); border-color: rgba(255,170,120,.5); }
.mode.practice { background: linear-gradient(160deg, rgba(40,80,50,.92), rgba(10,26,14,.95)); border-color: rgba(150,230,160,.45); }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
.daily { display: flex; gap: 6px; margin-top: 8px; }
.daily i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); }
.daily i.on { background: linear-gradient(90deg, #f0c45a, #ffe9a8); box-shadow: 0 0 8px rgba(240,196,90,.6); }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,196,106,.18); }
.stat b { display: block; font-size: 20px; color: var(--gold); font-family: var(--font-ui); font-weight: 800; }
.stat span { font-size: 11px; color: var(--muted); }
/* ===== THẺ CÂU HỎI 5:7 ===== */
.card {
--tc: var(--t0); --td: var(--t0d); --tl: var(--t0l);
position: relative; aspect-ratio: 5 / 7; width: 100%;
container-type: inline-size; perspective: 900px; user-select: none;
}
.card.t1 { --tc: var(--t1); --td: var(--t1d); --tl: var(--t1l); }
.card.t2 { --tc: var(--t2); --td: var(--t2d); --tl: var(--t2l); }
.card.t3 { --tc: var(--t3); --td: var(--t3d); --tl: var(--t3l); }
.card .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.card.flipped .inner { transform: rotateY(180deg); }
.card .face {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: calc(5.5 * var(--cq, 1cqw)); overflow: hidden; backface-visibility: hidden;
box-shadow: 0 calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) rgba(0,0,0,.55);
}
.card .back { transform: rotateY(180deg); }
.card.backonly .front { transform: rotateY(180deg); }
.card.backonly .back { transform: none; }
/* Mặt trước: khung ảnh Muse nếu có, nếu không dùng khung CSS */
.front .frame {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 50%),
linear-gradient(160deg, var(--tl), var(--tc) 35%, var(--td));
}
.front .frame::before { /* viền vàng chạm */
content: ''; position: absolute; top: calc(3.2 * var(--cq, 1cqw)); right: calc(3.2 * var(--cq, 1cqw)); bottom: calc(3.2 * var(--cq, 1cqw)); left: calc(3.2 * var(--cq, 1cqw)); border-radius: calc(3.5 * var(--cq, 1cqw));
border: calc(1.4 * var(--cq, 1cqw)) solid transparent;
background: linear-gradient(135deg, #fff3c4, #c48a2a 30%, #ffe6a0 50%, #8a5a14 75%, #f6d27a) border-box;
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.front .frame::after { /* đá quý dưới */
content: ''; position: absolute; left: 50%; bottom: calc(2.4 * var(--cq, 1cqw)); width: calc(11 * var(--cq, 1cqw)); height: calc(11 * var(--cq, 1cqw)); transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, var(--tl) 25%, var(--tc) 55%, var(--td));
box-shadow: 0 0 0 calc(1.2 * var(--cq, 1cqw)) #d9a845, 0 0 0 calc(1.8 * var(--cq, 1cqw)) #6b4410, 0 0 calc(4 * var(--cq, 1cqw)) var(--tc);
}
.front .frame.img { background: center/100% 100% no-repeat; }
.front .frame.img::before, .front .frame.img::after { display: none; }
.front .paper {
position: absolute; left: calc(12 * var(--cq, 1cqw)); right: calc(12 * var(--cq, 1cqw)); top: calc(20 * var(--cq, 1cqw)); bottom: calc(22 * var(--cq, 1cqw)); border-radius: calc(2 * var(--cq, 1cqw));
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 40% 30%, #fdf6e2, #f1e0b6 65%, #dcc08a);
box-shadow: inset 0 0 calc(4 * var(--cq, 1cqw)) rgba(122,84,24,.45);
color: var(--ink); display: flex; flex-direction: column; padding: calc(4 * var(--cq, 1cqw)) calc(4.5 * var(--cq, 1cqw)); text-align: center;
}
/* Vùng chữ nằm đúng ô giấy da của từng khung Muse (đo trên ảnh frame-*.webp, % theo bề rộng / chiều cao thẻ).
Không vẽ giấy riêng: chữ in thẳng lên giấy của khung */
.card .front .frame.img ~ .paper { background: none; box-shadow: none; padding: 0 1%; left: 25%; right: 25%; top: 27%; bottom: 26%; }
.card.t1 .front .frame.img ~ .paper { left: 25%; right: 25%; top: 25.5%; bottom: 28%; }
.card.t2 .front .frame.img ~ .paper { left: 22%; right: 22%; top: 22.5%; bottom: 23%; }
.card.t3 .front .frame.img ~ .paper { left: 23%; right: 23%; top: 26%; bottom: 33%; } /* ảnh khung này có lề trong suốt */
.front .frame.img ~ .paper .bk { margin: 0 -7%; }
.card.t3 .front .frame.img ~ .paper .bk { margin: 0 -13%; }
.front .frame.img ~ .paper .tierlbl { font-size: calc(4 * var(--cq, 1cqw)); }
.front .bookicon {
position: absolute; left: 50%; top: calc(6.5 * var(--cq, 1cqw)); width: calc(18 * var(--cq, 1cqw)); height: calc(11 * var(--cq, 1cqw)); transform: translateX(-50%);
color: #ffe9a8; filter: drop-shadow(0 0 calc(1.5 * var(--cq, 1cqw)) rgba(255,233,168,.8));
}
.front .frame.img ~ .bookicon { display: none; }
.paper .bk { /* ruy băng màu cấp thẻ, hai đầu cắt chữ V */
position: relative; margin: 0 calc(-5 * var(--cq, 1cqw)); padding: calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) calc(1.7 * var(--cq, 1cqw));
font-family: var(--font-title); font-weight: 900; font-size: calc(6.2 * var(--cq, 1cqw)); line-height: 1.08; letter-spacing: .01em;
background: linear-gradient(180deg, color-mix(in srgb, var(--td) 85%, #fff), color-mix(in srgb, var(--td) 75%, #000));
border-top: calc(.5 * var(--cq, 1cqw)) solid #e8c46a; border-bottom: calc(.5 * var(--cq, 1cqw)) solid #8a5a14;
clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
box-shadow: inset 0 0 calc(3 * var(--cq, 1cqw)) rgba(0,0,0,.5);
}
.paper .bk span { /* chữ vàng ép kim */
color: transparent; background-clip: text; -webkit-background-clip: text;
background-image: linear-gradient(180deg, #fffbe6 0%, #ffe28a 48%, #d9a23a 58%, #fff0b8 100%);
filter: drop-shadow(0 calc(.3 * var(--cq, 1cqw)) 0 rgba(0,0,0,.7));
}
.card.t3 .paper .bk { background: linear-gradient(180deg, #6e1d0c, #3a0904); }
.paper .ref {
margin-top: calc(2 * var(--cq, 1cqw)); font-family: var(--font-serif); font-style: italic; font-variant-numeric: lining-nums; font-weight: 700; font-size: calc(5.6 * var(--cq, 1cqw));
color: color-mix(in srgb, var(--td) 75%, #2a1608); letter-spacing: .02em;
}
.paper .ref::before, .paper .ref::after { content: '✦'; font-style: normal; font-size: .62em; color: var(--tc); margin: 0 calc(1.6 * var(--cq, 1cqw)); vertical-align: .18em; }
.paper .meta {
margin-top: calc(1 * var(--cq, 1cqw)); font-size: calc(3.7 * var(--cq, 1cqw)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6430;
}
.paper .q {
flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: calc(1.5 * var(--cq, 1cqw));
font-family: var(--font-serif); font-size: calc(6.4 * var(--cq, 1cqw)); line-height: 1.32; font-weight: 600; color: #24140a;
}
.paper .q.small { font-size: calc(4.9 * var(--cq, 1cqw)); font-weight: 500; line-height: 1.28; }
.paper .q:empty::before { /* thẻ chưa lật câu hỏi: hoa văn giữa */
content: ''; width: calc(44 * var(--cq, 1cqw)); height: calc(14.6 * var(--cq, 1cqw)); opacity: .7;
background: linear-gradient(180deg, var(--tl), var(--tc) 60%, var(--td));
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.paper .tierlbl {
align-self: center; margin-top: calc(1.5 * var(--cq, 1cqw)); padding: calc(.9 * var(--cq, 1cqw)) calc(4.5 * var(--cq, 1cqw)) calc(1 * var(--cq, 1cqw)); border-radius: calc(1 * var(--cq, 1cqw));
font-family: var(--font-title); font-size: calc(4.4 * var(--cq, 1cqw)); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff;
background: linear-gradient(180deg, var(--tl) -60%, var(--tc) 45%, var(--td));
border: calc(.45 * var(--cq, 1cqw)) solid #f3d585; box-shadow: 0 calc(.6 * var(--cq, 1cqw)) calc(1.5 * var(--cq, 1cqw)) rgba(0,0,0,.35), inset 0 calc(.5 * var(--cq, 1cqw)) 0 rgba(255,255,255,.35);
text-shadow: 0 calc(.4 * var(--cq, 1cqw)) 0 rgba(0,0,0,.45);
}
/* Điểm của thẻ (10/20/30/50) — viên ngọc góc trên trái như chỉ số sức mạnh TCG */
.card .pts {
position: absolute; left: calc(4.5 * var(--cq, 1cqw)); top: calc(4.5 * var(--cq, 1cqw)); z-index: 2; width: calc(15 * var(--cq, 1cqw)); height: calc(15 * var(--cq, 1cqw)); border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-ui); font-weight: 800; font-size: calc(6.2 * var(--cq, 1cqw)); letter-spacing: -.02em; color: #fff; text-shadow: 0 calc(.4 * var(--cq, 1cqw)) 0 rgba(0,0,0,.6), 0 0 calc(2 * var(--cq, 1cqw)) var(--tc);
background: radial-gradient(circle at 35% 28%, #fff 0, var(--tl) 18%, var(--tc) 52%, var(--td) 100%);
box-shadow: 0 0 0 calc(.8 * var(--cq, 1cqw)) #f0cf72, 0 0 0 calc(1.4 * var(--cq, 1cqw)) #5a3608, 0 calc(1 * var(--cq, 1cqw)) calc(3 * var(--cq, 1cqw)) rgba(0,0,0,.6), 0 0 calc(4 * var(--cq, 1cqw)) var(--tc);
}
.card.big .pts { width: calc(13 * var(--cq, 1cqw)); height: calc(13 * var(--cq, 1cqw)); font-size: calc(5.8 * var(--cq, 1cqw)); }
.card.t3 .pts { left: calc(9 * var(--cq, 1cqw)); top: calc(7.5 * var(--cq, 1cqw)); }
.card .special-band {
position: absolute; left: calc(6 * var(--cq, 1cqw)); right: calc(6 * var(--cq, 1cqw)); top: calc(15 * var(--cq, 1cqw)); z-index: 3; text-align: center;
font-size: calc(4.6 * var(--cq, 1cqw)); font-weight: 800; color: #2b1806; padding: calc(.8 * var(--cq, 1cqw)); border-radius: calc(1 * var(--cq, 1cqw));
background: linear-gradient(90deg, #fff, #ffe9a8, #fff); box-shadow: 0 0 calc(3 * var(--cq, 1cqw)) #fff;
}
/* Holographic lấp lánh cho Sử thi và Huyền thoại */
.card.t2 .front::after, .card.t3 .front::after, .card.holo .front::after {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
background: linear-gradient(115deg, transparent 25%, rgba(255,120,220,.5) 38%, rgba(120,220,255,.5) 46%, rgba(255,240,140,.55) 54%, transparent 66%);
background-size: 250% 250%; animation: holo 4.5s ease-in-out infinite;
}
.card.t3 .front::after { opacity: .7; }
@keyframes holo { 0% { background-position: 100% 100%; } 50% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
.card.t3 .face { box-shadow: 0 0 calc(6 * var(--cq, 1cqw)) rgba(240,181,42,.55), 0 calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) rgba(0,0,0,.55); }
.card.t2 .face { box-shadow: 0 0 calc(5 * var(--cq, 1cqw)) rgba(154,79,224,.45), 0 calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) rgba(0,0,0,.55); }
/* Mặt sau */
.back .bkimg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: center/100% 100% no-repeat; }
.back .bkcss {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background:
repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,230,160,.10) 0 6deg, transparent 6deg 15deg),
radial-gradient(circle at 50% 50%, var(--tl) 0, var(--tc) 22%, var(--td) 70%, #0b0603);
}
.back .bkcss::before {
content: ''; position: absolute; top: calc(4 * var(--cq, 1cqw)); right: calc(4 * var(--cq, 1cqw)); bottom: calc(4 * var(--cq, 1cqw)); left: calc(4 * var(--cq, 1cqw)); border-radius: calc(3.5 * var(--cq, 1cqw));
border: calc(1.2 * var(--cq, 1cqw)) double #e8c46a; box-shadow: inset 0 0 0 calc(2.5 * var(--cq, 1cqw)) rgba(0,0,0,.18);
}
.back .bkcss::after {
content: ''; position: absolute; left: 50%; top: 50%; width: calc(46 * var(--cq, 1cqw)); height: calc(46 * var(--cq, 1cqw)); transform: translate(-50%,-50%) rotate(45deg);
border: calc(1 * var(--cq, 1cqw)) solid rgba(255,233,168,.75); box-shadow: 0 0 calc(5 * var(--cq, 1cqw)) rgba(255,233,168,.5), inset 0 0 calc(5 * var(--cq, 1cqw)) rgba(255,233,168,.4);
}
.back .bkbook { position: absolute; left: 50%; top: 50%; width: calc(30 * var(--cq, 1cqw)); transform: translate(-50%,-50%); color: #fff3c4; filter: drop-shadow(0 0 calc(3 * var(--cq, 1cqw)) #fff3c4); }
.back .bkimg + .bkcss, .back .bkimg ~ .bkbook { display: none; }
.back .tiertag {
position: absolute; left: 50%; bottom: calc(7 * var(--cq, 1cqw)); transform: translateX(-50%); z-index: 2;
font-size: calc(5.5 * var(--cq, 1cqw)); font-weight: 800; letter-spacing: .08em; color: #fff; text-transform: uppercase;
padding: calc(1 * var(--cq, 1cqw)) calc(4 * var(--cq, 1cqw)); border-radius: 99px; background: rgba(0,0,0,.45); border: calc(.6 * var(--cq, 1cqw)) solid var(--tl);
text-shadow: 0 0 calc(2 * var(--cq, 1cqw)) var(--tc); white-space: nowrap;
}
.back .spmark { position: absolute; top: calc(6 * var(--cq, 1cqw)); right: calc(7 * var(--cq, 1cqw)); z-index: 2; font-size: calc(9 * var(--cq, 1cqw)); color: #fff; text-shadow: 0 0 calc(3 * var(--cq, 1cqw)) #fff, 0 0 calc(6 * var(--cq, 1cqw)) var(--tc); }
/* Thẻ chức năng */
.card.fn { --tc: #c48a2a; --td: #5a3608; --tl: #ffe9a8; }
.paper .fnicon { width: calc(46 * var(--cq, 1cqw)); height: calc(46 * var(--cq, 1cqw)); margin: calc(2 * var(--cq, 1cqw)) auto calc(1 * var(--cq, 1cqw)); }
.paper .fnicon img, .paper .fnicon svg { width: 100%; height: 100%; object-fit: contain; }
.paper .fnname { font-family: var(--font-title); font-weight: 900; font-size: calc(7.2 * var(--cq, 1cqw)); line-height: 1.12; color: #4a2a0c; }
.paper .fndesc { font-family: var(--font-serif); font-size: calc(5 * var(--cq, 1cqw)); line-height: 1.3; margin-top: calc(1.5 * var(--cq, 1cqw)); color: #3a2210; }
.card .count {
position: absolute; top: calc(-2 * var(--cq, 1cqw)); right: calc(-2 * var(--cq, 1cqw)); z-index: 4; min-width: calc(15 * var(--cq, 1cqw)); height: calc(15 * var(--cq, 1cqw)); border-radius: 99px;
display: grid; place-items: center; padding: 0 calc(3 * var(--cq, 1cqw)); font-weight: 800; font-size: calc(7.5 * var(--cq, 1cqw)); color: #2b1806;
background: radial-gradient(circle at 35% 30%, #fff6c8, #f0c44a 50%, #a26a10); box-shadow: 0 0 0 calc(.8 * var(--cq, 1cqw)) #5a3608, 0 calc(1 * var(--cq, 1cqw)) calc(3 * var(--cq, 1cqw)) rgba(0,0,0,.5);
}
.card .newtag {
position: absolute; top: calc(3 * var(--cq, 1cqw)); right: calc(-2 * var(--cq, 1cqw)); z-index: 4; font-size: calc(5.5 * var(--cq, 1cqw)); font-weight: 900; color: #fff; padding: calc(1 * var(--cq, 1cqw)) calc(3 * var(--cq, 1cqw)); border-radius: calc(1.5 * var(--cq, 1cqw));
background: linear-gradient(180deg, #ff7a6a, #c22a1e); box-shadow: 0 calc(1 * var(--cq, 1cqw)) calc(3 * var(--cq, 1cqw)) rgba(0,0,0,.5); transform: rotate(8deg);
}
.card .newtag.dup { background: linear-gradient(180deg, #8a7a66, #4a3e30); }
/* Lưới thẻ */
.cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cardgrid.four { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cardgrid .card { cursor: pointer; transition: transform .15s; }
.cardgrid .card:active { transform: scale(.96); }
.cardgrid .card.sel { transform: translateY(-4px); }
.cardgrid .card.sel .face { box-shadow: 0 0 0 calc(1.8 * var(--cq, 1cqw)) #fff3c4, 0 0 calc(8 * var(--cq, 1cqw)) var(--gold); }
.cardgrid .card.dim { opacity: .38; }
/* ===== Màn chơi (luyện tập + đấu) ===== */
.play { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.hud { display: flex; align-items: center; gap: 10px; }
.progress { display: flex; gap: 5px; flex: 1; }
.progress i { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); }
.progress i.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.progress i.bad { background: var(--bad); }
.progress i.cur { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.timer { position: relative; width: 52px; height: 52px; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 5; }
.timer .tbg { stroke: rgba(255,255,255,.12); }
.timer .tfg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.timer.warn .tfg { stroke: var(--bad); }
.timer b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.timer.warn b { color: #ff9a92; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.15); } }
.qcard-wrap { width: min(74%, 300px); margin: 0 auto; }
.qcard-wrap .card.big .paper { top: calc(18 * var(--cq, 1cqw)); bottom: calc(19 * var(--cq, 1cqw)); left: calc(10 * var(--cq, 1cqw)); right: calc(10 * var(--cq, 1cqw)); }
.qcard-wrap .paper .q { font-size: calc(7.6 * var(--cq, 1cqw)); font-weight: 600; line-height: 1.34; }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ans {
position: relative; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 58px;
padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink);
background: linear-gradient(180deg, #fbf2da, #ead6a6); border: 2px solid #b8862f;
box-shadow: inset 0 -3px 0 rgba(122,84,24,.35), 0 4px 10px rgba(0,0,0,.35);
transition: transform .08s, opacity .3s;
}
.ans .k {
flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
color: #fff3c4; background: radial-gradient(circle at 35% 30%, #8a5a14, #3a2206);
box-shadow: 0 0 0 2px #e8c46a;
}
.ans:active:not(:disabled) { transform: scale(.97); }
.ans:disabled { cursor: default; }
.ans.gone { opacity: .18; text-decoration: line-through; }
.ans.hint { box-shadow: 0 0 0 3px #7ab8ff, 0 0 18px rgba(122,184,255,.6); }
.ans.right { background: linear-gradient(180deg, #d9ffe2, #7fe09a); border-color: #1d7a3a; animation: pop .35s; }
.ans.wrong { background: linear-gradient(180deg, #ffd9d6, #f08a82); border-color: #8a1e16; animation: shake .35s; }
@keyframes pop { 50% { transform: scale(1.05); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.feedback { border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; animation: rise .3s; }
.feedback.ok { background: rgba(30,90,50,.55); border: 1px solid rgba(120,230,150,.5); }
.feedback.bad { background: rgba(110,30,24,.55); border: 1px solid rgba(240,130,120,.5); }
.feedback b { font-size: 15px; }
.feedback .refl { color: var(--gold); font-weight: 700; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.toolbar { display: flex; gap: 8px; justify-content: center; }
.tool {
width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px;
border-radius: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(232,196,106,.4); color: var(--gold); font-size: 10px; font-weight: 700; line-height: 1.1;
}
.tool .ti { width: 36px; height: 36px; }
.tool .ti img, .tool .ti svg { width: 100%; height: 100%; object-fit: contain; }
.tool:disabled { opacity: .3; }
.tool.used { opacity: .25; filter: grayscale(1); }
.hintbox { background: rgba(30,60,110,.6); border: 1px solid rgba(122,184,255,.6); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; animation: rise .3s; }
/* ===== Đấu kiểu TCG ===== */
.arena { display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.side { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.4); border: 1px solid rgba(232,196,106,.25); }
.side.me { border-color: rgba(120,200,255,.35); }
.side.opp { border-color: rgba(255,140,120,.35); }
.side .av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.side.opp .av { background: radial-gradient(circle at 35% 30%, #ff9a80, #7a1e10); box-shadow: 0 0 0 2px #ffb59a; }
.side.me .av { background: radial-gradient(circle at 35% 30%, #9ad0ff, #123a7a); box-shadow: 0 0 0 2px #a9ccff; }
.side .nm { flex: 1; min-width: 0; font-size: 13px; line-height: 1.2; }
.side .nm small { color: var(--muted); font-size: 11px; }
.side .pts { font-family: var(--font-ui); font-weight: 800; font-size: 26px; color: var(--gold); min-width: 46px; text-align: right; }
.opphand { display: flex; justify-content: center; gap: 8px; height: 74px; }
.opphand .card { width: 52px; }
.field { position: relative; flex: 1; min-height: 130px; display: grid; place-items: center; }
.field::before {
content: ''; position: absolute; top: 6px; right: 0; bottom: 6px; left: 0; border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(240,196,90,.18), transparent 65%);
}
.field .slot { width: min(52%, 210px); position: relative; z-index: 2; }
.field .vs { font-family: var(--font-title); font-weight: 900; font-size: 34px; color: var(--gold); text-shadow: 0 0 20px rgba(240,196,90,.8); }
.fly-in-top { animation: flyTop .55s cubic-bezier(.2,1.2,.4,1); }
.fly-in-bot { animation: flyBot .55s cubic-bezier(.2,1.2,.4,1); }
@keyframes flyTop { from { transform: translateY(-160px) scale(.4) rotate(-10deg); opacity: 0; } }
@keyframes flyBot { from { transform: translateY(200px) scale(.4) rotate(10deg); opacity: 0; } }
.burst { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; display: grid; place-items: center; }
.burst::before {
content: ''; width: 20px; height: 20px; border-radius: 50%;
background: radial-gradient(circle, #fff, rgba(255,233,168,.8) 30%, transparent 70%);
animation: boom .7s ease-out forwards;
}
.burst.ok::before { background: radial-gradient(circle, #fff, rgba(120,230,150,.85) 30%, transparent 70%); }
.burst.bad::before { background: radial-gradient(circle, #fff, rgba(240,120,110,.85) 30%, transparent 70%); }
@keyframes boom { to { transform: scale(22); opacity: 0; } }
.myhand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 6px; }
.myhand .card { cursor: pointer; transition: transform .2s; }
.myhand .card:hover { transform: translateY(-6px); }
.banner {
text-align: center; font-family: var(--font-title); font-weight: 800; font-size: 17px; color: #ffe9a8; padding: 6px;
text-shadow: 0 0 10px rgba(240,196,90,.5);
}
.thinking { display: inline-flex; gap: 4px; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; } .thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .2; } }
.roundpips { display: flex; justify-content: center; gap: 6px; }
.roundpips i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); }
.roundpips i.done { background: var(--gold2); }
.roundpips i.cur { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
/* ===== Mở gói thẻ ===== */
.packstage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 6px; min-height: 100%; }
.pack {
--pc1: #8a5a2a; --pc2: #3a2010; --glow: rgba(240,196,90,.35);
position: relative; width: min(58%, 230px); aspect-ratio: 5 / 8; cursor: pointer; border-radius: 12px;
container-type: inline-size;
animation: packIdle 2.4s ease-in-out infinite;
filter: drop-shadow(0 0 24px var(--glow)) drop-shadow(0 12px 18px rgba(0,0,0,.6));
}
.pack .pimg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: center/100% 100% no-repeat; border-radius: 10px; }
.pack .pcss {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 10px; overflow: hidden;
background:
linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%),
repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px),
linear-gradient(170deg, var(--pc1), var(--pc2));
box-shadow: inset 0 0 0 3px rgba(255,233,168,.6), inset 0 0 30px rgba(0,0,0,.5);
}
.pack .pcss::before, .pack .pcss::after { /* mép răng cưa trên dưới */
content: ''; position: absolute; left: 0; right: 0; height: 9px;
background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,.35) 50%) 0 0/9px 9px, linear-gradient(225deg, transparent 50%, rgba(0,0,0,.35) 50%) 0 0/9px 9px;
}
.pack .pcss::before { top: 0; } .pack .pcss::after { bottom: 0; transform: scaleY(-1); }
.pack .pimg ~ .pcss { display: none; }
.pack .plabel {
position: absolute; left: 0; right: 0; bottom: calc(14 * var(--cq, 1cqw)); text-align: center; z-index: 2;
font-family: var(--font-title); font-weight: 900; font-size: calc(11 * var(--cq, 1cqw)); color: #fff3c4; text-shadow: 0 2px 6px #000, 0 0 12px var(--glow);
}
.pack .pbook { position: absolute; left: 50%; top: 32%; width: calc(46 * var(--cq, 1cqw)); transform: translate(-50%,-50%); color: #fff3c4; filter: drop-shadow(0 0 8px #fff3c4); z-index: 1; }
.pack .pimg ~ .pbook { display: none; }
.pack .tear { position: absolute; left: -4%; right: -4%; top: 12%; height: 3px; z-index: 3; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0; }
.pack.opening { animation: packShake .5s ease-in-out 2; }
.pack.torn .tear { opacity: 1; animation: tearLine .4s forwards; }
.pack.gone { animation: packGone .5s forwards; }
.pack.p-wood { --pc1: #8a5a2a; --pc2: #3a2010; }
.pack.p-bronze { --pc1: #d08a4a; --pc2: #5a2a10; --glow: rgba(208,138,74,.5); }
.pack.p-silver { --pc1: #e6eef6; --pc2: #5a6a7a; --glow: rgba(200,220,255,.55); }
.pack.p-gold { --pc1: #ffe28a; --pc2: #a86a10; --glow: rgba(255,210,90,.7); }
.pack.p-legend { --pc1: #ff6a8a; --pc2: #7a1030; --glow: rgba(255,120,150,.75); }
.pack.p-special { --pc1: #ffffff; --pc2: #c8a0ff; --glow: rgba(255,255,255,.9); }
@keyframes packIdle { 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes packShake { 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
@keyframes tearLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes packGone { to { transform: translateY(-60px) scale(1.15); opacity: 0; } }
.rays { position: absolute; top: -40%; right: -40%; bottom: -40%; left: -40%; z-index: -1; pointer-events: none;
background: repeating-conic-gradient(from 0deg, rgba(255,233,168,.16) 0 8deg, transparent 8deg 20deg);
animation: spin 18s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
@keyframes spin { to { transform: rotate(360deg); } }
.fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.fan.n4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fan.n5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fan .card { animation: dealIn .5s backwards cubic-bezier(.2,1.3,.4,1); cursor: pointer; }
@keyframes dealIn { from { transform: translateY(-140px) scale(.5) rotate(-12deg); opacity: 0; } }
.goldgain { font-family: var(--font-title); font-size: 26px; font-weight: 900; color: var(--gold); display: flex; gap: 8px; align-items: center; animation: rise .4s; }
.goldgain .coin { width: 28px; height: 28px; }
/* ===== Rương đồ ===== */
.tabs { display: flex; gap: 4px; background: rgba(0,0,0,.4); padding: 4px; border-radius: 12px; border: 1px solid rgba(232,196,106,.22); }
.tabs button { flex: 1; padding: 9px 4px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.tabs button.on { background: linear-gradient(180deg, #5a3c1c, #2e1c0c); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,196,106,.5); }
.bookrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(232,196,106,.14); }
.bookrow + .bookrow { margin-top: 6px; }
.bookrow .bi { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #2b1806; background: linear-gradient(180deg, #fff1b8, #c48a2a); }
.bookrow .bi.tan { background: linear-gradient(180deg, #e0ecff, #6a8ac4); color: #0a1a3a; }
.bookrow .bn { flex: 1; min-width: 0; }
.bookrow .bn b { font-size: 14px; display: block; }
.bookrow .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); margin-top: 5px; overflow: hidden; }
.bookrow .bar i { display: block; height: 100%; background: linear-gradient(90deg, #c48a2a, #ffe9a8); }
.tiercounts { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.tc { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; color: #fff; }
.tc.t0 { background: var(--t0d); box-shadow: inset 0 0 0 1px var(--t0); }
.tc.t1 { background: var(--t1d); box-shadow: inset 0 0 0 1px var(--t1); }
.tc.t2 { background: var(--t2d); box-shadow: inset 0 0 0 1px var(--t2); }
.tc.t3 { background: var(--t3d); box-shadow: inset 0 0 0 1px var(--t3); }
.frac { font-family: var(--font-title); font-weight: 800; color: var(--gold); font-size: 15px; white-space: nowrap; }
/* ===== Hạng ===== */
.ladder { display: flex; flex-direction: column-reverse; gap: 6px; }
.rung { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(232,196,106,.14); }
.rung.cur { background: linear-gradient(90deg, rgba(232,196,106,.25), rgba(0,0,0,.3)); border-color: var(--gold); box-shadow: 0 0 16px rgba(232,196,106,.25); }
.rung .medal { width: 40px; height: 40px; flex: none; }
/* ===== Hộp thoại / thông báo ===== */
.modal-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(5,3,1,.78); display: grid; place-items: center; padding: 18px; animation: fade .2s; backdrop-filter: blur(3px); }
.modal { width: 100%; max-height: 86%; overflow-y: auto; border-radius: 18px; padding: 18px; background: linear-gradient(180deg, #3a2614, #1a0f07); border: 1px solid var(--gold2); box-shadow: 0 0 40px rgba(232,196,106,.25); animation: rise .25s; }
.modal h3 { margin: 0 0 8px; font-family: var(--font-title); color: var(--gold); font-size: 21px; }
@keyframes fade { from { opacity: 0; } }
.toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; background: rgba(20,12,6,.95); border: 1px solid var(--gold); color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,.6); animation: rise .25s; max-width: 90%; text-align: center; }
.result-big { font-family: var(--font-title); font-size: 40px; font-weight: 900; text-align: center; margin: 6px 0; }
.result-big.win { background: linear-gradient(180deg, #fff7d6, #f0c45a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(240,196,90,.6)); }
.result-big.lose { color: #c9b8a0; }
.confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti i { position: absolute; top: -10px; width: 7px; height: 12px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
/* ===== Danh sách ôn lại / luật ===== */
.review { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.3); border-left: 4px solid var(--bad); font-size: 13.5px; line-height: 1.45; }
.review + .review { margin-top: 8px; }
.rules h4 { color: var(--gold); margin: 14px 0 6px; font-family: var(--font-title); font-size: 16px; }
.rules p, .rules li { font-size: 13.5px; line-height: 1.55; color: #eadcbc; }
.rules ul { padding-left: 18px; margin: 4px 0; }
table.odds { width: 100%; border-collapse: collapse; font-size: 12px; }
table.odds th, table.odds td { padding: 5px 4px; text-align: center; border-bottom: 1px solid rgba(232,196,106,.12); }
table.odds th { color: var(--gold); font-weight: 700; }
@media (min-width: 520px) { #app { border-radius: 0; } }
@media (max-width: 360px) { .answers { grid-template-columns: 1fr; } .mode b { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.packwrap { position: relative; width: 100%; display: flex; justify-content: center; padding: 18px 0; }
/* Thẻ trong gói: tối đa 3 lá mỗi hàng để đọc được trên điện thoại */
.fan, .fan.n4, .fan.n5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.fan .card { width: calc(33.3% - 8px); }
.fan.n4 .card { width: calc(40% - 8px); }
.field .qcard-wrap { width: min(60%, 240px); }
.field .play { gap: 8px; }
/* ===== Huân chương thứ hạng ===== */
.avatar { padding: 0; cursor: pointer; }
.avatar.medal { background: none; border: 0; box-shadow: none; width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(232,196,106,.45)); }
.avatar img, .rung .medal img, .grk-m img, .tour-medals img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rung .medal { width: 52px; height: 52px; }
/* ===== Hướng dẫn nhập môn ===== */
.tour-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 14px;
background: radial-gradient(ellipse at 50% 30%, rgba(90,60,20,.55), rgba(5,3,1,.92) 70%); backdrop-filter: blur(4px); animation: fade .25s; }
.tour { position: relative; width: 100%; max-height: 100%; overflow-y: auto; border-radius: 22px; padding: 16px 18px 18px; text-align: center;
background: linear-gradient(180deg, #3a2614, #170d05); border: 1px solid var(--gold2); box-shadow: 0 0 50px rgba(232,196,106,.25); animation: rise .3s; }
.tour-skip { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px; }
.tour-art { height: 220px; display: grid; place-items: center; margin: 8px 0 6px; }
.tour-emblem { width: 190px; height: 190px; background: center/contain no-repeat; filter: drop-shadow(0 0 24px rgba(232,196,106,.5)); }
.tour-card { width: 150px; }
.tour-icons { width: 150px; height: 150px; filter: drop-shadow(0 0 18px rgba(232,196,106,.45)); }
.tour-icons img, .tour-icons svg { width: 100%; height: 100%; object-fit: contain; }
.tour-icons.row3 { width: 100%; height: 110px; display: flex; justify-content: center; gap: 8px; }
.tour-icons.row3 img, .tour-icons.row3 svg { width: 100px; }
.tour-packs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; }
.tour-packs img { width: 32%; max-height: 200px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.tour-packs img:nth-child(2) { width: 36%; transform: translateY(-14px); }
.tour-fan { display: flex; justify-content: center; width: 100%; }
.tour-fan .card { width: 110px; flex: none; }
.tour-fan .card:nth-child(1) { transform: rotate(-12deg) translate(24px, 10px); }
.tour-fan .card:nth-child(2) { z-index: 1; transform: translateY(-6px); }
.tour-fan .card:nth-child(3) { transform: rotate(12deg) translate(-24px, 10px); }
.tour-medals { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tour-medals div { width: 80px; height: 80px; }
.tour-medals div:nth-child(2) { width: 100px; height: 100px; }
.tour-medals div:nth-child(3) { width: 130px; height: 130px; filter: drop-shadow(0 0 18px rgba(255,214,110,.6)); }
.tour-step { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold2); }
.tour h3 { margin: 4px 0 8px; font-family: var(--font-title); font-weight: 900; font-size: 23px; color: var(--gold); line-height: 1.2; }
.tour p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #eadcbc; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 14px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(232,196,106,.25); transition: width .2s; }
.tour-dots i.on { width: 22px; background: var(--gold); }
.tc0 { color: var(--t0l); } .tc1 { color: var(--t1l); } .tc2 { color: var(--t2l); } .tc3 { color: var(--t3); }
/* ===== Mẹo lần đầu ở từng màn ===== */
.tip { position: absolute; left: 10px; right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 40; display: flex; gap: 12px; align-items: flex-start;
padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(70,46,20,.97), rgba(30,18,8,.97));
border: 1px solid var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 20px rgba(232,196,106,.25); animation: rise .35s; }
.tip-ico { width: 30px; height: 30px; flex: none; color: var(--gold); margin-top: 2px; }
.tip b { color: var(--gold); font-size: 14px; }
.tip p { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; color: #eadcbc; }
/* ===== Cẩm nang ===== */
#gq { width: 100%; }
.guide { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gsec { border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,196,106,.2); overflow: hidden; scroll-margin-top: 8px; }
.gsec[open] { border-color: var(--gold2); background: rgba(30,18,8,.7); }
.gsec summary { list-style: none; cursor: pointer; padding: 13px 14px; font-family: var(--font-title); font-weight: 800; font-size: 16px; color: #ffe9a8; display: flex; align-items: center; }
.gsec summary::-webkit-details-marker { display: none; }
.gsec summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .2s; }
.gsec[open] summary::after { transform: rotate(-135deg); }
.gbody { padding: 0 14px 14px; }
.gbody .odds { width: 100%; margin: 10px 0; }
.steps { padding-left: 0; list-style: none; counter-reset: st; margin: 4px 0; }
.steps li { counter-increment: st; position: relative; padding-left: 32px; margin: 8px 0; font-size: 13.5px; line-height: 1.5; color: #eadcbc; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
font-size: 12px; font-weight: 800; color: #2b1806; background: radial-gradient(circle at 35% 30%, #fff6c8, #e2b04c 60%, #8a5a14); }
.anat { display: flex; gap: 14px; align-items: center; margin: 6px 0; }
.anat-card { position: relative; width: 44%; flex: none; }
.anat-card .pin { position: absolute; z-index: 5; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
font-size: 11px; font-weight: 800; color: #2b1806; background: #ffe28a; box-shadow: 0 0 0 2px #2b1806, 0 0 10px rgba(255,226,138,.8); }
.anat-list { margin: 0; padding-left: 18px; }
.anat-list li { font-size: 12.5px; margin: 5px 0; }
.guide-packs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; margin: 6px 0; }
.guide-packs img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.guide-packs b { display: block; font-size: 11.5px; color: #ffe9a8; }
.guide-packs span { font-size: 10.5px; color: var(--muted); }
.guide-fn { display: flex; flex-direction: column; gap: 10px; }
.gfn { display: flex; gap: 10px; align-items: flex-start; }
.gfn-ico { width: 46px; height: 46px; flex: none; }
.gfn-ico img, .gfn-ico svg { width: 100%; height: 100%; object-fit: contain; }
.gfn b { color: #ffe9a8; font-size: 14px; }
.gfn p { margin: 2px 0; font-size: 13px; line-height: 1.45; color: #eadcbc; }
.guide-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.grk { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(232,196,106,.14); }
.grk.cur { border-color: var(--gold); box-shadow: 0 0 12px rgba(232,196,106,.3); }
.grk-m { width: 56px; height: 56px; margin: 0 auto 4px; }
.grk b { display: block; font-size: 12px; color: #ffe9a8; line-height: 1.25; }
.grk span { font-size: 10.5px; color: var(--muted); }
.faq dt { font-weight: 800; color: #ffe9a8; font-size: 13.5px; margin-top: 10px; }
.faq dd { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: #eadcbc; }
.rankup { display: block; width: 120px; height: 120px; margin: 4px auto 6px; animation: rankup 1s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 0 20px rgba(255,214,110,.7)); }
.rankup img { width: 100%; height: 100%; object-fit: contain; }
@keyframes rankup { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
/* ===== Chế độ đang thi: ẩn menu dưới, thanh trên chỉ còn Thoát ===== */
#app.focus .nav { display: none; }
#app.focus #screen { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
#app.focus .tip { bottom: calc(14px + env(safe-area-inset-bottom)); }
.topbar .who.center { text-align: left; }
.topbar .who.center b { font-family: var(--font-title); font-size: 17px; color: var(--gold); }
.quit-btn {
flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 99px;
border: 1px solid rgba(232,196,106,.35); background: rgba(0,0,0,.35); color: var(--muted); font-size: 13px; font-weight: 700;
}
.quit-btn:active { transform: scale(.96); }
/* ===== Gọn hơn: việc tiếp theo, khóa, mục mở rộng ===== */
.nextstep {
width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; margin-top: 14px;
padding: 14px 16px; border-radius: 16px; border: 1px solid var(--gold); color: var(--text);
background: linear-gradient(120deg, rgba(232,196,106,.28), rgba(60,38,16,.85)); box-shadow: 0 0 18px rgba(232,196,106,.25);
position: relative; animation: rise .35s;
}
.nextstep::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--gold); }
.nextstep .ns-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.nextstep b { font-family: var(--font-title); font-size: 18px; color: #fff3c4; }
.nextstep span:last-child { font-size: 12.5px; color: var(--muted); }
.mode.locked { filter: saturate(.45) brightness(.8); }
.mode .ico .stars, .mode .stars { font-size: 13px; }
details.more { margin-top: 12px; border-top: 1px solid rgba(232,196,106,.15); padding-top: 10px; }
details.more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--gold); list-style: none; }
details.more summary::before { content: '▸ '; }
details.more[open] summary::before { content: '▾ '; }
details.more summary::-webkit-details-marker { display: none; }
.lockpanel { text-align: center; border-color: rgba(255,181,154,.6); }
.lockpanel .lockico { font-size: 34px; margin-bottom: 4px; }
.rung.done { opacity: .75; }
.rung .stars { font-size: 13px; margin-top: 2px; }
.preview-card { width: min(78%, 280px); margin: 0 auto; }
.bookrow { cursor: pointer; }
.bookrow:active { transform: scale(.985); }
.bookrow .frac { font-family: var(--font-ui) !important; font-variant-numeric: lining-nums; }
.modal .cardgrid { max-height: 60vh; overflow-y: auto; padding: 4px; }
.shoplist { display: flex; flex-direction: column; gap: 8px; }
.shoprow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,196,106,.18); }
.shoprow .gfn-ico { width: 52px; height: 52px; flex: none; }
.shoprow .gfn-ico img, .shoprow .gfn-ico svg { width: 100%; height: 100%; object-fit: contain; }
.shoprow b { color: #ffe9a8; font-size: 14.5px; }
.shoprow p { margin: 2px 0 4px; font-size: 12.5px; line-height: 1.4; color: #eadcbc; }
.shoprow .btn { flex: none; min-width: 82px; }
.toolpick { display: flex; flex-direction: column; gap: 6px; }
.toolpick .tp { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px;
background: rgba(0,0,0,.3); border: 1px solid rgba(232,196,106,.18); color: var(--text); }
.toolpick .tp.on { border-color: var(--gold); background: linear-gradient(90deg, rgba(232,196,106,.22), rgba(0,0,0,.3)); }
.toolpick .gfn-ico { width: 38px; height: 38px; flex: none; }
.toolpick .gfn-ico img, .toolpick .gfn-ico svg { width: 100%; height: 100%; object-fit: contain; }
.toolpick b { display: block; font-size: 14px; color: #ffe9a8; }
.toolpick small { font-size: 11.5px; color: var(--muted); }
.toolpick .tp-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2b1806; background: linear-gradient(180deg, #ffeeb0, #e2b04c); flex: none; }
.divs { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.divs .dv { min-width: 26px; padding: 1px 5px; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); background: rgba(255,255,255,.06); border: 1px solid rgba(232,196,106,.15); }
.divs .dv.done { color: #2b1806; background: linear-gradient(180deg, #ffeeb0, #c48a2a); border-color: transparent; }
.divs .dv.cur { color: #fff3c4; border-color: var(--gold); box-shadow: 0 0 8px rgba(232,196,106,.5); }
.rung .chip { font-weight: 800; }
/* ===== Bản online: tài khoản, cài app, bảng xếp hạng, phòng, giải đấu ===== */
textarea { resize: vertical; min-height: 70px; }
.topbar button.who { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.guesttag { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: rgba(255,180,120,.2); color: #ffc79a; vertical-align: 2px; }
.guestbar, .installbar {
width: 100%; display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 10px 14px; border-radius: 14px;
border: 1px dashed rgba(255,190,130,.55); background: rgba(70,36,14,.7); color: var(--text); text-align: left;
}
.guestbar { flex-direction: column; align-items: flex-start; }
.guestbar b, .installbar b { font-size: 13.5px; color: #ffd6a8; }
.guestbar span, .installbar span { font-size: 12px; color: var(--muted); }
.installbar { border-style: solid; border-color: rgba(232,196,106,.45); background: linear-gradient(120deg, rgba(232,196,106,.18), rgba(40,26,12,.85)); padding: 6px 6px 6px 14px; }
.installbar > button.grow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; color: inherit; text-align: left; padding: 4px 0; }
.installbar b { color: #fff3c4; }
.installbar .x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(0,0,0,.3); color: var(--muted); font-size: 14px; }
.linkbtn { display: block; margin-top: 8px; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.feedback .linkbtn { color: inherit; opacity: .75; }
.review .linkbtn { margin-top: 6px; }
label.chk { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
label.chk input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--gold); }
label.chk a { color: var(--gold); }
.ans.picked { outline: 2px solid var(--gold); }
/* Bảng xếp hạng */
.lb { margin-top: 10px; }
.lbrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.28); margin-top: 6px; border: 1px solid transparent; }
.lbrow.me { border-color: var(--gold); background: rgba(232,196,106,.14); }
.lbn { width: 24px; text-align: center; font-weight: 800; color: var(--gold); }
.lbm { width: 34px; height: 34px; flex: none; }
.lbm img, .lbm svg { width: 100%; height: 100%; object-fit: contain; }
/* Phòng riêng, màn VS */
.roomcode { margin: 16px auto 6px; padding: 10px 22px; border-radius: 14px; font-size: 34px; font-weight: 800; letter-spacing: .25em; color: #fff3c4; background: rgba(0,0,0,.45); border: 1px solid var(--gold); text-align: center; width: fit-content; }
.roomcode.big { font-size: 72px; }
.vsintro { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; animation: rise .4s; }
.vsintro > div:not(.vs) b { display: block; font-family: var(--font-title); font-size: 24px; color: #fff3c4; }
.vsintro small { color: var(--muted); }
.vsintro .vs { font-family: var(--font-title); font-size: 40px; color: var(--gold); }
/* Giải đấu */
.trow { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; margin-top: 6px; border-radius: 12px; border: 1px solid rgba(232,196,106,.25); background: rgba(0,0,0,.3); color: var(--text); }
.plist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plist.big .chip { font-size: 20px; padding: 8px 16px; }
.panel.myturn { border-color: var(--gold); box-shadow: 0 0 18px rgba(232,196,106,.3); margin-top: 12px; }
.panel.champ { margin: 10px 0; }
.bracket { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.bcol { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; min-width: 150px; flex: 1; }
.bhead { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-align: center; }
.bmatch { border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(232,196,106,.22); overflow: hidden; }
.bmatch.live { border-color: var(--ok); box-shadow: 0 0 10px rgba(79,209,122,.35); }
.bside { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12.5px; }
.bside + .bside { border-top: 1px solid rgba(232,196,106,.15); }
.bside.win { color: #fff3c4; font-weight: 700; }
.bside.win::before { content: '▸'; color: var(--gold); }
.bside.lose { opacity: .5; }
.bside.meside { background: rgba(232,196,106,.12); }
.bside .adv { border: 0; border-radius: 6px; padding: 1px 7px; background: rgba(79,209,122,.25); color: #c8f5cf; font-size: 12px; }
.blive, .bnote { font-size: 10.5px; padding: 3px 8px; color: var(--muted); }
.blive { color: var(--ok); }
/* Màn hình chiếu (?chieu=MÃ) */
#app.projector .topbar, #app.projector .nav { display: none; }
.proj { padding: 24px 32px; text-align: center; }
.proj h1 { font-family: var(--font-title); font-size: clamp(32px, 5vw, 64px); color: #fff3c4; margin: 0 0 18px; }
.projjoin { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; font-size: clamp(18px, 2.2vw, 28px); }
.proj .champ.big { font-size: clamp(26px, 3.5vw, 48px); margin-bottom: 18px; }
.proj .bracket { justify-content: center; }
.proj .bcol { min-width: 200px; }
.proj .bside { font-size: clamp(14px, 1.5vw, 22px); padding: 10px 12px; }
#app.projector { max-width: none; }
/* ===== Giai đoạn 4: Shop kim cương (chỉ hiện khi máy chủ bật) ===== */
.gem-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(140,200,255,.45); background: rgba(20,40,70,.6); color: #cfe6ff; font: inherit; font-size: 13px; font-weight: 700; }
.panel.gemsbal { display: flex; align-items: center; gap: 10px; }
.panel.gemsbal b { font-size: 26px; color: #cfe6ff; }
.gem { font-size: 22px; }
.gem.big { font-size: 34px; }
.gemgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gempack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 12px; border-radius: 14px; border: 1px solid rgba(140,200,255,.4); background: linear-gradient(180deg, rgba(30,56,96,.75), rgba(14,22,40,.9)); color: var(--text); }
.gempack b { font-size: 20px; color: #e4f1ff; }
.gempack .price { font-weight: 800; color: var(--gold); }
.gempack .gtag { position: absolute; top: -8px; right: 8px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--gold); color: #2b1806; }
.passlist { margin-top: 10px; }
.passrow { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-top: 6px; border-radius: 12px; background: rgba(0,0,0,.28); opacity: .7; font-size: 12.5px; }
.passrow.on { opacity: 1; border: 1px solid rgba(232,196,106,.3); }
.passrow .plv { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(232,196,106,.2); color: var(--gold); flex: none; }
.passrow .prem { margin-top: 4px; color: #cfe6ff; }
.passrow .btn.small { padding: 3px 10px; margin-left: 6px; }
.cosgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cos { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(232,196,106,.2); text-align: center; font-size: 11.5px; }
.cos.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(232,196,106,.3); }
.cos .btn.small { padding: 4px 8px; font-size: 11.5px; }
.cosprev { width: 100%; aspect-ratio: 5/4; border-radius: 8px; background: url('../assets/frame-rare.webp') center/cover; display: grid; place-items: center; }
.cosprev[class*="back-"] { background-image: url('../assets/back-rare.webp'); }
.cosprev[class*="title-"] { background: rgba(232,196,106,.12); }
.cosprev[class*="title-"] span { font-family: var(--font-title); color: var(--gold); font-size: 12px; padding: 4px; }
.cosprev[class*="theme-"] { background-image: none; }
.ptitle { display: block; color: var(--gold) !important; font-style: italic; margin-top: 2px; }
/* Hiệu ứng tạm cho đồ trang trí (sau này Muse vẽ hình riêng thay vào) */
.cosprev.frame-ngoc, #app[data-frame="frame-ngoc"] .card .frame.img { filter: hue-rotate(110deg) saturate(1.25); }
.cosprev.frame-hong, #app[data-frame="frame-hong"] .card .frame.img { filter: hue-rotate(-45deg) saturate(1.35); }
.cosprev.frame-dem, #app[data-frame="frame-dem"] .card .frame.img { filter: hue-rotate(195deg) brightness(.85) saturate(1.3); }
.cosprev.frame-mua, #app[data-frame="frame-mua"] .card .frame.img { filter: hue-rotate(60deg) saturate(1.6) drop-shadow(0 0 4px rgba(255,240,160,.8)); }
.cosprev.back-oliu, #app[data-back="back-oliu"] .card .face.back .bkimg { filter: hue-rotate(70deg) saturate(1.2); }
.cosprev.back-anhsang, #app[data-back="back-anhsang"] .card .face.back .bkimg { filter: brightness(1.3) saturate(.55); }
.cosprev.theme-binhminh { background: linear-gradient(180deg, #ffb86b, #7a3a1a); }
.cosprev.theme-dongco { background: linear-gradient(180deg, #8fd18a, #1f4a24); }
#app[data-theme="theme-binhminh"] { background: radial-gradient(ellipse at 50% 0%, rgba(255,170,90,.35), transparent 65%), linear-gradient(180deg, rgba(60,24,8,.4), rgba(18,12,8,.6)); }
#app[data-theme="theme-dongco"] { background: radial-gradient(ellipse at 50% 0%, rgba(120,210,120,.28), transparent 65%), linear-gradient(180deg, rgba(10,40,16,.45), rgba(8,18,10,.65)); }
/* ===== Màn hình chờ (index.html) và màn chào lần đầu ===== */
/* Ảnh Muse: splash-doc (dọc) / splash-ngang (ngang). Chưa có ảnh thì lộ biểu tượng + nền chuyển màu ở lớp dưới */
.splash-bg, #splash .sp-art {
background:
linear-gradient(180deg, rgba(18,12,8,.15), rgba(18,12,8,0) 30%, rgba(18,12,8,0) 62%, rgba(18,12,8,.7)),
url('../assets/splash-doc.webp') center/cover no-repeat,
url('../assets/emblem.webp') center 42%/min(46vw, 220px) no-repeat,
radial-gradient(ellipse at 50% 42%, #4a3018, #120c08 70%);
}
@media (orientation: landscape) and (min-width: 700px) {
#splash .sp-art {
background:
linear-gradient(180deg, rgba(18,12,8,.15), rgba(18,12,8,0) 30%, rgba(18,12,8,0) 62%, rgba(18,12,8,.7)),
url('../assets/splash-ngang.webp') center/cover no-repeat,
url('../assets/emblem.webp') center 42%/220px no-repeat,
radial-gradient(ellipse at 50% 42%, #4a3018, #120c08 70%);
}
}
#splash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background: var(--bg0); display: flex; flex-direction: column; align-items: center; justify-content: space-between;
padding: calc(env(safe-area-inset-top) + 9vh) 24px calc(env(safe-area-inset-bottom) + 11vh); transition: opacity .45s; }
@media (orientation: landscape) and (min-width: 700px) { #splash { padding-bottom: 16vh; padding-top: 14vh; } }
#splash.out { opacity: 0; pointer-events: none; }
#splash .sp-art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; animation: spGlow 4s ease-in-out infinite alternate; }
@keyframes spGlow { to { filter: brightness(1.12); } }
.sp-title, .wc-head { position: relative; text-align: center; }
.sp-title h1, .wc-head h1 {
font-family: var(--font-title); font-weight: 900; font-size: clamp(34px, 9vw, 54px); line-height: 1.1; margin: 0 0 6px;
background: linear-gradient(180deg, #fff7d6, #f0c45a 50%, #a8701e); -webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 2px 10px rgba(0,0,0,.8));
}
.sp-title p, .wc-head p { margin: 0; color: var(--muted); font-size: 14px; text-shadow: 0 1px 6px #000; }
.sp-load { position: relative; width: min(100%, 360px); }
.sp-bar { height: 12px; border-radius: 99px; padding: 2px; background: rgba(0,0,0,.6); border: 1px solid rgba(232,196,106,.55); box-shadow: 0 0 18px rgba(0,0,0,.6); }
.sp-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #a8701e, #f0c45a, #fff3c4); box-shadow: 0 0 10px rgba(240,196,90,.8); transition: width .25s; }
.sp-txt { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); text-shadow: 0 1px 4px #000; }
.sp-txt b { color: var(--gold); font-size: 15px; }
.welcome { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 45; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start;
padding: calc(env(safe-area-inset-top) + 5vh) 16px calc(env(safe-area-inset-bottom) + 20px); animation: fade .3s; transition: opacity .35s; }
.welcome.out { opacity: 0; pointer-events: none; }
.welcome.busy button { opacity: .6; pointer-events: none; }
.wc-box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.wc-head { margin-bottom: 8vh; }
.wc-head h1 { font-size: 40px; }
.wc-tabs button { font-size: 15px; padding: 11px 6px; }
.welcome .panel { background: rgba(18,12,8,.82); backdrop-filter: blur(4px); }
.wc-gift { margin: 0 0 4px; line-height: 1.5; }
.wc-alt { text-align: center; margin: 12px 0 0; }
.wc-alt a, .wpol { color: var(--gold); }
.wc-skip { text-align: center; }
.wc-skip p { margin: 10px 4px 0; line-height: 1.5; color: #ffd6a8; text-shadow: 0 1px 4px #000; }
.wc-pol { max-height: 60vh; overflow-y: auto; text-align: left; }
/* Màn chào: phủ tối thêm để chữ và ô nhập dễ đọc trên hình nền */
.welcome.splash-bg { background-image: linear-gradient(180deg, rgba(10,6,3,.35), rgba(10,6,3,.62) 30%, rgba(10,6,3,.75)), url('../assets/splash-doc.webp'), radial-gradient(ellipse at 50% 42%, #4a3018, #120c08 70%);
background-size: cover; background-position: center; padding-top: calc(env(safe-area-inset-top) + 9vh); }
.wc-head { margin-bottom: 5vh; }
.wc-skip .btn.ghost { background: rgba(18,12,8,.9); }
/* Quạt thẻ + gói thẻ trên màn hình chờ và màn chào (bay vào xoè ra, rồi bồng bềnh) */
.sp-show { --h: min(14vh, 116px); position: relative; left: 50%; translate: -50% 0; width: min(94vw, 520px); height: calc(var(--h) * 1.12);
display: flex; justify-content: center; align-items: flex-end; gap: 7%; margin-bottom: 3.2vh; pointer-events: none; }
.sp-fan { position: relative; height: 100%; }
.sp-fan.cards { width: calc(var(--h) * 1.45); }
.sp-fan.packs { width: calc(var(--h) * 1.15); }
.sp-fan img { position: absolute; left: 50%; bottom: 0; height: var(--h); transform-origin: 50% 115%; opacity: 0;
transform: translateX(calc(-50% + var(--x))) rotate(var(--r));
filter: drop-shadow(0 8px 14px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(240,196,90,.25));
transition: opacity .4s; animation: fanIn 1s cubic-bezier(.2,.9,.25,1.15) both, bob 3.4s ease-in-out infinite alternate; }
.sp-fan img.on { opacity: 1; }
.sp-fan.packs img { height: calc(var(--h) * 1.06); }
.sp-fan.cards img:nth-child(1) { --x: -40%; --r: -16deg; animation-delay: .05s, 0s; }
.sp-fan.cards img:nth-child(2) { --x: -13%; --r: -5deg; animation-delay: .15s, .6s; }
.sp-fan.cards img:nth-child(3) { --x: 13%; --r: 5deg; animation-delay: .25s, 1.2s; }
.sp-fan.cards img:nth-child(4) { --x: 40%; --r: 16deg; animation-delay: .35s, 1.8s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,214,110,.6)); }
.sp-fan.packs img:nth-child(1) { --x: -34%; --r: -12deg; animation-delay: .3s, .4s; }
.sp-fan.packs img:nth-child(2) { --x: 34%; --r: 12deg; animation-delay: .4s, 1s; }
.sp-fan.packs img:nth-child(3) { --x: 0%; --r: 0deg; animation-delay: .5s, 1.6s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,214,110,.6)); }
@keyframes fanIn { from { transform: translateX(-50%) translateY(40%) rotate(0deg) scale(.7); } }
@keyframes bob { to { translate: 0 -7px; } }
/* Máy tính (ngang): thẻ bên trái cuốn sách, gói bên phải */
@media (orientation: landscape) and (min-width: 700px) {
#splash .sp-load { position: static; }
#splash .sp-bar, #splash .sp-txt { position: relative; }
#splash .sp-show { --h: min(25vh, 210px); position: absolute; left: 0; right: 0; top: 50%; translate: 0 -40%; width: auto; margin: 0;
justify-content: space-between; padding: 0 6vw; }
}
/* Màn chào: bản nhỏ giữa tên game và ô đăng nhập */
.wc-show { --h: 84px; margin: -2vh 0 1.5vh; }
.wc-head { margin-bottom: 3vh; }
.welcome.shown .sp-fan img { animation: bob 3.4s ease-in-out infinite alternate; }
/* iPhone đời cũ (iOS 14–15): chưa có aspect-ratio / cqw. Phần tử ::before giữ chiều cao theo tỉ lệ khung
(padding % tính theo bề rộng thẻ); --cq do app.js đo khi trình duyệt không hiểu cqw */
.card::before { content: ''; display: block; padding-top: 140%; }
.pack::before { content: ''; display: block; padding-top: 160%; }
/* Thẻ chức năng (khung Huyền thoại, nền vàng nhiều tia sáng): biểu tượng nhỏ lại, chữ to và có nền giấy mờ cho dễ đọc */
.card.fn .front .frame.img ~ .paper { left: 21%; right: 21%; top: 27%; bottom: 29%; justify-content: flex-start; gap: calc(1.2 * var(--cq, 1cqw)); }
.card.fn .paper .fnicon { width: calc(21 * var(--cq, 1cqw)); height: calc(21 * var(--cq, 1cqw)); margin: 0 auto; flex-shrink: 0; }
.card.fn .paper .fnname { font-size: calc(7 * var(--cq, 1cqw)); color: #3a1d04; text-shadow: 0 0 calc(1.5 * var(--cq, 1cqw)) #fff6d8, 0 0 calc(3 * var(--cq, 1cqw)) #fff6d8; }
.card.fn .paper .fndesc { margin-top: 0; font-size: calc(4.8 * var(--cq, 1cqw)); font-weight: 600; line-height: 1.28; color: #241204;
padding: calc(1.6 * var(--cq, 1cqw)) calc(2.2 * var(--cq, 1cqw)); border-radius: calc(2 * var(--cq, 1cqw));
background: rgba(255,247,224,.88); box-shadow: 0 0 calc(3 * var(--cq, 1cqw)) rgba(255,247,224,.9); }
/* ===== Điện thoại hẹp (gộp từ bản sửa trên tinyfaithsongs.com/bible ngày 30/10) =====
Thanh trên (avatar + tên + vàng + 2 nút) rộng hơn máy hẹp nên bị cắt 2 đầu: thu gọn từng phần, không cho tràn ngang */
html, body { overflow-x: hidden; }
#app { max-width: min(480px, 100vw); }
.topbar { gap: 6px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
.topbar .avatar { width: 36px; height: 36px; }
.topbar .avatar.medal { width: 40px; height: 40px; }
.topbar .who { min-width: 0; }
.topbar .who b { font-size: 13px; }
.topbar .who small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .gold-pill { flex: none; padding: 4px 8px 4px 4px; font-size: 13px; }
.topbar .icon-btn { flex: none; width: 32px; height: 32px; }
.topbar .icon-btn svg { width: 18px; height: 18px; }
#screen { padding: 12px 10px 18px; }
.mode-grid { gap: 8px; }
.mode { padding: 12px 10px 10px; min-width: 0; }
.mode b { font-size: 17px; }
.nav { padding-left: 4px; padding-right: 4px; }
.nav button { min-width: 0; font-size: 10px; padding-left: 0; padding-right: 0; white-space: nowrap; overflow: hidden; }
.nav button svg { width: 24px; height: 24px; }
.hero h1, .hero .screen-title { font-size: 28px; }
/* Thẻ câu hỏi nhỏ lại trên điện thoại để câu hỏi + 4 đáp án vừa một màn hình */
@media (max-width: 480px) {
/* thẻ câu hỏi to nhất có thể mà vẫn thấy đủ 4 đáp án: theo bề rộng và theo chiều cao màn hình */
.play .qcard-wrap { width: min(84%, 340px, calc((100vh - 340px) * .714)); width: min(84%, 340px, calc((100dvh - 340px) * .714)); min-width: 170px; }
.answers { gap: 6px; }
.ans { min-height: 50px; padding: 8px 10px; font-size: 13px; }
.play { gap: 8px; }
}
/* ===== Xem kỹ thẻ: lưới chọn có câu hỏi + nút kính lúp, màn phóng to có đáp án + lời giải ===== */
.pickcard { position: relative; cursor: pointer; min-width: 0; }
.pickcard .pq { margin-top: 5px; font-family: var(--font-serif); font-size: 11.5px; line-height: 1.3; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pickcard:has(.card.dim) .pq { opacity: .38; }
.pickcard .pc-c { position: relative; }
.zoombtn { position: absolute; right: -4px; bottom: -4px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; padding: 0;
font-size: 14px; line-height: 1; background: rgba(18,12,8,.92); border: 1px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
.cardzoom .qcard-wrap { width: min(78%, 280px); margin: 0 auto; }
.cz-info { margin-top: 14px; }
.cz-ans { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px;
background: linear-gradient(180deg, rgba(79,209,122,.22), rgba(29,90,44,.35)); border: 1px solid rgba(155,227,168,.6); }
.cz-ans span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9be3a8; }
.cz-ans b { font-size: 17px; line-height: 1.3; color: #eafff0; }
.cz-ref { margin-top: 10px; font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--gold); }
.cz-exp { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); }
/* Câu hỏi trên thẻ: căn giữa kiểu "an toàn" — dài quá thì tràn xuống (để fitText co lại), không bị cắt mất dòng đầu */
.paper .q[data-fit] > span { margin: auto 0; }
/* ===== Bảng âm thanh (nút loa trên cùng) ===== */
.sndpanel { position: absolute; top: calc(56px + env(safe-area-inset-top)); right: 10px; z-index: 55; width: 220px; padding: 12px 14px; border-radius: 14px;
background: linear-gradient(180deg, #3a2614, #1a0f07); border: 1px solid var(--gold2); box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: rise .2s;
display: flex; flex-direction: column; gap: 10px; }
.sndpanel .sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.sndpanel .sw input { position: absolute; opacity: 0; pointer-events: none; }
.sndpanel .sw i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.15); border: 1px solid rgba(232,196,106,.35); transition: background .2s; }
.sndpanel .sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d9c7a3; transition: transform .2s, background .2s; }
.sndpanel .sw input:checked + i { background: linear-gradient(180deg, #ffeeb0, #e2b04c); }
.sndpanel .sw input:checked + i::after { transform: translateX(18px); background: #fff; }
.sndpanel input[type=range] { width: 100%; accent-color: var(--gold); }
.sndpanel input[type=range]:disabled { opacity: .35; }
/* Thẻ câu hỏi chờ ảnh khung (tối đa nửa giây) rồi hiện cả chữ lẫn khung cùng lúc */
.qcard-wrap.wait { opacity: 0; }
.qcard-wrap { transition: opacity .15s; }
/* Màn chào: quạt thẻ không rộng hơn khung app (máy tính khung 480px) → không có thanh cuộn ngang */
.welcome { overflow-x: hidden; }
.wc-show { width: 100%; max-width: 100%; }
/* ===== Thẻ đang úp: ẩn hẳn nội dung mặt trước (iPhone đôi khi vẽ xuyên mặt sau, thấy chữ ngược) =====
Đổi trạng thái ở giữa cú lật (.3s trên .6s) để lúc quay vẫn thấy mặt đúng */
.card .front > *, .card .front::before { transition: visibility 0s linear .3s; }
.card.flipped .front > *, .card.flipped .front::before, .card.backonly .front > *, .card.backonly .front::before { visibility: hidden; }
.card:not(.flipped):not(.backonly) .back > * { visibility: hidden; transition: visibility 0s linear .3s; }
.card.flipped .back > *, .card.backonly .back > * { transition: visibility 0s linear .3s; }
/* ===== Mở gói kiểu thẻ sưu tầm ===== */
/* 1) Chọn gói: vòng xoay 3D, gói giữa to, có bóng phản chiếu dưới chân */
.pcar { position: relative; height: min(62vw, 300px); margin: 6px 0 14px; perspective: 900px; transform-style: preserve-3d; touch-action: pan-y; }
.pcar-it { position: absolute; left: 50%; top: 0; width: min(38vw, 180px); margin-left: calc(min(38vw, 180px) / -2); transition: transform .45s cubic-bezier(.2,.9,.3,1), opacity .35s; cursor: pointer; }
.pcar-it .pack { width: 100%; animation: none; -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255,255,255,.18)); }
.pcar-it.on .pack { animation: packIdle 2.4s ease-in-out infinite; }
/* 2) Xé gói: gói lớn, đường sáng ở mép trên, vuốt tới đâu rách tới đó */
.pack.big2 { width: min(64%, 260px); touch-action: none; outline: none; }
.pack .pimg.ptop { clip-path: inset(0 0 87.5% 0); transition: transform .55s cubic-bezier(.4,0,.6,1), opacity .5s; z-index: 2; }
.pack .pimg.pbody { clip-path: inset(12.5% 0 0 0); }
.pack .tline { position: absolute; left: -3%; right: -3%; top: 12.5%; height: 0; z-index: 4; pointer-events: none; }
.pack .tline .tl-glow { position: absolute; left: 0; right: 0; top: -2px; height: 4px; border-radius: 4px;
background: linear-gradient(90deg, transparent, #bff4ff 15%, #fff 50%, #bff4ff 85%, transparent);
box-shadow: 0 0 10px #8fe6ff, 0 0 22px rgba(143,230,255,.7); animation: tlPulse 1.4s ease-in-out infinite; }
.pack .tline .tl-rip { position: absolute; left: 0; width: 0; top: -4px; height: 8px; border-radius: 6px;
background: linear-gradient(90deg, #fffbe6, #ffe28a, #fffbe6); box-shadow: 0 0 14px #ffe28a, 0 0 30px rgba(255,226,138,.85); }
.pack .tline .tl-hand { position: absolute; top: 2px; left: 6%; font-size: 26px; font-style: normal; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: tlHand 1.8s ease-in-out infinite; }
.pack.ripping .tl-hand, .pack.torn .tline { opacity: 0; transition: opacity .2s; }
.pack.ripping { animation-play-state: paused; }
.pack.torn .pimg.ptop { transform: translate(18%, -70%) rotate(14deg); opacity: 0; }
.pack.torn { animation: packShake .25s ease-in-out 2; }
.pack.nudge { animation: packShake .25s ease-in-out 2; }
@keyframes tlPulse { 50% { opacity: .45; } }
@keyframes tlHand { 0% { left: 4%; opacity: 0; } 15% { opacity: 1; } 75% { left: 82%; opacity: 1; } 100% { left: 88%; opacity: 0; } }
/* 3) Hiện thẻ từng lá */
.rvl { display: flex; flex-direction: column; align-items: center; }
.rvl-stack { position: relative; width: min(66vw, 280px); }
.rvl-stack::before { content: ''; display: block; padding-top: 140%; }
.rvl-card, .rvl-under { position: absolute; top: 0; left: 0; width: 100%; }
.rvl-under { transform: translate(4%, 3%) rotate(3deg) scale(.96); filter: brightness(.6); }
.rvl-card { z-index: 2; cursor: pointer; animation: rvlIn .45s cubic-bezier(.2,1.3,.4,1); }
.rvl-card.away { animation: rvlOut .32s ease-in forwards; }
@keyframes rvlIn { from { transform: translateY(40px) scale(.85); opacity: 0; } }
@keyframes rvlOut { to { transform: translate(-130%, -6%) rotate(-14deg); opacity: 0; } }
.rvl-meta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; margin-top: 14px; flex-wrap: wrap; }
.rvl-tag { font-weight: 900; font-size: 13px; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; color: #fff; background: linear-gradient(180deg, #ff6a5a, #c22a1a); box-shadow: 0 0 10px rgba(255,90,70,.6); }
.rvl-tag.dup { background: linear-gradient(180deg, #8a7a66, #4a3e30); box-shadow: none; }
.rvl-gems { font-size: 18px; letter-spacing: 3px; color: #cfd8e8; text-shadow: 0 0 6px rgba(255,255,255,.5); }
.rvl-gems.t1 { color: #8fc0ff; } .rvl-gems.t2 { color: #c7a8ff; } .rvl-gems.t3 { color: #ffd75e; text-shadow: 0 0 10px #ffd75e; }
.rvl-tier { font-family: var(--font-title); font-weight: 800; color: var(--gold); }
.rvl-n { font-size: 12px; color: var(--muted); }
.rvl-res .card { cursor: pointer; }
/* 4) Hologram nghiêng theo tay: thẻ xoay 3D, dải cầu vồng + vệt sáng chạy theo vị trí ngón tay */
.card.tiltable { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; touch-action: none; }
.card.tiltable.tilting { transition: transform .06s linear; }
.card.holo.tilting .front::after {
animation: none; opacity: .5;
background:
radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.6), rgba(255,255,255,0) 30%),
linear-gradient(115deg, transparent 20%, rgba(255,120,220,.55) 35%, rgba(120,220,255,.55) 45%, rgba(140,255,170,.5) 52%, rgba(255,240,140,.6) 60%, transparent 75%);
background-size: 100% 100%, 220% 220%;
background-position: 0 0, var(--hx) var(--hy);
}
/* Lật thẻ khi mở gói: phẳng (scaleX) thay vì xoay 3D — đổi mặt ngay lúc thẻ khép lại, có chớp sáng khi mở ra */
.rvl-card { transition: transform .17s ease-in; }
.rvl-card.shut { transform: scaleX(0); }
.rvl-card.flash::after { content: ''; position: absolute; inset: -6%; border-radius: 8%; pointer-events: none; z-index: 3;
background: radial-gradient(ellipse, rgba(255,250,225,.95), rgba(255,226,140,.35) 45%, transparent 70%); animation: rvlFlash .55s ease-out forwards; }
@keyframes rvlFlash { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.15); } }
.card.noanim .inner { transition: none !important; }
.card.noanim .front > *, .card.noanim .front::before, .card.noanim .back > * { transition: none !important; }
/* Chỉ dẫn xé gói: đốm sáng vàng có đuôi sao chổi chạy dọc đường xé + mũi tên vàng nhấp nháy (không dùng hình bàn tay) */
.pack .tline .tl-hand { top: -7px; width: 14px; height: 14px; border-radius: 50%; font-size: 0;
background: radial-gradient(circle, #fffef4 0 30%, #ffe28a 55%, rgba(255,200,90,0) 72%);
box-shadow: 0 0 10px 3px rgba(255,226,140,.9), 0 0 24px 6px rgba(255,200,90,.55); filter: none; }
.pack .tline .tl-hand::before { content: ''; position: absolute; right: 9px; top: 5px; width: 54px; height: 4px; border-radius: 4px;
background: linear-gradient(90deg, rgba(255,226,140,0), rgba(255,236,170,.85)); filter: blur(1px); }
.pack .tline .tl-arrows { position: absolute; right: 10%; top: 6px; font-style: normal; font-weight: 900; font-size: 22px; letter-spacing: -2px;
color: #ffe28a; text-shadow: 0 0 8px rgba(255,214,110,.9), 0 2px 2px rgba(0,0,0,.6); animation: tlArrows 1.2s ease-in-out infinite; }
.pack.ripping .tl-arrows, .pack.torn .tl-arrows { opacity: 0; transition: opacity .2s; }
@keyframes tlArrows { 0%, 100% { opacity: .35; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(3px); } }
/* Chọn ngôn ngữ Việt / Anh */
.langsw { display: flex; gap: 6px; justify-content: center; margin: 10px auto 0; }
.langsw button { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(242,207,107,.45); background: rgba(13,27,64,.75); color: #e3e9f6; font: 600 13px var(--font-ui); cursor: pointer; }
.langsw button.on { background: linear-gradient(180deg, #f6d77f, #c9a043); color: #2a1606; border-color: #fff1c2; }
.icon-btn.langbtn { font: 800 12px var(--font-ui); letter-spacing: .04em; color: var(--gold); }
/* ===== Hướng dẫn bắt buộc: tối toàn màn, khoét sáng nút cần bấm, bong bóng chữ ===== */
.coach { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.coach .cb { position: fixed; background: rgba(4,8,26,.72); pointer-events: auto; }
.coach:not(.force) .cb { background: rgba(4,8,26,.45); }
.coach-ring { position: fixed; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px #f2cf6b, 0 0 22px 6px rgba(242,207,107,.65); animation: coachPulse 1.4s ease-in-out infinite; }
@keyframes coachPulse { 50% { box-shadow: 0 0 0 5px #fff1c2, 0 0 34px 12px rgba(242,207,107,.85); } }
.coach-tip { position: fixed; max-width: min(320px, calc(100vw - 24px)); display: flex; gap: 10px; align-items: flex-start; pointer-events: auto;
padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #24448f, #0f1f4a); border: 1.5px solid #f2cf6b; color: #fbf8ef;
font-size: 14px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: coachIn .3s ease-out; }
.coach-tip b { color: #ffe08a; }
.coach-tip .btn { margin-top: 8px; }
.coach-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #3a2206;
background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c14e 50%, #a8740f); box-shadow: 0 0 10px rgba(242,207,107,.8); }
.coach-ico.big { width: 54px; height: 54px; font-size: 26px; margin: 0 auto 8px; }
@keyframes coachIn { from { opacity: 0; transform: translateY(8px); } }
.coach.msg { pointer-events: auto; background: rgba(4,8,26,.78); display: grid; place-items: center; padding: 16px; }
.coach-card { width: min(380px, 100%); padding: 20px 18px 16px; border-radius: 18px; text-align: center; color: #fbf8ef;
background: linear-gradient(180deg, #24448f, #0f1f4a); border: 1.5px solid #f2cf6b; box-shadow: 0 0 40px rgba(242,207,107,.3); animation: coachIn .3s ease-out; }
.coach-card h3 { margin: 0 0 8px; color: #ffe08a; font-family: var(--font-title); }
.coach-card p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; }
.coach-card b { color: #ffe08a; }