:root {
  --bg: #07111f;
  --bg2: #0d1730;
  --panel: rgba(13, 22, 40, 0.72);
  --line: rgba(255,255,255,0.08);
  --text: #ecf4ff;
  --muted: #99abd4;
  --gold: #ffcc63;
  --gold-2: #ff9f43;
  --cyan: #4de7ff;
  --emerald: #2ff7b7;
  --danger: #ff6978;
  --shadow: 0 25px 80px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: radial-gradient(circle at top, #132647, var(--bg)); color: var(--text); font-family: 'Be Vietnam Pro', sans-serif; }
a { color: inherit; text-decoration: none; }
body { min-height: 100vh; }
.page-shell { position: relative; overflow: hidden; padding: 24px; max-width: 1500px; margin: 0 auto; }
.bg-orbs { position: fixed; border-radius: 999px; filter: blur(80px); opacity: .18; pointer-events: none; }
.orb-1 { width: 340px; height: 340px; background: var(--cyan); top: -40px; left: -60px; }
.orb-2 { width: 360px; height: 360px; background: var(--gold); top: 20%; right: -80px; }
.orb-3 { width: 300px; height: 300px; background: #8c4dff; bottom: 0; left: 20%; }
.glass { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.topbar, .footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 22px; gap: 20px; }
.topbar { position: sticky; top: 12px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #241700; font-weight: 800; font-size: 26px; box-shadow: 0 10px 25px rgba(255, 180, 77, .3); }
.brand small { display: block; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; padding: 12px 18px; font-weight: 700; border: 1px solid transparent; transition: .25s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1f1608; box-shadow: 0 12px 30px rgba(255, 179, 70, .25); }
.btn-secondary { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--text); }
.btn-large { min-width: 200px; padding: 14px 22px; }
.wallet-pill, .user-pill, .chip, .eyebrow { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.04); }
.eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.flash { margin: 18px 0 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); }
.flash.success { background: rgba(47,247,183,.1); color: #b7ffe4; }
.flash.error { background: rgba(255,105,120,.1); color: #ffd2d7; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; padding: 42px; margin-top: 28px; border-radius: 34px; }
.premium-panel { background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero h1, .page-heading h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; margin: 18px 0; max-width: 860px; }
.hero p { color: var(--muted); font-size: 18px; max-width: 700px; }
.hero-actions { display: flex; gap: 14px; margin: 28px 0; flex-wrap: wrap; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.stat-card { border-radius: 22px; padding: 20px; }
.stat-card strong { display: block; font-size: 28px; margin-bottom: 8px; }
.hero-visual { display: flex; align-items: center; justify-content: center; }
.scene-card { width: min(520px, 100%); aspect-ratio: 1 / 1; position: relative; border-radius: 38px; background: radial-gradient(circle at 30% 20%, rgba(255,206,102,.22), rgba(0,0,0,0) 40%), linear-gradient(180deg, #12213d, #09101d); overflow: hidden; border: 1px solid var(--line); }
.glow-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 100px rgba(77,231,255,.2), inset 0 0 70px rgba(255,204,99,.18); animation: spin 18s linear infinite; }
.gold-stack { position: absolute; bottom: 18%; left: 18%; width: 220px; height: 100px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #fff4bd, #ffcf58 30%, #ba6a0f 90%); filter: drop-shadow(0 20px 50px rgba(255,190,70,.4)); }
.crystal { position: absolute; width: 80px; height: 120px; clip-path: polygon(50% 0%, 100% 35%, 75% 100%, 25% 100%, 0% 35%); }
.crystal-a { right: 18%; top: 24%; background: linear-gradient(180deg, #b9fff8, #41dfff 55%, #0f7bbf); }
.crystal-b { right: 30%; bottom: 16%; width: 58px; height: 88px; background: linear-gradient(180deg, #fff2b0, #ffbf3c 55%, #cc6f17); }
.water-shine { position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(77,231,255,.12), rgba(77,231,255,.02)); }
.hero-badge { position: absolute; top: 22px; left: 22px; border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.08); }
.section-grid { display: grid; gap: 24px; margin-top: 30px; }
.two-col { grid-template-columns: repeat(2, 1fr); }
.feature-card, .panel, .game-card, .auth-card, .game-header, .game-sidebar { border-radius: 28px; padding: 28px; }
.premium-border { position: relative; overflow: hidden; }
.premium-border::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(255,204,99,.75), rgba(77,231,255,.45), rgba(255,255,255,.08)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.feature-list, .loot-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.feature-list li, .loot-list div, .leader-row, .winner-item, .mini-leaderboard div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04); }
.leader-list, .winner-ticker, .mini-leaderboard { display: grid; gap: 10px; }
.page-heading { padding: 34px 4px 12px; }
.game-grid, .leaderboard-columns, .treasure-layout, .fish-layout { display: grid; gap: 24px; }
.game-grid { grid-template-columns: repeat(2, 1fr); }
.leaderboard-columns { grid-template-columns: repeat(3, 1fr); }
.game-card { background: rgba(255,255,255,.03); }
.game-art { height: 260px; border-radius: 22px; margin-bottom: 20px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.treasure-art { background: radial-gradient(circle at top, rgba(255,208,96,.35), transparent 35%), linear-gradient(180deg, #211400, #0c101a); }
.treasure-art::before { content: ''; position: absolute; inset: auto 16% 16%; height: 90px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #fff3ad, #f6b539 35%, #9d5d12 100%); box-shadow: 0 0 45px rgba(255,200,90,.35); }
.ocean-art { background: radial-gradient(circle at top, rgba(77,231,255,.26), transparent 35%), linear-gradient(180deg, #02152d, #07111f 65%); }
.ocean-art::before, .ocean-art::after { content: ''; position: absolute; border-radius: 999px; background: linear-gradient(180deg, #8bf2ff, #26abc8); }
.ocean-art::before { width: 120px; height: 50px; top: 30%; left: 18%; transform: rotate(8deg); }
.ocean-art::after { width: 90px; height: 38px; top: 55%; right: 20%; transform: rotate(-12deg); }
.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 220px); }
.auth-card { width: min(520px, 100%); display: grid; gap: 18px; }
.auth-card label { display: grid; gap: 8px; color: var(--muted); }
.auth-card input { width: 100%; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text); }
.game-page { margin-top: 26px; }
.game-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.session-box { display: grid; gap: 10px; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.04); min-width: 280px; }
.treasure-layout { grid-template-columns: 1.3fr .7fr; margin-top: 24px; }
.mine-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.mine-cell { position: relative; min-height: 110px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)); cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: .25s ease; }
.mine-cell:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 35px rgba(0,0,0,.22); }
.mine-cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 45%); }
.mine-cell.revealed { cursor: default; background: linear-gradient(180deg, rgba(255,204,99,.14), rgba(0,0,0,.15)); }
.mine-cell .icon { font-size: 34px; z-index: 1; }
.result-box { margin-top: 18px; min-height: 120px; border-radius: 18px; padding: 16px; background: rgba(255,255,255,.04); color: var(--muted); }
.fish-layout { grid-template-columns: 1.35fr .65fr; margin-top: 24px; }
.fish-canvas-wrap { position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #0d4061, #04111f 65%); }
#fishCanvas { width: 100%; height: auto; display: block; background: linear-gradient(180deg, rgba(80,214,255,.18), rgba(0,0,0,.05)); }
.fish-hud { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: rgba(4, 18, 30, .6); backdrop-filter: blur(12px); }
.fish-hud input[type=range] { width: 180px; }
.footer { margin: 34px 0 12px; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.treasure-theme h2 { color: #ffe19a; }
.ocean-theme h2 { color: #92ecff; }
.not-found { text-align: center; padding-top: 100px; }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@media (max-width: 1120px) {
  .hero, .two-col, .game-grid, .leaderboard-columns, .treasure-layout, .fish-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .page-shell { padding: 14px; }
  .topbar, .footer, .game-header { flex-direction: column; align-items: stretch; }
  .stats-grid { grid-template-columns: 1fr; }
  .mine-board { grid-template-columns: repeat(3, 1fr); }
  .hero, .panel, .feature-card, .auth-card, .game-sidebar, .game-card { padding: 20px; }
  .scene-card { aspect-ratio: 1 / .85; }
}


.fish-canvas-wrap.arcade { box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06); background: radial-gradient(circle at 50% 0%, rgba(120,242,255,.16), rgba(0,0,0,0) 28%), linear-gradient(180deg, #0c4e73, #05111d 68%); }
.fish-topbar { position: absolute; left: 18px; right: 18px; top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; z-index: 2; }
.fish-badge { padding: 12px 16px; border-radius: 16px; background: rgba(4, 18, 30, .62); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); box-shadow: 0 14px 30px rgba(0,0,0,.18); }
.fish-badge strong { display: block; font-size: 22px; margin-top: 4px; }
.fish-badge span { color: var(--muted); font-size: 13px; }
.fish-badge.center { text-align: center; }
.fish-badge.right { text-align: right; }
.fish-hud.arcade { padding: 16px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(4,18,30,.78), rgba(5,23,38,.64)); border: 1px solid rgba(255,255,255,.08); }
.fish-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fish-slider { display: grid; gap: 4px; min-width: 210px; }
.fish-slider .range-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.fish-slider input[type=range] { width: 100%; }
.fish-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fish-toggle { border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); color: var(--text); font-weight: 700; cursor: pointer; }
.fish-toggle.active { background: linear-gradient(135deg, rgba(255,204,99,.22), rgba(77,231,255,.16)); border-color: rgba(255,204,99,.4); box-shadow: 0 12px 28px rgba(255,204,99,.12); }
.fish-status-box { text-align: right; display: grid; gap: 5px; min-width: 240px; }
.fish-status-box small { color: var(--muted); }
.fish-side-grid { display: grid; gap: 14px; }
.fish-panel-title { margin: 0 0 10px; }
.room-badges { display: grid; gap: 10px; }
.room-badge, .fish-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 15px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04); }
.room-badge strong { color: var(--gold); }
#fishCanvas { cursor: crosshair; }
@media (max-width: 900px) {
  .fish-topbar { grid-template-columns: 1fr; }
  .fish-hud.arcade { flex-direction: column; align-items: stretch; }
  .fish-status-box { text-align: left; min-width: 0; }
}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}.hero-art-rich{position:relative;min-height:320px}.glow-panel{position:absolute;right:0;bottom:0;left:60px;padding:24px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 80px rgba(0,0,0,.35)}.coin{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c9,#ffcf59 58%,#9f6400 100%);box-shadow:0 0 40px rgba(255,195,0,.24)}.coin-1{width:84px;height:84px;top:28px;right:120px}.coin-2{width:52px;height:52px;top:118px;right:22px}.coin-3{width:64px;height:64px;top:10px;right:10px}.compact{grid-template-columns:repeat(3,1fr)}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{padding:22px;border-radius:26px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.room-list{display:grid;gap:12px}.room-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:18px}.room-row small{display:block;color:var(--muted);margin-top:4px}.room-row-big{align-items:flex-start}.card-art{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 35%),linear-gradient(135deg,#6811ff,#1a0e57 45%,#ff7d7d)}.card-theme .btn{background:linear-gradient(135deg,#6d29ff,#df4e73)}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.auth-form{display:grid;gap:12px}.input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--text)}.input:focus{outline:none;border-color:rgba(255,204,99,.45);box-shadow:0 0 0 4px rgba(255,204,99,.08)}.btn-google{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:16px;background:#fff;color:#111;font-weight:800;border:none}.treasure-panel{padding:24px}.treasure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.treasure-cell{height:104px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,196,74,.15),rgba(0,0,0,.2));color:#fff;font-size:30px;font-weight:800;cursor:pointer;transition:.2s transform,.2s box-shadow}.treasure-cell:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,190,51,.16)}.treasure-cell.opened{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}.treasure-result{margin-top:16px;padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.muted{color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:grid;gap:8px;color:var(--muted);font-size:14px}.checkbox-line{grid-column:1/-1;display:flex!important;align-items:center;gap:10px}.tienlen-lobby-grid{align-items:start}.tienlen-room-shell{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.tienlen-board{display:grid;gap:16px}.player-slots{display:grid;grid-template-columns:1fr 1fr;gap:14px}.player-slot{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.player-slot.active{box-shadow:0 0 0 2px rgba(255,204,99,.4);border-color:rgba(255,204,99,.45)}.player-slot .seat{font-size:12px;color:var(--muted)}.pile-area{padding:22px;border-radius:22px;text-align:center}.pile-title{color:var(--muted);margin-bottom:10px}.pile-cards{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:84px}.turn-info{margin-top:8px;color:var(--gold);font-weight:700}.history-box{margin-top:14px;padding:14px;border-radius:16px;min-height:90px;display:grid;gap:8px}.history-item{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}.hand-wrap{margin-top:16px}.hand-title{margin-bottom:10px;font-weight:800}.player-hand{display:flex;flex-wrap:wrap;gap:10px}.card-chip{min-width:62px;padding:12px 10px;border-radius:16px;background:linear-gradient(180deg,#fff,#ececec);border:1px solid rgba(0,0,0,.1);color:#111;font-weight:800;text-align:center;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,.14)}.card-chip.red{color:#d63c57}.card-chip.selected{transform:translateY(-10px);box-shadow:0 16px 34px rgba(255,204,99,.28)}.action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}.room-chat{display:grid;grid-template-rows:auto 1fr auto}.chat-box{min-height:520px;max-height:520px;overflow:auto;display:grid;gap:10px;padding-right:4px}.chat-item{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}.chat-item small{display:block;color:var(--muted);margin-bottom:6px}.chat-form{display:flex;gap:10px;margin-top:12px}.btn-sm{padding:10px 14px;border-radius:14px}.winner-feed{display:grid;gap:10px}.winner-item{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
@media (max-width: 980px){.hero-grid,.dashboard-grid,.auth-grid,.tienlen-room-shell,.tienlen-lobby-grid{grid-template-columns:1fr}.compact,.form-grid,.player-slots{grid-template-columns:1fr 1fr}.chat-box{min-height:300px;max-height:300px}.treasure-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 640px){.compact,.form-grid,.player-slots,.treasure-grid{grid-template-columns:1fr 1fr}.nav{flex-wrap:wrap}.room-row,.chat-form,.action-row{flex-direction:column;align-items:stretch}.card-chip{min-width:54px;padding:10px 8px;font-size:14px}}