:root{color-scheme:dark;--bg:#07100d;--panel:#101d19;--panel2:#182923;--gold:#d9bb68;--gold2:#a9893c;--text:#f7f2e5;--muted:#a8b7ae;--danger:#a93e48;--line:#34483e;--nav-height:66px;--top-height:68px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020403;color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.38;cursor:not-allowed}
#app{width:100%;height:100dvh;max-width:480px;margin:0 auto;position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border-left:1px solid #1a2922;border-right:1px solid #1a2922}
.topbar{height:var(--top-height);flex:0 0 var(--top-height);display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:7px;align-items:center;padding:7px 9px;background:linear-gradient(180deg,#17241e,#07100d);border-bottom:1px solid var(--gold2);z-index:5}
.micro-label{display:block;font-size:9px;letter-spacing:1px;color:var(--muted)}
.money-panel strong{display:block;color:var(--gold);font-size:17px;margin-top:4px}
.player-panel{text-align:right;min-width:0}
.player-panel strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:3px 0}
.level-tag{color:var(--gold);font-size:10px}
.xp-label{display:flex;justify-content:space-between;gap:4px;font-size:8px;color:var(--muted);margin-bottom:7px}
.xp-label span{white-space:nowrap}
.xp-label b{color:var(--gold)}
.xp-track{height:7px;border:1px solid #64735b;border-radius:8px;background:#030705;overflow:hidden}
#xpBar{height:100%;width:0;background:linear-gradient(90deg,#9c772b,#ffe99b);transition:width .3s}
.page{display:none;flex:1;min-height:0;overflow:auto}
.page.active{display:flex;flex-direction:column}
#gamePage{overflow:hidden}
.casino-scene{flex:1;min-height:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#168276 0%,#07564c 43%,#04362f 77%,#031c19 100%);isolation:isolate}
#threeCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.18}
.dealer-banner,.shoe-decoration,.table-inscription,.dealer-area,.game-status,.player-area,.bet-panel,.game-controls{z-index:1}
.dealer-banner{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;width:46%;min-height:44px;padding:5px;background:#071b19c9;border:1px solid #46635b}
.dealer-avatar{width:34px;height:34px;object-fit:contain}
.dealer-banner strong{display:block;font-size:9px;color:#f1d878}
.dealer-banner small{display:block;margin-top:4px;font-size:7px;color:#c4d4cc}
.shoe-decoration{position:absolute;right:12%;top:8%;transform:rotate(22deg);width:45px;height:58px;display:grid;place-items:center;background:linear-gradient(145deg,#33434a,#070c10);border:3px solid #596a6d;border-radius:5px;color:#f5e5ca;font-size:32px}
.table-inscription{position:absolute;top:27%;left:10%;width:80%;text-align:center;color:#d9d78b;opacity:.82;border-bottom:1px solid #c9c77c;padding-bottom:9px}
.table-inscription span{display:block;font-size:16px;font-weight:900;letter-spacing:4px}
.table-inscription small{display:block;font-size:7px;margin-top:5px}
.dealer-area,.player-area{position:absolute;left:0;right:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.dealer-area{top:13%}
.player-area{bottom:20%}
.hand-title{font-size:10px;letter-spacing:1.5px;font-weight:bold;color:#f4e5a9;margin-bottom:7px;text-shadow:0 1px 3px #000}
.hand-title span{color:white;margin-left:7px;font-size:13px}
.cards{display:flex;justify-content:center;align-items:center;min-height:75px;gap:3px;flex-wrap:wrap;padding:0 8px}
.playing-card{width:43px;height:63px;flex:0 0 43px;border-radius:4px;background:#fffaf0;color:#1c2023;box-shadow:0 3px 7px #00140f99;border:1px solid #d6d0c4;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:3px;font-weight:900;animation:card-in .22s ease-out}
.playing-card.red{color:#c52b36}
.card-rank{font-size:15px;line-height:1}
.card-suit{text-align:center;font-size:24px;line-height:1}
.card-bottom{transform:rotate(180deg);align-self:flex-end;font-size:11px}
.playing-card.back{color:#fff;background:repeating-linear-gradient(45deg,var(--card-back,#9f252b),var(--card-back,#9f252b) 3px,#f1d5d0 3px,#f1d5d0 5px);border:3px solid #fff}
.bet-display{color:#fbe7a1;font-size:11px;margin-top:2px}
.bet-display b{font-size:14px}
.game-status{position:absolute;top:48%;left:8%;right:8%;min-height:25px;text-align:center;color:#fff6ce;font-size:11px;font-weight:bold;text-shadow:0 2px 4px #000}
.bet-panel{position:absolute;left:10px;bottom:78px;display:flex;gap:5px;align-items:center;padding:6px;background:#071b18d9;border:1px solid #587268;border-radius:5px}
.bet-panel label{font-size:9px;color:var(--gold)}
.bet-panel input{width:58px;min-width:0;padding:5px 3px;font-size:12px}
.small-btn{width:26px;height:28px;background:#253a32;border:1px solid #657d6d;border-radius:3px}
.game-controls{position:absolute;bottom:8px;left:7px;right:7px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:4px}
.action-btn{min-width:0;padding:11px 2px;border-radius:4px;border:1px solid #84909a;color:#fff;background:linear-gradient(#59647b,#202b45);font-size:9px;font-weight:900;box-shadow:0 2px 4px #0008}
.action-btn.primary{background:linear-gradient(#f5df92,#95702b);color:#17170f;border-color:#ffe9a2}
.subpage{padding:18px 13px 25px;width:100%}
.subpage h1{font-size:22px;letter-spacing:2px;color:var(--gold);margin:3px 0 10px}
.subpage h2{font-size:15px}
.subpage h3{font-size:12px;margin:0 0 9px}
.muted{font-size:12px;line-height:1.5;color:var(--muted)}
.shop-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:15px 0}
.tab-btn{border:1px solid var(--line);border-radius:5px;background:var(--panel);padding:10px 3px;font-size:10px}
.tab-btn.active{background:#604e26;border-color:var(--gold)}
.equipped-box,.settings-card{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:7px;margin-bottom:12px}
.filter-row{display:grid;grid-template-columns:1fr 115px;gap:7px;margin:12px 0}
.filter-row input,.filter-row select{width:100%;font-size:12px}
.item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.item-card{min-width:0;padding:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px}
.item-card h3{line-height:1.3;overflow-wrap:anywhere}
.item-card p{font-size:10px;line-height:1.5;color:var(--muted)}
.item-card .item-price{color:var(--gold);font-weight:bold;font-size:12px}
.item-card button{width:100%;padding:8px 3px;background:#655126;border:1px solid #b49b56;border-radius:4px;font-size:10px}
.rare-label{color:#e69bff!important;font-weight:bold}
.wide-btn{width:100%;padding:12px;margin-top:8px;background:linear-gradient(#ddc678,#8f6d2d);color:#15130b;border:1px solid #f4dc8b;border-radius:5px;font-weight:900;font-size:11px}
.settings-card>label{display:block;font-size:12px;margin:5px 0 8px}
.settings-card>input:not([type=checkbox]),.settings-card>select{width:100%}
.setting-line{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.setting-line input{accent-color:var(--gold)}
.danger{background:#762c35;color:white;border-color:#b44d56}
.danger-card p{font-size:11px;color:var(--muted);line-height:1.5}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat-card{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}
.stat-card span{display:block;color:var(--muted);font-size:10px;line-height:1.4}
.stat-card strong{display:block;color:var(--gold);font-size:20px;margin-top:8px;overflow-wrap:anywhere}
.bottom-nav{flex:0 0 var(--nav-height);height:var(--nav-height);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:linear-gradient(#17231e,#080d0b);border-top:1px solid var(--gold2);padding:5px 4px;z-index:10}
.nav-btn{min-width:0;border:0;border-radius:5px;background:transparent;color:#9daea4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px}
.nav-btn .nav-icon{font-size:20px;line-height:1}
.nav-btn.active{color:var(--gold);background:#3b3420}

/* POPUP : l'image remplit toute la fenêtre */
.modal{position:absolute;inset:0;z-index:30;background:#000b;display:grid;place-items:center;padding:24px}
.modal.hidden{display:none}
.modal-card{
 position:relative;
 isolation:isolate;
 width:100%;
 min-height:320px;
 padding:180px 16px 16px;
 display:flex;
 flex-direction:column;
 justify-content:flex-end;
 text-align:center;
 overflow:hidden;
 background:#080b09;
 border:1px solid var(--gold);
 border-radius:10px;
 box-shadow:0 12px 50px #000a;
}
.modal-card::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 background:linear-gradient(to bottom,transparent 25%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.88) 100%);
 pointer-events:none;
}
.result-image{
 position:absolute;
 inset:0;
 z-index:-1;
 display:block;
 width:100%;
 height:100%;
 max-width:none;
 max-height:none;
 margin:0;
 object-fit:cover;
 object-position:center;
 border-radius:inherit;
}
.modal-card h2,.modal-card p,.modal-card .wide-btn{
 position:relative;
 z-index:2;
}
.modal-card h2{
 color:var(--gold);
 font-size:20px;
 margin:0 0 8px;
 text-shadow:0 2px 5px #000;
}
.modal-card p{
 font-size:13px;
 line-height:1.5;
 margin:0;
 color:#fff;
 text-shadow:0 2px 5px #000;
}
.modal-card .wide-btn{
 flex-shrink:0;
}
.modal-close{
 position:absolute;
 top:7px;
 right:9px;
 z-index:3;
 border:0;
 background:#0009;
 border-radius:50%;
 width:32px;
 height:32px;
 font-size:25px;
 line-height:1;
 text-shadow:0 2px 4px #000;
}
.toast{position:absolute;bottom:75px;left:12px;right:12px;z-index:40;text-align:center;background:#172820;border:1px solid var(--gold);border-radius:5px;padding:10px;font-size:12px;display:none}
body.light-mode{--bg:#e8ede9;--panel:#f8faf8;--panel2:#e0e8e2;--text:#142019;--muted:#56675c;--line:#a9b9ac;color-scheme:light}
body.light-mode input,body.light-mode select{background:white;color:#152019}
body.no-animations *,body.no-animations *:before,body.no-animations *:after{animation:none!important;transition:none!important}
@keyframes card-in{from{transform:translateY(-14px) scale(.92);opacity:.3}to{transform:translateY(0) scale(1);opacity:1}}
@media(min-width:600px){
 #app{height:min(900px,100dvh);margin:auto;border:1px solid #2b3b32}
 body{display:flex;align-items:center;justify-content:center}
}
@media(max-height:650px){
 :root{--top-height:58px;--nav-height:57px}
 .dealer-area{top:11%}
 .player-area{bottom:19%}
 .playing-card{width:36px;height:52px;flex-basis:36px}
 .cards{min-height:60px}
 .bet-panel{bottom:65px}
 .action-btn{padding:9px 1px;font-size:8px}
 .modal-card{min-height:270px;padding-top:145px}
}