:root{--bg:#14161c;--card:#1d212b;--card2:#252a36;--line:#343b4a;--txt:#eef0f5;--muted:#9aa3b5;--acc:#ff6b3d;--good:#2ecc71;--bad:#e74c3c;--warn:#f1c40f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;font-size:15px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:12.5px}.big{font-size:22px;font-weight:600}
.grow{flex:1;min-width:0}
button,input{font:inherit}
input[type=text],input:not([type]),input[type=password]{width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:#12151c;color:var(--txt);margin-top:4px}
input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--card2);color:var(--txt);padding:9px 14px;border-radius:9px;transition:.12s}
.btn:hover{background:#2f3646;border-color:#4a5368}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}.btn.primary:hover{filter:brightness(1.1)}
.btn.good{background:#1f7a4a;border-color:#1f7a4a}.btn.bad{background:#7a2a24;border-color:#7a2a24}
.small-btn{padding:4px 10px;font-size:12.5px}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;background:#2b3140;color:var(--muted)}
.chip.hot{background:#6b3a12;color:#ffd08a}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(480px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.wide{width:min(760px,94vw)}
.card label{display:block;margin:10px 0 2px;font-size:13px;color:var(--muted)}
.card h2{margin:0 0 6px}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 30% 20%,#2a1d17 0,#14161c 55%);z-index:50;overflow:auto;padding:20px}
.screen h1{font-size:clamp(28px,6vw,54px);margin:0;letter-spacing:2px}
.screen h1 span{color:var(--acc)}
.tag{margin:0;color:var(--muted);text-align:center;max-width:560px}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.sw{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}.sw.on{border-color:#fff;transform:scale(1.15)}
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0}
.dcard{border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;background:var(--card2);font-size:12.5px;color:var(--muted)}
.dcard b{display:block;color:var(--txt);font-size:15px;margin-bottom:3px}
.dcard.on{border-color:var(--acc);background:#33231c}
details{margin-top:12px}summary{cursor:pointer;color:var(--muted)}
#b-list .lob{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}
#b-list .lob:last-child{border:0}
#b-list .empty{padding:24px;text-align:center;color:var(--muted)}
#r-players{list-style:none;padding:0;margin:8px 0}#r-players li{padding:8px 10px;border-radius:8px;background:var(--card2);margin-bottom:6px;display:flex;gap:8px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.help table{width:100%;border-collapse:collapse}.help td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}.help td:first-child{white-space:nowrap;color:var(--acc);font-weight:600}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:80;flex-direction:column;gap:10px;text-align:center}
.overlay .card{text-align:center}.overlay .btn{margin:4px}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:20}
#hud-top{position:absolute;top:12px;left:12px;background:rgba(15,17,23,.78);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:260px}
#hud-top .row{display:flex;gap:10px;align-items:center;justify-content:space-between}
#hud-top .small{margin-top:6px;color:var(--muted)}
#h-time{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}
.bar{position:relative;height:22px;border-radius:8px;background:#0c0e13;border:1px solid var(--line);margin-top:8px;overflow:hidden}
#h-bar{height:100%;width:0;background:linear-gradient(90deg,#1f8a4c,#2ecc71);transition:width .3s}
#h-team{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
#feed{position:absolute;top:12px;right:12px;width:min(340px,40vw);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.fl{background:rgba(15,17,23,.82);border-left:4px solid var(--acc);padding:6px 10px;border-radius:8px;font-size:13px;max-width:100%;animation:in .2s}
.fl.good{border-color:var(--good)}.fl.bad{border-color:var(--bad)}.fl.chat{border-color:#5da9ff}
@keyframes in{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
#crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #000;opacity:.8}
#prompt{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(15,17,23,.85);border:1px solid var(--line);padding:9px 16px;border-radius:10px;font-weight:600}
#boss-warn{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:#b3261e;padding:10px 20px;border-radius:10px;font-weight:800;letter-spacing:1px;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:translateX(-50%) scale(1.07)}}
#flash{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s}
#hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:rgba(255,255,255,.7);text-shadow:0 1px 2px #000}
#chat-form{position:absolute;left:12px;bottom:36px;width:min(460px,70vw);pointer-events:auto}

/* Téléphone */
.panel{position:fixed;right:14px;bottom:14px;width:min(380px,94vw);max-height:92vh;overflow:auto;background:rgba(21,24,32,.96);border:1px solid var(--line);border-radius:16px;padding:12px;z-index:60;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.p-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.avatar{width:42px;height:42px;border-radius:50%;background:#444;display:flex;align-items:center;justify-content:center;font-weight:700}
.meters{display:grid;grid-template-columns:70px 1fr;gap:6px 8px;align-items:center;font-size:12px;color:var(--muted)}
.bar2{height:10px;border-radius:6px;background:#0c0e13;overflow:hidden}#ph-trust{height:100%;width:0;background:#f1c40f;transition:width .3s,background .3s}
.pips{display:flex;gap:3px}.pip{width:14px;height:8px;border-radius:3px;background:#3a4252}.pip.on{background:#5da9ff}
#ph-log{height:150px;overflow:auto;margin:8px 0;padding:8px;background:#0f1218;border-radius:10px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.msg{padding:6px 9px;border-radius:10px;max-width:90%;line-height:1.35}
.msg.them{background:#2b3140;align-self:flex-start}.msg.me{background:#1f4f8a;align-self:flex-end}.msg.sys{align-self:center;color:var(--muted);font-size:12px}
#ph-products{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
#ph-products button{font-size:11.5px;padding:6px 6px;text-align:left}
#ph-products button.sel{border-color:var(--acc);background:#33231c}
.row-in{display:flex;gap:6px;margin:6px 0}.row-in input{margin:0}.row-in .btn{white-space:nowrap}
.btn.mic.rec{background:#b3261e;animation:pulse2 .8s infinite alternate}
@keyframes pulse2{to{filter:brightness(1.4)}}

/* PC */
#pc{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,20,40,.55);z-index:55;padding:10px}
#pc .win{width:min(780px,96vw);height:min(520px,80vh);background:#f4f4f2;color:#222;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 70px rgba(0,0,0,.7)}
#pc .titlebar{background:#2a4a7a;color:#fff;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;font-weight:600}
#pc .addr{display:flex;gap:6px;padding:6px;background:#d3d1c7}#pc .addr input{margin:0;background:#fff;color:#222;border-color:#999}
#pc .btn{background:#fff;color:#222;border-color:#999}
#pc-boss{background:#b3261e;color:#fff;padding:7px;text-align:center;font-weight:800;animation:pulse2 .4s infinite alternate}
#pc-page{flex:1;overflow:auto;padding:14px 18px;line-height:1.5}
#pc-page a{color:#185FA5;cursor:pointer;text-decoration:underline}
#pc-page h3{margin:.2em 0 .4em}
#pc-page .g-logo{font-size:38px;font-weight:700;text-align:center;color:#185FA5;margin:18px 0 10px}
#pc-page table{border-collapse:collapse;width:100%}#pc-page td,#pc-page th{border:1px solid #bbb;padding:5px 8px;text-align:left}
#pc-page .hotrow{background:#fff0c9;font-weight:700}
#pc-page .card2{border:1px solid #bbb;border-radius:8px;padding:8px 10px;margin:6px 0;background:#fff}
#pc-page .vid{display:flex;gap:10px;align-items:center;margin:8px 0}
#pc-page .thumb{width:120px;height:68px;background:linear-gradient(135deg,#ffb84d,#d85a30);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:30px}
#pc-page .player{height:230px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:28px;flex-direction:column;gap:8px}
.catface{font-size:80px;animation:wob .6s infinite alternate}
@keyframes wob{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
#toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);background:rgba(15,17,23,.92);border:1px solid var(--line);padding:10px 18px;border-radius:12px;z-index:90;font-weight:600;max-width:80vw;text-align:center}
#minimap{position:absolute;right:12px;top:12px;width:300px;height:218px;border:2px solid #ffffff44;border-radius:14px;opacity:.96;box-shadow:0 6px 24px #0008}
.srow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#1d212b;border-radius:10px;margin:6px 0}
#gl{filter:contrast(1.04) saturate(1.04)}
#hud::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.38) 100%);z-index:0}

#phone.panel{width:min(430px,94vw)}
#ph-cam{position:relative;height:200px;border-radius:12px;overflow:hidden;background:#0b0d12;margin-bottom:8px;border:1px solid var(--line)}
#ph-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}
#ph-cam.live #ph-video{display:block}
#ph-cam-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7a8394;font-size:34px;text-align:center}
#ph-cam.live #ph-cam-off{display:none}
#ph-tier{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(0,0,0,.6);border:1px solid currentColor}
#ph-camtoggle{position:absolute;top:6px;right:6px;padding:2px 6px}
#ph-susp{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
#ph-susp .lab{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:1.5px;font-weight:800;color:#fff;margin-bottom:3px}
#ph-susp .track{position:relative;height:12px;border-radius:7px;background:rgba(255,255,255,.18);overflow:visible}
#ph-susp-fill{height:100%;width:70%;border-radius:7px;background:linear-gradient(90deg,#2ecc71,#f1c40f 50%,#e74c3c);background-size:100vw 100%;transition:width .5s}
#ph-susp-mark{position:absolute;top:-4px;bottom:-4px;width:3px;background:#fff;box-shadow:0 0 6px #fff;border-radius:2px}
#news{position:absolute;left:50%;transform:translateX(-50%);bottom:70px;max-width:70vw;background:rgba(15,17,23,.9);border:1px solid #3a4252;border-left:4px solid #5da9ff;padding:8px 14px;border-radius:10px;font-size:13.5px}
#news.up{border-left-color:#2ecc71}#news.down{border-left-color:#e74c3c}
.wallet{background:#eaf6ea;border:1px solid #9bc99b;padding:6px 10px;border-radius:8px;margin:6px 0;display:inline-block}
#note-form{position:fixed;left:50%;top:38%;transform:translateX(-50%);width:min(440px,92vw);background:rgba(21,24,32,.97);border:1px solid var(--line);border-radius:14px;padding:14px;z-index:70}
#note-colors{display:flex;gap:8px;margin-top:8px}#note-colors i{width:26px;height:26px;border-radius:5px;cursor:pointer;border:2px solid transparent}#note-colors i.on{border-color:#fff}
#ph-products button{line-height:1.25}
#ph-hint{font-size:12px;color:#9fd8ee;margin:2px 0 6px}

/* Personnage */
.charcard{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.charview{background:radial-gradient(circle at 50% 30%,#2b3350,#12151c 70%);border-radius:14px;border:1px solid var(--line);text-align:center;padding-bottom:6px}
.charview canvas{width:100%;height:auto;display:block;cursor:grab;touch-action:none}
.oit{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card2);margin:5px 0;cursor:pointer;font-size:13px}
.oit b{font-size:14px}.oit.on{border-color:var(--acc);background:#33231c}.oit.lock{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.charcard{grid-template-columns:1fr}}

/* PC du patron */
#bpc{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(5,7,12,.72)}
.bpc-win{width:min(900px,95vw);height:min(640px,92vh);background:#12161f;border:1px solid #3a4358;border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.bpc-bar{display:flex;gap:14px;align-items:center;padding:10px 14px;background:linear-gradient(90deg,#1c2232,#2a2312);border-bottom:1px solid #3a4358}
.bpc-bar b{flex:1;letter-spacing:.5px;color:#e8cf8a}#bpc-wallet{font-weight:700}
.bpc-tabs{display:flex;gap:4px;padding:8px 10px 0;background:#171c28}
.bpc-tabs button{background:#202738;border:1px solid #333c52;border-bottom:0;color:#aab3c6;padding:8px 14px;border-radius:9px 9px 0 0;cursor:pointer;font:inherit}
.bpc-tabs button.on{background:#12161f;color:#fff;border-color:#d4af37}
.bpc-body{flex:1;overflow:auto;padding:14px}
.bpc-prest{background:#1b2130;border:1px solid #333c52;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.bpc-bar2{height:9px;border-radius:6px;background:#0c0f16;margin:7px 0;overflow:hidden}.bpc-bar2 i{display:block;height:100%;background:linear-gradient(90deg,#8a6a1c,#e8cf8a)}
.bcard{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#1b2130;border:1px solid #333c52;border-radius:10px;padding:11px 13px;margin-bottom:8px}
.bcard.cur{border-color:#d4af37;background:#241f12}.bcard.col{display:block}.bcard h4{margin:0 0 4px}.bcard p{margin:0}
.brow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:7px 0;border-top:1px solid #2a3144}
.tag{font-size:12px;padding:3px 9px;border-radius:99px;background:#2a3144;color:#aab3c6}.tag.on{background:#4a3a0e;color:#ffd77a}