html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;font-family:system-ui;color:#fff}canvas{display:block}#hud{position:fixed;z-index:3;top:14px;left:14px;background:#0f172acc;padding:12px 16px;border-radius:12px;display:flex;gap:18px;align-items:center;backdrop-filter:blur(8px)}#status{color:#fbbf24}#handCount{color:#86efac;font-weight:800}#action{position:fixed;z-index:3;left:50%;bottom:38px;transform:translateX(-50%);background:#020617dd;padding:10px 16px;border-radius:10px;font-weight:750;pointer-events:none;min-height:20px}#start{position:fixed;z-index:4;inset:0;display:grid;place-items:center;background:#020617aa;font-size:28px;font-weight:800;cursor:pointer}.hidden{display:none!important}

#handInfo{position:fixed;z-index:3;right:18px;bottom:22px;width:min(340px,calc(100vw - 36px));background:#0f172ae8;border:1px solid #ffffff20;border-radius:14px;padding:14px 16px;box-shadow:0 12px 35px #0007;backdrop-filter:blur(10px);pointer-events:none}#handInfo .hand-info-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:#fbbf24;margin-bottom:5px}#handInfo .hand-info-name{font-size:18px;font-weight:850;line-height:1.15}#handInfo .hand-info-meta{margin-top:5px;color:#cbd5e1;font-size:14px;font-weight:650}#handInfo .hand-info-help{margin-top:9px;color:#94a3b8;font-size:12px}

#crosshair{position:fixed;z-index:3;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 2px #000)}#crosshair:before,#crosshair:after{content:'';position:absolute;background:#fff;border-radius:2px}#crosshair:before{width:2px;height:18px;left:8px;top:0}#crosshair:after{width:18px;height:2px;left:0;top:8px}#crosshair.target:before,#crosshair.target:after{background:#fbbf24}
#handInfo .hand-info-dest{margin-top:6px;color:#fde68a;font-size:13px;font-weight:800}

.mobile-help,.mobile-start,#mobileControls,#rotateNotice{display:none}
@media (pointer:coarse),(max-width:900px){
  #hud{top:8px;left:8px;right:8px;padding:8px 10px;gap:10px;font-size:11px;justify-content:space-between}
  #hud b{font-size:12px} .desktop-help,.desktop-start{display:none}.mobile-help,.mobile-start{display:inline}
  #mobileControls{display:block;position:fixed;inset:0;z-index:5;pointer-events:none;touch-action:none}
  #touchLook{position:absolute;right:0;top:0;width:58%;height:100%;pointer-events:auto;touch-action:none}
  #joystick{position:absolute;left:26px;bottom:30px;width:124px;height:124px;border-radius:50%;background:#0f172a88;border:2px solid #ffffff40;pointer-events:auto;touch-action:none}
  #stick{position:absolute;left:36px;top:36px;width:52px;height:52px;border-radius:50%;background:#fff9;box-shadow:0 3px 15px #0008}
  #interactBtn,#dropBtn{position:absolute;border:1px solid #ffffff55;background:#0f172acc;color:#fff;border-radius:50%;font-weight:900;pointer-events:auto;touch-action:manipulation}
  #interactBtn{right:30px;bottom:35px;width:74px;height:74px;font-size:30px}
  #dropBtn{right:120px;bottom:48px;width:52px;height:52px;font-size:25px}
  #mobileHand{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:auto}
  .mobile-slot{min-width:48px;max-width:74px;padding:5px 6px;border-radius:8px;background:#0f172add;border:2px solid #ffffff25;color:#fff;font-size:9px;line-height:1.1;text-align:center}
  .mobile-slot.active{border-color:#fbbf24;background:#422006e8}
  #handInfo{right:8px;bottom:125px;width:240px;padding:9px 11px} #handInfo .hand-info-name{font-size:14px}
  #action{bottom:112px;font-size:11px;max-width:60%;padding:7px 10px}
  #start{font-size:22px;z-index:9}
}
@media (pointer:coarse) and (orientation:portrait){
  #rotateNotice{display:grid;place-items:center;text-align:center;position:fixed;inset:0;z-index:20;background:#020617f5;font-size:28px;font-weight:800}
  #rotateNotice small{font-size:14px;color:#cbd5e1}
}

/* v9.1 - ajustes exclusivos móvil */
@media (pointer:coarse) {
 #hud { width:auto!important; min-width:0!important; max-width:72vw!important; padding:7px 11px!important; gap:2px!important; }
 #hud #handCount, #hud .desktop-help, #hud .mobile-help { display:none!important; }
 #hud > b { display:block!important; font-size:13px!important; line-height:1.15!important; }
 #hud #status { display:block!important; font-size:11px!important; line-height:1.2!important; margin:0!important; }
 .fullscreen-btn { border:1px solid rgba(255,255,255,.35); background:rgba(15,15,18,.82); color:#fff; border-radius:10px; padding:9px 12px; font:600 13px system-ui; touch-action:manipulation; }
 .corner-fullscreen { position:fixed; top:9px; right:9px; z-index:10010; font-size:18px; padding:6px 10px; }
 #fullscreenBtnRotate { margin-top:14px; }
}

/* v9.1.1: en móvil no mostramos la etiqueta contextual del punto de mira.
   El raycast/interacción sigue funcionando; solo desaparece el globo oscuro con nombre/destino. */
@media (pointer:coarse) {
  #action { display:none !important; }
}

/* v9.2 - opciones, privacidad y sistema legal */
#optionsBtn{position:fixed;right:12px;top:12px;z-index:10030;width:42px;height:42px;border:1px solid #ffffff40;border-radius:12px;background:#111d;color:#fff;font-size:21px;cursor:pointer}
.legal-modal{position:fixed;inset:0;z-index:11000;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px}
.legal-modal.hidden,.cookie-banner.hidden{display:none!important}
.legal-card{position:relative;width:min(680px,94vw);max-height:88vh;overflow:auto;background:#171719;color:#f5f5f5;border:1px solid #ffffff26;border-radius:18px;padding:24px;box-shadow:0 20px 70px #0009;font:15px/1.5 system-ui}
.legal-card h2{margin:0 42px 18px 0}.legal-card h3{margin:22px 0 8px;color:#ffd27a}.legal-card p,.legal-card li{color:#ddd}.legal-card a{color:#ffd27a}
.legal-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:10px;background:#ffffff12;color:#fff;font-size:26px;cursor:pointer}
.legal-menu-btn{display:block;width:100%;text-align:left;margin:9px 0;padding:14px 16px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff0c;color:#fff;font-weight:700;cursor:pointer}
.legal-menu-btn:hover{background:#ffffff16}.legal-back{border:0;background:transparent;color:#ffd27a;font-weight:700;cursor:pointer;padding:0 0 12px}
.legal-note{padding:12px;border-radius:10px;background:#ffb30017;border:1px solid #ffcf6640}
.privacy-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:13px 0;border-bottom:1px solid #ffffff16}
.privacy-row input{width:22px;height:22px}.privacy-row small{display:block;color:#aaa}
.cookie-banner{position:fixed;z-index:12000;left:14px;right:14px;bottom:14px;margin:auto;max-width:900px;background:#171719f5;color:#fff;border:1px solid #ffffff2d;border-radius:16px;padding:16px 18px;box-shadow:0 15px 60px #000b;font:14px/1.4 system-ui}
.cookie-banner p{margin:5px 0 0;color:#ddd}.cookie-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.cookie-actions button,.privacy-save{border:1px solid #ffffff2b;border-radius:10px;padding:10px 13px;background:#ffffff12;color:#fff;font-weight:700;cursor:pointer}.cookie-actions #cookieAccept,.privacy-save{background:#a86f18}
@media(pointer:coarse){#optionsBtn{top:auto;right:10px;bottom:10px;width:44px;height:44px}.legal-card{font-size:14px;padding:19px}.cookie-banner{bottom:8px;left:8px;right:8px}.cookie-actions button{flex:1 1 auto}}

.game-options-separator{height:1px;background:rgba(255,255,255,.12);margin:10px 0}
.game-action-btn.danger{border-color:rgba(220,80,80,.55)}
.game-action-btn.danger:hover{background:rgba(180,45,45,.24)}

.tutorial-modal{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,10,14,.92);backdrop-filter:blur(10px)}
.tutorial-modal.hidden{display:none}
.tutorial-card{width:min(720px,94vw);min-height:430px;background:linear-gradient(180deg,#27231e,#17191e);border:1px solid rgba(205,167,105,.5);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.65);padding:38px 42px;display:flex;flex-direction:column;justify-content:space-between;color:#f4ead8}
.tutorial-step{text-align:center}.tutorial-step.hidden{display:none}
.tutorial-kicker{font-size:.78rem;letter-spacing:.22em;color:#caa66a;font-weight:800;margin-bottom:12px}
.tutorial-step h1,.tutorial-step h2{font-family:Georgia,serif;margin:5px 0 18px;color:#fff4df}
.tutorial-step h1{font-size:2rem}.tutorial-step h2{font-size:1.65rem}
.tutorial-step p{font-size:1.05rem;line-height:1.65;max-width:590px;margin:0 auto;color:#ddd3c2}
.tutorial-visual{margin:28px auto 8px;padding:20px;border:1px solid rgba(202,166,106,.25);border-radius:12px;background:rgba(0,0,0,.18);font-size:1.25rem;font-weight:800;letter-spacing:.05em}
.tutorial-controls{display:grid;gap:10px;margin:26px auto 0;max-width:570px}.tutorial-controls span{padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.055)}
.tutorial-footer{margin-top:28px}.tutorial-dots{display:flex;justify-content:center;gap:7px;margin-bottom:20px}.tutorial-dots i{width:8px;height:8px;border-radius:50%;background:#655e53}.tutorial-dots i.active{background:#d3a85f;transform:scale(1.25)}
.tutorial-buttons{display:flex;justify-content:center;gap:12px}.tutorial-buttons button{border:1px solid rgba(202,166,106,.45);background:#29251f;color:#f8ead2;border-radius:9px;padding:11px 20px;font-weight:700;cursor:pointer}.tutorial-buttons button:hover{background:#3b3328}.tutorial-buttons button.hidden{display:none}#tutorialStart{background:#a87935;color:white}
@media(max-width:700px){.tutorial-card{padding:24px 20px;min-height:360px}.tutorial-step h1{font-size:1.55rem}.tutorial-step h2{font-size:1.35rem}.tutorial-step p{font-size:.94rem}.tutorial-visual{margin-top:18px;padding:14px}.tutorial-footer{margin-top:18px}}