/* ============================================================
   GAME EVENT UI — Light / Modern / Garena·FreeFire style
   Bảng màu: trắng/kem nền, cam đậm accent, chữ tối rõ ràng
   ============================================================ */
:root {
    --g-bg:        #fff7ef;
    --g-bg-2:      #ffffff;
    --g-ink:       #2a2118;
    --g-ink-soft:  #6b5d4d;
    --g-orange:    #ff6a00;
    --g-orange-d:  #e85d00;
    --g-amber:     #ffb020;
    --g-line:      #f0e2d0;
    --g-card:      #ffffff;
    --g-shadow:    0 10px 30px rgba(255,106,0,.12);
    --g-shadow-lg: 0 20px 50px rgba(255,106,0,.20);
    --rar-common:    #8a93a6;
    --rar-rare:      #2a8fff;
    --rar-epic:      #9b4dff;
    --rar-legendary: #ff8a00;
    --rar-vip:       #ff3d6e;
}

.game-wrap, .game-wrap * { box-sizing: border-box; }
.game-wrap { font-family: 'Be Vietnam Pro', system-ui, sans-serif; color: var(--g-ink); }

/* ---------- Hero ---------- */
.game-hero {
    position: relative; text-align: center; padding: 3rem 1.25rem 2.5rem;
    background:
        radial-gradient(1200px 400px at 50% -120px, #ffe8d0 0%, transparent 70%),
        linear-gradient(180deg, #fff3e6, #fff7ef);
    border-radius: 24px; overflow: hidden; margin-bottom: 1.75rem;
    border: 1px solid var(--g-line);
}
.game-hero::before, .game-hero::after {
    content: ''; position: absolute; border-radius: 50%; opacity: .35;
}
.game-hero::before { width: 90px; height: 90px; background: var(--g-amber); top: 18px; left: 8%; animation: floatY 6s ease-in-out infinite; }
.game-hero::after  { width: 60px; height: 60px; background: var(--g-orange); bottom: 22px; right: 10%; animation: floatY 5s ease-in-out infinite reverse; }
.game-hero h1 {
    font-family: 'Orbitron', sans-serif; font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--g-ink);
    margin: 0 0 .6rem; letter-spacing: .5px;
}
.game-hero h1 .accent { color: var(--g-orange); }
.game-hero p { color: var(--g-ink-soft); max-width: 580px; margin: 0 auto; font-size: 1.02rem; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particles i {
    position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--g-amber); opacity: .5; animation: rise linear infinite;
}
@keyframes rise { to { transform: translateY(-560px) rotate(360deg); opacity: 0; } }

/* ---------- Box grid ---------- */
.box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.4rem; }
.game-box-card {
    position: relative; background: var(--g-card); border: 1px solid var(--g-line);
    border-radius: 20px; padding: 1.6rem 1.4rem; text-align: center;
    box-shadow: 0 6px 18px rgba(180,140,90,.10);
    transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, border-color .35s;
    overflow: hidden; text-decoration: none; color: inherit; display: block;
}
.game-box-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,176,32,.10), transparent 55%);
    opacity: 0; transition: opacity .35s;
}
.game-box-card:hover {
    transform: translateY(-10px) scale(1.015); box-shadow: var(--g-shadow-lg);
    border-color: #ffd9ad; color: inherit;
}
.game-box-card:hover::after { opacity: 1; }
.game-box-card .ribbon {
    position: absolute; top: 14px; right: -34px; background: var(--g-orange); color: #fff;
    font-size: .68rem; font-weight: 800; letter-spacing: .5px; padding: .25rem 2.4rem;
    transform: rotate(45deg); box-shadow: 0 4px 10px rgba(255,106,0,.35);
}
.gbox-img {
    width: 116px; height: 116px; object-fit: contain; margin: 0 auto 1rem; display: block;
    filter: drop-shadow(0 10px 14px rgba(255,106,0,.25)); animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
.gbox-emoji { font-size: 3.4rem; margin-bottom: .6rem; }
.gbox-name { font-size: 1.18rem; font-weight: 800; color: var(--g-ink); margin-bottom: .35rem; }
.gbox-desc { font-size: .86rem; color: var(--g-ink-soft); min-height: 46px; margin-bottom: .8rem; line-height: 1.5; }
.gbox-price { font-size: 1.35rem; font-weight: 900; color: var(--g-orange); margin-bottom: .9rem; }
.gbox-plays { font-size: .76rem; color: #a08a72; margin-top: .65rem; }

/* ---------- Shine button ---------- */
.btn-game {
    position: relative; display: inline-block; width: 100%;
    padding: .85rem 1rem; border: none; border-radius: 14px;
    background: linear-gradient(135deg, var(--g-orange), var(--g-amber));
    color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .5px;
    cursor: pointer; text-decoration: none; box-shadow: 0 8px 20px rgba(255,106,0,.32);
    overflow: hidden; transition: transform .15s, box-shadow .25s, filter .2s;
}
.btn-game::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0%{left:-120%} 55%,100%{left:130%} }
.btn-game:hover { transform: translateY(-2px); filter: brightness(1.05); color:#fff; box-shadow: 0 12px 26px rgba(255,106,0,.42); }
.btn-game:active { transform: translateY(0) scale(.98); }
.btn-game:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.3); }
.btn-game.ghost { background: #fff; color: var(--g-orange); border: 2px solid var(--g-orange); box-shadow: none; }
.btn-game.ghost::before { display: none; }

/* ---------- Rarity ---------- */
.rarity-common{color:var(--rar-common)!important}
.rarity-rare{color:var(--rar-rare)!important}
.rarity-epic{color:var(--rar-epic)!important}
.rarity-legendary{color:var(--rar-legendary)!important}
.rarity-vip{color:var(--rar-vip)!important}
.badge-rarity { display:inline-block; padding:.18rem .65rem; border-radius:999px;
    font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.badge-rarity.common{background:#eef0f4;color:var(--rar-common)}
.badge-rarity.rare{background:#e3f0ff;color:var(--rar-rare)}
.badge-rarity.epic{background:#f1e6ff;color:var(--rar-epic)}
.badge-rarity.legendary{background:#fff0db;color:var(--rar-legendary)}
.badge-rarity.vip{background:#ffe4ec;color:var(--rar-vip)}

/* ---------- Play stage ---------- */
.play-stage {
    position: relative; background: var(--g-bg-2); border: 1px solid var(--g-line);
    border-radius: 22px; padding: 2.25rem 1.75rem; text-align: center;
    box-shadow: var(--g-shadow); overflow: hidden;
}
.play-stage h2 { font-family: 'Orbitron', sans-serif; color: var(--g-ink); font-weight: 800; }
.stage-back {
    position: absolute; left: 1.1rem; top: 1.1rem; z-index: 5; background: #fff;
    border: 1px solid var(--g-line); color: var(--g-ink-soft); padding: .4rem .85rem;
    border-radius: 10px; font-size: .85rem; text-decoration: none; transition: .2s;
}
.stage-back:hover { background: #fff3e6; color: var(--g-orange); }

/* ---------- Box open ---------- */
.box-3d { width: 220px; height: 220px; margin: 1.5rem auto; position: relative; }
.box-3d img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(255,106,0,.30)); transition: transform .3s; }
.box-3d.shaking img { animation: shake .4s ease-in-out infinite; }
@keyframes shake { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-8deg) scale(1.06)} 75%{transform:rotate(8deg) scale(1.06)} }
.box-3d.opening img { animation: burst .6s ease-out forwards; }
@keyframes burst { 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(0);opacity:0} }
.box-glow { position: absolute; inset:-30%; border-radius:50%;
    background: radial-gradient(circle, rgba(255,176,32,.45), transparent 60%);
    opacity:0; transition: opacity .5s; pointer-events:none; }
.box-glow.on { opacity:1; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50%{transform:scale(1.12)} }

/* ---------- Prize reveal ---------- */
.prize-reveal { opacity:0; transform:scale(.6) translateY(10px); transition: all .6s cubic-bezier(.2,1.5,.4,1); }
.prize-reveal.show { opacity:1; transform:none; }
.prize-card { display:inline-block; padding:1.8rem 2.6rem; border-radius:20px;
    background: linear-gradient(180deg,#fff,#fff7ee); border:2px solid var(--g-orange);
    box-shadow: 0 16px 40px rgba(255,106,0,.28); }
.prize-card.legendary, .prize-card.vip { border-color:var(--g-amber);
    box-shadow: 0 20px 55px rgba(255,176,32,.5); animation: jp 1.1s ease-in-out infinite; }
@keyframes jp { 50%{box-shadow:0 24px 70px rgba(255,176,32,.75)} }
.prize-card img { width:120px; height:120px; object-fit:contain; margin-bottom:.9rem; }
.prize-card .pname { font-size:1.5rem; font-weight:900; }
.prize-card .pval  { color:var(--g-orange-d); font-weight:700; margin-top:.3rem; }
.prize-card .to-inv { margin-top:.7rem; font-size:.85rem; color:var(--g-ink-soft); }

/* ---------- Wheel ---------- */
.wheel-wrap { position:relative; width:380px; max-width:92vw; aspect-ratio:1; margin:1.5rem auto; }
#luckyWheel { width:100%; height:100%; border-radius:50%; background:#fff; border:10px solid #fff;
    box-shadow: 0 0 0 6px var(--g-orange), 0 18px 40px rgba(255,106,0,.30); }
.wheel-pointer { position:absolute; top:-10px; left:50%; transform:translateX(-50%);
    width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent;
    border-top:40px solid var(--g-orange); filter:drop-shadow(0 4px 6px rgba(255,106,0,.5)); z-index:6; }
.wheel-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:78px; height:78px; border-radius:50%;
    background:linear-gradient(135deg,var(--g-orange),var(--g-amber));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;
    font-family:'Orbitron',sans-serif; font-size:.9rem;
    box-shadow:0 6px 16px rgba(255,106,0,.45); border:5px solid #fff; z-index:5; }

/* ---------- Buff terminal ---------- */
.hacker-terminal { background:#1c2230; border-radius:14px; padding:1.25rem 1.4rem;
    font-family:'JetBrains Mono','Courier New',monospace; text-align:left; color:#cfe3ff;
    min-height:230px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.hacker-terminal .line { margin:.28rem 0; font-size:.86rem; white-space:pre-wrap; }
.hacker-terminal .ok { color:#56e08a; }
.hacker-terminal .cursor::after { content:'▌'; animation:blink 1s steps(2) infinite; color:#ffb020; }
@keyframes blink { 50%{opacity:0} }
.buff-progress { height:26px; background:#f0e2d0; border-radius:999px; overflow:hidden;
    margin:1rem 0; box-shadow: inset 0 2px 5px rgba(0,0,0,.08); }
.buff-progress > span { display:flex; align-items:center; justify-content:flex-end;
    height:100%; width:0; padding-right:8px; color:#fff; font-size:.72rem; font-weight:700;
    background:linear-gradient(90deg,var(--g-orange),var(--g-amber));
    transition:width .35s; box-shadow:0 0 12px rgba(255,176,32,.6); }

/* ---------- Winner feed ---------- */
.winner-feed { background:var(--g-bg-2); border:1px solid var(--g-line); border-radius:18px;
    padding:1.1rem 1.2rem; box-shadow:0 6px 18px rgba(180,140,90,.08); }
.winner-feed h3 { font-family:'Orbitron',sans-serif; color:var(--g-ink); font-size:1.02rem;
    margin:0 0 .9rem; display:flex; align-items:center; gap:.45rem; }
.winner-feed h3 i { color:var(--g-orange); }
.winner-list { list-style:none; padding:0; margin:0; max-height:430px; overflow-y:auto; }
.winner-list li { display:flex; align-items:center; gap:.6rem; padding:.6rem .35rem;
    border-bottom:1px dashed var(--g-line); font-size:.87rem; animation:slideIn .5s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.winner-list .wname { color:var(--g-ink); font-weight:700; }
.winner-list .wprize { margin-left:auto; font-weight:800; }
.winner-list .dot { width:8px; height:8px; border-radius:50%; background:var(--g-orange); flex:0 0 8px; }

/* ---------- Rate table ---------- */
.prize-rate-table { width:100%; border-collapse:collapse; margin-top:1.1rem; background:#fff;
    border-radius:12px; overflow:hidden; }
.prize-rate-table th, .prize-rate-table td { padding:.65rem .75rem; border-bottom:1px solid var(--g-line);
    font-size:.87rem; text-align:left; }
.prize-rate-table th { background:#fff4e8; color:var(--g-orange-d); text-transform:uppercase;
    font-size:.72rem; letter-spacing:.5px; font-weight:800; }
.prize-rate-table tr:last-child td { border-bottom:none; }

/* ---------- Inventory ---------- */
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.1rem; }
.inv-card { background:#fff; border:1px solid var(--g-line); border-radius:16px; padding:1.1rem;
    text-align:center; position:relative; transition:transform .3s, box-shadow .3s;
    box-shadow:0 5px 14px rgba(180,140,90,.08); }
.inv-card:hover { transform:translateY(-6px); box-shadow:var(--g-shadow); }
.inv-card.is-locked { opacity:.62; }
.inv-card .inv-rar { position:absolute; top:10px; left:10px; }
.inv-card .inv-img { width:78px; height:78px; object-fit:contain; margin:.4rem auto .7rem;
    filter:drop-shadow(0 6px 8px rgba(255,106,0,.2)); }
.inv-card .inv-emoji { font-size:3rem; margin:.3rem 0 .5rem; }
.inv-card .inv-name { font-weight:800; font-size:.98rem; margin-bottom:.25rem; color:var(--g-ink); }
.inv-card .inv-val { color:var(--g-orange); font-weight:700; font-size:.9rem; margin-bottom:.7rem; }
.inv-status { display:inline-block; font-size:.7rem; font-weight:800; padding:.16rem .6rem;
    border-radius:999px; margin-bottom:.6rem; }
.inv-status.available{background:#e6f8ec;color:#1f9d55}
.inv-status.withdraw_pending{background:#fff0db;color:#d98300}
.inv-status.used{background:#eef0f4;color:#7a869a}
.inv-status.withdrawn{background:#e3f0ff;color:#2a8fff}
.inv-status.rejected{background:#ffe4e4;color:#e23d3d}
.inv-status.expired{background:#eef0f4;color:#9aa3b2}
.inv-actions { display:flex; gap:.5rem; }
.inv-actions .btn-game { padding:.5rem; font-size:.82rem; border-radius:10px; }

/* ---------- Tabs ---------- */
.g-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.g-tab { padding:.55rem 1.1rem; border-radius:999px; font-weight:700; font-size:.9rem;
    background:#fff; border:1px solid var(--g-line); color:var(--g-ink-soft);
    text-decoration:none; transition:.2s; cursor:pointer; }
.g-tab:hover { border-color:#ffd2a3; color:var(--g-orange); }
.g-tab.active { background:linear-gradient(135deg,var(--g-orange),var(--g-amber)); color:#fff;
    border-color:transparent; box-shadow:0 6px 14px rgba(255,106,0,.3); }

/* ---------- Loading ---------- */
.g-loading { position:fixed; inset:0; z-index:99990; display:none; align-items:center;
    justify-content:center; background:rgba(255,247,239,.86); backdrop-filter:blur(4px); }
.g-loading.show { display:flex; }
.g-loading .ring { width:76px; height:76px; border-radius:50%; border:7px solid #ffe0c0;
    border-top-color:var(--g-orange); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.g-loading p { position:absolute; margin-top:130px; color:var(--g-orange-d); font-weight:700; }

/* ---------- Confetti ---------- */
.confetti-piece { position:fixed; width:11px; height:16px; top:-20px; z-index:99999;
    pointer-events:none; will-change:transform; border-radius:2px; }
@keyframes confettiFall { to { transform:translateY(106vh) rotate(720deg); opacity:.85; } }

@media (max-width:640px){ .box-3d{width:160px;height:160px} .game-hero{padding:2.2rem 1rem} }