:root{
--gold:#caa24a;
--gold2:#f2d27b;
--cream:#f5efe3;
--muted:rgba(245,239,227,.72);
--line:rgba(242,210,123,.28);
}

*{box-sizing:border-box}

html,body{
margin:0;
padding:0;
overflow-x:hidden;
background:#000;
font-family:Oswald,Arial,sans-serif;
color:var(--cream);
}

.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 50% 0%,rgba(242,210,123,.16),transparent 34%),
radial-gradient(circle at 20% 85%,rgba(202,162,74,.10),transparent 35%),
linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.97));
z-index:0;
}

.app{
position:relative;
width:min(1400px,95vw);
margin:auto;
padding:20px 0 40px;
z-index:1;
}

.top{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:18px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
color:var(--cream);
text-decoration:none;
}

.brand span{
width:54px;
height:54px;
border-radius:18px;
display:grid;
place-items:center;
background:linear-gradient(180deg,#f2d27b,#caa24a 58%,#805c1a);
color:#100c05;
font-family:"Black Ops One";
font-size:24px;
}

.brand b{
font-family:"Black Ops One";
}

nav{
display:flex;
gap:10px;
flex-wrap:wrap;
}

nav a,button{
border:1px solid var(--line);
border-radius:999px;
min-height:42px;
padding:11px 15px;
background:rgba(255,255,255,.05);
color:var(--cream);
text-decoration:none;
font-weight:900;
cursor:pointer;
text-transform:uppercase;
}

button:hover,nav a:hover{
background:linear-gradient(180deg,#f2d27b,#caa24a 58%,#805c1a);
color:#100c05;
transform:translateY(-2px);
}

.hero{
display:grid;
grid-template-columns:1fr auto;
gap:20px;
align-items:end;
padding:24px;
border-radius:28px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(18,18,18,.82),rgba(0,0,0,.64));
margin-bottom:20px;
box-shadow:0 30px 90px rgba(0,0,0,.6);
}

.kicker{
font-size:12px;
letter-spacing:.2em;
font-weight:900;
color:var(--gold2);
}

h1{
font-family:"Black Ops One";
font-size:clamp(44px,8vw,92px);
line-height:.9;
margin:10px 0;
color:var(--gold2);
}

h2{
font-family:"Black Ops One";
color:var(--gold2);
margin:0 0 12px;
}

p{
color:var(--muted);
}

.status{
min-width:180px;
padding:18px;
border-radius:22px;
border:1px solid rgba(242,210,123,.2);
background:rgba(0,0,0,.4);
text-align:right;
}

.status span,.status small{
display:block;
color:#cfc6b5;
}

.status b{
display:block;
font-size:34px;
font-family:"Black Ops One";
color:var(--gold2);
}

.casino-table{
position:relative;
min-height:620px;
border-radius:54px;
border:12px solid #caa24a;
background:
radial-gradient(circle at center,#12401f 0%,#0a2814 58%,#020604 100%);
overflow:hidden;
box-shadow:
0 0 0 8px #3b2a0c,
0 30px 100px rgba(0,0,0,.7),
inset 0 0 70px rgba(255,255,255,.06);
}

.casino-table:before{
content:"";
position:absolute;
inset:18px;
border-radius:42px;
border:2px solid rgba(242,210,123,.34);
pointer-events:none;
}

.table-logo{
position:absolute;
inset:0;
display:grid;
place-items:center;
font-family:"Black Ops One";
font-size:clamp(90px,18vw,230px);
color:rgba(242,210,123,.09);
transform:rotate(-8deg);
pointer-events:none;
}

.dealer-seat,
.player-seat{
position:absolute;
width:180px;
height:80px;
display:grid;
place-items:center;
border-radius:24px;
background:rgba(0,0,0,.42);
border:1px solid rgba(242,210,123,.25);
font-weight:900;
letter-spacing:.08em;
box-shadow:0 12px 28px rgba(0,0,0,.35);
}

.dealer-seat{
top:24px;
left:50%;
transform:translateX(-50%);
}

.player-seat{
bottom:24px;
left:50%;
transform:translateX(-50%);
}

.dealer-zone,
.player-zone{
position:absolute;
left:50%;
transform:translateX(-50%);
width:min(820px,88%);
min-height:150px;
padding:18px;
border-radius:30px;
border:2px solid rgba(242,210,123,.25);
background:rgba(0,0,0,.26);
display:grid;
justify-items:center;
align-content:center;
z-index:2;
}

.dealer-zone{
top:115px;
}

.player-zone{
bottom:115px;
}

.hand{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
min-height:112px;
}

.card{
width:76px;
height:108px;
border-radius:14px;
background:linear-gradient(180deg,#fff8df,#d5bd91);
color:#111;
border:2px solid rgba(242,210,123,.8);
box-shadow:0 14px 26px rgba(0,0,0,.42);
display:grid;
place-items:center;
font-weight:900;
font-size:23px;
line-height:1.05;
text-align:center;
}

.card.red{
color:#8b1414;
}

.card.back{
background:
linear-gradient(135deg,rgba(22,16,10,.72),rgba(5,5,5,.88)),
url("../shared/assets/bg-vault-door.jpg") center/cover;
color:#f2d27b;
border-color:#caa24a;
font-family:"Black Ops One";
text-shadow:0 2px 10px rgba(0,0,0,.85);
}

.total{
margin-top:8px;
font-weight:900;
color:#f2d27b;
}

.chip-stack{
position:absolute;
right:70px;
bottom:90px;
display:flex;
gap:10px;
z-index:3;
}

.chip{
width:60px;
height:60px;
border-radius:50%;
border:6px dashed #fff;
background:radial-gradient(circle,#f2d27b,#7b5919);
box-shadow:0 10px 20px rgba(0,0,0,.45);
}

.panel{
margin-top:18px;
padding:18px;
border-radius:28px;
border:1px solid var(--line);
background:linear-gradient(180deg,rgba(17,14,9,.78),rgba(0,0,0,.70));
box-shadow:0 28px 90px rgba(0,0,0,.58);
}

.controls{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:center;
}

.bank-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

.bank-grid div{
border:1px solid rgba(242,210,123,.20);
border-radius:18px;
background:rgba(0,0,0,.38);
padding:14px;
}

.bank-grid span{
display:block;
color:var(--muted);
text-transform:uppercase;
font-weight:900;
}

.bank-grid b{
display:block;
color:var(--gold2);
font-size:28px;
font-family:"Black Ops One";
}

@media(max-width:760px){

.hero{
grid-template-columns:1fr;
}

.status{
text-align:left;
}

nav a,button{
width:100%;
}

.casino-table{
min-height:560px;
border-width:8px;
border-radius:30px;
}

.dealer-zone,
.player-zone{
width:92%;
padding:12px;
}

.dealer-zone{
top:90px;
}

.player-zone{
bottom:90px;
}

.card{
width:54px;
height:82px;
font-size:17px;
}

.chip-stack{
display:none;
}

.dealer-seat,
.player-seat{
width:120px;
height:56px;
font-size:12px;
}

.bank-grid{
grid-template-columns:1fr;
}
}
.card span{align-self:start;justify-self:start;font-size:.72em;line-height:1}
.card b{font-size:1.45em;line-height:1}
.card small{align-self:end;justify-self:end;font-size:.62em;line-height:1}
.card.back{background:linear-gradient(135deg,rgba(22,16,10,.72),rgba(5,5,5,.88)),url("../shared/assets/bg-vault-door.jpg") center/cover;color:#f2d27b;border-color:#caa24a;text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* CONSUMER LAYOUT REPAIR - BLACKJACK */
body{overflow:auto}.app{width:min(1800px,98vw);min-height:100vh;display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px}.top{height:34px;max-height:34px;margin:0}.brand span{width:32px;height:32px;border-radius:10px;font-size:15px}.brand b{font-size:13px}.hero{height:46px;max-height:46px;min-height:46px;margin:0;padding:6px 10px;border-radius:14px;align-items:center}.hero p{display:none}.kicker{font-size:9px}h1{font-size:clamp(24px,2.8vw,40px);margin:0}.status{min-width:160px;padding:6px 10px;border-radius:12px}.status b{font-size:20px}.blackjack-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;height:calc(100vh - 108px);min-height:660px}.casino-table{height:100%;min-height:660px;margin:0;border-width:10px;border-radius:46px}.blackjack-rail{display:flex;flex-direction:column;gap:10px;min-height:0}.blackjack-rail .panel{margin:0;padding:10px;border-radius:18px}.controls{display:grid;grid-template-columns:1fr;gap:8px}.controls button{min-height:42px;font-size:13px;padding:9px 10px;width:100%}.bank-grid{grid-template-columns:1fr;gap:8px}.bank-grid div{min-height:54px;padding:9px;border-radius:13px}.dealer-zone,.player-zone{left:50%;transform:translateX(-50%);width:min(860px,82%);min-height:170px}.dealer-zone{top:76px}.player-zone{bottom:54px}.hand{min-height:116px}.chip-stack,.chip{display:none!important}@media(max-width:980px){.app{display:block}.top,.hero{height:auto;max-height:none}.blackjack-layout{grid-template-columns:1fr;height:auto;min-height:0}.casino-table{height:72vh;min-height:560px}.blackjack-rail{margin-top:10px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* TARGETED HEADER / STATUS OVERLAP FIX */
.top{height:auto!important;max-height:none!important;min-height:44px!important;margin:0 0 8px!important;position:relative!important;z-index:30!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;}
.top nav,nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;}
.top nav a,nav a{min-height:38px!important;font-size:12px!important;line-height:1.1!important;padding:9px 12px!important;}
.hero{height:auto!important;max-height:none!important;min-height:66px!important;margin:0 0 10px!important;position:relative!important;z-index:20!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;}
.hero .status{align-self:center!important;min-width:180px!important;max-width:260px!important;overflow-wrap:anywhere!important;}
.blackjack-layout{height:calc(100vh - 138px)!important;}
.bank-grid b{font-size:clamp(17px,1.5vw,24px)!important;line-height:1.05!important;overflow-wrap:anywhere!important;}