@font-face{font-family:"Bowlby One";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bowlby-one-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-semi-condensed-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2")}
/* Layout : le jeu occupe tout l'écran ; le HUD flotte dans les coins comme des autocollants sur un pare-brise. Look unique, sombre, assumé. */
:root{
  --asphalt:#17161a; --asphalt-2:#26242b; --cream:#fff3d1; --taxi:#ffc21a; --paw:#ff5a8a; --sea:#1d5fa8;
  --display:"Bowlby One","Impact","Arial Black",sans-serif;
  --body:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--sea);color:var(--cream);font-family:var(--body);font-weight:500;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.hud{position:fixed;z-index:2;pointer-events:none}
#brand{top:calc(env(safe-area-inset-top,0px) + 16px);left:16px;display:flex;align-items:center;gap:10px}
#brand img{width:46px;height:42px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
#brand b{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.01em;color:var(--taxi);-webkit-text-stroke:5px var(--asphalt);paint-order:stroke fill;transform:rotate(-3deg);display:block}
#brand b i{font-style:normal;color:var(--cream)}
#topbtns{top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;display:flex;gap:8px;pointer-events:auto}
#mapbtn,#pausebtn{font:700 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--taxi);border:3px solid var(--asphalt);border-radius:4px;padding:8px 14px;box-shadow:3px 3px 0 var(--asphalt);cursor:pointer}
#mapbtn:hover{background:var(--cream)}
#mapbtn:focus-visible,#closemap:focus-visible{outline:3px solid var(--paw);outline-offset:3px}
#radar{left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:168px;height:168px;border:4px solid var(--asphalt);border-radius:6px;box-shadow:4px 4px 0 rgba(0,0,0,.45);background:var(--sea);image-rendering:pixelated}
#zone{right:20px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);text-align:right;font-family:var(--display);font-size:clamp(22px,4.2vw,44px);line-height:1;color:var(--cream);-webkit-text-stroke:6px var(--asphalt);paint-order:stroke fill;max-width:min(60vw,640px);text-wrap:balance;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
#zone.on{opacity:1;transform:none}
#zone small{display:block;font:700 14px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--taxi);-webkit-text-stroke:4px var(--asphalt);paint-order:stroke fill;margin-bottom:6px}
#hint{left:50%;top:calc(env(safe-area-inset-top,0px) + 190px);transform:translateX(-50%);background:var(--asphalt);border:3px solid var(--cream);border-radius:4px;padding:10px 16px;font-size:16px;text-align:center;width:max-content;max-width:calc(100% - 32px);transition:opacity .8s;box-shadow:4px 4px 0 rgba(0,0,0,.4)}
#hint.off{opacity:0}
kbd{font:700 13px var(--body);background:var(--cream);color:var(--asphalt);border-radius:3px;padding:1px 6px;margin:0 1px}
#say{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 200px);transform:translateX(-50%);font:700 17px var(--body);background:var(--paw);color:var(--asphalt);border:3px solid var(--asphalt);border-radius:4px;padding:6px 12px;opacity:0;transition:opacity .3s;width:max-content;max-width:calc(100% - 32px)}
#say.on{opacity:1}
#drive{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;background:var(--asphalt);border:3px solid var(--cream);border-radius:4px;padding:6px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.4);width:max-content;max-width:calc(100% - 220px)}
#drive b{font:400 15px var(--display);color:var(--taxi)}
#drive span{font:700 22px var(--body);font-variant-numeric:tabular-nums;min-width:4.6em;text-align:right}
#drive small{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paw)}
#actbtn{right:16px;top:50%;pointer-events:auto;font:700 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--paw);border:3px solid var(--asphalt);border-radius:4px;padding:12px 14px;box-shadow:3px 3px 0 var(--asphalt);cursor:pointer}
#actbtn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
@media (max-width:560px){#drive{left:auto;right:16px;transform:none;bottom:auto;top:calc(env(safe-area-inset-top,0px) + 64px);max-width:calc(100% - 32px);flex-wrap:wrap}}
#jobbtn{right:16px;top:calc(50% + 56px);pointer-events:auto;font:700 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--taxi);border:3px solid var(--asphalt);border-radius:4px;padding:12px 14px;box-shadow:3px 3px 0 var(--asphalt);cursor:pointer}
#jobbtn:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
#stats{right:16px;top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column;align-items:flex-end;gap:2px;font:700 15px var(--body);font-variant-numeric:tabular-nums;-webkit-text-stroke:4px var(--asphalt);paint-order:stroke fill}
#stats b{font:400 20px var(--display);color:var(--taxi);-webkit-text-stroke:5px var(--asphalt);paint-order:stroke fill}
#stars{font-size:20px;letter-spacing:2px;color:var(--cream)}
#stars.hot{color:var(--paw);animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
#job{left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);transform:translateX(-50%);background:var(--taxi);color:var(--asphalt);border:3px solid var(--asphalt);border-radius:4px;padding:6px 12px;font:700 15px var(--body);font-variant-numeric:tabular-nums;box-shadow:3px 3px 0 var(--asphalt);width:max-content;max-width:calc(100% - 330px);text-align:center}
@media (max-width:760px){#job{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);max-width:calc(100% - 32px)}}
@media (prefers-reduced-motion:reduce){#stars.hot{animation:none}}
#hp{display:block;width:120px;height:9px;background:var(--asphalt);border:2px solid var(--asphalt);border-radius:3px;overflow:hidden}
#hp i{display:block;height:100%;width:100%;background:var(--paw)}
#touch{right:16px;top:calc(50% + 112px);display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:auto}
#touch button{font:700 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--cream);border:3px solid var(--asphalt);border-radius:4px;padding:12px 14px;box-shadow:3px 3px 0 var(--asphalt);cursor:pointer}
#hitbtn:focus-visible{outline:3px solid var(--paw);outline-offset:3px}
@media (hover:hover) and (pointer:fine){#touch{display:none}}
#stick,#knob{position:fixed;z-index:2;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
#stick{width:110px;height:110px;border:3px solid rgba(255,243,209,.7);background:rgba(23,22,26,.25)}
#knob{width:46px;height:46px;background:var(--taxi);border:3px solid var(--asphalt)}
#mapview{position:fixed;inset:0;z-index:5;background:rgba(23,22,26,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
#mapview h2{margin:0;font:400 clamp(20px,4vw,34px) var(--display);color:var(--taxi)}
#bigmap{border:4px solid var(--cream);border-radius:4px;image-rendering:pixelated;max-width:100%}
#closemap{font:700 15px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--cream);border:3px solid var(--asphalt);border-radius:4px;padding:8px 14px;cursor:pointer}
@media (max-width:560px){#radar{width:120px;height:120px}#brand b{font-size:20px}#brand img{width:36px;height:33px}}
@media (prefers-reduced-motion:reduce){#zone,#hint,#say{transition:none}}

#pausebtn{background:var(--cream)}
#pausebtn:focus-visible{outline:3px solid var(--paw);outline-offset:3px}
#ar{display:block;width:120px;height:7px;background:var(--asphalt);border:2px solid var(--asphalt);border-radius:3px;overflow:hidden}
#ar i{display:block;height:100%;background:#3b8fd0}
#tuto{left:50%;top:calc(env(safe-area-inset-top,0px) + 70px);transform:translateX(-50%);background:var(--asphalt);border:3px solid var(--taxi);border-radius:4px;padding:8px 14px;font:700 16px var(--body);text-align:center;width:max-content;max-width:min(560px,calc(100% - 32px));box-shadow:4px 4px 0 rgba(0,0,0,.4);text-wrap:balance}
#mapstats{margin:0;font:700 14px var(--body);font-variant-numeric:tabular-nums}
#legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font:500 14px var(--body)}
#legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;border:2px solid var(--asphalt)}
#bigmap{cursor:crosshair}
.screen{position:fixed;inset:0;z-index:8;background:rgba(23,22,26,.78);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.panel{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:min(520px,100%);background:var(--asphalt);border:4px solid var(--cream);border-radius:6px;padding:22px;box-shadow:8px 8px 0 rgba(0,0,0,.45)}
.panel h1{margin:0;font:400 clamp(44px,12vw,76px)/1 var(--display);color:var(--taxi);text-align:center;transform:rotate(-3deg)}
.panel h1 i{font-style:normal;color:var(--cream)}
.panel h2{margin:0;font:400 30px var(--display);color:var(--taxi)}
.tag{margin:0;text-align:center;font:700 17px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--paw)}
.panel button{font:700 15px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--asphalt);background:var(--cream);border:3px solid var(--asphalt);outline:2px solid var(--cream);border-radius:4px;padding:9px 14px;cursor:pointer}
.panel button.big{background:var(--taxi);padding:13px 14px;flex:1;text-align:left}
.panel button:hover{background:var(--paw)}
.panel button:focus-visible,.panel input:focus-visible,.panel select:focus-visible{outline:3px solid var(--paw);outline-offset:2px}
.row,.slot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.slot{flex-wrap:nowrap}
.row label{font:700 15px var(--body)}
.panel input[type=text],.panel select{font:700 16px var(--body);background:var(--cream);color:var(--asphalt);border:3px solid var(--asphalt);border-radius:4px;padding:7px 9px;min-width:0;flex:1;text-transform:uppercase}
.panel input[type=range]{flex:1;accent-color:var(--taxi)}
.panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--taxi)}
#codemsg{margin:0;min-height:1.3em;font:700 15px var(--body);color:var(--taxi)}
.scroll{overflow:auto;max-height:52vh}
.panel table{border-collapse:collapse;width:100%;font:500 15px var(--body)}
.panel th{text-align:left;font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paw);padding:4px 8px 4px 0}
.panel td{padding:5px 8px 5px 0;border-top:1px solid var(--asphalt-2);vertical-align:top}
.panel td:first-child{font-weight:700;color:var(--taxi);white-space:nowrap}
#binds{display:grid;grid-template-columns:1fr;gap:6px;max-height:34vh;padding:2px 4px 2px 0}
.bind{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 15px var(--body)}
.bind button{min-width:5.5em;text-transform:none;padding:6px 10px}
#bindmsg{margin:0;min-height:1.3em;font:700 14px var(--body);color:var(--taxi)}
#shoplist{display:grid;gap:6px;max-height:46vh;padding:2px 4px 2px 0}
#shopmoney{margin:0;font:700 16px var(--body);color:var(--taxi);font-variant-numeric:tabular-nums}
#shopmsg{margin:0;min-height:1.3em;font:700 14px var(--body);color:var(--paw)}
#obj{left:50%;top:calc(env(safe-area-inset-top,0px) + 16px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--asphalt);border:3px solid var(--taxi);border-radius:4px;padding:6px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.4);width:max-content;max-width:calc(100% - 430px);text-align:center}
#obj b{font:400 13px var(--display);color:var(--taxi)}
#obj span{font:700 16px var(--body);font-variant-numeric:tabular-nums}
@media (max-width:860px){#obj{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);max-width:calc(100% - 32px)}}
#dlg{position:fixed;z-index:6;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);width:min(680px,calc(100% - 32px));background:var(--asphalt);border:4px solid var(--cream);border-radius:6px;padding:14px 18px;box-shadow:8px 8px 0 rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px;cursor:pointer}
#dlg b{font:400 18px var(--display);color:var(--taxi)}
#dlg p{margin:0;font:500 19px/1.35 var(--body);max-width:62ch}
#dlg small{font:700 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paw)}
#dlgopts{display:flex;flex-direction:column;gap:8px}
#dlgopts:empty{display:none}
#dlgopts button{font:700 16px var(--body);text-align:left;color:var(--asphalt);background:var(--taxi);border:3px solid var(--asphalt);outline:2px solid var(--cream);border-radius:4px;padding:10px 14px;cursor:pointer}
#dlgopts button:hover{background:var(--paw)}
#dlgopts button:focus-visible{outline:3px solid var(--paw);outline-offset:2px}
#buslist,#proglist{display:grid;gap:6px;max-height:52vh;padding:2px 4px 2px 0}
.note{margin:0;font:700 15px var(--body);color:var(--paw)}
#progpct{color:var(--cream);margin-left:8px}
.prog{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;font:500 15px var(--body)}
.prog b{font:700 15px var(--body);font-variant-numeric:tabular-nums;color:var(--taxi)}
.prog i{grid-column:1/-1;display:block;height:8px;background:var(--asphalt-2);border-radius:3px;overflow:hidden}
.prog u{display:block;height:100%;background:var(--taxi);text-decoration:none}

/* Activités libres : même cartouche que les boulots, une ligne plus bas */
#act{left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);transform:translateX(-50%);background:var(--paw);color:var(--asphalt);border:3px solid var(--asphalt);border-radius:4px;padding:6px 12px;font:700 15px var(--body);font-variant-numeric:tabular-nums;box-shadow:3px 3px 0 var(--asphalt);width:max-content;max-width:calc(100% - 330px);text-align:center}
@media (max-width:760px){#act{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 190px);max-width:calc(100% - 32px)}}

/* Dialogues : portrait de celui qui parle, bandes noires de cinéma */
#dlgpic{position:absolute;left:10px;bottom:calc(100% - 6px);width:96px;height:96px;object-fit:contain;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.45));pointer-events:none}
#dlgpic.big{width:128px;height:128px}
#dlgpic[hidden]{display:none}
#dlg b{padding-left:104px}
body::before,body::after{content:"";position:fixed;z-index:5;left:0;right:0;height:0;background:#0c0b10;transition:height .3s;pointer-events:none}
body::before{top:0}body::after{bottom:0}
body.cine::before,body.cine::after{height:9vh}
@media (prefers-reduced-motion:reduce){body::before,body::after{transition:none}}

/* GTAPouf Online */
#onhud{display:none;left:16px;top:calc(env(safe-area-inset-top,0px) + 70px);max-width:min(420px,calc(100% - 240px));background:var(--asphalt);border:3px solid var(--cream);border-radius:4px;padding:5px 10px;font:700 13px var(--body);box-shadow:3px 3px 0 rgba(0,0,0,.4)}
body.online #onhud{display:block}
body.online #stats,body.online #tuto,body.online #job,body.online #obj,body.online #act,body.online #jobbtn,body.online #touch #wpbtn{display:none!important}
#online .row input[type=text],#online .row input[type=password]{flex:1;min-width:0;font:500 16px var(--body);padding:8px 10px;border:3px solid var(--cream);border-radius:4px;background:#fff8e6;color:var(--asphalt)}
#online .row input[type=color]{width:64px;height:34px;padding:0;border:3px solid var(--cream);border-radius:4px;background:none;cursor:pointer}
#online .row select{font:500 15px var(--body);padding:6px 8px;border-radius:4px}
#online .row{margin:8px 0;gap:10px;align-items:center;flex-wrap:wrap}
#online .row label{font:700 14px var(--body);min-width:9.5em}
.oncreator{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.oncreator canvas{width:220px;height:220px;background:#6fb04a;border:3px solid var(--cream);border-radius:6px;flex:none}
.oncreator .scroll{flex:1;min-width:240px;max-height:300px}
#onmsg{min-height:1.4em;color:var(--paw);font:700 15px var(--body)}