:root {
  --bg-top: #ffd08a;
  --bg-mid: #ff9f7d;
  --bg-bottom: #2b6975;
  --frame: #ffe6c2;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bottom) 100%);
  font-family: "Avenir Next", "Futura", "Trebuchet MS", sans-serif;
  overflow: hidden;
  touch-action: none;
  color: #fff8ea;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 8px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#gameFrame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#game {
  display: block;
  width: 390px;
  height: 844px;
  max-width: 100%;
  max-height: 100%;
  border-radius: 24px;
  border: 3px solid var(--frame);
  box-shadow: 0 14px 36px rgba(6, 34, 41, 0.46);
  background: #112d33;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#gameFrame input,
#gameFrame textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

#gameFrame:fullscreen {
  width: 100vw;
  height: 100vh;
  background: #0f2e36;
}

#gameFrame:fullscreen #game {
  border-radius: 0;
  border: none;
  box-shadow: none;
}