body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #060504;
    font-family: Arial, sans-serif;
    user-select: none;
  }

  #app {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 18%, rgba(255,190,90,.18), transparent 35%),
      linear-gradient(#1d1208, #070504);
  }

  #view {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  #mouseLayer {
    position: absolute;
    inset: 0;
    z-index: 50;
    cursor: grab;
    background: rgba(0,0,0,0);
    touch-action: none;
  }

  #mouseLayer:active {
    cursor: grabbing;
  }

  #hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.78);
    font-size: 14px;
    text-shadow: 0 2px 8px black;
    pointer-events: none;
    white-space: nowrap;
    z-index: 80;
  }

  #result {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%) scale(.95);
    color: white;
    font: bold 34px Arial, sans-serif;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    text-shadow: 0 2px 18px gold, 0 2px 6px black;
    pointer-events: none;
    z-index: 80;
  }

  #restart {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 90;
    color: white;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 22px;
    padding: 8px 18px;
    font: 14px Arial, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }

  #restart:hover {
    background: rgba(255,255,255,.23);
  }

  #error {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(760px, calc(100vw - 30px));
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0,0,0,.78);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 20px;
    font: 15px Arial, sans-serif;
    line-height: 1.45;
    display: none;
    z-index: 200;
  }

  #mouseIcon {
    position: absolute;
    z-index: 120;
    left: 0;
    top: 0;
    font-size: 26px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.85));
    pointer-events: none;
    opacity: 0;
    transition: opacity .08s linear;
  }