html {
  height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  overscroll-behavior: none;
}

body, canvas, div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;

  cursor: default;
  color: #888;
  background-color: #333;

  text-align: center;
  font-family: Helvetica, Verdana, Arial, sans-serif;

  display: flex;
  flex-direction: column;

  touch-action: none;
  overscroll-behavior: none;
  
  /* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
  /* overflow cannot be applied in Cocos2dGameContainer, 
  otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
  overflow: hidden;
}

#Cocos2dGameContainer {
  position: absolute;
  margin: 0;
  left: 0px;
  top: 0px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
  touch-action: none;
  -webkit-user-drag: none;
}

a:link, a:visited {
  color: #666;
}

a:active, a:hover {
  color: #666;
}

p.header {
  font-size: small;
}

p.footer {
  font-size: x-small;
}


/* Login startup screen, scoped independently from the game canvas. */
:is(#splash,#hall-entry){position:fixed;inset:0;z-index:10000;width:100%;height:100%;overflow:auto;background:radial-gradient(ellipse at 50% 25%,#513013 0%,#20180f 40%,#100f10 85%);color:#f9ecd4;font-family:-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif}
:is(#splash,#hall-entry) .splash-content{box-sizing:border-box;min-height:100%;width:min(100%,420px);margin:auto;padding:clamp(28px,10vh,100px) 32px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center}
:is(#splash,#hall-entry) .splash-logo{width:clamp(140px,24vh,210px);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;border:1px solid #b98c40;box-shadow:0 0 55px #d5911726;margin-bottom:26px;flex-shrink:0}
:is(#splash,#hall-entry) .splash-logo img{position:absolute;width:190%;height:190%;max-width:none;left:-45%;top:-38%;object-fit:cover}
:is(#splash,#hall-entry) h1{font-size:25px;letter-spacing:3px;line-height:1.5;margin:0;color:#f7d995}
:is(#splash,#hall-entry) .splash-welcome{font-size:13px;letter-spacing:1px;color:#c9bda8;margin:10px 0 42px}
:is(#splash,#hall-entry) .splash-progress-heading{display:flex;justify-content:space-between;width:100%;font-size:13px;color:#e7d8bb;line-height:24px}
:is(#splash,#hall-entry) :is(#splash-percent,#hall-splash-percent){font-variant-numeric:tabular-nums;color:#f7d995}
:is(#splash,#hall-entry) .progress-bar{position:relative;width:100%;height:7px;margin-top:9px;overflow:hidden;border-radius:10px;background:#ffffff16;border:1px solid #b99b5233}
:is(#splash,#hall-entry) .progress-bar>span{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#a7792f,#f9db90);transition:width .2s ease}
:is(#splash,#hall-entry) .progress-bar.is-indeterminate>span{width:35%!important;animation:startup-slide 1.6s ease-in-out infinite}
:is(#splash,#hall-entry) .splash-hint{font-size:12px;line-height:1.8;color:#a99c86;margin:16px 0 0;text-align:center}
:is(#splash,#hall-entry) button{margin-top:20px;padding:10px 28px;border-radius:20px;border:1px solid #d3ad64;background:#3c2b16;color:#f7d995;font-size:14px;cursor:pointer}
@keyframes startup-slide{0%{transform:translateX(-110%)}100%{transform:translateX(390%)}}
@media(max-height:500px) and (orientation:landscape){:is(#splash,#hall-entry) .splash-content{padding:18px 32px}:is(#splash,#hall-entry) .splash-logo{width:100px;margin-bottom:10px}:is(#splash,#hall-entry) h1{font-size:20px}:is(#splash,#hall-entry) .splash-welcome{margin:4px 0 15px}}
@media(prefers-reduced-motion:reduce){:is(#splash,#hall-entry) .progress-bar>span{transition:none}:is(#splash,#hall-entry) .progress-bar.is-indeterminate>span{animation:none;margin:auto}}

#hall-entry{z-index:100002}