/* placeholder file so the link stops 404-ing */
:root { --ready: 1; }
/* input + layering fixes */
#gameDiv{ position:fixed; inset:0; z-index:0; }
canvas#game{ display:block; width:100vw; height:100vh; touch-action:none; cursor:crosshair; }

#overlay{ position:fixed; inset:0; z-index:10; pointer-events:none; }
#overlay #joystick-container,
#overlay #chat,
#overlay #jump-button{ pointer-events:auto; }
#overlay{ pointer-events:none !important; }
#overlay > *{ pointer-events:auto; }
canvas#game{ touch-action:none; cursor: crosshair !important; }
@media (hover: none) and (pointer: coarse){
  #joystick-container{ display:block !important; }
}
#overlay{ pointer-events:none !important; }
#overlay > *{ pointer-events:auto; }
canvas#game{ touch-action:none; cursor: crosshair !important; }
@media (hover:none) and (pointer:coarse){ #joystick-container{ display:block !important; } }
/* Joystick visibility */
#joystick-container{ display:none; }

@media (hover: none) and (pointer: coarse){
  #joystick-container{ display:block; }
}
/* Joystick hidden by default */
#joystick-container, #jump-button { display: none !important; }

/* Fallback: show on coarse (touch) pointers */
@media (hover: none) and (pointer: coarse){
  #joystick-container { display: block !important; }
  #jump-button { display: flex !important; }
}
/* --- Touch UI visibility gate --- */
[data-touch-ui]{ display:none !important; }
html.touch [data-touch-ui]{ display:block !important; }
/* jump button is flex, not block */
html.touch #jump-button[data-touch-ui]{ display:flex !important; }
/* Touch UI gate: hidden by default... */
[data-touch-ui]{ display:none !important; }
/* ...shown on real touch devices */
html.touch [data-touch-ui]{ display:block !important; }
html.touch #jump-button[data-touch-ui]{ display:flex !important; } /* jump is flex */
#overlay{ pointer-events:none; }
#overlay > *{ pointer-events:auto; }
canvas#game{ touch-action:none; cursor: crosshair; }
/* --- touch-only joystick/jump --- */
#joystick-container, #jump-button { display:none !important; }

/* Show on devices that report no hover / coarse pointer (mobile, most tablets) */
@media (hover: none), (any-hover: none), (pointer: coarse), (any-pointer: coarse) {
  #joystick-container { display:block !important; }
  #jump-button { display:flex !important; }
}

/* Ensure overlay doesn't block input; children stay interactive */
#overlay { pointer-events:none; }
#overlay > * { pointer-events:auto; }

/* Canvas: allow gestures to reach game, show crosshair when supported */
canvas#game { touch-action:none; cursor: crosshair; }
/* --- touch-only controls (strict) --- */
#joystick-container, #jump-button { display:none !important; }

@media (hover: none) and (pointer: coarse) {
  #joystick-container { display:block !important; }
  #jump-button { display:flex !important; }
}
/* touch-only controls (strict) */
#joystick-container, #jump-button { display:none !important; }

@media (hover: none) and (pointer: coarse) {
  #joystick-container { display:block !important; }
  #jump-button { display:flex !important; }
}
/* --- touch-only controls (strict) --- */
#joystick-container, #jump-button { display:none !important; }

@media (hover: none) and (pointer: coarse) {
  #joystick-container { display:block !important; }
  #jump-button { display:flex !important; }
}
/* touch controls hidden by default; JS will reveal on real touch */
#joystick-container, #jump-button { display: none; }
/* --- touch controls: class-gated --- */
#joystick-container, #jump-button { display: none !important; }
.touch-ui #joystick-container { display: block !important; }
.touch-ui #jump-button        { display: flex !important; }
/* --- touch-only controls (class gated) --- */
html:not(.touch-ui) #joystick-container,
html:not(.touch-ui) #jump-button { display:none !important; }

.touch-ui #joystick-container { display:block !important; }
.touch-ui #jump-button        { display:flex  !important; }
/* --- gameplay viewport hardening --- */
#gameDiv{ position:fixed; inset:0; background:#000; z-index:0; }
#container{ position:absolute; inset:0; }
#overlay{ position:absolute; inset:0; pointer-events:none; z-index:10; }
#overlay #joystick-container, #overlay #jump-button, #overlay #chat{ pointer-events:auto; }
canvas#game{ display:block; width:100vw; height:100vh; background:#000; }
/* ===== Hellfire theme (overlay) ===== */
#gameDiv{
  background: radial-gradient(120% 120% at 50% 30%, #140000 0%, #080001 55%, #000 100%);
}

/* overlay layers sit above the canvas, below UI; never steal input */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:8; }

.fx-fog{
  background: conic-gradient(
    from 0deg,
    rgba(255,80,0,.06),
    rgba(255,80,0,0) 12%,
    rgba(150,0,255,.06) 24%,
    rgba(150,0,255,0) 36%,
    rgba(255,0,60,.06) 48%,
    rgba(255,0,60,0) 60%,
    rgba(255,140,0,.06) 72%,
    rgba(255,140,0,0) 84%,
    rgba(255,80,0,.06) 100%
  );
  filter: blur(90px) saturate(130%);
  mix-blend-mode: screen;
  animation: fx-swirl 60s linear infinite;
  opacity: .6;
}

.fx-embers{
  --dot: radial-gradient(circle, rgba(255,180,60,.9) 0 40%, rgba(255,180,60,0) 70%);
  --dot2: radial-gradient(circle, rgba(255,70,0,.9) 0 35%, rgba(255,70,0,0) 65%);
  background:
    var(--dot) 8% 95%/6px 6px no-repeat,
    var(--dot2) 21% 98%/5px 5px no-repeat,
    var(--dot) 38% 96%/7px 7px no-repeat,
    var(--dot2) 57% 99%/6px 6px no-repeat,
    var(--dot) 76% 97%/5px 5px no-repeat,
    var(--dot2) 91% 94%/6px 6px no-repeat;
  animation: fx-rise 12s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,130,30,.5)) drop-shadow(0 0 10px rgba(255,30,0,.35));
  opacity: .9;
}

/* elegant fiery frame around play area */
#hellframe{ position:fixed; inset:0; pointer-events:none; z-index:9; }
#hellframe::before{
  content:"";
  position:absolute; inset: clamp(10px,1.2vw,18px);
  border-radius: 22px;
  /* glowing inset edge */
  box-shadow:
    inset 0 0 30px rgba(255,100,20,.45),
    inset 0 0 90px rgba(180,0,0,.35),
    0 0 40px rgba(255,60,0,.20);
  /* faint aura + subtle runic ticks via conic repeat */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,180,0,.12), transparent 60%),
    radial-gradient(120% 60% at 50% 110%, rgba(255,80,0,.12), transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255,120,0,.10) 0 6deg, transparent 6deg 18deg);
  mix-blend-mode: screen;
}

/* keep game UI above the overlays */
#overlay{ z-index:10; pointer-events:none; }
#overlay #joystick-container, #overlay #jump-button, #overlay #chat{ pointer-events:auto; }

@keyframes fx-swirl { to { transform: rotate(360deg); } }
@keyframes fx-rise {
  0%   { transform: translateY(0);     opacity:.95; }
  50%  { transform: translateY(-35vh); opacity:.85; }
  100% { transform: translateY(-70vh); opacity:.95; }
}
/* black mask overlay above game, ignores input */
#maskCanvas{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9; /* your joystick/chat should already be higher, e.g., 10+ */
}
/* gameplay canvas should be black, not white */
canvas#game{ background:#000 !important; }
#maskCanvas{
  position: fixed; inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index: 9;
  background: transparent !important; /* ensure no white fill */
}
canvas#game{ background:#000 !important; }
#maskCanvas{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9; background:transparent; }
canvas#game{ background:#000 !important; }