/* ------------------------------------------------------------------ marco del juego
   Móvil (vertical): mundo e interfaz a pantalla completa.
   PC / horizontal: el mundo ocupa toda la ventana y la interfaz original va en una columna lateral. */
:root { --col-w: 100vw; }
html, body { margin: 0; height: 100%; background: #05040d; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; font-family: 'Exo2-Regular', sans-serif; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#game { position: absolute; inset: 0; overflow: hidden; background: #000; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#col { position: absolute; top: 0; bottom: 0; right: 0; width: var(--col-w); pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
#ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
@media (min-aspect-ratio: 4/5) {
  :root { --col-w: clamp(360px, 56.25vh, 46vw); }
  #col { background: linear-gradient(90deg, rgba(4, 6, 20, 0) 0, rgba(4, 6, 20, .38) 28px, rgba(4, 6, 20, .38) 100%);
    border-left: 1px solid rgba(110, 200, 255, .18); box-shadow: -18px 0 40px rgba(0, 0, 0, .35); }
}

/* ------------------------------------------------------------------ controles de cámara (PC) */
#hm-zoom { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30; }
#hm-zoom[hidden] { display: none; }
#hm-zoom button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(110, 200, 255, .35);
  background: rgba(12, 16, 40, .72); color: #cfeeff; font: 700 20px 'Exo2-Bold', sans-serif; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .15s, transform .15s; }
#hm-zoom button:hover { background: rgba(30, 60, 110, .85); transform: translateY(-1px); }
@media (max-aspect-ratio: 4/5) { #hm-zoom { display: none; } }

/* ------------------------------------------------------------------ animaciones de paneles y botones */
.ugui.hm-open { animation: hm-panel-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes hm-panel-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@media (hover: hover) { .ugui.btn:not(.disabled):hover > .ugui-img { filter: brightness(1.15) drop-shadow(0 0 6px rgba(120, 220, 255, .35)); } }
.ugui.btn > .ugui-img { transition: filter .12s; }

/* ------------------------------------------------------------------ UGUI */
.ugui-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ugui { position: absolute; box-sizing: border-box; pointer-events: auto; }
.ugui.pass { pointer-events: none; }
.ugui.noray, .ugui.noray * { pointer-events: none !important; }
.ugui-img { position: absolute; inset: 0; box-sizing: border-box; pointer-events: none; }
.ugui-text { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none;
  line-height: 1.12; overflow: visible; word-break: normal; overflow-wrap: normal; }
.ugui.btn { cursor: pointer; }
.ugui.btn.pressed > .ugui-img { filter: brightness(0.78); }
.ugui.btn.disabled > .ugui-img { filter: brightness(0.78) opacity(0.5); }
.ugui.btn.disabled { cursor: default; }

/* ------------------------------------------------------------------ capa Hacemelo */
.hm-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1b1640, #05040d 70%); color: #e8e6ff; }
.hm-overlay[hidden] { display: none; }
#hm-menu { background: rgba(5, 4, 13, 0.82); }
.hm-card { width: min(92vw, 420px); padding: 28px 24px; border-radius: 18px; background: rgba(20, 18, 48, 0.92);
  border: 1px solid #3a3480; box-shadow: 0 10px 40px #0008; font-family: 'Exo2-Regular', sans-serif; }
.hm-card h1 { margin: 0; font: 800 44px 'Exo2-ExtraBold', 'Exo2-Bold', sans-serif; letter-spacing: 1px;
  background: linear-gradient(90deg, #8fd3ff, #c58cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-card h2 { font: 700 20px 'Exo2-Bold', sans-serif; margin: 18px 0 10px; }
.hm-card h3 { font: 700 16px 'Exo2-Bold', sans-serif; margin: 14px 0 6px; }
.hm-sub { margin: 4px 0 18px; opacity: .8; }
.hm-bar { height: 8px; background: #2a2560; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.hm-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5fb8ff, #b77bff); transition: width .2s; }
#hm-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
#hm-list li { display: flex; gap: 8px; }
#hm-list button.play { flex: 1; text-align: left; }
.hm-card button, .hm-card input { font: 600 16px 'Exo2-Bold', sans-serif; border-radius: 10px; border: 1px solid #4d46a8;
  background: #2b2670; color: #fff; padding: 10px 14px; min-height: 44px; }
.hm-card button { cursor: pointer; }
.hm-card button:hover { background: #3a3394; }
.hm-card button.danger { background: #4a1f3a; border-color: #7a2c5c; }
.hm-card input { background: #110f2c; width: 100%; box-sizing: border-box; margin-bottom: 8px; font-size: 16px; }
#hm-new { display: grid; }
.hm-err { color: #ff8fa3; min-height: 1em; margin: 6px 0 0; }
.hm-note { font-size: 13px; opacity: .65; margin: 12px 0 0; }
.hm-row { display: flex; gap: 8px; margin-top: 16px; } .hm-row button { flex: 1; }
#hm-mods { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#hm-mods label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
#hm-mods small { display: block; opacity: .7; }
#hm-menu-btn { position: fixed; left: calc(100% - var(--col-w) / 2); top: calc(6px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 90; width: 36px; height: 36px; border-radius: 50%; opacity: .75;
  border: 1px solid #4d46a8; background: rgba(30, 26, 80, .85); color: #fff; font-size: 20px; cursor: pointer; }
#hm-menu-btn[hidden] { display: none; }
.hm-toast { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px); z-index: 50; pointer-events: none;
  padding: 10px 18px; border-radius: 12px; background: rgba(10, 8, 30, 0.88); border: 1px solid #5a52c8; color: #fff;
  font: 600 15px 'Exo2-Bold', sans-serif; opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap; }
.hm-toast.show { opacity: 1; transform: translate(-50%, 0); }
.hm-settings { align-items: center; margin-top: 0; }
.hm-card select { font: 600 15px 'Exo2-Bold', sans-serif; border-radius: 10px; border: 1px solid #4d46a8; background: #110f2c; color: #fff; padding: 9px; min-height: 44px; flex: 1; }
.hm-check { display: flex; align-items: center; gap: 8px; flex: 1; }
.hm-check input { width: 20px; height: 20px; margin: 0; min-height: 0; }
#col .hm-mod { pointer-events: auto; }