:root{--gold:#d8b46a;--disp:"Cinzel","Trajan Pro",Georgia,serif}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:system-ui,sans-serif;color:#eee;touch-action:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none}
#hud .bars{position:absolute;left:28px;top:24px;display:flex;flex-direction:column;gap:5px}
#hud .bar{height:9px;background:rgba(0,0,0,.55);border:1px solid rgba(216,180,106,.45);position:relative;overflow:hidden}
#hud .bar u{position:absolute;inset:0;transform-origin:left;transition:transform .12s}
#hud .bar i{position:absolute;inset:0;transform-origin:left;background:#e8d3a0;opacity:.6;transition:transform .9s .35s}
#hud .hp{width:340px}#hud .hp u{background:linear-gradient(#b22424,#6e1010)}
#hud .fp{width:220px}#hud .fp u{background:linear-gradient(#3c6fd0,#1d3a7a)}
#hud .st{width:260px}#hud .st u{background:linear-gradient(#4aa04a,#1f5a1f)}
#hud .place{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--disp);font-size:clamp(28px,4vw,52px);letter-spacing:.12em;color:#f2e2b8;text-shadow:0 2px 18px #000;opacity:0;transition:opacity 1.2s;text-align:center;white-space:nowrap}
#hud .place.on{opacity:1}#hud .place small{display:block;font-size:.38em;letter-spacing:.4em;opacity:.8}
#hud .pelas{position:absolute;right:28px;bottom:26px;display:flex;align-items:baseline;gap:8px;font-family:var(--disp);color:#f2e2b8;text-shadow:0 2px 8px #000}
#hud .pelas b{font-size:26px}#hud .pelas span{font-size:12px;letter-spacing:.3em;opacity:.8}
#hud .msg{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);font-family:var(--disp);font-size:18px;letter-spacing:.1em;background:linear-gradient(90deg,transparent,rgba(0,0,0,.7),transparent);padding:10px 80px;opacity:0;transition:opacity .4s;white-space:nowrap}
#hud .msg.on{opacity:1}
#hud .map{position:absolute;right:24px;top:22px;width:180px;height:180px;border-radius:50%;overflow:hidden;border:2px solid rgba(216,180,106,.6);box-shadow:0 0 20px #000}
#boot{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,#1b1712,#000);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9;transition:opacity 1s}
#boot h1{font-family:var(--disp);font-weight:400;font-size:clamp(48px,9vw,120px);letter-spacing:.25em;line-height:.95;text-align:center;color:#e9d8ae;margin:0 0 30px;text-shadow:0 0 40px rgba(216,180,106,.35)}
#boot p{letter-spacing:.2em;font-size:13px;opacity:.75}
#boot .ld{width:260px;height:2px;background:rgba(255,255,255,.1);margin-top:14px}#boot .ld u{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
#boot.off{opacity:0;pointer-events:none}
@media (max-width:760px){#hud .hp{width:200px}#hud .fp{width:130px}#hud .st{width:160px}#hud .map{width:110px;height:110px}#hud .map canvas{width:110px;height:110px}}
#pick{position:fixed;inset:0;z-index:10;background:radial-gradient(circle at 50% 30%,rgba(40,32,20,.92),rgba(0,0,0,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px}
#pick h2{font-family:var(--disp);font-weight:400;letter-spacing:.3em;color:#e9d8ae;font-size:clamp(22px,3vw,34px);margin:0}
#pick .pk{display:grid;grid-template-columns:repeat(4,minmax(120px,200px));gap:16px}
#pick button{background:rgba(0,0,0,.4);border:1px solid rgba(216,180,106,.35);border-radius:10px;padding:10px;color:#eee;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;transition:transform .2s,border-color .2s}
#pick button:hover{transform:translateY(-4px);border-color:#e9d8ae}
#pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;filter:sepia(.25)}
#pick b{font-family:var(--disp);letter-spacing:.2em;font-weight:400;font-size:18px;color:#f2e2b8}#pick span{font-size:12px;opacity:.75;text-align:center}
#pick p{font-size:12px;letter-spacing:.08em;opacity:.6;text-align:center;max-width:720px}
@media (max-width:760px){#pick .pk{grid-template-columns:repeat(2,minmax(110px,160px))}}

/* táctil discreto */
#touch{position:fixed;inset:0;pointer-events:none;z-index:5}
#touch .jz{position:absolute;left:0;bottom:0;width:42%;height:62%;pointer-events:auto}
#touch .joy{position:absolute;width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);background:rgba(0,0,0,.12);opacity:0;transition:opacity .15s;pointer-events:none}
#touch .joy.on{opacity:1}#touch .joy i{position:absolute;left:38px;top:38px;width:44px;height:44px;border-radius:50%;background:rgba(233,211,155,.45)}
#touch .tb{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:178px;height:178px;pointer-events:none}
#touch .tb b{position:absolute;border-radius:50%;background:rgba(0,0,0,.26);border:1.5px solid rgba(255,255,255,.26);display:flex;align-items:center;justify-content:center;color:#f4e6c2;font-size:20px;pointer-events:auto;opacity:.78;-webkit-tap-highlight-color:transparent}
#touch .tb b.dn{background:rgba(233,211,155,.35);opacity:1}
#touch .b1{width:64px;height:64px;right:6px;bottom:8px;font-size:26px}
#touch .b2{width:48px;height:48px;right:84px;bottom:52px}
#touch .b3{width:52px;height:52px;right:72px;bottom:0;font-size:24px}
#touch .b4{width:42px;height:42px;right:16px;bottom:84px;font-size:18px}
#touch .b5{width:36px;height:36px;right:70px;bottom:112px;font-size:16px}
#touch .b6{width:36px;height:36px;right:120px;bottom:104px;font-size:16px}
@media (max-height:420px){#touch .tb{transform:scale(.85);transform-origin:100% 100%}}
/* botones de arriba: pantalla completa y mapa */
.topbtn{position:fixed;z-index:6;top:max(10px,env(safe-area-inset-top));width:38px;height:38px;border-radius:9px;background:rgba(0,0,0,.35);border:1px solid rgba(233,211,155,.35);color:#f1e2bb;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.topbtn:hover{background:rgba(0,0,0,.55)}
#btnFs{right:max(10px,env(safe-area-inset-right))}#btnMap{right:calc(max(10px,env(safe-area-inset-right)) + 46px)}
#street{position:fixed;z-index:4;right:max(10px,env(safe-area-inset-right));font-size:11px;letter-spacing:.06em;color:#f1e2bb;text-shadow:0 1px 3px #000;text-align:right;max-width:44vw;pointer-events:none}
/* mapa grande */
#bigmap{position:fixed;inset:0;z-index:20;background:#0c0b09;display:none;touch-action:none}
#bigmap.on{display:block}#bigmap canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
#bigmap .bm-top{position:absolute;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));display:flex;gap:10px;align-items:flex-start}
#bigmap .bm-search{flex:1;max-width:460px;position:relative}
#bigmap input{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:10px;border:1px solid rgba(233,211,155,.45);background:rgba(12,11,9,.85);color:#f4e6c2;font-size:15px;outline:none}
#bigmap .bm-res{display:flex;flex-direction:column;margin-top:4px;border-radius:10px;overflow:hidden}
#bigmap .bm-res button{text-align:left;padding:9px 14px;background:rgba(12,11,9,.92);border:0;border-bottom:1px solid rgba(255,255,255,.07);color:#f4e6c2;font-size:14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
#bigmap .bm-res button:hover{background:rgba(60,50,30,.95)}#bigmap .bm-res small{opacity:.55;font-size:11px;letter-spacing:.08em}
#bigmap .bm-x{margin-left:auto;width:42px;height:42px;border-radius:10px;border:1px solid rgba(233,211,155,.45);background:rgba(12,11,9,.85);color:#f4e6c2;font-size:18px;cursor:pointer}
#bigmap .bm-zoom{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
#bigmap .bm-zoom button{width:42px;height:42px;border-radius:10px;border:1px solid rgba(233,211,155,.45);background:rgba(12,11,9,.85);color:#f4e6c2;font-size:20px;cursor:pointer}
#bigmap .bm-sel{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:none;align-items:center;gap:14px;background:rgba(12,11,9,.92);border:1px solid rgba(233,211,155,.5);border-radius:12px;padding:10px 12px 10px 16px;max-width:92vw}
#bigmap.has-sel .bm-sel{display:flex}#bigmap .bm-sel b{display:block;color:#f4e6c2;font-size:15px}#bigmap .bm-sel small{color:#e9d39b;opacity:.7;font-size:11px;letter-spacing:.12em}
#bigmap .bm-go{padding:11px 16px;border-radius:9px;border:0;background:linear-gradient(#e9d39b,#b8954f);color:#1b140a;font-weight:700;letter-spacing:.1em;cursor:pointer;white-space:nowrap}
#bigmap .bm-help{position:absolute;left:12px;bottom:max(12px,env(safe-area-inset-bottom));font-size:11px;color:#f4e6c2;opacity:.5;max-width:40vw}
#bigmap.has-sel .bm-help{display:none}
#fade{position:fixed;inset:0;z-index:15;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;display:flex;align-items:center;justify-content:center;color:#e9d39b;letter-spacing:.3em;font-size:13px}
#fade.on{opacity:1;pointer-events:auto}
#hud .map{top:calc(max(10px,env(safe-area-inset-top)) + 46px);right:max(10px,env(safe-area-inset-right));width:150px;height:150px;pointer-events:auto;cursor:pointer}#hud .map canvas{width:150px;height:150px}
#street{top:calc(max(10px,env(safe-area-inset-top)) + 204px)}
@media (max-width:900px),(pointer:coarse){
  #hud .bars{left:max(12px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));gap:4px}#hud .bar{height:7px}
  #hud .hp{width:170px}#hud .fp{width:110px}#hud .st{width:130px}
  #hud .map{width:96px;height:96px;top:calc(max(10px,env(safe-area-inset-top)) + 44px)}#hud .map canvas{width:96px;height:96px}
  #street{top:calc(max(10px,env(safe-area-inset-top)) + 146px);font-size:10px}
  #hud .pelas{right:auto;bottom:auto;left:max(12px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 34px)}#hud .pelas b{font-size:17px}#hud .pelas span{font-size:9px}
  #hud .msg{font-size:13px;padding:8px 40px;bottom:30%}#hud .place{font-size:clamp(20px,5vw,34px);top:30%}
  .topbtn{width:34px;height:34px;font-size:16px}#btnMap{right:calc(max(10px,env(safe-area-inset-right)) + 42px)}
}
#gattr{display:none;position:fixed;z-index:4;left:max(8px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));font-size:10px;color:#fff;text-shadow:0 1px 2px #000;opacity:.85;pointer-events:none;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gattr b{font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:500;letter-spacing:-.01em}
body.g3d #gattr{display:block}
@media (pointer:coarse){#gattr{left:auto;right:200px}}
#btnView{right:calc(max(10px,env(safe-area-inset-right)) + 92px);display:none}body.g3d #btnView,body.g3dv #btnView{display:flex}
@media (max-width:900px),(pointer:coarse){#btnView{right:calc(max(10px,env(safe-area-inset-right)) + 84px)}}